/* =====================================
   FLOATING READER MENU
===================================== */

.reader-menu{

    position:fixed;

    right:32px;

    bottom:32px;

    z-index:9999;

}

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

.reader-menu-toggle{

    width:62px;

    height:62px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        180deg,
        #d4b15b,
        #b68a2c
    );

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    cursor:pointer;

    transition:
        transform .25s,
        box-shadow .25s;

}

.reader-menu-toggle:hover{

    transform:translateY(-2px);

}

#dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;
    margin-left: 8px;

    border: none;
    background: transparent;

    color: inherit;
    cursor: pointer;

    border-radius: 50%;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

#dark-mode-toggle:hover {
    background: var(--gold-soft);
}

/* ===========================
   HAMBURGER
=========================== */

.reader-menu-toggle span{

    width:24px;

    height:2px;

    background:white;

    border-radius:999px;

    transition:.3s ease;

}

/* OPEN */

.reader-menu.open .reader-menu-toggle span:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}

.reader-menu.open .reader-menu-toggle span:nth-child(2){

    opacity:0;

}

.reader-menu.open .reader-menu-toggle span:nth-child(3){

    transform:
        translateY(-8px)
        rotate(-45deg);

}

/* ===========================
   MENU PANEL
=========================== */

.reader-menu-panel{

    position:absolute;

    right:0;

    bottom:80px;

    width:320px;

    max-height:70vh;

    background:var(--surface-color);

    border-radius:18px;

    border:1px solid var(--border-color);

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

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(10px)
        scale(.95);

    transition:.25s;

}

/* OPEN */

.reader-menu.open .reader-menu-panel{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}

/* ===========================
   ITEMS
=========================== */

.reader-menu-item{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

    border:none;

    background:none;

    color:var(--text-color);

    font-size:16px;

    cursor:pointer;

    transition:.2s;

}

.reader-menu-item:hover{

    background:rgba(212,177,91,.08);

}

.reader-menu-icon{

    width:28px;

    text-align:center;

}

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

@media (max-width:768px){

    .reader-menu{

        right:18px;

        bottom:18px;

    }

    .reader-menu-panel{

        width:200px;

    }

}

/* =====================================
   PANEL PAGES
===================================== */

.reader-page{

    display:none;

}

.reader-page.active{

    display:block;

}

/* =====================================
   PANEL TITLE
===================================== */

.reader-panel-title{

    padding:20px;

    font-size:18px;

    font-weight:700;

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

}

/* =====================================
   MENU ITEMS
===================================== */

.reader-menu-item{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    background:none;

    border:none;

    cursor:pointer;

    color:var(--text-color);

    transition:
        background .25s,
        padding-left .25s;

}

.reader-menu-item:hover{

    background:rgba(212,177,91,.08);

    padding-left:28px;

}

.reader-arrow{

    transition:transform .25s;

}

.reader-menu-item:hover .reader-arrow{

    transform:translateX(5px);

}

/* =====================================
   BACK BUTTON
===================================== */

.reader-back-button{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    padding:18px 22px;

    background:none;

    border:none;

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

    color:var(--text-color);

    cursor:pointer;

    transition:
        background .25s,
        padding-left .25s;

}

.reader-back-button:hover{


    padding-left:28px;

}

/* =====================================
   PLACEHOLDER
===================================== */

.reader-placeholder{

    padding:24px;

    color:var(--text-soft);

}


/* ===========================
   Chapter List
=========================== */

.reader-progress{

    display:block;

    margin-top:6px;

    font-size:14px;

    font-weight:400;

    color:var(--text-soft);

}

.reader-chapter-list{

    max-height:55vh;

    overflow-y:auto;

}

.reader-chapter-item{

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 16px 20px;

    color: var(--text-color);

    transition:
        background .25s,
        transform .25s;

}

.reader-chapter-item:hover{

    background: rgba(212,177,91,.08);

}

.reader-chapter-item.active{

    background: rgba(212,177,91,.12);

}

.reader-chapter-item.active::before{

    content: "";

    position: absolute;

    left: 0;

    top: 10px;

    bottom: 10px;

    width: 4px;

    border-radius: 999px;

    background: var(--gold-primary);

}

.reader-chapter-item.active .reader-chapter-number{

    color: var(--gold-primary);

    font-weight: 700;

}

.reader-chapter-item.active .reader-chapter-title{

    font-weight: 700;

}

.reader-chapter-number{

    width:34px;

    flex-shrink:0;

    text-align:center;

    font-weight:700;

    color:var(--gold-primary);

}

.reader-chapter-title{

    flex:1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    transition: transform .25s ease;

}

.reader-chapter-item.active{

    background:rgba(212,177,91,.12);

}

.reader-chapter-item.active .reader-chapter-title{

    font-weight:700;

}

.reader-chapter-item:hover .reader-chapter-title{

    transform: translateX(4px);

}

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

.reader-settings{

    padding:20px;

}

.reader-setting-group{

    margin-bottom:26px;

}

.reader-setting-title{

    font-size:14px;

    font-weight:600;

    color:var(--text-soft);

    margin-bottom:12px;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.reader-pill-group{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.reader-pill{

    padding:10px 16px;

    border:1px solid var(--border-color);

    border-radius:999px;

    background:transparent;

    color:var(--text-color);

    cursor:pointer;

    transition:.2s;

}

.reader-pill:hover{

    border-color:var(--gold-primary);

    background:rgba(212,177,91,.08);

}

.reader-pill.active{

    background:var(--gold-primary);

    color:#111;

    border-color:var(--gold-primary);

}

.reader-font-size-control{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}

.reader-size-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    border:1px solid var(--border-color);

    background:transparent;

    cursor:pointer;

    transition:.2s;

}

.reader-size-btn:hover{

    border-color:var(--gold-primary);

    background:rgba(212,177,91,.08);

}

#reader-font-size-value{

    font-weight:700;

    min-width:60px;

    text-align:center;

}

.reader-reset{

    width:100%;

    margin-top:10px;

    border-radius:12px;

}

/* Refined appearance controls */
.reader-menu-panel { width: 340px; border-radius: 20px; box-shadow: 0 24px 60px rgba(31, 24, 13, .22); }
.reader-panel-title { padding: 18px 22px; letter-spacing: -.01em; }
.reader-settings { max-height: min(62vh, 540px); overflow-y: auto; padding: 20px 22px 22px; }
.reader-setting-group { margin-bottom: 23px; }
.reader-setting-title { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.reader-pill-group { gap: 8px; }
.reader-pill { min-height: 38px; padding: 8px 13px; font-size: 13px; font-weight: 600; }
.reader-pill:focus-visible, .reader-size-btn:focus-visible, .reader-reset:focus-visible, .reader-menu-toggle:focus-visible { outline: 3px solid rgba(201, 164, 76, .45); outline-offset: 3px; }
.reader-font-size-control { padding: 5px; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(201, 164, 76, .05); }
.reader-size-btn { width: 42px; height: 38px; border-radius: 10px; color: var(--text-color); font-size: 14px; font-weight: 700; }
#reader-font-size-value { color: var(--text-color); font-size: 14px; }
.reader-reset { min-height: 42px; padding: 10px 14px; border: 1px solid var(--border-color); background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.reader-reset:hover { border-color: var(--gold-primary); background: rgba(201, 164, 76, .08); color: var(--text-color); }
@media (max-width: 768px) { .reader-menu-panel { width: min(340px, calc(100vw - 36px)); } }