/* =========================
   V12.7 - Dynamic Media Hub
   ========================= */
.media-page{padding-top:100px;min-height:100vh;background:#050505}
.media-hero{min-height:360px;display:flex;align-items:center;border-bottom:1px solid rgba(239,11,11,.25);background:linear-gradient(90deg,rgba(3,3,3,.97),rgba(3,3,3,.72)),url("assets/hero-v6.webp") center 42%/cover}
.media-hero-inner{width:min(1180px,90vw);margin:auto}.media-hero h1{font:italic 700 clamp(3.7rem,7vw,6.8rem)/.86 Oswald;text-transform:uppercase;margin:8px 0 16px}.media-hero h1 em{font-style:italic;color:#ef0b0b}.media-hero p{max-width:760px;color:#aaa;margin:0;font-size:.86rem;line-height:1.75}
.media-loading-card,.media-error-card{padding:28px;border:1px solid #2c2c32;background:#0d0d10;color:#aaa}.media-error-card strong{display:block;color:#fff;font:700 1.4rem Oswald;text-transform:uppercase}.media-error-card p{margin:6px 0 18px}
.featured-mixes-footer{width:min(1200px,100%);margin:18px auto 0;display:flex;justify-content:flex-end}
.dynamic-featured-mix{grid-template-columns:200px minmax(320px,.9fr) minmax(420px,1.35fr)!important}.dynamic-mix-art-wrap{display:flex;align-items:center;justify-content:center;padding:16px}.dynamic-mix-art{width:150px!important;height:150px!important;border-radius:50%!important;object-fit:cover!important;padding:0!important;border:3px solid #5a2023!important;box-shadow:0 15px 38px rgba(0,0,0,.45)}
.mix-stat-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:7px 0 10px;color:#777;font-size:.61rem}.mix-stat-line strong{color:#ff5550;font-size:.68rem}.mix-stat-line i{font-style:normal;color:#444}

.live-watch-shell,.mix-library-shell{width:min(1220px,92vw);margin:0 auto;padding:32px 0 90px}.live-platform-strip{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:18px 20px;margin-bottom:16px;border:1px solid #2d2d34;background:#0d0d11}.live-platform-strip>div:first-child{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center}.live-platform-strip small{grid-column:2;color:#666;font-size:.58rem}.live-platform-actions{display:flex;gap:8px;flex-wrap:wrap}.live-platform-actions .hero-btn{min-width:190px;height:48px}
.twitch-stage{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px}.twitch-video-panel,.twitch-chat-panel{border:1px solid #2e2e35;background:#0c0c10}.media-panel-head{padding:15px 18px;border-bottom:1px solid #292930}.media-panel-head h2{font:700 1.25rem Oswald;text-transform:uppercase;margin:3px 0}.twitch-frame-wrap{aspect-ratio:16/9;min-height:300px}.twitch-frame-wrap iframe{width:100%;height:100%;display:block}.twitch-chat-panel{display:flex;flex-direction:column}.twitch-chat-panel>iframe{width:100%;min-height:0;flex:1;border:0;background:#0e0e10}.live-platform-info{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.live-platform-info article{display:grid;grid-template-columns:55px 1fr;gap:15px;padding:22px;border:1px solid #2d2d34;background:#0d0d11}.media-platform-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid #672126;background:#19090b;color:#ff5550;font:700 1.4rem Oswald}.live-platform-info h3{font:700 1.2rem Oswald;text-transform:uppercase;margin:3px 0}.live-platform-info p{color:#85858d;font-size:.7rem;line-height:1.7;margin:0}

.mix-library-toolbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.mix-library-toolbar h2{font:700 clamp(2rem,4vw,3rem) Oswald;text-transform:uppercase;margin:2px 0}.mix-library-toolbar p{color:#777;margin:0;font-size:.7rem}.mix-library-controls{display:flex;gap:8px}.mix-library-controls input,.mix-library-controls select{height:44px;padding:0 12px;border:1px solid #34343c;background:#0c0c10;color:#fff;font:600 .7rem Montserrat}.mix-library-controls input{width:260px}
.mix-library-grid{display:grid;gap:14px}.mix-library-card{overflow:hidden;border:1px solid #2c2c33;background:linear-gradient(145deg,#111116,#0b0b0e)}.mix-library-card-top{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:22px}.mix-library-art-shell{width:170px;height:170px;display:grid;place-items:center;margin:auto}.mix-library-art-shell img,.mix-art-fallback{width:160px;height:160px;border-radius:50%;object-fit:cover;border:3px solid #602126;box-shadow:0 15px 36px rgba(0,0,0,.45)}.mix-art-fallback{display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#6e080b,#0c0c10 70%);color:#fff;font:700 2rem/1 Oswald}.mix-library-badges{display:flex;gap:6px;flex-wrap:wrap}.mix-library-badges span{padding:4px 7px;border:1px solid #4f2023;color:#ff6561;font-size:.52rem;font-weight:900;text-transform:uppercase}.mix-library-card-copy h2{font:700 clamp(1.5rem,3vw,2.35rem) Oswald;text-transform:uppercase;margin:7px 0}.mix-library-stats{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#707078;font-size:.6rem}.mix-library-stats strong{color:#ff5550}.mix-library-stats strong span{color:#777;font-weight:600}.mix-library-card-copy p{max-width:800px;color:#999;font-size:.72rem;line-height:1.7}.mixcloud-open-link{color:#ef4b48;font-size:.66rem;font-weight:900;text-transform:uppercase}.mix-library-player{padding:14px 22px 20px;border-top:1px solid #28282f}.mix-library-player iframe{display:block;width:100%}

@media(max-width:1050px){.twitch-stage{grid-template-columns:1fr}.twitch-chat-panel>iframe{height:420px;min-height:420px}.dynamic-featured-mix{grid-template-columns:180px 1fr!important}.dynamic-featured-mix .v6-player{grid-column:1/-1}.live-platform-info{grid-template-columns:1fr}}
@media(max-width:760px){.media-page{padding-top:88px}.media-hero{min-height:310px}.live-platform-strip,.mix-library-toolbar{align-items:flex-start;flex-direction:column}.live-platform-actions{width:100%}.live-platform-actions .hero-btn{flex:1}.mix-library-controls{width:100%;flex-direction:column}.mix-library-controls input{width:100%}.mix-library-card-top{grid-template-columns:1fr;text-align:center}.mix-library-badges,.mix-library-stats{justify-content:center}.mix-library-art-shell{width:150px;height:150px}.mix-library-art-shell img,.mix-art-fallback{width:140px;height:140px}.dynamic-featured-mix{grid-template-columns:130px 1fr!important}.dynamic-mix-art-wrap{padding:10px}.dynamic-mix-art{width:110px!important;height:110px!important}}
@media(max-width:520px){.media-page{padding-top:82px}.dynamic-featured-mix{grid-template-columns:1fr!important;text-align:center}.dynamic-featured-mix .v6-player{grid-column:auto}.mix-stat-line{justify-content:center}.dynamic-mix-art{width:130px!important;height:130px!important}.twitch-frame-wrap{min-height:240px}.twitch-chat-panel>iframe{height:360px;min-height:360px}.live-platform-info article{grid-template-columns:1fr;text-align:center}.media-platform-icon{margin:auto}}


/* =========================
   V12.7.2 - Compact Mix Library
   One-row-per-mix desktop layout
   ========================= */
.mix-library-grid{
  gap:7px;
}

.mix-compact-row{
  display:grid;
  grid-template-columns:78px minmax(250px,.85fr) minmax(420px,1.55fr) 42px;
  align-items:center;
  gap:16px;
  min-height:94px;
  padding:9px 12px;
  border:1px solid #292930;
  background:linear-gradient(90deg,#0f0f13,#0a0a0d);
  transition:border-color .16s ease,background .16s ease;
}

.mix-compact-row:hover{
  border-color:#4b272a;
  background:linear-gradient(90deg,#121217,#0b0b0e);
}

.mix-compact-art{
  display:flex;
  align-items:center;
  justify-content:center;
}

.mix-compact-art img{
  width:68px;
  height:68px;
  display:block;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #652126;
  background:#08080a;
}

.mix-compact-info{
  min-width:0;
}

.mix-compact-info h2{
  overflow:hidden;
  margin:3px 0 5px;
  color:#fff;
  font:700 1.18rem/1.05 Oswald;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.mix-compact-tags{
  display:flex;
  gap:4px;
  overflow:hidden;
  white-space:nowrap;
}

.mix-compact-tags span{
  padding:2px 5px;
  border:1px solid #4e2023;
  color:#ff5f5b;
  font-size:.46rem;
  font-weight:900;
  text-transform:uppercase;
}

.mix-compact-stats{
  display:flex;
  align-items:center;
  gap:8px;
  color:#64646d;
  font-size:.54rem;
  white-space:nowrap;
}

.mix-compact-stats strong{
  color:#ff5550;
}

.mix-compact-player{
  min-width:0;
}

.mix-compact-player iframe{
  width:100%;
  height:60px;
  display:block;
}

.mix-compact-actions{
  display:flex;
  align-items:center;
  justify-content:center;
}

.mix-compact-actions a{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #3a3a42;
  color:#888;
  font-size:1rem;
  text-decoration:none;
}

.mix-compact-actions a:hover{
  border-color:#ef0b0b;
  color:#fff;
  background:#1b090b;
}

@media(max-width:1000px){
  .mix-compact-row{
    grid-template-columns:72px minmax(220px,.9fr) minmax(320px,1.4fr) 38px;
    gap:12px;
  }
}

@media(max-width:760px){
  .mix-compact-row{
    grid-template-columns:62px 1fr 36px;
    gap:10px;
    padding:10px;
  }

  .mix-compact-art img{
    width:54px;
    height:54px;
  }

  .mix-compact-player{
    grid-column:1/-1;
  }

  .mix-compact-info h2{
    font-size:1rem;
  }
}

@media(max-width:480px){
  .mix-compact-stats{
    gap:5px;
    flex-wrap:wrap;
    white-space:normal;
  }

  .mix-compact-tags span:nth-child(n+2){
    display:none;
  }
}


/* V12.8.3 - Media Hub mobile readability */
@media(max-width:760px){

  .media-hero p,
  .live-platform-info p,
  .mix-library-toolbar p,
  .mix-library-card-copy p{
    font-size:1rem !important;
    line-height:1.6 !important;
  }

  .mix-compact-stats,
  .mix-library-stats{
    font-size:.82rem !important;
    line-height:1.45 !important;
  }

  .mix-compact-tags span,
  .mix-library-badges span{
    font-size:.76rem !important;
  }

  .mix-compact-info h2{
    font-size:1.2rem !important;
  }

  .mix-library-controls input,
  .mix-library-controls select{
    font-size:1rem !important;
  }

  .media-panel-head h2,
  .live-platform-info h3{
    font-size:1.25rem !important;
  }

  .live-platform-strip small{
    font-size:.82rem !important;
    line-height:1.4 !important;
  }
}


/* V12.9 Live Request System */
.live-request-experience{margin:34px 0 10px;padding:28px;border:1px solid #292930;background:#0a0a0d}
.live-request-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.live-request-head h2{font:700 2.5rem Oswald;margin:4px 0 8px}.live-request-head p{max-width:760px;color:#999}
.live-request-status{display:flex;align-items:center;gap:9px;border:1px solid #333;padding:12px 15px;font:800 .72rem Montserrat;white-space:nowrap}.live-request-status span{width:9px;height:9px;border-radius:50%;background:#666}.live-request-status.open{border-color:#255d35;color:#6ddd8b}.live-request-status.open span{background:#38d66b;box-shadow:0 0 12px #38d66b}.live-request-status.paused{color:#e9b84a}.live-request-status.paused span{background:#e9b84a}
.live-request-closed{margin:20px 0;padding:18px;border-left:3px solid #555;background:#101014}.live-request-closed strong,.live-request-closed span{display:block}.live-request-closed span{color:#888;margin-top:5px}
.live-search-card{margin:20px 0;padding:20px;border:1px solid #292930;background:#0d0d11}.live-song-search{display:flex;gap:10px;margin-top:10px}.live-song-search input{flex:1;min-width:0;background:#08080a;border:1px solid #34343c;color:#fff;padding:0 14px}
.live-song-search-results{display:grid;gap:7px;margin-top:12px}.live-search-result{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px;border:1px solid #292930}.live-search-result img{width:52px;height:52px;object-fit:cover}.live-search-result strong,.live-search-result span{display:block}.live-search-result span{color:#888;font-size:.8rem}.live-search-result button,.public-live-request button{border:1px solid #5b2428;background:#17090b;color:#ff7773;padding:10px 12px;font-weight:800;cursor:pointer}
.live-queue-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:20px;margin-top:24px}.public-live-request{display:grid;grid-template-columns:34px 50px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid #24242a;padding:10px 0}.public-live-request img{width:50px;height:50px;border-radius:7px;object-fit:cover}.public-live-request strong,.public-live-request span{display:block}.public-live-request span{color:#777;font-size:.72rem}.live-rank{font:700 1.2rem Oswald;color:#666}.played-live-request{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #24242a}.played-live-request>span{color:#4ed478}.played-live-request strong,.played-live-request small{display:block}.played-live-request small{color:#777}.live-empty{padding:20px;color:#666;border:1px dashed #303038}
@media(max-width:800px){.live-request-experience{padding:18px}.live-request-head{display:block}.live-request-status{display:inline-flex;margin-top:12px}.live-queue-grid{grid-template-columns:1fr}.live-song-search{display:grid}.live-search-result{grid-template-columns:48px 1fr}.live-search-result button{grid-column:2}.public-live-request{grid-template-columns:28px 1fr auto}.public-live-request img{display:none}}


/* V12.9.3 Twitch-aware Live Hub */
.twitch-static-dot,
[data-twitch-dot]{
  background:#555 !important;
  box-shadow:none !important;
}
.twitch-static-dot.is-live,
[data-twitch-dot].is-live{
  background:#ff1238 !important;
  box-shadow:0 0 12px rgba(255,18,56,.85) !important;
  animation:twitchLivePulse 1.6s ease-in-out infinite;
}
.twitch-static-dot.is-offline,
[data-twitch-dot].is-offline{
  background:#555 !important;
  box-shadow:none !important;
}


/* V12.9.4 - Live Hub green/red state */
.twitch-static-dot.is-live,
[data-twitch-dot].is-live{
  background:#31d267 !important;
  box-shadow:0 0 12px rgba(49,210,103,.9) !important;
}
.twitch-static-dot.is-offline,
[data-twitch-dot].is-offline{
  background:#e51f36 !important;
  box-shadow:0 0 10px rgba(229,31,54,.55) !important;
}


/* =========================
   V12.9.5 - Live Hub status cleanup
   ========================= */
.live-hub-dynamic-status{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.live-hub-dynamic-copy{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  min-width:0;
}

.live-hub-dynamic-copy strong{
  color:#fff;
  font-size:.95rem;
}

.live-hub-dynamic-copy span{
  color:#a7a7ad;
  font-size:.86rem;
}

@media(max-width:760px){
  .live-hub-dynamic-status{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .live-hub-dynamic-copy{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .live-hub-dynamic-copy strong{
    font-size:1rem;
  }

  .live-hub-dynamic-copy span{
    font-size:.92rem;
  }
}