/* MuzGar categories · v1, scoped: does not restyle main site, music player or genres grid */
.mgcat-section{box-sizing:border-box;margin:16px 0 22px;padding:23px;border-radius:21px;border:1px solid rgba(123,175,167,.17);background:linear-gradient(120deg,#122326,#0d1c1f 76%);color:#f5f8f7;overflow:hidden}
.mgcat-section *{box-sizing:border-box}
.mgcat-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:19px}
.mgcat-heading h2{color:#f7faf9;font-size:clamp(20px,2.3vw,25px);font-weight:800;line-height:1.2;margin:3px 0 0;letter-spacing:-.025em}
.mgcat-eyebrow{display:block;color:#55d9c7;text-transform:uppercase;letter-spacing:.11em;font-weight:750;font-size:10px}
.mgcat-all{color:#45dec6!important;text-decoration:none;white-space:nowrap;font-size:13px;font-weight:700;padding:7px 0}
.mgcat-all:hover{text-decoration:underline}
.mgcat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.mgcat-card{display:flex;flex-direction:column;align-items:flex-start;position:relative;min-width:0;min-height:151px;padding:16px 14px;gap:11px;border-radius:16px;border:1px solid rgba(161,204,193,.1);background:#14282b;color:#f7fbfa!important;text-decoration:none!important;transition:background .17s ease,border-color .17s ease,transform .17s ease}
.mgcat-card:hover,.mgcat-card:focus-visible{background:#193438;border-color:rgba(67,223,195,.45);transform:translateY(-2px)}
.mgcat-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:rgba(51,205,182,.11);color:#43ddc7}
.mgcat-icon svg{width:22px;height:22px;display:block;max-width:none}
.mgcat-copy{display:flex;flex-direction:column;gap:3px;min-width:0;width:100%}
.mgcat-copy strong{font-size:14px;font-weight:770;color:#f8faf9;line-height:1.3;overflow-wrap:anywhere}
.mgcat-desc{font-size:11px;line-height:1.35;color:#a2bdb7;white-space:normal}
.mgcat-count{margin-top:3px;font-size:11px;color:#45d8c3;line-height:1.3}
.mgcat-chevron{position:absolute;right:13px;top:19px;color:#557971;font-size:24px;line-height:1}
.mgcat-section a{outline-offset:3px}
@media(max-width:1280px){.mgcat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.mgcat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.mgcat-section{padding:15px 12px;margin:13px 0 18px;border-radius:16px}.mgcat-heading{align-items:center;margin-bottom:13px;gap:8px}.mgcat-heading h2{font-size:20px}.mgcat-all{font-size:11px}.mgcat-grid{gap:9px}.mgcat-card{min-height:132px;padding:12px 11px;gap:9px;border-radius:13px}.mgcat-icon{width:35px;height:35px;flex-basis:35px;border-radius:10px}.mgcat-icon svg{width:20px;height:20px}.mgcat-copy strong{font-size:13px}.mgcat-desc{font-size:10px}.mgcat-count{font-size:10px}.mgcat-chevron{top:13px;right:10px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.mgcat-card{transition:none}.mgcat-card:hover{transform:none}}


/* ===== Layout hotfix 2026-11-02: DLE home grid + TOP 20 ===== */
/* The existing v4 stylesheet changes .left-col into a two-column grid.
   Without an explicit span, this section automatically occupies only one track. */
body:not(.mgm-page) .left-col:has(> .cols-news) > .mgcat-section {
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 4px;
}
/* Keep all seven cards laid out across the full available content width. */
body:not(.mgm-page) .left-col:has(> .cols-news) > .mgcat-section > .mgcat-grid {
    width: 100%;
    min-width: 0;
}
/* The old template has <a class="top-singer">text<i>rank</i></a>.
   Earlier CSS makes <i> absolute but later CSS overwrote the link's padding,
   placing the rank on top of the song name. Reserve a dedicated number gutter. */
.right-col .topsinger .main-block-content {
    counter-reset: mgSidebarRank;
}
.right-col .topsinger .main-block-content > a.top-singer {
    box-sizing: border-box;
    counter-increment: mgSidebarRank;
    display: block !important;
    position: relative !important;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 12px 12px 12px 46px !important;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}
.right-col .topsinger .main-block-content > a.top-singer > i {
    box-sizing: border-box;
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 25px;
    min-width: 25px;
    height: 28px;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    background: rgba(68, 220, 194, .10);
    color: #e8c679;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    font-style: normal;
    pointer-events: none;
}
/* Rank fallback for panels dynamically replaced during AJAX transitions:
   active.js normally writes numbers into <i>, but isn't rerun after every swap. */
.right-col .topsinger .main-block-content > a.top-singer > i:empty::before {
    content: counter(mgSidebarRank);
}
@media (max-width: 660px) {
    body:not(.mgm-page) .left-col:has(> .cols-news) > .mgcat-section {
        grid-column: 1 / -1 !important;
        margin: 0 0 3px;
    }
    .right-col .topsinger .main-block-content > a.top-singer {
        min-height: 52px;
        padding: 11px 12px 11px 44px !important;
    }
}