/* MuzGar v3: scoped visual redesign; pre-existing classes/IDs preserved. */
:root{color-scheme:dark;--mg-bg:#081013;--mg-card:#101d20;--mg-card2:#17272a;--mg-line:rgba(240,246,242,.1);--mg-text:#f5f8f4;--mg-muted:#a5b6b4;--mg-gold:#e9c27b;--mg-accent:#67d7c2;--mg-r:18px;--mg-shadow:0 18px 44px rgba(0,0,0,.22)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--mg-text);background:radial-gradient(circle at 12% 0%,#143332 0%,transparent 34%),radial-gradient(circle at 98% 22%,#142525 0%,transparent 32%),var(--mg-bg);font:400 15px/1.55 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;text-align:left;min-width:0}
body,button,input,textarea,select{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important}
a{color:inherit;transition:color .16s ease,background-color .16s ease;text-decoration:none}
a:hover{color:var(--mg-accent)}
button{cursor:pointer}img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--mg-accent)!important;outline-offset:3px}
.main-center-block{width:min(1320px,calc(100% - 48px));margin:auto;max-width:100%;text-align:left}
.body2{background:none!important;min-height:100vh}
.head-block{height:116px;display:flex;align-items:center;justify-content:flex-start;position:relative;padding:0 24px}
.logo{position:relative;left:auto;top:auto;display:block;width:245px;height:85px;margin:0;background-image:url(/images/logo.png);background-size:contain;background-position:left center;background-repeat:no-repeat;filter:drop-shadow(0 3px 18px rgba(233,194,123,.14))}
.content-block{background:rgba(15,27,30,.94);border:1px solid var(--mg-line);border-radius:26px;box-shadow:0 28px 86px rgba(0,0,0,.28);padding:0 23px 18px;overflow:visible;display:flow-root}
.top-menu{height:auto!important;min-height:61px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 -23px 18px!important;padding:8px 18px;background:#12272a!important;border-bottom:1px solid var(--mg-line);border-radius:25px 25px 0 0;float:none!important;list-style:none}
.top-menu li,.top-menu li:last-child{height:auto!important;float:none!important;position:relative;list-style:none}
.top-menu-link,.menu-more-link{background:transparent!important;border:0;display:inline-flex;align-items:center;justify-content:center;height:41px;line-height:normal;padding:0 14px;border-radius:12px;color:#d9e9e5!important;font-weight:650;letter-spacing:.01em;font-size:13px;text-transform:none}
.top-menu-link:hover,.top-menu-link[aria-current="page"],.top-menu-link.is-active{color:#061915!important;background:var(--mg-gold)!important}
.mob-menu{display:none}
.search-block{position:relative;width:100%;height:auto;min-height:56px;margin:0 0 24px;padding:0;float:none;background:transparent}
.search-block form{display:flex;align-items:center;gap:8px;max-width:680px;margin:0!important;position:relative}
.search-block .form-text,.search-block input[name="story"]{display:block;min-height:53px;width:100%;float:none;padding:0 62px 0 20px!important;color:var(--mg-text);background:#0b181b;border:1px solid rgba(255,255,255,.16);border-radius:16px;font-size:15px;box-shadow:inset 0 1px 4px rgba(0,0,0,.17)}
.search-block .form-text:focus{border-color:var(--mg-accent);outline:none}
.search-block .form-search{position:absolute;right:10px;top:10px;width:34px;height:33px;padding:8px;background:var(--mg-gold);border-radius:11px;object-fit:contain;border:0}
.left-col{width:calc(100% - 337px);margin:0 23px 0 0;float:left;color:var(--mg-text);min-width:0}
.right-col{width:314px;float:right;margin:0;color:var(--mg-text)}
.main-block{background:var(--mg-card)!important;border:1px solid var(--mg-line);border-radius:var(--mg-r);box-shadow:0 6px 22px rgba(0,0,0,.12);overflow:hidden;margin:0 0 18px;padding:0}
.main-block-title{color:var(--mg-text);font-size:18px;font-weight:760;line-height:1.35;letter-spacing:-.02em;padding:17px 19px;border-bottom:1px solid var(--mg-line);background:linear-gradient(120deg,rgba(233,194,123,.09),transparent 65%);min-height:0;height:auto}
.main-block-title h1{font-size:21px;color:var(--mg-text);line-height:1.4}
.main-block-title img{display:none!important}
.main-block-content{padding:10px 13px 13px;display:flow-root;background:transparent!important}
.cols-news{width:calc(50% - 9px);margin:0 18px 0 0;float:left;color:var(--mg-text)}
.cols-news:nth-child(2){margin-right:0}
.cols-news:first-child{margin-right:18px}
.top-news{display:flex;align-items:center;gap:12px;min-height:63px;margin:3px 0;padding:8px 10px;background:transparent;border-radius:12px;color:var(--mg-text)}
.top-news:hover{background:var(--mg-card2)}
.top-news-image{flex:none;overflow:hidden;border-radius:10px;width:47px;height:47px}
.top-news-image img{width:100%;height:100%;object-fit:cover}
.top-news-title{color:var(--mg-text);font-weight:680;font-size:14px;line-height:1.34;min-width:0}
.top-news-title i{display:block;color:var(--mg-muted);font-size:12px;font-style:normal;font-weight:450}
.top-singer{display:block;position:relative;color:#d9e6e3;padding:10px 10px 10px 36px;margin-bottom:3px;border-radius:9px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;line-height:1.4}
.top-singer:hover{background:var(--mg-card2)}
.top-singer i{position:absolute;left:7px;top:9px;font-style:normal;color:var(--mg-gold);font-weight:800}
.main-news{display:flex;align-items:center;gap:15px;min-width:0;min-height:94px;padding:13px 10px;margin:0;border-bottom:1px solid var(--mg-line);position:relative;background:transparent;transition:background-color .17s}
.main-news:last-child{border-bottom:0}.main-news:hover{background:#192b2e}
.main-news-image,.track-card{position:relative;flex:0 0 68px;width:68px;height:68px;overflow:hidden;border-radius:14px;margin:0!important;background:#223533;float:none!important}
.main-news-image img,.track-card img{width:100%;height:100%;display:block;object-fit:cover}
.track-card__play{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:37px;height:37px;border:none;border-radius:50%;display:grid;place-items:center;background:rgba(4,23,25,.75);color:white;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.24);backdrop-filter:blur(5px)}
.track-card__play:hover{background:var(--mg-gold);color:#0b1c1c;transform:scale(1.04)}
.track-card__play svg{width:18px;height:18px;fill:currentColor}.track-card .ico-pause{display:none}.track-card.playing .ico-play{display:none}.track-card.playing .ico-pause{display:block}
.main-news-text{min-width:0;flex:1;float:none!important;width:auto!important;margin:0!important;padding:0!important;overflow:hidden}
.main-news-title{display:block;color:var(--mg-text);font-size:15px;font-weight:720;line-height:1.33;overflow-wrap:anywhere}
.main-news-title .top-news-title-author{display:block;color:var(--mg-muted);font-size:12px;font-weight:540;margin-bottom:5px}
.main-news-title i{display:block;font-size:15px;font-weight:720;font-style:normal;color:var(--mg-text)}
.main-news.playing .main-news-title i,.main-news.playing .main-news-title{color:var(--mg-accent)}
.main-news-right{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0;padding:0;float:none!important}
.main-news-more{margin:0!important;flex:none}.main-news-more a{display:block}
.main-news-rating{display:none}
.track-mini{display:flex;gap:8px;align-items:center;opacity:0;max-height:0;margin:0;overflow:hidden;transition:opacity .2s,max-height .2s}
.main-news.playing .track-mini{opacity:1;max-height:30px;margin-top:5px}
.mini-current,.mini-duration{font-size:11px;color:var(--mg-muted);font-variant-numeric:tabular-nums}
.mini-range,.tp-range{accent-color:var(--mg-gold);min-width:0;cursor:pointer}
.main-block .navigation,.bottom-nav,.nav-load{text-align:center;color:var(--mg-muted)}
.nav-load a,#nav-load a{display:inline-block;padding:10px 23px;background:#254341;color:var(--mg-text);border-radius:12px}
.footer{background:transparent!important;border:none!important;padding:23px 8px 32px;box-shadow:none;color:var(--mg-muted)}
.footer-menu a{color:var(--mg-muted);padding:6px 12px;display:inline-block}.footer-menu a:hover{color:var(--mg-gold)}
.footer-text{color:var(--mg-muted);font-size:12px;line-height:1.7}
.footer-right{max-width:100%}
input:not([type=range]):not([type=image]):not([type=hidden]),textarea,select{border-radius:11px;background:#14272a;border:1px solid var(--mg-line);color:var(--mg-text)}
input[type=submit],button:not(.track-card__play):not(.tp-action):not(.tp-vol-btn):not(.mg-control){border-radius:11px}
/* Full track page: preserve the entire existing .track-player hierarchy */
.full-news{--track-bg:none;position:relative;overflow:hidden;border-radius:18px;background:#15302f;padding:21px;margin:0 0 15px;isolation:isolate}
.full-news::before{content:"";position:absolute;inset:-35px;background-image:var(--track-bg);background-position:center;background-size:cover;filter:blur(38px) brightness(.34);z-index:-2;opacity:.82}
.full-news::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(4,16,19,.65),rgba(8,37,39,.69))}
.full-news-player{border:0!important;border-radius:16px;background:rgba(6,18,21,.42)!important;padding:18px!important;box-shadow:none!important;backdrop-filter:none!important}
.track-player{width:100%;max-width:100%;display:flex;align-items:center;gap:22px}
.track-player__cover{flex:0 0 200px;max-width:200px;overflow:hidden;border-radius:16px;animation:none!important}
.track-player__cover img{width:200px;height:200px;max-width:100%;object-fit:cover;border-radius:15px}
.track-player__body{flex:1;min-width:0}
.track-player__title{color:white;font-size:clamp(21px,2.4vw,28px);line-height:1.2;margin:0 0 8px;font-weight:830}
.track-player__artist,.track-player__artist a{color:#e7f3ed;font-size:14px}
.track-player__submeta{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0;color:#dce5df}
.track-player__info{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0;color:#e4f0e7}
.tp-info{background:rgba(250,250,250,.11);border-radius:8px;color:#d4e5df;padding:5px 8px;font-size:11px}
.tp-info span,.tp-ico{color:#dbece4}
.tp-meta-genre{background:rgba(233,194,123,.12);color:var(--mg-gold)}
.tp-meta-genre a{color:inherit}
.track-player__controls{display:flex;gap:12px;align-items:center;margin:17px 0 7px}
.tp-action{height:42px!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.15);border-radius:12px!important;padding:0 18px;background:#f0c982!important;color:#0c2524!important;font-weight:780;font-size:13px;white-space:nowrap}
.tp-action svg{width:18px;height:18px;color:inherit;fill:currentColor}.tp-action:hover{background:var(--mg-accent)!important;color:#0b2220!important}
.tp-download{margin-left:0!important;box-shadow:none!important;background:rgba(255,255,255,.13)!important;color:#fff!important}.tp-download:hover{background:rgba(255,255,255,.23)!important}
.tp-ico-pause{display:none}.track-player.playing .tp-ico-play{display:none}.track-player.playing .tp-ico-pause{display:block}
.track-player__bar{display:flex!important;max-height:45px!important;opacity:1!important;gap:9px;align-items:center;margin:15px 0 0}
.tp-time{color:#d5e4e1;font-size:12px;font-variant-numeric:tabular-nums}.tp-volume{display:flex;align-items:center;gap:8px}.tp-vol-range{accent-color:var(--mg-gold)}
.dle-rating-line{display:flex;align-items:center;gap:10px;margin:15px 0;color:#e3e5e2}.dle-rating-empty{color:var(--mg-gold)}
body.mg-has-player{padding-bottom:112px}
/* Persistent player, created lazily on first play */
#mg-audio-bar{position:fixed;left:50%;bottom:14px;transform:translate(-50%,130%);z-index:2147480000;display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.2fr);align-items:center;gap:16px;width:min(1110px,calc(100vw - 28px));height:85px;padding:11px 17px;color:white;background:rgba(17,37,38,.98);border:1px solid rgba(233,194,123,.24);border-radius:19px;box-shadow:0 20px 65px rgba(0,0,0,.56);transition:transform .28s ease;visibility:hidden}
#mg-audio-bar.mg-visible{transform:translate(-50%,0);visibility:visible}
.mg-now{min-width:0;display:flex;align-items:center;gap:12px}
.mg-cover{flex:0 0 57px;width:57px;height:57px;border-radius:10px;object-fit:cover;background:#284341}
.mg-now-text{min-width:0;overflow:hidden}.mg-now-title,.mg-now-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-now-title{font-size:14px;font-weight:750}.mg-now-artist{font-size:12px;color:var(--mg-muted)}
.mg-center{display:flex;align-items:center;gap:7px}.mg-right{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}
.mg-control{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#dbe9e5}.mg-control:hover{background:rgba(255,255,255,.12)}.mg-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.mg-control.mg-primary{width:43px;height:43px;background:var(--mg-gold);color:#102322}.mg-primary svg{fill:currentColor;stroke:none}
.mg-seek{display:flex;align-items:center;gap:9px;min-width:0;width:100%}.mg-time{color:var(--mg-muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
#mg-audio-bar input[type=range]{min-width:0;width:100%;margin:0;accent-color:var(--mg-gold);cursor:pointer;background:transparent}
#mg-audio-bar .mg-volume-range{width:80px}.mg-seek-range{flex:1}.mg-error{color:#ffb4a7;font-size:11px;max-width:110px}
.mg-loading .mg-primary{opacity:.6;cursor:wait}
.mg-nav-loading .left-col{opacity:.62;transition:opacity .16s}
@media(max-width:1040px){.main-center-block{width:min(100% - 24px,970px)}.content-block{padding:0 14px 16px}.top-menu{margin-left:-14px!important;margin-right:-14px!important}.left-col{width:calc(100% - 282px);margin-right:16px}.right-col{width:266px}.main-news-right{display:none}.track-player__cover{flex-basis:155px}.track-player__cover img{width:155px;height:155px}}
@media(max-width:750px){.main-center-block{width:100%;padding:0 9px}.head-block{height:85px;padding:0 8px}.logo{width:195px;height:67px}.content-block{padding:0 10px 12px;border-radius:17px}.mob-menu{display:block!important;min-height:47px;line-height:47px;margin:0 -10px;padding:0 17px;background:#183333;color:var(--mg-gold);font-weight:760;cursor:pointer;border-radius:16px 16px 0 0}.top-menu{display:none;clear:both;float:none;position:relative;margin:0 -10px 12px!important;padding:9px;border-radius:0;background:#142b2b!important}.top-menu.mg-open{display:flex!important;flex-direction:column;align-items:stretch;gap:4px}.top-menu li{display:block;width:100%}.top-menu-link{display:flex!important;justify-content:flex-start;width:100%}.search-block{margin:12px 0 17px}.search-block form{max-width:100%}.left-col,.right-col{width:100%;float:none;margin:0}.right-col{margin-top:18px}.main-block-title{font-size:16px;padding:14px}.main-block-title h1{font-size:19px}.cols-news{float:none;width:100%;margin:0!important}.main-news{gap:10px;min-height:77px;padding:9px 5px}.main-news-image,.track-card{flex-basis:55px;width:55px;height:55px;border-radius:10px}.main-news-title i{font-size:14px}.track-card__play{width:32px;height:32px}.main-block-content{padding:8px}.full-news{padding:10px}.full-news-player{padding:10px!important}.track-player{flex-direction:column;gap:15px}.track-player__cover{flex-basis:auto;width:140px;max-width:140px}.track-player__cover img{width:140px;height:140px}.track-player__body{width:100%;text-align:center}.track-player__artist,.track-player__submeta,.track-player__info,.track-player__controls,.track-player__bar{justify-content:center}.track-player__info{gap:5px}.tp-info{font-size:10px}.footer-menu{text-align:center}.footer-text{text-align:center}body.mg-has-player{padding-bottom:111px}#mg-audio-bar{bottom:0;left:0;transform:translateY(130%);width:100%;height:93px;padding:8px 11px 12px;border-radius:15px 15px 0 0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:46px 22px;gap:3px 8px}#mg-audio-bar.mg-visible{transform:translateY(0)}.mg-now{grid-column:1;grid-row:1}.mg-cover{width:42px;height:42px;flex-basis:42px}.mg-now-title{font-size:13px}.mg-center{grid-column:2;grid-row:1}.mg-center .mg-control[data-act=prev],.mg-center .mg-control[data-act=next]{width:27px}.mg-center .mg-primary{width:39px;height:39px}.mg-right{grid-row:2;grid-column:1 / -1}.mg-right .mg-control[data-act=mute],.mg-volume-range,.mg-right .mg-control[data-act=close]{display:none}.mg-seek{width:100%}.mg-right .mg-seek{order:1}.mg-time{font-size:10px}}
@media(max-width:380px){.mg-center .mg-control[data-act=prev],.mg-center .mg-control[data-act=next]{display:none}.track-player__info{gap:3px}.tp-action{padding:0 11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ===== MuzGar Modern Streaming Home v4 ===== */
.head-block{display:flex;align-items:center;gap:22px;justify-content:space-between;min-height:98px;padding:18px 24px;flex-wrap:wrap}
.logo{flex:0 0 auto}
.head-extras{display:flex;align-items:center;gap:18px;flex:1;min-width:0;justify-content:flex-end}
.top-menu{margin:0!important;display:flex;align-items:center;gap:6px;float:none!important}
.top-menu li{float:none!important}
.top-menu-link{height:42px;display:inline-flex!important;align-items:center;justify-content:center;padding:0 16px;border-radius:13px;font-weight:700;font-size:14px;color:#d9ebe6;background:transparent;border:1px solid transparent}
.top-menu-link:hover,.top-menu-link.is-active{background:rgba(103,215,194,.12);border-color:rgba(103,215,194,.24);color:var(--mg-accent)}
.search-block{margin:0!important;flex:0 1 380px;float:none!important}
.search-block form{max-width:none}.search-block .form-text{height:46px;padding-left:18px;padding-right:44px;border-radius:999px;background:#0e1d20;border-color:rgba(255,255,255,.08);box-shadow:none}
.form-search{right:14px;top:50%;transform:translateY(-50%);opacity:.74}
.mg-home{display:flex;flex-direction:column;gap:18px}
.mg-hero-track{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.72fr);gap:20px;align-items:center;min-height:360px;padding:28px;border-radius:28px;background:linear-gradient(125deg,rgba(6,17,20,.72),rgba(8,24,26,.18));overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 70px rgba(0,0,0,.28)}
.mg-hero-track::before{content:"";position:absolute;inset:0;background-image:var(--hero-bg);background-size:cover;background-position:center;filter:brightness(.52) saturate(1.05);z-index:-3;transform:scale(1.03)}
.mg-hero-track::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(4,16,19,.94) 0%,rgba(7,21,24,.84) 38%,rgba(7,21,24,.28) 70%,rgba(7,21,24,.62) 100%);z-index:-2}
.mg-hero-copy{min-width:0;max-width:640px;display:flex;flex-direction:column;align-items:flex-start}
.mg-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(12,41,42,.7);color:var(--mg-gold);font-size:12px;line-height:1;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:15px}
.mg-hero-title{margin:0 0 10px;font-size:clamp(32px,4.4vw,58px);line-height:.95;font-weight:860;letter-spacing:-.03em;text-wrap:balance;max-width:8.8em}
.mg-hero-artist{font-size:clamp(16px,1.5vw,23px);line-height:1.25;color:#d7ebe6;font-weight:750;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.mg-hero-desc{max-width:560px;margin:0 0 24px;color:#c4d7d2;font-size:15px;line-height:1.75}
.mg-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mg-main-btn,.mg-secondary-btn,.mg-ghost-btn{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 22px;border-radius:999px;text-decoration:none;font-weight:780;font-size:14px;border:1px solid transparent;cursor:pointer}
.mg-main-btn{background:linear-gradient(180deg,#45f0d5,#1fcfbc);color:#082322;box-shadow:0 10px 24px rgba(33,212,191,.28)}
.mg-main-btn:hover{color:#071f1e;background:linear-gradient(180deg,#55f4dc,#23d5c1)}
.mg-secondary-btn{background:rgba(255,255,255,.08);color:#f2f6f4;border-color:rgba(255,255,255,.12)}
.mg-ghost-btn{background:rgba(10,26,28,.58);color:#d7ebe6;border-color:rgba(255,255,255,.1)}
.mg-main-btn svg,.mg-secondary-btn svg{width:18px;height:18px;fill:currentColor;stroke:none}
.mg-hero-side{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.mg-hero-art{width:min(340px,100%);aspect-ratio:1/1.08;border-radius:28px;overflow:hidden;box-shadow:0 18px 34px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.1);background:#0d1c1f}
.mg-hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.mg-chipbar{display:flex;gap:10px;flex-wrap:wrap;padding:0 3px}
.mg-chip{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:#0f1f22;color:#cbded9;border:1px solid rgba(255,255,255,.07);font-size:13px;font-weight:720;text-decoration:none}
.mg-chip:hover,.mg-chip.is-active{background:rgba(103,215,194,.12);border-color:rgba(103,215,194,.25);color:var(--mg-accent)}
.mg-home-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.72fr);gap:18px}
.mg-home-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.mg-home-side{min-width:0;display:flex;flex-direction:column;gap:18px}
.mg-section-head,.main-block-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mg-section-head .mg-link,.main-block-title .mg-link{font-size:13px;color:var(--mg-accent);font-weight:700;white-space:nowrap}
.mg-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mg-track-card{display:flex;flex-direction:column;gap:12px;border-radius:20px;background:linear-gradient(180deg,#112326,#0d181b);border:1px solid rgba(255,255,255,.06);overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.17)}
.mg-track-card:hover{transform:translateY(-2px);border-color:rgba(233,194,123,.18)}
.mg-track-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#112226}
.mg-track-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease}
.mg-track-card:hover .mg-track-thumb img{transform:scale(1.04)}
.mg-track-play{position:absolute;left:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(9,24,26,.8);backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.35);cursor:pointer}
.mg-track-play svg{width:18px;height:18px;fill:currentColor}.mg-track-play .ico-pause{display:none}.mg-track-card.playing .ico-play{display:none}.mg-track-card.playing .ico-pause{display:block}
.mg-track-body{padding:0 14px 14px}
.mg-track-name,.mg-track-artist{display:block;text-decoration:none}.mg-track-name{font-size:16px;font-weight:760;line-height:1.3;color:#f4f7f5;margin-bottom:5px}.mg-track-artist{font-size:13px;line-height:1.4;color:var(--mg-muted)}
.mg-rank-panel .main-block-content{padding:14px 14px 10px;counter-reset:mgRank}
.top-news{display:grid;grid-template-columns:34px 56px minmax(0,1fr);align-items:center;gap:12px;padding:10px 8px;border-radius:15px;text-decoration:none;border:1px solid transparent;counter-increment:mgRank}
.top-news:hover{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.06)}
.top-news-image{width:56px;height:56px;border-radius:14px;overflow:hidden;box-shadow:0 9px 18px rgba(0,0,0,.18)}
.top-news-image img{width:100%;height:100%;object-fit:cover;display:block}
.mg-rank-no{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:rgba(103,215,194,.1);color:var(--mg-accent);font-size:14px;font-weight:820}.mg-rank-no::before{content:counter(mgRank)}
.top-news-title{display:flex;flex-direction:column;min-width:0;gap:2px}
.top-news-title-author{font-size:16px;font-weight:760;color:#f5f8f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-news-title i{font-size:13px;color:var(--mg-muted);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-list-block .main-block-content{display:flex;flex-direction:column;gap:8px}
.mg-list-block .main-news{margin:0}
.right-col .topsinger .main-block-content{display:flex;flex-direction:column;gap:10px}
.top-singer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:14px;background:#122225;border:1px solid rgba(255,255,255,.05);font-size:14px;font-weight:700;text-decoration:none}.top-singer i{font-style:normal;color:var(--mg-gold);font-size:13px;min-width:22px;text-align:right}
.login-box,.login-form{border-radius:16px}
.mg-cta-panel{padding:18px;border-radius:20px;background:linear-gradient(140deg,rgba(24,51,52,.78),rgba(17,29,32,.96));border:1px solid rgba(255,255,255,.07)}
.mg-cta-panel h3{margin:0 0 8px;font-size:20px;line-height:1.2}.mg-cta-panel p{margin:0 0 16px;color:var(--mg-muted)}
.mg-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.main-news{padding-right:12px}
.main-news-title{margin-bottom:4px}
.footer{margin-top:24px}
@media(max-width:1220px){.mg-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.search-block{flex-basis:300px}.mg-home-split{grid-template-columns:1fr 300px}}
@media(max-width:980px){.head-block{padding:15px 18px}.head-extras{width:100%;justify-content:space-between}.search-block{flex:1 1 100%}.mg-hero-track{grid-template-columns:1fr;min-height:unset;padding:24px}.mg-hero-copy{max-width:none}.mg-hero-title{max-width:none}.mg-hero-side{justify-content:center}.mg-hero-art{width:min(100%,390px)}.mg-home-split{grid-template-columns:1fr}.mg-home-side{order:2}.mg-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){.head-block{display:block;padding:16px 12px 10px}.logo{margin:0 auto 10px}.head-extras{display:block}.search-block{margin:12px 0 0!important}.mg-chipbar{overflow:auto;flex-wrap:nowrap;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none}.mg-chipbar::-webkit-scrollbar{display:none}.mg-hero-track{padding:18px;border-radius:22px}.mg-hero-badge{font-size:11px}.mg-hero-title{font-size:34px}.mg-hero-artist{font-size:15px}.mg-hero-actions{gap:10px}.mg-main-btn,.mg-secondary-btn,.mg-ghost-btn{height:46px;padding:0 16px;font-size:13px}.mg-home-split{gap:14px}.mg-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mg-track-body{padding:0 11px 12px}.mg-track-name{font-size:14px}.top-news{grid-template-columns:30px 50px minmax(0,1fr);gap:10px;padding:8px 6px}.top-news-image{width:50px;height:50px;border-radius:12px}.top-news-title-author{font-size:14px}.top-news-title i{font-size:12px}}
@media(max-width:430px){.mg-card-grid{grid-template-columns:1fr 1fr}.mg-track-play{width:38px;height:38px}.mg-track-play svg{width:16px;height:16px}.mg-hero-title{font-size:30px}.mg-hero-desc{font-size:14px}}

/* ===========================================================
   MuzGar Modern v4.1: visual layout repair for Jino/DLE17
   No original HTML class names or IDs removed.
   =========================================================== */
:root{--mg-bg:#071316;--mg-card:#102024;--mg-card2:#152b2d;--mg-accent:#34dec4;--mg-gold:#eac982;--mg-muted:#a0b3b5}
html,body{max-width:100%;overflow-x:clip}
body{font-size:15px;background:#071316 radial-gradient(ellipse 65% 420px at 50% -100px,#103333,transparent) no-repeat}
.main-center-block{width:min(1480px,calc(100% - 28px))!important;max-width:100%;margin:auto}
.content-block{padding:0 22px 14px!important;max-width:100%;background:#0a171b!important;border-radius:22px;display:flow-root}
/* The homepage has its own rankings column, so do not constrain it to the
   2-column legacy DLE layout or repeat the old right sidebar. */
.content-block:has(.mg-home) > .left-col,
body.mg-home-page .content-block > .left-col{float:none!important;clear:both;width:100%!important;max-width:none!important;margin:0!important;min-width:0!important}
.content-block:has(.mg-home) > .right-col,
body.mg-home-page .content-block > .right-col{display:none!important}
/* Compact navbar. Original background-image-only logo is replaced visually
   while preserving the .logo link used by the site. */
.head-block{height:auto!important;min-height:76px!important;display:flex!important;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:22px;max-width:100%;padding:14px 3px 17px!important;margin:0 0 18px;border-bottom:1px solid rgba(255,255,255,.075);position:relative}
.head-block .logo{position:relative!important;left:auto!important;top:auto!important;flex:0 0 184px!important;width:184px!important;height:48px!important;margin:0!important;background:none!important;filter:none!important;display:flex!important;align-items:center;gap:8px;white-space:nowrap}
.head-block .logo::before{content:"";display:block;width:35px;height:35px;flex:0 0 35px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%2334dec4' d='M3 27L12 9l8 14 7-11 10 15-8 7-5-12-7 10-7-10-4 12z'/%3E%3C/svg%3E")}
.head-block .logo::after{content:"MuzGar.kz";font-size:23px;font-weight:850;color:#f2f9f7;letter-spacing:-.9px;text-shadow:0 1px 18px rgba(32,229,203,.1)}
.head-block .head-extras{display:flex!important;flex:1 1 0!important;min-width:0;max-width:100%;align-items:center;gap:14px;justify-content:space-between}
.head-block .top-menu{display:flex!important;position:relative;flex:0 1 auto;min-width:0!important;max-width:100%;height:48px!important;min-height:48px!important;flex-wrap:nowrap!important;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:3px;margin:0!important;padding:3px!important;border:1px solid rgba(255,255,255,.055)!important;background:#112529!important;border-radius:15px!important;float:none!important}
.head-block .top-menu::-webkit-scrollbar{display:none}
.head-block .top-menu li{height:auto!important;flex:none!important;margin:0!important;padding:0!important}
.head-block .top-menu-link{display:flex!important;align-items:center!important;justify-content:center!important;height:39px!important;line-height:1.2!important;white-space:nowrap!important;margin:0!important;padding:0 13px!important;font-size:13px!important;border-radius:11px!important;letter-spacing:0!important;font-weight:710!important;text-transform:none!important;box-shadow:none}
.head-block .search-block{height:46px!important;min-height:46px!important;width:auto!important;flex:1 1 210px!important;min-width:156px!important;max-width:320px!important;margin:0!important;padding:0!important;float:none!important;position:relative!important}
.head-block .search-block form{width:100%!important;max-width:none!important;height:100%!important;display:block!important;margin:0!important;position:relative!important}
.head-block .search-block .form-text,.head-block .search-block input[name=story]{width:100%!important;height:46px!important;min-height:46px!important;margin:0!important;padding:0 45px 0 16px!important;background:#102428!important;border:1px solid rgba(238,255,250,.1)!important;border-radius:99px!important;font-size:13px!important;line-height:normal!important;box-sizing:border-box}
.head-block .search-block .form-search{position:absolute!important;top:50%!important;right:8px!important;transform:translateY(-50%)!important;left:auto!important;width:31px!important;height:31px!important;object-fit:contain!important;padding:7px!important;margin:0!important;background:#183b3c!important;border-radius:50%!important}
.head-block .mob-menu{display:none!important}
/* Featured release: the old .track-card 68px box and .track-card__play
   absolute overlay must not constrain the hero play action. */
.mg-home{gap:15px}
.mg-hero-wrap{min-width:0}
.mg-hero-track{isolation:isolate;position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(255px,.7fr);gap:30px;min-height:340px;padding:30px 36px;background:#102b2c;box-shadow:0 20px 65px rgba(0,0,0,.28);border-radius:24px}
.mg-hero-track::before{z-index:-2;filter:brightness(.6) saturate(1.05) blur(2px);opacity:.55;inset:-14px;transform:none}
.mg-hero-track::after{z-index:-1;inset:0;background:linear-gradient(100deg,#06181aec 0%,#0a2124d9 43%,#0a21247a 78%,#0a2124bb 100%)}
.mg-hero-copy{min-width:0;position:relative;z-index:1}
.mg-hero-title{font-size:clamp(31px,3.8vw,52px);font-weight:850;line-height:1.04;max-width:12ch;overflow-wrap:break-word;letter-spacing:-.032em}
.mg-hero-artist{font-size:clamp(14px,1.45vw,20px);font-weight:720;letter-spacing:.06em;overflow-wrap:anywhere}
.mg-hero-desc{font-size:14px;line-height:1.55;color:#c2d8d4;margin-bottom:20px;max-width:485px}
.mg-hero-actions{align-items:center;gap:10px}
.mg-hero-actions>.track-card.mg-hero-trigger,.mg-hero-actions>.track-card{position:static!important;display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important;border-radius:999px!important;box-shadow:none!important;background:none!important;border:0!important;float:none!important}
.mg-hero-actions .track-card>.track-card__play{position:static!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;width:auto!important;height:48px!important;min-width:142px!important;padding:0 22px!important;margin:0!important;border:0!important;border-radius:999px!important;background:#34dec4!important;color:#062323!important;font-weight:760!important;font-size:14px!important;line-height:1.2!important;white-space:nowrap!important;transform:none!important;box-shadow:0 10px 24px rgba(52,222,196,.2)!important}
.mg-hero-actions .track-card>.track-card__play:hover{background:#65efd9!important;color:#061e1d!important;transform:translateY(-1px)!important}
.mg-hero-actions .track-card__play svg{flex:0 0 18px!important;width:18px!important;height:18px!important}
.mg-hero-actions .track-card__play span{display:inline!important;visibility:visible!important;line-height:1!important}
.mg-hero-actions .track-card__play .ico-pause{display:none}
.mg-hero-actions .track-card.playing .track-card__play .ico-play{display:none}
.mg-hero-actions .track-card.playing .track-card__play .ico-pause{display:block}
.mg-hero-actions .mg-secondary-btn,.mg-hero-actions .mg-ghost-btn{height:48px!important;padding:0 20px!important;min-width:0;white-space:nowrap;border-radius:999px!important}
.mg-hero-art{width:min(100%,316px);height:auto;aspect-ratio:1/1;box-shadow:0 18px 40px #0006;border-radius:20px}
.mg-hero-art img{object-fit:cover}
/* Real horizontal layout like a contemporary streaming website. */
.mg-home-split{grid-template-columns:minmax(0,1.72fr) minmax(310px,.88fr);gap:17px;align-items:start}
.mg-home-main,.mg-home-side{min-width:0;gap:16px}
.mg-home .main-block{min-width:0;margin-bottom:0!important;border-radius:19px}
.mg-home .main-block-title{display:flex!important;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;text-transform:none!important;font-size:18px!important;font-weight:790;padding:16px 18px!important;margin:0!important;background:linear-gradient(90deg,#19302f,#112327)!important;line-height:1.25}
.mg-home .main-block-title .mg-link{font-size:12px;font-weight:650;color:#58e5d0;white-space:nowrap}
.mg-home .main-block-content{padding:14px!important;margin:0!important;display:block!important}
.mg-card-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px!important;align-items:stretch}
.mg-card-grid>.mg-track-card.main-news{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;min-height:0!important;min-width:0!important;width:100%!important;height:auto!important;max-width:none!important;padding:0!important;margin:0!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:16px!important;overflow:hidden!important;background:#102126!important;box-shadow:none!important}
.mg-card-grid>.mg-track-card.main-news:hover{background:#162b2f!important;border-color:rgba(52,222,196,.3)!important;transform:translateY(-2px)}
.mg-card-grid .mg-track-thumb.track-card{display:block!important;position:relative!important;inset:auto!important;float:none!important;flex:0 0 auto!important;width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;aspect-ratio:1/1!important;margin:0!important;padding:0!important;border-radius:0!important;overflow:hidden!important;background:#1b3437!important}
.mg-card-grid .mg-track-thumb img{display:block!important;position:static!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;border-radius:0!important}
.mg-card-grid .mg-track-thumb .track-card__play{position:absolute!important;inset:auto 11px 11px auto!important;left:auto!important;top:auto!important;right:11px!important;bottom:11px!important;width:40px!important;height:40px!important;margin:0!important;padding:0!important;border-radius:50%!important;background:rgba(12,27,30,.89)!important;color:#fff!important;display:grid!important;place-items:center!important;box-shadow:0 3px 18px rgba(0,0,0,.4)!important;transform:none!important}
.mg-card-grid .mg-track-thumb .track-card__play:hover{background:#34dec4!important;color:#092321!important}
.mg-card-grid .mg-track-thumb .track-card__play svg{width:18px!important;height:18px!important}
.mg-card-grid .mg-track-body{position:relative;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0!important;padding:12px 12px 15px!important;height:auto!important;overflow:hidden!important}
.mg-card-grid .mg-track-name{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;min-height:0;max-height:44px;font-size:15px!important;font-weight:750!important;line-height:1.37!important;overflow-wrap:anywhere;word-break:normal;margin:0!important}
.mg-card-grid .mg-track-artist{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;font-size:12px!important;font-weight:430!important;line-height:1.38!important;color:#a6b9bb!important;overflow-wrap:anywhere;word-break:normal;margin:0!important}
/* Rankings: undo preexisting absolute thumbnail position, automatic padding
   and hover display:none that caused overlaid/truncated text. */
.mg-rank-panel .main-block-content{display:block!important;counter-reset:mgRank;padding:9px 11px 11px!important;overflow:visible!important}
.mg-rank-panel a.top-news{box-sizing:border-box!important;position:relative!important;display:grid!important;grid-template-columns:30px 48px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;min-width:0!important;width:100%!important;min-height:68px!important;height:auto!important;margin:1px 0!important;padding:8px 7px!important;text-decoration:none!important;background-image:none!important;background-color:transparent!important;border:1px solid transparent!important;border-radius:13px!important;color:#f4f6f5!important;counter-increment:mgRank}
.mg-rank-panel a.top-news:hover{background-color:#192f32!important;border-color:rgba(255,255,255,.07)!important}
.mg-rank-panel .mg-rank-no{display:flex!important;grid-column:1;align-items:center!important;justify-content:center!important;position:static!important;flex:0 0 auto!important;width:29px!important;height:31px!important;margin:0!important;padding:0!important;font-weight:800;color:#e5c582;background:#213234;border-radius:10px}
.mg-rank-panel .mg-rank-no::before{content:counter(mgRank)!important}
.mg-rank-panel .top-news-image,.mg-rank-panel a.top-news:hover .top-news-image{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;grid-column:2;flex:none!important;display:block!important;width:48px!important;height:48px!important;margin:0!important;padding:0!important;border:0!important;border-radius:10px!important;background:none!important;box-shadow:none!important;overflow:hidden!important}
.mg-rank-panel .top-news-image img,.mg-rank-panel a.top-news:hover .top-news-image img{display:block!important;position:static!important;width:100%!important;height:100%!important;object-fit:cover!important;max-width:none!important;border-radius:10px!important;filter:none!important;transform:none!important}
.mg-rank-panel .top-news-title{grid-column:3;display:flex!important;flex-direction:column!important;justify-content:center;gap:3px!important;min-width:0!important;width:100%!important;max-width:100%!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;line-height:1.3!important}
.mg-rank-panel .top-news-title-author{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal!important;text-overflow:clip!important;overflow:hidden!important;color:#f3f8f6!important;font-size:13px!important;font-weight:760!important;line-height:1.25!important;overflow-wrap:anywhere;word-break:normal}
.mg-rank-panel .top-news-title i{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal!important;text-overflow:clip!important;overflow:hidden!important;color:#a7bdb9!important;font-size:12px!important;line-height:1.3!important;overflow-wrap:anywhere;word-break:normal}
/* No blue legacy tool buttons, more balanced rows */
.mg-list-block .main-block-content{padding:12px 17px!important}
.mg-list-block .main-news{gap:14px!important;padding:11px 5px!important;min-height:79px}
.mg-list-block .main-news-image{flex:0 0 58px!important;position:relative!important;width:58px!important;height:58px!important;left:auto!important;top:auto!important;margin:0!important;float:none!important}
.mg-list-block .main-news-image img{width:58px;height:58px;object-fit:cover}
.mg-list-block .main-news-title{padding:0!important}
.mg-list-block .main-news-right{margin-left:auto!important}
/* Compact bottom bar, teal as per concept; the JS/HTML player remains intact */
#mg-audio-bar{background:rgba(12,27,30,.97)!important;border:1px solid rgba(52,222,196,.22)!important;box-shadow:0 15px 45px #0008!important}
#mg-audio-bar .mg-control.mg-primary{background:var(--mg-accent)!important;color:#07211e!important}
#mg-audio-bar input[type=range]{accent-color:var(--mg-accent)!important}
@media(max-width:1380px){.mg-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:1180px){
 .head-block{gap:14px}
 .head-block .logo{flex-basis:170px!important;width:170px!important}
 .head-block .logo::after{font-size:21px}
 .head-block .head-extras{gap:8px}
 .head-block .top-menu-link{padding:0 10px!important;font-size:12px!important}
 .head-block .search-block{flex-basis:176px!important;max-width:230px!important}
 .mg-home-split{grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:14px}
 .mg-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:950px){
 .head-block{flex-wrap:wrap!important;gap:11px}
 .head-block .logo{flex-basis:184px!important}
 .head-block .head-extras{flex:1 1 100%!important;width:100%!important;flex-wrap:wrap;justify-content:space-between}
 .head-block .top-menu{flex:1 1 auto!important}
 .head-block .search-block{flex:0 0 236px!important;max-width:270px!important}
 .mg-home-split{grid-template-columns:1fr!important}
 .mg-home-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:13px}
 .mg-cta-panel{grid-column:1/-1}
 .mg-hero-track{grid-template-columns:minmax(0,1.35fr) minmax(180px,.7fr);padding:23px}
}
@media(max-width:750px){
 .main-center-block{width:100%!important;padding:0 8px!important}
 .content-block{padding:0 11px 12px!important;border-radius:17px!important}
 .head-block{display:flex!important;flex-wrap:wrap!important;min-height:0!important;margin-bottom:13px;padding:10px 0 13px!important;align-items:center!important;gap:4px!important}
 .head-block .logo{flex:1 1 0!important;width:auto!important;margin:0!important;height:48px!important;max-width:calc(100% - 125px)!important}
 .head-block .logo::after{font-size:22px}
 .head-block .head-extras{display:contents!important}
 .head-block .mob-menu{order:1;position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;height:41px!important;min-height:41px!important;line-height:1!important;padding:0 14px!important;margin:0!important;border:1px solid rgba(52,222,196,.23)!important;border-radius:12px!important;background:#142a2c!important;color:#d2ece7!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important}
 .head-block .top-menu{display:none!important;position:absolute!important;z-index:1000!important;top:60px!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:10px!important;flex-direction:column!important;align-items:stretch!important;overflow:visible!important;background:#102529!important;border-radius:13px!important;box-shadow:0 13px 30px #0009!important}
 .head-block .top-menu.mg-open{display:flex!important;gap:4px!important}
 .head-block .top-menu li{width:100%!important}
 .head-block .top-menu-link{height:40px!important;justify-content:flex-start!important;text-align:left!important;padding:0 13px!important}
 .head-block .search-block{order:3;flex:1 1 100%!important;width:100%!important;max-width:100%!important;min-width:0!important;height:44px!important;margin:8px 0 0!important}
 .head-block .search-block .form-text,.head-block .search-block input[name=story]{height:44px!important;min-height:44px!important}
 .mg-hero-track{display:block!important;min-height:315px!important;padding:20px 17px!important;border-radius:18px!important;overflow:hidden}
 .mg-hero-track::after{background:linear-gradient(90deg,#06191af2,#06191ac9 55%,#0a26267a)}
 .mg-hero-copy{max-width:none;z-index:2}
 .mg-hero-title{font-size:clamp(26px,7.4vw,39px)!important;max-width:16ch}
 .mg-hero-desc{max-width:320px;font-size:13px!important;line-height:1.55;margin-bottom:17px}
 .mg-hero-side{position:absolute!important;z-index:0;inset:0 0 0 30%;width:auto;align-items:stretch;justify-content:stretch;opacity:.39;pointer-events:none!important}
 .mg-hero-art{height:100%;width:100%;max-width:none;aspect-ratio:auto;border:none!important;border-radius:0!important;box-shadow:none!important}
 .mg-hero-art img{object-fit:cover}
 .mg-hero-actions{gap:8px}
 .mg-hero-actions .track-card>.track-card__play{height:43px!important;min-width:123px!important;padding:0 15px!important;font-size:13px!important}
 .mg-hero-actions .mg-secondary-btn,.mg-hero-actions .mg-ghost-btn{height:43px!important;padding:0 12px!important;font-size:12px!important}
 .mg-home .main-block-title{font-size:16px!important;padding:14px 13px!important}
 .mg-home .main-block-content{padding:10px!important}
 .mg-home-split{grid-template-columns:minmax(0,1fr)!important}
 .mg-home-side{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mg-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 .mg-card-grid .mg-track-body{padding:11px 10px 14px!important}
 .mg-card-grid .mg-track-name{font-size:14px!important}
 .mg-card-grid .mg-track-artist{font-size:12px!important}
 .mg-rank-panel .top-news-title-author{font-size:12px!important}
 .mg-rank-panel a.top-news{grid-template-columns:23px 41px minmax(0,1fr)!important;gap:7px!important;padding:7px 3px!important;min-height:57px!important}
 .mg-rank-panel .mg-rank-no{width:23px!important;height:25px!important;font-size:12px!important}
 .mg-rank-panel .top-news-image{width:41px!important;height:41px!important}
 #mg-audio-bar{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
}
@media(max-width:590px){.mg-home-side{display:flex!important;flex-direction:column!important;gap:12px!important}.mg-home-side>.main-block,.mg-home-side>.mg-cta-panel{width:100%!important}.mg-hero-title{max-width:11ch}.mg-hero-desc{max-width:255px}.mg-rank-panel a.top-news{grid-template-columns:29px 49px minmax(0,1fr)!important;gap:10px!important}.mg-rank-panel .mg-rank-no{width:29px!important;height:29px!important}.mg-rank-panel .top-news-image{width:49px!important;height:49px!important}.mg-rank-panel .top-news-title-author{font-size:14px!important}}
@media(max-width:365px){.head-block .logo::after{font-size:19px}.head-block .logo::before{width:28px;height:28px;flex-basis:28px}.mg-hero-title{font-size:27px!important}.mg-hero-desc{max-width:190px}.mg-hero-actions .mg-secondary-btn{display:none!important}.mg-card-grid .mg-track-thumb .track-card__play{width:35px!important;height:35px!important}}


/* ===== Right sidebar restore fix (2026-11-01) ===== */
/* Previous homepage rules were intentionally hiding .right-col. Restore classic 2-column layout. */
.content-block:has(.mg-home) > .left-col,
body.mg-home-page .content-block > .left-col{
    float:left!important;
    clear:none!important;
    width:calc(100% - 337px)!important;
    max-width:none!important;
    margin:0 23px 0 0!important;
    min-width:0!important;
}
.content-block:has(.mg-home) > .right-col,
body.mg-home-page .content-block > .right-col{
    display:block!important;
    float:right!important;
    width:314px!important;
    margin:0!important;
}
/* Home content should fit inside left column when sidebar is visible */
.content-block:has(.mg-home) .mg-home-split,
body.mg-home-page .mg-home-split{
    grid-template-columns:1fr!important;
}
.content-block:has(.mg-home) .mg-card-grid,
body.mg-home-page .mg-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
/* More room in right sidebar widgets */
.content-block:has(.mg-home) .right-col .main-block,
body.mg-home-page .right-col .main-block{
    overflow:visible;
}
@media (max-width: 1040px){
    .content-block:has(.mg-home) > .left-col,
    body.mg-home-page .content-block > .left-col{
        width:calc(100% - 282px)!important;
        margin-right:16px!important;
    }
    .content-block:has(.mg-home) > .right-col,
    body.mg-home-page .content-block > .right-col{
        width:266px!important;
    }
}
@media (max-width: 750px){
    .content-block:has(.mg-home) > .left-col,
    .content-block:has(.mg-home) > .right-col,
    body.mg-home-page .content-block > .left-col,
    body.mg-home-page .content-block > .right-col{
        width:100%!important;
        float:none!important;
        margin:0!important;
        display:block!important;
    }
    .content-block:has(.mg-home) > .right-col,
    body.mg-home-page .content-block > .right-col{
        margin-top:18px!important;
    }
    .content-block:has(.mg-home) .mg-card-grid,
    body.mg-home-page .mg-card-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}


/* ==========================================================
   MuzGar compatibility patch v4.2 | 2026-11-01
   Legacy .cols-news rankings + new .mg-rank-panel + sidebar.
   No renamed selectors. Chart fixes are independent of AJAX.
   ========================================================== */
/* Main homepage: one stable grid rather than floating columns overflowing. */
@media (min-width:1101px) {
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news),
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(265px,306px)!important;
    align-items:start!important;
    column-gap:20px!important;
  }
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news) > .head-block,
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) > .head-block {grid-column:1/-1!important}
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news) > .left-col,
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) > .left-col {
    float:none!important;clear:none!important;width:100%!important;max-width:100%!important;
    margin:0!important;min-width:0!important;grid-column:1!important;
  }
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news) > .right-col,
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) > .right-col {
    float:none!important;display:block!important;width:100%!important;max-width:100%!important;
    margin:0!important;min-width:0!important;grid-column:2!important;
  }
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news) > div[style*="clear"],
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) > div[style*="clear"] {display:none!important}
}
/* This is the original DLE front-page markup, not the .mg-home markup. */
body:not(.mgm-page) .left-col:has(> .cols-news) {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:18px;
  align-items:start;min-width:0!important;
}
body:not(.mgm-page) .left-col > .cols-news {float:none!important;display:block!important;min-width:0!important;width:100%!important;margin:0!important;padding:0!important}
body:not(.mgm-page) .left-col > .main-block {grid-column:1/-1;min-width:0}
body:not(.mgm-page) .left-col > div[style*="clear"] {grid-column:1/-1;display:none!important}
/* A single swiper-slide per chart must never be used as a horizontally clipped flex carousel. */
body:not(.mgm-page) .cols-news .swiper-container,
body:not(.mgm-page) .cols-news .swiper-wrapper,
body:not(.mgm-page) .cols-news .swiper-slide {
  display:block!important;position:static!important;width:100%!important;min-width:0!important;
  height:auto!important;max-height:none!important;overflow:visible!important;
  float:none!important;transform:none!important;margin:0!important;
}
body:not(.mgm-page) .cols-news .main-block,
body:not(.mgm-page) .cols-news .main-block-content {height:auto!important;min-width:0;max-width:100%}
body:not(.mgm-page) .cols-news .main-block-content{padding:12px!important}
body:not(.mgm-page) .cols-news a.top-news {
  display:grid!important;position:relative!important;grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;justify-items:stretch!important;gap:12px!important;min-height:72px!important;
  width:100%!important;max-width:100%!important;height:auto!important;padding:9px 8px!important;
  margin:2px 0!important;float:none!important;overflow:visible!important;
  color:#f1f7f4!important;background:none!important;border:0!important;border-radius:13px!important;
  text-indent:0!important;transform:none!important;box-sizing:border-box!important;
}
body:not(.mgm-page) .cols-news a.top-news:hover {background:rgba(255,255,255,.045)!important}
body:not(.mgm-page) .cols-news a.top-news > .top-news-image,
body:not(.mgm-page) .cols-news a.top-news:hover > .top-news-image {
  display:block!important;position:static!important;grid-column:1!important;width:52px!important;height:52px!important;
  min-width:52px!important;max-width:52px!important;min-height:52px!important;max-height:52px!important;
  margin:0!important;padding:0!important;float:none!important;opacity:1!important;
  border-radius:11px!important;overflow:hidden!important;transform:none!important;
}
body:not(.mgm-page) .cols-news a.top-news .top-news-image img {
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;
  margin:0!important;padding:0!important;position:static!important;object-fit:cover!important;opacity:1!important;
}
body:not(.mgm-page) .cols-news a.top-news > .top-news-title,
body:not(.mgm-page) .cols-news a.top-news:hover > .top-news-title {
  grid-column:2!important;display:flex!important;position:static!important;visibility:visible!important;
  flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  gap:4px!important;min-width:0!important;max-width:100%!important;width:100%!important;height:auto!important;
  padding:0!important;margin:0!important;overflow:visible!important;opacity:1!important;
  transform:none!important;text-align:left!important;color:#f6faf8!important;
  font-size:14px!important;font-weight:700!important;line-height:1.3!important;text-indent:0!important;
}
body:not(.mgm-page) .cols-news .top-news-title .top-news-title-author,
body:not(.mgm-page) .cols-news .top-news-title i {
  display:-webkit-box!important;position:static!important;visibility:visible!important;min-width:0!important;
  max-width:100%!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  color:#f4f8f6!important;overflow:hidden!important;white-space:normal!important;text-overflow:ellipsis!important;
  word-break:normal!important;overflow-wrap:anywhere!important;
  font-size:14px!important;font-weight:700!important;line-height:1.35!important;
  text-indent:0!important;opacity:1!important;
}
body:not(.mgm-page) .cols-news .top-news-title i{font-size:12px!important;color:#a9c2bd!important;font-weight:500!important;font-style:normal!important}
/* Make ranks resilient if some home pages use v4 custom .mg-rank-panel instead of legacy sliders. */
.mg-rank-panel .main-block-content{display:block!important;counter-reset:mgRank!important}
.mg-rank-panel a.top-news{display:grid!important;grid-template-columns:29px 50px minmax(0,1fr)!important;gap:10px!important;min-width:0!important;min-height:70px!important;max-width:100%!important;overflow:visible!important}
.mg-rank-panel a.top-news > .mg-rank-no{display:grid!important;grid-column:1!important;place-items:center!important;position:static!important;width:29px!important;height:29px!important}
.mg-rank-panel a.top-news > .top-news-image{display:block!important;grid-column:2!important;position:static!important;width:50px!important;height:50px!important;overflow:hidden!important}
.mg-rank-panel a.top-news > .top-news-title{display:flex!important;grid-column:3!important;flex-direction:column!important;min-width:0!important;max-width:100%!important;width:100%!important;opacity:1!important;visibility:visible!important}
.mg-rank-panel a.top-news .top-news-title-author,.mg-rank-panel a.top-news .top-news-title i{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal!important;overflow:hidden!important;opacity:1!important;visibility:visible!important}
/* When module page is active, its CSS must not style the DLE home. */
body.mgm-page .mgm-section svg{width:19px;height:19px;max-width:19px;max-height:19px;display:inline-block;vertical-align:middle}
body.mgm-page .mgm-search-field button svg,body.mgm-page .mgm-search-submit svg{width:19px!important;height:19px!important}
@media(max-width:1100px){
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news) > .left-col,
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) > .left-col,
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news) > .right-col,
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) > .right-col{
    display:block!important;float:none!important;width:100%!important;max-width:100%!important;margin:0!important;
  }
  body:not(.mgm-page) .content-block:has(> .left-col .cols-news) > .right-col,
  body:not(.mgm-page) .content-block:has(> .left-col .mg-home) > .right-col{margin-top:18px!important}
}
@media(max-width:660px){
  body:not(.mgm-page) .left-col:has(> .cols-news){grid-template-columns:minmax(0,1fr)!important}
  body:not(.mgm-page) .left-col > .cols-news{width:100%!important}
  body:not(.mgm-page) .cols-news .top-news-title .top-news-title-author{font-size:14px!important}
}


/* MuzGar 2026-11-01: lightweight, isolated track page; no old player hierarchy */
#mg-track{color:#f4f7f6;max-width:100%;min-width:0;margin:0 0 18px;padding:clamp(8px,1.5vw,22px) 0 10px;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
#mg-track *{box-sizing:border-box}
#mg-track .mg-track__layout{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);align-items:center;gap:clamp(22px,3vw,40px);min-width:0}
#mg-track .mg-track__art{min-width:0;max-width:260px;aspect-ratio:1;background:#142528;border-radius:16px;overflow:hidden}
#mg-track .mg-track__art img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;border:0;border-radius:0;box-shadow:none}
#mg-track .mg-track__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}
#mg-track .mg-track__eyebrow{font:650 11px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#68d8c7;margin:0 0 9px}
#mg-track .mg-track__title{font:800 clamp(26px,3vw,39px)/1.13 system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.025em;overflow-wrap:anywhere;margin:0 0 9px;color:#f4f7f6;padding:0}
#mg-track .mg-track__artists{display:flex;flex-wrap:wrap;gap:3px 8px;align-items:center;font-size:15px;line-height:1.5;color:#b4c8c7;margin:0 0 12px;min-width:0}
#mg-track .mg-track__artists a{display:inline;color:inherit;text-decoration:none;overflow-wrap:anywhere}
#mg-track .mg-track__artists a:hover{color:#69e1d3}
#mg-track .mg-track__join{color:#607e7c}
#mg-track .mg-track__tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 22px;max-width:100%}
#mg-track .mg-track__tag{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:26px;padding:3px 9px;border-radius:7px;background:#1a3033;color:#bcd1cf;font-size:12px;line-height:1.25;font-weight:550}
#mg-track .mg-track__tag a{color:inherit;text-decoration:none}
#mg-track .mg-track__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%;margin:0 0 19px}
#mg-track .mg-track__btn,#mg-track .mgm-track-video{height:44px;min-width:0;display:inline-flex;justify-content:center;align-items:center;gap:9px;margin:0;padding:0 18px;white-space:nowrap;text-decoration:none;border:1px solid transparent;border-radius:11px;font:700 13px/1.25 system-ui,-apple-system,'Segoe UI',sans-serif;cursor:pointer;box-shadow:none!important;transition:background .17s,color .17s}
#mg-track .mg-track__btn svg{width:18px;height:18px;display:block;flex:none;fill:currentColor}
#mg-track .mg-track__btn--primary{background:#39dcc6;color:#092423;border-color:#39dcc6}
#mg-track .mg-track__btn--primary:hover{background:#7be8d8;color:#092423}
#mg-track .mg-track__btn--secondary{background:#203337;color:#e8f4f1;border-color:#344d4f}
#mg-track .mg-track__btn--secondary:hover{background:#294348;color:#fff}
#mg-track .mg-track__btn .mg-track__pause-svg{display:none}
#mg-track.playing .mg-track__btn .mg-track__play-svg{display:none}
#mg-track.playing .mg-track__btn .mg-track__pause-svg{display:block}
#mg-track .mgm-track-video{background:transparent!important;color:#d5f4ed!important;border-color:#476762!important}
#mg-track .mgm-track-video:hover{background:#1a3336!important}
#mg-track .mg-track__facts{display:flex;flex-wrap:wrap;gap:12px 22px;width:100%;padding:0;margin:0;color:#d2e0dd;font-size:12px;line-height:1.45}
#mg-track .mg-track__facts>span{display:inline-flex;gap:5px;white-space:nowrap;align-items:baseline}
#mg-track .mg-track__facts strong{font-weight:500;color:#87a3a0}
#mg-track .mg-track__rating{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:100%;margin:17px 0 0;padding:0;background:none!important;border:0!important;box-shadow:none!important}
#mg-track .mg-track__rating-label{font-size:12px;font-weight:550;color:#87a3a0}
#mg-track .mg-track__rating .dle-stars{display:inline-flex;align-items:center;max-width:100%}
.mg-track-related{margin:22px 0 5px;padding:0;color:#f3f8f6;min-width:0}
.mg-track-related h2{font:760 19px/1.3 system-ui,-apple-system,'Segoe UI',sans-serif;margin:0 0 14px;padding:0;color:#f3f8f6}
.mg-track-related__list{display:flex;flex-direction:column;gap:4px;min-width:0}
.mg-track-related__list .main-news{margin:0;min-width:0}
@media(max-width:760px){
 #mg-track{padding:8px 0 4px!important;margin:0 0 14px!important}
 #mg-track .mg-track__layout{grid-template-columns:minmax(0,1fr);gap:17px;justify-items:center}
 #mg-track .mg-track__art{width:min(58vw,224px);max-width:224px;border-radius:13px}
 #mg-track .mg-track__body{width:100%;align-items:center;text-align:center}
 #mg-track .mg-track__eyebrow{margin:0 0 7px;font-size:10px}
 #mg-track .mg-track__title{font-size:clamp(23px,6vw,30px);margin:0 0 7px;line-height:1.2}
 #mg-track .mg-track__artists{justify-content:center;margin:0 0 10px;font-size:13px}
 #mg-track .mg-track__tags{justify-content:center;margin:0 0 17px}
 #mg-track .mg-track__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 14px}
 #mg-track .mg-track__btn,#mg-track .mgm-track-video{width:100%;min-width:0;max-width:100%;height:45px;padding:0 8px;font-size:12px}
 #mg-track .mgm-track-video{grid-column:1/-1}
 #mg-track .mg-track__facts{justify-content:center;gap:8px 14px;font-size:11px}
 #mg-track .mg-track__rating{justify-content:center;margin:14px 0 0}
 .mg-track-related{margin:17px 0 0}
 .mg-track-related h2{font-size:17px;margin-bottom:10px}
 body.mg-track-page .right-col,body:has(#mg-track) .right-col{display:none!important}
 body.mg-track-page .content-block>.left-col,body:has(#mg-track) .content-block>.left-col{width:100%!important;max-width:100%!important;float:none!important;margin:0!important}
}
@media(max-width:355px){
 #mg-track .mg-track__art{width:min(57vw,190px)}
 #mg-track .mg-track__btn{font-size:11px;gap:5px}
 #mg-track .mg-track__btn svg{width:16px;height:16px}
}