.reader-container{
    max-width:900px;
    margin:auto;
    padding:0;
    color:#eee;
    font-family:sans-serif;
}

.reader-top{
    margin-top: 1px;
    background:#333;
    padding:12px;
    border-radius:5px;
    margin-bottom:10px;
    text-align:center;
}

.novel-title{
    display:block;
    font-size:16px;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    margin-bottom:10px;
}

.chapter-nav-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chapter-count{
    text-align:center;
    font-size:16px;
    opacity:0.8;
}

.chapter-number{
    font-size:14px;
}

.chapter-percent{
    text-align:end;
    font-size:13px;
    color:#aaa;
    margin-top:2px;
}

.chapter-content h1{
    margin-top:0;
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
    border-bottom:1px solid #616161;
    padding-bottom:10px;
}

.chapter-content{
    background:#333;
    padding:20px;
    border-radius:5px;
    line-height:1.8;
    font-size:15px;
}

.nav-btn{
    font-size:13px;
    border:1px solid #444;
    color:#eee;
    padding:6px 10px;
    border-radius:8px;
    text-decoration:none;
}

.nav-btn:hover{
    opacity:0.8;
}

.page-content{
    padding:1px;
    min-height:100vh;
}

.chapter-nav-bottom{
    margin-bottom: 40px;
    border-radius: 5px;
    padding: 10px;
    background: #333;
    margin-top: 10px;
    display:flex;
    justify-content:space-between;
}

.menu-btn{
    background:#222;
    color:#fff;
    border:1px solid #444;
    padding:6px 12px;
    border-radius:8px;
    cursor:pointer;
}

.chapter-popup{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    display:none;
    justify-content:center;
    align-items:flex-end;
    z-index:999;
}

.popup-box{
    background:#2a2a2a;
    width:100%;
    max-width:500px;
    height:70%;
    border-radius:15px 15px 0 0;
}

.popup-header{
    color: #fff;
    padding:15px;
    border-bottom:1px solid #333;
    display:flex;
    justify-content:space-between;
}

.popup-list{
    overflow-y:auto;
    height:calc(100% - 50px);
}

.popup-item{
    border-radius:1rem;
    display:block;
    padding:15px 20px;
    color:#ccc;
    text-decoration:none;
    border:1px solid #222;
}

.popup-item.active{
    color:#fff;
}

.close-btn{
    cursor:pointer;
}






.locked-content{
    position:relative;
    max-height:650px;
    overflow:hidden;
}

.locked-content::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:350px;
    background:linear-gradient(
        rgba(51,51,51,0),
        rgba(51,51,51,.85),
        #333
    );
    pointer-events:none;
}

.chapter-lock{
    position:absolute;
    left:50%;
    bottom:40px;
    transform:translateX(-50%);
    width:90%;
    max-width:420px;
    background:#222;
    border:1px solid #444;
    border-radius:14px;
    padding:25px;
    text-align:center;
    z-index:10;
}

.chapter-lock i{
    font-size:42px;
    color:#ffb400;
    margin-bottom:12px;
}

.chapter-lock h2{
    margin:10px 0;
    color:#fff;
}

.chapter-lock p{
    color:#bbb;
    margin-bottom:20px;
}

.login-btn,
.register-btn{
    display:inline-block;
    padding:10px 22px;
    margin:5px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
}

.login-btn{
    background:#3effb9;
    color:#000;
}

.register-btn{
    background:#444;
    color:#fff;
}


.ad-note {
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    text-align: center;
    color: #00fcad;
    background: #333;
}



/* ==========================================
   READER SETTINGS BUTTON
========================================== */

.reader-settings-btn{

    position: fixed;

    right: 18px;

    top: 150px;

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 50%;

    background: #263244;

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    z-index: 9998;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .2s;

}


.reader-settings-btn:hover{

    transform: scale(1.08);

}


/* ==========================================
   SETTINGS OVERLAY
========================================== */

.reader-settings-overlay{

    position: fixed;

    inset: 0;

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

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 99999;

   /* padding: 20px;*/ 
   margin-bottom: -100px;

}


.reader-settings-overlay.active{

    display: flex;

}


/* ==========================================
   SETTINGS BOX
========================================== */

.reader-settings-box{

    width: 100%;

    max-width: 430px;

    background: #202b3b;

    color: #fff;

    border-radius: 14px;

    padding: 20px;

    box-sizing: border-box;

    box-shadow: 0 15px 50px rgba(0,0,0,.5);

}


/* HEADER */

.settings-header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 19px;

    margin-bottom: 20px;

}


.settings-close{

    border: none;

    background: transparent;

    color: #fff;

    font-size: 28px;

    cursor: pointer;

}


/* ROW */

.setting-row{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 5px 0;

    border-bottom: 1px solid rgba(255,255,255,.1);

}


.setting-controls{

    display: flex;

    align-items: center;

    gap: 8px;

}


.setting-controls button{

    min-width: 40px;

    height: 36px;

    border: none;

    border-radius: 7px;

    background: #344258;

    color: #fff;

    cursor: pointer;

    font-size: 16px;

}


.setting-controls button:hover{

    background: #43536d;

}


.setting-controls span{

    min-width: 55px;

    text-align: center;

    font-size: 14px;

}


#readerFont{

    background: #344258;

    color: #fff;

    border: none;

    border-radius: 7px;

    padding: 9px;

    outline: none;

}


/* RESET */

.settings-reset{

    width: 100%;

    margin-top: 20px;

    padding: 11px;

    border: none;

    border-radius: 8px;

    background: #8b35e8;

    color: white;

    font-size: 15px;

    cursor: pointer;

}


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

@media(max-width:600px){

    .reader-settings-btn{

        right: 14px;

        top: 80px;

        width: 42px;

        height: 42px;

    }


    .reader-settings-box{

        max-width: auto;

        border-radius: 12px;

        padding: 16px;

    }


    .setting-row{
        gap: 5px;

        flex-direction: column;

        align-items: flex-start;

    }


    .setting-controls{

        width: 100%;

        justify-content: space-between;

    }

}


/* ==========================================
   READER THEMES
========================================== */


/* DARK */

body.reader-theme-dark{

    background: #0f1115;

    color: #e8e8e8;

}


/* Eerie */

body.reader-theme-Eerie{

    background: #151922;

    color: #fffafa;

}

/* LIGHT */

body.reader-theme-light{

    background: #ffffff;

    color: #222222;

}


/* SEPIA */

body.reader-theme-sepia{

    background: #f4ecd8;

    color: #40382d;

}


/* ==========================================
   CHAPTER CONTENT THEME
========================================== */

body.reader-theme-dark .chapter-content{

    background: #333;

    color: #e8e8e8;

}

body.reader-theme-Eerie .chapter-content{

    background: #151922;

    color: #fffafa;

}

body.reader-theme-light .chapter-content{

    background: #ffffff;

    color: #222222;

}


body.reader-theme-sepia .chapter-content{

    background: #f4ecd8;

    color: #40382d;

}


/* ==========================================
   PARAGRAPH
========================================== */

body.reader-theme-dark .chapter-content p{

    color: #e8e8e8;

}


body.reader-theme-Eerie .chapter-content p{

    color: #fffafa;

}

body.reader-theme-light .chapter-content p{

    color: #222222;

}


body.reader-theme-sepia .chapter-content p{

    color: #40382d;

}


/* ==========================================
   THEME BUTTONS
========================================== */

.theme-controls{

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.theme-btn{

    border: 1px solid rgba(255,255,255,.15);

    background: #344258;

    color: #fff;

    padding: 8px 12px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 13px;

}


.theme-btn:hover{

    opacity: .85;

}


.theme-btn.active{

    outline: 2px solid #8b35e8;

    background: #8b35e8;

}





/* LIGHT MODE SETTINGS */

body.reader-theme-light .reader-settings-box{

    background: #ffffff;

    color: #222;

    box-shadow: 0 15px 50px rgba(0,0,0,.2);

}


body.reader-theme-light .settings-close{

    color: #222;

}


body.reader-theme-light .setting-row{

    border-color: rgba(0,0,0,.1);

}


/* SEPIA SETTINGS */

body.reader-theme-sepia .reader-settings-box{

    background: #f4ecd8;

    color: #40382d;

}


body.reader-theme-sepia .settings-close{

    color: #40382d;

}


body.reader-theme-sepia .setting-row{

    border-color: rgba(64,56,45,.15);

}
/* Eerie SETTINGS */

body.reader-theme-Eerie .reader-settings-box{

    background: #151922;

    color: #fffafa;

}


body.reader-theme-Eerie .settings-close{

    color: #fffafa;

}


body.reader-theme-Eerie .setting-row{

    border-color: rgba(64,56,45,.15);

}



/* ==========================================
   SHARE BUTTON
========================================== */

.reader-share-btn{

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 50%;

    background: #263244;

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


.reader-share-btn:hover{

    transform: scale(1.08);

}


/* ==========================================
   SHARE MESSAGE
========================================== */

#shareMessage{

    position: fixed;

    left: 50%;

    bottom: 80px;

    transform: translateX(-50%) translateY(20px);

    background: #222;

    color: #fff;

    padding: 10px 18px;

    border-radius: 8px;

    font-size: 14px;

    opacity: 0;

    pointer-events: none;

    transition: .25s;

    z-index: 999999;

}


#shareMessage.show{

    opacity: 1;

    transform: translateX(-50%) translateY(0);

}

/* ==========================================
   TTS OPEN BUTTON
========================================== */

.tts-open-btn{

    border: none;

    background: #344258;

    color: #fff;

    padding: 9px 13px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 13px;

}


.tts-open-btn:hover{

    background: #43536d;

}


/* ==========================================
   TTS CLOSE BUTTON
========================================== */

.tts-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.tts-close{

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#344258;

    color:#fff;

    cursor:pointer;

    font-size:16px;

}


.tts-close:hover{

    background:#43536d;

}



.setting-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.setting-tts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}