/* ---------- Theme ----------
   Sonora 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: #FFFFFF;
  --surface: #F6F2FC;
  --surface-raised: #FFFFFF;
  --text: #241B3B;
  --text-dim: #675C82;
  --accent: #7C3AED;
  --accent-dim: #6425D0;
  --accent-contrast: #FFFFFF;
  --green: #1E9E63;
  --amber: #B4740E;
  --red: #C7433A;
  --line: rgba(124,58,237,0.16);
  --shadow: 0 18px 40px -22px rgba(124,58,237,0.35);
  --radius: 14px;
  color-scheme: light;
}

:root[data-theme='dark']{
  --bg: #150F26;
  --surface: #1D1533;
  --surface-raised: #221A3B;
  --text: #F3EEFF;
  --text-dim: #B5A9D6;
  --accent: #A78BFA;
  --accent-dim: #8B6FE0;
  --accent-contrast: #1A1230;
  --green: #5FDB9A;
  --amber: #F0B559;
  --red: #F0837A;
  --line: rgba(243,238,255,0.13);
  --shadow: 0 18px 40px -18px rgba(0,0,0,0.55);
  --radius: 14px;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--surface); }

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  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:'Space Grotesk',sans-serif; font-size:.72rem; padding:7px 10px; opacity:.82; }
.landing-nav-actions .nav-cta:not(.nav-audience-link){ font-family:'Space Grotesk',sans-serif; font-size:.76rem; padding:7px 12px; font-weight:600; }
.wordmark{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces', 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:'Space Grotesk', 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:'Fraunces', 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:'Space Grotesk', 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 .sonora-loader-status/-file) instead
   of inheriting the body's Space Grotesk - 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
   (.sonora-loader-progress / .sonora-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:'Space Grotesk',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:'Space Grotesk',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:'Space Grotesk',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:'Fraunces', 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:'Space Grotesk', 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 .sonora-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 .sonora-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:'Fraunces', 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:'Space Grotesk', 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:'Fraunces', 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:'Fraunces', 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:'Space Grotesk', 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:'Space Grotesk', 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:'Space Grotesk', 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:'Fraunces', 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:'Fraunces', 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:'Space Grotesk', 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:'Space Grotesk', 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 Sonora, 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; }
.search-all-button{ white-space:nowrap; }

@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; }
  .search-all-button{ width:100%; }
}

/* 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 Sonora, 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.sonora-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}
}


/* SONORA mobile-first visual layer */
:root { --sonora-bg:#101014; --sonora-panel:#19191f; --sonora-text:#f7f5f8; --sonora-muted:#aaa7b2; --sonora-accent:#c8f169; --sonora-line:rgba(255,255,255,.09); }
html, body { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { touch-action: manipulation; }
button, .nav-cta, .app-nav-link { min-height:42px; }
.sonora-landing { min-height:100svh; overflow:hidden; color:var(--sonora-text); background:radial-gradient(ellipse at 78% 30%,rgba(118,95,155,.16),transparent 38%),var(--sonora-bg); font-family:'Space Grotesk',system-ui,sans-serif; }
.sonora-landing-header { width:min(1180px,100%); margin:auto; padding:20px clamp(18px,5vw,54px); display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:2; }
.sonora-brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:1.45rem; font-weight:700; letter-spacing:-.07em; }
.sonora-brand-mark { width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:var(--sonora-accent);color:#161713;font-size:1.4rem; }
.sonora-header-actions { display:flex;align-items:center;gap:10px; }
.sonora-login,.sonora-signup { min-height:42px; display:inline-flex;align-items:center;justify-content:center;padding:0 17px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem; }
.sonora-login { color:inherit;border:1px solid var(--sonora-line); }
.sonora-signup { color:#171910;background:var(--sonora-accent); }
.sonora-hero { width:min(1180px,100%); min-height:590px; margin:auto; padding:65px clamp(22px,7vw,82px) 55px; display:grid;grid-template-columns:1fr .92fr;align-items:center;gap:35px;position:relative; }
.sonora-hero-copy { position:relative;z-index:1;max-width:570px; }
.sonora-eyebrow { display:inline-flex;align-items:center;gap:9px;color:#c6c2cf;font-size:.72rem;font-weight:700;letter-spacing:.16em; }
.sonora-eyebrow span { width:7px;height:7px;background:var(--sonora-accent);border-radius:50%;box-shadow:0 0 18px #c8f169; }
.sonora-hero h1 { margin:23px 0 18px;font-size:clamp(3.6rem,7.5vw,6.8rem);line-height:.91;letter-spacing:-.085em;font-weight:700; }
.sonora-hero h1 em { color:var(--sonora-accent);font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.07em; }
.sonora-hero-copy>p { max-width:430px;color:var(--sonora-muted);font-size:1.08rem;line-height:1.7; }
.sonora-hero-actions { display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px; }
.sonora-signup-large { min-height:52px;padding:0 23px;gap:18px; }
.sonora-text-link { color:#dedbe5;text-decoration:none;font-size:.88rem; }
.sonora-visual { min-height:420px;position:relative;display:grid;place-items:center; }
.sonora-record { width:min(34vw,360px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle at center,#17171c 0 2px,#24232b 3px 4px,#15151a 5px 7px);box-shadow:0 28px 90px #0009, inset 0 0 0 1px #ffffff13;transform:rotate(-13deg); }
.sonora-record-label { width:31%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#d5f78c,#9fbf53);color:#23271a;font-size:2.5rem;font-weight:700; }
.sonora-record-label span { font-size:1.1rem; }
.sonora-floating-card { position:absolute;left:0;bottom:48px;display:flex;align-items:center;gap:12px;padding:11px 14px 11px 11px;background:#24232bdc;border:1px solid #ffffff1a;border-radius:18px;backdrop-filter:blur(18px);box-shadow:0 18px 60px #0006; }
.sonora-cover { width:56px;height:56px;border-radius:11px;background:linear-gradient(145deg,#c9ef7d,#6c7760 52%,#22252a);display:flex;flex-direction:column;justify-content:space-between;padding:7px;color:#172013;font-size:.55rem;font-weight:700; }
.sonora-cover b { align-self:flex-end;font-size:1.6rem;line-height:1; }
.sonora-track-meta { display:flex;flex-direction:column;gap:5px;max-width:180px; }
.sonora-track-meta strong { font-size:.85rem; }.sonora-track-meta span { color:#aaa7b2;font-size:.7rem; }
.sonora-play-dot { display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sonora-accent);color:#151810;font-size:.7rem; }
.sonora-sound-wave { position:absolute;right:0;top:50%;display:flex;align-items:center;gap:4px;transform:translateY(-50%);opacity:.7; }
.sonora-sound-wave i { display:block;width:3px;height:var(--bar);border-radius:9px;background:linear-gradient(#c8f169,#8176a2); }
.sonora-orb { position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none; }.sonora-orb-one { width:260px;height:260px;right:10%;top:5%;background:#8d75b30b;border:1px solid #ffffff0c; }.sonora-orb-two { width:110px;height:110px;left:47%;bottom:3%;background:#c8f16909;border:1px solid #c8f16918; }
.sonora-features { width:min(1040px,calc(100% - 40px));margin:0 auto;padding:25px 0 48px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--sonora-line); }
.sonora-features>div { display:flex;flex-direction:column;gap:9px; }.sonora-features span { color:var(--sonora-accent);font-size:.72rem;letter-spacing:.12em; }.sonora-features strong { font-size:1.05rem; }.sonora-features p { margin:0;color:var(--sonora-muted);font-size:.86rem;line-height:1.6; }
.sonora-footer { width:min(1040px,calc(100% - 40px));margin:auto;padding:20px 0 28px;border-top:1px solid var(--sonora-line);display:flex;justify-content:space-between;color:var(--sonora-muted);font-size:.78rem; }.sonora-footer span:first-child { color:var(--sonora-text);font-weight:700; }
/* Hide classroom scoring / screening badges in the music-first interface. */
.song-rating,.song-card-score,.score-num,.score-bar-row,.score-why,.status-pill,.flagged-terms,.moderation-score { display:none !important; }
@media(max-width:760px) {
 .sonora-landing-header { padding:15px 17px; }.sonora-brand {font-size:1.3rem}.sonora-brand-mark{width:31px;height:31px}.sonora-header-actions{gap:7px}.sonora-login,.sonora-signup{padding:0 12px;min-height:39px;font-size:.82rem}.sonora-header-actions .theme-toggle{display:none}
 .sonora-hero { min-height:auto;padding:57px 23px 32px;grid-template-columns:1fr;gap:18px; }
 .sonora-hero h1 {font-size:clamp(3.6rem,17vw,5.5rem);margin-top:19px}.sonora-hero-copy>p{font-size:1rem;line-height:1.65}.sonora-hero-actions{align-items:flex-start;gap:15px;flex-direction:column}.sonora-visual{min-height:300px;margin-top:0}.sonora-record{width:min(72vw,290px)}.sonora-floating-card{left:0;bottom:12px}.sonora-sound-wave{right:1px;top:40%}.sonora-features{grid-template-columns:1fr;gap:21px;padding:25px 0 32px}.sonora-features>div{display:grid;grid-template-columns:34px 1fr;column-gap:10px}.sonora-features p{grid-column:2}.sonora-footer{padding-bottom:22px}
 .app-nav { padding-top:env(safe-area-inset-top); }.app-nav-row { gap:8px; }.wordmark { font-size:1rem; }.wordmark-logo { max-width:28px;max-height:28px; }.app-nav-primary { display:none !important; }.app-nav-actions { gap:6px; }.app-nav-menu { max-width:calc(100vw - 20px); }
 .now-playing-bar { position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;z-index:1000;border-radius:16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:8px 10px;box-shadow:0 8px 35px #0008;backdrop-filter:blur(22px); }.now-playing-hit{min-width:0;gap:9px}.now-playing-label{display:none}.now-playing-art{width:42px;height:42px;flex:0 0 42px}.now-playing-info{min-width:0}.now-playing-title,.now-playing-artist{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-playing-title{font-size:.82rem}.now-playing-artist{font-size:.72rem}.now-playing-scrubber{display:none}.now-playing-toggle,.now-playing-skip,.now-playing-lyrics,.now-playing-close{min-width:38px;min-height:42px;padding:0 8px}.now-playing-close{display:none}
 .app-main,.page-content,.main-content { padding-left:14px !important;padding-right:14px !important; }.card,.panel,.modal { max-width:100%; }.modal { width:calc(100vw - 24px);max-height:calc(100svh - 24px);overflow:auto; }
 body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}
@media(max-width:380px){.sonora-login{display:none}.sonora-hero{padding-left:18px;padding-right:18px}.sonora-track-meta{max-width:140px}.sonora-floating-card{gap:8px;padding:8px}.sonora-cover{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.sonora-landing *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}