/* ---------- Theme ----------
   ClassWave ships with a white + purple identity and two modes: light
   (default) and dark, toggled via [data-theme] on <html> (see
   src/hooks/useTheme.jsx). Everything below reads these custom properties -
   add a color, don't hardcode one. */

:root,
:root[data-theme='light']{
  --bg: #f8f8fa;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: #111114;
  --text-dim: #696970;
  --accent: #17171b;
  --accent-dim: #35353b;
  --accent-contrast: #ffffff;
  --green: #23865b;
  --amber: #956300;
  --red: #bd3434;
  --line: rgba(20,20,24,0.12);
  --shadow: 0 18px 40px -22px rgba(0,0,0,0.22);
  --radius: 16px;
  color-scheme: light;
}

:root[data-theme='dark']{
  --bg: #080809;
  --surface: #111113;
  --surface-raised: #18181b;
  --text: #f6f6f7;
  --text-dim: #a4a4ad;
  --accent: #f3f3f5;
  --accent-dim: #d9d9df;
  --accent-contrast: #111114;
  --green: #75d6a4;
  --amber: #f0c36b;
  --red: #ff8989;
  --line: rgba(255,255,255,0.13);
  --shadow: 0 18px 45px -20px rgba(0,0,0,0.7);
  --radius: 16px;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:linear-gradient(145deg,var(--bg),color-mix(in srgb,var(--surface) 88%,var(--bg)));
  color:var(--text);
  font-family:var(--cw-font-site, 'Inter'), system-ui, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--surface); }

h1,h2,h3{
  font-family:var(--cw-font-headings, 'Inter'), system-ui, sans-serif;
  font-weight:700;
  margin:0;
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  color:var(--accent);
  display:block;
  margin-bottom:6px;
}
.mono{ font-family:'JetBrains Mono', monospace; }
.muted{ color:var(--text-dim); }
.small{ font-size:0.8rem; }

a{ color:inherit; }
button{ font-family:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

*:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- Landing page ---------- */

header.site{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(var(--bg) 78%, transparent);
  padding:22px 0 10px;
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; }
.landing-nav-actions{ display:flex; align-items:center; gap:8px; }
.landing-nav-actions .nav-audience-link{ font-family:'Inter',sans-serif; font-size:.72rem; padding:7px 10px; opacity:.82; }
.landing-nav-actions .nav-cta:not(.nav-audience-link){ font-family:'Inter',sans-serif; font-size:.76rem; padding:7px 12px; font-weight:600; }
.wordmark{
  display:flex; align-items:center; gap:10px;
  font-family:'Inter', serif;
  font-size:1.35rem;
  font-weight:700;
  text-decoration:none;
}
.wordmark .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.wordmark-logo{
  height:28px; width:auto; display:block; object-fit:contain;
}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line); background:transparent;
  font-size:1.05rem; line-height:1; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.theme-toggle:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.theme-toggle:active{ transform:scale(0.94); }
.notif-bell{ position:relative; }
.notif-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; padding:0 3px;
  border-radius:999px;
  background:var(--danger, #e5484d); color:#fff;
  font-size:0.62rem; font-weight:700; line-height:16px; text-align:center;
  font-family:'JetBrains Mono', monospace;
}
.nav-cta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  border:1px solid var(--line);
  padding:9px 16px;
  border-radius:999px;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.nav-cta:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.nav-cta-solid{ background:var(--accent); color:var(--surface); border-color:var(--accent); font-weight:600; }
.google-logo{ width:18px; height:18px; flex:0 0 18px; display:block; }

.hero{ padding:64px 0 40px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text);
  border:1px dashed var(--line);
  padding:6px 12px; border-radius:999px; margin-bottom:22px;
}
.badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--green); animation:pulse 2.2s infinite ease-in-out;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.5); } }

h1.headline{ font-size:clamp(2.4rem, 5vw, 3.7rem); line-height:1.04; }
h1.headline em{ font-style:normal; color:var(--accent); }
.sub{ margin-top:20px; font-size:1.08rem; color:var(--text-dim); max-width:46ch; }

.signup{ margin-top:32px; display:flex; gap:10px; max-width:440px; }
.signup input{
  flex:1;
  background:color-mix(in srgb, var(--text) 6%, transparent);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
}
.signup input::placeholder{ color:var(--text-dim); }
.signup input:focus{ outline:none; border-color:var(--accent); background:color-mix(in srgb, var(--text) 9%, transparent); }
.signup button{
  background:var(--accent); color:var(--surface); border:none;
  border-radius:10px; padding:14px 20px; font-weight:700; font-size:0.95rem;
  cursor:pointer; transition:background .2s ease, transform .15s ease;
}
.signup button:hover{ background:color-mix(in srgb, var(--accent) 82%, white); }
.signup button:active{ transform:scale(0.97); }
.signup-note{ margin-top:10px; font-size:0.78rem; color:var(--text-dim); }
.form-msg{ margin-top:12px; font-family:'JetBrains Mono', monospace; font-size:0.8rem; color:var(--green); min-height:1em; }
.signup.center{ margin:0 auto; }

.wave-panel{ position:relative; background:color-mix(in srgb, var(--text) 4%, transparent); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.wp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.wp-title{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--text-dim); letter-spacing:0.06em; text-transform:uppercase; }
.wp-code{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); padding:3px 9px; border-radius:999px; }
.wp-disclaimer{ font-size:0.76rem; color:var(--text-dim); margin:0 0 16px; line-height:1.45; }
.bars{ display:flex; align-items:flex-end; gap:5px; height:120px; }
.bars span{
  flex:1; background:linear-gradient(180deg, var(--accent), var(--accent-dim));
  border-radius:3px 3px 0 0; animation:eq 1.4s ease-in-out infinite; transform-origin:bottom;
}
@keyframes eq{ 0%,100%{ transform:scaleY(0.35); } 50%{ transform:scaleY(1); } }

/* This card is a fixed "paper preview" mockup - it intentionally stays
   light regardless of the site theme, like a physical printout would. */
.score-card{ margin-top:20px; background:#FFFFFF; color:#241B3B; border-radius:10px; padding:16px 18px; box-shadow:var(--shadow); }
.score-card .row1{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.score-card .track{ font-weight:700; font-size:0.95rem; }
.score-card .artist{ font-size:0.8rem; color:#6b6180; }
.score-bar-row{ margin-top:12px; display:flex; align-items:center; gap:10px; }
.score-track{ flex:1; height:6px; background:#ECE7F7; border-radius:99px; overflow:hidden; }
.score-fill{ height:100%; background:var(--green); border-radius:99px; }
.score-num{ font-family:'JetBrains Mono', monospace; font-size:0.78rem; font-weight:600; }
.score-why{ margin-top:10px; font-size:0.78rem; color:#6b6180; border-top:1px dashed #E4DDF5; padding-top:10px; }

section{ padding:52px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:34px; border-bottom:1px solid var(--line); padding-bottom:18px; }
.section-head h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); }

.panels{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.panel{ background:color-mix(in srgb, var(--text) 4.5%, transparent); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; }
.panel .who{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:8px; display:block; }
.panel h3{ font-size:1.35rem; margin-bottom:14px; }
.panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.panel li{ font-size:0.9rem; color:var(--text-dim); padding-left:18px; position:relative; }
.panel li::before{ content:''; position:absolute; left:0; top:0.55em; width:6px; height:6px; border-radius:50%; background:var(--text-dim); opacity:0.5; }
.panel.safety li::before{ background:var(--green); opacity:1; }
.panel.teacher li::before{ background:var(--accent); opacity:1; }
.panel.student li::before{ background:#8fb7c9; opacity:1; }

.mod-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.mod-chip{ border-radius:var(--radius); padding:20px; border:1px solid var(--line); }
.mod-chip.g{ background:color-mix(in srgb, var(--green) 9%, transparent); }
.mod-chip.a{ background:color-mix(in srgb, var(--amber) 9%, transparent); }
.mod-chip.r{ background:color-mix(in srgb, var(--red) 9%, transparent); }
.mod-chip .lamp{ width:11px; height:11px; border-radius:50%; margin-bottom:12px; }
.mod-chip.g .lamp{ background:var(--green); }
.mod-chip.a .lamp{ background:var(--amber); }
.mod-chip.r .lamp{ background:var(--red); }
.mod-chip h4{ font-family:'Inter', serif; font-size:1.05rem; font-weight:600; margin:0 0 6px; }
.mod-chip p{ font-size:0.85rem; color:var(--text-dim); margin:0; }

footer{ padding:60px 0 40px; border-top:1px solid var(--line); text-align:center; }
footer h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:14px; }
footer p{ color:var(--text-dim); margin-bottom:28px; }
.foot-meta{ margin-top:56px; display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--text-dim); font-family:'JetBrains Mono', monospace; }

/* ---------- Auth pages ---------- */

.auth-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; }
.auth-card{
  width:100%; max-width:420px;
  background:color-mix(in srgb, var(--text) 4%, transparent);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px;
}
.auth-wordmark{ margin-bottom:24px; }
.auth-card h1{ font-size:1.7rem; margin-bottom:20px; }
.auth-switch{ margin-top:20px; font-size:0.88rem; color:var(--text-dim); text-align:center; }
.auth-switch a{ color:var(--accent); text-decoration:underline; }

.role-fieldset{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:6px 0 18px; }
.role-fieldset legend{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); padding:0 6px; }
.role-option{ display:flex; align-items:center; gap:8px; font-size:0.92rem; margin-bottom:6px; }
.role-option-hint{ font-weight:400; }

/* ---------- App shell ---------- */

.app-nav{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.app-nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.app-nav-links{ display:flex; align-items:center; gap:6px; }
.app-nav-link{
  font-size:0.9rem; padding:8px 14px; border-radius:999px; text-decoration:none;
  color:var(--text-dim); transition:background .15s ease, color .15s ease;
}
.app-nav-link:hover{ color:var(--text); }
.app-nav-link.is-active{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.nav-signout{ margin-left:8px; }
.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px; cursor:pointer; }
.nav-toggle-bar{ width:20px; height:2px; background:var(--text); }

@media (max-width: 880px){
  /* Log in / Sign up stay put as the primary CTAs; the "For students" /
     "For teachers" quick-jump links (added alongside the same-named panel
     ids below) are a nice-to-have on a full-width header and just crowd a
     stacked one, so they drop off here rather than wrapping awkwardly. */
  .nav-audience-link{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .panels{ grid-template-columns:1fr; }
  .mod-strip{ grid-template-columns:1fr; }
  .foot-meta{ flex-direction:column; gap:10px; text-align:center; }
  .dashboard-grid{ grid-template-columns:1fr !important; }
  .card-grid{ grid-template-columns:1fr !important; }
  .discover-grid{ grid-template-columns:1fr !important; }

  .nav-toggle{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; }
  .app-nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:10px 16px 16px;
    max-height:calc(100vh - 60px); overflow-y:auto;
  }
  .app-nav-links.is-open{ display:flex; }
  .app-nav-link{ padding:14px 10px; }
  .app-nav-links .theme-toggle{ align-self:flex-start; margin:6px 0; }
  .app-nav-links .nav-signout{ width:100%; margin-left:0; margin-top:4px; }

  /* Touch targets: bump icon-only controls to the ~44px minimum on
     touch-sized viewports rather than leaving them at desktop sizing. */
  .theme-toggle{ width:44px; height:44px; }
  .now-playing-toggle{ width:44px; height:44px; }
  .now-playing-skip{ width:44px; height:44px; }
  .now-playing-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
  .modal-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
  .avatar-swatch{ width:36px; height:36px; }
  .filter-tab{ padding:10px 14px; }
  .song-card-play{ font-size:1.3rem; }

  .wrap{ padding:0 20px; }
  section{ padding:40px 0; }
  .page{ padding:28px 0 64px; }
  .auth-page{ padding:20px; }
  .auth-card{ padding:28px 22px; }

  .track-detail-art{ width:76px; height:76px; }
  .song-card-footer{ margin-left:0; flex-basis:100%; align-self:flex-start; }
  .profile-header-row{ flex-wrap:wrap; }
  .admin-row{ flex-wrap:wrap; row-gap:8px; }
}

@media (max-width: 420px){
  .wrap{ padding:0 16px; }
  .hero{ padding:44px 0 28px; }
  .signup{ flex-direction:column; }
  .signup button{ width:100%; }
  .hero-ctas .nav-cta,
  footer .nav-cta{ width:100%; }
  .hero-ctas{ flex-direction:column; }
  .wave-panel{ padding:20px; }
  .auth-card{ padding:24px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .bars span, .badge::before{ animation:none; }
}

/* ---------- Shared app UI ---------- */

.page{ padding:36px 0 64px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.page-head-actions{ display:flex; gap:10px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Inter', sans-serif; font-weight:600; font-size:0.92rem;
  padding:11px 18px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .15s ease, opacity .15s ease;
}
.btn:disabled{ opacity:0.6; cursor:not-allowed; }
.btn-primary{ background:var(--accent); color:var(--surface); }
.btn-primary:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 82%, white); }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-secondary:hover:not(:disabled){ border-color:var(--accent); }
.btn-danger{ background:transparent; color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, transparent); }
.btn-danger:hover:not(:disabled){ background:color-mix(in srgb, var(--red) 12%, transparent); }

.card{
  background:color-mix(in srgb, var(--text) 4.5%, transparent);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.card h2{ font-size:1.2rem; margin-bottom:16px; }
.card h3{ font-size:1.05rem; margin-bottom:6px; }

.dashboard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.class-card-link{ text-decoration:none; color:inherit; display:block; }
.chip{
  display:inline-block; margin-top:10px; font-family:'JetBrains Mono', monospace; font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.06em; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
  padding:3px 9px; border-radius:999px;
}

.simple-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.simple-list a{ text-decoration:underline; }

/* Discover page (src/pages/Discover.jsx) */
.discover-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.discover-grid > .card:first-child{ grid-column:1 / -1; }
.discover-rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.discover-rank-item, .classmate-row{
  display:flex; align-items:center; gap:12px;
}
.discover-rank-num{
  width:22px; flex-shrink:0; text-align:center; font-family:'JetBrains Mono', monospace;
  font-size:0.85rem; color:var(--text-dim);
}
.discover-rank-art{
  width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0;
  background:color-mix(in srgb, var(--text) 6%, transparent);
}
.discover-rank-art-fallback{ display:flex; align-items:center; justify-content:center; color:var(--text-dim); }
.discover-rank-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.discover-rank-title{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.classmate-row-who{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.search-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.search-chip{
  display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--text) 6%, transparent);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 14px; font-size:0.85rem;
}
.search-chip-count{
  font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); border-radius:999px; padding:2px 7px;
}

.field{ margin-bottom:16px; }
.field-label{ display:block; font-size:0.85rem; margin-bottom:6px; color:var(--text-dim); }
.field-input{
  width:100%; background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; color:var(--text); font-family:inherit; font-size:0.95rem;
}
.field-input:focus{ outline:none; border-color:var(--accent); background:color-mix(in srgb, var(--text) 9%, transparent); }
.field-input-error{ border-color:var(--red); }
.field-hint{ margin:6px 0 0; font-size:0.78rem; color:var(--text-dim); }
.field-error{ margin:6px 0 0; font-size:0.82rem; color:var(--red); }

select.field-input{ min-width:200px; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,12,38,0.55); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:50;
}
.modal{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; width:100%; max-width:420px;
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-close{ background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer; line-height:1; }

.state-block{ text-align:center; padding:48px 24px; color:var(--text-dim); }
.state-block h3{ color:var(--text); margin-bottom:8px; }
.empty-state{ border:1px dashed var(--line); border-radius:var(--radius); }
.error-state{ border:1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius:var(--radius); }

.spinner{
  width:28px; height:28px; margin:0 auto 14px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.config-warning{
  background:color-mix(in srgb, var(--amber) 12%, transparent); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  color:var(--text); border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:0.88rem;
}

.status-pill{
  font-family:'JetBrains Mono', monospace; font-size:0.7rem; padding:4px 9px;
  border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.status-pill .swatch{ width:7px; height:7px; border-radius:50%; }
.status-green{ background:color-mix(in srgb, var(--green) 18%, transparent); color:var(--green); }
.status-green .swatch{ background:var(--green); }
.status-amber{ background:color-mix(in srgb, var(--amber) 18%, transparent); color:var(--amber); }
.status-amber .swatch{ background:var(--amber); }
.status-red{ background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); }
.status-red .swatch{ background:var(--red); }

.song-card-list{ display:flex; flex-direction:column; gap:14px; }
.song-card{
  display:flex; gap:14px; align-items:flex-start;
  background:color-mix(in srgb, var(--text) 3%, transparent); border:1px solid var(--line); border-radius:12px; padding:14px;
  flex-wrap:wrap;
}
.song-card-art{ width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; background:color-mix(in srgb, var(--text) 8%, transparent); }
.song-card-art img{ width:100%; height:100%; object-fit:cover; }
.song-card-art-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--text-dim); }
.song-card-body{ flex:1; min-width:160px; }
.song-card-title{ font-weight:600; margin:0; }
.song-card-artist{ margin:2px 0 8px; color:var(--text-dim); font-size:0.88rem; }
.song-card-score{ display:flex; align-items:center; gap:10px; }
.song-card-flags{ margin:8px 0 0; font-size:0.78rem; color:var(--amber); }
.song-card-flag-terms{ font-family:'JetBrains Mono', monospace; opacity:0.85; }
.song-card-flags-note{ display:block; margin-top:2px; color:var(--text-dim); font-style:italic; }
.song-card-footer{ margin-left:auto; align-self:center; }

.request-search{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.request-search .field{ flex:1; min-width:220px; margin-bottom:0; }

.moderation-actions{ display:flex; gap:10px; margin-top:6px; }

.profile-info{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; }
.profile-info dt{ color:var(--text-dim); font-size:0.85rem; }
.profile-info dd{ margin:0; }

.toggle-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:0.92rem; }

/* --- Explicit tag on song titles --- */
.explicit-tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:6px; border-radius:3px;
  background:color-mix(in srgb, var(--text) 18%, transparent);
  color:var(--text); font-size:0.62rem; font-weight:700; vertical-align:middle;
}

/* --- Song card play button + lyrics links --- */
.song-card-art{ position:relative; }
.song-card-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.35); color:#fff; border:none; cursor:pointer;
  font-size:1.1rem; opacity:0; transition:opacity 0.15s ease;
}
.song-card-art:hover .song-card-play,
.song-card-play:focus-visible{ opacity:1; }
.song-card-lyrics{ margin:8px 0 0; font-size:0.78rem; color:var(--text-dim); }
.song-card-lyrics a{ color:inherit; text-decoration:underline; }

.review-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* --- Clickable song card (Requests search results -> TrackDetail) --- */
.song-card.is-clickable .song-card-art{ cursor:pointer; }
.song-card-title-btn{
  background:none; border:none; padding:0; margin:0; text-align:left; cursor:pointer;
  font: inherit; font-weight:600; color:var(--text); display:inline;
}
.song-card-title-btn:hover{ text-decoration:underline; color:var(--accent); }

/* --- Flagged terms (SongCard + TrackDetail), profanity always in red --- */
.flag-term-profanity{ color:var(--red); font-weight:700; }
.track-detail-flags{ margin:12px 0 0; font-size:0.86rem; color:var(--amber); }
.track-detail-flags-note{ display:block; margin-top:2px; color:var(--text-dim); font-style:italic; }
.track-detail-zero-tolerance{
  margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:0.85rem;
  background:color-mix(in srgb, var(--red) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent); color:var(--text);
}

/* --- Track detail page --- */
.track-detail-grid{ max-width:640px; }
.track-detail-head{ display:flex; gap:16px; align-items:flex-start; }
.track-detail-art{
  width:96px; height:96px; border-radius:12px; overflow:hidden; flex-shrink:0;
  background:color-mix(in srgb, var(--text) 8%, transparent);
}
.track-detail-art img{ width:100%; height:100%; object-fit:cover; }
.track-detail-title{ font-weight:700; font-size:1.15rem; margin:0; }
.track-detail-artist{ margin:4px 0 0; color:var(--text-dim); }
.track-detail-lyrics{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.track-detail-lyrics h3{ margin-bottom:6px; }
.track-detail-lyrics-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.track-detail-lyrics-links .btn{ text-decoration:none; }

/* --- Now playing bar ---
   Styled to match the landing page's "Now playing" mockup (.wave-panel /
   .wp-title / .bars in the hero) rather than looking like a generic media
   player: accent-tinted surface, uppercase mono label, mini equalizer. */
.now-playing-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:14px; padding:10px 20px;
  background:color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-top:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow:0 -6px 24px rgba(0,0,0,0.12);
}
.now-playing-label{
  font-family:'JetBrains Mono', monospace; font-size:0.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--accent);
  flex-shrink:0; white-space:nowrap;
}
.now-playing-art{
  position:relative; width:40px; height:40px; border-radius:8px; overflow:hidden; flex-shrink:0;
  background:color-mix(in srgb, var(--text) 8%, transparent);
  display:flex; align-items:center; justify-content:center;
}
.now-playing-art img{ width:100%; height:100%; object-fit:cover; }
/* Small version of the landing hero's .bars equalizer - sits over the
   bottom edge of the artwork, only animating while actually playing. */
.now-playing-eq{
  position:absolute; left:3px; right:3px; bottom:3px; height:12px;
  display:flex; align-items:flex-end; gap:2px; opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.now-playing-eq.is-active{ opacity:1; }
.now-playing-eq span{
  flex:1; background:linear-gradient(180deg, var(--accent), var(--accent-dim));
  border-radius:1px 1px 0 0; transform-origin:bottom; animation:eq 1.4s ease-in-out infinite;
}
.now-playing-eq span:nth-child(1){ animation-delay:0s; }
.now-playing-eq span:nth-child(2){ animation-delay:.2s; }
.now-playing-eq span:nth-child(3){ animation-delay:.4s; }
@media (prefers-reduced-motion: reduce){
  .now-playing-eq span{ animation:none; transform:scaleY(0.7); }
}
/* .now-playing-hit wraps the label/art/title/artist in one button so the
   whole cluster opens the full player - reset it back to plain flex-row
   layout so it's visually identical to before it was a <button>. */
.now-playing-hit{
  display:flex; align-items:center; gap:14px; min-width:0; flex:1;
  background:none; border:none; padding:0; margin:0; color:inherit; font:inherit;
  text-align:left; cursor:pointer; border-radius:8px;
}
.now-playing-hit:hover .now-playing-title{ text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--text) 30%, transparent); }
.now-playing-info{ min-width:120px; max-width:200px; }
.now-playing-title{ margin:0; font-weight:600; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now-playing-artist{ margin:0; font-size:0.78rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now-playing-toggle{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-contrast); font-size:0.9rem; flex-shrink:0;
}
.now-playing-scrubber{ flex:1; display:flex; align-items:center; gap:8px; min-width:120px; }
/* The scrubber's time readout matches the boot-up loading screen's font
   (JetBrains Mono, same family as .classwave-loader-status/-file) instead
   of inheriting the body's Inter - monospaced digits also don't
   jitter in width as the seconds tick over. */
.player-time{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.now-playing-close{
  background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:0.9rem; flex-shrink:0;
}
.now-playing-skip{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; color:var(--text); font-size:0.85rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.now-playing-skip:hover{ background:color-mix(in srgb, var(--text) 10%, transparent); }
@media (max-width: 640px){
  .now-playing-info{ display:none; }
  .now-playing-label{ display:none; }
  .now-playing-bar{ padding:10px 14px; gap:10px; }
  .now-playing-scrubber{ min-width:0; }
}
@media (max-width: 400px){
  .now-playing-scrubber .player-time{ display:none; }
}

/* --- Flowing progress bar - shared by the mini bar's scrubber and the full
   player, painted identically to the boot-up loader in index.html
   (.classwave-loader-progress / .classwave-loader-bar): same rounded pill
   track, same background, same moving gradient fill. A native range input
   is layered on top, made invisible, so seeking keeps real keyboard/a11y
   behavior - only the paint is shared with the loader. */
.player-progress{ position:relative; flex:1; display:flex; align-items:center; min-width:60px; }
.player-progress-track{
  width:100%; height:6px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--text) 14%, transparent);
}
.player-progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), #ffffff, var(--accent-dim), #ffffff, var(--accent));
  background-size:250% 100%;
  transition:width .6s cubic-bezier(.22,.61,.36,1);
  animation:playerProgressFlow 2.4s linear infinite;
}
@keyframes playerProgressFlow{ 0%{ background-position:0% 0; } 100%{ background-position:-250% 0; } }
.player-progress input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent;
}
.player-progress input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:6px; height:20px; }
.player-progress input[type="range"]::-moz-range-thumb{ width:6px; height:20px; border:none; background:transparent; }
.player-progress-lg .player-progress-track{ height:8px; }
@media (prefers-reduced-motion: reduce){
  .player-progress-fill{ animation:none; background:linear-gradient(90deg, var(--accent-dim), var(--accent)); }
}

/* --- Admin page --- */
.admin-table{ display:flex; flex-direction:column; gap:2px; }
.admin-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 4px; border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.admin-row:last-child{ border-bottom:none; }
.mono{ font-family:'JetBrains Mono', monospace; }

/* --- Profile customization --- */
.avatar-swatch-row{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 16px; }
.avatar-swatch{
  width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  padding:0;
}
.avatar-swatch[aria-pressed="true"]{ border-color:var(--text); }
.profile-avatar{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.1rem; flex-shrink:0;
}

/* --- Reusable Avatar component --- */
.avatar{ border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.avatar-initial{ color:#fff; font-weight:700; }
.avatar-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- Profile page: photo upload --- */
.profile-header-row{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; }
.profile-avatar-upload{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.profile-avatar-actions{ display:flex; gap:10px; }
.link-btn{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--accent); font-size:0.78rem; font-weight:600; text-decoration:underline;
}
.link-btn:disabled{ opacity:0.5; cursor:default; }
.link-btn-muted{ color:var(--text-dim); }
.pending-note{ margin-top:6px; max-width:38ch; }

/* --- Teacher verification badge --- */
.verified-badge{ display:inline-flex; align-items:center; margin-left:4px; vertical-align:middle; }
.verified-badge-teacher{ color:var(--accent); }
.verified-badge-owner{ color:#F5B700; }
.teacher-name{ display:inline-flex; align-items:center; gap:2px; font-weight:600; }
.pending-badge{
  margin-left:6px; font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.02em;
  color:var(--text-dim); background:color-mix(in srgb, var(--text) 10%, transparent);
  padding:2px 6px; border-radius:4px; vertical-align:middle;
}
.class-teacher-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }

/* --- Admin: per-row controls --- */
.admin-row-controls{ display:flex; align-items:center; gap:14px; }
.admin-verify-toggle{ display:flex; align-items:center; gap:6px; font-size:0.82rem; white-space:nowrap; }
.flag-edit-list{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.flag-edit-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.flag-edit-row .admin-verify-toggle{ min-width:110px; text-transform:capitalize; }
.flag-edit-terms{ flex:1; min-width:180px; }

/* --- Landing hero CTAs (replaces the old waitlist email form) --- */
.hero-ctas{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-ctas .nav-cta{ padding:13px 22px; font-size:0.85rem; }
footer .nav-cta{ display:inline-flex; padding:13px 26px; font-size:0.85rem; }

/* --- Class detail: class code copy button --- */
.class-code-row{ display:inline-flex; align-items:center; gap:8px; }

/* --- Class detail: classification filter tabs --- */
.song-list-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.filter-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-tab{
  font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.02em;
  border:1px solid var(--line); background:transparent; color:var(--text-dim);
  padding:7px 12px; border-radius:999px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-tab:hover{ border-color:var(--accent); color:var(--text); }
.filter-tab.is-active{ background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:var(--accent); color:var(--accent); }
.filter-tab-count{ opacity:0.75; }

/* --- Class detail: teacher override controls on any song card --- */
.override-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.roster-list{ display:flex; flex-direction:column; gap:10px; }
.roster-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.roster-row:last-child{ border-bottom:none; }
.roster-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:120px; }
.roster-name{ font-weight:600; }
.roster-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.override-label{ font-size:0.76rem; color:var(--text-dim); white-space:nowrap; }

/* --- Profile: account type switch --- */
.role-switch-row{ display:flex; gap:10px; margin:10px 0 6px; flex-wrap:wrap; }

/* --- Shared: policy confirmation lists (Profile switch, SignUp teacher pick) --- */
.policy-list{ margin:0; padding-left:18px; font-size:0.88rem; color:var(--text-dim); }
.policy-list li{ margin-bottom:10px; }
.policy-list li:last-child{ margin-bottom:0; }

main{ padding-bottom:70px; }


/* --- Lyrics + lyric moderation review --- */
.track-detail-lyrics-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lyrics-text, .lyrics-review-text{
  white-space:pre-wrap; word-break:break-word; font:inherit; line-height:1.7;
  margin:14px 0 0; padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:color-mix(in srgb, var(--text) 4%, transparent); color:var(--text);
  max-height:520px; overflow:auto; scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--accent) 55%, var(--line)) transparent;
  overscroll-behavior:contain;
}
.lyrics-text::-webkit-scrollbar, .lyrics-review-text::-webkit-scrollbar{ width:9px; height:9px; }
.lyrics-text::-webkit-scrollbar-track, .lyrics-review-text::-webkit-scrollbar-track{ background:transparent; border-radius:999px; }
.lyrics-text::-webkit-scrollbar-thumb, .lyrics-review-text::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent) 45%, var(--line));
  border:2px solid transparent; border-radius:999px; background-clip:padding-box;
}
.lyrics-text::-webkit-scrollbar-thumb:hover, .lyrics-review-text::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--accent) 70%, var(--line));
  border:2px solid transparent; background-clip:padding-box;
}
.lyrics-review-text{ max-height:60vh; }
.flagged-lyric{
  background:color-mix(in srgb, var(--red) 24%, transparent);
  color:var(--red); font-weight:800; border-radius:3px; padding:0 2px;
  text-decoration:underline; text-decoration-thickness:2px;
}
.lyrics-review-reasons{
  margin-top:14px; padding:12px; border:1px solid color-mix(in srgb, var(--red) 35%, transparent);
  background:color-mix(in srgb, var(--red) 8%, transparent); border-radius:10px;
}
.lyrics-review-reasons ul{ margin:8px 0 0; padding-left:20px; }
.lyrics-review-reasons li{ margin:4px 0; }

/* ---------- Navigation + custom select menus ---------- */
.app-nav-primary{ display:flex; align-items:center; gap:6px; margin-left:14px; }
.app-nav-actions{ display:flex; align-items:center; gap:6px; }
.app-nav-menu{
  position:absolute; top:calc(100% + 10px); right:28px; width:260px;
  background:var(--surface-raised); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:10px; opacity:0; transform:translateY(-8px) scale(.98);
  pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:40;
}
.app-nav-menu.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.app-nav-menu-section{ display:flex; flex-direction:column; gap:3px; }
.app-nav-menu-label{ padding:8px 12px 5px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.app-nav-menu-link{ display:flex; align-items:center; min-height:42px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text); }
.app-nav-menu-link:hover{ background:color-mix(in srgb,var(--accent) 9%,transparent); }
.app-nav-menu-link.is-active{ color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); }
.app-nav-menu-footer{ border-top:1px solid var(--line); margin-top:8px; padding:10px 2px 2px; display:flex; align-items:center; gap:8px; }
.app-nav-menu-footer .theme-toggle{ width:auto; padding:0 10px; gap:7px; font-size:.82rem; }
.app-nav-menu-footer .theme-toggle span{ font-family:'Inter',sans-serif; }
.app-nav-menu-footer .nav-signout{ margin-left:auto; }
.nav-toggle{ display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; }
.nav-toggle:hover{ background:color-mix(in srgb,var(--accent) 8%,transparent); border-color:var(--accent); }
.nav-toggle-bar{ width:19px; height:2px; border-radius:2px; background:var(--text); }
.select-menu{ position:relative; width:100%; }
.select-menu-trigger{
  width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:color-mix(in srgb,var(--text) 6%,transparent); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--text); font:inherit; text-align:left; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.select-menu-trigger:hover,.select-menu.is-open .select-menu-trigger{ border-color:var(--accent); background:color-mix(in srgb,var(--text) 9%,transparent); }
.select-menu-trigger:disabled{ opacity:.55; cursor:not-allowed; }
.select-menu-placeholder{ color:var(--text-dim); }
.select-menu-chevron{ color:var(--accent); font-size:1.15rem; line-height:1; transform:translateY(-2px); transition:transform .15s ease; }
.select-menu.is-open .select-menu-chevron{ transform:rotate(180deg) translateY(2px); }
.select-menu-popover{
  position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:45; padding:6px;
  background:var(--surface-raised); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  max-height:260px; overflow:auto; animation:selectMenuIn .14s ease;
}
@keyframes selectMenuIn{ from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
.select-menu-option{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; background:transparent; color:var(--text); border-radius:8px; padding:10px 11px; text-align:left; font:inherit; cursor:pointer; }
.select-menu-option:hover{ background:color-mix(in srgb,var(--accent) 9%,transparent); }
.select-menu-option.is-selected{ background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-weight:600; }
.select-menu-empty{ padding:12px; color:var(--text-dim); font-size:.86rem; }

/* Nav "unseen updates" dot - shown on the Updates tab, wherever it's
   currently docked (top bar or the More dropdown), until it's visited. */
.nav-item-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--red); margin-left:7px; vertical-align:middle; flex-shrink:0;
}
.nav-toggle{ position:relative; }
.nav-toggle-dot{ position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--red); }

/* ---------- Top bar customization ---------- */
.navcustom-list{ display:flex; flex-direction:column; gap:8px; }
.navcustom-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  background:color-mix(in srgb, var(--text) 4%, transparent);
}
.navcustom-label{ font-size:.88rem; font-weight:600; }
.navcustom-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.navcustom-btn{
  font:inherit; font-size:.76rem; padding:6px 10px; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.navcustom-btn:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); }
.navcustom-btn:disabled{ opacity:.4; cursor:not-allowed; }
.navcustom-remove{ color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, var(--line)); }
.navcustom-remove:hover{ border-color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent); }
.app-nav-menu-link.app-nav-customize-btn{ width:100%; border:none; background:none; font:inherit; text-align:left; cursor:pointer; }

/* Search results show that lyrics were actually checked, rather than making
   the user guess whether the score includes lyric analysis. */
.status-pill-verified{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.status-pill-verified .swatch{ background:var(--accent); }
.song-rating-attribution{ margin:6px 0 0; font-size:.78rem; font-weight:600; color:var(--accent); }
.song-rating-compact .song-rating-attribution{ font-size:.72rem; }
.song-rating-reason{ margin:4px 0 0; font-style:italic; }
.song-rating-action{
  display:inline-block; margin-top:8px; padding:0; background:none; border:none;
  color:var(--accent); font-size:.78rem; font-weight:600; text-decoration:underline; cursor:pointer;
}
.song-rating-action:hover{ opacity:.85; }
.song-rating-modal-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.song-card-lyrics-check{ margin-top:8px; font-size:.74rem; font-family:'JetBrains Mono',monospace; color:var(--text-dim); }
.song-card-lyrics-check.is-found{ color:var(--green); }
.song-card-lyrics-check.is-missing{ color:var(--amber); }
.lyrics-flag-summary{ margin-top:7px; padding:8px 10px; border-radius:9px; background:color-mix(in srgb,var(--red) 8%,transparent); border:1px solid color-mix(in srgb,var(--red) 28%,transparent); color:var(--red); font-size:.78rem; }

@media (max-width:880px){
  .app-nav-primary{ display:none; }
  .desktop-theme-toggle{ display:none; }
  .app-nav-menu{ left:20px; right:20px; width:auto; }
}
@media (min-width:881px){
  .app-nav-row{ position:relative; }
}


/* --- Dashboard class / current-song row --- */
.dashboard-class-row{ display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:10px 0; }
.dashboard-class-main{ min-width:0; }
.dashboard-now-playing{ display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--accent) 6%,transparent); }
.dashboard-now-playing img{ width:34px; height:34px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.dashboard-now-playing-copy{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.dashboard-now-playing-label{ color:var(--accent); font:600 .66rem 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.dashboard-now-playing-copy strong,.dashboard-now-playing-copy span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-now-playing-copy strong{ font-size:.86rem; }
.dashboard-now-playing-copy span:last-child{ color:var(--text-dim); font-size:.76rem; }
.dashboard-no-playing{ color:var(--text-dim); font-size:.76rem; }

@media (max-width:880px){
  .app-nav-row{ min-height:64px; }
  .app-nav-menu{ top:calc(100% + 4px); left:12px; right:12px; width:auto; max-height:calc(100dvh - 80px); overflow:auto; }
  .app-nav-actions{ margin-left:auto; }
  .page-head{ align-items:stretch; }
  .page-head-actions{ width:100%; }
  .page-head-actions > .btn{ flex:1 1 0; min-width:0; }
  .request-search{ align-items:stretch; }
  .request-search > *{ width:100%; }
  .request-search .field{ min-width:0; }
  .request-search .btn{ width:100%; }
  .card{ padding:18px; }
  .song-card{ padding:12px; gap:11px; }
  .song-card-body{ min-width:0; }
  .song-card-footer{ width:100%; }
  .song-card-footer .btn,.override-actions .btn{ min-height:42px; }
  .override-actions{ width:100%; }
  .override-actions .btn{ flex:1 1 auto; }
  .filter-tabs{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; scrollbar-width:none; }
  .filter-tabs::-webkit-scrollbar{ display:none; }
  .filter-tab{ flex:0 0 auto; }
  .modal-backdrop{ align-items:flex-end; padding:10px; }
  .modal{ max-height:calc(100dvh - 20px); overflow:auto; border-radius:16px; }
  .lyrics-text,.lyrics-review-text{ max-height:52dvh; padding:14px; }
  main{ padding-bottom:88px; }
}

@media (max-width:520px){
  .wrap{ padding:0 14px; }
  .page{ padding-top:24px; }
  .page-head h1{ font-size:1.65rem; }
  .page-head-actions{ flex-direction:column; }
  .page-head-actions > .btn{ width:100%; flex:none; }
  .page-head-actions{ gap:8px; }
  .page-head-actions .btn{ min-height:44px; }
  .dashboard-grid{ gap:14px; }
  .card{ border-radius:12px; }
  .song-card{ display:grid; grid-template-columns:52px minmax(0,1fr); }
  .song-card-art{ width:52px; height:52px; }
  .song-card-footer{ grid-column:1 / -1; }
  .now-playing-bar{ padding:8px 10px; gap:8px; }
  .now-playing-art{ width:40px; height:40px; }
  .now-playing-scrubber .player-progress{ min-width:0; }
  .now-playing-close{ width:40px; height:40px; }
}

/* ---------- Auth extras ---------- */
.auth-forgot{ margin:12px 0 0; text-align:center; font-size:.86rem; }
.auth-forgot a{ color:var(--accent); text-decoration:none; }
.auth-forgot a:hover{ text-decoration:underline; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-faint); font-size:.78rem; }
.auth-divider::before,.auth-divider::after{ content:""; height:1px; flex:1; background:var(--line); }
.google-mark{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fff; color:#4285f4; font-weight:700; font-family:Arial,sans-serif; }
@media (max-width:420px){ .auth-divider{ margin:15px 0; } }


/* ---------- Google onboarding ---------- */
.google-onboarding-backdrop{ z-index:100; }
.google-onboarding{ width:min(100% - 28px, 500px); max-height:calc(100dvh - 28px); overflow:auto; }
.google-onboarding-icon{ display:flex; justify-content:center; margin-bottom:14px; }
.google-onboarding-icon > span{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--line); font:700 1.4rem Arial,sans-serif; }
.google-role-fieldset{ border:0; padding:0; margin:18px 0 0; }
.google-role-fieldset legend{ font-weight:700; margin-bottom:8px; }
.google-role-card{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:13px 14px; margin-top:8px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--text); cursor:pointer; }
.google-role-card span{ color:var(--text-dim); font-size:.8rem; }
.google-role-card.is-selected{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent) inset; }
.google-onboarding-submit{ width:100%; margin-top:18px; }
.google-avatar-note{ text-align:center; margin:10px 0 0; }

/* ---------- Navigation alignment ---------- */
@media (min-width: 769px){
  .app-nav-primary{ order:2; }
  .app-nav-actions{ margin-left:auto; order:3; }
}

/* ---------- Mobile cleanup ---------- */
@media (max-width: 760px){
  .wrap{ padding-left:16px; padding-right:16px; }
  header.site{ padding:14px 0 8px; }
  .landing-nav-actions .nav-audience-link{ display:none; }
  .landing-nav-actions .theme-toggle{ width:34px; height:34px; }
  .landing-nav-actions .nav-cta:not(.nav-audience-link){ padding:7px 10px; font-size:.72rem; }
  .hero{ padding:42px 0 28px; }
  .hero-grid{ grid-template-columns:1fr; gap:28px; }
  .hero-ctas{ flex-wrap:wrap; }
  .hero-ctas .nav-cta{ flex:1 1 140px; justify-content:center; text-align:center; }
  .panels,.mod-strip{ grid-template-columns:1fr; }
  .wave-panel{ padding:18px; }
  .bars{ height:90px; }
  .score-card{ padding:14px; }
  .app-nav-row{ min-height:60px; }
  .app-nav-primary{ display:none; }
  .app-nav-actions{ margin-left:auto; }
  .app-nav-menu{ left:12px; right:12px; width:auto; max-height:calc(100dvh - 74px); overflow:auto; }
  .page-head{ flex-wrap:wrap; align-items:flex-start; gap:12px; }
  .page-head > .btn{ width:100%; }
  .dashboard-grid{ grid-template-columns:1fr; }
  .dashboard-class-row{ align-items:flex-start; flex-direction:column; }
  .dashboard-now-playing{ width:100%; max-width:none; }
  .auth-page{ padding:14px; align-items:flex-start; padding-top:24px; }
  .auth-card{ width:min(100%, 500px); padding:22px 18px; }
  .google-onboarding{ padding:20px 16px; }
}

/* Prevent long content from creating accidental horizontal scrolling. */
img,svg{ max-width:100%; }
button,input,textarea,select{ max-width:100%; }

.google-avatar-managed{ display:block; margin-top:4px; max-width:180px; line-height:1.35; }
@media (max-width:760px){ .app-nav-primary{ margin-left:0; } .app-nav-row{ gap:10px; } .wordmark{ font-size:1.15rem; } .wordmark-logo{ height:24px; } }


/* Public audience pages */
.audience-main{padding:72px 0 90px}.audience-title{font-size:clamp(2.5rem,6vw,5rem);line-height:.98;max-width:900px;margin:10px 0 18px}.audience-lead{max-width:720px;font-size:1.1rem;line-height:1.7;color:var(--text-dim)}.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}.audience-panel h2{margin-top:0}.audience-panel li{margin:13px 0;color:var(--text-dim)}.audience-callout{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface))}.audience-callout p{color:var(--text-dim);line-height:1.6}
.landing-now-playing{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));overflow:hidden}.landing-now-playing-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font:600 .68rem 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.landing-now-playing-body{display:flex;align-items:center;gap:14px;padding:14px;min-width:0}.landing-now-playing-art{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}.landing-now-playing-art.fallback{display:grid;place-items:center;background:color-mix(in srgb,var(--text) 7%,transparent);font-size:1.5rem}.landing-now-playing-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:3px}.landing-now-playing-copy strong,.landing-now-playing-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.landing-now-playing-copy strong{font-size:.95rem}.landing-now-playing-copy span{color:var(--text-dim);font-size:.82rem}.class-now-playing-card{margin-bottom:18px}.dashboard-now-playing-card{width:100%}.release-backdrop{z-index:120}.release-modal{width:min(100% - 28px,470px)}
@media(max-width:760px){.landing-nav-actions .nav-cta{padding:7px 10px!important;font-size:.72rem!important;min-height:34px}.hero-ctas .nav-cta{width:auto!important;flex:1 1 0;min-width:0}.audience-main{padding:44px 0 64px}.audience-grid{grid-template-columns:1fr}.audience-title{font-size:2.7rem}.landing-now-playing-head{align-items:flex-start;flex-direction:column;gap:4px}.landing-now-playing-body{padding:12px}.landing-now-playing-body .status-pill{display:none}}
@media(max-width:420px){.landing-nav-actions{gap:5px}.landing-nav-actions .nav-cta{padding:6px 8px!important;font-size:.68rem!important}.hero-ctas{gap:8px}}

/* Keep public auth actions visually consistent with the landing header. */
.auth-card .btn{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;border-radius:999px;padding:9px 14px;min-height:38px}
.auth-card .auth-switch a,.auth-card .auth-forgot a{font-family:'Inter',sans-serif}

/* --- Full player (expanded from the mini now-playing bar) --- */
.full-player-backdrop{
  position:fixed; inset:0; z-index:45; background:rgba(15,13,23,0.6);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fullPlayerBackdropIn .25s ease both;
}
@keyframes fullPlayerBackdropIn{ from{ opacity:0; } to{ opacity:1; } }
.full-player{
  width:100%; max-width:520px; max-height:92vh; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line); border-radius:22px 22px 0 0;
  box-shadow:var(--shadow); overflow:hidden;
  animation:fullPlayerSheetIn .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fullPlayerSheetIn{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@media (min-width:760px){
  .full-player-backdrop{ align-items:center; padding:20px; }
  .full-player{ border-radius:22px; }
}
.full-player-collapse{
  align-self:center; margin:10px 0 0; background:none; border:none; cursor:pointer;
  color:var(--text-dim); font-size:1.1rem; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:4px 16px;
}
.full-player-collapse span{ font-size:.66rem; font-family:'JetBrains Mono', monospace; letter-spacing:.08em; text-transform:uppercase; }
.full-player-body{ flex:1; overflow-y:auto; padding:8px 28px 20px; display:flex; flex-direction:column; }
.full-player-main{ display:flex; flex-direction:column; align-items:center; text-align:center; flex:1; padding-top:12px; }
.full-player-art-wrap{ width:min(280px,72vw); aspect-ratio:1; margin-bottom:22px; }
.full-player-art{
  width:100%; height:100%; border-radius:16px; object-fit:cover; box-shadow:0 24px 48px -24px rgba(0,0,0,0.4);
}
.full-player-art-fallback{
  display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  color:var(--accent); font-size:3rem;
}
.full-player-copy{ margin-bottom:24px; max-width:100%; }
.full-player-title{ margin:0 0 4px; font-family:'Inter', serif; font-weight:600; font-size:1.3rem; }
.full-player-artist{ margin:0; color:var(--text-dim); font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px; }
.full-player-main .player-progress{ width:100%; margin-bottom:6px; }
.full-player-times{ width:100%; display:flex; justify-content:space-between; margin-bottom:22px; }
.full-player-controls{ display:flex; align-items:center; justify-content:center; gap:22px; }
.full-player-toggle{
  width:66px; height:66px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-contrast); font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
}
.full-player-stop,.full-player-skip{
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:color-mix(in srgb, var(--text) 8%, transparent); color:var(--text); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.full-player-skip-spacer{ visibility:hidden; }

.full-player-tabs{ display:flex; border-top:1px solid var(--line); flex-shrink:0; }
.full-player-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 8px 13px; background:none; border:none; cursor:pointer;
  color:var(--text-dim); font-family:'Inter', sans-serif; font-size:.76rem; font-weight:600;
}
.full-player-tab-icon{ font-size:1.05rem; }
.full-player-tab.is-active{ color:var(--accent); }
.beta-chip{
  font-family:'JetBrains Mono', monospace; font-size:.56rem; font-weight:700; letter-spacing:.06em;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent);
  border-radius:999px; padding:1px 5px; vertical-align:1px; margin-left:2px;
}

/* --- Live Lyrics BETA ---
   Intro: logo covers the screen (same sizing/feel as the boot-up loader
   in index.html - see .classwave-loader-logo) and fades, then the
   "Live Lyrics ✦ BETA" sting sweeps in and back out over it, then the
   whole thing crossfades into the karaoke stage - see the comment above
   <LiveLyrics> in FullPlayer.jsx. Synced lyric lines (LRCLIB, via
   src/utils/lyrics.js) step in time with real playback progress, each
   one sweeping across the full screen from alternating edges for a
   dramatic marquee effect; unsynced tracks fall back to a plain
   scrollable block, and untracked-lyrics fall back to the original
   hand-off card. */

/* Fullscreen takeover, edge-to-edge, dark like the boot loader, so the
   entrance reads as "the same screen" rather than a sheet with a tab. */
.full-player-backdrop.is-lyrics-fullscreen{
  align-items:stretch; justify-content:stretch; padding:0; background:#0f0d17;
}
.full-player.is-lyrics-fullscreen{
  width:100%; height:100%; max-width:none; max-height:none; border-radius:0;
  background:#0f0d17; color:#f7f4ff; animation:fullPlayerLyricsIn .35s ease both;
}
@keyframes fullPlayerLyricsIn{ from{ opacity:0; } to{ opacity:1; } }
@media (min-width:760px){
  .full-player-backdrop.is-lyrics-fullscreen{ padding:0; }
  .full-player.is-lyrics-fullscreen{ border-radius:0; }
}
.full-player.is-lyrics-fullscreen .full-player-collapse{ color:rgba(247,244,255,.7); }
.full-player.is-lyrics-fullscreen .full-player-tabs{ border-top-color:rgba(247,244,255,.14); }
.full-player.is-lyrics-fullscreen .full-player-tab{ color:rgba(247,244,255,.55); }
.full-player.is-lyrics-fullscreen .full-player-tab.is-active{ color:#fff; }

.live-lyrics{ flex:1; display:flex; flex-direction:column; }
.live-lyrics-intro{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; min-height:320px;
}
.live-lyrics-logo{
  /* Same footprint as .classwave-loader-logo - the point is that this
     entrance visually matches the app's boot screen. */
  width:min(180px,52vw); height:auto; object-fit:contain; opacity:0;
  animation:liveLyricsLogoIn .6s ease forwards;
}
.live-lyrics-logo.is-fading{ animation:liveLyricsLogoOut .6s ease forwards; }
@keyframes liveLyricsLogoIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes liveLyricsLogoOut{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(1.12); } }
.live-lyrics-sting{
  margin:0; display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Inter', serif; font-weight:600; font-size:clamp(1.8rem,7vw,2.6rem); text-align:center;
  opacity:0; transform:translateY(10px) scale(.94); letter-spacing:-.01em; color:#fff;
}
.live-lyrics-star{
  font-family:'Inter', sans-serif; color:#A78BFA; font-size:.75em; line-height:1;
  opacity:0; transform:scale(.4) rotate(-35deg);
}
.live-lyrics-sting.is-in{ animation:liveLyricsStingPop 1.6s cubic-bezier(.22,.61,.36,1) forwards; }
.live-lyrics-sting.is-in .live-lyrics-star{ animation:liveLyricsStarSpin 1.6s cubic-bezier(.22,.61,.36,1) forwards; }
.live-lyrics-sting-chip{ align-self:flex-start; margin-left:2px; }
@keyframes liveLyricsStingPop{
  0%{ opacity:0; transform:translateY(14px) scale(.9); }
  35%{ opacity:1; transform:translateY(0) scale(1); }
  75%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-10px) scale(1.04); }
}
@keyframes liveLyricsStarSpin{
  0%{ opacity:0; transform:scale(.4) rotate(-35deg); }
  40%{ opacity:1; transform:scale(1.15) rotate(8deg); }
  55%{ transform:scale(1) rotate(0deg); }
  80%{ opacity:1; transform:scale(1) rotate(0deg); }
  100%{ opacity:0; transform:scale(1.1) rotate(12deg); }
}
@keyframes liveLyricsRevealIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.live-lyrics-sync{ display:flex; gap:6px; margin-bottom:6px; }
.live-lyrics-sync span{
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.35;
  animation:liveLyricsSyncPulse 1.2s ease-in-out infinite;
}
.live-lyrics-sync span:nth-child(2){ animation-delay:.2s; }
.live-lyrics-sync span:nth-child(3){ animation-delay:.4s; }
@keyframes liveLyricsSyncPulse{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:1; transform:scale(1.3); } }
.live-lyrics-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* --- Karaoke stage: the post-sting phase that replaces the old
   text-free reveal card. Header stays small and pinned so the sweeping
   line has the whole rest of the screen to move across. --- */
.live-lyrics-stage{
  position:relative; flex:1; display:flex; flex-direction:column; min-height:0;
  animation:liveLyricsRevealIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.lk-header{ display:flex; align-items:center; gap:12px; padding:2px 2px 18px; flex-shrink:0; }
.lk-header-art{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.lk-header-art-fallback{ display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 16%, #0f0d17); color:var(--accent); font-size:1.15rem; }
.lk-header-copy{ min-width:0; }
.lk-header-title{ margin:0; font-family:'Inter', serif; font-weight:600; font-size:.95rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lk-header-artist{ margin:0; font-size:.78rem; color:rgba(247,244,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.singalong-live-chip{ margin-left:auto; flex-shrink:0; background:color-mix(in srgb, var(--accent) 22%, transparent); color:#fff; }

.lk-status{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  color:rgba(247,244,255,.55); font-size:.9rem; text-align:center; padding:0 24px;
}
.lk-status-empty p{ margin:0; }

/* Apple-Music-style karaoke stack: the current line pops up in place
   (no more sweeping in from off screen) and is highlighted solid in the
   artwork's main color via --lk-highlight-color (set per-render in
   LyricsKaraoke.jsx). The next couple of lines wait underneath, smaller
   and progressively dimmer. */
.lk-karaoke{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; width:100%; padding:0 6vw;
}
.lk-active-line{
  margin:0; max-width:100%; text-align:center;
  font-family:'Inter', serif; font-weight:600;
  font-size:clamp(1.4rem, 5vw, 2.9rem); line-height:1.3;
  filter:drop-shadow(0 0 26px color-mix(in srgb, var(--lk-highlight-color, var(--accent)) 45%, transparent));
  animation:lkLineIn .5s cubic-bezier(.2,.7,.3,1) both;
  will-change:transform,opacity;
}
/* Apple-Music-style wipe: a hard-edge two-color gradient clipped to the
   text, swept from fully dim to fully lit (in the artwork's dominant
   color) over the real gap until the next line - see the comment in
   LyricsKaraoke.jsx for why this is line-level, not word-level. */
.lk-active-line-fill{
  display:inline-block;
  background-image:linear-gradient(90deg, var(--lk-highlight-color, var(--accent)) 50%, rgba(247,244,255,.32) 50%);
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:lkFill var(--lk-fill-duration, 4s) linear both;
}
@keyframes lkFill{
  from{ background-position:100% 0; }
  to{ background-position:0% 0; }
}
.lk-active-line-waiting{
  opacity:.3; font-size:2rem; color:rgba(247,244,255,.5); filter:none; animation:none;
}
@keyframes lkLineIn{
  0%{ opacity:0; transform:translateY(22px) scale(.94); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.lk-adjacent-line{
  margin:0; max-width:90%; text-align:center; color:rgba(247,244,255,.4);
  font-family:'Inter', sans-serif; font-weight:500;
  font-size:clamp(.82rem, 2.2vw, 1.15rem);
  animation:lkLineIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.lk-previous-line{ opacity:.65; }
.lk-upcoming{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.lk-upcoming-line{
  margin:0; max-width:90%; text-align:center; color:rgba(247,244,255,.45);
  font-family:'Inter', sans-serif; font-weight:500;
  font-size:calc(clamp(.82rem, 2.2vw, 1.15rem) - (var(--lk-depth, 0) * .1rem));
  opacity:calc(1 - (var(--lk-depth, 0) * .35));
  animation:lkLineIn .5s cubic-bezier(.2,.7,.3,1) both;
}

.lk-plain{
  flex:1; overflow-y:auto; white-space:pre-wrap; line-height:1.85;
  font-size:1rem; color:rgba(247,244,255,.85); padding:4px 2px 40px;
}

/* --- Manual timed lyrics: last-resort fallback for tracks LRCLIB times
   wrong. Small pill tucked in the corner of the stage; opens a tap-along
   panel over it. See ManualLyricsControl.jsx. --- */
.lk-manual-toggle{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(247,244,255,.1); border:1px solid rgba(247,244,255,.16);
  color:rgba(247,244,255,.75); border-radius:999px; padding:7px 13px;
  font-family:'Inter', sans-serif; font-size:.72rem; font-weight:600;
  cursor:pointer; backdrop-filter:blur(6px);
}
.lk-manual-toggle:hover{ background:rgba(247,244,255,.16); color:#fff; }

.lk-manual-panel{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; gap:16px;
  padding:18px; background:rgba(15,13,23,.96); backdrop-filter:blur(10px);
  animation:liveLyricsRevealIn .3s ease both;
}
.lk-manual-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lk-manual-title{ margin:0; font-family:'Inter', serif; font-weight:600; font-size:1.05rem; color:#fff; }
.lk-manual-sub{ margin:2px 0 0; font-size:.78rem; color:rgba(247,244,255,.5); }
.lk-manual-close{
  background:none; border:none; color:rgba(247,244,255,.6); font-size:1rem; cursor:pointer; padding:4px;
}
.lk-manual-close:hover{ color:#fff; }
.lk-manual-body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; min-height:0;
}
.lk-manual-hint{ margin:0; font-size:.8rem; color:rgba(247,244,255,.5); }
.lk-manual-next{
  margin:0; font-family:'Inter', serif; font-weight:600; color:#fff;
  font-size:clamp(1.15rem, 4.2vw, 1.7rem); line-height:1.35; max-width:100%;
}
.lk-manual-next-done{ color:var(--accent); font-size:1.15rem; }
.lk-manual-history{
  width:100%; max-width:420px; display:flex; flex-direction:column; gap:4px; margin-top:6px;
}
.lk-manual-history-line{
  margin:0; font-size:.78rem; color:rgba(247,244,255,.4); text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lk-manual-history-time{
  font-family:'JetBrains Mono', monospace; color:rgba(247,244,255,.6); margin-right:8px;
}
.lk-manual-tap{
  align-self:center; width:104px; height:104px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:var(--accent-contrast, #1A1230); border:none;
  font-family:'Inter', sans-serif; font-weight:700; font-size:1rem; letter-spacing:.04em;
  cursor:pointer; box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent);
}
.lk-manual-tap:active{ transform:scale(.96); }
.lk-manual-tap:disabled{ opacity:.6; cursor:default; }
.lk-manual-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* The line just tapped (above) and the one coming up after the current
   one (below) - same idea as LyricsKaraoke's previous/upcoming lines, so
   tapping along feels like the same "stage" as Live Lyrics itself. */
.lk-manual-adjacent-line{
  margin:0; max-width:90%; text-align:center; color:rgba(247,244,255,.4);
  font-family:'Inter', sans-serif; font-weight:500;
  font-size:clamp(.82rem, 2.2vw, 1.05rem);
}
.lk-manual-tap-clock{
  min-width:54px; text-align:center; color:var(--accent);
  font:600 .78rem 'JetBrains Mono',monospace;
}

@media (prefers-reduced-motion: reduce){
  .live-lyrics-logo,.live-lyrics-sting,.live-lyrics-star,.live-lyrics-reveal,.live-lyrics-stage{ animation:none; opacity:1; transform:none; }
  .live-lyrics-sync span{ animation:none; opacity:.8; }
  .lk-active-line{ animation:none !important; opacity:1; transform:none; }
  .lk-active-line-fill{ animation:none !important; background-position:0% 0; }
  .lk-upcoming-line,.lk-adjacent-line{ animation:none; }
}


/* Settings: private owner-uploaded media */
.settings-media-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.settings-media-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border, rgba(124, 58, 237, 0.16));
  border-radius: 12px;
  background: var(--surface-2, rgba(124, 58, 237, 0.035));
}

.settings-media-art {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(124, 58, 237, 0.12);
  font-size: 1.35rem;
}

.settings-media-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-media-info {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.settings-media-info strong,
.settings-media-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .settings-media-row {
    align-items: flex-start;
  }

  .settings-media-row .link-btn {
    margin-left: auto;
    flex: 0 0 auto;
  }
}

/* Private owner Library */
.library-list{display:grid;gap:14px}
.library-card{display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:16px}
.library-art{width:80px;height:80px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:rgba(124,58,237,.12);font-size:1.8rem}
.library-art img{width:100%;height:100%;object-fit:cover}
.library-info{min-width:0;display:grid;gap:3px}.library-info h2{margin:0;font-size:1.05rem}.library-info p{margin:0}.library-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.library-edit-art{display:flex;align-items:center;gap:14px;margin-bottom:18px}.library-edit-art img,.library-edit-art span{width:88px;height:88px;border-radius:12px;object-fit:cover;display:grid;place-items:center;background:rgba(124,58,237,.12);font-size:2rem}
@media(max-width:700px){.library-card{grid-template-columns:64px minmax(0,1fr)}.library-art{width:64px;height:64px}.library-actions{grid-column:1/-1;justify-content:flex-start}}


/* =========================================================
   Same ClassWave, New Style - glass search / quick-add layer
   ========================================================= */

:root{
  --glass-bg: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--text) 10%, transparent);
  --glass-shadow: 0 20px 55px rgba(30, 15, 60, .10);
}

.card,
.modal{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  border-radius:20px;
}

.card{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn{
  border-radius:14px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover:not(:disabled){ transform:translateY(-1px); }
.field-input,
.select-input,
select{
  border-radius:14px;
  background:color-mix(in srgb, var(--surface-raised) 58%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Search discovery */
.search-discovery{
  display:grid;
  gap:22px;
  margin:24px 0 28px;
}
.search-artist-spotlight,
.search-similar,
.search-all-results{
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  border-radius:24px;
  box-shadow:var(--glass-shadow);
}

.search-artist-spotlight{ padding:24px; }
.search-artist-heading,
.search-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}
.search-artist-heading h2,
.search-section-heading h2{
  margin:0;
  font-size:1.55rem;
}
.search-artist-heading p{ margin:5px 0 0; }

.search-top-songs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}
.search-top-songs .song-card{
  min-width:0;
  display:block;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:color-mix(in srgb, var(--surface-raised) 48%, transparent);
}
.search-top-songs .song-card-art{
  width:100%;
  height:auto;
  aspect-ratio:1;
  border-radius:14px;
  margin-bottom:10px;
}
.search-top-songs .song-card-body{ min-width:0; }
.search-top-songs .song-card-footer{ margin-top:10px; }
.search-top-songs .song-card-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search-top-songs .song-card-artist{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.search-similar{
  padding:24px;
}
.search-related-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.search-related-card{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:color-mix(in srgb, var(--surface-raised) 44%, transparent);
}
.search-related-card img,
.search-related-art{
  width:54px;
  height:54px;
  flex:0 0 54px;
  border-radius:12px;
  object-fit:cover;
}
.search-related-art{
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent);
}
.search-related-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.search-related-copy strong,
.search-related-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-related-copy strong{ font-size:.88rem; }
.search-related-copy span{ color:var(--text-dim); font-size:.76rem; }
.search-related-score{ color:var(--accent)!important; margin-top:3px; font-family:'JetBrains Mono',monospace; }

.search-all-results{
  padding:24px;
  scroll-margin-top:24px;
}
.search-all-results .song-card-list{ margin-top:18px; }

@media (max-width:900px){
  .search-top-songs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .search-related-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .search-artist-spotlight,
  .search-similar,
  .search-all-results{ padding:16px; border-radius:20px; }
  .search-artist-heading,
  .search-section-heading{ align-items:flex-start; flex-direction:column; }
  .search-top-songs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .search-related-row{ grid-template-columns:1fr; }
}

/* Quick Add: the modal should scroll instead of letting a long result
   list push outside the viewport. */
.modal{
  max-height:min(88vh,760px);
  overflow-y:auto;
}
.modal-body{
  min-width:0;
}
.modal .song-card-list{
  max-height:52vh;
  overflow-y:auto;
  padding-right:4px;
}
.modal .song-card{
  border-radius:16px;
  background:color-mix(in srgb, var(--surface-raised) 50%, transparent);
}
.modal .song-card-footer{
  flex-basis:auto;
}
@media (max-width:620px){
  .modal-backdrop{ padding:10px; }
  .modal{ max-height:92vh; padding:18px; border-radius:20px; }
  .modal .song-card-list{ max-height:48vh; }
}

/* =========================================================
   Same ClassWave, New Style - unified glass system
   ========================================================= */
:root{
  --glass-bg-strong: color-mix(in srgb, var(--surface-raised) 66%, transparent);
  --glass-bg-soft: color-mix(in srgb, var(--surface-raised) 42%, transparent);
  --glass-edge: color-mix(in srgb, white 24%, var(--accent) 14%);
  --glass-shadow-lift: 0 24px 60px -26px rgba(34, 15, 78, .42), 0 8px 22px -12px rgba(34, 15, 78, .24);
}
body{
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 32%),
    var(--bg);
}
.card,.modal,.search-artist-spotlight,.search-similar,.search-all-results,.event-card,.class-preview-card{
  background:linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 72%, transparent), color-mix(in srgb, var(--surface) 42%, transparent));
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow-lift);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
}
.card:hover{ transform:translateY(-2px); box-shadow:0 30px 68px -28px rgba(34,15,78,.46),0 10px 24px -12px rgba(34,15,78,.25); }
.btn,.theme-toggle,.app-nav-link,.nav-cta,.now-playing-toggle,.now-playing-skip,.now-playing-close,.now-playing-lyrics,.full-player-stop,.full-player-skip,.full-player-toggle,.full-player-tab,.search-related-card{
  border:1px solid var(--glass-edge);
  background:linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 62%, transparent), color-mix(in srgb, var(--surface) 36%, transparent));
  box-shadow:0 10px 24px -16px rgba(34,15,78,.42), inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
}
.btn-primary,.full-player-toggle{ background:linear-gradient(145deg, color-mix(in srgb,var(--accent) 88%,white), var(--accent-dim)); color:var(--accent-contrast); border-color:color-mix(in srgb,var(--accent) 55%,white); }
.btn:hover:not(:disabled),.theme-toggle:hover,.app-nav-link:hover,.nav-cta:hover,.now-playing-toggle:hover,.now-playing-skip:hover,.now-playing-close:hover,.now-playing-lyrics:hover,.full-player-stop:hover,.full-player-skip:hover,.full-player-tab:hover,.search-related-card:hover{ box-shadow:0 16px 30px -17px rgba(34,15,78,.52),inset 0 1px 0 color-mix(in srgb,white 24%,transparent); border-color:color-mix(in srgb,var(--accent) 48%,white 22%); }
.app-nav{ background:color-mix(in srgb,var(--surface-raised) 64%,transparent); backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); border-bottom:1px solid var(--glass-edge); box-shadow:0 12px 30px -24px rgba(34,15,78,.55); }
.field-input,.select-input,select{ background:color-mix(in srgb,var(--surface-raised) 58%,transparent); border-color:var(--glass-edge); box-shadow:inset 0 1px 0 color-mix(in srgb,white 14%,transparent),0 10px 24px -20px rgba(34,15,78,.5); }

/* Artist discovery panel */
.search-artist-heading{align-items:center}
.search-artist-profile{display:flex;align-items:center;gap:16px;min-width:0}
.search-artist-profile > img,.search-artist-profile-fallback{width:92px;height:92px;border-radius:24px;object-fit:cover;flex:0 0 92px;box-shadow:0 18px 35px -18px rgba(0,0,0,.48)}
.search-artist-profile > img{filter:saturate(.92) brightness(.78)}
.search-artist-profile-fallback{display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 35%,#17121f),color-mix(in srgb,var(--accent) 10%,#17121f));color:white;font-weight:800;letter-spacing:.08em}
.search-top-songs .song-card{box-shadow:0 16px 34px -18px rgba(34,15,78,.44)}
.search-related-card{cursor:pointer;color:var(--text);text-align:left;width:100%}

/* Larger class previews with recent music tucked into the bottom. */
.class-card-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.class-preview-card{padding:0;overflow:hidden}
.class-preview-card:hover{transform:translateY(-3px)}
.class-preview-card .class-card-link{height:100%;padding:24px}
.class-preview-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;min-height:120px}
.class-preview-head h2{font-size:1.55rem;margin:2px 0 5px}
.class-code-pill{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;padding:7px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);white-space:nowrap}
.class-preview-recent{margin:18px -24px -24px;padding:16px 24px 20px;border-top:1px solid var(--glass-edge);background:linear-gradient(180deg,color-mix(in srgb,var(--text) 4%,transparent),color-mix(in srgb,var(--surface-raised) 28%,transparent))}
.class-preview-label{font:600 .66rem 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:10px}
.class-preview-song{display:flex;align-items:center;gap:10px;padding:7px 0;min-width:0}
.class-preview-song img,.class-preview-song-art{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:0 0 34px}
.class-preview-song-art{display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:.6rem;font-weight:700}
.class-preview-song > span:last-child{display:flex;flex-direction:column;min-width:0}
.class-preview-song strong,.class-preview-song small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.class-preview-song strong{font-size:.8rem}.class-preview-song small{font-size:.7rem;color:var(--text-dim)}

/* School events */
.event-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.event-card{display:flex;flex-direction:column;gap:16px;min-height:210px}
.event-code{font:700 .78rem 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--accent);padding:11px 13px;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid var(--glass-edge);width:max-content}
.event-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto}
.event-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:20px}
.event-side{display:grid;gap:20px;align-content:start}
.event-track-list{display:grid;gap:8px;margin-top:12px}
.event-track-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px;border-radius:14px;background:color-mix(in srgb,var(--surface-raised) 34%,transparent);border:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.event-track-row img{width:48px;height:48px;border-radius:11px;object-fit:cover}
.event-track-copy{min-width:0;display:flex;flex-direction:column}.event-track-copy strong,.event-track-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-track-copy span{font-size:.78rem;color:var(--text-dim)}
.event-search-results{display:grid;gap:10px;max-height:52vh;overflow:auto;margin-top:16px}
.event-search-results .song-card{box-shadow:none}
.event-upload-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.event-upload-divider:before,.event-upload-divider:after{content:'';height:1px;flex:1;background:var(--line)}
.event-members{display:flex;flex-wrap:wrap;gap:7px}.event-members span{padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface-raised) 45%,transparent);border:1px solid var(--glass-edge);font-size:.76rem}

/* Bottom player: no emoji glyphs, stronger lift, no awkward bottom gap. */
.now-playing-bar{bottom:0;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 24px));border:1px solid var(--glass-edge);border-bottom:none;border-radius:20px 20px 0 0;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 78%,transparent),color-mix(in srgb,var(--surface) 50%,transparent));box-shadow:0 -20px 55px -22px rgba(34,15,78,.5),0 10px 28px -20px rgba(34,15,78,.42);backdrop-filter:blur(30px) saturate(155%);-webkit-backdrop-filter:blur(30px) saturate(155%);}
.now-playing-toggle,.now-playing-skip,.now-playing-close,.now-playing-lyrics{font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:0 10px;min-width:44px}
.now-playing-lyrics{width:36px;height:36px;border-radius:50%;cursor:pointer;color:var(--accent);font-size:1rem;display:flex;align-items:center;justify-content:center}
.now-playing-close{width:auto;min-width:44px;height:36px;border-radius:999px;cursor:pointer;color:var(--text-dim)}
.now-playing-skip{width:auto;min-width:50px;height:36px;border-radius:999px;cursor:pointer;color:var(--text)}
.now-playing-toggle{width:auto;min-width:56px;height:36px;border-radius:999px;cursor:pointer;color:var(--text)}
.now-playing-scrubber{order:2;flex:1;min-width:180px}.now-playing-toggle{order:3}.now-playing-skip{order:4}.now-playing-lyrics{order:5}.now-playing-close{order:6}

.full-player{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 82%,transparent),color-mix(in srgb,var(--surface) 56%,transparent));backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);box-shadow:0 35px 90px -30px rgba(0,0,0,.58)}
.full-player-stop,.full-player-skip{font-size:.66rem;font-weight:700;padding:0 10px;width:auto;min-width:52px}
.full-player-toggle{font-size:.72rem;font-weight:700;padding:0 18px;width:auto;border-radius:999px}

@media(max-width:760px){
  .event-layout{grid-template-columns:1fr}
  .class-card-grid{grid-template-columns:1fr}
  .search-artist-profile > img,.search-artist-profile-fallback{width:70px;height:70px;flex-basis:70px;border-radius:19px}
  .now-playing-bar{width:100%;border-radius:16px 16px 0 0}
  .now-playing-info{display:none}
  .now-playing-scrubber{min-width:80px}
  .now-playing-time{display:none}
}
.search-artist-profile{padding:10px 14px 10px 10px;border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,#080611 72%,transparent),color-mix(in srgb,var(--accent) 10%,#080611 58%));border:1px solid color-mix(in srgb,white 14%,var(--accent) 12%);box-shadow:0 18px 42px -24px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 48%,var(--surface-raised) 38%),color-mix(in srgb,var(--accent) 25%,var(--surface) 45%));color:var(--text);border-color:color-mix(in srgb,var(--accent) 48%,white 14%)}
main{padding-bottom:60px}
@media(max-width:880px){main{padding-bottom:72px}}
.link-btn{border:1px solid var(--glass-edge);background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 55%,transparent),color-mix(in srgb,var(--surface) 30%,transparent));box-shadow:0 8px 20px -15px rgba(34,15,78,.4),inset 0 1px 0 color-mix(in srgb,white 16%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:999px;padding:8px 12px;color:var(--text);cursor:pointer}

/* ---------- 0.3.1 visual cleanup ---------- */
html, body, #root { min-height: 100%; }
html { overflow-x: hidden; }
body { overflow-x: hidden; background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%), var(--bg); }
main { min-height: calc(100vh - 64px); padding-bottom: 28px !important; }

/* Clearer glass: more transparent, with a crisp edge and a real lifted shadow. */
:root {
  --glass-fill: color-mix(in srgb, var(--surface-raised) 42%, transparent);
  --glass-fill-soft: color-mix(in srgb, var(--surface-raised) 26%, transparent);
  --glass-edge-clean: color-mix(in srgb, white 28%, var(--accent) 12%);
  --glass-shadow-clean: 0 24px 60px -30px rgba(20, 10, 48, .50), 0 8px 24px -16px rgba(20, 10, 48, .25), inset 0 1px 0 rgba(255,255,255,.22);
}
.card, .modal, .search-artist-spotlight, .search-similar, .search-all-results, .event-card, .class-preview-card {
  background: linear-gradient(145deg, var(--glass-fill), var(--glass-fill-soft));
  border-color: var(--glass-edge-clean);
  box-shadow: var(--glass-shadow-clean);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.btn, .theme-toggle, .nav-cta, .app-nav-link, .link-btn, .filter-tab, .search-related-card, .full-player-tab, .now-playing-toggle, .now-playing-skip, .now-playing-close, .now-playing-lyrics, .full-player-stop, .full-player-skip {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 48%, transparent), color-mix(in srgb, var(--surface) 24%, transparent));
  border: 1px solid color-mix(in srgb, white 24%, var(--accent) 14%);
  box-shadow: 0 12px 26px -18px rgba(20, 10, 48, .48), inset 0 1px 0 rgba(255,255,255,.20);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.btn-primary, .nav-cta-solid, .full-player-toggle {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 34%, var(--surface-raised) 42%), color-mix(in srgb, var(--accent) 22%, var(--surface) 42%));
  color: var(--text);
  border-color: color-mix(in srgb, white 30%, var(--accent) 38%);
}
.btn:hover:not(:disabled), .nav-cta:hover, .app-nav-link:hover, .theme-toggle:hover, .link-btn:hover:not(:disabled), .search-related-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -20px rgba(20,10,48,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.app-nav { background: color-mix(in srgb, var(--surface-raised) 48%, transparent); backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); }
.field-input, .select-input, select { background: color-mix(in srgb, var(--surface-raised) 36%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Artist spotlight: the artwork is bright and the surrounding surface borrows its color. */
.search-artist-spotlight {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--artist-color) 38%, transparent), transparent 38%),
    radial-gradient(circle at 92% 80%, color-mix(in srgb, var(--artist-color) 20%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--artist-color) 18%, var(--surface-raised) 38%), color-mix(in srgb, var(--surface-raised) 38%, transparent));
}
.search-artist-profile {
  background: color-mix(in srgb, var(--surface-raised) 38%, transparent);
  border: 1px solid color-mix(in srgb, white 28%, var(--artist-color) 18%);
  box-shadow: 0 20px 45px -26px rgba(15,8,35,.46), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.search-artist-profile > img, .search-artist-profile-fallback { width: 92px; height: 92px; flex-basis: 92px; border-radius: 24px; object-fit: cover; box-shadow: 0 18px 36px -20px rgba(0,0,0,.42); }
.search-artist-profile > img { filter: none; }
.search-artist-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.artist-editor-preview { width:128px; height:128px; margin:4px auto 16px; border-radius:30px; overflow:hidden; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); font-weight:800; box-shadow:0 22px 46px -24px rgba(20,10,48,.5); }
.artist-editor-preview img { width:100%; height:100%; object-fit:cover; }

/* Dashboard class cards are intentionally larger than the old list. */
.dashboard-grid { display:block; }
.dashboard-class-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; }
.dashboard-class-card { padding:0; overflow:hidden; min-height:300px; }
.dashboard-class-link { display:flex; flex-direction:column; min-height:300px; height:100%; color:inherit; text-decoration:none; padding:24px; }
.dashboard-class-card-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; min-height:90px; }
.dashboard-class-card-head h2 { font-size:1.55rem; margin:2px 0 4px; }
.dashboard-class-card-head p { margin:0; }
.dashboard-playing-preview { display:flex; align-items:center; gap:12px; padding:12px; margin-top:10px; border-radius:18px; background:color-mix(in srgb,var(--surface-raised) 38%,transparent); border:1px solid color-mix(in srgb,white 18%,var(--accent) 10%); box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.dashboard-playing-preview img, .dashboard-playing-art-fallback { width:54px; height:54px; flex:0 0 54px; border-radius:14px; object-fit:cover; }
.dashboard-playing-art-fallback { display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); font:700 .7rem 'JetBrains Mono',monospace; }
.dashboard-playing-preview > div:last-child { display:flex; flex-direction:column; min-width:0; }
.dashboard-playing-preview strong, .dashboard-playing-preview span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dashboard-playing-label { color:var(--accent); font:600 .64rem 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.dashboard-playing-preview strong { font-size:.9rem; }
.dashboard-playing-preview span:last-child { color:var(--text-dim); font-size:.76rem; }
.dashboard-playing-preview.is-idle { opacity:.8; }
.dashboard-recent-preview { margin:18px -24px -24px; padding:16px 24px 18px; margin-top:auto; border-top:1px solid color-mix(in srgb,white 16%,var(--accent) 10%); background:linear-gradient(180deg,color-mix(in srgb,var(--text) 3%,transparent),color-mix(in srgb,var(--surface-raised) 20%,transparent)); }
.dashboard-recent-preview .class-preview-song { padding:5px 0; }
.dashboard-empty-class-card { min-height:260px; }

/* Library actions and playlist picker stay aligned instead of stretching the header. */
.library-header-actions { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.library-playlist-picker { min-width:220px; }
.library-playlist-picker .field-label { margin-bottom:5px; }
.library-playlist-picker .select-input { width:100%; }

/* Manual lyrics controls are clearer and less dependent on symbols. */
.lk-custom-lyrics-setup { display:flex; flex-direction:column; gap:10px; }
.lk-custom-lyrics-input { min-height:180px; resize:vertical; background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.16); }
.lk-custom-lyrics-setup .btn { width:100%; }
.lk-manual-actions { gap:8px; }
.lk-manual-actions .btn { min-height:38px; }

/* Avoid a clipped page background at the end of long screens. */
.page { min-height:calc(100vh - 64px); }
@media (max-width:760px){
  .dashboard-class-grid { grid-template-columns:1fr; }
  .dashboard-class-card, .dashboard-class-link { min-height:280px; }
  .library-header-actions { width:100%; align-items:stretch; }
  .library-playlist-picker { flex:1; min-width:0; }
  .library-header-actions > .btn { flex:0 0 auto; }
  .search-artist-heading { align-items:flex-start; flex-direction:column; }
  .search-artist-actions { width:100%; }
}

.converter-panel { margin: 0 0 20px; padding: 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 42%,transparent),color-mix(in srgb,var(--surface) 24%,transparent)); border:1px solid var(--glass-edge-clean); box-shadow:var(--glass-shadow-clean); backdrop-filter:blur(24px) saturate(145%); -webkit-backdrop-filter:blur(24px) saturate(145%); }
.converter-panel h2 { margin:0 0 4px; font-size:1.12rem; }
.converter-panel p { margin:0; max-width:70ch; }
@media(max-width:700px){ .converter-panel { flex-direction:column; align-items:stretch; } .converter-panel .btn { width:100%; } }

/* =========================================================
   September 11 remembrance - shown only on September 11
   ========================================================= */
body.classwave-911 {
  background:
    linear-gradient(rgba(8, 13, 27, .88), rgba(8, 13, 27, .88)),
    repeating-linear-gradient(
      0deg,
      rgba(178, 34, 52, .12) 0,
      rgba(178, 34, 52, .12) 10px,
      rgba(255, 255, 255, .08) 10px,
      rgba(255, 255, 255, .08) 20px
    ),
    linear-gradient(90deg, rgba(10, 49, 97, .18) 0 31%, transparent 31%),
    var(--bg);
  background-attachment: scroll;
}
.remembrance-911 {
  position:relative;
  z-index:20;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:linear-gradient(120deg, rgba(10,49,97,.78), rgba(20,28,48,.78) 48%, rgba(112,22,35,.68));
  box-shadow:0 16px 42px -30px rgba(0,0,0,.75);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
}
.remembrance-911-inner,
.remembrance-911-panel {
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
}
.remembrance-911-inner {
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 0;
}
.remembrance-911-kicker {
  display:block;
  margin-bottom:4px;
  color:rgba(255,255,255,.68);
  font:600 .68rem 'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.remembrance-911 h2,
.remembrance-911 h3 { color:#fff; }
.remembrance-911 h2 { font-size:1.45rem; }
.remembrance-911 p { color:rgba(255,255,255,.78); margin:5px 0 0; max-width:760px; }
.remembrance-911-learn { flex:0 0 auto; color:#fff !important; }
.remembrance-911-panel {
  display:grid;
  gap:22px;
  padding:0 0 28px;
}
.remembrance-911-history,
.remembrance-911-photos,
.remembrance-911-news {
  padding:22px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:rgba(7,12,25,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.remembrance-911-history p { max-width:820px; }
.remembrance-911-section-head { margin-bottom:15px; }
.remembrance-911-section-head h3 { margin-top:2px; }
.remembrance-911-photo-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.remembrance-911-photo {
  display:block;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
  text-decoration:none;
}
.remembrance-911-photo img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .25s ease;
}
.remembrance-911-photo:hover img { transform:scale(1.025); }
.remembrance-911-photo span {
  display:block;
  padding:8px 10px;
  color:rgba(255,255,255,.65);
  font-size:.72rem;
}
.remembrance-911-news-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.remembrance-911-news-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:15px;
  background:rgba(255,255,255,.045);
  color:#fff;
  text-decoration:none;
}
.remembrance-911-news-card:hover { background:rgba(255,255,255,.08); }
.remembrance-911-news-card strong { font-size:.86rem; }
.remembrance-911-news-card span { color:rgba(255,255,255,.62); font-size:.74rem; white-space:nowrap; }

/* Let an artist's extracted artwork color wash over the entire search page,
   while keeping enough neutral glass that text remains readable. */
.artist-search-page {
  position:relative;
  isolation:isolate;
}
.artist-search-page::before {
  content:'';
  position:fixed;
  z-index:-1;
  inset:64px 0 0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 22%, color-mix(in srgb,var(--artist-color) 30%,transparent), transparent 34%),
    radial-gradient(circle at 86% 55%, color-mix(in srgb,var(--artist-color) 22%,transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb,var(--artist-color) 12%,transparent), transparent 72%);
  opacity:.95;
  transition:opacity .3s ease;
}
.search-artist-spotlight {
  background:
    radial-gradient(circle at 5% 10%, color-mix(in srgb,var(--artist-color) 44%,transparent), transparent 38%),
    radial-gradient(circle at 95% 90%, color-mix(in srgb,var(--artist-color) 30%,transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb,var(--artist-color) 28%,var(--surface-raised) 34%), color-mix(in srgb,var(--artist-color) 12%,var(--surface) 38%));
}
.search-artist-heading { align-items:center; }
.search-artist-profile { display:flex; align-items:center; gap:15px; min-width:0; }
.search-artist-profile > div:last-child { min-width:0; }
.search-artist-profile h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-artist-actions { justify-content:flex-end; }
@media(max-width:700px){
  .remembrance-911-inner { align-items:flex-start; flex-direction:column; gap:14px; }
  .remembrance-911-learn { width:100%; }
  .remembrance-911-photo-grid { grid-template-columns:1fr; }
  .remembrance-911-news-grid { grid-template-columns:1fr; }
  .remembrance-911-history,.remembrance-911-photos,.remembrance-911-news { padding:16px; border-radius:18px; }
  .search-artist-heading { align-items:stretch; }
  .search-artist-profile { align-items:flex-start; }
  .search-artist-profile > img, .search-artist-profile-fallback { width:76px; height:76px; flex-basis:76px; border-radius:20px; }
  .search-artist-actions { justify-content:stretch; }
  .search-artist-actions .btn { flex:1; }
}

/* ---------- Final UI polish ---------- */
html, body { overflow-x: hidden; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
.app-nav-row, .app-nav-actions, .landing-nav-actions { min-width: 0; }
.app-nav-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.app-nav-primary { min-width:0; overflow:hidden; }
.app-nav-link { white-space:nowrap; }
.remembrance-911-copy { min-width:0; }
.remembrance-911-copy h2 { margin:0; }
.remembrance-911-panel { scroll-margin-top:90px; }
.remembrance-911-photo img { background:rgba(255,255,255,.04); }
.remembrance-911-photo:focus-visible, .remembrance-911-news-card:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (max-width: 880px) {
  .app-nav-primary { display:none; }
  .app-nav-actions { margin-left:auto; }
}
@media (max-width: 700px) {
  .remembrance-911-inner { width:min(100% - 24px, 1180px); }
  .remembrance-911-panel { width:min(100% - 24px, 1180px); }
  .remembrance-911-history .btn { width:100%; }
}
@media (max-width: 420px) {
  .remembrance-911-kicker { font-size:.62rem; }
  .remembrance-911 h2 { font-size:1.28rem; }
  .remembrance-911 p { font-size:.88rem; }
}

/* Dashboard polish: teacher identity is visible on class previews, and the
   Recent requests panel gets a little breathing room after the class cards. */
.dashboard-class-teacher{ margin-top:10px; }
.dashboard-class-teacher .teacher-name{ min-width:0; }
.dashboard-recent-requests{ margin-top:28px; }
@media(max-width:700px){ .dashboard-recent-requests{ margin-top:22px; } }


/* Final UI spacing + 9/11 flag polish */
.remembrance-911-inner { gap: 18px; }
.remembrance-911-flag-wrap {
  flex:0 0 auto;
  width:116px;
  height:78px;
  display:grid;
  place-items:center;
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 28px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22);
}
.remembrance-911-flag {
  display:block;
  width:116px;
  height:78px;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.remembrance-911-copy { flex:1 1 auto; }

/* Keep action buttons comfortably separated everywhere, especially on touch screens. */
.page-head-actions,
.hero-ctas,
.modal-actions,
.event-actions,
.review-actions,
.moderation-actions,
.override-actions,
.profile-avatar-actions,
.library-actions,
.navcustom-actions,
.song-rating-modal-actions,
.track-detail-lyrics-links,
.live-lyrics-links,
.lk-manual-actions,
.search-artist-actions { gap:12px; }
.search-top-songs { gap:16px; }
.search-top-songs .song-card.is-clickable { cursor:pointer; }

@media (max-width:700px) {
  .remembrance-911-inner { align-items:flex-start; }
  .remembrance-911-flag-wrap { width:64px; height:44px; }
  .remembrance-911-flag { width:64px; height:44px; }
  .remembrance-911-inner { gap:14px; }
  .page-head-actions,
  .hero-ctas,
  .modal-actions,
  .event-actions,
  .review-actions,
  .moderation-actions,
  .override-actions,
  .profile-avatar-actions,
  .library-actions,
  .navcustom-actions,
  .song-rating-modal-actions,
  .track-detail-lyrics-links,
  .live-lyrics-links,
  .lk-manual-actions,
  .search-artist-actions { gap:10px; }
}


/* 0.3.10 polish */
body { background-attachment: fixed; }
.app-nav-primary { overflow: visible; }
.app-nav-row, .app-nav-actions, .app-nav-primary { overflow: visible; }
.now-playing-toggle, .now-playing-close, .now-playing-lyrics, .now-playing-skip { box-sizing:border-box; }
.now-playing-toggle { min-width:44px; width:44px; height:36px; }
.now-playing-close { min-width:36px; width:36px; height:36px; padding:0; }
.now-playing-lyrics { width:36px; height:36px; min-width:36px; padding:0; }
.now-playing-lyrics svg, .full-player-tab-icon svg { display:block; }
.full-player-artist-link { border:0; background:none; padding:0; cursor:pointer; text-align:inherit; font:inherit; color:var(--text-dim); }
.full-player-artist-link:hover { color:var(--accent); text-decoration:underline; }
.full-player-album { margin:3px 0 0; color:var(--text-dim); font-size:.8rem; }
.full-player-tab-icon { display:flex; align-items:center; justify-content:center; min-height:18px; }
.search-artist-name-btn { display:block; margin:2px 0 3px; padding:0; border:0; background:none; color:var(--text); font:inherit; font-size:1.25rem; font-weight:700; cursor:pointer; text-align:left; }
.search-artist-name-btn:hover { color:var(--accent); text-decoration:underline; }
.search-suggestion { margin:16px 0 -4px; padding:12px 16px; border:1px solid var(--glass-edge-clean); border-radius:14px; background:color-mix(in srgb,var(--surface-raised) 38%,transparent); color:var(--text-dim); }
.search-suggestion button { border:0; background:none; padding:0; color:var(--accent); font:inherit; font-weight:700; cursor:pointer; }
.artist-page-hero { display:flex; align-items:center; gap:22px; padding:22px; margin-bottom:22px; }
.artist-page-image { width:128px; height:128px; border-radius:30px; overflow:hidden; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-weight:800; }
.artist-page-image img { width:100%; height:100%; object-fit:cover; }
.artist-page-hero h2 { margin:3px 0 4px; }
.artist-song-list { display:grid; gap:12px; }
.lk-spindle-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.lk-manual-clock { margin-left:auto; min-width:54px; text-align:center; color:var(--accent); font:600 .78rem 'JetBrains Mono',monospace; }
.lk-manual-rows { display:flex; flex-direction:column; gap:7px; margin-top:4px; overflow:auto; min-height:0; max-height:42vh; }
.lk-manual-row { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:9px; align-items:center; padding:7px; border:1px solid rgba(247,244,255,.12); border-radius:10px; background:rgba(247,244,255,.04); }
.lk-manual-time { min-width:0; padding:8px 9px; color:var(--accent); font-family:'JetBrains Mono',monospace; }
.lk-manual-row-text { min-width:0; overflow-wrap:anywhere; line-height:1.4; }
.lk-manual-capture { min-height:34px; padding:7px 11px; font-size:.76rem; }
@media(max-width:640px){ .artist-page-hero { align-items:flex-start; } .artist-page-image { width:88px; height:88px; border-radius:22px; } .lk-manual-row { grid-template-columns:82px minmax(0,1fr); } .lk-manual-capture { grid-column:2; justify-self:start; } .lk-manual-clock { margin-left:0; } }

.search-artist-profile.is-clickable { cursor:pointer; }
.search-artist-profile.is-clickable:hover { border-color:color-mix(in srgb,var(--artist-color) 50%,white 25%); transform:translateY(-1px); }

/* 0.3.11 artist page + update privacy banner */
.no-ai-banner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:16px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,white 12%);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.no-ai-banner strong{font:800 .68rem 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.no-ai-banner span{font-size:.8rem;color:var(--text-dim)}
.artist-page-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:18px 0 30px;
}
.artist-page-header .artist-page-image{
  width:190px;
  height:190px;
  border-radius:50%;
  margin-bottom:18px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
  font-weight:800;
  box-shadow:0 24px 60px -30px rgba(20,10,48,.55),inset 0 1px 0 rgba(255,255,255,.2);
}
.artist-page-header .artist-page-image img{width:100%;height:100%;object-fit:cover}
.artist-page-header h2{font-size:clamp(2.1rem,5vw,3.8rem);line-height:1.02;margin:0;letter-spacing:-.04em}
.artist-page-songs-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:8px 0 18px}
.artist-page-songs-head h2{margin:2px 0 0}
.artist-submit-picker{min-width:220px}
.artist-submit-picker .field{margin-bottom:0}
.artist-song-list .song-card-footer .btn{width:100%}
@media(max-width:640px){
  .artist-page-header .artist-page-image{width:150px;height:150px}
  .artist-page-songs-head{align-items:stretch;flex-direction:column}
  .artist-submit-picker{min-width:0;width:100%}
  .no-ai-banner{align-items:flex-start;flex-direction:column;gap:5px}
}


/* ---------- Compact player refresh ---------- */
.now-playing-bar{
  gap:8px;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  min-height:58px;
}
.now-playing-hit{
  gap:9px;
  padding:0;
  min-height:46px;
  align-items:center;
}
.now-playing-label{ display:none; }
.now-playing-art{ width:42px; height:42px; border-radius:9px; }
.now-playing-info{
  min-width:0;
  max-width:none;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
}
.now-playing-title{ font-size:.84rem; line-height:1.15; }
.now-playing-artist{ font-size:.7rem; line-height:1.1; }
.now-playing-info .player-progress{
  width:100%;
  margin-top:3px;
  min-width:0;
}
.now-playing-info .player-progress-track{ height:3px; }
.now-playing-info .player-progress-fill{ transition:width .25s linear; animation:none; }
.now-playing-time{ font-size:.62rem; min-width:30px; text-align:center; }
.now-playing-toggle,.now-playing-skip,.now-playing-lyrics,.now-playing-close{
  width:34px; height:34px; min-width:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.now-playing-toggle svg,.now-playing-skip svg,.now-playing-lyrics svg,.now-playing-close svg{
  width:16px; height:16px; display:block;
}
.now-playing-lyrics{
  background:transparent;
  border:0;
  color:var(--text-dim);
  cursor:pointer;
}
.now-playing-close{
  background:transparent;
  border:0;
  color:var(--text-dim);
}
@media (max-width:600px){
  .now-playing-bar{ gap:5px; }
  .now-playing-art{ width:38px; height:38px; }
  .now-playing-hit{ gap:7px; }
  .now-playing-time{ display:none; }
  .now-playing-toggle,.now-playing-skip,.now-playing-lyrics,.now-playing-close{
    width:32px; height:32px; min-width:32px;
  }
}

/* Expanded player controls: icons only, no boxed words. */
.full-player-collapse{
  margin:5px 0 0;
  padding:6px 14px;
  gap:0;
}
.full-player-collapse svg{ width:22px; height:22px; display:block; }
.full-player-collapse span{ display:none; }
.full-player-controls{ gap:16px; }
.full-player-stop,.full-player-skip,.full-player-toggle{
  display:flex; align-items:center; justify-content:center;
}
.full-player-stop svg,.full-player-skip svg,.full-player-toggle svg{
  width:20px; height:20px; display:block;
}
.full-player-toggle svg{ width:24px; height:24px; }
.full-player-copy{ margin-bottom:12px; }
.full-player-art-wrap{ margin-bottom:14px; }
.full-player-times{ margin-bottom:14px; }
.full-player-main .player-progress{ margin-bottom:2px; }

/* Active lyrics are highlighted as a line. There is deliberately no
   left-to-right word fill in normal line timing mode. */
.lk-active-line{
  color:var(--lk-highlight-color, var(--accent));
  text-shadow:0 0 26px color-mix(in srgb, var(--lk-highlight-color, var(--accent)) 28%, transparent);
}
.lk-active-line-fill{
  background:none;
  color:inherit;
  animation:none !important;
}
.lk-active-line.has-word-timing{
  color:rgba(247,244,255,.34);
  text-shadow:none;
}
.lk-word{
  transition:color .12s ease, text-shadow .12s ease, opacity .12s ease;
}
.lk-word.is-active,
.lk-word.is-ended{
  color:var(--lk-highlight-color, var(--accent));
  text-shadow:0 0 20px color-mix(in srgb, var(--lk-highlight-color, var(--accent)) 30%, transparent);
}
.lk-word.is-ended{ opacity:.92; }

/* Phone-friendly timed-lyrics editor. */
.lk-timing-mode{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:4px;
  border-radius:14px;
  background:rgba(247,244,255,.06);
}
.lk-timing-mode button{
  min-height:44px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:rgba(247,244,255,.6);
  font:600 .78rem 'Inter',sans-serif;
  cursor:pointer;
}
.lk-timing-mode button.is-active{
  background:rgba(247,244,255,.13);
  color:#fff;
}
.lk-mobile-note{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(247,244,255,.05);
  color:rgba(247,244,255,.58);
  font-size:.76rem;
  line-height:1.4;
}
.lk-manual-word-context{
  margin:0;
  font:600 .7rem 'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(247,244,255,.4);
}
.lk-manual-word{
  margin:0;
  max-width:100%;
  font:600 clamp(1.8rem,9vw,3.2rem) 'Inter',serif;
  color:#fff;
  text-align:center;
}
.lk-manual-progress{
  font:600 .7rem 'JetBrains Mono',monospace;
  color:rgba(247,244,255,.42);
}
.lk-manual-tap svg{ width:32px; height:32px; display:block; margin:auto; }
@media (max-width:600px){
  .full-player{
    max-height:94vh;
    border-radius:20px 20px 0 0;
  }
  .full-player-body{ padding:5px 16px 14px; }
  .full-player-art-wrap{
    width:min(220px,62vw);
    margin-bottom:12px;
  }
  .full-player-title{ font-size:1.08rem; }
  .full-player-artist{ font-size:.82rem; }
  .full-player-controls{ gap:13px; }
  .full-player-toggle{ width:58px; height:58px; }
  .full-player-stop,.full-player-skip{ width:40px; height:40px; }
  .lk-manual-panel{ padding:12px; gap:10px; }
  .lk-manual-tap{ width:92px; height:92px; }
  .lk-manual-actions{ gap:7px; }
  .lk-manual-actions .btn{ min-height:42px; padding:9px 12px; }
  .lk-custom-lyrics-input{ font-size:16px; }
}

.now-playing-hit{ cursor:pointer; }


/* ---------- Final player/UI cleanup ---------- */
.now-playing-bar{
  border-radius:16px 16px 0 0;
  overflow:visible;
  padding-bottom:max(5px, env(safe-area-inset-bottom));
  transition:opacity .24s ease, transform .24s ease, box-shadow .24s ease;
}
.now-playing-bar::after{
  content:"";
  position:absolute;
  left:-1px; right:-1px; bottom:-34px;
  height:36px;
  pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb,var(--surface) 34%,transparent), transparent);
  opacity:.55;
  border-radius:0 0 18px 18px;
}
.now-playing-hit{ min-width:0; }
.now-playing-info{ min-width:0; }
.now-playing-title,.now-playing-artist{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The timing control is deliberately quiet until the pointer/focus reaches its area. */
.lk-manual-toggle-wrap{
  display:flex;
  justify-content:center;
  min-height:34px;
  margin-top:4px;
  opacity:0;
  transition:opacity .18s ease;
}
.lk-manual-toggle-wrap:hover,.lk-manual-toggle-wrap:focus-within{ opacity:1; }
.lk-manual-toggle{
  background:rgba(247,244,255,.06);
  border:1px solid rgba(247,244,255,.08);
  border-radius:999px;
  color:rgba(247,244,255,.68);
  min-height:32px;
  padding:5px 11px;
  font-size:.72rem;
}
.lk-manual-toggle:hover{ color:#fff; background:rgba(247,244,255,.12); }

/* Clean, consistent icon-only play/pause controls in the Library menu. */
.library-play-button{
  width:40px; height:40px; min-width:40px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border-radius:50%; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,var(--surface-raised));
  color:var(--text);
}
.library-play-button:hover{ color:var(--accent); transform:translateY(-1px); }
.library-play-button svg{ width:18px; height:18px; display:block; }

/* Expanded player gets a cleaner sheet edge and no awkward bottom corner. */
.full-player{
  border-radius:22px 22px 0 0;
  overflow:hidden;
}
@media (min-width:760px){ .full-player{ border-radius:22px; } }
.full-player-backdrop:not(.is-lyrics-fullscreen){
  background:linear-gradient(to bottom, rgba(15,13,23,.38), rgba(15,13,23,.72));
}

@media (max-width:600px){
  .lk-manual-toggle-wrap{ opacity:1; }
  .now-playing-bar{ border-radius:14px 14px 0 0; }
  .now-playing-bar::after{ bottom:-28px; height:30px; }
}

.full-player-backdrop.is-closing{ animation:none !important; pointer-events:none; }
.full-player.is-closing{ animation:fullPlayerSheetOut .34s cubic-bezier(.22,.72,.25,1) forwards !important; }
@keyframes fullPlayerSheetOut{
  from{transform:translate3d(0,0,0);opacity:1}
  to{transform:translate3d(0,105%,0);opacity:1}
}


/* ---------- 0.3.11 player + AutoMix + live lyrics polish ---------- */
.automix-toggle{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 13px;
  border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface-raised) 75%,transparent);
  color:var(--text-dim);font:600 .76rem 'Inter',sans-serif;cursor:pointer;transition:.18s ease;
}
.automix-toggle:hover{transform:translateY(-1px);color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.automix-toggle.is-on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 11%,var(--surface-raised));}
.automix-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;opacity:.6;}
.automix-toggle.is-on .automix-dot{opacity:1;animation:automixPulse 1.5s ease-in-out infinite;}
@keyframes automixPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,currentColor 0%,transparent)}}
.library-artist-link{display:block;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0;background:none;color:var(--text-dim);font:inherit;text-align:left;cursor:pointer;}
.library-artist-link:hover{color:var(--accent);text-decoration:underline;}

.artist-page{position:relative;isolation:isolate;}
.artist-page::before{content:"";position:fixed;inset:64px 0 0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--artist-color) 30%,transparent),transparent 34%),radial-gradient(circle at 85% 70%,color-mix(in srgb,var(--artist-color) 22%,transparent),transparent 40%);opacity:.7;}
.artist-page-hero{position:relative;overflow:hidden;min-height:270px;flex-direction:row;justify-content:flex-start;align-items:center;text-align:left;padding:34px;gap:26px;border:1px solid color-mix(in srgb,var(--artist-color) 25%,var(--line));border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--artist-color) 22%,var(--surface-raised)),color-mix(in srgb,var(--surface) 72%,transparent));box-shadow:0 35px 90px -50px color-mix(in srgb,var(--artist-color) 55%,transparent);}
.artist-page-glow{position:absolute;inset:-30%;background:radial-gradient(circle at 28% 45%,color-mix(in srgb,var(--artist-color) 28%,transparent),transparent 32%);filter:blur(30px);pointer-events:none;}
.artist-page-hero .artist-page-image{position:relative;z-index:1;width:190px;height:190px;border-radius:50%;margin:0;box-shadow:0 22px 60px -25px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--artist-color) 28%,white 5%);}
.artist-page-hero h2{position:relative;z-index:1;margin:0;font-size:clamp(2.5rem,7vw,5.2rem);}
.artist-page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--surface) 28%,transparent) 60%,color-mix(in srgb,var(--surface) 55%,transparent) 100%);pointer-events:none;}

/* Live lyrics: the stage is intentionally huge and text-first. */
.live-lyrics-stage.is-paused .lk-karaoke{filter:grayscale(.85);opacity:.52;transition:opacity .5s ease,filter .5s ease;}
.lyrics-pause-overlay{position:absolute;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;pointer-events:none;background:rgba(15,13,23,.35);backdrop-filter:blur(3px);}
.lyrics-pause-overlay strong{font:900 clamp(3rem,13vw,9rem)/.9 'Inter',sans-serif;letter-spacing:-.07em;color:#fff;text-shadow:0 12px 60px rgba(0,0,0,.45);}
.lyrics-pause-overlay span{font:900 3rem/1 'Inter',sans-serif;color:rgba(255,255,255,.55);}
.lyrics-pause-overlay.is-flash{animation:lyricsPauseFlash .85s ease forwards;}
.lyrics-pause-overlay.is-paused{background:transparent;backdrop-filter:none;align-items:flex-start;justify-content:flex-start;padding:16vh 7vw;opacity:1;}
.lyrics-pause-overlay.is-paused strong{opacity:0;animation:none;}
@keyframes lyricsPauseFlash{0%{opacity:0;transform:scale(.94)}18%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
.lk-karaoke{min-height:0;}
.lk-active-line{font-family:var(--cw-font-lyrics, 'Inter'),sans-serif;font-size:calc(clamp(2.1rem,7vw,5rem) * var(--cw-lyrics-size,1));font-weight:var(--cw-lyrics-weight,800);line-height:1.08;max-width:96%;white-space:pre-line;overflow-wrap:anywhere;text-wrap:wrap;}
.lk-adjacent-line,.lk-upcoming-line{font-size:clamp(.95rem,2.4vw,1.35rem);}
.live-lyrics-intro{cursor:pointer;user-select:none;}
.live-lyrics-intro:focus-visible{outline:2px solid #fff;outline-offset:-8px;}

/* Make the fullscreen lyrics controls unobtrusive without shrinking the stage. */
.full-player.is-lyrics-fullscreen .full-player-body{padding:0;}
.full-player.is-lyrics-fullscreen .full-player-tabs{background:linear-gradient(to top,rgba(15,13,23,.9),transparent);border-top:0;position:absolute;left:0;right:0;bottom:0;z-index:25;}
.full-player.is-lyrics-fullscreen .full-player-collapse{position:absolute;right:14px;top:10px;z-index:30;}

@media(max-width:700px){
  .artist-page-hero{min-height:220px;padding:24px 18px;gap:16px;}
  .artist-page-hero .artist-page-image{width:120px;height:120px;}
  .artist-page-hero h2{font-size:clamp(2.2rem,12vw,4rem);}
  .artist-page::before{inset:55px 0 0;}
  .automix-toggle{min-height:36px;}
}


/* Final fixes for paused/minimized player behavior. */
.now-playing-bar{position:fixed;z-index:80;left:0;right:0;bottom:0;margin:0;}
.now-playing-bar::after{bottom:-46px;height:48px;opacity:.8;background:linear-gradient(to bottom,color-mix(in srgb,var(--surface) 42%,transparent),transparent);}
.now-playing-toggle{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent);border:0;}
.now-playing-toggle:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.now-playing-bar:not(:has(.now-playing-eq.is-active)){opacity:.92;}
.full-player-backdrop.is-closing{pointer-events:none;}
@keyframes fullPlayerSheetOut{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(0,105%,0);opacity:1}}
@media(max-width:600px){.now-playing-bar{padding-bottom:max(5px,env(safe-area-inset-bottom));}.now-playing-bar::after{bottom:-36px;height:38px;}}

/* ---------- 0.3.11 hotfix: player positioning + fullscreen lyrics ---------- */
/* The earlier glass-player rules centered the bar with translateX(-50%),
   then later switched it back to left/right:0. That combination pushed the
   entire mini-player half off-screen. Keep the bar viewport-anchored. */
.now-playing-bar{
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  transform:none !important;
  box-sizing:border-box;
  z-index:80;
}
.now-playing-bar::after{
  left:0;
  right:0;
  bottom:-42px;
  height:44px;
  border-radius:0;
  opacity:.7;
}

/* Fullscreen lyrics must own the whole viewport; the mini player is hidden
   underneath it so it can never peek through or sit off-screen. */
.full-player-backdrop.is-lyrics-fullscreen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh;
  overflow:hidden;
}
.full-player.is-lyrics-fullscreen{
  position:relative;
  inset:auto;
  width:100% !important;
  height:100% !important;
  min-height:100dvh;
  max-height:none !important;
  overflow:hidden;
  transform:none;
}
.full-player.is-lyrics-fullscreen .full-player-body{
  position:absolute;
  inset:0;
  overflow:hidden;
  min-height:0;
  padding:0 !important;
}
.full-player.is-lyrics-fullscreen .full-player-tabs{
  pointer-events:auto;
}

/* The logo/title intro is a true full-screen takeover. The Live Lyrics title
   is intentionally huge and spans the screen instead of being constrained by
   the normal player sheet width. */
.full-player.is-lyrics-fullscreen .live-lyrics{
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
}
.full-player.is-lyrics-fullscreen .live-lyrics-intro{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:8vh 5vw;
  box-sizing:border-box;
  z-index:40;
  background:#0f0d17;
}
.full-player.is-lyrics-fullscreen .live-lyrics-logo{
  width:min(240px,38vw);
}
.full-player.is-lyrics-fullscreen .live-lyrics-sting{
  width:100%;
  margin:0;
  font-size:clamp(3.2rem,11vw,9rem);
  line-height:.95;
  letter-spacing:-.055em;
  white-space:nowrap;
  text-align:center;
  justify-content:center;
}
.full-player.is-lyrics-fullscreen .live-lyrics-sting-chip{
  font-size:clamp(.65rem,1.8vw,1rem);
}

/* Once the intro is skipped, the stage itself is the full viewport. */
.full-player.is-lyrics-fullscreen .live-lyrics-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:clamp(52px,7vh,76px) clamp(18px,5vw,70px) 70px;
  box-sizing:border-box;
  overflow:hidden;
}
.full-player.is-lyrics-fullscreen .lk-header{
  position:relative;
  z-index:4;
  width:100%;
  margin:0;
  padding:0 0 8px;
  opacity:.72;
}
.full-player.is-lyrics-fullscreen .lk-karaoke{
  width:100%;
  min-height:0;
  padding:0 1vw;
  gap:clamp(14px,3vh,28px);
}
.full-player.is-lyrics-fullscreen .lk-active-line{
  width:100%;
  max-width:100%;
  font-size:clamp(2.8rem,8.5vw,8.5rem);
  line-height:1.02;
  text-wrap:wrap;
  white-space:pre-line;
}
.full-player.is-lyrics-fullscreen .lk-adjacent-line,
.full-player.is-lyrics-fullscreen .lk-upcoming-line{
  max-width:92%;
  font-size:clamp(1rem,2.8vw,1.8rem);
}

/* Stable pause treatment: PAUSED is a centered one-shot message, then the
   lyrics remain dimmed with a pause icon centered over them. */
.live-lyrics-stage.is-paused .lk-karaoke{
  filter:grayscale(1);
  opacity:.32;
}
.lyrics-pause-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:50 !important;
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  flex-direction:column;
  pointer-events:none;
  background:transparent !important;
  backdrop-filter:none !important;
}
.lyrics-pause-overlay.is-flash strong{
  opacity:1;
  animation:lyricsPausedTitle .85s cubic-bezier(.2,.75,.25,1) forwards;
}
.lyrics-pause-overlay.is-paused strong{
  display:none;
}
.lyrics-pause-overlay.is-paused span{
  display:flex;
  width:clamp(64px,10vw,104px);
  height:clamp(64px,10vw,104px);
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(15,13,23,.38);
  color:rgba(255,255,255,.9);
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1;
  text-shadow:0 10px 40px rgba(0,0,0,.5);
  animation:lyricsPauseIconIn .28s ease both;
}
@keyframes lyricsPausedTitle{
  0%{opacity:0;transform:scale(.86)}
  16%{opacity:1;transform:scale(1)}
  70%{opacity:1;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.06)}
}
@keyframes lyricsPauseIconIn{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}

@media(max-width:600px){
  .now-playing-bar{
    padding-left:8px;
    padding-right:8px;
    padding-bottom:max(5px,env(safe-area-inset-bottom));
  }
  .full-player.is-lyrics-fullscreen .live-lyrics-sting{
    white-space:normal;
    font-size:clamp(3rem,14vw,5.5rem);
  }
  .full-player.is-lyrics-fullscreen .live-lyrics-stage{
    padding-left:12px;
    padding-right:12px;
  }
}


/* 0.3.11 final visual corrections */
.full-player.is-closing{transform-origin:center bottom;}
.full-player-backdrop.is-closing{background:rgba(15,13,23,.72) !important;}
.full-player.is-lyrics-fullscreen .lk-header{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:0;
  justify-content:flex-start;
  text-align:left;
}
.full-player.is-lyrics-fullscreen .lk-header-art{
  width:72px;
  height:72px;
  border-radius:14px;
}
.full-player.is-lyrics-fullscreen .lk-header-copy{
  text-align:left;
  max-width:min(58vw,620px);
}
.full-player.is-lyrics-fullscreen .lk-header-title{font-size:1.25rem;}
.full-player.is-lyrics-fullscreen .lk-header-artist{font-size:.92rem;}
.full-player.is-lyrics-fullscreen .lk-active-line{
  white-space:pre-line;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:wrap;
}
@media(max-width:600px){
  .full-player.is-lyrics-fullscreen .lk-header-art{width:62px;height:62px;}
  .full-player.is-lyrics-fullscreen .lk-header-copy{max-width:calc(100vw - 100px);}
  .full-player.is-lyrics-fullscreen .lk-header-title{font-size:1.05rem;}
}

/* User-uploaded font and mobile search refinements */
.font-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0;}
.font-upload{display:flex;justify-content:center;position:relative;margin-top:8px;cursor:pointer;}
.font-preview{font-size:clamp(1.4rem,4vw,2.6rem);line-height:1.25;padding:20px;margin:10px 0 16px;border-radius:16px;background:color-mix(in srgb,var(--accent) 9%,var(--surface-raised));overflow-wrap:anywhere;}
.request-search{align-items:end;}
.request-search .field,.request-search .field-input{min-width:0;width:100%;}
.request-search input{font-size:16px; /* prevents iOS Safari from zooming the page on focus */}
@media(max-width:700px){.font-settings-grid{grid-template-columns:1fr;}.request-search{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;}.request-search .btn{width:100%;min-height:46px}.artist-page-hero{background-position:center;background-size:cover;}}

.artist-page-hero{background-size:cover;background-position:center;transition:background-image .25s ease;}
.artist-page-hero-copy{position:relative;z-index:2;min-width:0}.artist-page-hero-copy p{margin:8px 0 0;color:rgba(255,255,255,.78)}
.artist-release-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}.artist-release-filter{border:1px solid var(--line);background:color-mix(in srgb,var(--surface-raised) 70%,transparent);color:var(--text-dim);border-radius:999px;padding:9px 15px;cursor:pointer;font:inherit}.artist-release-filter.is-active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.artist-release-grid{display:grid;grid-template-columns:1fr;gap:26px}.artist-release{padding:18px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface-raised) 55%,transparent)}.artist-release-heading{display:flex;align-items:center;gap:14px;margin-bottom:14px}.artist-release-heading img{width:72px;height:72px;object-fit:cover;border-radius:12px;box-shadow:0 10px 25px #0003}.artist-release-heading h3{font-size:1.3rem}.artist-release-heading p{margin:3px 0 0}.artist-release .artist-song-list{gap:8px}

.lk-adjacent-line,.lk-upcoming-line,.lk-plain{font-family:var(--cw-font-lyrics,'Inter'),sans-serif;}
.lk-adjacent-line,.lk-upcoming-line{font-size:calc(clamp(.95rem,2.4vw,1.35rem) * var(--cw-lyrics-size,1));font-weight:var(--cw-lyrics-weight,500);}

.artist-page-logo{display:block;max-width:min(240px,45vw);max-height:58px;object-fit:contain;object-position:left center;margin-bottom:10px;filter:drop-shadow(0 2px 12px #0006)}.artist-logo-edit{position:absolute;z-index:4;right:18px;top:18px;border:1px solid #ffffff55;border-radius:999px;padding:9px 13px;background:#15131dcc;color:white;cursor:pointer;font:600 .8rem inherit}.artist-logo-editor{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface-raised)}.artist-logo-editor p{flex-basis:100%;margin:0}
@media(max-width:600px){.artist-logo-edit{right:10px;top:10px;font-size:.72rem}.artist-page-logo{max-width:42vw;max-height:42px}.artist-page-hero{padding-top:54px!important;}}


/* Artist page editor */
.ap-edit-row{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ap-studio{margin:0 0 20px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-raised);display:grid;gap:12px}
.ap-studio-head{display:grid;gap:4px}.ap-studio h4{margin:10px 0 6px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.ap-studio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ck-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}.ck-slider{display:grid;gap:4px;margin:8px 0;font-size:.85rem;color:var(--text-dim)}
.ck-swatch{width:30px;height:30px;border-radius:8px;border:1px solid var(--line)}.ap-color{display:grid;gap:4px;font-size:.8rem}.ap-check{display:flex;gap:8px;align-items:center;margin:6px 0}
.ck-stage{display:grid;place-items:center;margin:10px 0;border-radius:12px;overflow:auto;max-height:50vh;background:repeating-conic-gradient(#8884 0 25%,#0000 0 50%) 0 0/18px 18px}
.ck-canvas{max-width:100%;cursor:crosshair}
.ap2-top{display:flex;justify-content:flex-end;margin:0 0 12px}
.ap2-hero{position:relative;z-index:1;margin:0 0 26px}
.ap2-hero.is-editing{cursor:grab;touch-action:none;outline:2px dashed var(--artist-color);outline-offset:3px}
.ap2-stage{position:relative}.ap2-bg{position:absolute;top:0;left:0;right:0;overflow:hidden;z-index:0;pointer-events:none;background:color-mix(in srgb,var(--artist-color) 25%,#0c0a12)}.ap2-banner{position:absolute;inset:0;background-size:cover}.ap2-shade{position:absolute;inset:0;background:#05040a;pointer-events:none}.ap2-top,.ap2-music,.ap2-stage>.state{position:relative;z-index:1}.ap2-pagebg{position:fixed;inset:0;z-index:-1;background:var(--ap-bg)}.ap2-grad .ap2-pagebg{background:linear-gradient(180deg,var(--ap-bg),var(--ap-bg2))}
.ap2-item{position:absolute;z-index:2;transform:translate(-50%,-50%);user-select:none}.ap2-item img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.ap2-profile{border-radius:50%;max-width:60%}.ap2-profile img{object-fit:cover;border-radius:50%}.ap2-profile span{display:grid;place-items:center;width:100%;height:100%;font-weight:800;font-size:2rem;color:#fff;background:color-mix(in srgb,var(--artist-color) 40%,#17121f);border-radius:50%}
.ap2-item.is-editing{cursor:move;touch-action:none;outline:2px solid #fff;outline-offset:2px}
.ap2-handle{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--artist-color);cursor:nwse-resize;touch-action:none}
.ap2-name{white-space:nowrap;text-shadow:0 2px 18px #0009;max-width:96%}.ap2-name h1{margin:0;line-height:1;letter-spacing:-.03em}.ap2-name p{margin:6px 0 0;opacity:.85;white-space:normal}
.ap2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--ap-card,160px),1fr));gap:16px;margin:0 0 20px}
.ap2-card{display:grid;gap:4px;text-align:left;padding:10px;border:1px solid var(--line);border-radius:var(--ap-radius,16px);background:color-mix(in srgb,var(--surface-raised) calc(var(--ap-cardop,.6)*100%),transparent);color:inherit;cursor:pointer;font:inherit}
.ap2-card img,.ap2-noart{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--ap-radius,16px) * .6);background:color-mix(in srgb,var(--artist-color) 25%,#17121f)}.ap2-card.is-open{border-color:var(--artist-color)}
.ap2-custom{background:var(--ap-bg);color:var(--ap-text)}.ap2-custom .muted,.ap2-custom .eyebrow{color:color-mix(in srgb,var(--ap-text) 65%,transparent)}
@media(max-width:600px){.ap2-name{left:14px;right:14px}.ap2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Clear Skip button */
.now-playing-skip.is-clear,.full-player-skip.is-clear{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:74px;height:40px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;background:var(--accent);color:#fff;font:700 .85rem 'Inter',sans-serif;box-shadow:0 8px 20px -10px var(--accent)}
.now-playing-skip.is-clear svg,.full-player-skip.is-clear svg{width:18px;height:18px;flex:none}
.now-playing-skip.is-clear:disabled,.full-player-skip.is-clear:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;background:color-mix(in srgb,var(--text) 18%,transparent);color:var(--text)}
.full-player-skip.is-clear{height:48px;min-width:96px;font-size:.95rem}
@media(max-width:600px){.now-playing-skip.is-clear{min-width:44px;padding:0 12px}.now-playing-skip.is-clear span{display:none}}
/* Smooth close: fade backdrop and slide sheet together, no snap */
.full-player-backdrop.is-closing{animation:fpBackdropOut .36s ease forwards !important;background:linear-gradient(to bottom,rgba(15,13,23,.38),rgba(15,13,23,.72)) !important;pointer-events:none}
.full-player.is-closing{animation:fpSheetOut .36s cubic-bezier(.4,0,.6,1) forwards !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:var(--surface-raised) !important;will-change:transform,opacity}
@keyframes fpBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes fpSheetOut{from{transform:translateY(0);opacity:1}to{transform:translateY(60px);opacity:0}}
.ap-tabs{display:flex;gap:8px;flex-wrap:wrap}.ap-text-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.ap-text-grid label{display:grid;gap:4px;font-size:.8rem;color:var(--text-dim)}


/* Experimental feature notice */
.experimental-notice{
  max-width:1120px;margin:0 auto 14px;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  color:var(--text);box-shadow:0 8px 24px -20px var(--accent);
}
.experimental-notice-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.experimental-notice-copy strong{font-size:.92rem}
.experimental-notice-copy span{font-size:.84rem;color:var(--text-dim)}
.experimental-notice-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.experimental-notice-readmore{font-size:.82rem;font-weight:700;color:var(--accent);white-space:nowrap}
.experimental-notice-dismiss{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);font-size:1.35rem;line-height:1;cursor:pointer}
.experimental-notice-dismiss:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent)}
@media(max-width:640px){
 .experimental-notice{margin:0 12px 12px;padding:12px;align-items:flex-start;gap:8px}
 .experimental-notice-actions{gap:7px}
 .experimental-notice-readmore{font-size:.76rem}
}

/* Artist release cards open a focused release view. */
.artist-release-clickable{display:block;width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;background:var(--surface-raised);border:1px solid var(--line);border-radius:16px;padding:14px;transition:border-color .16s,transform .16s}
.artist-release-clickable:hover{border-color:var(--artist-color,var(--accent));transform:translateY(-2px)}
.ap2-release-detail{margin:0 0 22px;scroll-margin-top:20px}
.song-score-unavailable{min-height:24px}

/* Owner-only Wix-style site editor */
.cw-site-editor-launch{position:fixed;right:18px;top:82px;z-index:1200;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:11px 16px;background:#171717;color:#fff;font-weight:700;box-shadow:0 8px 28px #0005;cursor:pointer}
.cw-site-editor-panel{position:fixed;z-index:1300;right:0;top:0;bottom:0;width:min(390px,94vw);overflow:auto;background:var(--surface, #101114);color:var(--text, #f8f8f8);border-left:1px solid var(--border, #303238);box-shadow:-16px 0 45px #0006;padding:20px 18px 110px;box-sizing:border-box}
.cw-site-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border,#303238);padding-bottom:14px;margin-bottom:14px}.cw-site-editor-head h2{margin:4px 0}.cw-site-editor-head p{margin:0;color:var(--muted,#a7a7ad);font-size:12px;overflow-wrap:anywhere}.cw-site-editor-tip{padding:12px;border-radius:10px;background:rgba(120,120,130,.12);font-size:13px;line-height:1.45;margin-bottom:20px}.cw-site-editor-panel h3{font-size:14px;display:flex;align-items:center;gap:8px;margin:20px 0 12px}.cw-site-editor-panel h3 span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--accent,#ffb000);color:#111}.cw-site-editor-panel .field-label{display:block;margin:12px 0 5px}.cw-site-editor-panel .field-input{width:100%;box-sizing:border-box;margin-bottom:8px}.cw-site-editor-panel input[type=color]{height:40px;padding:3px}.cw-site-editor-panel .btn{width:100%;margin-top:8px}.cw-site-editor-adds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cw-site-add-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 6px;border:1px solid var(--border,#303238);border-radius:10px;background:rgba(130,130,140,.08);color:inherit;cursor:pointer}.cw-site-add-tile b{font-size:22px}.cw-site-block-edit{padding:10px;border:1px solid var(--border,#303238);border-radius:10px;margin-bottom:9px}.cw-site-block-edit strong{display:block;text-transform:capitalize;margin-bottom:8px}.cw-site-editor-footer{position:sticky;bottom:-110px;padding:14px 0 8px;background:var(--surface,#101114);border-top:1px solid var(--border,#303238);margin-top:22px}.cw-site-editor-footer p{overflow-wrap:anywhere}.cw-site-editing main{padding-right:0}.cw-site-editing main h1,.cw-site-editing main h2,.cw-site-editing main h3,.cw-site-editing main h4,.cw-site-editing main p,.cw-site-editing main span,.cw-site-editing main a,.cw-site-editing main button,.cw-site-editing main label,.cw-site-editing main li{cursor-crosshair}.cw-site-edit-selected{outline:2px solid #ffb000!important;outline-offset:3px!important;border-radius:3px}.cw-site-custom-blocks{max-width:1100px;margin:24px auto;padding:24px;display:grid;gap:14px}.cw-site-custom-blocks section{padding:24px;border-radius:14px;background:rgba(120,120,130,.1)}
@media(max-width:600px){.cw-site-editor-launch{top:auto;bottom:90px;right:12px}.cw-site-editor-panel{width:100%;padding:16px 14px 110px}}

/* ClassWave visual editor: editable section controls */
.cw-site-block-edit{display:flex;flex-direction:column;gap:7px}
.cw-site-block-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cw-site-block-toolbar strong{text-transform:capitalize;margin:0}
.cw-site-block-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cw-site-mini-btn{border:1px solid var(--border,#3b3d44);background:rgba(140,140,150,.12);color:inherit;border-radius:7px;padding:6px 9px;cursor:pointer;font-size:12px}
.cw-site-mini-btn:disabled{opacity:.35;cursor:not-allowed}
.cw-site-remove-btn{color:#ff8a8a}
.cw-site-block-options{display:grid;grid-template-columns:1fr 1fr;gap:4px 9px;align-items:center}
.cw-site-block-options .field-label{margin:4px 0}
.cw-site-block-options input[type=color]{height:35px;padding:2px}

/* Drag-and-drop visual editor slots */
.cw-site-canvas-item{position:relative;min-width:0;border:1px dashed transparent;border-radius:12px;padding:4px;cursor:grab;transition:border-color .15s,background .15s}
.cw-site-canvas-item:active{cursor:grabbing}
.cw-site-editing .cw-site-canvas-item:hover{border-color:rgba(255,176,0,.65);background:rgba(255,176,0,.035)}
.cw-site-drop-slot{min-height:18px;border:1px dashed rgba(255,176,0,.32);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,190,70,.75);font-size:11px;letter-spacing:.02em;transition:min-height .15s,background .15s,border-color .15s;opacity:.55}
.cw-site-editing .cw-site-drop-slot{min-height:30px;opacity:.85}
.cw-site-drop-slot.is-over{min-height:64px;background:rgba(255,176,0,.12);border:2px dashed #ffb000;color:#ffcf66;opacity:1}
.cw-site-add-tile[draggable=true],.cw-site-block-edit[draggable=true]{cursor:grab}
.cw-site-block-edit[draggable=true]:active{cursor:grabbing}

/* Existing-section controls in the owner visual editor */
.cw-site-block-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cw-site-block-toolbar strong{flex:1;min-width:100px;overflow-wrap:anywhere}
.cw-existing-section-copy{max-width:100%;overflow:hidden}
.cw-existing-section-copy img{max-width:100%;height:auto}
.cw-existing-section-copy *{max-width:100%}
.cw-site-editing main>section,.cw-site-editing main>article,.cw-site-editing main>div{outline-offset:3px}

/* Global insertion slots: above, between, and below existing page sections */
.cw-site-global-drop-slot{display:flex;flex-direction:column;gap:10px;min-height:30px;padding:6px 10px;margin:3px 0;border:1px dashed transparent;border-radius:10px;transition:background .15s,border-color .15s}
.cw-site-editing .cw-site-global-drop-slot{border-color:rgba(130,150,255,.35);background:rgba(130,150,255,.045);color:rgba(190,200,255,.9);font-size:12px;text-align:center}
.cw-site-editing .cw-site-global-drop-slot.is-over{border-color:rgba(130,150,255,.95);background:rgba(130,150,255,.18);min-height:58px}
.cw-site-global-item{width:100%;box-sizing:border-box}
.cw-site-global-item img{display:block;max-width:100%;height:auto}


/* ClassWave editor refresh: compact floating inspector, not a full-height sidebar. */
.cw-site-editor-launch{
  width:42px!important;height:42px!important;padding:0!important;
  display:grid;place-items:center;font-size:21px;line-height:1;
  right:16px!important;top:88px!important;bottom:auto!important;
  border-radius:14px!important;opacity:.82;
  transition:opacity .16s ease,transform .16s ease;
}
.cw-site-editor-launch:hover,.cw-site-editor-launch:focus-visible{opacity:1;transform:translateY(-1px)}
.cw-site-editor-panel{
  top:140px!important;right:16px!important;bottom:auto!important;
  width:min(350px,calc(100vw - 32px))!important;
  max-height:min(72vh,760px)!important;
  border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:0 18px 60px #0005!important;
  padding:17px 16px 18px!important;
}
.cw-site-editor-head h2{font-size:1.25rem}
.cw-site-editor-tip{font-size:12px;padding:9px 10px;margin-bottom:12px}
.cw-site-editor-panel h3{margin:14px 0 9px}
.cw-site-editor-tools{
  margin-top:12px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--surface-raised) 70%,transparent);
  overflow:hidden;
}
.cw-site-editor-tools summary{
  cursor:pointer;list-style:none;padding:12px 13px;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:space-between;
}
.cw-site-editor-tools summary::-webkit-details-marker{display:none}
.cw-site-editor-tools summary:after{content:'＋';font-size:16px;color:var(--accent)}
.cw-site-editor-tools[open] summary:after{content:'−'}
.cw-site-editor-tools>p{padding:0 12px}
.cw-site-editor-tools>.cw-site-block-edit{padding:10px 12px;border-top:1px solid var(--line)}
.cw-site-editor-footer{
  position:sticky!important;bottom:-18px!important;
  margin:14px -16px -18px!important;padding:12px 16px!important;
  background:var(--surface)!important;border-top:1px solid var(--line)!important;
  border-radius:0 0 18px 18px;
}
.cw-site-editor-panel .field-input{font-size:14px;padding:9px 10px}
.cw-site-editor-panel textarea.field-input{min-height:74px}
@media(max-width:600px){
  .cw-site-editor-launch{top:auto!important;bottom:92px!important;right:12px!important}
  .cw-site-editor-panel{top:auto!important;bottom:142px!important;right:10px!important;width:calc(100vw - 20px)!important;max-height:72vh!important}
}

/* --- ClassWave AI song workspace: spacious lyrics + continuous chat --- */
.track-detail-page{width:calc(100% - 32px);max-width:1480px;margin-inline:auto}
.track-detail-workspace.lyrics-only{grid-template-columns:minmax(0,1fr)}
.track-detail-grid{max-width:none;width:100%}
.track-detail-card{width:100%;box-sizing:border-box;padding:clamp(16px,2vw,28px)}
.track-detail-workspace{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:18px;align-items:stretch;margin-top:24px;width:100%}
.cw-lyrics-panel{display:flex;flex-direction:column;min-width:0;min-height:620px;margin:0;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,color-mix(in srgb,var(--surface) 98%,#fff 2%),color-mix(in srgb,var(--surface) 92%,#000 8%))}
.cw-panel-kicker{display:block;font-size:.68rem;letter-spacing:.16em;font-weight:750;color:var(--text-dim);margin-bottom:5px}
.cw-lyrics-panel .track-detail-lyrics-head{align-items:center;margin-bottom:8px}
.cw-lyrics-panel .track-detail-lyrics-head h3{margin:0;font-size:1.15rem}
.cw-lyrics-panel .lyrics-text{flex:1;min-height:460px;max-height:calc(100vh - 320px);margin:10px 0 0;padding:22px;border-radius:14px;border-color:color-mix(in srgb,var(--line) 65%,transparent);background:color-mix(in srgb,var(--surface) 88%,#000 12%);line-height:1.85;font-size:.96rem;white-space:pre-wrap;overflow:auto}
.cw-lyrics-empty{display:grid;place-items:center;flex:1;min-height:280px;padding:24px;color:var(--text-dim);text-align:center;border:1px dashed var(--line);border-radius:14px;margin-top:10px}
.cw-lyrics-panel .track-detail-lyrics-links{margin-top:14px}
.cw-chat-panel{display:flex;flex-direction:column;min-width:0;min-height:620px;height:min(78vh,900px);margin:0;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.09)!important;border-radius:20px!important;background:radial-gradient(ellipse at 20% 0%,rgba(100,100,120,.19),transparent 44%),linear-gradient(145deg,#15161a 0%,#101114 48%,#090a0c 100%);color:#f5f5f7;box-shadow:0 18px 55px rgba(0,0,0,.16)}
.cw-chat-header{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.018)}
.cw-chat-header h3{margin:0;font-size:1rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.cw-chat-header p{margin:4px 0 0;color:#a8a8b2;font-size:.78rem}
.cw-ai-avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:20px;background:linear-gradient(145deg,#3a3b43,#17181e);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px rgba(255,255,255,.12)}
.cw-ai-avatar-large{width:54px;height:54px;flex-basis:54px;font-size:25px;margin:0 auto 14px}
.cw-chat-status{margin-left:auto;display:flex;align-items:center;gap:6px;color:#b8c9bd;font-size:.7rem;white-space:nowrap}
.cw-chat-status i{display:block;width:6px;height:6px;border-radius:50%;background:#73d39b;box-shadow:0 0 10px rgba(115,211,155,.4)}
.cw-chat-messages{display:flex;flex:1;flex-direction:column;gap:18px;min-height:0;overflow:auto;padding:22px 18px;scroll-behavior:smooth;overscroll-behavior:contain}
.cw-chat-empty{margin:auto 0;max-width:390px;align-self:center;text-align:center;padding:20px 8px;color:#ededf0}
.cw-chat-empty h4{font-size:1.12rem;margin:0 0 8px;color:#fff;letter-spacing:-.025em}
.cw-chat-empty p{font-size:.84rem;line-height:1.65;color:#b8b8c2;margin:0}
.cw-chat-suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.cw-chat-suggestions button{font:inherit;font-size:.75rem;line-height:1.4;color:#e5e5ea;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:9px 12px;cursor:pointer;transition:background .15s,border-color .15s}
.cw-chat-suggestions button:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.cw-chat-suggestions button:disabled{opacity:.45;cursor:not-allowed}
.cw-chat-message{display:flex;align-items:flex-end;gap:9px;max-width:100%;animation:cwChatIn .2s ease-out}
.cw-chat-message.is-assistant{align-self:flex-start;max-width:94%}
.cw-chat-message.is-user{align-self:flex-end;max-width:90%;justify-content:flex-end}
.cw-message-avatar{width:29px;height:29px;flex-basis:29px;font-size:15px;box-shadow:none}
.cw-chat-bubble{max-width:100%;padding:12px 15px;border-radius:17px;font-size:.88rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:#f5f5f7}
.is-assistant .cw-chat-bubble{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.075);border-bottom-left-radius:5px}
.is-user .cw-chat-bubble{background:linear-gradient(145deg,#f0f0f4,#dcdce4);color:#17171b;border:1px solid rgba(255,255,255,.25);border-bottom-right-radius:5px}
.cw-chat-bubble strong{font-weight:700}
.cw-typing{display:flex;align-items:center;gap:5px;min-width:58px;min-height:39px}
.cw-typing span{width:5px;height:5px;background:#d0d0d8;border-radius:50%;animation:cwTyping 1s infinite ease-in-out}
.cw-typing span:nth-child(2){animation-delay:.15s}.cw-typing span:nth-child(3){animation-delay:.3s}
.cw-chat-error,.cw-chat-hint{margin:0;padding:0 18px 10px;font-size:.78rem;color:#ffb9b9}
.cw-chat-hint{color:#aaaab5}
.cw-chat-composer{display:flex;align-items:flex-end;gap:10px;margin:0 14px 10px;padding:9px 9px 9px 15px;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(255,255,255,.065);box-shadow:inset 0 1px rgba(255,255,255,.025);transition:border-color .15s,background .15s}
.cw-chat-composer:focus-within{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.085)}
.cw-chat-composer textarea{flex:1;min-width:0;max-height:120px;resize:vertical;border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;color:#fff!important;padding:8px 0!important;font:inherit;font-size:.87rem;line-height:1.5}
.cw-chat-composer textarea::placeholder{color:#85858f}
.cw-chat-composer button{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:0;border-radius:12px;background:#f2f2f5;color:#111116;font-size:24px;line-height:1;cursor:pointer;transition:transform .15s,opacity .15s}
.cw-chat-composer button:hover:not(:disabled){transform:translateY(-1px);background:#fff}
.cw-chat-composer button:disabled{opacity:.38;cursor:not-allowed}
.cw-send-spinner{width:15px;height:15px;border:2px solid rgba(0,0,0,.22);border-top-color:#111;border-radius:50%;animation:cwSpin .65s linear infinite}
.cw-chat-disclaimer{margin:0;padding:0 16px 14px;text-align:center;color:#7f808a;font-size:.66rem;line-height:1.45}
@keyframes cwTyping{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes cwSpin{to{transform:rotate(360deg)}}
@keyframes cwChatIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.track-detail-workspace{grid-template-columns:minmax(0,1fr)}.cw-lyrics-panel{min-height:420px}.cw-lyrics-panel .lyrics-text{min-height:360px;max-height:65vh}.cw-chat-panel{height:72vh;min-height:560px}}
@media(max-width:560px){.track-detail-page{width:calc(100% - 20px)}.track-detail-card{padding:13px}.track-detail-workspace{gap:13px;margin-top:18px}.cw-lyrics-panel{padding:13px;min-height:360px}.cw-lyrics-panel .lyrics-text{padding:15px;min-height:300px;font-size:.9rem}.cw-chat-panel{height:72vh;min-height:520px;border-radius:16px!important}.cw-chat-header{padding:14px}.cw-chat-messages{padding:16px 11px;gap:14px}.cw-chat-bubble{font-size:.84rem;padding:10px 12px}.cw-chat-message.is-assistant{max-width:98%}.cw-chat-message.is-user{max-width:96%}.cw-chat-composer{margin-inline:9px;padding-left:12px}.cw-chat-disclaimer{padding-inline:10px}}


/* Unified Apple Music / Spotify-inspired discovery and search */
.cw-music-discovery{margin:12px 0 24px}
.cw-discovery-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}
.cw-discovery-heading h2{font-size:clamp(1.55rem,2.8vw,2.15rem);letter-spacing:-.055em;font-weight:750}
.cw-discovery-heading p{margin:7px 0 0;color:var(--text-dim);font-size:.94rem}
.cw-genre-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cw-genre-tile{display:flex;position:relative;min-width:0;min-height:164px;overflow:hidden;align-items:stretch;text-align:left;padding:0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,white),var(--surface));color:var(--text);cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.035);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.cw-genre-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--text) 28%,var(--line));box-shadow:0 15px 35px rgba(0,0,0,.1)}
.cw-genre-art{position:relative;display:grid;place-items:center;flex:0 0 42%;min-width:100px;overflow:hidden;background:linear-gradient(145deg,#252529,#09090b);color:white}
.cw-genre-art>span{z-index:1;font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800;line-height:1;text-shadow:0 4px 22px rgba(0,0,0,.35)}
.cw-genre-art i,.cw-genre-art b{position:absolute;display:block;border:1px solid rgba(255,255,255,.24);border-radius:50%;width:125px;height:125px;right:-48px;top:-38px;background:linear-gradient(135deg,rgba(255,255,255,.19),transparent)}
.cw-genre-art b{width:86px;height:86px;left:-32px;right:auto;top:auto;bottom:-35px;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent)}
.cw-genre-christian .cw-genre-art{background:linear-gradient(145deg,#f0f0f0,#75757c 55%,#1a1a1d)}
.cw-genre-charts .cw-genre-art{background:linear-gradient(145deg,#f9f9f9,#7f7f85 45%,#17171a)}
.cw-genre-hiphop .cw-genre-art{background:linear-gradient(145deg,#bdbdc4,#4d4d55 48%,#09090b)}
.cw-genre-kpop .cw-genre-art{background:linear-gradient(145deg,#ffffff,#9d9da5 44%,#2c2c31)}
.cw-genre-pop .cw-genre-art{background:linear-gradient(145deg,#e7e7eb,#777780 48%,#17171b)}
.cw-genre-alternative .cw-genre-art{background:linear-gradient(145deg,#d5d5da,#55555d 48%,#080809)}
.cw-genre-copy{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:6px;padding:16px 15px}
.cw-genre-copy strong{font-size:1rem;line-height:1.25;letter-spacing:-.035em;font-weight:750}
.cw-genre-copy small{font-size:.77rem;line-height:1.4;color:var(--text-dim)}
.cw-genre-arrow{position:absolute;right:12px;top:10px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 80%,transparent);font-size:.85rem}
.request-search{align-items:end}
.request-search .field{margin-bottom:0}
:root[data-theme='dark'] body{background:radial-gradient(ellipse at 12% -10%,rgba(255,255,255,.065),transparent 38%),linear-gradient(150deg,#080809 0%,#0c0c0f 48%,#080809 100%)}
:root[data-theme='dark'] .card{background:linear-gradient(145deg,#141416,#101012);border-color:rgba(255,255,255,.1)}
@media(max-width:900px){.cw-genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cw-genre-tile{min-height:145px}}
@media(max-width:560px){.cw-genre-grid{grid-template-columns:1fr;gap:10px}.cw-genre-tile{min-height:112px;border-radius:15px}.cw-genre-art{flex-basis:34%;min-width:92px}.cw-genre-art>span{font-size:2.7rem}.cw-genre-copy{padding:13px}.cw-genre-copy strong{font-size:.95rem}.cw-discovery-heading p{font-size:.84rem}}

/* ClassWave plan cards and editable public information pages */
.cw-tier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.cw-tier-card{position:relative;overflow:hidden;min-height:190px;padding:22px;border-radius:18px;border:1px solid var(--line);filter:none;opacity:.78;background:linear-gradient(135deg,#e7e7e7,#a9adb5);color:#17171b}
.cw-tier-card h3{font-size:1.65rem;margin:6px 0}.cw-tier-card p{max-width:280px;margin:0 0 28px;color:rgba(20,20,25,.8)}
.cw-tier-plus{background:linear-gradient(130deg,#cbdfff 0%,#7eabf2 45%,#dceaff 100%)}
.cw-tier-pro{background:linear-gradient(130deg,#f9e9b4 0%,#d8ad46 45%,#fff0c7 100%)}
.cw-tier-label{font-size:.68rem;font-weight:800;letter-spacing:.18em;opacity:.7}
.cw-tier-coming{position:absolute;right:14px;bottom:14px;padding:6px 10px;border-radius:999px;background:rgba(24,24,28,.78);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.12em}
.cw-legal-edit{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.cw-legal-edit h3{font-size:1.05rem;margin-bottom:12px}
.site-content-page .site-content-copy{white-space:pre-wrap;line-height:1.85;max-width:850px;font-size:1rem}.site-content-page .card{padding:clamp(22px,4vw,40px)}
.cw-site-editing .cw-site-global-drop-slot{border-color:transparent!important;background:transparent!important;color:transparent!important;min-height:8px!important;padding:0!important;margin:0!important;opacity:1!important}
.cw-site-editing .cw-site-global-drop-slot.is-over{border-color:rgba(130,150,255,.85)!important;background:rgba(130,150,255,.12)!important;min-height:44px!important}
@media(max-width:620px){.cw-tier-grid{grid-template-columns:1fr}.cw-tier-card{min-height:170px}}
.cw-legal-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;margin:34px auto 20px;padding:18px 28px;color:var(--text-dim);font-size:.82rem;border-top:1px solid var(--line)}
.cw-legal-footer nav{display:flex;flex-wrap:wrap;gap:18px}.cw-legal-footer a{text-decoration:none;color:var(--text-dim)}.cw-legal-footer a:hover{color:var(--text);text-decoration:underline}
@media(max-width:540px){.cw-legal-footer{align-items:flex-start;flex-direction:column;padding:18px 20px}}


/* ClassWave startup: keep the logo splash quiet and reveal the app with a soft fade. */
.library-artist-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font:inherit;text-align:left;}

/* Apple Music-inspired Live Lyrics: artwork stays on the left, lyrics on the right. */
.full-player.is-lyrics-fullscreen{background:#08080c !important;color:#fff !important;}
.full-player.is-lyrics-fullscreen .full-player-body{background:transparent !important;}
.full-player.is-lyrics-fullscreen .full-player-tabs{position:absolute;right:18px;top:14px;width:110px;border:0;z-index:80;background:rgba(0,0,0,.2);border-radius:999px;backdrop-filter:blur(18px);}
.full-player.is-lyrics-fullscreen .full-player-tab{padding:8px;}
.live-lyrics{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;background:transparent;color:#fff;isolation:isolate;}
.live-lyrics-art-backdrop{position:absolute;inset:-9%;z-index:-2;background-position:center;background-size:cover;filter:blur(48px) saturate(1.2);opacity:.34;transform:scale(1.08);animation:lyricsBackdropIn .72s ease both;transition:opacity .6s ease;}
.live-lyrics::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,color-mix(in srgb,var(--lyrics-color) 42%,#08080c),rgba(8,8,12,.72) 48%,rgba(8,8,12,.9)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.5));background-size:180% 180%;animation:lyricsGradientDrift 22s ease-in-out infinite alternate;}
@keyframes lyricsBackdropIn{from{opacity:0;transform:scale(1.16)}to{opacity:.34;transform:scale(1.08)}}
@keyframes lyricsGradientDrift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.live-lyrics-stage{position:absolute;inset:0;display:block;min-height:0;padding:clamp(54px,8vh,82px) clamp(22px,5vw,76px) 28px;box-sizing:border-box;background:transparent !important;animation:lyricsStageFadeIn .45s ease both;}
@keyframes lyricsStageFadeIn{from{opacity:.65}to{opacity:1}}
.live-lyrics-layout{height:100%;min-height:0;display:grid;grid-template-columns:minmax(210px,32%) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,76px);max-width:1500px;margin:0 auto;}
.live-lyrics-art-panel{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;animation:none;}
@keyframes lyricsArtworkIn{from{opacity:0;transform:translateX(-34px) scale(.985);filter:blur(5px)}to{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
.live-lyrics-cover{width:min(100%,330px);aspect-ratio:1;object-fit:cover;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.36);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.7,.3,1);animation:none;mask-image:none;}
@keyframes lyricsCoverSwap{from{opacity:0;transform:translateX(-28px) scale(.975)}to{opacity:1;transform:translateX(0) scale(1)}}
.live-lyrics-cover-fallback{display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--lyrics-color) 70%,#16121f),#17141d);font-size:4rem;color:#fff;}
.live-lyrics-track-copy{width:min(100%,330px);min-width:0;}
.live-lyrics-track-title{margin:0 0 5px;color:#fff;font-size:clamp(1rem,1.7vw,1.35rem);font-weight:700;line-height:1.25;overflow-wrap:anywhere;}
.live-lyrics-track-artist{margin:0;color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.4;}
.live-lyrics-track-album{margin:4px 0 0;color:rgba(255,255,255,.58);font-size:.78rem;}
.live-lyrics-label{font-size:.65rem;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.56);}
.live-lyrics-content{position:relative;height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;animation:lyricsContentBlend .95s ease both;mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 12%,#000 100%);}
@keyframes lyricsContentBlend{from{opacity:.35;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke{align-items:flex-start;justify-content:center;gap:clamp(12px,2.5vh,22px);padding:0;width:100%;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line{max-width:100%;text-align:left;color:#fff !important;font-family:Inter,system-ui,sans-serif;font-size:clamp(1.15rem,2.15vw,2rem);font-weight:650;line-height:1.35;letter-spacing:-.025em;text-shadow:none !important;filter:none !important;animation:lyricsLineSoftIn .32s ease both;}
@keyframes lyricsLineSoftIn{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line.has-word-timing{color:rgba(255,255,255,.48) !important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word{color:rgba(255,255,255,.42) !important;text-shadow:none !important;transition:color .16s ease,opacity .16s ease;text-shadow:0 0 0 transparent;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-active{color:#fff !important;opacity:1;text-shadow:0 0 18px rgba(255,255,255,.18) !important;transform:translateY(-1px);}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-ended{color:rgba(255,255,255,.72) !important;opacity:1;text-shadow:none !important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-adjacent-line,.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line{max-width:100%;text-align:left;color:rgba(255,255,255,.62) !important;font-size:clamp(.9rem,1.45vw,1.16rem);font-weight:500;line-height:1.4;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-previous-line{color:rgba(255,255,255,.45) !important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming{align-items:flex-start;gap:9px;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-plain{color:rgba(255,255,255,.92);font-size:clamp(.95rem,1.45vw,1.1rem);line-height:1.8;padding:0 10px 24px 0;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-status{color:rgba(255,255,255,.75);text-align:left;align-items:flex-start;padding:0;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .live-lyrics-links{justify-content:flex-start;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-manual-toggle{left:auto;right:0;bottom:0;background:rgba(255,255,255,.1);color:#fff;}
.live-lyrics-stage.is-paused .live-lyrics-content{opacity:.65;filter:grayscale(1);transition:opacity .35s ease,filter .35s ease;}
.live-lyrics-stage.is-paused .live-lyrics-content .lk-karaoke{opacity:1;filter:none;}
.live-lyrics-stage .lyrics-pause-overlay{background:rgba(0,0,0,.08) !important;}
.full-player-backdrop.is-lyrics-fullscreen.is-closing{animation:lyricsCloseFade .3s ease forwards !important;}
.full-player.is-lyrics-fullscreen.is-closing{animation:lyricsCloseFade .3s ease forwards !important;transform:none !important;}
.full-player-backdrop:not(.is-lyrics-fullscreen).is-closing{animation:lyricsCloseFade .3s ease forwards !important;}
.full-player-backdrop:not(.is-lyrics-fullscreen).is-closing .full-player{animation:lyricsCloseFade .3s ease forwards !important;transform:none !important;}
@keyframes lyricsCloseFade{from{opacity:1}to{opacity:0}}
.now-playing-skip.is-clear,.full-player-skip.is-clear{background:linear-gradient(135deg,#9b7bff 0%,#7c3aed 52%,#5b21b6 100%) !important;color:#fff !important;box-shadow:0 8px 24px -9px rgba(124,58,237,.82) !important;}
.now-playing-skip.is-clear:hover:not(:disabled),.full-player-skip.is-clear:hover:not(:disabled){filter:brightness(1.12);}
.now-playing-skip.is-clear:disabled,.full-player-skip.is-clear:disabled{background:linear-gradient(135deg,#8a78b6,#5b4b7d) !important;opacity:.48;color:rgba(255,255,255,.8) !important;}
@media(max-width:700px){
 .live-lyrics-stage{padding:58px 18px 28px;overflow-y:auto;}
 .live-lyrics-layout{height:auto;min-height:100%;grid-template-columns:1fr;align-content:start;gap:18px;}
 .live-lyrics-art-panel{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;column-gap:14px;row-gap:4px;}
 .live-lyrics-cover{width:76px;border-radius:9px;grid-row:span 2;}
 .live-lyrics-track-copy{width:auto;align-self:end;}
 .live-lyrics-track-title{font-size:1rem;}
 .live-lyrics-track-artist{font-size:.82rem;}
 .live-lyrics-track-album{font-size:.72rem;}
 .live-lyrics-label{grid-column:2;align-self:start;font-size:.58rem;}
 .live-lyrics-content{min-height:45vh;height:auto;overflow:visible;}
 .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke{gap:15px;}
 .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line{font-size:clamp(1.05rem,4.5vw,1.55rem);}
 .full-player.is-lyrics-fullscreen .full-player-tabs{top:8px;right:8px;width:90px;}
}
@media(prefers-reduced-motion:reduce){.live-lyrics-art-backdrop,.live-lyrics-cover,.live-lyrics-art-panel,.live-lyrics-content,.live-lyrics-stage,.live-lyrics::before{animation:none !important;transition:none !important;transform:none !important;filter:none !important;}}


/* ClassWave 0.3.12: calmer Live Lyrics, usable seek controls, and focused discovery. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-adjacent-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line {
  animation: none !important;
  transform: none !important;
  transition: color .18s ease, opacity .18s ease;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-previous-line { display:none !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line::before,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line::after,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line::before,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line::after { display:none !important; content:none !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke { gap:clamp(10px,2vh,18px); }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-previous-line {
  appearance:none; border:0; background:transparent; padding:0; margin:0; cursor:pointer; text-align:left;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line:focus-visible,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line:focus-visible { outline:2px solid rgba(255,255,255,.65); outline-offset:5px; border-radius:4px; }
.live-lyrics-cover { opacity:1 !important; animation:none !important; transition:none !important; image-rendering:auto; }
.live-lyrics-cover.is-loaded { opacity:1; }
.live-lyrics-art-panel { animation:none !important; }
.live-lyrics-art-progress { width:min(100%,330px); margin-top:-4px; }
.live-lyrics-art-progress .player-progress { width:100%; margin:0; }
.live-lyrics-time-row { display:flex; justify-content:space-between; margin-top:5px; color:rgba(255,255,255,.62); font:500 .68rem/1.2 'Inter',sans-serif; font-variant-numeric:tabular-nums; }
.live-lyrics-art-progress .player-progress-track { height:3px !important; background:rgba(255,255,255,.25) !important; }
.live-lyrics-art-progress .player-progress-fill { background:#fff !important; }
.live-lyrics-art-progress input[type=range] { cursor:pointer; }
.cw-page-back { flex-shrink:0; align-self:center; }
.cw-category-results-head { display:flex; align-items:center; gap:20px; margin:0 0 16px; }
.cw-category-results-head h2 { margin:3px 0 2px; }
.cw-category-results-head p { margin:0; }
.cw-lyrics-locked { grid-column:1/-1; position:relative; overflow:hidden; border:1px solid rgba(150,150,160,.18); border-radius:20px; padding:clamp(22px,4vw,40px); background:linear-gradient(135deg,rgba(125,125,140,.12),rgba(40,40,48,.2)); color:#a6a6b1; filter:saturate(.45); }
.cw-lyrics-locked h3 { margin:10px 0 8px; color:#b4b4be; font-size:clamp(1.25rem,2.6vw,1.8rem); }
.cw-lyrics-locked p { max-width:650px; color:#90909d; }
.cw-lyrics-locked-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cw-locked-pill { border:1px solid rgba(180,180,195,.25); background:rgba(125,125,140,.15); border-radius:999px; padding:7px 10px; font-size:.65rem; font-weight:800; letter-spacing:.08em; }
.cw-locked-preview { display:flex; flex-direction:column; gap:10px; padding:20px 0 12px; }
.cw-locked-preview i { display:block; width:var(--line-width,90%); height:13px; border-radius:5px; background:linear-gradient(90deg,rgba(180,180,195,.19),rgba(180,180,195,.06)); }
.cw-locked-preview i:nth-child(2){--line-width:75%}.cw-locked-preview i:nth-child(3){--line-width:84%}.cw-locked-preview i:nth-child(4){--line-width:60%}.cw-locked-preview i:nth-child(5){--line-width:92%}.cw-locked-preview i:nth-child(6){--line-width:68%}
.cw-locked-footer { display:flex; flex-wrap:wrap; gap:8px; }
.cw-locked-footer span { border:1px solid rgba(180,180,195,.16); border-radius:999px; padding:7px 10px; color:#8d8d99; font-size:.75rem; }
@media(max-width:700px){ .cw-category-results-head{align-items:flex-start;flex-direction:column;gap:10px}.live-lyrics-art-progress{grid-column:1/-1;width:100%;margin-top:10px}.live-lyrics-art-panel{grid-template-columns:76px minmax(0,1fr)} }

/* Billing preview and owner-configurable ClassWave AI avatar */
.cw-ai-avatar-image{overflow:hidden;padding:0;background:#18181d}
.cw-ai-avatar-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cw-ai-avatar-settings{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.cw-ai-avatar-settings>img{width:84px;height:84px;object-fit:cover;border-radius:50%;border:1px solid var(--line);box-shadow:var(--shadow)}
.cw-ai-avatar-settings-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cw-billing-page .page-head p{max-width:650px;margin:8px 0 0}
.cw-billing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.cw-billing-tier{position:relative;min-width:0;overflow:hidden}
.cw-billing-tier h2{font-size:1.5rem;margin:5px 0 10px}
.cw-billing-tier p{color:var(--text-dim);min-height:48px}
.cw-billing-price{font-size:2.1rem;font-weight:800;letter-spacing:-.05em;display:flex;flex-direction:column;line-height:1.15;margin:16px 0}
.cw-billing-price span{font-size:.7rem;font-weight:500;letter-spacing:0;color:var(--text-dim);margin-top:7px}
.cw-billing-tier ul{padding-left:18px;min-height:100px;color:var(--text-dim);font-size:.88rem}
.cw-billing-tier li{margin:8px 0}
.cw-billing-status{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:.7rem;font-weight:750}
.cw-billing-plus{background:linear-gradient(145deg,rgba(64,128,255,.12),var(--surface) 72%)}
.cw-billing-pro{background:linear-gradient(145deg,rgba(224,176,65,.16),var(--surface) 72%)}
.cw-institution-card h2{margin:4px 0 8px}
.cw-institution-card>p{max-width:820px}
.cw-institution-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.cw-quote-preview{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 78%,var(--bg));margin-bottom:16px}
.cw-quote-preview>span,.cw-quote-preview small{color:var(--text-dim);font-size:.78rem}
.cw-quote-preview strong{font-size:1rem}
.cw-quote-preview p{margin:2px 0}
.cw-billing-footnote{margin-top:18px;max-width:900px}
.admin-row-controls-subscriptions{flex-wrap:wrap;flex:1 1 100%;min-width:0}
.admin-subscription-preview{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;flex:1 0 100%;min-width:0;padding:12px;margin-top:8px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 90%,var(--bg));}
.admin-subscription-preview .field-label{margin:0;font-size:.75rem}
.admin-subscription-preview .field-input{min-width:0;width:100%;}
.admin-subscription-preview .muted.small{grid-column:1/-1;margin:0}
.admin-subscription-preview p[role="status"]{grid-column:1/-1;margin:0}
@media(max-width:760px){.cw-billing-grid{grid-template-columns:1fr}.cw-billing-tier p,.cw-billing-tier ul{min-height:0}.cw-institution-form{grid-template-columns:1fr}.admin-subscription-preview .muted.small,.admin-subscription-preview p[role="status"]{grid-column:1}}

/* Minimal search header and dedicated cached genre pages */
.cw-search-top{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);align-items:end;gap:24px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.cw-search-title .eyebrow{display:block;margin-bottom:5px}.cw-search-title h1{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.08;letter-spacing:-.055em;margin:0}
.cw-request-search-minimal{display:flex;flex-direction:column;gap:9px;min-width:0}
.cw-search-input-wrap{display:flex;align-items:center;gap:9px;min-width:0;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 84%,transparent);border-radius:12px;padding:4px 5px 4px 12px;min-height:43px}
.cw-search-input-wrap>span{font-size:1.25rem;color:var(--text-dim);line-height:1}
.cw-search-input-wrap .field{flex:1;min-width:0;margin:0}.cw-search-input-wrap .field-input{border:0!important;background:transparent!important;box-shadow:none!important;padding:7px 0;min-height:32px;font-size:.9rem}.cw-search-input-wrap .field-input:focus{outline:none}
.cw-search-input-wrap .btn{min-height:33px;padding:0 13px;border-radius:9px;font-size:.8rem;white-space:nowrap}
.cw-class-select-minimal{display:flex;align-items:center;gap:10px;justify-content:flex-end}.cw-class-select-minimal>label,.cw-genre-page-tools>label{font-size:.77rem;color:var(--text-dim);white-space:nowrap}.cw-class-select-minimal .select-menu{width:min(230px,65%)}.cw-class-select-minimal .select-menu-trigger{min-height:34px;padding:6px 10px;border-radius:9px;font-size:.82rem}
.cw-music-discovery{margin-top:14px}.cw-discovery-heading{margin-bottom:11px}.cw-discovery-heading h2{font-size:1.12rem;letter-spacing:-.03em;margin:0}.cw-genre-grid{gap:10px}.cw-genre-tile{min-height:108px;border-radius:13px;box-shadow:none}.cw-genre-tile:hover{transform:translateY(-1px);box-shadow:none}.cw-genre-art{flex-basis:29%;min-width:72px}.cw-genre-art>span{font-size:2.6rem}.cw-genre-copy{padding:12px}.cw-genre-copy strong{font-size:.91rem}.cw-genre-copy small{font-size:.72rem}
.cw-genre-page{max-width:1240px}.cw-back-link{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--text-dim);padding:4px 0;margin-bottom:20px;cursor:pointer;font-size:.88rem}.cw-back-link:hover{color:var(--text)}.cw-genre-page-heading{margin-bottom:20px}.cw-genre-page-heading h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.055em;line-height:1.05;margin:5px 0 7px}.cw-genre-page-heading p{margin:0;color:var(--text-dim);font-size:.9rem}.cw-genre-page-tools{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.cw-genre-page-tools .select-menu{width:min(280px,100%)}.cw-genre-page-tools .select-menu-trigger{min-height:36px;border-radius:10px}.cw-genre-song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cw-genre-song-grid .song-card{min-width:0}.cw-genre-song-grid .song-card-art{aspect-ratio:1/1}.cw-genre-song-grid .song-card-body{padding:10px}
@media(max-width:800px){.cw-search-top{grid-template-columns:1fr;gap:12px;align-items:start}.cw-class-select-minimal{justify-content:flex-start}.cw-genre-song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cw-search-title h1{font-size:1.8rem}.cw-search-input-wrap{gap:7px}.cw-search-input-wrap .btn{padding:0 10px}.cw-genre-song-grid{grid-template-columns:1fr}.cw-genre-song-grid .song-card{display:grid;grid-template-columns:88px minmax(0,1fr)}.cw-genre-song-grid .song-card-art{height:88px}.cw-genre-song-grid .song-card-body{padding:9px}.cw-genre-page-tools{align-items:flex-start;flex-direction:column;gap:7px}}

/* 0.3.15 Live Lyrics: gentle upward line motion, word-timed karaoke, and quiet controls. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line {
  animation: cwLyricFloatUp .24s cubic-bezier(.2,.75,.25,1) both !important;
  will-change: transform, opacity;
  font-size: clamp(1.3rem, 2.55vw, 2.25rem);
  line-height: 1.42;
}
@keyframes cwLyricFloatUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line {
  font-size: clamp(1rem, 1.65vw, 1.28rem);
  line-height: 1.5;
  transition: opacity .22s ease, transform .22s ease;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke { gap: clamp(12px, 2.4vh, 24px); }
.full-player.is-lyrics-fullscreen .live-lyrics-label { display:none !important; }
.full-player.is-lyrics-fullscreen .lk-manual-toggle-wrap { min-height:0; margin-top:8px; justify-content:flex-start; opacity:.35; }
.full-player.is-lyrics-fullscreen .lk-manual-toggle-wrap:hover,
.full-player.is-lyrics-fullscreen .lk-manual-toggle-wrap:focus-within { opacity:1; }
.full-player.is-lyrics-fullscreen .lk-manual-toggle { min-height:28px; padding:4px 9px; font-size:.66rem; }
.full-player.is-lyrics-fullscreen .full-player-tabs {
  opacity:1; transform:translateY(0); transition:opacity .28s ease, transform .28s ease;
  pointer-events:auto;
}
.full-player.is-lyrics-fullscreen .full-player-tabs.is-auto-hidden {
  opacity:0; transform:translateY(12px); pointer-events:none;
}
.full-player-backdrop.is-lyrics-fullscreen.lyrics-cursor-hidden,
.full-player-backdrop.is-lyrics-fullscreen.lyrics-cursor-hidden * { cursor:none !important; }
/* Closing Live Lyrics fades away in place instead of sliding/jumping vertically. */
.full-player-backdrop.is-lyrics-fullscreen.is-closing { animation: cwLyricsExitFade .32s ease forwards !important; }
.full-player.is-lyrics-fullscreen.is-closing { animation: cwLyricsExitFade .32s ease forwards !important; transform:none !important; }
.full-player-backdrop:not(.is-lyrics-fullscreen).is-closing { animation: cwLyricsExitFade .32s ease forwards !important; }
.full-player-backdrop:not(.is-lyrics-fullscreen).is-closing .full-player { animation: cwLyricsExitFade .32s ease forwards !important; transform:none !important; }
@keyframes cwLyricsExitFade { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line { animation:none !important; }
  .full-player.is-lyrics-fullscreen .full-player-tabs { transition:none !important; }
}


/* 0.3.17 follow-up: remove the broken lyrics sidebar and auto-hide the actual mini-player bar. */
.full-player.is-lyrics-fullscreen .full-player-tabs { display:none !important; }
body.cw-live-lyrics-open .now-playing-bar {
  opacity:1;
  transform:translateY(0);
  transition:opacity .48s cubic-bezier(.2,.7,.2,1), transform .48s cubic-bezier(.2,.7,.2,1);
}
body.cw-live-lyrics-controls-hidden .now-playing-bar {
  opacity:0 !important;
  transform:translateY(105%) !important;
  pointer-events:none !important;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line {
  animation:cwLyricFloatUp .58s cubic-bezier(.18,.72,.22,1) both !important;
  will-change:transform,opacity;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-previous-line {
  animation:cwLyricPreviousFloat .52s cubic-bezier(.18,.72,.22,1) both !important;
  will-change:transform,opacity;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line {
  animation:cwLyricUpcomingFloat .62s cubic-bezier(.18,.72,.22,1) both;
  will-change:transform,opacity;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line:nth-child(2) { animation-delay:45ms; }
@keyframes cwLyricFloatUp {
  0% { opacity:0; transform:translate3d(0,34px,0) scale(.985); filter:blur(2px); }
  65% { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}
@keyframes cwLyricPreviousFloat {
  0% { opacity:.78; transform:translate3d(0,0,0); }
  100% { opacity:.28; transform:translate3d(0,-18px,0); }
}
@keyframes cwLyricUpcomingFloat {
  0% { opacity:.18; transform:translate3d(0,18px,0); }
  100% { opacity:.68; transform:translate3d(0,0,0); }
}
@media(prefers-reduced-motion:reduce) {
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line,
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-previous-line,
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line { animation:none !important; }
  body.cw-live-lyrics-open .now-playing-bar { transition:none !important; }
}


/* Search result layout cleanup: no obsolete sort/filter toolbar. */
.search-artist-heading, .search-artist-profile, .search-artist-actions { min-width: 0; }
.search-artist-profile { cursor: pointer; }
.search-artist-profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
.search-artist-actions .btn { max-width: 100%; }
.search-all-results .search-section-heading { margin-bottom: 4px; }
@media (max-width: 620px) {
  .search-discovery { gap: 14px; margin-top: 16px; }
  .search-artist-spotlight, .search-similar, .search-all-results { min-width: 0; }
  .search-artist-profile { width: 100%; }
  .search-artist-profile h2 { white-space: normal; overflow-wrap: anywhere; }
}


/* 0.3.19 player controls cleanup */
.full-player-live-lyrics{
  position:absolute;top:14px;left:14px;right:auto;z-index:35;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:0 13px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 44%,transparent);
  background:color-mix(in srgb,var(--surface-raised) 68%,transparent);
  color:var(--text);font:700 .78rem 'Inter',sans-serif;cursor:pointer;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.full-player-live-lyrics svg{width:17px;height:17px;flex:none}
.full-player-live-lyrics:hover{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent);transform:translateY(-1px)}
.full-player-toggle,.now-playing-toggle{
  border:0!important;border-radius:8px!important;background:transparent!important;
  box-shadow:none!important;outline-offset:3px;
}
.full-player-toggle:hover,.now-playing-toggle:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)!important;box-shadow:none!important}
.full-player-stop,.now-playing-close{display:none!important}
.full-player-controls{gap:20px}
@media(max-width:600px){
  .full-player-live-lyrics{top:10px;left:10px;right:auto;min-height:34px;padding:0 10px;font-size:.72rem}
  .full-player-live-lyrics svg{width:15px;height:15px}
}

/* Minimal Settings accordion: keep the page calm while keeping every control easy to find. */
.cw-settings-accordion{grid-column:1/-1;border:1px solid var(--border,#303238);border-radius:16px;background:var(--surface,#101114);overflow:hidden;margin-bottom:20px}
.cw-settings-accordion>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;cursor:pointer;user-select:none}
.cw-settings-accordion>summary::-webkit-details-marker{display:none}
.cw-settings-accordion>summary>span:first-child{display:flex;flex-direction:column;gap:4px}
.cw-settings-accordion>summary strong{font-size:15px;font-weight:650}
.cw-settings-accordion>summary small{font-size:12px;color:var(--muted,#a7a7ad)}
.cw-settings-chevron{font-size:22px;color:var(--muted,#a7a7ad);transition:transform .18s ease}
.cw-settings-accordion[open] .cw-settings-chevron{transform:rotate(180deg)}
.cw-settings-accordion>.dashboard-grid{padding:0 14px 14px;gap:12px}
.cw-settings-accordion .dashboard-grid>.card{box-shadow:none}
.cw-roadmap-editor-section{border-top:1px solid var(--border,#303238);padding-top:12px;margin-top:16px}
.cw-roadmap-editor-section h3{font-size:14px;margin:0 0 12px}
.cw-roadmap-edit-item{padding:12px;border:1px solid var(--border,#303238);border-radius:12px;margin-bottom:10px}
.cw-roadmap-edit-item .field{margin-bottom:10px}
.cw-roadmap-edit-item .link-btn{margin-bottom:4px}
@media(max-width:600px){.cw-settings-accordion>summary{padding:15px}.cw-settings-accordion>.dashboard-grid{padding:0 8px 8px}.cw-roadmap-edit-item{padding:10px}}
@media(prefers-reduced-motion:reduce){.cw-settings-chevron{transition:none}}


/* 0.3.21 launch polish */
.cw-page-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cw-tier-plus,.cw-billing-plus{background:linear-gradient(135deg,rgba(55,132,255,.2),rgba(71,112,255,.07) 52%,var(--surface) 90%);border-color:rgba(80,145,255,.35)}
.cw-tier-pro,.cw-billing-pro{background:linear-gradient(135deg,rgba(255,205,80,.24),rgba(211,155,38,.08) 52%,var(--surface) 90%);border-color:rgba(226,179,67,.4)}
.cw-pro-grade,.cw-pro-welcome-title span{background:linear-gradient(110deg,#fff0a6 0%,#e9b83f 34%,#fff1a8 54%,#b87a10 76%,#f9df85 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.cw-pro-welcome-title span{filter:drop-shadow(0 0 10px rgba(225,174,48,.22))}
.admin-row{gap:10px;padding:12px 0}
.admin-row>div:first-child{min-width:190px;flex:1}
.admin-row-controls-subscriptions{flex:0 1 auto;align-items:flex-start;gap:8px}
.admin-account-tools{flex:1 1 100%;min-width:0;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:color-mix(in srgb,var(--surface) 72%,transparent)}
.admin-account-tools>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--text-muted);padding:2px 0}
.admin-account-tools>summary::-webkit-details-marker{display:none}
.admin-account-tools>summary:after{content:'+';font-size:1rem}
.admin-account-tools[open]>summary:after{content:'−'}
.admin-subscription-preview{margin-top:10px;padding:10px;border-radius:10px;background:color-mix(in srgb,var(--surface-raised) 74%,transparent);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:center}
.admin-subscription-preview>.field-label,.admin-subscription-preview>.field-input,.admin-subscription-preview>p{grid-column:1/-1;margin:0}
.admin-subscription-preview .field-input{min-height:36px;padding:7px 10px;font-size:.82rem}
.cw-school-pro-control{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:10px;background:linear-gradient(110deg,rgba(255,208,83,.13),rgba(255,255,255,.02));border:1px solid rgba(222,176,64,.22)}
.cw-school-pro-control strong{font-size:.85rem}.cw-school-pro-control p{margin:3px 0 0}
.cw-locked-footer span{display:inline-flex;align-items:center;gap:6px}.cw-locked-footer svg{width:15px;height:15px;opacity:.8}
.cw-roadmap-page-editor,.cw-updates-editor{margin-bottom:20px}.cw-updates-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cw-admin-release-head,.cw-admin-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.cw-admin-editor-actions{justify-content:flex-start;margin-top:12px}
/* All player and modal exits fade in place: no competing translate keyframes. */
@keyframes cwLaunchFadeOut{from{opacity:1}to{opacity:0}}
.full-player-backdrop.is-closing,.full-player.is-closing,.full-player-backdrop.is-closing .full-player{animation:cwLaunchFadeOut .32s ease forwards!important;transform:none!important;translate:none!important;will-change:opacity;pointer-events:none}
.full-player-backdrop.is-closing{background:rgba(8,8,12,.2)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.modal-backdrop.is-closing,.cw-pop-panel.is-closing{animation:cwLaunchFadeOut .22s ease forwards!important;transform:none!important}
@media(max-width:650px){.admin-row-controls-subscriptions{flex:1 1 100%}.admin-subscription-preview{grid-template-columns:1fr}.cw-updates-edit-grid{grid-template-columns:1fr}.cw-school-pro-control{align-items:flex-start;flex-direction:column}.full-player-live-lyrics{left:10px;right:auto}}
@media(prefers-reduced-motion:reduce){.full-player-backdrop.is-closing,.full-player.is-closing,.full-player-backdrop.is-closing .full-player{animation-duration:.01ms!important}}

.cw-lyrics-locked{position:relative;overflow:hidden}
.cw-locked-icons{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:8px;color:var(--text-muted);opacity:.75}
.cw-locked-icons svg{width:17px;height:17px}
.cw-locked-icons span{font-size:16px;color:#e6bd59}

/* Music-only AI chat: real catalog matches for artist-song discovery. */
.cw-related-track-results{display:grid;gap:8px;margin:4px 0 12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-raised) 75%,transparent)}
.cw-related-track-results>.cw-panel-kicker{margin:0 0 2px;font-size:.68rem;letter-spacing:.09em;color:var(--muted)}
.cw-related-track-result{display:flex;align-items:center;gap:11px;width:100%;min-width:0;padding:8px;border:1px solid transparent;border-radius:10px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.cw-related-track-result:hover,.cw-related-track-result:focus-visible{background:var(--surface);border-color:var(--line);outline:none}
.cw-related-track-result img,.cw-related-track-fallback{width:44px;height:44px;flex:0 0 44px;border-radius:8px;object-fit:cover;background:var(--surface);display:grid;place-items:center}
.cw-related-track-result>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}
.cw-related-track-result strong,.cw-related-track-result small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-related-track-result strong{font-size:.9rem;font-weight:600}
.cw-related-track-result small{font-size:.76rem;color:var(--muted)}


/* In-app release detector banner */
.cw-update-available{position:sticky;top:0;z-index:1200;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:linear-gradient(100deg,#33215f,#5736a8);color:#fff;text-align:center;font-size:.9rem;box-shadow:0 3px 18px rgba(0,0,0,.2)}
.cw-update-available button{border:0;border-radius:999px;padding:7px 15px;background:#fff;color:#28184b;font:700 .85rem inherit;cursor:pointer;white-space:nowrap}
.cw-update-available button:hover{background:#eee7ff}
.cw-update-version{font-size:.72rem;opacity:.78}
@media(max-width:600px){.cw-update-available{gap:8px;padding:10px 12px;font-size:.82rem}.cw-update-available button{padding:7px 12px}}


/* Quiet, response-derived lyric credits. Keep visible beneath every lyrics view. */
.lyrics-attribution{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;margin-top:12px;color:var(--text-dim);font-size:.72rem;line-height:1.55;letter-spacing:.01em}
.lyrics-attribution a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:2px}
.lyrics-attribution a:hover{color:var(--text)}
.live-lyrics-attribution{justify-content:flex-start;align-items:flex-start;flex-direction:column;max-width:100%;width:min(100%,var(--lyrics-content-width, 760px));margin:12px auto 0;padding:0 0 12px;text-align:left;opacity:.82}
.cw-lyrics-attribution{margin-top:12px}

/* Clear version labels and artist navigation on every song card. */
.song-card-artist-link{display:block;padding:0;border:0;background:none;color:var(--text-dim);font:inherit;text-align:left;cursor:pointer;text-decoration:none}
.song-card-artist-link:hover{text-decoration:underline;color:var(--text)}
.song-version-tag{display:inline-flex;align-items:center;margin:4px 5px 0 0;padding:2px 7px;border:1px solid var(--line);border-radius:999px;font-size:.68rem;line-height:1.4;color:var(--text-dim)}
.song-version-tag.is-clean{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.song-version-tag.is-explicit{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}

/* Live Lyrics finish: preserve the left-to-right artwork entrance despite older polish overrides. */
.full-player.is-lyrics-fullscreen .live-lyrics-art-panel { animation:none !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-cover { animation:none !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content { animation:lyricsContentBlend .95s ease both; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word { display:inline-block; transition:color .12s ease, opacity .12s ease, transform .12s ease, text-shadow .12s ease; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-active { color:#fff !important; opacity:1; transform:translateY(-1px) scale(1.015); text-shadow:0 0 18px rgba(255,255,255,.18) !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-ended { color:rgba(255,255,255,.72) !important; opacity:1; transform:none; text-shadow:none !important; }
@media(prefers-reduced-motion:reduce) { .full-player.is-lyrics-fullscreen .live-lyrics-art-panel,.full-player.is-lyrics-fullscreen .live-lyrics-cover,.full-player.is-lyrics-fullscreen .live-lyrics-content { animation:none !important; } }

/* Timed karaoke fill: words fill over their own timestamp interval; line-only data fills the whole line between line timestamps. Artwork itself stays still. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word{background-image:linear-gradient(90deg,#fff var(--lk-word-progress,0%),rgba(255,255,255,.42) var(--lk-word-progress,0%));-webkit-background-clip:text;background-clip:text;color:transparent !important;transition:background-image .04s linear; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-ended{background-image:linear-gradient(90deg,rgba(255,255,255,.76),rgba(255,255,255,.76));color:transparent !important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text{background-image:linear-gradient(90deg,#fff var(--lk-line-progress,0%),rgba(255,255,255,.42) var(--lk-line-progress,0%));-webkit-background-clip:text;background-clip:text;color:transparent !important;}


/* Apple Music-style progressive fill: the existing lyric text itself fills in place. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text {
  display: inline;
  background-image: linear-gradient(90deg, var(--lk-line-highlight, #fff) 0%, var(--lk-line-highlight, #fff) var(--lk-line-progress, 0%), rgba(255,255,255,.42) var(--lk-line-progress, 0%), rgba(255,255,255,.42) 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}

/* ClassWave 0.3.25 - calmer Apple Music-style lyrics motion and readable white text. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke {
  gap: clamp(12px, 2.2vh, 22px);
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line {
  color: #fff !important;
  will-change: transform, opacity;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line {
  animation: cwLyricLineArrive .42s cubic-bezier(.22,.75,.25,1) both;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line {
  color: rgba(255,255,255,.94) !important;
  transition: transform .48s cubic-bezier(.22,.75,.25,1), opacity .48s ease, color .2s ease;
  animation: cwLyricNextLineArrive .48s cubic-bezier(.22,.75,.25,1) both;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word {
  background-image: linear-gradient(90deg, #fff var(--lk-word-progress, 0%), rgba(255,255,255,.94) var(--lk-word-progress, 0%), rgba(255,255,255,.94) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  transition: background-position .12s linear, opacity .2s ease, transform .2s ease;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-ended {
  background-image: linear-gradient(90deg, #fff, #fff) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  opacity: 1;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text {
  background-image: linear-gradient(90deg, #fff 0%, #fff var(--lk-line-progress, 0%), rgba(255,255,255,.94) var(--lk-line-progress, 0%), rgba(255,255,255,.94) 100%) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-source-at-end {
  margin-top: 4px;
  animation: cwLyricLineArrive .55s ease both;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-source-at-end .live-lyrics-attribution {
  width: 100%; margin: 0; padding: 0; gap: 3px;
  color: rgba(255,255,255,.78); font-size: .76rem; line-height: 1.4;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-source-at-end .live-lyrics-attribution a {
  color: #fff; text-decoration: underline; text-underline-offset: 2px;
}
@keyframes cwLyricLineArrive {
  from { opacity: .55; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cwLyricNextLineArrive {
  from { opacity: .4; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line,
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line,
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-source-at-end { animation: none !important; transition: none !important; }
}

/* ClassWave subscription plan identity - consistent across billing surfaces */
.cw-billing-free{background:linear-gradient(140deg,rgba(48,190,112,.17),rgba(35,145,88,.04) 55%,var(--surface) 92%);border-color:rgba(53,190,116,.42)}
.cw-billing-plus{background:linear-gradient(135deg,rgba(55,132,255,.2),rgba(71,112,255,.07) 52%,var(--surface) 90%);border-color:rgba(80,145,255,.35)}
.cw-billing-pro{background:linear-gradient(135deg,rgba(255,205,80,.24),rgba(211,155,38,.08) 52%,var(--surface) 90%);border-color:rgba(226,179,67,.4)}
.cw-current-plan{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0;padding:20px 22px;border:1px solid var(--line)}
.cw-plan-free{background:linear-gradient(110deg,rgba(48,190,112,.14),var(--surface) 78%);border-color:rgba(53,190,116,.42)}
.cw-plan-plus{background:linear-gradient(110deg,rgba(55,132,255,.16),var(--surface) 78%);border-color:rgba(80,145,255,.4)}
.cw-plan-pro{background:linear-gradient(110deg,rgba(255,205,80,.18),var(--surface) 78%);border-color:rgba(226,179,67,.42)}
.cw-current-plan h2{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:1.55rem}.cw-current-plan p{margin:0;color:var(--text-dim);max-width:720px}
.cw-plan-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#30be70;box-shadow:0 0 0 4px rgba(48,190,112,.14)}.cw-plan-dot-plus{background:#438cff;box-shadow:0 0 0 4px rgba(67,140,255,.15)}.cw-plan-dot-pro{background:#e6b640;box-shadow:0 0 0 4px rgba(230,182,64,.16)}
.cw-current-plan-pill,.cw-current-tag{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 11px;font-size:.68rem;letter-spacing:.06em;font-weight:850;white-space:nowrap;border:1px solid rgba(53,190,116,.5);color:#35bd77;background:rgba(53,190,116,.1)}
.cw-current-plan-pill-plus,.cw-current-tag-plus{border-color:rgba(80,145,255,.55);color:#68a4ff;background:rgba(80,145,255,.12)}.cw-current-plan-pill-pro,.cw-current-tag-pro{border-color:rgba(226,179,67,.6);color:#e8bd50;background:rgba(226,179,67,.13)}
.cw-tier-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.cw-billing-tier-current{box-shadow:0 0 0 1px currentColor inset}.cw-current-tag{font-size:.59rem;padding:5px 8px}.cw-billing-status-free{color:#35bd77;border-color:rgba(53,190,116,.45)}.cw-billing-status-plus{color:#68a4ff;border-color:rgba(80,145,255,.5)}.cw-billing-status-pro{color:#e8bd50;border-color:rgba(226,179,67,.55)}
.cw-billing-privacy{margin-top:22px}.cw-billing-privacy h2{margin:5px 0 10px}.cw-billing-privacy>p{max-width:900px}.cw-billing-privacy ul{padding-left:21px;max-width:980px;color:var(--text-dim)}.cw-billing-privacy li{margin:10px 0;line-height:1.55}.cw-billing-privacy li strong{color:var(--text)}.cw-billing-privacy-links{display:flex;gap:10px;align-items:center;font-size:.88rem}
@media(max-width:600px){.cw-current-plan{align-items:flex-start;flex-direction:column}.cw-current-plan-pill{align-self:flex-start}.cw-tier-title-row{align-items:flex-start}}


/* v0.3.27: clean, readable Live Lyrics with a true white baseline. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-adjacent-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text { color: #fff !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text {
  background-image: linear-gradient(90deg, #fff 0%, #fff var(--lk-line-progress, 0%), rgba(255,255,255,.96) var(--lk-line-progress, 0%), rgba(255,255,255,.96) 100%) !important;
  -webkit-text-fill-color: transparent;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-adjacent-line { opacity: .92 !important; }
.now-playing-lyrics { width:auto !important; min-width:72px !important; padding:0 12px !important; gap:7px; border-radius:999px !important; }
.now-playing-lyrics span { font-size:.7rem; font-weight:750; }


/* v0.3.27 dashboard and classroom action polish */
.dashboard-grid { display:block !important; }
.dashboard-class-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:14px; }
.dashboard-class-card { overflow:hidden; border-radius:18px; transition:transform .18s ease,border-color .18s ease; }
.dashboard-class-card:hover { transform:translateY(-2px); border-color:rgba(139,92,246,.55); }
.dashboard-class-card .dashboard-class-link { display:block; padding:0; }
.dashboard-class-card-head { min-height:112px; padding:22px 18px 16px; display:flex; align-items:flex-end; gap:10px; background:linear-gradient(135deg,rgba(124,58,237,.88),rgba(67,56,202,.72),rgba(20,184,166,.48)); }
.dashboard-class-card-head h2 { margin:.25rem 0 0; color:white; }
.dashboard-class-card-head .eyebrow,.dashboard-class-card-head .muted { color:rgba(255,255,255,.84) !important; }
.dashboard-class-card-head .class-code-pill { background:rgba(0,0,0,.24); color:white; }
.dashboard-playing-preview { margin:12px 14px 14px; }
.dashboard-class-card .dashboard-class-link { text-decoration:none; }
.cw-class-shuffle-play { background:var(--accent) !important; color:#fff !important; border-color:transparent !important; min-width:44px; font-size:1.1rem; }
.cw-edit-class-icon { width:38px; min-width:38px; padding:0 !important; font-size:1.15rem; }
.cw-request-search-minimal .request-search input:focus, .cw-request-search-minimal input:focus, .search-related-card:hover { border-color:#8b5cf6 !important; box-shadow:0 0 0 3px rgba(139,92,246,.16); }


/* v0.3.27 experience selection + playlist-first layout */
.cw-experience-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0 8px; }
.cw-experience-choice { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:18px; min-height:170px; text-align:left; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:16px; cursor:pointer; transition:border-color .18s,transform .18s,background .18s; }
.cw-experience-choice:hover { border-color:#8b5cf6; background:color-mix(in srgb,var(--surface) 88%,#8b5cf6); transform:translateY(-2px); }
.cw-experience-choice-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:rgba(139,92,246,.18); color:#a78bfa; font-size:1.5rem; }
.cw-experience-choice strong { font-size:1.05rem; }
.cw-experience-choice span:last-child { color:var(--muted); font-size:.86rem; line-height:1.45; }
.class-preview-card { overflow:hidden; }
.class-card-link { display:block; }
.class-preview-head { min-height:110px; padding:20px; background:linear-gradient(135deg,rgba(124,58,237,.9),rgba(67,56,202,.7),rgba(20,184,166,.42)); }
.class-preview-head h2,.class-preview-head .eyebrow,.class-preview-head .muted { color:#fff !important; }
.class-preview-head h2 { margin:.3rem 0; }
.class-preview-head .class-code-pill { color:#fff; background:rgba(0,0,0,.22); }
@media(max-width:560px){.cw-experience-choice-grid{grid-template-columns:1fr}.cw-experience-choice{min-height:0}}

.song-card-lyrics-match { margin:.55rem 0 0; padding:8px 10px; border-left:2px solid #8b5cf6; border-radius:0 8px 8px 0; background:rgba(139,92,246,.09); color:var(--muted); font-size:.8rem; line-height:1.45; }
.song-card-lyrics-match span { display:block; margin-bottom:3px; color:#a78bfa; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cw-typing-status { min-width:175px; color:#c4b5fd; font-size:.84rem; }
.cw-typing-status span { display:block; animation:cwThinkingFade .24s ease both; }
@keyframes cwThinkingFade { from{opacity:.15;transform:translateY(2px)} to{opacity:1;transform:translateY(0)} }

.cw-playlist-cover { position:relative; display:flex; align-items:flex-end; min-height:154px; padding:18px; overflow:hidden; color:#fff; background:linear-gradient(135deg,#7c3aed 0%,#4338ca 52%,#0f766e 100%); background-position:center; background-size:cover; isolation:isolate; }
.cw-playlist-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.42)); z-index:-1; }
.cw-playlist-cover-title { max-width:90%; font-size:1.15rem; line-height:1.2; font-weight:800; letter-spacing:-.025em; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.cw-playlist-cover-edit { position:absolute; top:10px; right:10px; width:30px; height:30px; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:rgba(0,0,0,.32); color:#fff; cursor:pointer; }
.cw-playlist-card-details { padding:14px 16px 16px; }
.cw-playlist-card-details h2 { margin:0 0 4px; font-size:1.02rem; }
.cw-playlist-card-details p { margin:0 0 8px; font-size:.78rem; }
.dashboard-class-card-head { display:none !important; }
.dashboard-class-card .dashboard-class-link { padding:0 !important; }
.class-preview-head { display:none !important; }
.class-card-link { padding:0 !important; }


/* v0.3.28 - minimal playlist surfaces, SF system typography, and clean lyric exit */
:root { --cw-font-site: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif; --cw-font-headings: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; }
body, button, input, textarea, select { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif !important; }
h1,h2,h3,h4,h5,h6 { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif !important; letter-spacing:-.025em; }
/* The cover is the visual tile; the surrounding playlist card has no frame. */
.dashboard-class-card,.class-preview-card { border:0 !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important; overflow:visible !important; }
.dashboard-class-card:hover,.class-preview-card:hover { border-color:transparent !important; box-shadow:none !important; transform:none !important; }
.dashboard-class-card .dashboard-class-link,.class-preview-card .class-card-link { display:block; padding:0 !important; background:transparent !important; text-decoration:none; }
.cw-playlist-cover { border-radius:13px; aspect-ratio:1.45 / 1; min-height:0; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.16); }
.cw-playlist-card-details { padding:10px 2px 12px !important; }
.cw-playlist-card-details h2 { font-size:1rem !important; font-weight:650; }
.cw-playlist-card-details .class-code-pill { display:none !important; }
.dashboard-playing-preview { margin:8px 0 12px !important; }
.cw-class-shuffle-play,.cw-class-shuffle-play:hover,.cw-class-shuffle-play:focus-visible { background:#8b5cf6 !important; color:#fff !important; border-color:#8b5cf6 !important; box-shadow:0 3px 12px rgba(139,92,246,.25); }
.cw-experience-choice-grid { margin-bottom:0 !important; }
/* Remove the dark left-edge mask that was fading lyrics into the background. */
.full-player.is-lyrics-fullscreen .live-lyrics-content { mask-image:none !important; -webkit-mask-image:none !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-active-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-upcoming-line,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-adjacent-line { mask-image:none !important; -webkit-mask-image:none !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word { background-image:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important; opacity:1 !important; text-shadow:none !important; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-ended { color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* Closing Live Lyrics slides down toward the persistent player bar, then unmounts. */
@keyframes cwLyricsPullDownToBar { 0% { opacity:1; transform:translateY(0) scale(1); } 68% { opacity:.9; transform:translateY(38vh) scale(.985); } 100% { opacity:0; transform:translateY(100vh) scale(.96); } }
.full-player-backdrop.is-lyrics-fullscreen.is-closing { animation:none !important; background:transparent !important; }
.full-player-backdrop.is-lyrics-fullscreen.is-closing .full-player { animation:cwLyricsPullDownToBar .36s cubic-bezier(.55,0,.85,.35) forwards !important; transform-origin:bottom center; }
.full-player-backdrop.is-lyrics-fullscreen.is-closing::before { content:none !important; }
@keyframes cwLyricsQuickFade { to { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .full-player-backdrop.is-lyrics-fullscreen.is-closing .full-player { animation:cwLyricsQuickFade .01ms forwards !important; } }

/* ClassWave AI status bubbles: let longer thinking labels wrap inside the chat. */
.cw-typing-status{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;width:max-content;min-width:72px;max-width:min(100%,360px);min-height:42px;padding:10px 14px;white-space:normal;overflow-wrap:anywhere;flex:0 1 auto;}
.cw-typing-status.is-thinking-text{min-width:min(235px,100%);line-height:1.45;color:#d9ccff;}
.cw-typing-status.is-thinking-text>span{width:100%;white-space:normal;animation:cwThinkingFade .24s ease both;}
.cw-thinking-dots{display:flex!important;align-items:center;justify-content:center;gap:5px;width:30px!important;min-width:30px;}
.cw-thinking-dots i{display:block;width:5px;height:5px;background:#c4b5fd;border-radius:50%;animation:cwTyping 1s infinite ease-in-out;}
.cw-thinking-dots i:nth-child(2){animation-delay:.15s}.cw-thinking-dots i:nth-child(3){animation-delay:.3s}
.cw-ai-floater{position:fixed;right:22px;bottom:calc(94px + env(safe-area-inset-bottom,0px));z-index:1200;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit;}
.cw-ai-float-launcher{display:flex;align-items:center;justify-content:center;gap:8px;min-width:104px;height:48px;padding:0 17px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font:inherit;font-weight:700;font-size:.88rem;box-shadow:0 10px 32px rgba(91,33,182,.36);cursor:pointer;transition:transform .18s,box-shadow .18s;}
.cw-ai-float-launcher:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(91,33,182,.45)}
.cw-ai-float-launcher-icon{font-size:1.2rem;line-height:1}.cw-ai-float-launcher.is-open{min-width:48px;width:48px;padding:0;font-size:1.5rem;background:#25212f;}
.cw-ai-float-panel{width:min(370px,calc(100vw - 28px));max-height:min(590px,calc(100dvh - 180px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(196,181,253,.24);border-radius:22px;background:linear-gradient(160deg,#17151f,#0c0b11 72%);color:#f8f7ff;box-shadow:0 22px 75px rgba(0,0,0,.48);animation:cwChatIn .18s ease-out;}
.cw-ai-float-header{display:flex;align-items:center;gap:11px;padding:16px;border-bottom:1px solid rgba(255,255,255,.09);}
.cw-ai-float-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#6d28d9);color:white;font-size:1.25rem;}
.cw-ai-float-header>div{display:flex;flex-direction:column;gap:3px;min-width:0}.cw-ai-float-header strong{font-size:.95rem}.cw-ai-float-header small{font-size:.72rem;color:#aaa4bd;}
.cw-ai-float-close{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#eee;font-size:1.4rem;cursor:pointer;}
.cw-ai-float-intro{margin:0;padding:14px 16px 10px;color:#c7c2d3;font-size:.8rem;line-height:1.55;}
.cw-ai-float-form{display:flex;gap:7px;margin:0 13px 12px;padding:6px;border:1px solid rgba(196,181,253,.25);border-radius:15px;background:rgba(255,255,255,.055);}
.cw-ai-float-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:white;padding:8px;font:inherit;font-size:.8rem;}.cw-ai-float-form input::placeholder{color:#8f899f;}
.cw-ai-float-form button{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:11px;background:#8b5cf6;color:white;font-size:1.3rem;cursor:pointer;}.cw-ai-float-form button:disabled{opacity:.45;cursor:default;}
.cw-ai-float-status{display:flex;align-items:center;gap:10px;padding:4px 16px 12px;color:#c4b5fd;font-size:.78rem;}.cw-ai-float-dots{display:flex;gap:4px}.cw-ai-float-dots i{width:5px;height:5px;border-radius:50%;background:#c4b5fd;animation:cwTyping 1s infinite ease-in-out}.cw-ai-float-dots i:nth-child(2){animation-delay:.15s}.cw-ai-float-dots i:nth-child(3){animation-delay:.3s}
.cw-ai-float-error{margin:0;padding:0 16px 12px;color:#ffbcbc;font-size:.76rem;line-height:1.5;}.cw-ai-float-results{overflow-y:auto;min-height:0;padding:0 9px;overscroll-behavior:contain;}
.cw-ai-float-result{display:flex;align-items:center;gap:10px;width:100%;padding:9px;border:0;border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer;}.cw-ai-float-result:hover{background:rgba(167,139,250,.12)}.cw-ai-float-result img,.cw-ai-float-art{width:42px;height:42px;flex:0 0 42px;object-fit:cover;border-radius:9px;background:#292235;}.cw-ai-float-art{display:grid;place-items:center;color:#c4b5fd;font-size:1.3rem}.cw-ai-float-result>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.cw-ai-float-result strong,.cw-ai-float-result small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cw-ai-float-result strong{font-size:.8rem}.cw-ai-float-result small{font-size:.7rem;color:#aaa4bd}.cw-ai-float-arrow{color:#c4b5fd}.cw-ai-float-foot{margin:0;padding:12px 15px 14px;color:#777184;font-size:.65rem;line-height:1.4;}
@media(max-width:560px){.cw-ai-floater{right:12px;bottom:calc(82px + env(safe-area-inset-bottom,0px))}.cw-ai-float-panel{max-height:calc(100dvh - 150px);border-radius:18px}.cw-ai-float-launcher{height:44px;min-width:96px}.cw-typing-status.is-thinking-text{min-width:min(210px,100%)}}


/* v0.3.30 - floating launcher uses the same avatar identity as the chat bot */
.cw-ai-float-launcher{width:58px;min-width:58px;height:58px;padding:0;border-radius:50%;gap:0;background:linear-gradient(145deg,#3a3b43,#17181e);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.38);}
.cw-ai-float-launcher:hover{transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,255,255,.12),0 14px 34px rgba(0,0,0,.45)}
.cw-ai-float-launcher.is-open{width:48px;min-width:48px;height:48px;border-radius:50%;padding:0;background:#25212f}
.cw-ai-float-launcher-icon.cw-ai-float-launcher-chatbot{display:grid;place-items:center;width:100%;height:100%;font-size:25px;color:#fff;background:linear-gradient(145deg,#3a3b43,#17181e);border-radius:inherit}
.cw-ai-float-launcher-avatar{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cw-ai-float-mark-image{overflow:hidden;padding:0;background:#18181d}
.cw-ai-float-mark-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* v0.3.32: floating AI chat uses the same message/composer design as the main chat. */
.cw-ai-float-chat-panel{height:min(620px,calc(100dvh - 170px));max-height:calc(100dvh - 170px);}
.cw-ai-float-chat-messages{display:flex;flex:1;flex-direction:column;gap:15px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding:17px 13px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent,#8b5cf6) 58%,#45404f) transparent;}
.cw-ai-float-chat-messages::-webkit-scrollbar{width:8px;height:8px}
.cw-ai-float-chat-messages::-webkit-scrollbar-track{background:transparent;border-radius:999px}
.cw-ai-float-chat-messages::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent,#8b5cf6) 52%,#45404f);border:2px solid transparent;background-clip:padding-box;border-radius:999px}
.cw-ai-float-chat-messages::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent,#8b5cf6) 75%,#656070);background-clip:padding-box}
.cw-ai-float-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;margin:auto;padding:18px 12px;color:#f5f5f7}
.cw-ai-float-welcome p{max-width:270px;margin:0;color:#a6a4b0;font-size:.8rem;line-height:1.6}
.cw-ai-float-welcome-avatar{width:52px;height:52px;flex-basis:52px;margin-bottom:4px}
.cw-ai-float-chat-messages .cw-chat-message{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.cw-ai-float-chat-messages .cw-chat-message.is-assistant{align-self:flex-start}
.cw-ai-float-chat-messages .cw-chat-message.is-user{align-self:flex-end}
.cw-ai-float-chat-messages .cw-message-avatar{width:28px;height:28px;flex-basis:28px;font-size:14px}
.cw-ai-float-chat-messages .cw-chat-bubble{font-size:.82rem;line-height:1.55;padding:10px 12px}
.cw-ai-float-composer{flex:0 0 auto;margin:0 10px 8px;padding:6px 7px 6px 12px;gap:8px}
.cw-ai-float-composer textarea{max-height:96px;min-height:28px;resize:none;font-size:.82rem}
.cw-ai-float-composer button{width:34px;height:34px;flex-basis:34px;border-radius:11px}
.cw-ai-float-chat-panel .cw-ai-float-foot{padding:5px 12px 11px;color:#777582}
.cw-ai-float-chat-panel .cw-ai-float-error{padding:0 13px 8px}
body.cw-live-lyrics-open .cw-ai-floater{display:none!important}
@media(max-width:560px){.cw-ai-float-chat-panel{height:min(560px,calc(100dvh - 145px));max-height:calc(100dvh - 145px)}.cw-ai-float-chat-messages{padding:13px 10px;gap:12px}}


/* v0.3.33 launch polish */
.cw-ai-float-launcher{position:relative;width:auto;min-width:124px;height:52px;padding:0 18px;border-radius:999px;gap:8px;background:linear-gradient(135deg,#a855f7,#6d28d9);border:1px solid rgba(216,180,254,.9);box-shadow:0 0 0 2px rgba(168,85,247,.22),0 0 18px rgba(168,85,247,.65),0 0 38px rgba(124,58,237,.42);animation:cwAskAiGlow 2.4s ease-in-out infinite;}
.cw-ai-float-launcher:hover{box-shadow:0 0 0 2px rgba(216,180,254,.35),0 0 24px rgba(168,85,247,.8),0 0 48px rgba(124,58,237,.55)}
.cw-ai-float-launcher-icon.cw-ai-float-launcher-chatbot{width:auto;height:auto;background:none;font-size:19px}
.cw-ai-launcher-label{font-size:.9rem;font-weight:800;white-space:nowrap}
.cw-ai-float-launcher.is-open{min-width:48px;width:48px;height:48px;padding:0}
.cw-ai-float-panel.cw-ai-float-chat-panel{width:min(460px,calc(100vw - 28px));height:min(740px,calc(100dvh - 150px));max-height:calc(100dvh - 150px)}
@keyframes cwAskAiGlow{0%,100%{box-shadow:0 0 0 2px rgba(168,85,247,.2),0 0 15px rgba(168,85,247,.5),0 0 30px rgba(124,58,237,.3)}50%{box-shadow:0 0 0 3px rgba(216,180,254,.38),0 0 25px rgba(168,85,247,.85),0 0 48px rgba(124,58,237,.52)}}
.now-playing-control,.now-playing-stop{border:1px solid var(--line);background:var(--surface-raised);color:var(--text);border-radius:999px;padding:7px 10px;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap}
.now-playing-stop{color:#ffb4b4}
.cw-playlist-title-edit{position:absolute;top:10px;right:48px;width:30px;height:30px;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(0,0,0,.32);color:#fff;cursor:pointer}
@media(max-width:650px){.cw-ai-float-panel.cw-ai-float-chat-panel{width:calc(100vw - 20px);height:min(74dvh,680px);max-height:calc(100dvh - 145px)}.now-playing-control,.now-playing-stop{padding:6px 7px;font-size:.65rem}}

/* Administrator portal and support conversations */
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.admin-report-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr);gap:16px;align-items:start}
.admin-report-pick{display:flex;flex-direction:column;gap:5px;text-align:left;width:100%;padding:12px;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;background:transparent;color:inherit;margin:8px 0;cursor:pointer}
.admin-report-pick:hover{background:rgba(255,255,255,.05)}
.admin-report-pick span,.admin-report-pick small{color:var(--muted,#999)}
.support-thread{display:flex;flex-direction:column;gap:10px;max-height:440px;overflow:auto;padding:10px 0;margin:12px 0}
.support-message{max-width:88%;align-self:flex-start;padding:12px;border-radius:14px;background:rgba(255,255,255,.07);overflow-wrap:anywhere}
.support-message.mine{align-self:flex-end;background:rgba(124,58,237,.2)}
.support-message p{white-space:pre-wrap;margin:7px 0}
.support-message small{opacity:.72}
.admin-report-layout form{display:grid;gap:10px}
@media(max-width:760px){.admin-report-layout{grid-template-columns:1fr}.admin-row{align-items:flex-start;gap:12px;flex-direction:column}.admin-row-controls{flex-wrap:wrap;max-width:100%}}
.admin-account-ident{display:flex;align-items:center;gap:12px}.admin-account-avatar{width:42px;height:42px;object-fit:cover;border-radius:50%}

/* Event invite feedback and inline song editing. */
.event-copy-link{border-color:rgba(168,85,247,.65)!important;box-shadow:0 0 0 1px rgba(168,85,247,.2),0 0 18px rgba(168,85,247,.28);transition:box-shadow .2s,transform .2s}
.event-copy-link:hover{box-shadow:0 0 0 1px rgba(168,85,247,.5),0 0 24px rgba(168,85,247,.48);transform:translateY(-1px)}
.event-copy-link.is-copied{border-color:#a78bfa!important;color:#c4b5fd;box-shadow:0 0 18px rgba(168,85,247,.45)}
.event-edit-song{min-width:38px;padding-inline:10px;font-size:1.05rem}

/* v0.3.39 quality-of-life polish */
.paused-lyrics-browser{display:flex;flex-direction:column;gap:5px;max-height:min(34vh,320px);overflow-y:auto;overscroll-behavior:contain;padding:12px 8px;margin:18px auto 0;width:min(100%,760px);border-top:1px solid rgba(255,255,255,.12);scroll-behavior:smooth;mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}
.paused-lyrics-browser button{appearance:none;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.62);text-align:left;padding:10px 14px;font:inherit;cursor:pointer;transition:background .25s ease,color .25s ease,transform .25s ease}
.paused-lyrics-browser button:hover,.paused-lyrics-browser button.is-active{background:rgba(124,58,237,.22);color:#fff;transform:translateX(3px)}
.live-lyrics-stage.is-paused .live-lyrics-content{filter:brightness(.82);transition:filter .35s ease}
.live-lyrics-stage.is-paused .lyrics-pause-overlay.is-paused{display:none}
.lk-active-line,.lk-adjacent-line,.lk-upcoming-line{scroll-behavior:smooth;transition:opacity .32s ease,transform .38s cubic-bezier(.2,.7,.2,1),color .32s ease}
.playlist-edit-modal{width:min(560px,calc(100vw - 28px));max-height:88vh;overflow:auto;padding:22px;border-radius:22px;background:var(--surface-raised,var(--surface));border:1px solid var(--border)}
.playlist-edit-modal .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.playlist-edit-preview{height:140px;border-radius:14px;overflow:hidden;background:rgba(124,58,237,.12);display:grid;place-items:center;margin:14px 0}
.playlist-edit-preview img{width:100%;height:100%;object-fit:cover}.playlist-edit-preview span{font-size:3rem}
.playlist-edit-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.event-track-row{grid-template-columns:48px minmax(0,1fr) auto auto auto}
.event-remove-song{font-size:.8rem}
.event-quick-search{margin-top:14px}.event-quick-search>summary{cursor:pointer;color:var(--text-muted);padding:10px 0}
@media(max-width:680px){.event-track-row{grid-template-columns:42px minmax(0,1fr) auto;gap:8px}.event-track-row .event-edit-song,.event-track-row .event-remove-song{grid-row:2}.playlist-edit-actions>*{flex:1 1 100%}}
.event-track-edit-form{display:grid;gap:12px}.event-edit-cover-preview{width:100%;max-height:180px;object-fit:cover;border-radius:12px}.event-edit-form-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.dashboard-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* v0.3.40: compact Apple-Music-inspired floating player and scrollable lyric stage. */
.now-playing-bar{
  left:16px!important; right:auto!important; bottom:14px!important;
  width:min(720px,calc(100vw - 32px))!important; max-width:720px!important;
  min-height:76px; padding:10px 14px!important; gap:12px;
  display:flex; align-items:center; border:1px solid rgba(255,255,255,.15)!important;
  border-radius:24px!important; background:rgba(25,23,32,.88)!important;
  box-shadow:0 12px 42px rgba(0,0,0,.36),0 0 22px rgba(124,58,237,.13)!important;
  backdrop-filter:blur(28px) saturate(160%)!important; -webkit-backdrop-filter:blur(28px) saturate(160%)!important;
}
.now-playing-bar::after{display:none!important}
.now-playing-transport{display:flex;align-items:center;gap:8px;flex-shrink:0}
.now-playing-transport button{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;font-size:18px}
.now-playing-transport .now-playing-toggle{width:40px;height:40px;background:rgba(255,255,255,.13);font-size:18px}
.now-playing-transport button:hover{background:rgba(124,58,237,.24);color:#fff}
.now-playing-hit{flex:1;min-width:0;display:flex;align-items:center;gap:10px;cursor:pointer}
.now-playing-art{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:9px!important;overflow:hidden}
.now-playing-info{min-width:0;flex:1;gap:3px!important}
.now-playing-title,.now-playing-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-playing-title{font-size:13px!important;font-weight:650!important}
.now-playing-artist{font-size:11px!important;opacity:.72}
.now-playing-info .player-progress{margin-top:3px}
.now-playing-time{display:none!important}
.now-playing-control,.now-playing-stop{display:none!important}
.now-playing-lyrics{flex:0 0 34px;width:34px;height:34px;border-radius:50%!important;padding:0!important;display:grid;place-items:center}
.now-playing-lyrics span{display:none}
.full-player-backdrop:not(.is-lyrics-fullscreen){background:rgba(0,0,0,.48)!important;backdrop-filter:blur(14px)}
.live-lyrics-stage{height:100%;min-height:0}
.live-lyrics-layout{height:100%;min-height:0;overflow:hidden}
.live-lyrics-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-behavior:smooth;padding:clamp(20px,4vh,56px) clamp(18px,4vw,60px)!important;}
.live-lyrics-content .lk-karaoke{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,32px)}
.live-lyrics-content .lk-adjacent-line,.live-lyrics-content .lk-upcoming-line,.live-lyrics-content .lk-active-line{max-width:100%;text-align:left;transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;}
.live-lyrics-content .lk-active-line{font-size:clamp(30px,4.4vw,64px);line-height:1.15}
.live-lyrics-content .lk-adjacent-line,.live-lyrics-content .lk-upcoming-line{font-size:clamp(20px,2.4vw,36px);line-height:1.25}
@media(max-width:700px){
 .now-playing-bar{left:8px!important;bottom:8px!important;width:calc(100vw - 16px)!important;padding:8px!important;gap:7px;border-radius:20px!important;}
 .now-playing-transport{gap:2px}.now-playing-transport button{width:29px;height:32px;font-size:15px}.now-playing-transport .now-playing-toggle{width:34px;height:34px}
 .now-playing-art{width:40px!important;height:40px!important;flex-basis:40px!important}.now-playing-hit{gap:7px}.now-playing-title{font-size:12px!important}.now-playing-artist{font-size:10px!important}
 .live-lyrics-layout{grid-template-columns:1fr!important}.live-lyrics-art-panel{display:none!important}.live-lyrics-content{padding:24px 18px 90px!important}
}

/* v0.3.41: clear Apple-style liquid-glass minibar; logo-only idle state. */
.now-playing-bar{
  background:rgba(35,34,39,.48)!important;
  border:1px solid rgba(255,255,255,.36)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 34px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(36px) saturate(185%)!important;
  -webkit-backdrop-filter:blur(36px) saturate(185%)!important;
}
.now-playing-bar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 42%,rgba(255,255,255,.07));}
.now-playing-bar>*{position:relative;z-index:1}
.now-playing-bar.is-idle{justify-content:center;min-height:64px;padding:8px 18px!important;}
.now-playing-idle-logo{display:flex;align-items:center;justify-content:center;width:100%;height:44px;pointer-events:none;}
.now-playing-idle-logo img{display:block;width:auto;height:36px;max-width:min(180px,60vw);object-fit:contain;filter:drop-shadow(0 1px 8px rgba(0,0,0,.2));}
.now-playing-bar .preview,.now-playing-bar [class*="preview-badge"],.now-playing-bar [class*="preview-label"]{display:none!important}

/* v0.3.42: centered glass minibar and a true full-screen artwork player. */
/* v0.3.43: artwork-derived fullscreen gradient, queue, volume and readable controls. */
.now-playing-bar{
  left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  bottom:14px!important;width:min(680px,calc(100vw - 28px))!important;max-width:680px!important;
  min-height:64px!important;padding:7px 13px!important;gap:12px!important;
  border-radius:999px!important;background:rgba(220,225,235,.12)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 12px 38px rgba(0,0,0,.23)!important;
  backdrop-filter:blur(42px) saturate(210%)!important;-webkit-backdrop-filter:blur(42px) saturate(210%)!important;
}
.now-playing-bar::before{background:linear-gradient(115deg,rgba(255,255,255,.2),rgba(255,255,255,.035) 48%,rgba(255,255,255,.1))!important}
.now-playing-bar.is-idle{left:50%!important;transform:translateX(-50%)!important;justify-content:center!important}
.now-playing-volume{position:relative;display:flex;align-items:center;flex:0 0 auto}
.now-playing-volume input[type=range]{position:absolute;right:0;bottom:calc(100% + 12px);width:145px;padding:10px;border-radius:14px;background:rgba(28,28,34,.78);backdrop-filter:blur(24px);accent-color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.now-playing-lyrics{background:transparent!important;border:0!important;color:inherit!important}
.now-playing-art{cursor:pointer}
.full-player-backdrop:not(.is-lyrics-fullscreen){position:fixed!important;inset:0!important;z-index:1500!important;display:grid!important;place-items:center!important;padding:0!important;background:rgba(0,0,0,.3)!important;backdrop-filter:blur(28px) saturate(145%)!important;-webkit-backdrop-filter:blur(28px) saturate(145%)!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player{position:relative!important;inset:auto!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;overflow:auto!important;border-radius:0!important;border:0!important;background:radial-gradient(ellipse at 50% 20%,rgba(120,80,180,.35),transparent 58%),linear-gradient(160deg,#29252f,#111114 68%)!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-body{width:100%;height:100%;min-height:0;display:grid;place-items:center;padding:clamp(20px,5vw,64px)!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-main{width:min(430px,100%);margin:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-art-wrap{width:100%!important;max-width:min(430px,70vh)!important;aspect-ratio:1!important;margin:0 auto 8px!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-art{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:18px!important;box-shadow:0 25px 70px rgba(0,0,0,.4)!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-copy{text-align:left!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-title{font-size:clamp(22px,3vw,30px)!important;line-height:1.15!important}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-release-type{margin:4px 0 0;color:rgba(255,255,255,.58);font-size:12px}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-controls{display:flex;align-items:center;justify-content:center;gap:28px!important}
.full-player-repeat{background:transparent;border:0;color:rgba(255,255,255,.7);font-size:24px;cursor:pointer}
.full-player-repeat.is-active{color:#c4a6ff}
.full-player-collapse{position:fixed!important;top:22px!important;right:22px!important;z-index:4}
.full-player-live-lyrics{position:fixed!important;top:22px!important;left:22px!important;z-index:4}
body,button,input,textarea,select{font-family:inherit!important}
.live-lyrics-content .lk-active-line,.live-lyrics-content .lk-upcoming-line,.live-lyrics-content .lk-previous-line{animation:lyricLineGlide .52s cubic-bezier(.22,.61,.36,1) both}
@keyframes lyricLineGlide{from{opacity:.2;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.live-lyrics-content .lk-karaoke{scroll-margin-block:40vh}
.live-lyrics-content{scroll-behavior:smooth!important}
@media(max-width:700px){.now-playing-bar{left:50%!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:calc(100vw - 16px)!important;padding:6px 9px!important;gap:5px!important}.now-playing-transport{gap:0!important}.now-playing-art{width:40px!important;height:40px!important;flex-basis:40px!important}.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-body{padding:22px!important}.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-art-wrap{max-width:min(78vw,52vh)!important}}
.request-target-switch{display:flex;gap:6px;margin:0 0 8px}.request-target-switch button{border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:transparent;color:var(--text-muted);cursor:pointer}.request-target-switch button.is-active{background:var(--surface-raised);color:var(--text);border-color:var(--accent)}
.event-track-play-icon{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--surface-raised);color:var(--text);display:grid;place-items:center;cursor:pointer}

/* v0.3.43 premium player refinements */
.now-playing-idle-logo img{width:auto;height:42px;max-width:min(190px,65vw);object-fit:contain;background:transparent}
.now-playing-idle-logo::after{content:'ClassWave';display:none;font:600 15px/1.2 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.92)}
.now-playing-idle-logo img[src=''],.now-playing-idle-logo img:not([src]){display:none}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;background:linear-gradient(180deg,rgba(10,10,14,.28),rgba(10,10,14,.92)),var(--player-artwork) center/cover no-repeat,#111!important;isolation:isolate}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--player-artwork) center/cover no-repeat;filter:blur(55px) saturate(1.35);opacity:.72;transform:scale(1.12)}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-main{position:relative;z-index:1}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-controls{gap:clamp(14px,3vw,30px)!important}
.full-player-controls .full-player-skip{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;display:grid!important;place-items:center!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important}
.full-player-controls .full-player-skip svg{width:24px!important;height:24px!important}
.full-player-controls .full-player-skip span{display:none!important}
.full-player-icon-control{width:36px;height:36px;min-width:36px;padding:7px;display:grid;place-items:center;border:0;background:transparent;color:rgba(255,255,255,.78);border-radius:50%;cursor:pointer}
.full-player-icon-control svg{width:22px;height:22px}
.full-player-icon-control.is-active{color:#fff;background:rgba(255,255,255,.15)}
.full-player-volume-row{display:flex;align-items:center;gap:12px;margin-top:2px;color:rgba(255,255,255,.72);font-size:12px}
.full-player-volume-row input{width:100%;min-width:0;accent-color:#fff}
.full-player-queue{margin-top:8px;max-height:220px;overflow:auto;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(12,12,16,.38);backdrop-filter:blur(18px);padding:12px}
.full-player-queue-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}
.full-player-queue-head span,.full-player-queue-item small{color:rgba(255,255,255,.62);font-size:11px}
.full-player-queue-item{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
.full-player-queue-item:last-child{border-bottom:0}
.full-player-queue-item img{width:36px;height:36px;object-fit:cover;border-radius:7px}
.full-player-queue-item span{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.full-player-queue-item b,.full-player-queue-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.full-player-queue-item b{font-size:12px;font-weight:600}
.full-player-queue-item button{border:0;background:transparent;color:rgba(255,255,255,.7);font-size:22px;cursor:pointer}
.full-player-add-current{align-self:center;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.08);color:white;font:500 12px system-ui,-apple-system,'Segoe UI',sans-serif;cursor:pointer}
.artist-page-hero-copy{position:relative}
.artist-page-logo-centered{display:block;width:min(420px,75vw);height:auto;max-height:150px;object-fit:contain;margin:0 auto 16px;filter:drop-shadow(0 4px 20px rgba(0,0,0,.35))}
.artist-page-name-fallback{margin:0 auto 14px;text-align:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;font-weight:700;letter-spacing:-.035em}
.artist-page-hero-copy:has(.artist-page-logo-centered){text-align:center}
@media(max-width:700px){.full-player-queue{max-height:160px}.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-main{width:min(430px,100%);gap:12px!important}.full-player-controls{gap:10px!important}.full-player-icon-control{width:32px;height:32px;min-width:32px}}

.now-playing-idle-logo.logo-failed::after{display:block}
.full-player-controls .full-player-skip{width:36px!important;height:36px!important;min-width:36px!important}
.full-player-controls .full-player-skip svg{width:22px!important;height:22px!important}


/* v0.3.45 artist-page and player polish */
.artist-page{width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:clamp(14px,3vw,42px);padding-right:clamp(14px,3vw,42px)}
.artist-page::before{left:0;right:0;width:100vw}
.artist-page-hero{width:100%;min-height:clamp(280px,38vw,520px);background-size:cover;background-position:center;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:0;}
.artist-page-header{margin-left:calc(-1 * clamp(14px,3vw,42px));margin-right:calc(-1 * clamp(14px,3vw,42px));width:calc(100% + 2 * clamp(14px,3vw,42px));}
.artist-page-hero-copy{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;min-height:inherit;border:0;background:transparent;color:inherit;cursor:pointer;text-align:center;padding:24px;}
.artist-page-logo-centered{max-width:min(520px,78vw);max-height:clamp(72px,15vw,180px);margin:0 auto;object-position:center;}
.artist-page-name-fallback{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;font-weight:700;letter-spacing:-.035em;text-align:center}
.artist-page-songs-head>div:empty{display:none}
.ap2-stage{width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(14px,3vw,42px);box-sizing:border-box}
.ap2-bg{left:0;right:0;width:100%;border-radius:0!important}
.ap2-music{max-width:1600px;margin:0 auto}
.artist-page-brand-link:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}

/* Fixed readable system typography; font uploads are disabled. */
:root { --cw-font-site: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; --cw-font-headings: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; --cw-font-lyrics: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; --cw-lyrics-size: 1 !important; --cw-lyrics-weight: 700 !important; }
html, body, body *, button, input, textarea, select, h1, h2, h3, h4, h5, h6, .lk-active-line, .lk-adjacent-line, .lk-upcoming-line, .lk-plain { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; }
.cw-global-back { position:fixed;z-index:1500;left:14px;top:84px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);box-shadow:0 5px 22px rgba(0,0,0,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:inherit;cursor:pointer }
.cw-global-back:hover{background:var(--surface-raised)}
@media(max-width:640px){.cw-global-back{top:74px;left:10px;padding:8px 11px}.cw-global-back span{display:none}}
.full-player-collapse{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:rgba(0,0,0,.42)!important;color:white!important;border:1px solid rgba(255,255,255,.28)!important}
.full-player-collapse svg{width:22px!important;height:22px!important}
.full-player-backdrop.is-closing,.full-player.is-closing,.full-player-backdrop.is-closing .full-player{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}


/* Artwork safety: blur known-explicit covers until the user opts to reveal them. */
.song-card-art { position: relative; overflow: hidden; }
.song-card-art-image-sensitive { filter: blur(18px); transform: scale(1.08); }
.song-artwork-reveal { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:7px 10px; background:rgba(0,0,0,.72); color:#fff; font:inherit; font-size:12px; white-space:nowrap; cursor:pointer; }


/* v0.3.49: stronger, accessible fullscreen-player controls. Keep this after
   legacy player overrides so the main play/pause control cannot collapse. */
.full-player-controls{gap:clamp(10px,2.3vw,22px);flex-wrap:wrap;}
.full-player-controls button{flex:0 0 auto;min-width:48px;min-height:48px;position:relative;transition:transform .16s ease,background .16s ease,box-shadow .16s ease;}
.full-player-controls .full-player-toggle{width:76px;height:76px;min-width:76px;min-height:76px;border:2px solid color-mix(in srgb,var(--accent-contrast) 35%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 17%,transparent),0 12px 30px color-mix(in srgb,var(--accent) 32%,transparent);}
.full-player-controls .full-player-toggle svg{width:34px;height:34px;min-width:34px;min-height:34px;}
.full-player-controls .full-player-skip{width:54px;height:54px;min-width:54px;min-height:54px;background:color-mix(in srgb,var(--text) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--text) 15%,transparent);}
.full-player-controls .full-player-skip svg{width:26px;height:26px;}
.full-player-controls .full-player-icon-control,.full-player-controls .full-player-repeat{width:48px;height:48px;min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--text) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--text) 14%,transparent);color:var(--text);font-size:1.35rem;cursor:pointer;}
.full-player-controls .full-player-icon-control svg{width:25px;height:25px;display:block;}
.full-player-controls button:hover:not(:disabled){transform:scale(1.06);background:color-mix(in srgb,var(--accent) 20%,var(--surface));}
.full-player-controls button:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
.full-player-controls button:disabled{opacity:.35;cursor:not-allowed;}
.full-player-controls .full-player-icon-control.is-active,.full-player-controls .full-player-repeat.is-active{background:color-mix(in srgb,var(--accent) 24%,var(--surface));color:var(--accent);border-color:var(--accent);}
.full-player-volume-row{width:100%;max-width:480px;margin:18px auto 0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--text) 7%,var(--surface));}
.full-player-volume-row span{font-weight:700;font-size:.88rem;}
.full-player-volume-row input{width:100%;min-width:0;accent-color:var(--accent);}
@media(max-width:520px){.full-player-controls{gap:8px}.full-player-controls .full-player-toggle{width:68px;height:68px;min-width:68px;min-height:68px}.full-player-controls .full-player-skip{width:46px;height:46px;min-width:46px;min-height:46px}.full-player-controls .full-player-icon-control,.full-player-controls .full-player-repeat{width:42px;height:42px;min-width:42px;min-height:42px}}

/* v0.3.50: global layout cleanup */
html, body, #root { min-height:100%; max-width:100%; }
body { overflow-x:hidden; line-height:1.5; }
main, .wrap, .page, .card, .modal, .full-player-body { min-width:0; }
p, li, label, .muted, .site-content-copy { line-height:1.55; overflow-wrap:anywhere; }
h1,h2,h3,h4 { line-height:1.18; letter-spacing:normal; }
button,input,select,textarea { line-height:1.35; }
.cw-global-back { display:none!important; }
/* Scrollbars belong to their own panels, never the whole page width. */
* { scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--text) 24%,transparent) transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--text) 24%,transparent); border-radius:999px; }
*::-webkit-scrollbar-track { background:transparent; }
.lk-karaoke-scroll { width:100%; height:min(66vh,720px); overflow-y:auto; overscroll-behavior:contain; padding:8vh clamp(12px,3vw,34px); scroll-behavior:smooth; mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%); }
.lk-scroll-line { display:block; width:100%; border:0; background:transparent; color:rgba(255,255,255,.42); text-align:left; font:inherit; font-size:clamp(1.25rem,2.8vw,2.5rem); font-weight:750; line-height:1.35; letter-spacing:-.025em; padding:12px 0; margin:0; cursor:pointer; transition:color .35s ease,opacity .35s ease,transform .35s ease; }
.lk-scroll-line.is-current { color:#fff; transform:translateX(3px); opacity:1; }
.lk-scroll-line.is-past { opacity:.5; }
.lk-scroll-line.is-future { opacity:.72; }
.lk-scroll-line:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }
.lk-scroll-line .lk-line-fill-text { background:linear-gradient(90deg,var(--lk-line-highlight) var(--lk-line-progress),rgba(255,255,255,.42) var(--lk-line-progress)); background-clip:text; -webkit-background-clip:text; color:transparent; }
.lk-word { color:rgba(255,255,255,.42); transition:color .16s linear; }
.lk-word.is-ended,.lk-word.is-active { color:#fff; }
.now-playing-bar .cw-minibar-icon { flex:0 0 36px!important; width:36px!important; min-width:36px!important; height:36px!important; min-height:36px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; display:grid!important; place-items:center!important; color:inherit!important; }
.now-playing-bar .cw-minibar-icon svg { display:block; width:23px; height:23px; }
.now-playing-bar .cw-minibar-icon:hover { color:var(--accent)!important; transform:scale(1.08); }
.ap2-logo img { display:block; width:100%; height:auto; max-height:180px; object-fit:contain; filter:drop-shadow(0 4px 16px rgba(0,0,0,.35)); }
@media(max-width:640px) { .lk-karaoke-scroll { height:62vh; padding:6vh 12px; } .lk-scroll-line { font-size:clamp(1.1rem,5vw,1.8rem); } }


/* v0.3.51: stable lyric scrolling, compact icon controls, and typography/layout guardrails. */
.lk-karaoke-shell{position:relative;width:100%;min-width:0;min-height:0;}
.lk-karaoke-scroll{overscroll-behavior:contain;overflow-x:hidden;scrollbar-gutter:stable;touch-action:pan-y;}
.lk-resume-live{position:absolute;z-index:3;right:18px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(24,24,30,.78);color:#fff;font-size:.8rem;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.24);backdrop-filter:blur(16px);cursor:pointer;}
.lk-resume-live:hover{background:rgba(60,60,70,.88);}
.lk-scroll-line{overflow-wrap:anywhere;white-space:normal;}
.lk-scroll-line .lk-word{display:inline;line-height:inherit;}
.now-playing-bar .now-playing-transport button,.now-playing-bar .cw-minibar-icon{border-radius:0!important;background:transparent!important;box-shadow:none!important;}
.now-playing-bar .now-playing-transport button:hover,.now-playing-bar .cw-minibar-icon:hover{color:var(--accent)!important;}
.page-head p{max-width:72ch;}
.site-content-copy p,.site-content-copy li{line-height:1.7;margin-block:.7em;}
.artist-page-logo-placeholder{display:grid;place-items:center;width:clamp(110px,18vw,220px);aspect-ratio:3/1;margin:0 auto 14px;color:rgba(255,255,255,.85);font-size:clamp(38px,6vw,72px);}
@media(max-width:640px){.lk-resume-live{right:10px;bottom:10px}.lk-karaoke-scroll{scrollbar-gutter:auto}}

/* Word-level karaoke uses only provider-supplied timestamps; paint the elapsed portion of each word. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word{background-image:linear-gradient(90deg,#fff var(--lk-word-progress,0%),rgba(255,255,255,.48) var(--lk-word-progress,0%))!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-ended{background-image:linear-gradient(90deg,#fff 100%,#fff 100%)!important;-webkit-text-fill-color:transparent!important;color:transparent!important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text{background-image:linear-gradient(90deg,#fff var(--lk-line-progress,0%),rgba(255,255,255,.48) var(--lk-line-progress,0%))!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;}

/* One lyric scroll container only: avoid the nested vertical scrollbars that made Live Lyrics feel cramped. */
.full-player.is-lyrics-fullscreen .live-lyrics-content{overflow:hidden!important;min-height:0!important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke-shell{height:100%;min-height:0;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke-scroll{height:100%;max-height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;}


/* v0.3.52: premium player finishing pass */
/* Let the mini-player volume thumb travel the full length of a generous track. */
.now-playing-volume input[type="range"]{width:clamp(220px,32vw,300px)!important;height:42px!important;padding:0!important;margin:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;background:rgba(20,20,26,.88)!important;box-sizing:border-box!important;accent-color:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;}
.now-playing-volume input[type="range"]::-webkit-slider-runnable-track{height:5px;width:100%;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.28));}
.now-playing-volume input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin-top:-6px;border:2px solid rgba(255,255,255,.95);border-radius:50%;background:#fff;box-shadow:0 2px 9px rgba(0,0,0,.32);}
.now-playing-volume input[type="range"]::-moz-range-track{height:5px;border:0;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.28));}
.now-playing-volume input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:2px solid rgba(255,255,255,.95);border-radius:50%;background:#fff;box-shadow:0 2px 9px rgba(0,0,0,.32);}
/* Compact the next-track target; keep it circular rather than stretching into a pill. */
.now-playing-bar .now-playing-transport .now-playing-skip{flex:0 0 30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:50%!important;font-size:14px!important;line-height:1!important;}
.now-playing-bar .now-playing-transport .now-playing-toggle{flex:0 0 36px!important;width:36px!important;min-width:36px!important;height:36px!important;border-radius:50%!important;}
.now-playing-bar .now-playing-transport{display:flex;align-items:center;gap:5px!important;flex:0 0 auto!important;}
/* Rounded glass surfaces and clear, circular queue actions. */
.full-player-queue{border-radius:22px!important;border-color:rgba(255,255,255,.16)!important;background:rgba(12,12,16,.42)!important;}
.full-player-queue-item{gap:11px!important;padding:9px 3px!important;}
.full-player-queue-item img{border-radius:11px!important;}
.full-player-queue-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
.full-player-queue-actions button{width:29px;height:29px;min-width:29px;padding:0!important;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13)!important;border-radius:50%!important;background:rgba(255,255,255,.07)!important;font-size:15px!important;line-height:1!important;}
.full-player-queue-actions button:hover:not(:disabled){background:rgba(255,255,255,.16)!important;color:#fff!important;}
.full-player-queue-actions button:disabled{opacity:.25;cursor:not-allowed;}
/* Scrollbars are hidden while lyrics are moving, revealed on hover or pause. */
.lk-karaoke-scroll{scrollbar-width:none!important;scrollbar-gutter:auto!important;}
.lk-karaoke-scroll::-webkit-scrollbar{width:0!important;height:0!important;}
.lk-karaoke-shell:hover .lk-karaoke-scroll,.live-lyrics-stage.is-paused .lk-karaoke-scroll{scrollbar-width:thin!important;scrollbar-color:rgba(255,255,255,.38) transparent!important;}
.lk-karaoke-shell:hover .lk-karaoke-scroll::-webkit-scrollbar,.live-lyrics-stage.is-paused .lk-karaoke-scroll::-webkit-scrollbar{width:6px!important;height:6px!important;}
.lk-karaoke-shell:hover .lk-karaoke-scroll::-webkit-scrollbar-thumb,.live-lyrics-stage.is-paused .lk-karaoke-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.38)!important;border-radius:999px!important;}
/* Animate the percentage custom property itself, avoiding the stepped karaoke fill. */
@property --lk-word-progress{syntax:"<percentage>";inherits:false;initial-value:0%;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word{transition:--lk-word-progress .52s linear,opacity .35s ease!important;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text{transition:--lk-line-progress .52s linear,opacity .35s ease!important;}
.lk-scroll-line.is-past{transform:translateY(-3px);transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s ease,color .55s ease;}
.lk-scroll-line.is-current{transform:translateY(-2px) translateX(2px);}
@media(max-width:700px){.now-playing-volume input[type="range"]{width:min(220px,58vw)!important;right:-2px;}.now-playing-bar .now-playing-transport .now-playing-skip{width:26px!important;min-width:26px!important;max-width:26px!important;flex-basis:26px!important;height:28px!important;}}

/* v0.3.55: premium, continuous Live Lyrics word glow and global update banner. */
@property --lk-word-progress { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --lk-line-progress { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word {
  display:inline-block;
  background-image:linear-gradient(90deg,#fff 0%,#fff var(--lk-word-progress,0%),rgba(255,255,255,.48) var(--lk-word-progress,0%),rgba(255,255,255,.48) 100%)!important;
  background-size:100% 100%!important;
  background-clip:text!important;-webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  text-shadow:0 0 0 transparent;
  transition:--lk-word-progress .12s linear,filter .18s ease!important;
  will-change:background-image;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-active {
  filter:drop-shadow(0 0 7px rgba(255,255,255,.62)) drop-shadow(0 0 16px rgba(255,255,255,.25));
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-ended {
  background-image:linear-gradient(90deg,#fff 0%,#fff 100%)!important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.08));
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text {
  background-image:linear-gradient(90deg,#fff 0%,#fff var(--lk-line-progress,0%),rgba(255,255,255,.48) var(--lk-line-progress,0%),rgba(255,255,255,.48) 100%)!important;
  background-clip:text!important;-webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  transition:--lk-line-progress .12s linear!important;
}
.cw-update-available { position:sticky!important;top:0!important;left:0;right:0;width:100%;box-sizing:border-box;z-index:9999!important; }
@media(prefers-reduced-motion:reduce){.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word,.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-fill-text{transition:none!important}}

/* v0.3.56 - consistent premium surfaces and mobile-first Live Lyrics. */
:root { --cw-radius-control: 999px; --cw-radius-card: 18px; --cw-motion: cubic-bezier(.22,.61,.36,1); }
.card,.auth-card,.song-card,.track-detail-card,.settings-card,.cw-lyrics-panel,.cw-chat-panel {
  border-radius:var(--cw-radius-card);
}
button,.btn,input,select,textarea { -webkit-tap-highlight-color:transparent; }
.btn,button.btn,.button {
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
input:not([type="range"]),select,textarea {
  border-radius:12px;
}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid color-mix(in srgb,var(--accent) 72%,#8b7cff);
  outline-offset:3px;
}
/* No simulated word progress on ordinary line-synced lyrics. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-line-plain-text {
  color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important;text-shadow:inherit;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-scroll-line.is-current:not(.has-word-timing) .lk-line-plain-text {
  color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 0 22px rgba(255,255,255,.18);
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-scroll-line:not(.has-word-timing) .lk-line-fill-text { background:none!important;color:inherit!important;-webkit-text-fill-color:currentColor!important; }
/* Word fill interpolates smoothly only when genuine word timestamps exist. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word {
  transition:filter .24s ease!important;
  will-change:background-image,filter;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word.is-active {
  filter:drop-shadow(0 0 8px rgba(255,255,255,.58)) drop-shadow(0 0 18px rgba(255,255,255,.2));
}
/* Mobile layout: fixed viewport with a compact artwork/title header and a
   genuinely constrained lyric scroller, so active lines stay in view. */
@media(max-width:700px){
  .full-player-backdrop.is-lyrics-fullscreen{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;padding:0!important;}
  .full-player.is-lyrics-fullscreen{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;padding-bottom:env(safe-area-inset-bottom,0px);}
  .full-player.is-lyrics-fullscreen .full-player-body{inset:0 0 env(safe-area-inset-bottom,0px)!important;height:auto!important;overflow:hidden!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics{height:100%;min-height:0;overflow:hidden;}
  .full-player.is-lyrics-fullscreen .live-lyrics-stage{
    position:absolute!important;inset:0!important;height:100%!important;min-height:0!important;
    display:block!important;overflow:hidden!important;padding:58px 16px calc(68px + env(safe-area-inset-bottom,0px))!important;
  }
  .full-player.is-lyrics-fullscreen .live-lyrics-layout{
    height:100%!important;min-height:0!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;align-content:stretch!important;gap:12px!important;
  }
  .full-player.is-lyrics-fullscreen .live-lyrics-art-panel{
    display:grid!important;grid-template-columns:68px minmax(0,1fr)!important;
    grid-template-areas:"cover copy" "cover label" "progress progress"!important;
    align-items:center!important;align-content:start!important;column-gap:12px!important;row-gap:3px!important;
    width:100%!important;min-width:0!important;gap:3px 12px!important;
  }
  .full-player.is-lyrics-fullscreen .live-lyrics-cover{grid-area:cover!important;width:68px!important;height:68px!important;aspect-ratio:1!important;border-radius:12px!important;object-fit:cover!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-track-copy{grid-area:copy!important;width:100%!important;min-width:0!important;align-self:end!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-track-title{font-size:clamp(.94rem,4vw,1.08rem)!important;line-height:1.22!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .full-player.is-lyrics-fullscreen .live-lyrics-track-artist{font-size:.8rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .full-player.is-lyrics-fullscreen .live-lyrics-track-album{font-size:.7rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .full-player.is-lyrics-fullscreen .live-lyrics-label{grid-area:label!important;align-self:start!important;font-size:.56rem!important;letter-spacing:.15em!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-art-progress{grid-area:progress!important;width:100%!important;margin-top:8px!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-content{
    height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%)!important;
  }
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke-shell{height:100%!important;min-height:0!important;overflow:hidden!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke-scroll{
    height:100%!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;
    padding:5vh 3px 8vh!important;scroll-padding-block:38% 38%;touch-action:pan-y!important;-webkit-overflow-scrolling:touch;
  }
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-scroll-line{font-size:clamp(1.12rem,5vw,1.65rem)!important;line-height:1.36!important;padding:10px 0!important;letter-spacing:-.02em!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-resume-live{bottom:10px!important;right:10px!important;min-height:40px!important;padding:9px 12px!important;}
  .full-player.is-lyrics-fullscreen .full-player-tabs{bottom:env(safe-area-inset-bottom,0px)!important;}
}
@media(max-width:380px){
  .full-player.is-lyrics-fullscreen .live-lyrics-stage{padding-inline:12px!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-cover{width:60px!important;height:60px!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-art-panel{grid-template-columns:60px minmax(0,1fr)!important;}
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-scroll-line{font-size:1.08rem!important;}
}
@media(prefers-reduced-motion:reduce){
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-word{transition:none!important;}
  .btn,button,.button{transition:none!important;}
}

/* v0.3.60 - full-screen ClassWave transition interstitial. */
.cw-song-transition-tip{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:28px;background:rgba(4,5,9,.97);background-image:linear-gradient(125deg,rgba(4,5,9,.98),rgba(44,8,88,.96),rgba(10,4,28,.98),rgba(93,22,160,.94),rgba(4,5,9,.98));background-size:300% 300%;animation:cw-transition-gradient 2.4s linear infinite;backdrop-filter:blur(28px) saturate(1.15);-webkit-backdrop-filter:blur(28px) saturate(1.15);opacity:1;transition:opacity .65s ease,backdrop-filter .65s ease;pointer-events:none}
.cw-song-transition-tip.is-fading{opacity:0;animation:none;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.cw-song-transition-card{width:min(680px,92vw);min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(28px,6vw,72px);border:0;border-radius:0;background:transparent;box-shadow:none;animation:cw-transition-arrive .55s cubic-bezier(.2,.8,.2,1) both}
.cw-song-transition-card img{display:block;width:clamp(180px,26vw,330px);height:auto;max-height:38vh;object-fit:contain;border-radius:0;margin:0 0 clamp(28px,5vh,54px);filter:drop-shadow(0 16px 54px rgba(0,0,0,.32))}
.cw-song-transition-card strong{font-size:clamp(28px,4vw,44px);font-weight:650;letter-spacing:-.045em;color:#fff}
.cw-song-transition-card p{max-width:620px;margin:16px 0 0;color:rgba(255,255,255,.82);font-size:clamp(16px,2vw,22px);line-height:1.65}
.cw-song-transition-card .cw-transition-sponsor{max-width:720px;margin:0;font-size:clamp(24px,4vw,42px);font-weight:550;letter-spacing:-.035em;color:#fff;animation:cw-transition-arrive .45s ease both}
@keyframes cw-transition-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes cw-transition-arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.cw-song-transition-tip{animation:none!important}}
@media(max-width:700px){.cw-song-transition-tip{display:none!important}}

/* v0.3.59: icon-first player controls and an expansive, animated minibar volume rail. */
.now-playing-bar .now-playing-transport button,
.now-playing-bar .cw-minibar-icon {
  border: 0 !important;
  outline-offset: 4px;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--text) 86%, transparent) !important;
  transition: color .18s ease, transform .18s ease, opacity .18s ease !important;
}
.now-playing-bar .now-playing-transport button:hover:not(:disabled),
.now-playing-bar .cw-minibar-icon:hover {
  color: var(--accent) !important;
  transform: scale(1.08);
  background: transparent !important;
  box-shadow: none !important;
}
.now-playing-bar .now-playing-transport .now-playing-toggle {
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--text) 8%, transparent) !important;
}
.now-playing-bar .now-playing-transport .now-playing-toggle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}
.now-playing-volume { position: relative; z-index: 12; }
.now-playing-volume input[type="range"] {
  position: absolute !important;
  z-index: 100 !important;
  right: 0 !important;
  bottom: calc(100% + 14px) !important;
  width: min(70vw, 720px) !important;
  height: 44px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  background: rgba(16,16,22,.86) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  box-sizing: border-box !important;
  accent-color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(9px) scaleX(.82);
  transform-origin: right bottom;
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.75,.25,1), visibility .24s ease !important;
}
.now-playing-volume input[type="range"].is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scaleX(1);
}
.now-playing-volume input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.22));
}
.now-playing-volume input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px;
  border: 2px solid rgba(255,255,255,.96); border-radius: 50%; background: #fff;
  box-shadow: 0 2px 9px rgba(0,0,0,.3);
}
.now-playing-volume input[type="range"]::-moz-range-track { height: 5px; border: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.22)); }
.now-playing-volume input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.96); border-radius: 50%; background: #fff; }
/* Full-player transport and utility actions use bare icons, except the main play circle. */
.full-player-icon-control,
.full-player-repeat,
.full-player-skip,
.full-player-stop,
.full-player-close,
.full-player-queue-actions button {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 50% !important;
  transition: color .18s ease, transform .18s ease, background .18s ease !important;
}
.full-player-icon-control:hover,
.full-player-repeat:hover,
.full-player-skip:hover:not(:disabled),
.full-player-stop:hover,
.full-player-close:hover,
.full-player-queue-actions button:hover:not(:disabled) {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  transform: scale(1.06);
}
.full-player-toggle { border-radius: 50% !important; }
@media (max-width: 700px) {
  .now-playing-volume input[type="range"] { width: min(calc(100vw - 28px), 480px) !important; right: -4px !important; }
  .now-playing-bar .now-playing-transport .now-playing-toggle { width: 34px !important; min-width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .now-playing-bar .cw-minibar-icon { width: 32px !important; min-width: 32px !important; flex-basis: 32px !important; }
}

/* v0.3.65 - Live Lyrics must open at the first line.
   The lyric scroller also carries the legacy .lk-karaoke class, a centered
   flex column. A centered flex container that overflows pushes half of its
   content above scrollTop 0, where it can never be scrolled to - so songs
   appeared to start mid-way. Make the scroller a plain block scroll container;
   top/bottom padding lets the first and last lines still sit at reading height. */
.lk-karaoke.lk-karaoke-scroll,
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke.lk-karaoke-scroll{display:block!important;justify-content:flex-start!important;align-items:stretch!important;}
@media(min-width:701px){
  .full-player.is-lyrics-fullscreen .live-lyrics-content .lk-karaoke.lk-karaoke-scroll{padding:34vh 0 46vh;}
}

/* v0.3.65 - the logo's white "C" disappears on the light theme; outline it. */
:root[data-theme='light'] .wordmark-logo{filter:drop-shadow(0 0 .7px rgba(76,29,149,.9)) drop-shadow(0 1px 1.5px rgba(76,29,149,.35));}

/* v0.3.67 - player icons + mini-player volume slider.
   Global `button,input,...{max-width:100%}` capped the absolutely positioned
   volume slider to its 36px wrapper, squashing it into a tiny pill. */
.now-playing-volume input[type="range"]{max-width:none!important;width:clamp(240px,34vw,380px)!important;}
@media(max-width:700px){.now-playing-volume{position:static!important}.now-playing-volume input[type="range"]{width:min(calc(100vw - 28px),360px)!important;right:0!important;left:auto!important;}}
.now-playing-transport button svg{display:block;width:20px;height:20px;pointer-events:none}
.now-playing-transport .now-playing-toggle svg{width:22px;height:22px}
.full-player-repeat svg,.full-player-icon-control svg{display:block;width:20px;height:20px;pointer-events:none}
.full-player-repeat{display:inline-flex;align-items:center;justify-content:center}
.now-playing-bar .now-playing-lyrics,.now-playing-bar .cw-minibar-icon{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.now-playing-bar .now-playing-transport button svg{width:20px!important;height:20px!important}
.now-playing-bar .now-playing-transport .now-playing-toggle svg{width:26px!important;height:26px!important}
.now-playing-bar .now-playing-transport button{padding:0!important}

/* v0.3.67 - big player: previous/next are bare icons (no purple circle). */
.full-player-controls .full-player-skip.is-clear,
.full-player-controls .full-player-skip.is-clear:disabled{background:transparent!important;box-shadow:none!important;border:0!important;color:#fff!important;}
.full-player-controls .full-player-skip.is-clear:disabled{opacity:.35;}
.full-player-controls .full-player-skip.is-clear:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--accent) 10%,transparent)!important;color:var(--accent)!important;}


/* ClassWave 0.3.67: dual mode, teacher portal, and flatter settings */
.cw-dual-choice{position:relative;overflow:hidden;border-color:rgba(168,85,247,.6)}
.cw-dual-rainbow{background:linear-gradient(110deg,#ff4d6d,#ffb84d,#eaff6a,#4dffbd,#4db8ff,#b84dff,#ff4d6d);background-size:300% 300%;color:#160822!important;animation:cw-rainbow-fast 8s linear infinite}
.cw-try-dual{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:12px 18px;border:1px solid transparent;border-radius:13px;color:white;font-weight:750;background:linear-gradient(100deg,#ff4d6d,#ffb84d,#b84dff,#4db8ff,#ff4d6d);background-size:300% 100%;animation:cw-rainbow-fast 8s linear infinite;cursor:pointer}
@keyframes cw-rainbow-fast{from{background-position:0% 50%}to{background-position:300% 50%}}
.cw-dual-section-title{grid-column:1/-1;margin:14px 0 2px;font-size:1.18rem}.cw-dual-personal-heading{margin-top:24px}.cw-tagline{margin:8px 0 0;font-weight:600;letter-spacing:.015em}.cw-settings-content{display:block}.cw-password-settings{margin-bottom:18px}.cw-teacher-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}.cw-teacher-class{margin-bottom:16px}.cw-teacher-class-head,.cw-roster-row,.cw-student-search-result{display:flex;align-items:center;justify-content:space-between;gap:14px}.cw-teacher-class-head h2{margin:4px 0}.cw-roster-list{display:grid;gap:0}.cw-roster-row,.cw-student-search-result{padding:12px 0;border-top:1px solid var(--border)}.cw-roster-row>div,.cw-student-search-result>div{display:grid;gap:3px;min-width:0}.cw-grade-label{display:flex;align-items:center;gap:8px;font-size:.85rem}.cw-grade-label select{max-width:155px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px}.cw-student-search-result{margin-top:12px}.cw-settings-content> .dashboard-grid{margin-top:0}@media(max-width:650px){.cw-teacher-tools{grid-template-columns:1fr}.cw-teacher-class-head{align-items:flex-start;flex-direction:column}.cw-roster-row{align-items:flex-start;flex-direction:column}.cw-grade-label{width:100%;justify-content:space-between}}

/* Full-screen, projector-friendly classroom code view */
.cw-enlarged-class-code{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.5vh,28px);padding:32px;background:radial-gradient(ellipse at 20% 20%,rgba(139,92,246,.22),transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(59,130,246,.18),transparent 55%),var(--bg,#09090b);color:var(--text,#fff);text-align:center;overflow:auto}
.cw-enlarged-code-close{position:absolute;right:24px;top:18px;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.08);color:inherit;font-size:32px;line-height:1;cursor:pointer}
.cw-enlarged-code-logo{width:min(220px,42vw);max-height:100px;object-fit:contain}
.cw-enlarged-class-code h1{font-size:clamp(1.8rem,4vw,3.5rem);margin:0;overflow-wrap:anywhere}
.cw-enlarged-code-value{font:800 clamp(3.4rem,13vw,9rem)/1.05 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;padding:clamp(18px,4vw,42px) clamp(24px,6vw,72px);border:2px solid rgba(167,139,250,.7);border-radius:28px;background:rgba(139,92,246,.14);color:#fff;box-shadow:0 0 60px rgba(139,92,246,.2);cursor:pointer;overflow-wrap:anywhere}
.cw-enlarged-code-copy{margin:0;color:var(--muted,#aaa);font-size:clamp(.85rem,1.8vw,1.3rem);white-space:nowrap;max-width:100%;overflow-x:auto}
.cw-enlarged-code-teacher{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;font-size:clamp(1rem,2vw,1.35rem)}
.cw-enlarged-code-teacher>span{font-size:.8em;text-transform:uppercase;letter-spacing:.12em;color:var(--muted,#aaa)}


/* ClassWave v0.3.74 responsive consistency pass */
html{scrollbar-gutter:stable;}
body{overflow-x:hidden;}
#root{min-width:0;overflow-x:clip;}
.page,.wrap,.dashboard-grid,.dashboard-class-grid,.song-card-list,.cw-genre-song-grid{min-width:0;max-width:100%;}
.modal-backdrop{overscroll-behavior:contain;}
.modal{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;width:min(100%,520px);}
.modal-head{gap:12px;}
.modal-head h3{min-width:0;overflow-wrap:anywhere;}
.modal-close{flex:0 0 36px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:24px;line-height:1;}
.cw-genre-song-grid .song-card-footer,.cw-genre-song-grid .song-card-actions{display:flex;gap:8px;flex-wrap:wrap;}
.cw-genre-song-grid .song-card{min-width:0;}
@media(max-width:700px){
  .app-nav{position:sticky;top:0;z-index:100;background:var(--bg);}
  .app-nav-row{display:flex;flex-wrap:nowrap;min-width:0;gap:8px;padding-inline:12px;}
  .app-nav-primary{display:none!important;}
  .app-nav-actions{margin-left:auto;min-width:0;gap:6px;}
  .app-nav-menu{max-width:calc(100vw - 24px);left:12px;right:12px;}
  .wrap{width:100%;max-width:100%;padding-left:14px;padding-right:14px;}
  .page-head{align-items:flex-start;gap:14px;flex-direction:column;}
  .dashboard-head-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;}
  .dashboard-head-actions>*{min-width:0;width:100%;}
  .dashboard-grid,.dashboard-class-grid{grid-template-columns:minmax(0,1fr);}
  .song-card{min-width:0;}
  .song-card-list{grid-template-columns:minmax(0,1fr)!important;}
  .cw-genre-song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .modal-backdrop{align-items:center;padding:12px;overflow-y:auto;}
  .modal{padding:18px;width:100%;max-width:100%;max-height:calc(100dvh - 24px);border-radius:18px;}
  .modal-body{min-width:0;overflow-wrap:anywhere;}
  .modal-body input,.modal-body select,.modal-body textarea{max-width:100%;min-width:0;}
  .cw-enlarged-class-code{padding:64px 16px 24px;gap:18px;}
  .cw-enlarged-code-close{right:12px;top:10px;width:42px;height:42px;}
  .cw-enlarged-code-copy{white-space:normal;overflow-wrap:anywhere;}
}
@media(max-width:390px){.cw-genre-song-grid{grid-template-columns:minmax(0,1fr);} .dashboard-head-actions{grid-template-columns:minmax(0,1fr);}}

/* ClassWave v0.3.75 navigation, mobile spacing and event feedback */
@media(max-width:700px){
  .app-nav-row{justify-content:flex-start!important;padding-left:clamp(14px,4vw,24px)!important;padding-right:clamp(14px,4vw,24px)!important}
  .wordmark{margin-right:auto!important;flex:0 1 auto;min-width:0}
  .app-nav-actions{margin-left:0!important}
  .app-nav-menu{right:14px!important;left:auto!important;width:min(340px,calc(100vw - 28px))!important;max-width:calc(100vw - 28px)!important}
  .wrap{padding-left:clamp(16px,4vw,24px)!important;padding-right:clamp(16px,4vw,24px)!important}
  .page{padding-left:0!important;padding-right:0!important}
  .page button,.page a,.page input,.page select,.page textarea,.modal button,.modal input,.modal select,.modal textarea{max-width:100%;min-width:0;box-sizing:border-box}
  .page-head,.card,.event-layout,.event-side,.event-track-row,.event-track-copy{min-width:0;max-width:100%}
  .event-track-row{overflow:hidden}
  .event-track-copy strong,.event-track-copy span{overflow-wrap:anywhere}
  .app-nav-menu{max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain}
}
@media(min-width:701px){.app-nav-row{justify-content:flex-start!important;padding-left:clamp(18px,3vw,42px)!important;padding-right:clamp(18px,3vw,42px)!important}.wordmark{flex:0 0 auto}.app-nav-primary{margin-left:clamp(18px,3vw,42px)!important}.app-nav-actions{margin-left:auto!important}}
.dashboard-playlist-grid,.playlist-dashboard-grid,.cw-playlist-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:900px){.dashboard-playlist-grid,.playlist-dashboard-grid,.cw-playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.dashboard-playlist-grid,.playlist-dashboard-grid,.cw-playlist-grid{grid-template-columns:minmax(0,1fr)!important}}
.cw-event-added-toast{position:fixed;z-index:12000;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid color-mix(in srgb,#22c55e 50%,var(--border));border-radius:999px;background:var(--surface-raised,var(--surface));color:var(--text);box-shadow:0 12px 36px rgba(0,0,0,.24);font-weight:700;white-space:nowrap;animation:cw-toast-in .18s ease-out}
@keyframes cw-toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* Dashboard playlist spaces: four cards across on desktop. */
.dashboard-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch}
.dashboard-class-grid>.cw-dual-section-title{grid-column:1/-1}
@media(max-width:1050px){.dashboard-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.dashboard-class-grid{grid-template-columns:minmax(0,1fr)!important}}

/* ClassWave v0.3.79: consistent safe gutters so page content never hugs viewport edges. */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(24px,4vw,48px)!important;}
.app-nav-row{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(24px,4vw,48px)!important;}
.page{padding-inline:0!important;}
.page>*{min-width:0;max-width:100%;}
.page :is(h1,h2,h3,p,label,.eyebrow){overflow-wrap:anywhere;}
.page :is(button,a,input,select,textarea){max-width:100%;}
#root{overflow-x:clip;}
@media(max-width:700px){
  .wrap{padding-inline:22px!important;}
  .app-nav-row{padding-inline:22px!important;}
  .page{padding-inline:0!important;}
  .page-head,.page-head-actions{max-width:100%;}
  .page-head-actions{flex-wrap:wrap;}
  .page :is(button,a){max-width:100%;}
}
@media(max-width:390px){
  .wrap{padding-inline:18px!important;}
  .app-nav-row{padding-inline:18px!important;}
}

/* ClassWave v0.3.80: enforce visible safe gutters on phones and tablets.
   Earlier .page padding reset overrode the .wrap gutters on app pages. */
@media (max-width: 1024px) {
  .wrap,
  .wrap.page,
  .page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(20px, 4.5vw, 40px) !important;
    padding-right: clamp(20px, 4.5vw, 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main > .page,
  main > .wrap,
  #root main .wrap.page {
    padding-left: clamp(20px, 4.5vw, 40px) !important;
    padding-right: clamp(20px, 4.5vw, 40px) !important;
  }
  .page > *, .page .card, .page .page-head,
  .page .event-layout, .page .event-grid,
  .page .dashboard-grid, .page .song-card-list {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .page img, .page video, .page iframe { max-width: 100%; }
  .page :is(input, select, textarea, button, .btn) { min-width: 0; }
}
@media (max-width: 700px) {
  .wrap, .wrap.page, .page,
  main > .page, main > .wrap, #root main .wrap.page {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
@media (max-width: 380px) {
  .wrap, .wrap.page, .page,
  main > .page, main > .wrap, #root main .wrap.page {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}


/* ClassWave v0.3.82: real viewport gutters for touch devices, including iPad widths.
   Put the safe area on the main content container so nested .page rules cannot cancel it. */
@media (max-width: 1180px) {
  main {
    box-sizing: border-box !important;
    padding-left: clamp(24px, 5vw, 56px) !important;
    padding-right: clamp(24px, 5vw, 56px) !important;
  }
  main > .wrap,
  main > .page,
  main > .wrap.page,
  main #root .wrap,
  main #root .page {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main .page > *, main .page .card, main .page .page-head,
  main .page .event-layout, main .page .event-grid {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 700px) {
  main { padding-left: 22px !important; padding-right: 22px !important; }
}
@media (max-width: 380px) {
  main { padding-left: 18px !important; padding-right: 18px !important; }
}
.event-playlist-duration { white-space: nowrap; }
@media (max-width: 560px) {
  .song-list-head { flex-wrap: wrap; align-items: center; gap: 9px; }
  .event-playlist-duration { order: 3; }
  .song-list-head > .btn { flex: 1 1 100%; }
}

/* v0.3.84: stable page canvas while scrolling; avoid the growing translucent
   top band produced by fixed gradient backgrounds on mobile browsers. */
html, body, #root {
  background-color: var(--bg, #080809) !important;
}
html { background-image: none !important; }
body {
  background: var(--bg, #080809) !important;
  background-image: none !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
  min-height: 100dvh;
}
:root[data-theme='dark'] body { background: #080809 !important; }

/* v0.3.84: Live Lyrics is an opaque viewport takeover, not a blurred sheet.
   Its own artwork/gradient remains visible, but the app and navigation below
   it can never bleed through at the top edge or during viewport scrolling. */
.full-player-backdrop.is-lyrics-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #08080c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  overscroll-behavior: none !important;
}
.full-player-backdrop.is-lyrics-fullscreen .full-player.is-lyrics-fullscreen {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #08080c !important;
  color: #fff !important;
  opacity: 1;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  isolation: isolate !important;
}
.full-player-backdrop.is-lyrics-fullscreen .full-player-body,
.full-player-backdrop.is-lyrics-fullscreen .live-lyrics,
.full-player-backdrop.is-lyrics-fullscreen .live-lyrics-stage {
  background-color: #08080c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.full-player-backdrop.is-lyrics-fullscreen .full-player-body {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.full-player-backdrop.is-lyrics-fullscreen .live-lyrics {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #08080c !important;
}
.full-player-backdrop.is-lyrics-fullscreen .live-lyrics::before {
  z-index: 0 !important;
  pointer-events: none !important;
}
.full-player-backdrop.is-lyrics-fullscreen .live-lyrics-art-backdrop {
  z-index: 0 !important;
  pointer-events: none !important;
}
.full-player-backdrop.is-lyrics-fullscreen .live-lyrics-stage {
  z-index: 1 !important;
}
.full-player-backdrop.is-lyrics-fullscreen .full-player-collapse {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  z-index: 2147483001 !important;
  background: rgba(8,8,12,.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* v0.3.87: keep the floating minibar above fullscreen Live Lyrics, then
   fade it and the close control away together after five seconds of inactivity. */
body.cw-live-lyrics-open .now-playing-bar {
  position: fixed !important;
  z-index: 2147483002 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity .48s cubic-bezier(.2,.7,.2,1), transform .48s cubic-bezier(.2,.7,.2,1) !important;
}
body.cw-live-lyrics-controls-hidden .now-playing-bar {
  opacity: 0 !important;
  transform: translate(-50%, 105%) !important;
  pointer-events: none !important;
}
.full-player-backdrop.is-lyrics-fullscreen .full-player-collapse {
  opacity: 1;
  visibility: visible;
  transition: opacity .48s cubic-bezier(.2,.7,.2,1), visibility .48s;
}
.full-player-backdrop.is-lyrics-fullscreen.lyrics-cursor-hidden .full-player-collapse {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* v0.3.92: keep the event-song editor and its save actions above the floating mini-player. */
.modal-backdrop:has(.event-track-edit-form){
  z-index:120;
  padding-bottom:max(20px,env(safe-area-inset-bottom));
}
.modal:has(.event-track-edit-form){
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:calc(100dvh - 40px);
  overflow:hidden;
}
.modal:has(.event-track-edit-form) .modal-body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-bottom:4px;
}
.event-track-edit-form{padding-bottom:2px;}
.event-edit-form-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  padding:12px 0 max(4px,env(safe-area-inset-bottom));
  margin-top:4px;
  background:var(--bg);
  border-top:1px solid var(--line);
}
@media(max-width:700px){
  .modal-backdrop:has(.event-track-edit-form){padding:10px 10px max(10px,env(safe-area-inset-bottom));}
  .modal:has(.event-track-edit-form){max-height:calc(100dvh - 20px);}
  .event-edit-form-actions{gap:10px;}
  .event-edit-form-actions>*{flex:1 1 0;min-width:0;}
}

/* Event scheduling and playlist settings */
.dashboard-today-events { display: grid; gap: 12px; margin: 0 0 22px; }
.dashboard-today-event-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dashboard-today-event-card h2 { margin: 4px 0; }
.event-settings-button { min-width: 42px; font-size: 1.15rem; }
.event-settings-form { display: grid; gap: 18px; }
.event-settings-toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.event-settings-toggle input { margin-top: 4px; }
.event-settings-toggle > span { display: grid; gap: 4px; }
@media (max-width: 600px) {
  .dashboard-today-event-card { align-items: stretch; flex-direction: column; }
  .dashboard-today-event-card .btn { width: 100%; }
  .event-settings-button { min-width: 40px; }
}

/* v0.3.97 - lyrics: instrumental-break dots + snappier line highlight */
.lk-karaoke-scroll{scroll-behavior:auto!important;}
.lk-scroll-line{transition:color .14s ease,opacity .35s ease,transform .45s cubic-bezier(.22,.61,.36,1)!important;}
.lk-gap-dots{display:flex;gap:9px;align-items:center;justify-content:flex-start;height:0;padding:0 4px;overflow:hidden;opacity:0;transform:translateY(6px);transition:height .6s cubic-bezier(.22,.61,.36,1),opacity .45s ease,transform .6s cubic-bezier(.22,.61,.36,1);}
.lk-gap-dots.is-active{height:38px;opacity:1;transform:none;}
.lk-gap-dot{width:clamp(8px,1.2vw,12px);height:clamp(8px,1.2vw,12px);border-radius:50%;background:#fff;opacity:calc(.28 + var(--lk-dot-fill,0) * .72);transform:scale(calc(.85 + var(--lk-dot-fill,0) * .25));box-shadow:0 0 calc(var(--lk-dot-fill,0) * 10px) rgba(255,255,255,.55);}

/* v0.3.97 - add-to-homescreen popup */
.a2hs-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(8,6,16,.62);display:flex;align-items:flex-end;justify-content:center;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));overflow-y:auto;}
.a2hs-card{position:relative;width:100%;max-width:420px;max-height:calc(100dvh - 24px);overflow-y:auto;background:var(--surface,#fff);color:var(--text);border-radius:20px;padding:22px 18px 18px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.a2hs-card h2{margin:0 36px 14px 0;font-size:1.1rem;line-height:1.3;}
.a2hs-close{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:none;color:var(--text);font-size:1.6rem;cursor:pointer;}
.a2hs-steps{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px;}
.a2hs-steps li{display:flex;gap:12px;align-items:flex-start;}
.a2hs-steps p{margin:2px 0 0;font-size:.88rem;opacity:.75;}
.a2hs-num{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent,#7C3AED);color:#fff;font-weight:700;font-size:.85rem;}
.a2hs-note{font-size:.78rem;opacity:.65;margin:0 0 12px;}
.a2hs-ok{width:100%;min-height:46px;}

/* v0.3.97 - Edit Song MP3 picker */
.event-mp3-picker{display:flex;align-items:center;gap:8px;min-width:0;}
.event-mp3-picker .btn{flex:0 0 auto;min-height:44px;}
.event-mp3-name{flex:1 1 auto;min-width:0;padding:10px 12px;border:1px solid var(--border,rgba(128,128,128,.35));border-radius:10px;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7;}
.event-mp3-name.has-file{opacity:1;font-weight:600;}
@media(max-width:640px){.event-mp3-picker{flex-wrap:wrap}.event-mp3-name{flex-basis:100%;order:3;white-space:normal;overflow-wrap:anywhere}}

/* v0.3.97 - Event settings + danger zone */
.event-settings-form{display:grid;gap:18px;}
.event-settings-section{display:grid;gap:12px;}
.event-settings-heading{margin:0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;}
.event-settings-form .field-input{width:100%;max-width:100%;min-height:46px;box-sizing:border-box;}
.event-settings-toggle{display:flex;gap:12px;align-items:flex-start;min-height:44px;}
.event-settings-toggle input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;}
.event-settings-toggle>span{display:grid;gap:2px;min-width:0;}
.event-settings-actions{position:sticky;bottom:-18px;background:var(--surface,inherit);padding:10px 0 4px;}
.event-settings-actions .btn{min-height:46px;flex:1 1 0;}
.event-danger-zone{margin-top:20px;padding:14px;border:1px solid rgba(220,38,38,.55);border-radius:14px;background:rgba(220,38,38,.07);display:grid;gap:10px;}
.event-danger-zone .event-settings-heading{color:#dc2626;opacity:1;}
.event-danger-zone .btn{width:100%;min-height:46px;}
.event-delete-confirm{display:grid;gap:10px;}
.event-delete-confirm p{margin:0;}
.event-delete-confirm .event-edit-form-actions{display:flex;gap:8px;flex-wrap:wrap;}
.event-delete-confirm .btn{flex:1 1 140px;}

/* v0.3.97 - dashboard action tiles (mobile) */
@media(max-width:700px){
  .dashboard-head-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;grid-auto-flow:column;gap:8px;width:100%;}
  .dashboard-head-actions .dash-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:84px;min-height:84px;padding:8px 6px;text-align:center;box-sizing:border-box;width:100%;}
  .dash-tile-icon{font-size:1.4rem;line-height:1;height:1.4rem;display:block;}
  .dash-tile-label{font-size:.82rem;font-weight:600;line-height:1.15;display:block;}
}
@media(max-width:340px){.dashboard-head-actions{grid-auto-flow:row!important;grid-template-columns:minmax(0,1fr)!important}}
@media(min-width:701px){.dash-tile-icon{display:none}.dash-tile{display:inline-flex}}

/* v0.3.97 - Now Playing sheet cleanup: plain blurred-artwork background, tidy controls */
.full-player-backdrop:not(.is-lyrics-fullscreen){background:#0b0b10!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player{background:#0b0b10!important;isolation:isolate;overflow-x:hidden!important;overflow-y:auto!important;}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player::before{content:'';position:absolute;inset:-60px;z-index:-1;background:var(--player-artwork) center/cover no-repeat;filter:blur(48px) brightness(.55) saturate(1.2);opacity:1;transform:none;}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player::after{content:none!important;}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-main{width:min(430px,100%);gap:14px!important;}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-copy{margin:0!important;min-width:0;overflow-wrap:anywhere;}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-title{margin:0;}
.full-player-backdrop:not(.is-lyrics-fullscreen) .full-player-times{margin:-6px 0 0!important;font-size:.78rem;color:rgba(255,255,255,.7);}
.fp-transport{display:flex;align-items:center;justify-content:center;gap:clamp(22px,8vw,40px);margin-top:4px;}
.fp-extras{display:flex;align-items:center;justify-content:center;gap:clamp(8px,4vw,22px);}
.fp-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border:0;padding:0;margin:0;background:transparent;color:#fff;cursor:pointer;border-radius:50%;transition:transform .15s ease,background .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent;}
.fp-btn svg{display:block;pointer-events:none;flex:none;color:inherit;}
.fp-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.fp-btn:disabled{opacity:.35;cursor:not-allowed;}
.fp-skip{width:56px;height:56px;color:#fff;}
.fp-skip svg{width:30px;height:30px;}
.fp-skip:hover:not(:disabled){background:rgba(255,255,255,.14);}
.fp-play{width:72px;height:72px;background:#fff;color:#111;box-shadow:0 8px 28px rgba(0,0,0,.35);}
.fp-play svg{width:32px;height:32px;}
.fp-play:hover{transform:scale(1.05);}
.fp-play:active,.fp-skip:active:not(:disabled){transform:scale(.94);}
.fp-extra{width:44px;height:44px;color:rgba(255,255,255,.78);}
.fp-extra svg{width:22px;height:22px;}
.fp-extra:hover{background:rgba(255,255,255,.12);color:#fff;}
.fp-extra.is-active{background:rgba(255,255,255,.2);color:#fff;}
.full-player-volume-row{max-width:100%;margin:0!important;box-sizing:border-box;}
.full-player-add-current{align-self:center;}
@media(max-width:380px){.fp-skip{width:48px;height:48px}.fp-play{width:64px;height:64px}.fp-extra{width:40px;height:40px}}

/* v0.3.97 - untimed lyrics are shown as a readable, scrollable transcript */
.live-lyrics-content .lk-plain,.lk-plain{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;line-height:1.7;}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-plain{height:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:8vh 14px 14vh;color:#fff;font-size:clamp(1.1rem,2.1vw,1.55rem);font-weight:600;}

/* v0.3.97 - word-timed lyrics: white fill sweeps across each word as it is sung.
   Uses background-size (a plain var(), no @property needed) so it works everywhere. */
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-scroll-line .lk-word{
  display:inline-block;opacity:1!important;filter:none!important;transition:none!important;text-shadow:none!important;transform:none!important;
  background-image:linear-gradient(#fff,#fff),linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.42))!important;
  background-repeat:no-repeat!important;
  background-size:var(--lk-word-progress,0%) 100%,100% 100%!important;
  background-clip:text!important;-webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}
.full-player.is-lyrics-fullscreen .live-lyrics-content .lk-scroll-line .lk-word.is-ended{background-size:100% 100%,100% 100%!important;}

/* Account security and sign-in management */
.cw-security-page{max-width:900px}.cw-security-card{margin-bottom:16px}.cw-security-card h2{margin:5px 0 7px}.cw-security-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.cw-security-count{white-space:nowrap;border:1px solid var(--border);border-radius:999px;padding:6px 11px;color:var(--muted);font-size:.78rem}.cw-security-list{display:grid;margin:10px 0 16px}.cw-security-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--border)}.cw-security-method-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:13px;background:var(--surface-2,var(--surface));font-weight:800;color:var(--text)}.cw-security-method-copy{display:grid;gap:3px;min-width:0;flex:1}.cw-security-method-copy strong{font-size:.95rem}.cw-security-form{display:grid;gap:9px;max-width:520px;margin-top:14px}.cw-security-form .btn{justify-self:start;margin-top:4px}.cw-security-inline-verify{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.cw-security-inline-verify p{flex-basis:100%;margin:0}.cw-security-inline-verify .field-input{max-width:280px}.cw-security-alert{padding:13px 16px;border-radius:12px;margin:0 0 16px;font-size:.9rem}.cw-security-error{background:rgba(220,70,70,.09);border:1px solid rgba(220,70,70,.25);color:var(--text)}.cw-security-success{background:rgba(50,170,110,.09);border:1px solid rgba(50,170,110,.25);color:var(--text)}.cw-security-note{margin-top:12px}.cw-totp-enrollment{margin-top:18px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.cw-totp-enrollment h3{margin:0 0 6px}.cw-totp-qr{display:block;width:190px;height:190px;object-fit:contain;background:#fff;border-radius:10px;padding:8px;margin:16px auto}.cw-totp-secret{display:grid;gap:5px;overflow-wrap:anywhere}.cw-totp-secret code{font-size:.9rem;padding:9px;background:var(--surface-2,var(--surface));border-radius:8px}.cw-security-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}@media(max-width:600px){.cw-security-heading{flex-direction:column}.cw-security-row{gap:9px}.cw-security-row .btn{padding:8px 10px}.cw-security-inline-verify{align-items:stretch;flex-direction:column}.cw-security-inline-verify .field-input{max-width:none;width:100%}.cw-security-inline-verify .btn{align-self:flex-start}}

.cw-teacher-class-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cw-teacher-class-actions .btn{white-space:nowrap}@media(max-width:650px){.cw-teacher-class-actions{width:100%}.cw-teacher-class-actions .btn{flex:1}}

.cw-student-school-classes{margin:20px 0 26px}.cw-student-school-classes .page-head{margin-bottom:12px}.cw-student-school-class-card h3{margin:8px 0 5px}


/* v0.3.100 - unified settings navigation and responsive security layout */
.cw-settings-unified{min-width:0;max-width:1240px;overflow-x:clip}
.cw-settings-tabs{display:flex;align-items:center;gap:6px;padding:5px;margin:0 0 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface);width:max-content;max-width:100%;box-sizing:border-box}
.cw-settings-tabs button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;white-space:nowrap}
.cw-settings-tabs button:hover{color:var(--text);background:var(--surface-2,var(--surface))}
.cw-settings-tabs button.is-active{color:var(--text);background:var(--surface-2,var(--surface));box-shadow:0 1px 5px rgba(0,0,0,.12)}
.cw-security-embedded{max-width:none;padding:0;margin:0;min-width:0}
.cw-security-embedded>.page-head{display:none}
.cw-security-page,.cw-security-card,.cw-security-form,.cw-security-row,.cw-security-inline-verify{min-width:0;max-width:100%;box-sizing:border-box}
.cw-security-card .field-input{width:100%;max-width:100%;box-sizing:border-box}
.cw-security-row .btn{flex:0 0 auto}
.cw-security-card h2,.cw-security-card p,.cw-security-method-copy{overflow-wrap:anywhere}
.cw-security-inline-verify .field-input{flex:1 1 220px;min-width:0}
@media(max-width:600px){.cw-settings-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}.cw-settings-tabs button{white-space:normal;padding:10px 8px;font-size:.84rem}.cw-security-page{padding-left:0;padding-right:0}.cw-security-row{flex-wrap:wrap}.cw-security-row .cw-security-method-copy{flex:1 1 calc(100% - 65px)}.cw-security-row>.btn{margin-left:53px}.cw-security-card{padding:16px}.cw-security-form .btn,.cw-security-actions .btn{max-width:100%}}

/* v0.3.104: center artist pages and give artist branding a proper hero scale. */
.artist-page {
  box-sizing: border-box;
  width: min(100%, 1600px);
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3.2vw, 48px);
}
.artist-page > .page-head {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  align-items: center;
}
.artist-page-header {
  width: calc(100% + 2 * clamp(16px, 3.2vw, 48px));
  margin-left: calc(-1 * clamp(16px, 3.2vw, 48px));
  margin-right: calc(-1 * clamp(16px, 3.2vw, 48px));
}
.artist-page-hero-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: inherit;
  margin-inline: auto;
  text-align: center;
}
.artist-page-logo,
.artist-page-logo-centered {
  display: block;
  width: min(680px, 84vw);
  max-width: min(680px, 84vw);
  height: auto;
  max-height: clamp(120px, 25vw, 280px);
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}
.artist-page-songs-head,
.artist-release-filters,
.artist-release,
.artist-song-list {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .artist-page { padding-inline: 14px; }
  .artist-page-header {
    width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
  }
  .artist-page-logo,
  .artist-page-logo-centered {
    width: min(520px, 88vw);
    max-width: 88vw;
    max-height: 190px;
  }
}