/*==================================================
ROOT
==================================================*/

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--success:#16a34a;
--danger:#dc2626;
--warning:#f59e0b;

--text:#1e293b;
--muted:#64748b;

--border:#e5e7eb;

--background:#f5f7fb;

--card:#ffffff;

--radius:18px;

}

/*==================================================
BODY
==================================================*/

body{

background:var(--background) !important;

color:var(--text);

font-family:

Inter,

Segoe UI,

sans-serif;

overflow-x:hidden;

}

a{

text-decoration:none;

}

img{

display:block;

max-width:100%;

}

/*==================================================
LAYOUT
==================================================*/

.reader-layout{

display:grid;

grid-template-columns:

320px

minmax(0,1fr)

340px;

gap:24px;

padding:24px;

max-width:1800px;

margin:auto;

}

/*==================================================
CARDS
==================================================*/

.reader-card{

background:#fff;

border-radius:18px;

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

box-shadow:

0 8px 20px

rgba(15,23,42,.05);

}

/*==================================================
LEFT SIDEBAR
==================================================*/

.reader-sidebar{

position:sticky;

top:92px;

height:

calc(100vh - 110px);

overflow:auto;

padding:20px;

}

/*==================================================
RIGHT SIDEBAR
==================================================*/

.reader-about{

position:sticky;

top:92px;

height:

calc(100vh - 110px);

overflow:auto;

padding:20px;

}

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

.reader-content{

background:#fff;

border-radius:22px;

padding:46px;

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

box-shadow:

0 8px 20px

rgba(15,23,42,.05);

min-height:700px;

}

/*==================================================
COURSE TITLE
==================================================*/

.reader-title{

font-size:26px;

font-weight:800;

line-height:1.2;

margin-bottom:12px;

}

/*==================================================
META
==================================================*/

.reader-meta{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:28px;

color:var(--muted);

font-size:14px;

}

.reader-meta i{

color:var(--primary);

margin-right:5px;

}

/*==================================================
ARTICLE
==================================================*/

.reader-article{

font-size:18px;

line-height:2;

color:#334155;

max-width:900px;

}

.reader-article h2{

font-size:34px;

font-weight:800;

margin-top:56px;

margin-bottom:20px;

}

.reader-article h3{

font-size:26px;

font-weight:700;

margin-top:42px;

margin-bottom:16px;

}

.reader-article p{

margin-bottom:24px;

}

.reader-article ul{

padding-left:28px;

margin-bottom:26px;

}

.reader-article li{

margin-bottom:12px;

}

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

.reader-search{

margin-bottom:18px;

}

.reader-search input{

border-radius:12px;

padding:12px 14px;

}

/*==================================================
SECTION TITLE
==================================================*/

.sidebar-title{

font-size:18px;

font-weight:700;

margin-bottom:18px;

}


/*==================================================
READER HEADER
==================================================*/

.reader-header{

margin-bottom:34px;

padding-bottom:20px;

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

}

.reader-header .reader-meta{

margin-bottom:0;

}

/*==================================================
READER BODY
==================================================*/

.reader-body{

font-size:18px;

line-height:2;

color:#334155;

}

.reader-body img{

max-width:100%;

border-radius:18px;

margin:28px auto;

display:block;

}

.reader-body table{

width:100%;

margin:28px 0;

border-collapse:collapse;

}

.reader-body th,

.reader-body td{

padding:12px;

border:1px solid #e5e7eb;

}

.reader-body a{

color:var(--primary);

font-weight:600;

}

/*==================================================
READER NAVIGATION
==================================================*/

.reader-navigation{

padding-top:24px;

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

}


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

.mobile-reader-actions{

display:none;

gap:12px;

margin-bottom:20px;

}

.mobile-reader-actions .btn{

flex:1;

border-radius:12px;

}

/*==================================================
OFFCANVAS
==================================================*/

.offcanvas{

max-width:340px;

}

.offcanvas-header{

border-bottom:1px solid #e5e7eb;

}

.offcanvas-body{

padding:20px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1199px){

.reader-layout{

grid-template-columns:1fr;

}

.reader-sidebar,

.reader-about{

display:none;

}

.mobile-reader-actions{

display:flex;

}

.reader-content{

padding:28px;

}

}

@media(max-width:768px){

.reader-content{

padding:20px;

}

.reader-title{

font-size:22px;

}

.reader-meta{

gap:12px;

font-size:13px;

}

}


/*==================================================
TABLE OF CONTENTS
==================================================*/

.reader-toc{

padding:22px;

border-left:5px solid var(--primary);

background:#f8fbff;

margin-bottom:30px;

}

.reader-toc__title{

font-size:18px;

font-weight:700;

margin-bottom:16px;

}

.reader-toc a{

display:block;

padding:8px 0;

color:#2563eb;

font-weight:600;

text-decoration:none;

transition:.2s;

}

.reader-toc a:hover{

padding-left:8px;

}

.reader-toc .toc-h3{

padding-left:18px;

font-size:14px;

font-weight:500;

color:#64748b;

}


/*==================================================
READER PAGINATION
==================================================*/

.reader-pagination{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

margin-top:20px;

padding-top:24px;

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

}

.reader-pagination__left,

.reader-pagination__right{

flex:1;

}

.reader-pagination__center{

text-align:center;

}

.reader-pagination__left{

display:flex;

justify-content:flex-start;

align-items:center;

}

.reader-pagination__right{

display:flex;

justify-content:flex-end;

align-items:center;

}

.reader-page-number{

font-size:18px;

font-weight:700;

color:var(--text);

}

.reader-page-number span{

display:block;

margin-top:4px;

font-size:13px;

font-weight:500;

color:var(--muted);

}

.reader-pagination .btn{

border-radius:14px;

padding:12px 20px;

font-weight:600;

}

@media(max-width:768px){

.reader-pagination{

display:grid;

grid-template-columns:1fr 1fr;

grid-template-areas:

"page page"

"prev next";

gap:16px;

align-items:center;

}

.reader-pagination__center{

grid-area:page;

text-align:center;

}

.reader-pagination__left{

grid-area:prev;

}

.reader-pagination__right{

grid-area:next;

text-align:right;

}

.reader-pagination .btn{

width:100%;

padding:14px;

border-radius:14px;

font-size:15px;

}

.reader-page-number{

font-size:24px;

font-weight:800;

margin-bottom:4px;

}

.reader-page-number span{

font-size:14px;

}

.reader-pagination__left{

display:flex;

justify-content:flex-start;

}

.reader-pagination__right{

display:flex;

justify-content:flex-end;

}

}

/*==================================================
READER PROGRESS
==================================================*/

.reader-progress{

margin-bottom:28px;

}

.reader-progress__bar{

height:10px;

background:#e5e7eb;

border-radius:999px;

overflow:hidden;

}

.reader-progress__fill{

height:100%;

background:linear-gradient(
90deg,
#2563eb,
#4f46e5
);

border-radius:999px;

transition:.35s;

}

.reader-progress__text{

margin-top:8px;

font-size:13px;

font-weight:600;

color:#64748b;

text-align:right;

}


/*==================================================
PAGE SELECTOR
==================================================*/

.reader-page-selector{

max-width:260px;

margin-top:20px;

}

.reader-page-selector label{

margin-bottom:8px;

font-size:14px;

}

.reader-page-selector select{

border-radius:12px;

padding:10px 14px;

}

@media(max-width:768px){

.reader-page-selector{

max-width:100%;

}

}

/*==================================================
AVAILABLE VERSION
==================================================*/

.course-version-card{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:18px 22px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:18px;

box-shadow:0 8px 20px rgba(15,23,42,.05);

margin-bottom:24px;

}

.course-version-info{

display:flex;

align-items:center;

gap:14px;

}

.course-version-icon{

width:54px;

height:54px;

border-radius:14px;

background:linear-gradient(135deg,#2563eb,#4f46e5);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#fff;

flex-shrink:0;

}

.course-version-title{

font-size:17px;

font-weight:700;

color:#1e293b;

margin-bottom:2px;

}

.course-version-subtitle{

font-size:13px;

color:#64748b;

}

.course-version-btn{

border-radius:14px;

padding:10px 18px;

font-weight:600;

white-space:nowrap;

}

@media(max-width:768px){

.course-version-card{

flex-direction:column;

align-items:flex-start;

}

.course-version-btn{

width:100%;

}

}


/*==================================================
AVAILABLE VERSION MODAL
==================================================*/

.version-modal .modal-dialog{

max-width:380px;

}

.version-modal .modal-content{

border:none;

border-radius:18px;

overflow:hidden;

box-shadow:0 16px 40px rgba(15,23,42,.15);

}

.version-modal .modal-header{

background:linear-gradient(135deg,#2563eb,#4f46e5);

color:#fff;

padding:14px 18px;

border-bottom:none;

}

.version-modal .modal-title{

font-size:1rem;

font-weight:700;

margin:0;

}

.version-modal .btn-close{

filter:invert(1);

opacity:.9;

}

.version-modal .modal-body{

padding:12px;

background:#f8fafc;

max-height:420px;

overflow-y:auto;

}

.version-item{

display:flex;

align-items:center;

gap:10px;

padding:10px 12px;

margin-bottom:8px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:12px;

color:#1e293b;

font-size:.95rem;

font-weight:600;

text-decoration:none;

transition:all .2s ease;

}

.version-item:last-child{

margin-bottom:0;

}

.version-item:hover{

background:#eff6ff;

border-color:#2563eb;

transform:translateY(-1px);

color:#2563eb;

}

.version-item.active{

background:linear-gradient(135deg,#2563eb,#4f46e5);

border-color:transparent;

color:#fff;

}

.version-item.active .version-arrow{

opacity:1;

}

.version-flag{

width:28px;

font-size:1.2rem;

text-align:center;

flex-shrink:0;

}

.version-name{

flex:1;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.version-arrow{

font-size:.9rem;

opacity:.45;

transition:.2s;

}

.version-item:hover .version-arrow{

opacity:.9;

transform:translateX(2px);

}

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

@media(max-width:576px){

.version-modal .modal-dialog{

margin:.75rem;

max-width:none;

}

.version-modal .modal-body{

max-height:60vh;

}

}




/* ==================================================
Public Lesson Preview
================================================== */

.reader-body{
    position:relative;
}

.reader-preview{
    max-height:7.5em;
    overflow:hidden;
    line-height:1.5;
}

.reader-login-overlay{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

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

    padding:50px 24px 28px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,.96) 45%,
        #fff 75%
    );

    text-align:center;
}

.reader-login-overlay__content{
    max-width:480px;
}

.reader-login-overlay__icon{
    width:52px;
    height:52px;

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

    margin:0 auto 14px;

    border-radius:50%;

    background:rgba(13,110,253,.1);

    font-size:1.25rem;
}

.reader-login-overlay__content h4{
    margin-bottom:8px;
}

.reader-login-overlay__content p{
    margin-bottom:18px;
    color:#6c757d;
}

.reader-login-btn{
    padding:.7rem 1.35rem;
    border-radius:10px;
}


/* ==========================================================
   MOBILE WIDTH FIX
   ========================================================== */

@media (max-width: 768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .reader-layout{
        display:block;
        width:100%;
        max-width:100%;
        margin:0;
        padding:12px;
        box-sizing:border-box;
    }

    .reader-content{
        width:100%;
        max-width:100%;
        min-width:0;
        margin:0;
        padding:20px;
        box-sizing:border-box;
        overflow:hidden;
    }

    .reader-card{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .reader-article{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        overflow-wrap:anywhere;
        word-wrap:break-word;
    }

    .reader-article img,
    .reader-content img{
        max-width:100% !important;
        width:auto;
        height:auto;
    }

    .reader-title{
        font-size:28px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    .reader-meta{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .reader-toc{
        max-width:100%;
        box-sizing:border-box;
        overflow-wrap:anywhere;
    }

    .reader-pagination{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .reader-pagination .btn{
        max-width:100%;
        box-sizing:border-box;
        white-space:normal;
    }

    pre,
    code,
    table{
        max-width:100%;
    }

    pre{
        overflow-x:auto;
    }

    table{
        display:block;
        overflow-x:auto;
    }
}


    .reader-body{
    opacity:1;
}

.reader-body.reader-body--locked{
    opacity:.04;
}