body.visual-moderno .mh {
    --mh-cab: linear-gradient(180deg, #33373f, #262a30);
    --mh-k-fav: #c98a0b;
    --mh-k-nov: #2f7fd6;
    --mh-k-pend: #d97706;
    display: grid;
    gap: 14px;
    box-sizing: border-box;
    padding: 16px;
    color: var(--ic-texto);
    font-size: 13px;
}

body.visual-moderno .mh *,
body.visual-moderno .mh *::before,
body.visual-moderno .mh *::after {
    box-sizing: border-box;
}

body.visual-moderno .mh-saud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(110deg, #2f343c, #1f2328 70%);
    box-shadow: inset 0 -3px 0 var(--ic-menu-realce);
    color: #fff;
}

body.visual-moderno .mh-saud h1 {
    margin: 0;
    color: #fff;
    font: 700 22px/1.2 'titillium_websemibold', 'titillium_webregular', sans-serif;
}

body.visual-moderno .mh-saud p {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
}

body.visual-moderno .mh-pend-form {
    margin: 0;
}

body.visual-moderno .mh-pends {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
    padding-left: 6px;
}

body.visual-moderno .mh-pend {
    --mh-pend-cor: #6b7280;
    --mh-pend-icone: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 18px 0 0;
    background: linear-gradient(110deg, #2f343c, #1f2328 70%);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s;
}

body.visual-moderno a.mh-pend:hover {
    background: linear-gradient(110deg, #3c424b, #2a2f35 70%);
}

body.visual-moderno a.mh-pend:focus-visible {
    outline: 2px solid var(--ic-menu-realce);
    outline-offset: 2px;
}

body.visual-moderno .mh-pend > .fa-angle-right {
    opacity: .7;
}

body.visual-moderno .mh-pend-icone {
    display: grid;
    align-self: stretch;
    place-items: center;
    width: 44px;
    padding-left: 6px;
    background: var(--mh-pend-cor);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    color: var(--mh-pend-icone);
    font-size: 14px;
}

body.visual-moderno .mh-pend-perigo { --mh-pend-cor: #d90b0b; }
body.visual-moderno .mh-pend-alerta { --mh-pend-cor: #f2a900; --mh-pend-icone: #2b1f00; }
body.visual-moderno .mh-pend-info { --mh-pend-cor: #e4e6ea; --mh-pend-icone: #2a2e34; }
body.visual-moderno .mh-pend-ok { --mh-pend-cor: #1f9d55; }
body.visual-moderno.tema-ecospeed .mh-pend-info { --mh-pend-cor: #1f7f94; --mh-pend-icone: #fff; }
body.visual-moderno.tema-ecospeed .mh-pend-ok { --mh-pend-cor: #a5cf4e; --mh-pend-icone: #1f2e08; }

body.visual-moderno .mh-pend-carregando {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ic-texto-suave);
    font-size: 12.5px;
}

body.visual-moderno .mh-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "rank rank" "fav nov";
    gap: 14px;
    align-items: start;
}

body.visual-moderno .mh-corpo.mh-sem-novidades {
    grid-template-areas: "rank rank" "fav fav";
}

body.visual-moderno .mh-area-rank { grid-area: rank; min-width: 0; }
body.visual-moderno .mh-area-fav { grid-area: fav; min-width: 0; }
body.visual-moderno .mh-area-nov { grid-area: nov; min-width: 0; }

body.visual-moderno .mh-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--ic-cabecalho-borda);
    border-radius: 12px;
    background: var(--ic-superficie);
    box-shadow: 0 1px 2px rgba(31, 45, 61, .06), 0 6px 18px rgba(31, 45, 61, .05);
}

body.visual-moderno .mh-cab {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    margin: -14px -14px 12px;
    padding: 8px 14px;
    border-radius: 11px 11px 0 0;
    background: var(--mh-cab);
    color: #fff;
    font: 700 12px/1.2 'titillium_websemibold', 'titillium_webregular', sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.visual-moderno .mh-cab > i {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--mh-k, var(--ic-menu-realce));
    color: #fff;
    font-size: 13px;
}

body.visual-moderno .mh-k-rank {
    background: #eef0f3;
}

body.visual-moderno .mh-k-rank .mh-cab {
    gap: 12px;
    overflow: hidden;
    min-height: 44px;
    padding: 0 14px 0 0;
    background: linear-gradient(180deg, #1f1f1f, #0f0f0f);
    font-size: 13.5px;
    letter-spacing: .06em;
}

body.visual-moderno .mh-k-rank .mh-cab > i {
    align-self: stretch;
    width: 50px;
    height: auto;
    padding-right: 9px;
    border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ic-menu-realce) 82%, #fff), var(--ic-menu-realce) 60%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    color: var(--ic-menu-realce-texto);
    font-size: 16px;
}

body.visual-moderno .mh-k-fav { --mh-k: var(--mh-k-fav); }
body.visual-moderno .mh-k-nov { --mh-k: var(--mh-k-nov); }

body.visual-moderno .mh-cab small {
    margin-right: 4px;
    color: color-mix(in srgb, var(--ic-menu-realce) 55%, #fff);
    font-size: 11px;
}

body.visual-moderno .mh-cab-extra {
    margin-left: auto;
    color: rgba(255, 255, 255, .74);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

body.visual-moderno a.mh-cab-extra:hover {
    color: #fff;
}

body.visual-moderno .mh-rank-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.visual-moderno .mh-rank-grade[data-quadros="1"] {
    grid-template-columns: minmax(0, 1fr);
}

body.visual-moderno .mh-lista {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.visual-moderno .mh-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    overflow: hidden;
    min-height: 30px;
    padding: 0 8px 0 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 0 1px #dfe3e8, 0 1px 2px rgba(15, 15, 15, .08);
}

body.visual-moderno .mh-item:nth-child(1) { background: linear-gradient(90deg, #f5cf55, #fae7a8); box-shadow: 0 0 0 1px #d9a21b, 0 2px 4px rgba(169, 122, 16, .3); }
body.visual-moderno .mh-item:nth-child(2) { background: linear-gradient(90deg, #c4ccd5, #e6eaee); box-shadow: 0 0 0 1px #9aa5b0, 0 2px 4px rgba(31, 41, 51, .2); }
body.visual-moderno .mh-item:nth-child(3) { background: linear-gradient(90deg, #e4a676, #f3d2b8); box-shadow: 0 0 0 1px #b8692f, 0 2px 4px rgba(140, 79, 34, .28); }

body.visual-moderno .mh-item:nth-child(-n+3) small,
body.visual-moderno .mh-item:nth-child(-n+3) .mh-estrelas,
body.visual-moderno .mh-item:nth-child(-n+3) .mh-estrelas span {
    color: rgba(20, 14, 0, .72);
}

body.visual-moderno .mh-rank:not(.mh-aberto) .mh-extra {
    display: none;
}

body.visual-moderno .mh-med {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
    color: #3a3f47;
    font: 700 13px/1 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

body.visual-moderno .mh-med-1 { background: linear-gradient(180deg, #e7b52e, #c18a0c); color: #2b1d00; }
body.visual-moderno .mh-med-2 { background: linear-gradient(180deg, #a9b3bd, #808c98); color: #111820; }
body.visual-moderno .mh-med-3 { background: linear-gradient(180deg, #d08a56, #ad6330); color: #1f0e03; }

body.visual-moderno .mh-item > span:last-child {
    padding: 4px 0;
}

body.visual-moderno .mh-item b,
body.visual-moderno .mh-item small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.visual-moderno .mh-item b {
    color: #141414;
    font-size: 12.5px;
    font-weight: 700;
}

body.visual-moderno .mh-item small {
    color: var(--ic-texto-suave);
    font-size: 11px;
}

body.visual-moderno .mh-aviso {
    padding: 10px 6px;
    color: var(--ic-texto-suave);
    font-size: 12.5px;
}

body.visual-moderno .mh-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--ic-cor-borda);
    border-radius: 8px;
    background: var(--ic-cor-clara);
    color: var(--ic-cor-escura);
    font: 600 12px 'titillium_websemibold', 'titillium_webregular', sans-serif;
    cursor: pointer;
    transition: background-color .15s;
}

body.visual-moderno .mh-mais:hover {
    background: var(--ic-cor-tonal);
}

body.visual-moderno .mh-mais i {
    transition: transform .2s var(--ic-ease-out);
}

body.visual-moderno .mh-aberto .mh-mais i {
    transform: rotate(180deg);
}

body.visual-moderno .mh-banner {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
}

body.visual-moderno .mh-favs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

body.visual-moderno .mh-fav {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--ic-borda);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f6f7f9);
    color: var(--ic-texto) !important;
    text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}

body.visual-moderno .mh-fav:hover {
    border-color: var(--ic-botao-cinza-borda);
    box-shadow: 0 2px 8px rgba(31, 45, 61, .08);
}

body.visual-moderno .mh-fav-icone {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ic-menu-realce) 14%, #fff);
    color: var(--ic-cor-cabecalho);
    font-size: 15px;
}

body.visual-moderno .mh-fav-titulo {
    display: -webkit-box;
    overflow: hidden;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.visual-moderno .mh-vazio {
    display: grid;
    gap: 4px;
    padding: 8px 4px;
    color: var(--ic-texto-suave);
    font-size: 12.5px;
}

body.visual-moderno .mh-vazio strong {
    color: var(--ic-texto);
}

body.visual-moderno .mh-novs {
    display: grid;
    gap: 8px;
}

body.visual-moderno .mh-nov {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px;
    border: 1px solid var(--ic-borda);
    border-radius: 10px;
    background: #fff;
    color: var(--ic-texto) !important;
    text-decoration: none !important;
}

body.visual-moderno .mh-nov:hover {
    border-color: var(--ic-botao-cinza-borda);
}

body.visual-moderno .mh-nov-capa {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 64px;
    height: 40px;
    border-radius: 7px;
    background: linear-gradient(135deg, #262a30, #3a3f47);
    color: #fff;
}

body.visual-moderno .mh-nov-capa img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.visual-moderno .mh-nov b {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.visual-moderno .mh-nov small {
    color: var(--ic-texto-suave);
    font-size: 11.5px;
}

body.visual-moderno .mh-todas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--ic-texto-destaque) !important;
    font-weight: 600;
    text-decoration: none !important;
}

@media (max-width: 1100px) {
    body.visual-moderno .mh-rank-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    body.visual-moderno .mh-corpo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "rank" "fav" "nov";
    }

    body.visual-moderno .mh-corpo.mh-sem-novidades {
        grid-template-areas: "rank" "fav";
    }
}

@media (max-width: 640px) {
    body.visual-moderno .mh { padding: 12px; }
    body.visual-moderno .mh-rank-grade { grid-template-columns: minmax(0, 1fr); }
    body.visual-moderno .mh-saud h1 { font-size: 19px; }
    body.visual-moderno .mh-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    body.visual-moderno .mh-mais i { transition: none; }
}