/* ==========================================================================
   MYXX FM — Design System 2026
   Obsidian + Puro Heat gold/ember. Archivo Black display, Inter body,
   JetBrains Mono for live/broadcast data. Signature motif: the Heat Ring
   (rotating conic gradient) + live equalizer bars used as the "on air" mark.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  color-scheme: dark;

  /* --- palette --- */
  --obsidian:      #07060a;
  --obsidian-2:    #0d0c12;
  --obsidian-3:    #161420;
  --panel:         #121017;
  --panel-2:       #1a1722;
  --hairline:      rgba(255,255,255,.09);
  --hairline-2:    rgba(255,255,255,.16);
  --bone:          #f7f4ee;
  --smoke:         #a29eab;
  --smoke-dim:     #716d7a;

  --gold:          #ffc22e;
  --gold-2:        #ffe08a;
  --gold-deep:     #e08a00;
  --ember:         #ff4d5e;
  --ember-deep:    #c81f3a;
  --signal:        #2fe6a0;
  --ice:           #6fd6ff;

  --heat: linear-gradient(120deg, var(--ember) 0%, var(--gold) 55%, var(--gold-2) 100%);
  --heat-vert: linear-gradient(180deg, var(--gold) 0%, var(--ember) 100%);
  --glass: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  /* --- type --- */
  --font-display: 'Archivo Black', Impact, 'Arial Black', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --step--1: clamp(.78rem, .75rem + .14vw, .86rem);
  --step-0:  clamp(.96rem, .92rem + .17vw, 1.05rem);
  --step-1:  clamp(1.1rem, 1.02rem + .34vw, 1.32rem);
  --step-2:  clamp(1.4rem, 1.2rem + .78vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.45rem + 1.9vw, 3rem);
  --step-4:  clamp(2.6rem, 1.7rem + 3.6vw, 5rem);
  --step-5:  clamp(3.2rem, 1.8rem + 5.6vw, 7.2rem);

  --space-1: .4rem;
  --space-2: .7rem;
  --space-3: 1.1rem;
  --space-4: 1.7rem;
  --space-5: 2.6rem;
  --space-6: 4rem;
  --space-7: 6.5rem;

  --radius-s:  10px;
  --radius-m:  18px;
  --radius-l:  28px;
  --radius-xl: 40px;

  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 30px 90px rgba(0,0,0,.55);
  --shadow-gold: 0 12px 40px rgba(255,194,46,.16);

  --ease: cubic-bezier(.16,.84,.24,1);
  --header-h: 84px;
  --dock-h: 84px;
  --tabbar-h: 64px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--obsidian); scroll-behavior:smooth; }
body{
  margin:0; min-height:100dvh; background:var(--obsidian); color:var(--bone);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2.5px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:#0a0a0c; }
[hidden]{ display:none !important; }
.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; }
.skip-link{ position:fixed; top:-100px; left:14px; z-index:9999; background:var(--gold); color:#0a0a0c; font-weight:800; padding:10px 16px; border-radius:8px; transition:top .18s var(--ease); }
.skip-link:focus{ top:14px; }

/* background ambience: soft grain + glow field, fixed */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(255,194,46,.14), transparent 60%),
    radial-gradient(900px 620px at 100% 10%, rgba(255,77,94,.12), transparent 55%),
    radial-gradient(1000px 800px at 50% 120%, rgba(255,194,46,.08), transparent 60%),
    var(--obsidian);
}

.container{ width:min(1240px, calc(100% - 40px)); margin-inline:auto; }
.container-wide{ width:min(1440px, calc(100% - 32px)); margin-inline:auto; }

/* ---------- type helpers ---------- */
.display{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.01em; line-height:.94; }
.mono{ font-family:var(--font-mono); letter-spacing:.01em; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 .8rem;
  color:var(--gold); font-size:var(--step--1); font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--heat); }
.muted{ color:var(--smoke); }
.lede{ font-size:var(--step-1); color:var(--smoke); max-width:56ch; }

/* equalizer glyph — the recurring "live" signature */
.eq{ display:inline-flex; align-items:flex-end; gap:2.5px; height:12px; }
.eq i{ display:block; width:3px; border-radius:2px; background:currentColor; animation:eq 1s ease-in-out infinite; }
.eq i:nth-child(1){ height:40%; animation-delay:-.6s; }
.eq i:nth-child(2){ height:100%; animation-delay:-.2s; }
.eq i:nth-child(3){ height:65%; animation-delay:-.9s; }
.eq i:nth-child(4){ height:85%; animation-delay:-.4s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.eq.paused i{ animation-play-state:paused; transform:scaleY(.28); }

/* ---------- buttons ---------- */
.btn{
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:50px; padding:.85rem 1.4rem; border-radius:999px; font-weight:800; font-size:.95rem;
  border:1.5px solid var(--hairline-2); background:var(--panel-2); color:var(--bone);
  transition:transform .18s var(--ease), border-color .18s, background .18s, box-shadow .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); border-color:#4a4653; }
.btn:active{ transform:translateY(0); }
.btn.primary{ background:var(--heat); color:#160a02; border-color:transparent; box-shadow:var(--shadow-gold); }
.btn.primary:hover{ filter:brightness(1.06); box-shadow:0 16px 50px rgba(255,194,46,.26); }
.btn.ghost{ background:transparent; }
.btn.solid-dark{ background:#0d0c12; border-color:var(--hairline-2); }
.btn.small{ min-height:40px; padding:.55rem 1rem; font-size:.85rem; }
.btn.icon{ width:50px; padding:0; border-radius:50%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.icon-svg{ width:1.15rem; height:1.15rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- status pill ---------- */
.status{ display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke); }
.status::before{ content:''; width:.5rem; height:.5rem; border-radius:50%; background:var(--status-c, var(--smoke)); box-shadow:0 0 0 5px color-mix(in srgb, var(--status-c, var(--smoke)) 18%, transparent); }
.status[data-state="live"],.status[data-state="good"]{ --status-c:var(--signal); color:var(--bone); }
.status[data-state="warn"],.status[data-state="buffering"]{ --status-c:var(--gold); color:var(--bone); }
.status[data-state="error"],.status[data-state="offline"]{ --status-c:var(--ember); color:var(--bone); }
.status[data-state="paused"]{ --status-c:var(--smoke); }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:500; height:var(--header-h); display:flex; align-items:center;
  background:rgba(7,6,10,.72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--hairline); }
.header-inner{ display:flex; align-items:center; gap:var(--space-4); }
.brand{ display:flex; align-items:center; gap:.65rem; flex:none; }
.brand img{ height:44px; width:auto; }
.site-nav{ display:none; margin-inline:auto; gap:var(--space-4); align-items:center; }
.site-nav a{ font-weight:700; font-size:.92rem; color:var(--smoke); position:relative; padding:.4rem 0; }
.site-nav a:hover{ color:var(--bone); }
.site-nav a[aria-current="page"]{ color:var(--bone); }
.site-nav a[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--heat); border-radius:2px; }
.header-actions{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.menu-btn{ display:inline-flex; }
@media(min-width:960px){
  .site-nav{ display:flex; }
  .menu-btn{ display:none; }
}

/* mobile drawer */
.nav-drawer{ position:fixed; inset:0; z-index:900; background:rgba(5,4,7,.7); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .22s var(--ease); }
.nav-drawer.open{ opacity:1; pointer-events:auto; }
.nav-drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(340px,84%); background:var(--obsidian-3); border-left:1px solid var(--hairline); padding:var(--space-5) var(--space-4); transform:translateX(100%); transition:transform .28s var(--ease); display:flex; flex-direction:column; gap:var(--space-4); }
.nav-drawer.open .nav-drawer-panel{ transform:translateX(0); }
.nav-drawer-panel a{ font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; color:var(--bone); }
.nav-drawer-close{ align-self:flex-end; }

/* ---------- hero ---------- */
/* generic responsive split (mobile always stacks; ratio only applies >=980px) */
.two-col{ display:grid; gap:var(--space-5); align-items:start; }
@media(min-width:980px){ .two-col{ grid-template-columns:var(--split, 1fr 1fr); } }

.hero{ position:relative; padding:var(--space-6) 0 var(--space-5); overflow:clip; }
.hero-grid{ display:grid; gap:var(--space-6); align-items:center; }
@media(min-width:980px){ .hero-grid{ grid-template-columns:1.15fr 1fr; gap:var(--space-5); } }
.hero-eyebrow{ color:var(--gold); }
.hero-title{ font-size:var(--step-5); }
.hero-title .accent{ background:var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy p.lede{ margin-top:var(--space-3); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:var(--space-4); }
.hero-tags{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:var(--space-4); }
.hero-tags span{ font-size:.78rem; font-weight:700; letter-spacing:.05em; color:var(--smoke); text-transform:uppercase; }
.hero-tags span:not(:last-child)::after{ content:'·'; margin-left:.9rem; color:var(--hairline-2); }

/* ---------- on-air card (signature) ---------- */
.onair{ position:relative; padding:var(--space-4); border-radius:var(--radius-l); background:var(--glass), var(--panel);
  border:1px solid var(--hairline-2); box-shadow:var(--shadow-2); }
.onair::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,194,46,.5), transparent 40%, transparent 70%, rgba(255,77,94,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.onair-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.onair-head b{ font-weight:800; }

.art-stage{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-m); overflow:hidden; isolation:isolate; }
.art-stage::before{ /* heat ring */
  content:''; position:absolute; inset:-30%; z-index:-1;
  background:conic-gradient(from 0deg, var(--gold), var(--ember), var(--gold-2), var(--gold));
  filter:blur(38px); opacity:.55; animation:spin 9s linear infinite;
}
.art-stage img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-m); border:1px solid var(--hairline-2); position:relative; z-index:1; background:var(--panel-2); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .art-stage::before{ animation:none; } }

.onair-meta{ margin-top:var(--space-3); }
.onair-meta .eyebrow{ margin-bottom:.35rem; }
.now-title{ font-size:var(--step-2); font-weight:900; line-height:1.15; }
.now-artist{ color:var(--smoke); font-weight:600; margin-top:.15rem; }
.onair-foot{ display:flex; align-items:center; gap:.9rem; margin-top:var(--space-4); }
.onair-foot .host-chip{ display:flex; align-items:center; gap:.6rem; }
.host-chip img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:1.5px solid var(--hairline-2); }
.host-chip span{ font-size:.86rem; font-weight:700; }

/* ---------- sections ---------- */
.section{ padding:var(--space-6) 0; }
.section.compact{ padding:var(--space-5) 0; }
.section-head{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-4); }
.section-head h2{ font-size:var(--step-3); }
.section-head p{ margin-top:.5rem; }
.section-head .btn{ flex:none; }

/* track rail */
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:min(180px,42vw); gap:1rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--hairline-2); border-radius:4px; }
.rail.grid-mode{ grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); overflow:visible; }
.track-card{ scroll-snap-align:start; }
.track-card .art{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-s); overflow:hidden; background:var(--panel-2); border:1px solid var(--hairline); }
.track-card .art img{ width:100%; height:100%; object-fit:cover; }
.track-card .art time{ position:absolute; left:.5rem; bottom:.5rem; font-family:var(--font-mono); font-size:.68rem; font-weight:700; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); padding:.2rem .45rem; border-radius:6px; color:var(--gold-2); }
.track-card h4{ margin-top:.6rem; font-size:.92rem; font-weight:800; line-height:1.25; }
.track-card p{ font-size:.82rem; color:var(--smoke); margin-top:.1rem; }

/* lineup / host cards */
.lineup-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:680px){ .lineup-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:980px){ .lineup-grid{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } }
.host-card{ position:relative; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--hairline); background:var(--panel); aspect-ratio:3/4; isolation:isolate; }
.host-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.host-card:hover img{ transform:scale(1.05); }
.host-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,4,7,.94) 8%, rgba(5,4,7,.15) 55%, transparent 78%); }
.host-card .copy{ position:absolute; left:0; right:0; bottom:0; padding:1rem; z-index:2; }
.host-card .hours{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-2); margin-bottom:.3rem; }
.host-card h3{ font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; letter-spacing:-.01em; }
.host-card .show{ font-size:.82rem; color:var(--bone); font-weight:700; opacity:.85; margin-top:.1rem; }
.host-card .special-badge{ position:absolute; top:.7rem; right:.7rem; z-index:2; background:var(--heat); color:#160a02; font-size:.62rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .55rem; border-radius:999px; }
.host-card .line{ display:none; }

/* show cards */
.show-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media(min-width:720px){ .show-grid{ grid-template-columns:repeat(3,1fr); } }
.show-card{ border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--hairline); background:var(--panel); }
.show-card .art{ aspect-ratio:16/10; overflow:hidden; }
.show-card .art img{ width:100%; height:100%; object-fit:cover; }
.show-card .body{ padding:1.1rem 1.2rem 1.3rem; }
.show-card .day{ font-family:var(--font-mono); font-size:.75rem; color:var(--gold-2); font-weight:700; }
.show-card h3{ font-size:1.2rem; margin-top:.35rem; }
.show-card p{ margin-top:.4rem; color:var(--smoke); font-size:.9rem; }

/* panels / request zone */
.panel{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-m); }
.request-banner{ position:relative; border-radius:var(--radius-l); overflow:hidden; padding:var(--space-6) var(--space-5); background:var(--heat); color:#160a02; }
.request-banner::after{ content:''; position:absolute; inset:0; background:radial-gradient(600px 300px at 90% 0%, rgba(0,0,0,.12), transparent); }
.request-grid{ display:grid; gap:var(--space-5); position:relative; z-index:1; }
@media(min-width:980px){ .request-grid{ grid-template-columns:1.1fr 1fr; align-items:center; } }
.request-banner .eyebrow{ color:#160a02; opacity:.75; }
.request-banner .eyebrow::before{ background:#160a02; }
.request-banner h2{ font-size:var(--step-3); color:#120800; }
.request-banner p{ color:#3a1e05; margin-top:.6rem; max-width:52ch; }
.request-banner .btn.primary{ background:#0d0c12; color:var(--bone); box-shadow:none; }
.request-mini{ display:grid; gap:.7rem; grid-template-columns:repeat(3,1fr); }
.request-mini div{ background:rgba(10,8,4,.14); border:1px solid rgba(10,8,4,.16); border-radius:var(--radius-s); padding:.8rem; }
.request-mini span{ display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.65; }
.request-mini b{ display:block; margin-top:.25rem; font-size:1.05rem; }

/* culture: news + weather */
.culture-grid{ display:grid; gap:var(--space-4); }
@media(min-width:960px){ .culture-grid{ grid-template-columns:1.4fr 1fr; } }
.news-list{ display:grid; gap:.7rem; }
.news-item{ display:block; padding:1rem 1.1rem; border-radius:var(--radius-s); background:var(--panel); border:1px solid var(--hairline); transition:border-color .18s,transform .18s; }
.news-item:hover{ border-color:var(--hairline-2); transform:translateX(3px); }
.news-item b{ display:block; font-size:.96rem; font-weight:750; line-height:1.35; }
.news-item span{ display:block; margin-top:.35rem; font-size:.76rem; color:var(--smoke-dim); font-family:var(--font-mono); }
.weather-panel{ padding:1.3rem; }
.weather-now{ display:flex; align-items:center; justify-content:space-between; }
.weather-temp{ font-family:var(--font-display); font-size:2.6rem; background:var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent; }
.weather-detail{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--hairline); }
.weather-detail span{ font-size:.74rem; color:var(--smoke); text-transform:uppercase; letter-spacing:.05em; }
.weather-detail b{ display:block; margin-top:.2rem; }

/* stats / market pulse */
.market-strip{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:720px){ .market-strip{ grid-template-columns:repeat(4,1fr); } }
.metric{ padding:1.3rem; border-radius:var(--radius-m); background:var(--panel); border:1px solid var(--hairline); }
.metric span{ font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke); }
.metric b{ display:block; font-family:var(--font-mono); font-size:1.9rem; margin-top:.4rem; color:var(--bone); }
.city-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.city-pill{ font-family:var(--font-mono); font-size:.78rem; padding:.45rem .8rem; border-radius:999px; border:1px solid var(--hairline); color:var(--smoke); }

/* footer */
.site-footer{ border-top:1px solid var(--hairline); padding:var(--space-6) 0 var(--space-5); background:var(--obsidian-2); }
.footer-grid{ display:grid; gap:var(--space-5); }
@media(min-width:780px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-logo{ height:40px; width:auto; margin-bottom:.8rem; }
.footer-links b{ display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin-bottom:.8rem; }
.footer-links a{ display:block; padding:.32rem 0; color:var(--smoke); font-weight:600; }
.footer-links a:hover{ color:var(--bone); }
.footer-bottom{ margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; font-size:.8rem; color:var(--smoke-dim); }

/* ---------- player dock ---------- */
.player-dock{ position:fixed; left:0; right:0; bottom:var(--tabbar-h-active,0); z-index:600; height:var(--dock-h);
  background:rgba(10,9,13,.82); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid var(--hairline); display:flex; align-items:center; }
.player-inner{ display:flex; align-items:center; gap:1rem; width:100%; }
.player-track{ display:flex; align-items:center; gap:.8rem; min-width:0; flex:1; }
.player-track img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none; border:1px solid var(--hairline-2); }
.player-track .meta{ min-width:0; }
.player-track h2{ font-size:.92rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-track p{ font-size:.78rem; color:var(--smoke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play-toggle{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--heat); color:#160a02; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-gold); }
.play-toggle:hover{ filter:brightness(1.05); }
.play-toggle .icon-svg{ width:1.3rem; height:1.3rem; }
.player-volume{ display:none; align-items:center; gap:.6rem; color:var(--smoke); flex:none; }
.player-volume input[type=range]{ width:110px; accent-color:var(--gold); }
@media(min-width:720px){ .player-volume{ display:flex; } }
.player-live{ display:none; flex:none; align-items:center; gap:.5rem; color:var(--gold); }
@media(min-width:560px){ .player-live{ display:flex; } }

/* mobile bottom tab bar */
.tab-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:610; height:var(--tabbar-h);
  background:rgba(9,8,12,.92); backdrop-filter:blur(20px); border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom); }
.tab-bar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; color:var(--smoke-dim); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.tab-bar a svg{ width:1.25rem; height:1.25rem; stroke:currentColor; fill:none; stroke-width:2; }
.tab-bar a[aria-current="page"]{ color:var(--gold); }
@media(min-width:960px){ .tab-bar{ display:none; } body{ padding-bottom:0; } .player-dock{ bottom:0; } }
@media(max-width:959px){ body{ padding-bottom:calc(var(--dock-h) + var(--tabbar-h) + env(safe-area-inset-bottom)); } .player-dock{ bottom:var(--tabbar-h); } }

/* forms */
.field{ display:grid; gap:.4rem; margin-bottom:1rem; }
.field label{ font-weight:700; font-size:.86rem; }
.field small{ color:var(--smoke); }
input,select,textarea{ width:100%; border:1.5px solid var(--hairline-2); background:var(--obsidian-2); color:var(--bone); border-radius:var(--radius-s); padding:.85rem .95rem; min-height:50px; }
textarea{ min-height:110px; resize:vertical; }
input::placeholder,textarea::placeholder{ color:var(--smoke-dim); }
input:focus,select:focus,textarea:focus{ border-color:var(--gold); }
.search-row{ display:flex; gap:.7rem; }
.search-row input{ flex:1; }

.request-result{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1rem; border:1px solid var(--hairline); border-radius:var(--radius-s); background:var(--obsidian-2); }
.request-result + .request-result{ margin-top:.6rem; }
.request-result .meta b{ display:block; }
.request-result .meta span{ font-size:.82rem; color:var(--smoke); }

/* toasts */
.toast-region{ position:fixed; right:16px; bottom:calc(var(--dock-h) + var(--tabbar-h-active,0) + 96px); z-index:1000; display:grid; gap:.6rem; width:min(380px, calc(100% - 32px)); }
@media(min-width:960px){ .toast-region{ bottom:calc(var(--dock-h) + 20px); } }
.toast{ padding:.9rem 1.05rem; background:var(--panel-2); border:1px solid var(--hairline-2); border-left:3px solid var(--gold); border-radius:var(--radius-s); box-shadow:var(--shadow-2); animation:toast-in .25s var(--ease); font-size:.88rem; }
.toast.error{ border-left-color:var(--ember); }
.toast.success{ border-left-color:var(--signal); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }

/* skeleton */
.skeleton{ position:relative; overflow:hidden; background:var(--panel-2); color:transparent !important; border-radius:6px; }
.skeleton::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%); transform:translateX(-100%); animation:shimmer 1.6s infinite; }
@keyframes shimmer{ to{ transform:translateX(100%); } }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; scroll-behavior:auto !important; } }

/* page hero (secondary pages) */
.page-hero{ padding:var(--space-6) 0 var(--space-4); }
.page-hero h1{ font-size:var(--step-4); margin-top:.4rem; }
.page-hero p{ margin-top:var(--space-3); }

/* info page */
.info-block{ padding:1.6rem 1.7rem; margin-bottom:1rem; }
.info-block h2{ font-family:var(--font-display); font-size:1.3rem; text-transform:uppercase; margin-bottom:.6rem; }
.info-block p + p{ margin-top:.6rem; }
.info-nav{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--space-4); }
.info-nav a{ padding:.5rem 1rem; border-radius:999px; border:1px solid var(--hairline-2); font-weight:700; font-size:.85rem; }
.info-nav a:hover{ border-color:var(--gold); color:var(--gold); }

/* team strip (about) */
.team-strip img{ border-radius:var(--radius-l); border:1px solid var(--hairline-2); }

/* empty / error state */
.empty-state{ padding:2.4rem 1.6rem; text-align:center; border:1px dashed var(--hairline-2); border-radius:var(--radius-m); color:var(--smoke); }
.empty-state b{ display:block; color:var(--bone); margin-bottom:.4rem; font-size:1.05rem; }

/* utility */
.center{ text-align:center; }
.stack{ display:grid; gap:1rem; }
.hide-mobile{ display:none; } @media(min-width:720px){ .hide-mobile{ display:initial; } }