* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --toolbar-height:64px;
    --background:#111111;
    --toolbar:#1d1d1d;
    --toolbar-border:#2b2b2b;
    --button:#2d2d2d;
    --button-hover:#3d3d3d;
    --text:#ffffff;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:var(--background);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color:var(--text);

}

#app{

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

}

#toolbar{

    height:var(--toolbar-height);

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 18px;

    background:var(--toolbar);

    border-bottom:1px solid var(--toolbar-border);

    flex-shrink:0;

    z-index:1000;

}

#toolbar button{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:var(--button);

    color:white;

    cursor:pointer;

    transition:.25s;

    font-size:18px;

}

#toolbar button:hover{

    background:var(--button-hover);

}

.spacer{

    flex:1;

}

#pageIndicator{

    font-weight:600;

    user-select:none;

    min-width:130px;

    text-align:center;

}

#viewer{

    flex:1;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:25px;

    background:
        radial-gradient(circle at center,
            #303030 0%,
            #181818 55%,
            #101010 100%);

}

#loadingOverlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    font-weight:600;

    color:var(--text);

    background:rgba(17,17,17,0.85);

    z-index:2000;

}

#book{

    width:min(1500px,96vw);

    height:min(1050px,92vh);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

/* páginas */

.stf__parent{

    margin:auto !important;

}

.stf__block{

    border-radius:6px;

}

.page{

    background:white;

    overflow:hidden;

}

.page img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

    user-select:none;

    pointer-events:none;

}

/* capa: preenche todo o espaço sem sobrar barras brancas */

.page.cover img{

    object-fit:cover;

}

/* sombras */

.stf__parent canvas{

    border-radius:8px;

}

/* Scroll escondido */

::-webkit-scrollbar{

    display:none;

}

/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width:1000px){

    #book{

        width:96vw;

        height:90vh;

    }

}

/* ============================= */
/* CELULAR */
/* ============================= */

@media (max-width:768px){

    #toolbar{

        height:58px;

        padding:0 8px;

        gap:6px;

    }

    #toolbar button{

        width:38px;

        height:38px;

        font-size:16px;

    }

    #pageIndicator{

        min-width:auto;

        font-size:14px;

    }

    #viewer{

        padding:10px;

    }

    #book{

        width:95vw;

        height:84vh;

    }

}

/* ============================= */
/* CELULARES PEQUENOS */
/* ============================= */

@media (max-width:480px){

    #book{

        width:98vw;

        height:82vh;

    }

    #toolbar{

        padding:0 6px;

    }

}