/* Magic 1Xtra DJ Mix detail: responsive parity, scoped to existing audio/video switch.
   No route, media source, play/download or navigation changes. */
#page:has(.djmix-media-switch) { --mix-hot:#ff126a; --mix-line:#334461; }
#page:has(.djmix-media-switch) .xtra-page-title { max-width:1320px; margin:10px auto 18px!important; display:flex!important; gap:14px!important; align-items:center!important; }
#page:has(.djmix-media-switch) .xtra-page-title h1 { font-size:clamp(15px,1.55vw,22px)!important; font-weight:800!important; line-height:1.25!important; overflow-wrap:anywhere; margin:0!important; }
#page:has(.djmix-media-switch) .xtra-page-title p { color:#aebbd0!important; margin:5px 0 0!important; }
#page:has(.djmix-media-switch) .flutter-media-detail { width:min(100%,1320px)!important; max-width:1320px!important; margin:0 auto!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:minmax(250px, .8fr) minmax(0, 1.45fr)!important; gap:clamp(22px,3vw,48px)!important; align-items:center!important; min-height:0!important; padding:clamp(12px,2vw,28px)!important; background:radial-gradient(ellipse at 85% 12%,rgba(28,70,134,.2),transparent 66%),linear-gradient(125deg,#0b1224,#07111f)!important; border:1px solid rgba(123,155,208,.20)!important; border-radius:26px!important; box-shadow:0 18px 55px rgba(0,0,0,.17)!important; overflow:visible!important; }
#page:has(.djmix-media-switch) .flutter-media-detail::before {display:none!important;}
#page:has(.djmix-media-switch) .detail-image { width:100%!important; aspect-ratio: 4/3!important; max-height:none!important; min-height:0!important; background-position:center!important; background-size:contain!important; background-repeat:no-repeat!important; background-color:#03050a!important; border:1px solid #293958!important; border-radius:20px!important; box-shadow:0 8px 35px rgba(0,0,0,.24)!important; }
#page:has(.djmix-media-switch) .media-detail-copy {min-width:0!important; max-width:none!important; padding:4px!important; align-self:center!important;}
#page:has(.djmix-media-switch) .media-detail-copy h2 {font-size:clamp(25px,3.3vw,46px)!important; line-height:1.15!important; margin:0 0 12px!important; overflow-wrap:anywhere!important; letter-spacing:-.025em!important;}
#page:has(.djmix-media-switch) .media-kind {font-size:13px!important; font-weight:800!important; color:#ffa3c7!important; letter-spacing:.05em; text-transform:uppercase; margin:0 0 16px!important;}
#page:has(.djmix-media-switch) .media-description {font-size:clamp(13px,1.3vw,16px)!important; line-height:1.55!important; margin:0 0 20px!important; color:#c8d2e1!important;}
#page:has(.djmix-media-switch) .djmix-media-switch { margin:15px 0!important; gap:10px!important; background:#08101e!important; border:1px solid #283754!important; border-radius:17px!important; }
#page:has(.djmix-media-switch) .djmix-media-option {min-height:72px!important; border-radius:12px!important;}
#page:has(.djmix-media-switch) .djmix-media-option.active {border-color:#f92878!important;background:linear-gradient(115deg,rgba(255,18,106,.24),rgba(255,18,106,.06))!important;}
#page:has(.djmix-media-switch) .media-detail-actions {display:flex!important; flex-wrap:wrap!important; gap:12px!important; margin:16px 0 0!important; align-items:stretch!important;}
#page:has(.djmix-media-switch) .media-detail-actions #playNow,
#page:has(.djmix-media-switch) .media-detail-actions #downloadNow {display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; min-width:170px!important; min-height:56px!important; padding:13px 18px!important; font-size:16px!important; font-weight:800!important; border-radius:14px!important; cursor:pointer!important; white-space:normal!important; text-align:center!important;}
#page:has(.djmix-media-switch) #playNow {color:#fff!important; background:linear-gradient(125deg,#ff2d76,#f00060)!important; border:1px solid #ff4088!important; box-shadow:0 8px 24px #ff146326!important;}
#page:has(.djmix-media-switch) #downloadNow {color:#fff!important; background:#17192d!important; border:2px solid #ff2a78!important;}
#page:has(.djmix-media-switch) #playNow:focus-visible,
#page:has(.djmix-media-switch) #downloadNow:focus-visible {outline:3px solid #fff!important;outline-offset:3px!important;}
#page:has(.djmix-media-switch) .download-note {margin:16px 0 0!important; color:#b9c7d9!important; font-size:13px!important; line-height:1.5!important;}
@media (max-width: 800px) {
 #page:has(.djmix-media-switch) {min-width:0!important; box-sizing:border-box!important; overflow-x:clip!important; padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))!important;}
 #page:has(.djmix-media-switch) .xtra-page-title {margin:8px 12px 15px!important;}
 #page:has(.djmix-media-switch) .xtra-page-title h1 {font-size:16px!important;line-height:1.25!important;}
 #page:has(.djmix-media-switch) .flutter-media-detail {display:flex!important;flex-direction:column!important;align-items:stretch!important;grid-template-columns:none!important;gap:22px!important; width:calc(100% - 24px)!important;margin:0 12px!important;padding:14px!important;border-radius:20px!important;}
 #page:has(.djmix-media-switch) .detail-image {width:100%!important;aspect-ratio: 16/11!important;min-height:0!important;max-height:none!important; border-radius:15px!important;}
 #page:has(.djmix-media-switch) .media-detail-copy {width:100%!important;}
 #page:has(.djmix-media-switch) .media-detail-copy h2 {font-size:clamp(23px,6.3vw,34px)!important;line-height:1.17!important;}
 #page:has(.djmix-media-switch) .djmix-media-option {min-height:62px!important;gap:7px!important;padding:8px!important;}
 #page:has(.djmix-media-switch) .media-detail-actions {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
 #page:has(.djmix-media-switch) .media-detail-actions #playNow,
 #page:has(.djmix-media-switch) .media-detail-actions #downloadNow {width:100%!important;min-width:0!important;min-height:57px!important;}
 #page:has(.djmix-media-switch) .download-note {font-size:12px!important;}
}
@media (max-width: 370px) {
 #page:has(.djmix-media-switch) .djmix-media-option .djmix-media-icon{width:32px!important;height:32px!important;flex-basis:32px!important;}
 #page:has(.djmix-media-switch) .djmix-media-option strong{font-size:13px!important;}
 #page:has(.djmix-media-switch) .djmix-media-option small{font-size:10px!important;}
}