/* ============================================================
   ELEVATED REMEDIES — Neon-Cosmic Design System
   ============================================================ */
:root{
  /* Type scale */
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,5rem);
  --text-hero:clamp(3rem,.5rem + 7vw,7.5rem);

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Radius */
  --radius-sm:.5rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-full:9999px;
  --transition-interactive:220ms cubic-bezier(.16,1,.3,1);

  /* Content widths */
  --content-narrow:680px;--content-default:1000px;--content-wide:1240px;

  /* Fonts */
  --font-display:'Clash Display','Satoshi','Helvetica Neue',sans-serif;
  --font-body:'Satoshi','Inter','Helvetica Neue',sans-serif;

  /* ---- NEON-COSMIC PALETTE (dark-first) ---- */
  --color-bg:#06040f;            /* deep space black-violet */
  --color-bg-2:#0a0718;
  --color-surface:#100a26;       /* card base */
  --color-surface-2:#15103099;   /* glass */
  --color-border:#2a2150;
  --color-border-glow:#5a3fd6;

  --color-text:#ECE9FB;
  --color-text-muted:#A99FD4;
  --color-text-faint:#6F6699;
  --color-text-inverse:#06040f;

  /* Neon accents from the logo */
  --neon-violet:#8B5CFF;
  --neon-violet-2:#A77BFF;
  --neon-blue:#38B6FF;
  --neon-cyan:#39E0FF;
  --neon-magenta:#FF4FD8;
  --neon-pink:#FF5FA8;
  --gold:#FFC861;
  --gold-2:#FFE3A1;

  --color-primary:#8B5CFF;
  --color-primary-hover:#A77BFF;

  /* Signature gradients */
  --grad-neon:linear-gradient(100deg,#38B6FF 0%,#8B5CFF 45%,#FF4FD8 100%);
  --grad-neon-soft:linear-gradient(100deg,#38B6FF22,#8B5CFF22,#FF4FD822);
  --grad-violet:linear-gradient(135deg,#8B5CFF,#FF4FD8);
  --grad-gold:linear-gradient(120deg,#FFE3A1,#FFC861);
  --grad-text:linear-gradient(100deg,#39E0FF,#A77BFF 50%,#FF5FA8);

  /* Glows */
  --glow-violet:0 0 40px -8px #8B5CFFaa;
  --glow-blue:0 0 40px -8px #38B6FFaa;
  --glow-magenta:0 0 40px -8px #FF4FD8aa;
  --shadow-card:0 20px 60px -24px #000c, 0 0 0 1px var(--color-border);
  --shadow-card-hover:0 32px 80px -28px #000e, 0 0 0 1px var(--color-border-glow), 0 0 60px -20px #8B5CFF88;

  /* per-artist accents (set on cards) */
  --accent:var(--neon-violet);
}

/* LIGHT MODE — a luminous "daylight nebula", still cosmic but bright */
[data-theme='light']{
  --color-bg:#F4F1FF;
  --color-bg-2:#EDE8FF;
  --color-surface:#FFFFFF;
  --color-surface-2:#FFFFFFcc;
  --color-border:#E0D8FF;
  --color-border-glow:#A77BFF;
  --color-text:#1A123A;
  --color-text-muted:#5B5180;
  --color-text-faint:#9A91C0;
  --color-text-inverse:#FFFFFF;
  --color-primary:#7A3FE6;
  --color-primary-hover:#6A2FD6;
  --shadow-card:0 18px 50px -28px #2a1a6633, 0 0 0 1px var(--color-border);
  --shadow-card-hover:0 30px 70px -30px #2a1a6644, 0 0 0 1px var(--color-border-glow), 0 0 50px -24px #8B5CFF55;
  --grad-neon-soft:linear-gradient(100deg,#38B6FF18,#8B5CFF18,#FF4FD818);
}

/* ============================ LAYOUT ============================ */
.wrap{width:min(100% - 2.5rem,var(--content-wide));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--content-narrow));margin-inline:auto}
section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.section-head{text-align:center;max-width:64ch;margin-inline:auto;margin-bottom:var(--space-12)}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--neon-cyan);margin-bottom:var(--space-4)}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--neon-cyan))}
.section-head .eyebrow{justify-content:center}
.section-head .eyebrow::after{content:"";width:28px;height:1px;background:linear-gradient(270deg,transparent,var(--neon-cyan))}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.h-display{font-size:var(--text-2xl);line-height:1.04}
.text-grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--color-text-muted)}
.lead{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.55}

/* ============================ BACKDROP ============================ */
body{position:relative;background:
  radial-gradient(1200px 700px at 80% -10%,#8B5CFF18,transparent 60%),
  radial-gradient(900px 600px at 0% 30%,#FF4FD810,transparent 60%),
  radial-gradient(1000px 800px at 100% 100%,#38B6FF12,transparent 60%),
  var(--color-bg)}
.starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5}
[data-theme='light'] .starfield{opacity:.25}

/* ============================ HEADER / NAV ============================ */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(1.3);
  background:color-mix(in oklab,var(--color-bg) 72%,transparent);
  border-bottom:1px solid var(--color-border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-3)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text)}
.brand-crest{width:46px;height:46px;border-radius:var(--radius-full);
  filter:drop-shadow(0 0 14px #8B5CFFaa)}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  letter-spacing:.02em;line-height:1}
.brand-name small{display:block;font-family:var(--font-body);font-weight:500;font-size:.62em;
  letter-spacing:.34em;text-transform:uppercase;color:var(--neon-cyan);margin-top:.25em}
.nav-links{display:flex;align-items:center;gap:var(--space-2);list-style:none}
.nav-links a{position:relative;text-decoration:none;color:var(--color-text-muted);
  font-size:var(--text-sm);font-weight:500;padding:.55rem .85rem;border-radius:var(--radius-full)}
.nav-links a:hover{color:var(--color-text)}
.nav-links a.active{color:#fff;background:color-mix(in oklab,var(--neon-violet) 18%,transparent)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-full);
  color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-toggle:hover{color:#fff;border-color:var(--color-border-glow);box-shadow:var(--glow-violet)}
.nav-toggle{display:none;width:42px;height:42px;place-items:center;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md)}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  padding:.95rem 1.6rem;border-radius:var(--radius-full);text-decoration:none;
  white-space:nowrap;border:1px solid transparent;line-height:1}
.btn-primary{color:#fff;background:var(--grad-violet);
  box-shadow:0 10px 30px -10px #8B5CFFcc, inset 0 0 0 1px #ffffff22}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px #FF4FD8cc, inset 0 0 0 1px #ffffff33}
.btn-ghost{color:var(--color-text);border-color:var(--color-border);
  background:color-mix(in oklab,var(--color-surface) 60%,transparent);backdrop-filter:blur(8px)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--color-border-glow);box-shadow:var(--glow-violet);color:#fff}
[data-theme='light'] .btn-ghost:hover{color:var(--color-primary)}
.btn-gold{color:#2a1a00;background:var(--grad-gold);box-shadow:0 10px 30px -12px #FFC861aa}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px #FFC861cc}
.btn-lg{padding:1.1rem 2rem;font-size:var(--text-base)}

/* ============================ HERO ============================ */
.hero{position:relative;padding-top:clamp(var(--space-16),10vw,var(--space-32));
  padding-bottom:clamp(var(--space-16),12vw,var(--space-32));overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;
  background-image:url('assets/img/hero_bg.jpg');background-size:cover;background-position:60% center;
  opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
[data-theme='light'] .hero-bg{opacity:.34;mix-blend-mode:luminosity}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,var(--color-bg) 98%)}
.hero-inner{max-width:46rem}
.hero h1{font-size:var(--text-hero);line-height:.95;letter-spacing:-.02em;margin-bottom:var(--space-6)}
.hero .lead{max-width:34rem;margin-bottom:var(--space-10)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero-stats{display:flex;gap:var(--space-10);margin-top:var(--space-16);flex-wrap:wrap}
.hero-stats .stat strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .stat span{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-faint)}

/* animated equalizer accent under hero */
.equalizer{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:var(--space-12)}
.equalizer span{width:5px;border-radius:3px;background:var(--grad-neon);
  animation:eq 1.1s ease-in-out infinite alternate;opacity:.85}
.equalizer span:nth-child(odd){animation-duration:.85s}
.equalizer span:nth-child(3n){animation-duration:1.35s}
@keyframes eq{from{height:8px}to{height:46px}}

/* ============================ ARTIST GRID ============================ */
.artist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6)}
.artist-card{position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);
  box-shadow:var(--shadow-card);isolation:isolate}
.artist-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.artist-card .cover{aspect-ratio:1;overflow:hidden}
.artist-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.artist-card:hover .cover img{transform:scale(1.06)}
.artist-card .cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,var(--color-surface) 99%)}
.artist-card .meta{position:relative;padding:var(--space-5) var(--space-6) var(--space-6);margin-top:-3.5rem}
.artist-card .genre{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:var(--space-2)}
.artist-card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.artist-card .tag{color:var(--color-text-muted);font-size:var(--text-sm)}
.artist-card .arrow{position:absolute;top:var(--space-4);right:var(--space-4);width:38px;height:38px;
  display:grid;place-items:center;border-radius:var(--radius-full);color:#fff;
  background:color-mix(in oklab,var(--accent) 30%,#0008);border:1px solid #ffffff33;
  opacity:0;transform:translateY(-4px);transition:var(--transition-interactive);z-index:3}
.artist-card:hover .arrow{opacity:1;transform:translateY(0)}
.artist-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:var(--transition-interactive)}
.artist-card:hover::before{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 60%,transparent),inset 0 0 50px -20px var(--accent)}

/* ============================ GLASS CARD / FEATURE ============================ */
.glass{background:var(--color-surface-2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.feature-band{position:relative;border-radius:var(--radius-xl);overflow:hidden;
  padding:clamp(var(--space-10),6vw,var(--space-24));text-align:center;
  background:var(--color-surface);box-shadow:var(--shadow-card)}
.feature-band::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(700px 400px at 30% 0%,#8B5CFF33,transparent 60%),
  radial-gradient(700px 400px at 80% 100%,#FF4FD833,transparent 60%)}
.feature-band>*{position:relative;z-index:1}
.feature-band h2{font-size:var(--text-2xl);margin-bottom:var(--space-4)}

/* ============================ FOOTER ============================ */
.site-footer{border-top:1px solid var(--color-border);padding-block:var(--space-16) var(--space-8);margin-top:var(--space-16)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-10)}
.footer-brand p{color:var(--color-text-muted);font-size:var(--text-sm);max-width:34ch;margin-top:var(--space-4)}
.footer-col h4{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:var(--space-4)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col a{color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm)}
.footer-col a:hover{color:var(--neon-cyan)}
.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-border);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  font-size:var(--text-xs);color:var(--color-text-faint)}

/* ============================ PAGE HEAD ============================ */
.page-head{padding-top:clamp(var(--space-12),8vw,var(--space-24));padding-bottom:var(--space-8);text-align:center}
.page-head h1{font-size:var(--text-3xl);line-height:1;margin-bottom:var(--space-4)}
.page-head .lead{margin-inline:auto}
.back-link{display:inline-flex;align-items:center;gap:.5em;color:var(--color-text-muted);
  text-decoration:none;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-6)}
.back-link:hover{color:var(--neon-cyan)}

/* ============================ ARTIST DETAIL ============================ */
.artist-hero{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
.artist-hero .art{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card)}
.artist-hero .art img{width:100%;aspect-ratio:1;object-fit:cover}
.artist-hero .art::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 80px -30px var(--accent),inset 0 0 0 1px #ffffff1a}
.artist-flag{display:inline-block;font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:#2a1a00;background:var(--grad-gold);padding:.35rem .8rem;border-radius:var(--radius-full);margin-bottom:var(--space-4)}
.artist-genres{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.genre-pill{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;padding:.4rem .9rem;
  border-radius:var(--radius-full);color:var(--accent);
  background:color-mix(in oklab,var(--accent) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--accent) 40%,transparent)}
.artist-detail h1{font-size:var(--text-3xl);line-height:1;margin-bottom:var(--space-3)}
.artist-detail .tag{font-size:var(--text-lg);color:var(--accent);margin-bottom:var(--space-6);font-family:var(--font-display);font-weight:500}
.artist-detail .bio{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-8);max-width:54ch}
.listen-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.listen-btn{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font-size:var(--text-sm);font-weight:600;color:var(--color-text);padding:.85rem 1.4rem;
  border-radius:var(--radius-full);border:1px solid var(--color-border);
  background:color-mix(in oklab,var(--color-surface) 70%,transparent)}
.listen-btn:hover{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 0 30px -10px var(--accent);color:#fff}
[data-theme='light'] .listen-btn:hover{color:var(--color-text)}
.listen-btn svg{width:18px;height:18px}
@media (max-width:760px){.artist-hero{grid-template-columns:1fr}.artist-hero .art{max-width:360px;margin-inline:auto}}

/* ============================ SCROLL REVEAL ============================ */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:var(--space-1);padding:var(--space-4);margin:0 var(--space-4);border-radius:var(--radius-lg);
    background:color-mix(in oklab,var(--color-bg) 96%,transparent);backdrop-filter:blur(18px);
    border:1px solid var(--color-border);box-shadow:var(--shadow-card);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:var(--transition-interactive)}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.85rem 1rem}
  .nav-toggle{display:grid}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .hero-bg{-webkit-mask-image:none;mask-image:none;opacity:.4}
  [data-theme='light'] .hero-bg{opacity:.2}
}
@media (max-width:520px){
  .hero-stats{gap:var(--space-6)}
  .footer-grid{grid-template-columns:1fr}
  /* keep header from overflowing on phones: drop the header CTA (it lives in the menu + hero) */
  .nav{gap:var(--space-3)}
  .nav-actions .btn-primary{display:none}
  .brand-name{font-size:var(--text-base);white-space:nowrap}
  .brand-name small{letter-spacing:.28em}
  .brand-crest{width:40px;height:40px}
}

/* ============================ ABOUT PAGE ============================ */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
.about-copy p{color:var(--color-text-muted);font-size:var(--text-base);line-height:1.75;margin-bottom:var(--space-5);max-width:60ch}
.about-copy p strong{color:var(--color-text);font-weight:600}
.about-art{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card)}
.about-art img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.about-art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px -28px var(--neon-violet),inset 0 0 0 1px #ffffff14}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-block:var(--space-12)}
.stat-card{text-align:center;padding:var(--space-8) var(--space-4);border-radius:var(--radius-lg);
  background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-card)}
.stat-card strong{display:block;font-family:var(--font-display);font-size:var(--text-2xl);line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:var(--space-2)}
.stat-card span{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-faint)}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}.about-art{max-width:380px;margin-inline:auto}}
@media (max-width:520px){.stat-row{grid-template-columns:1fr;gap:var(--space-3)}}

/* ============================ STUDIO (CREATE) ============================ */
.studio{max-width:var(--content-default);margin-inline:auto}
.studio-tabs{display:inline-flex;gap:var(--space-1);padding:var(--space-1);margin-bottom:var(--space-8);
  border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border)}
.studio-tab{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);color:var(--color-text-muted);
  padding:.7rem 1.3rem;border-radius:var(--radius-full);white-space:nowrap;transition:var(--transition-interactive)}
.studio-tab[aria-selected="true"]{color:#fff;background:var(--grad-violet);box-shadow:0 8px 24px -10px #8B5CFFaa}
.studio-tab:not([aria-selected="true"]):hover{color:var(--color-text)}
.studio-panel{display:none}
.studio-panel.active{display:block;animation:fade-up .5s cubic-bezier(.16,1,.3,1)}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.studio-card{padding:clamp(var(--space-6),4vw,var(--space-10));border-radius:var(--radius-xl)}
.field{margin-bottom:var(--space-5)}
.field label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}
.field .hint{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-2)}
.field textarea,.field input[type="text"]{width:100%;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:.95rem 1.1rem;resize:vertical;transition:var(--transition-interactive)}
.field textarea{min-height:120px;line-height:1.6}
.field textarea:focus,.field input[type="text"]:focus{outline:none;border-color:var(--neon-violet);box-shadow:0 0 0 3px #8B5CFF33}
.field textarea::placeholder,.field input::placeholder{color:var(--color-text-faint)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}
.consent{display:flex;gap:var(--space-3);align-items:flex-start;margin-block:var(--space-6);
  font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.consent input{margin-top:.2rem;width:18px;height:18px;accent-color:var(--neon-violet);flex:none}
.studio-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.studio-result{margin-top:var(--space-8)}
.result-card{padding:var(--space-6);border-radius:var(--radius-lg)}
.result-card h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.lyrics-out{white-space:pre-wrap;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);line-height:1.7;background:var(--color-bg-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-5);max-height:420px;overflow:auto}
.studio-result audio{width:100%;margin-top:var(--space-4)}
.song-choice{margin-bottom:var(--space-4)}
.song-choice-label{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--neon-cyan);font-weight:600;margin-bottom:var(--space-2)}
.spinner{display:inline-block;width:20px;height:20px;border:2px solid #ffffff33;border-top-color:#fff;
  border-radius:var(--radius-full);animation:spin .8s linear infinite;vertical-align:-4px;margin-right:.6em}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{display:flex;align-items:center;gap:.4em;color:var(--color-text-muted);font-size:var(--text-sm);
  padding:var(--space-5);background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-top:var(--space-6)}
.error-row{color:#FF8FB0;font-size:var(--text-sm);padding:var(--space-4) var(--space-5);margin-top:var(--space-6);
  background:color-mix(in oklab,#FF4FD8 12%,transparent);border:1px solid color-mix(in oklab,#FF4FD8 35%,transparent);
  border-radius:var(--radius-md)}
.btn-link{background:none;border:none;color:var(--neon-cyan);font-weight:600;text-decoration:underline;cursor:pointer;font-size:inherit;padding:0;margin-left:.4em}
.mode-pill{display:inline-flex;align-items:center;gap:.4em;font-size:var(--text-xs);font-weight:600;
  letter-spacing:.08em;color:var(--color-text-faint);margin-left:auto}
.mode-pill .dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-text-faint)}
.mode-pill.live .dot{background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)}
.mode-pill.demo .dot{background:var(--gold)}
.studio-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-block:var(--space-10) var(--space-12)}
.studio-intro .ic{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;
  padding:var(--space-5);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-surface) 60%,transparent);border:1px solid var(--color-border)}
.studio-intro .ic b{display:block;color:var(--color-text);font-family:var(--font-display);font-weight:600;font-size:var(--text-base);margin-bottom:var(--space-1)}
@media (max-width:680px){.studio-intro{grid-template-columns:1fr}.studio-tabs{display:flex;width:100%;justify-content:space-between}.studio-tab{flex:1;padding:.7rem .5rem;text-align:center}}

/* ============================ VIDEOS ============================ */
#videos{padding-block:clamp(var(--space-16),9vw,var(--space-24))}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--space-5),2.5vw,var(--space-8));margin-top:var(--space-12)}
.video-card{display:flex;flex-direction:column;gap:var(--space-3);text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.video-card.in{opacity:1;transform:none}
.video-thumb{position:relative;display:block;border-radius:var(--radius-lg,16px);overflow:hidden;aspect-ratio:16/9;background:rgba(255,255,255,.04);border:1px solid var(--border,rgba(255,255,255,.08));box-shadow:0 10px 40px rgba(0,0,0,.35)}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .5s ease}
.video-card:hover .video-thumb img,.video-card:focus-visible .video-thumb img{transform:scale(1.06);filter:brightness(.7)}
.video-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--neon-violet,#8B5CFF),var(--neon-magenta,#FF4FD8));color:#fff;font-size:20px;padding-left:4px;box-shadow:0 8px 30px rgba(139,92,255,.5);transform:scale(.85);opacity:.92;transition:transform .35s cubic-bezier(.2,.9,.3,1.4),opacity .35s ease}
.video-card:hover .video-play,.video-card:focus-visible .video-play{transform:scale(1);opacity:1}
.video-card:focus-visible .video-thumb{outline:2px solid var(--neon-cyan,#39E0FF);outline-offset:3px}
.video-info{display:block}
.video-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--font-display,inherit);font-weight:600;font-size:var(--text-base,1rem);line-height:1.3;color:var(--text,#fff)}

/* ---- Lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(var(--space-4),4vw,var(--space-10))}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(3,2,10,.86);backdrop-filter:blur(8px)}
.lightbox-dialog{position:relative;width:min(960px,100%);background:var(--surface,#0c0a18);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:var(--radius-lg,18px);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:lbIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes lbIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.lightbox-frame{position:relative;aspect-ratio:16/9;background:#000}
.lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6)}
.lightbox-bar h3{font-family:var(--font-display,inherit);font-size:var(--text-lg,1.125rem);margin:0}
.lightbox-close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55);color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center;transition:background .25s ease,transform .25s ease}
.lightbox-close:hover{background:rgba(255,79,216,.85);transform:rotate(90deg)}
@media (max-width:880px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.video-grid{grid-template-columns:1fr;gap:var(--space-6)}.lightbox-bar{flex-direction:column;align-items:flex-start;gap:var(--space-2)}}