:root{
    --bg:#0d0d0f;
    --bg2:#151518;
    --panel:#1d1d21;
    --panel2:#25252a;
    --line:rgba(255,255,255,.08);
    --text:#fff;
    --muted:#b6b6bf;
    --soft:#85858d;
    --accent:#ff6740;
    --accent2:#ff4356;
    --cyan:#25d3e8;
    --shadow:0 24px 80px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input{font:inherit}

.site-topbar{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(17,17,19,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.topbar-inner{
    min-height:82px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 26px;
}
.site-logo{
    min-width:220px;
    display:flex;
    align-items:center;
    gap:12px;
}
.site-logo-mark,.reader-logo{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    font-weight:950;
    box-shadow:0 12px 32px rgba(255,103,64,.28);
}
.site-logo-text strong{display:block;font-size:1.08rem}
.site-logo-text small{display:block;color:var(--muted);font-size:.75rem;margin-top:3px}

.top-nav{
    display:flex;
    gap:26px;
    white-space:nowrap;
}
.top-nav a{
    font-weight:850;
    color:#fff;
}
.top-nav a:hover{color:var(--accent)}

.top-search{
    margin-left:auto;
    width:min(390px,36vw);
    height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border-radius:8px;
    background:#28282d;
    color:var(--soft);
    border:1px solid rgba(255,255,255,.06);
}
.top-search input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
}
.lang-pill{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.15);
    font-weight:900;
}
.lang-pill:hover{border-color:var(--accent);color:var(--accent)}

.mobile-menu-btn{
    display:none;
    border:0;
    background:transparent;
    color:#fff;
    font-size:1.6rem;
}
.mobile-nav{
    display:none;
    padding:0 18px 18px;
    gap:10px;
    flex-wrap:wrap;
}
.mobile-nav a{
    padding:10px 12px;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    font-weight:800;
}
body.mobile-nav-open .mobile-nav{display:flex}

.site-main{
    padding:26px 0 46px;
}
.content-container{
    width:min(1450px,calc(100% - 40px));
    margin:0 auto;
}

.hero-highlight,.page-hero{
    position:relative;
    overflow:hidden;
    background:#19191c;
    border:1px solid rgba(255,255,255,.05);
    box-shadow:var(--shadow);
}
.hero-highlight{
    min-height:430px;
}
.hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.18;
    filter:blur(3px);
    transform:scale(1.05);
}
.hero-highlight:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(13,13,15,.96),rgba(13,13,15,.68),rgba(13,13,15,.92)),
        linear-gradient(0deg,rgba(13,13,15,.96),transparent 55%);
    z-index:1;
}
.hero-grid{
    position:relative;
    z-index:2;
    min-height:430px;
    display:grid;
    grid-template-columns:minmax(340px,1fr) 360px 310px;
    align-items:center;
    gap:24px;
    padding:34px;
}
.hero-badge{
    display:inline-flex;
    min-height:36px;
    align-items:center;
    padding:0 14px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    font-weight:950;
    margin-bottom:16px;
}
.hero-copy h1{
    margin:0;
    font-size:clamp(3rem,6vw,5rem);
    line-height:.9;
    letter-spacing:-.07em;
}
.hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:18px 0;
}
.hero-tags span{
    padding:5px 9px;
    border-radius:7px;
    background:rgba(255,255,255,.11);
    font-size:.74rem;
    font-weight:950;
    text-transform:uppercase;
}
.hero-tags span:first-child{background:var(--accent)}
.hero-copy p{
    max-width:760px;
    color:#ededf1;
    line-height:1.6;
    font-weight:650;
}
.hero-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px;
}
.btn-main,.btn-ghost{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:9px;
    font-weight:950;
}
.btn-main{background:var(--accent)}
.btn-ghost{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13)}
.btn-main:hover,.btn-ghost:hover{filter:brightness(1.08)}

.hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}
.hero-stats div{
    min-width:112px;
    padding:13px 14px;
    border-radius:12px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.09);
}
.hero-stats strong{display:block;font-size:1.35rem}
.hero-stats span{display:block;color:var(--muted);font-size:.78rem}

.hero-feature-card{
    align-self:stretch;
    min-height:350px;
    overflow:hidden;
    border-radius:14px;
    background:#2b2b31;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.hero-feature-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-feature-card-empty{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-size:3rem;
    font-weight:950;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
}

.hero-side-panel{
    padding:20px;
    border-radius:14px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(10px);
}
.hero-side-panel h3{
    margin:0;
    font-size:1.7rem;
    letter-spacing:-.04em;
}
.hero-side-panel p{
    color:var(--muted);
    margin:8px 0 14px;
}
.rank-list{display:grid;gap:8px}
.rank-item{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:12px;
    align-items:center;
    padding:10px 0;
    border-top:1px solid rgba(255,255,255,.08);
}
.rank-item:first-child{border-top:0}
.rank-item span{
    color:var(--accent);
    font-size:1.25rem;
    font-weight:950;
}
.rank-item strong{
    display:block;
    line-height:1.25;
}
.rank-item small{
    display:block;
    color:var(--muted);
    margin-top:3px;
}

.search-strip{
    margin:22px 0 32px;
}
.search-strip-box,.catalog-search{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    border-radius:14px;
    background:#1a1a1e;
    border:1px solid rgba(255,255,255,.06);
}
.search-strip-box strong{white-space:nowrap}
.search-strip-box input,.catalog-search input{
    flex:1;
    min-width:0;
    height:46px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
    outline:0;
    background:#28282d;
    color:#fff;
}
.search-strip-box input:focus,.catalog-search input:focus{border-color:var(--accent)}

.section-block{
    margin:0 0 38px;
}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:18px;
    margin-bottom:16px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.section-kicker{
    margin:0 0 6px;
    color:var(--cyan);
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:950;
}
.section-head h2{
    margin:0;
    font-size:clamp(2rem,3vw,2.7rem);
    letter-spacing:-.05em;
}
.section-head h2:after{
    content:"";
    display:block;
    width:64px;
    height:3px;
    margin-top:10px;
    background:var(--cyan);
}
.section-actions{
    display:flex;
    align-items:center;
    gap:12px;
}
.see-all-btn{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    font-weight:900;
    color:#fff;
}
.see-all-btn:hover{background:var(--accent);border-color:var(--accent)}

.carousel-controls{display:flex;gap:8px}
.carousel-btn{
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.1);
    background:#1f1f23;
    color:#fff;
    font-size:1.3rem;
    cursor:pointer;
}
.carousel-btn:hover{color:var(--accent);border-color:var(--accent)}

.carousel-track{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 2px 12px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track > *{
    flex:0 0 auto;
    scroll-snap-align:start;
}

.chapter-card{
    width:238px;
    overflow:hidden;
    border-radius:14px;
    background:#1a1a1f;
    border:1px solid rgba(255,255,255,.06);
    transition:.18s ease;
}
.chapter-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,103,64,.5);
}
.chapter-cover{
    position:relative;
    display:block;
    aspect-ratio:2/3;
    background:#2a2a30;
}
.chapter-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.chapter-cover em{
    position:absolute;
    top:0;
    left:0;
    padding:7px 10px;
    border-radius:0 0 8px 0;
    background:var(--accent);
    font-style:normal;
    font-size:.78rem;
    font-weight:950;
}
.chapter-body{padding:12px}
.chapter-title{
    min-height:2.5em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.25;
    font-weight:950;
}
.chapter-meta{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-top:10px;
    color:var(--muted);
    font-size:.78rem;
}
.mini-read-btn{
    margin-top:12px;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    border-radius:8px;
    background:rgba(255,255,255,.07);
    font-weight:850;
}
.mini-read-btn:hover{background:var(--accent)}

.volume-card{
    width:382px;
    min-height:230px;
    display:grid;
    grid-template-columns:150px 1fr;
    overflow:hidden;
    border-radius:16px;
    background:#19191d;
    border:1px solid rgba(255,255,255,.06);
    transition:.18s ease;
}
.volume-card:hover{
    transform:translateY(-3px);
    border-color:rgba(37,211,232,.45);
}
.volume-cover{
    display:block;
    background:#2a2a30;
}
.volume-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.volume-body{
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.volume-chip{
    align-self:flex-start;
    margin-bottom:10px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(37,211,232,.12);
    color:var(--cyan);
    font-size:.72rem;
    font-weight:950;
}
.volume-title{
    font-size:1.45rem;
    font-weight:950;
    letter-spacing:-.03em;
    line-height:1.15;
}
.volume-body p{
    margin:10px 0 0;
    color:var(--muted);
    line-height:1.45;
}
.volume-open{
    align-self:flex-start;
    margin-top:16px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    padding:0 14px;
    border-radius:9px;
    background:var(--accent);
    font-weight:950;
}

.empty-card{
    display:grid!important;
    place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-weight:950;
}

.back-link{
    display:inline-flex;
    margin:0 0 18px;
    color:var(--accent);
    font-weight:950;
}
.page-hero.small-hero{
    padding:30px;
    border-radius:16px;
    margin-bottom:24px;
    background:
        linear-gradient(135deg,rgba(255,103,64,.18),rgba(37,211,232,.08)),
        #1a1a1e;
}
.page-hero h1{
    margin:0;
    font-size:clamp(2.5rem,5vw,4rem);
    letter-spacing:-.06em;
}
.page-hero p{
    color:var(--muted);
    margin:10px 0 0;
}
.all-grid-section{margin-top:24px}
.grid-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:16px;
}
.grid-list .chapter-card{
    width:100%;
}
.volume-grid-list{
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.volume-grid-list .volume-card{
    width:100%;
}

.searchable-card.is-hidden{display:none!important}

/* Reader vertical */
.reader-body{
    background:#080809;
}
.reader-topbar{
    position:sticky;
    top:0;
    z-index:100;
    min-height:74px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 20px;
    background:rgba(10,10,11,.96);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
}
.reader-title-box{
    min-width:0;
    flex:1;
}
.reader-title-box strong{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.reader-title-box small{
    display:block;
    color:var(--muted);
    margin-top:3px;
}
.reader-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.reader-actions a{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border-radius:9px;
    background:#202025;
    border:1px solid rgba(255,255,255,.08);
    font-weight:900;
}
.reader-actions a.primary{
    background:var(--accent);
    border-color:var(--accent);
}
.reader-progress{
    position:sticky;
    top:74px;
    z-index:99;
    height:4px;
    background:#1d1d21;
}
.reader-progress span{
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,var(--accent),var(--cyan));
}
.vertical-reader-main{
    padding:18px 12px 60px;
}
.reader-mode-bar{
    width:min(1040px,100%);
    margin:0 auto 14px;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 16px;
    border-radius:14px;
    background:#16161a;
    border:1px solid rgba(255,255,255,.07);
    color:var(--muted);
    font-weight:850;
}
.reader-mode-bar span:first-child{
    color:#fff;
}
.vertical-pages{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.vertical-page{
    width:min(1040px,100%);
    margin:0;
    background:#111115;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.vertical-page span{
    display:block;
    padding:8px;
    text-align:center;
    color:var(--muted);
    background:#17171b;
    font-size:.8rem;
}
.vertical-page img{
    width:100%;
    height:auto;
    margin:0 auto;
}
.reader-end-card,.empty-state{
    width:min(860px,100%);
    margin:28px auto;
    padding:34px;
    text-align:center;
    border-radius:16px;
    background:#17171b;
    border:1px solid rgba(255,255,255,.07);
}
.reader-end-card h2,.empty-state h1{
    margin:0;
    font-size:clamp(2rem,5vw,3.5rem);
    letter-spacing:-.05em;
}
.reader-end-card p,.empty-state p{
    color:var(--muted);
}
.reader-end-card div{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:18px;
}
.reader-end-card a{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:0 14px;
    border-radius:9px;
    background:#25252b;
    font-weight:900;
}
.reader-end-card a.primary{
    background:var(--accent);
}

code{
    display:inline-block;
    margin-top:8px;
    padding:6px 10px;
    border-radius:8px;
    background:#101011;
    border:1px solid rgba(255,255,255,.08);
}

@media (max-width:1260px){
    .hero-grid{
        grid-template-columns:1fr 300px;
    }
    .hero-feature-card{display:none}
}
@media (max-width:980px){
    .top-nav,.lang-pill{display:none}
    .mobile-menu-btn{display:block}
    .topbar-inner{padding:0 16px}
    .top-search{width:min(100%,420px)}
    .content-container{width:calc(100% - 24px)}
    .hero-grid{
        grid-template-columns:1fr;
        padding:24px;
    }
    .hero-side-panel{display:none}
    .search-strip-box,.catalog-search{
        flex-direction:column;
        align-items:stretch;
    }
    .reader-topbar{
        flex-wrap:wrap;
    }
    .reader-actions{
        width:100%;
        overflow:auto;
        flex-wrap:nowrap;
    }
    .reader-actions a{
        white-space:nowrap;
    }
    .reader-progress{top:128px}
}
@media (max-width:700px){
    .top-search{display:none}
    .site-logo{min-width:0}
    .site-logo-text small{display:none}
    .content-container{width:calc(100% - 18px)}
    .hero-copy h1{font-size:2.8rem}
    .hero-stats{display:grid;grid-template-columns:repeat(2,1fr)}
    .section-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .section-actions{
        width:100%;
        justify-content:space-between;
    }
    .chapter-card{width:190px}
    .volume-card{
        width:320px;
        grid-template-columns:120px 1fr;
    }
    .grid-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    .volume-grid-list{
        grid-template-columns:1fr;
    }
    .volume-grid-list .volume-card{
        grid-template-columns:120px 1fr;
    }
    .reader-mode-bar{
        flex-direction:column;
        align-items:flex-start;
        padding:12px;
    }
}
@media (max-width:460px){
    .chapter-card{width:178px}
    .chapter-body{padding:10px}
    .chapter-title{font-size:.9rem}
    .chapter-meta{flex-direction:column;font-size:.72rem}
    .volume-card{
        width:292px;
        grid-template-columns:106px 1fr;
    }
    .volume-title{font-size:1.1rem}
    .volume-body p{font-size:.82rem}
}

/* =========================================================
   Aoyama Project - Logo oficial no topo
   ========================================================= */

.site-logo.site-logo-image-only{
    min-width:0 !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}

.site-logo-img{
    height:58px;
    width:auto;
    max-width:240px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));
}

@media (max-width:980px){
    .site-logo-img{
        height:50px;
        max-width:190px;
    }
}

@media (max-width:520px){
    .site-logo-img{
        height:44px;
        max-width:150px;
    }
}

/* =========================================================
   Aoyama Project - Aviso de créditos das traduções
   ========================================================= */

.translation-notice{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:58px 1fr;
    gap:18px;
    margin:24px 0 22px;
    padding:22px;
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(255,103,64,.16),rgba(37,211,232,.08)),
        #1a1a1e;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 60px rgba(0,0,0,.28);
}

.translation-notice:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,rgba(255,103,64,.22),transparent 24rem),
        radial-gradient(circle at bottom left,rgba(37,211,232,.12),transparent 22rem);
    pointer-events:none;
}

.translation-notice-icon{
    position:relative;
    z-index:1;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-size:2rem;
    font-weight:950;
    box-shadow:0 14px 36px rgba(255,103,64,.28);
}

.translation-notice-content{
    position:relative;
    z-index:1;
    min-width:0;
}

.translation-notice-content h2{
    margin:0 0 14px;
    font-size:clamp(1.6rem,3vw,2.4rem);
    letter-spacing:-.05em;
}

.translation-credit-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.translation-credit-card{
    min-height:112px;
    padding:15px;
    border-radius:14px;
    background:rgba(0,0,0,.24);
    border:1px solid rgba(255,255,255,.08);
}

.translation-credit-card strong{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-size:1rem;
}

.translation-credit-card span{
    display:block;
    color:var(--muted);
    line-height:1.45;
    font-size:.92rem;
}

.translation-credit-card b{
    color:#fff;
}

@media (max-width:1100px){
    .translation-credit-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px){
    .translation-notice{
        grid-template-columns:1fr;
        padding:18px;
    }

    .translation-notice-icon{
        width:48px;
        height:48px;
        border-radius:15px;
        font-size:1.5rem;
    }

    .translation-credit-grid{
        grid-template-columns:1fr;
    }

    .translation-credit-card{
        min-height:auto;
    }
}

/* =========================================================
   Aoyama Project - Melhorias de leitura no celular
   ========================================================= */

.vertical-reader-body{
    background:#050506;
    overscroll-behavior-y:contain;
}

.vertical-reader-body .reader-progress{
    height:5px;
}

.vertical-reader-main{
    background:
        radial-gradient(circle at top,rgba(255,103,64,.055),transparent 28rem),
        #050506;
}

.vertical-pages{
    width:100%;
}

.vertical-page{
    overflow:hidden;
}

.vertical-page img{
    display:block;
    touch-action:pan-y pinch-zoom;
    -webkit-user-select:none;
    user-select:none;
}

.mobile-reader-bar,
.mobile-reader-page-pill,
.mobile-reader-float-actions{
    display:none;
}

@media (max-width:760px){
    html,
    body.vertical-reader-body{
        background:#050506;
    }

    body.vertical-reader-body{
        padding-bottom:calc(76px + env(safe-area-inset-bottom));
    }

    .vertical-reader-body .reader-topbar{
        min-height:64px;
        padding:8px 10px;
        gap:10px;
        align-items:center;
        transition:transform .22s ease, opacity .22s ease;
    }

    .vertical-reader-body.reader-ui-hidden .reader-topbar{
        transform:translateY(-100%);
        opacity:.12;
    }

    .vertical-reader-body .reader-logo{
        width:38px;
        height:38px;
        border-radius:12px;
        flex:0 0 auto;
        font-size:.9rem;
    }

    .vertical-reader-body .reader-title-box{
        flex:1;
        min-width:0;
    }

    .vertical-reader-body .reader-title-box strong{
        font-size:.84rem;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .vertical-reader-body .reader-title-box small{
        font-size:.7rem;
        margin-top:2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .vertical-reader-body .reader-actions{
        display:none;
    }

    .vertical-reader-body .reader-progress{
        top:64px !important;
        height:4px;
        transition:top .22s ease;
    }

    .vertical-reader-body.reader-ui-hidden .reader-progress{
        top:0 !important;
    }

    .vertical-reader-main{
        padding:8px 0 22px;
    }

    .reader-mode-bar{
        width:calc(100% - 16px);
        min-height:auto;
        margin:0 auto 8px;
        padding:10px 12px;
        border-radius:12px;
        font-size:.78rem;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        background:rgba(22,22,26,.9);
        backdrop-filter:blur(10px);
    }

    .reader-mode-bar span:last-child{
        color:var(--soft);
        text-align:right;
    }

    .vertical-pages{
        gap:6px;
    }

    .vertical-page{
        width:100%;
        max-width:100%;
        border-left:0;
        border-right:0;
        border-radius:0;
        box-shadow:none;
        background:#050506;
    }

    .vertical-page span{
        display:none;
    }

    .vertical-page img{
        width:100%;
        max-width:100%;
        height:auto;
        border-radius:0;
        margin:0 auto;
        background:#050506;
    }

    .reader-end-card,
    .empty-state{
        width:calc(100% - 20px);
        margin:18px auto 92px;
        padding:22px 16px;
        border-radius:16px;
    }

    .reader-end-card h2,
    .empty-state h1{
        font-size:2rem;
    }

    .reader-end-card div{
        display:grid;
        grid-template-columns:1fr;
    }

    .reader-end-card a{
        width:100%;
        justify-content:center;
        min-height:46px;
    }

    .mobile-reader-bar{
        position:fixed;
        left:10px;
        right:10px;
        bottom:calc(10px + env(safe-area-inset-bottom));
        z-index:220;
        min-height:58px;
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        align-items:center;
        gap:8px;
        padding:8px;
        border-radius:18px;
        background:rgba(14,14,16,.9);
        border:1px solid rgba(255,255,255,.1);
        box-shadow:0 18px 60px rgba(0,0,0,.55);
        backdrop-filter:blur(18px);
        transition:transform .22s ease, opacity .22s ease;
    }

    .vertical-reader-body.reader-ui-hidden .mobile-reader-bar{
        transform:translateY(calc(100% + 18px));
        opacity:.12;
    }

    .mobile-reader-bar a{
        min-height:42px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 8px;
        border-radius:13px;
        background:#24242a;
        border:1px solid rgba(255,255,255,.08);
        color:#fff;
        font-size:.78rem;
        font-weight:900;
        text-align:center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .mobile-reader-bar a.primary{
        background:var(--accent);
        border-color:var(--accent);
    }

    .mobile-reader-bar a.disabled{
        opacity:.36;
        pointer-events:none;
    }

    .mobile-reader-page-pill{
        position:fixed;
        top:74px;
        right:10px;
        z-index:210;
        min-height:34px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 12px;
        border-radius:999px;
        background:rgba(14,14,16,.82);
        border:1px solid rgba(255,255,255,.11);
        color:#fff;
        font-size:.78rem;
        font-weight:900;
        box-shadow:0 12px 34px rgba(0,0,0,.35);
        backdrop-filter:blur(14px);
        transition:transform .22s ease, opacity .22s ease, top .22s ease;
    }

    .vertical-reader-body.reader-ui-hidden .mobile-reader-page-pill{
        top:10px;
        opacity:.75;
    }

    .mobile-reader-float-actions{
        position:fixed;
        right:10px;
        bottom:calc(82px + env(safe-area-inset-bottom));
        z-index:215;
        display:grid;
        gap:8px;
        transition:transform .22s ease, opacity .22s ease;
    }

    .vertical-reader-body.reader-ui-hidden .mobile-reader-float-actions{
        transform:translateY(70px);
        opacity:.18;
    }

    .mobile-reader-float-actions button{
        width:44px;
        height:44px;
        border:1px solid rgba(255,255,255,.1);
        border-radius:999px;
        background:rgba(20,20,23,.86);
        color:#fff;
        font-size:1.1rem;
        font-weight:950;
        box-shadow:0 12px 34px rgba(0,0,0,.35);
        backdrop-filter:blur(14px);
    }

    .mobile-reader-float-actions button:active,
    .mobile-reader-bar a:active{
        transform:scale(.96);
    }
}

@media (max-width:420px){
    .reader-mode-bar{
        font-size:.72rem;
    }

    .mobile-reader-bar{
        left:7px;
        right:7px;
        bottom:calc(7px + env(safe-area-inset-bottom));
        border-radius:16px;
        gap:6px;
    }

    .mobile-reader-bar a{
        font-size:.72rem;
        padding:0 6px;
    }

    .mobile-reader-page-pill{
        right:7px;
        font-size:.72rem;
    }
}

/* =========================================================
   Aoyama Project - Comentários anônimos por capítulo
   ========================================================= */

.chapter-comments{
    width:min(1040px,100%);
    margin:28px auto 70px;
    padding:22px;
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(255,103,64,.10),rgba(37,211,232,.05)),
        #17171b;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 60px rgba(0,0,0,.25);
}

.comments-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.comments-head h2{
    margin:0;
    font-size:clamp(1.7rem,3vw,2.4rem);
    letter-spacing:-.05em;
}

.comments-head p{
    color:var(--muted);
    margin:8px 0 0;
}

.comments-count{
    flex:0 0 auto;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:.82rem;
    font-weight:900;
}

.comment-form{
    display:grid;
    gap:12px;
    margin-bottom:18px;
}

.comment-form-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}

.comment-form input,
.comment-form textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.08);
    outline:0;
    border-radius:12px;
    background:#232329;
    color:#fff;
    padding:13px 14px;
}

.comment-form textarea{
    min-height:110px;
    resize:vertical;
    line-height:1.45;
}

.comment-form input:focus,
.comment-form textarea:focus{
    border-color:var(--accent);
}

.comment-form button{
    border:0;
    min-height:46px;
    padding:0 18px;
    border-radius:12px;
    background:var(--accent);
    color:#fff;
    font-weight:950;
    cursor:pointer;
}

.comment-form button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.comment-form small{
    color:var(--muted);
    font-size:.82rem;
}

.comment-hp{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.comment-status{
    min-height:20px;
    color:var(--muted);
    font-weight:800;
}

.comment-status.is-error{
    color:#ff6b6b;
}

.comment-status.is-success{
    color:#57e389;
}

.comments-list{
    display:grid;
    gap:12px;
}

.comment-card{
    padding:15px;
    border-radius:14px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.07);
}

.comment-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.comment-author{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    font-weight:950;
}

.comment-avatar{
    width:34px;
    height:34px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-size:.82rem;
    font-weight:950;
    flex:0 0 auto;
}

.comment-date{
    color:var(--soft);
    font-size:.78rem;
    white-space:nowrap;
}

.comment-message{
    color:#f2f2f4;
    line-height:1.55;
    white-space:pre-wrap;
    word-break:break-word;
}

.comments-empty{
    padding:18px;
    text-align:center;
    border-radius:14px;
    color:var(--muted);
    background:rgba(0,0,0,.18);
    border:1px dashed rgba(255,255,255,.1);
}

@media (max-width:760px){
    .chapter-comments{
        width:calc(100% - 16px);
        margin:22px auto calc(96px + env(safe-area-inset-bottom));
        padding:16px;
        border-radius:16px;
    }

    .comments-head{
        display:grid;
        gap:12px;
    }

    .comments-count{
        justify-self:start;
    }

    .comment-form-row{
        grid-template-columns:1fr;
    }

    .comment-form button{
        width:100%;
    }

    .comment-card-head{
        align-items:flex-start;
    }

    .comment-date{
        font-size:.72rem;
    }
}
