:root{
 --mix-bg:#050507; --mix-panel:#0b0b10; --mix-line:#49395b;
 --mix-text:#fff; --mix-muted:#aaaab5; --mix-purple:#9d3ceb;
 --mix-purple2:#c35cff; --mix-gold:#e5b94f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--mix-bg);color:var(--mix-text);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh;overflow-x:hidden}
.mixfm-page{
 min-height:100vh;padding:24px;
 background:
 radial-gradient(ellipse at 82% 13%,rgba(126,31,220,.22),transparent 28%),
 radial-gradient(ellipse at 7% 80%,rgba(232,28,58,.14),transparent 25%),
 linear-gradient(180deg,#07070a,#030304);
 position:relative;
}
.mixfm-page:before{
 content:"";position:fixed;inset:0;pointer-events:none;opacity:.34;
 background:
 repeating-linear-gradient(48deg,transparent 0 118px,rgba(165,50,245,.12) 119px 122px,transparent 123px 232px);
}
.mixfm-page:after{
 content:"";position:fixed;left:0;right:0;bottom:0;height:330px;pointer-events:none;opacity:.20;
 background:
 repeating-linear-gradient(90deg,transparent 0 23px,rgba(179,56,255,.35) 24px 31px,transparent 32px 48px);
 clip-path:polygon(0 86%,4% 56%,8% 88%,12% 41%,16% 84%,20% 53%,24% 89%,28% 38%,32% 81%,36% 51%,40% 87%,44% 35%,48% 82%,52% 48%,56% 89%,60% 42%,64% 83%,68% 52%,72% 88%,76% 40%,80% 84%,84% 55%,88% 89%,92% 44%,96% 82%,100% 58%,100% 100%,0 100%);
}
.mixfm-frame{
 position:relative;z-index:1;max-width:1660px;margin:0 auto;
 min-height:930px;border:1px solid #312b39;border-radius:34px;
 background:rgba(7,7,11,.94);padding:26px 54px 58px;
 box-shadow:0 35px 100px rgba(0,0,0,.38);
}
.mixfm-brand-lock{height:auto;display:flex;align-items:flex-start;justify-content:center;overflow:visible}
.mixfm-brand-lock img{width:min(980px,92vw);height:auto;object-fit:contain;display:block}

.mixfm-player{
 max-width:1400px;margin:-6px auto 0;padding:34px 38px;
 display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;
 background:#0c0c12;border:1px solid var(--mix-line);border-radius:28px;
 box-shadow:0 25px 70px rgba(0,0,0,.30);
}
.mixfm-cover-box{
 width:250px;height:250px;border-radius:20px;overflow:hidden;
 border:2px solid #9645de;background:#170a28;
}
.mixfm-cover-box img{width:100%;height:100%;object-fit:cover;display:block}
.mixfm-track{min-width:0;display:flex;flex-direction:column}
.mixfm-eyebrow{font-size:18px;font-weight:900;letter-spacing:.03em;color:#c45cff;margin-top:4px}
.mixfm-artist{font-size:27px;font-weight:900;margin-top:22px}
.mixfm-title{font-size:46px;line-height:1.06;font-weight:900;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mixfm-meta{font-size:15px;color:#b7b7c0;margin-top:16px}
.mixfm-status{height:18px;margin-top:5px;font-size:12px;color:#b7b7c0}
.mixfm-controls{
 margin-top:auto;padding-top:20px;display:grid;
 grid-template-columns:295px 370px minmax(220px,1fr);gap:28px;align-items:center;
}
.mixfm-btn{
 height:60px;border-radius:30px;display:flex;align-items:center;justify-content:center;gap:10px;
 font-size:17px;font-weight:900;cursor:pointer;white-space:nowrap;
}
.mixfm-btn-web{border:0;color:#fff;background:linear-gradient(135deg,#9634e9,#aa40f7)}
.mixfm-btn-flac{border:2px solid var(--mix-gold);color:#efc45a;background:#19191e}
.mixfm-volume{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:#a9a9b2;font-size:13px;font-weight:900}
.mixfm-volume input{width:185px;accent-color:#9d3ceb}

@media(max-width:1100px){
 .mixfm-frame{padding:20px}
 .mixfm-brand-lock{height:auto}.mixfm-brand-lock img{width:min(760px,92vw);height:auto;object-fit:contain}
 .mixfm-player{grid-template-columns:180px 1fr}.mixfm-cover-box{width:180px;height:180px}
 .mixfm-title{font-size:34px}
 .mixfm-controls{grid-column:1/3;grid-template-columns:1fr 1fr}.mixfm-volume{grid-column:1/3;justify-content:center}
}
@media(max-width:700px){
 .mixfm-page{padding:10px}.mixfm-frame{border-radius:20px;padding:12px}
 .mixfm-brand-lock{height:auto;overflow:visible;padding:8px 0 18px}.mixfm-brand-lock img{width:100%;max-width:100%;height:auto;object-fit:contain}
 .mixfm-player{grid-template-columns:105px 1fr;gap:18px;padding:18px;border-radius:20px}
 .mixfm-cover-box{width:105px;height:105px;border-radius:13px}
 .mixfm-eyebrow{font-size:13px}.mixfm-artist{font-size:17px;margin-top:10px}
 .mixfm-title{font-size:25px}.mixfm-meta{font-size:12px;margin-top:8px}
 .mixfm-controls{grid-column:1/3;display:flex;flex-direction:column;gap:12px}
 .mixfm-btn{width:100%}.mixfm-volume{width:100%;justify-content:center}
}

/* v6: full MIX FM logo on every viewport — no crop */
.mixfm-brand-lock{overflow:visible!important;height:auto!important}
.mixfm-brand-lock img{
  display:block!important;
  width:min(980px,100%)!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center top!important;
}
@media(max-width:700px){
  .mixfm-brand-lock{padding:4px 0 16px!important;overflow:visible!important}
  .mixfm-brand-lock img{width:100%!important;height:auto!important;max-width:100%!important}
}

/* v7 transparent brand-lockup: no baked background/shadow */
.mixfm-brand-lock img{
  background:transparent!important;
  filter:none!important;
}