[hidden] {display:none !important;}
a.primary-button,a.outline-button {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
a.login-button {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
a.search-button,a.category {text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
:focus-visible {outline:3px solid #c4a0ff;outline-offset:4px;}.skip-link {position:absolute;left:16px;top:-100px;z-index:200;background:#774ac5;color:white;padding:12px;}.skip-link:focus {top:10px;}
.hero-stats {flex-wrap:wrap;gap:22px 32px;}.hero-stats small {max-width:100px;line-height:1.5;}
.featured-cover {display:block;color:inherit;}.featured-cover img {width:100%;height:100%;object-fit:cover;}.featured-info {left:0;right:0;background:linear-gradient(transparent,rgba(8,5,16,.95) 30%);padding-top:70px;}.featured-info h3 {overflow-wrap:anywhere;}
.home-search {margin:0 8% 24px;padding:22px;border:1px solid var(--border);border-radius:14px;background:var(--surface);}.home-search label {display:block;color:#c3b4d6;font-size:13px;margin-bottom:12px;}.home-search > div {display:flex;gap:12px;}.home-search input {flex:1;min-width:0;background:#0b0812;border:1px solid #443152;border-radius:8px;color:white;padding:12px;font:inherit;}.home-search button {font:inherit;cursor:pointer;}
.home-feedback {margin:0 8%;color:#c7b2dc;font-size:14px;line-height:1.6;}.home-feedback p:not(:empty) {padding:12px 0;}.empty-state {padding:20px 0;color:var(--muted);line-height:1.7;}
.manga-card > a {display:block;color:inherit;text-decoration:none;}.manga-cover img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}.cover-title {padding:18px;font-size:26px;line-height:1.1;overflow-wrap:anywhere;}.manga-info h3 {overflow-wrap:anywhere;}.card-bottom span {color:var(--muted);font-size:12px;}.card-bottom button {display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;margin:0;padding:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--msx-purple,#a779ee);cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease;}.card-bottom button svg {display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}.card-bottom button[aria-pressed="true"] {color:#e789b0;}.card-bottom button[aria-pressed="true"] svg {fill:currentColor;}.card-bottom button:hover {background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 28%,transparent);}.card-bottom button:focus-visible {outline:3px solid var(--msx-purple,#a779ee);outline-offset:2px;}.card-bottom button:disabled {opacity:.5;cursor:wait;}
.recent-item {color:inherit;text-decoration:none;}.small-cover {overflow:hidden;flex-shrink:0;}.small-cover img {width:100%;height:100%;object-fit:cover;}.recent-info {min-width:0;}.recent-info h3 {overflow-wrap:anywhere;}.recent-info p {line-height:1.5;}
.ranking-item {color:inherit;text-decoration:none;}.ranking-cover {flex-shrink:0;overflow:hidden;}.ranking-cover img {width:100%;height:100%;object-fit:cover;}.ranking-item h3 {overflow-wrap:anywhere;}.ranking-item small {color:var(--muted);font-size:11px;}
.reader-label {color:var(--muted);font-size:12px;margin-bottom:15px;}.community-users .avatar {text-decoration:none;color:white;}.categories {overflow:auto;}.categories .category {flex-shrink:0;}
@media(max-width:1100px){.menu-mobile {display:block;}.main-nav {display:none;}.main-nav.mobile-open {display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:12px 6%;background:#120d1b;border-bottom:1px solid #493250;max-height:70vh;overflow:auto;}.main-nav.mobile-open a {padding:12px 0;}.main-nav.mobile-open .active::after {display:none;}.header {position:sticky;top:0;z-index:100;}}
@media(max-width:700px){.home-search {margin:0 6% 20px;padding:16px;}.home-search > div {flex-direction:column;}.hero-stats {gap:18px 25px;}.hero-stats strong {font-size:24px;}.hero-buttons {flex-direction:column;}.hero-buttons a {width:100%;}.header-actions {gap:10px;}.header .logo {font-size:20px;}.login-button {padding:10px 12px;}.home-feedback {margin:0 6%;}.community-section {gap:25px;}.cover-title {font-size:19px;}.ranking-item {gap:12px;}.ranking-item h3 {font-size:14px;}}
.small-cover,.ranking-cover {position:relative;}
.small-cover img,.ranking-cover img {position:absolute;inset:0;}
.small-cover .cover-title,.ranking-cover .cover-title {font-size:16px;padding:0;line-height:1;}
/* =========================================
   FUNDO DA HOME / INDEX
========================================= */

body[data-page-id="index"] {
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            rgba(9, 7, 18, 0.78) 0%,
            rgba(16, 10, 30, 0.72) 35%,
            rgba(13, 9, 24, 0.86) 100%
        ),
        url('/images/brand/index-bg.png')
        center top / cover
        no-repeat fixed;
}


/* evita que blocos fiquem transparentes demais */

body[data-page-id="index"] main {
    position: relative;
    z-index: 1;
}


/* leve contraste para os cards */

body[data-page-id="index"] .hero,
body[data-page-id="index"] .brand-paths a,
body[data-page-id="index"] .ms-feature-card,
body[data-page-id="index"] .home-search,
body[data-page-id="index"] .community-section,
body[data-page-id="index"] .brand-resume {

    backdrop-filter: blur(8px);

    background-color:
        rgba(17, 14, 30, 0.72);

    border-color:
        rgba(167, 139, 250, 0.18);
}


/* celular */

@media (max-width: 768px) {

    body[data-page-id="index"] {

        background:
            linear-gradient(
                180deg,
                rgba(9, 7, 18, 0.82),
                rgba(14, 9, 26, 0.90)
            ),
            url('/images/brand/index-bg.png')
            center top / cover
            no-repeat;

        background-attachment: scroll;
    }

}

/* MANGASOCIAL INDEX BACKGROUND START */

/* =========================================
   FUNDO PRINCIPAL DA HOME
========================================= */

body {

    min-height: 100vh;

    background:

        linear-gradient(
            180deg,
            rgba(8, 6, 18, .76) 0%,
            rgba(15, 9, 32, .71) 35%,
            rgba(11, 7, 23, .88) 100%
        ),

        url('/images/brand/index-bg.png')
        center top / cover
        no-repeat
        fixed;

}


/* camada para melhorar a leitura */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 15%,
            rgba(124, 58, 237, .08),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            rgba(8, 6, 18, .08),
            rgba(8, 6, 18, .32)
        );

}


/* =========================================
   EFEITO DE VIDRO
========================================= */

.hero,
.brand-paths > a,
.ms-feature-card,
.home-search,
.community-section,
.brand-resume,
.popular-section,
.latest-section,
.ranking-section {

    background:
        linear-gradient(
            145deg,
            rgba(22, 18, 39, .78),
            rgba(14, 11, 28, .70)
        ) !important;

    border:

        1px solid
        rgba(196, 181, 253, .14);

    backdrop-filter:

        blur(12px);

    -webkit-backdrop-filter:

        blur(12px);

    box-shadow:

        0 18px 45px
        rgba(0, 0, 0, .20);

}


/* cards individuais */

.manga-card,
.ranking-card,
.community-card {

    background:

        rgba(
            18,
            14,
            32,
            .78
        );

    backdrop-filter:

        blur(8px);

    -webkit-backdrop-filter:

        blur(8px);

}


/* =========================================
   TEXTO
========================================= */

.hero h1,
.hero h2,
.section-title,
.community-section h2 {

    text-shadow:

        0 3px 18px
        rgba(0, 0, 0, .45);

}


/* =========================================
   BANNERS
========================================= */

.ms-feature-card {

    overflow: hidden;

}

.ms-feature-card img {

    transition:

        transform .35s ease,
        filter .35s ease;

}

.ms-feature-card:hover img {

    transform:

        scale(1.025);

    filter:

        brightness(1.06)
        saturate(1.08);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    body {

        background:

            linear-gradient(
                180deg,
                rgba(8, 6, 18, .82),
                rgba(12, 8, 25, .92)
            ),

            url('/images/brand/index-bg.png')
            center top / cover
            no-repeat;

        background-attachment:

            scroll;

    }


    body::before {

        position:

            absolute;

    }


    .hero,
    .brand-paths > a,
    .ms-feature-card,
    .home-search,
    .community-section,
    .brand-resume {

        backdrop-filter:

            blur(7px);

        -webkit-backdrop-filter:

            blur(7px);

    }

}


/* celular pequeno */

@media (max-width: 430px) {

    body {

        background-position:

            52% top;

    }

}

/* MANGASOCIAL INDEX BACKGROUND END */