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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#eef2f7;
    font-family:'Segoe UI',sans-serif;
}

/* ================= PDF VIEWER ================= */

#viewer{

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:85px;

    overflow:auto;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    padding:20px;

}

canvas{

    background:#fff;

    border-radius:12px;

    box-shadow:0 10px 35px rgba(0,0,0,.20);

    max-width:100%;

    height:auto;

}

/* ================= TOOLBAR ================= */

.toolbar{

    position:fixed;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    width:min(560px,96%);

    height:64px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(12px);

    border-radius:35px;

    display:flex;

    align-items:center;

    justify-content:space-evenly;

    box-shadow:0 12px 35px rgba(0,0,0,.18);

    z-index:999;

}

.toolbar button{

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#f4f6fb;

    cursor:pointer;

    font-size:22px;

    transition:.25s;

}

.toolbar button:hover{

    background:#304ffe;

    color:white;

}

/* ================= PAGE INPUT ================= */

#pageInput{

    width:60px;

    height:40px;

    border:none;

    border-radius:10px;

    background:#f3f4f6;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    outline:none;

}

#totalPages{

    min-width:55px;

    text-align:center;

    font-weight:bold;

    font-size:18px;

}

/* ================= SEARCH MODAL ================= */

.search-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.search-box{

    width:min(340px,90%);

    background:white;

    padding:28px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.search-box h3{

    margin-bottom:18px;

    color:#1e3a8a;

}

.search-box input{

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    border-radius:12px;

    text-align:center;

    font-size:24px;

    margin-bottom:18px;

}

.search-buttons{

    display:flex;

    gap:12px;

}

.search-buttons button{

    flex:1;

    border:none;

    border-radius:12px;

    padding:13px;

    cursor:pointer;

    font-size:16px;

}

#goSearch{

    background:#304ffe;

    color:white;

}

#closeSearch{

    background:#e5e7eb;

}

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

@media(max-width:768px){

    #viewer{

        padding:10px;

        bottom:82px;

    }

    canvas{

        width:100% !important;

        height:auto !important;

    }

    .toolbar{

        height:60px;

        width:96%;

    }

    .toolbar button{

        width:42px;

        height:42px;

        font-size:20px;

    }

    #pageInput{

        width:52px;

        height:36px;

        font-size:16px;

    }

    #totalPages{

        font-size:16px;

    }

}

@media(max-width:480px){

    .toolbar{

        height:58px;

        border-radius:28px;

    }

    .toolbar button{

        width:38px;

        height:38px;

        font-size:18px;

    }

    #pageInput{

        width:46px;

        font-size:15px;

    }

}


/* ================= SPLASH SCREEN ================= */

#splash{

    position:fixed;

    inset:0;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .8s ease;

}

#splash.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

#splash img{

    width:100%;

    height:100%;

    object-fit:contain;

    background:#fff;

}

#app{

    opacity:0;

    transition:opacity .8s ease;

}

#app.show{

    opacity:1;

}

/* HP */

@media(max-width:768px){

    #splash img{

        width:100%;

        height:100%;

        object-fit:contain;

    }

}

/* Desktop */

@media(min-width:769px){

    #splash{

        background:#eceff5;

    }

    #splash img{

        max-width:550px;

        max-height:95vh;

        width:auto;

        height:auto;

        object-fit:contain;

        border-radius:18px;

        box-shadow:0 20px 60px rgba(0,0,0,.25);

    }

}