/*==========================================================
CODEEXAI
TUTORIAL PAGE
Version 6.1  (layout pass — sidebar / article / TOC)
Fixes in this version:
  - mobile drawer no longer stretches full width
    (added overflow-x:hidden + defensive max-width:100% on children)
  - close (X) button no longer hidden behind the site header
    (raised z-index above header + gave it a visible background)
==========================================================*/


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

:root{

    --tb-primary:#16a34a;
    --tb-primary-dark:#15803d;
    --tb-primary-soft:#ecfdf5;

    --tb-bg:#f8fafc;
    --tb-white:#ffffff;

    --tb-text:#111827;
    --tb-text-light:#64748b;
    --tb-text-faint:#94a3b8;

    --tb-border:#e5e7eb;

    --tb-radius:16px;

    --tb-shadow-sm:0 4px 14px rgba(0,0,0,.05);
    --tb-shadow:0 12px 35px rgba(0,0,0,.08);

    /* LAYOUT WIDTHS — sidebar/TOC narrow, article wide */

    --sidebar-width:230px;

    --toc-width:180px;

    /* fallback only — overwritten at runtime by tutorial.js
       with the real measured navbar height, so the sidebar/TOC
       stick immediately with no scroll-then-snap jump */

    --sticky-offset:96px;

}


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

body{

    background:var(--tb-bg);

    color:var(--tb-text);

}

.main-content{

    padding:0;

}


/*==========================================================
READING PROGRESS
==========================================================*/

.reading-progress{

    position:fixed;

    top:68px;

    left:0;

    width:0;

    height:3px;

    background:var(--tb-primary);

    z-index:9999;

}


/*==========================================================
FULL-WIDTH LAYOUT FOR THIS PAGE
(overrides the site-wide Bootstrap .container gutters so the
sidebars/article sit close to the edges instead of floating
in a centered, padded column)
==========================================================*/

.container:has(.docs-layout){

    max-width:100%;

    padding-left:14px;

    padding-right:14px;

}


/*==========================================================
MAIN GRID
==========================================================*/

.docs-layout{

    display:grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0,1fr)
        var(--toc-width);

    gap:20px;

    align-items:start;

    padding:0;

}


/*==========================================================
LEFT SIDEBAR (shell)
==========================================================*/

.docs-sidebar{

    position:sticky;

    top:var(--sticky-offset);

    height:calc(100vh - var(--sticky-offset));

    overflow-y:auto;

    background:#fff;

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

    border-radius:14px;

}

.docs-sidebar::-webkit-scrollbar{

    width:6px;

}

.docs-sidebar::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}


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

.docs-main{

    min-width:0;

    padding:0 0 40px;

}

.lesson-wrapper{

    background:transparent;

    border:none;

    border-radius:0;

    padding:0;

    box-shadow:none;

}


/*==========================================================
RIGHT TOC (shell)
==========================================================*/

.docs-right{

    position:sticky;

    top:var(--sticky-offset);

    height:calc(100vh - var(--sticky-offset));

    overflow-y:auto;

}

.docs-right::-webkit-scrollbar{

    width:6px;

}

.docs-right::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}


/*==========================================================
SIDEBAR CARD
==========================================================*/

.sidebar-card{

    background:#fff;

    border:none;

    border-radius:14px;

    box-shadow:none;

}


/*==========================================================
SIDEBAR HEADER
==========================================================*/

.sidebar-header{

    padding:18px;

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

    background:#ffffff;

    border-radius:14px 14px 0 0;

}

/* template uses class="sidebar-badge" — style that directly
   (previously mismatched against an unused .technology-name) */

.sidebar-badge{

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    margin-bottom:10px;

    border-radius:999px;

    background:var(--tb-primary-soft);

    color:var(--tb-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:.3px;

}

.sidebar-topic-title{

    margin:0;

    font-size:16px;

    font-weight:700;

    line-height:1.35;

    color:var(--tb-text);

}


/*==========================================================
SIDEBAR BODY / CHAPTER ACCORDION
==========================================================*/

.sidebar-body{

    padding:6px;

}

/* reset bootstrap's default accordion look — this is what
   was making every chapter/lesson render oversized */

.sidebar-body .accordion-item{

    border:none;

    background:transparent;

}

.sidebar-body .accordion-button{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    padding:8px 10px;

    background:transparent;

    border:none;

    border-radius:8px;

    font-size:13.5px;

    font-weight:700;

    letter-spacing:.02em;

    color:var(--tb-text-light);

    text-transform:none;

    box-shadow:none !important;
}

.sidebar-body .accordion-button::after{

    display:none; /* replaced by .chapter-arrow icon below */

}

.sidebar-body .accordion-button:hover{

    background:var(--tb-bg);

}

.sidebar-body .accordion-button:not(.collapsed){

    background:var(--tb-primary-soft);

    color:var(--tb-primary);

}

.chapter-number{

    font-size:10.5px;

    font-weight:700;

    color:var(--tb-text-faint);

    width:16px;

    flex-shrink:0;

}

.sidebar-body .accordion-button:not(.collapsed) .chapter-number{

    color:var(--tb-primary);

}

.chapter-title{

    font-size:13.5px;

    line-height:1.35;

    font-weight:700;

    flex:1;

}

.chapter-arrow{

    font-size:10px;

    color:var(--tb-text-faint);

    transition:transform .15s ease;

}

.sidebar-body .accordion-button:not(.collapsed) .chapter-arrow{

    transform:rotate(180deg);

    color:var(--tb-primary);

}

/* lesson links inside each chapter */

.lesson-list{

    list-style:none;

    margin:2px 0 6px 20px;

    padding:0 0 0 10px;

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

}

.lesson-link{

    display:flex;

    align-items:center;

    gap:8px;

    min-height:auto;

    padding:7px 10px;

    margin:1px 0;

    border-radius:6px;

    font-size:13px;

    line-height:1.4;

    font-weight:500;

    color:var(--tb-text-light);

    text-decoration:none;

}

.lesson-link:hover{

    color:var(--tb-text);

    background:var(--tb-bg);

}

.lesson-link.active{

    color:var(--tb-primary);

    font-weight:700;

    background:var(--tb-primary-soft);

}

.lesson-dot{

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--tb-text-faint);

    flex-shrink:0;

}

.lesson-link.active .lesson-dot{

    background:var(--tb-primary);

}

.lesson-name{

    flex:1;

}

.lesson-empty{

    padding:8px 10px;

    font-size:12px;

    color:var(--tb-text-faint);

    font-style:italic;

}


/*==========================================================
HEADER HERO CARD
(wraps breadcrumb + badge + title + meta into one card —
 see lesson_header.html: needs a single wrapping div,
 noted separately)
==========================================================*/

.lesson-header-card{

    position:relative;

    background:#ffffff;

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

    border-radius:16px;

    padding:16px 26px 18px;

    margin-bottom:16px;

    overflow:hidden;

    box-shadow:var(--tb-shadow-sm);

}

.lesson-header-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:4px;

    background:linear-gradient(90deg,var(--tb-primary),#4ade80 55%,var(--tb-primary-dark));

}


/*==========================================================
BREADCRUMB
==========================================================*/

.lesson-breadcrumb{

    margin:0 0 10px;

}

.lesson-breadcrumb .breadcrumb{

    margin:0;

    padding:0;

    background:none;

    font-size:12.5px;

}

.lesson-breadcrumb .breadcrumb-item{

    color:#94a3b8;

}

.lesson-breadcrumb .breadcrumb-item a{

    color:#64748b;

    text-decoration:none;

    transition:.2s;

}

.lesson-breadcrumb .breadcrumb-item a:hover{

    color:var(--tb-primary);

}

.lesson-breadcrumb .breadcrumb-item+.breadcrumb-item::before{

    color:#cbd5e1;

}


/*==========================================================
LESSON HEADER
==========================================================*/

.lesson-header{

    margin-bottom:0;

}

.lesson-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    margin-bottom:10px;

    border-radius:999px;

    background:var(--tb-primary-soft);

    color:var(--tb-primary);

    font-size:11.5px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}

.lesson-title{

    margin:0;

    font-family:Georgia,"Times New Roman",serif;

    font-size:32px;

    font-weight:700;

    letter-spacing:-.01em;

    line-height:1.2;

    color:#0f172a;

}

.lesson-meta{

    margin-top:12px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

}

.lesson-updated{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 11px;

    border-radius:999px;

    background:var(--tb-bg);

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

    color:#64748b;

    font-size:12.5px;

}

.lesson-meta i{

    color:var(--tb-primary);

    font-size:13px;

}

.lesson-meta strong{

    color:#111827;

    font-weight:700;

}


/*==========================================================
QUICK ANSWER
==========================================================*/

.quick-answer{

    margin-bottom:18px;

    padding:18px 22px;

    background:#ffffff;

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

    border-radius:16px;

    box-shadow:var(--tb-shadow-sm);

}

.quick-answer-header{

    margin-bottom:10px;

}

.quick-answer-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:5px 11px;

    border-radius:999px;

    background:#fff8e7;

    color:#b45309;

    font-size:11.5px;

    font-weight:700;

}

.quick-answer h2{

    margin:0 0 10px;

    font-size:22px;

    font-weight:700;

    color:#111827;

}

.quick-answer p{

    margin:0;

    color:#4b5563;

    font-size:16px;

    line-height:1.55;

}

.quick-answer-points{

    margin-top:16px;

    display:grid;

    gap:10px;

}

.quick-answer-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.quick-answer-item span{

    width:24px;

    height:24px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--tb-primary);

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11.5px;

    font-weight:700;

}

.quick-answer-item div{

    flex:1;

    color:#374151;

    line-height:1.5;

    font-size:15px;

}

.quick-answer-item strong{

    color:#111827;

}


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

.lesson-article{

    background:#ffffff;

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

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--tb-shadow-sm);

}

.lesson-article-body{

    padding:26px 34px;

}


/*==========================================================
ARTICLE CONTENT TYPOGRAPHY
==========================================================*/

.lesson-content{

    color:#374151;

    font-size:16.5px;

    line-height:1.7;

    word-break:break-word;

}

.lesson-content h1{

    margin:0 0 22px;

    font-size:36px;

    font-weight:800;

    color:#111827;

}

.lesson-content h2{

    margin:36px 0 16px;

    padding-bottom:10px;

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

    font-size:28px;

    font-weight:700;

    color:#111827;

    scroll-margin-top:120px;

}

.lesson-content h3{

    margin:36px 0 16px;

    font-size:22px;

    font-weight:700;

    color:#111827;

    scroll-margin-top:120px;

}

.lesson-content h4{

    margin:28px 0 14px;

    font-size:19px;

    font-weight:700;

    color:#111827;

}

.lesson-content h5{

    margin:24px 0 12px;

    font-size:17px;

    font-weight:700;

}

.lesson-content h6{

    margin:20px 0 10px;

    font-size:15px;

    font-weight:700;

}

.lesson-content p{

    margin:0 0 18px;

    color:#374151;

}

.lesson-content a{

    color:var(--tb-primary);

    font-weight:500;

    text-decoration:none;

}

.lesson-content a:hover{

    text-decoration:underline;

}

.lesson-content ul,
.lesson-content ol{

    margin:18px 0 22px 24px;

}

.lesson-content li{

    margin-bottom:8px;

    line-height:1.6;

}

.lesson-content img{

    display:block;

    max-width:100%;

    margin:30px auto;

    border-radius:12px;

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

}

.lesson-content table{

    width:100%;

    border-collapse:collapse;

    margin:28px 0;

    border-radius:12px;

    overflow:hidden;

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}

.lesson-content th{

    background:#f8fafc;

    padding:14px 16px;

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

    font-weight:700;

    color:#111827;

}

.lesson-content td{

    padding:14px 16px;

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

}

.lesson-content tr:nth-child(even){

    background:#fafafa;

}

.lesson-content code:not(pre code){

    background:#f3f4f6;

    color:#dc2626;

    padding:2px 7px;

    border-radius:6px;

    font-size:.92em;

    font-family:Consolas,monospace;

}

.lesson-content blockquote{

    margin:28px 0;

    padding:18px 22px;

    border-left:4px solid var(--tb-primary);

    background:#f8fafc;

    border-radius:0 10px 10px 0;

    color:#475569;

    font-style:italic;

}

.lesson-content hr{

    margin:42px 0;

    border:none;

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

}


/*==========================================================
CODE BLOCKS
==========================================================*/

.tb-pre-wrapper{

    position:relative; /* anchors .copy-btn — was missing */

}

.lesson-content pre{

    margin:0;

    padding:24px;

    background:#2d2d2d;

    border:none;

    border-radius:0 0 16px 16px;

    overflow:auto;

}


/*==========================================
CODE BLOCK
==========================================*/

.tb-code-block{

    margin:30px 0;

    border-radius:16px;

    overflow:hidden;

    background:#2d2d2d;

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

}

.tb-code-header{

    height:52px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    background:#1e1e1e;

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

}

.tb-language{

    background:#16a34a;

    color:#fff;

    padding:6px 14px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

}

.copy-btn{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:10px;

    background:#ffffff;

    color:#374151;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.copy-btn:hover{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn.copied{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn i{

    font-size:16px;

}
.copy-btn{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:10px;

    background:#ffffff;

    color:#374151;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.copy-btn:hover{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn.copied{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:10px;

    background:#ffffff;

    color:#374151;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.copy-btn:hover{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn.copied{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:10px;

    background:#ffffff;

    color:#374151;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.copy-btn:hover{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn.copied{

    background:#16a34a;

    color:#ffffff;

}

.copy-btn{
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: 25s;
    flex-shrink: 0;
}

.copy-btn:hover{
    background: #16a34a;
    color: #ffffff
}


.copy-btn i{

    font-size:14px;

}


.lesson-content pre code{

    color:#f8fafc !important;

    font-size:15px;

    line-height:1.6;

    font-family:

        Consolas,

        Monaco,

        monospace;

}

.lesson-content pre code{

    display:block;

    margin-top:0;

    padding-top:0;

    background:transparent !important;

    color:#f8fafc !important;

    font-size:15px;

    line-height:1.6;

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;

    white-space:pre;

}


/*==========================================================
NOTE / TIP / WARNING BLOCKS
==========================================================*/

.lesson-content .note,
.lesson-content .tip,
.lesson-content .warning,
.lesson-content .danger,
.lesson-content .success,
.lesson-content .info,
.lesson-content .example,
.lesson-content .remember,
.lesson-content .interview-tip{

    margin:28px 0;

    padding:20px 22px;

    border-left:5px solid;

    border-radius:12px;

}

.lesson-content .note{ background:#eef8ff; border-color:#0ea5e9; }
.lesson-content .tip{ background:#eefcf3; border-color:#16a34a; }
.lesson-content .warning{ background:#fff8e8; border-color:#f59e0b; }
.lesson-content .danger{ background:#fff1f2; border-color:#ef4444; }
.lesson-content .success{ background:#eefcf3; border-color:#16a34a; }
.lesson-content .info{ background:#eef2ff; border-color:#6366f1; }
.lesson-content .example{ background:#f7f5ff; border-color:#7c3aed; }
.lesson-content .remember{ background:#fffbea; border-color:#ca8a04; }
.lesson-content .interview-tip{ background:#fff4f4; border-color:#dc2626; }

.lesson-content .note strong,
.lesson-content .tip strong,
.lesson-content .warning strong,
.lesson-content .danger strong,
.lesson-content .success strong,
.lesson-content .info strong,
.lesson-content .example strong,
.lesson-content .remember strong,
.lesson-content .interview-tip strong{

    display:block;

    margin-bottom:8px;

    color:#111827;

    font-size:17px;

}


/*==========================================================
MEDIA
==========================================================*/

.lesson-content iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:14px;

    margin:30px 0;

}

.lesson-content video{

    width:100%;

    border-radius:14px;

    margin:30px 0;

}


/*==========================================================
RIGHT SIDEBAR (TOC)
==========================================================*/

.toc-card{

    background:#ffffff;

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

    border-radius:14px;

    overflow:hidden;

    box-shadow:none;

}

.toc-header{

    padding:14px 16px;

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

}

.toc-heading{

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--tb-text-faint);

}

.toc-content{

    padding:8px 0;

    max-height:calc(100vh - 170px);

    overflow-y:auto;

}

.toc-content::-webkit-scrollbar{ width:6px; }

.toc-content::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}

.toc-content ul.toc-list{

    list-style:none;

    margin:0;

    padding:0;

}

.toc-content a{

    display:block;

    padding:8px 16px;

    color:#64748b;

    text-decoration:none;

    font-size:12.5px;

    line-height:1.4;

    border-left:2px solid transparent;

    transition:.2s;

}

.toc-content li.toc-sub a{

    padding-left:26px;

    font-size:12px;

}

.toc-content a:hover{

    color:var(--tb-primary);

    background:#f8fafc;

    border-left-color:var(--tb-primary);

}

/* JS toggles the "active" class — this previously only
   existed for an unused .fw-bold class, so the active
   TOC link never actually highlighted */

.toc-content a.active,
.toc-content a.fw-bold{

    color:var(--tb-primary);

    background:var(--tb-primary-soft);

    border-left-color:var(--tb-primary);

    font-weight:700 !important;

}


/*==========================================================
PREVIOUS / NEXT
==========================================================*/

.lesson-navigation{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-top:32px;

}

.lesson-nav-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:18px 20px;

    min-height:96px;

    background:#ffffff;

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

    border-radius:14px;

    text-decoration:none;

    transition:.2s ease;

    box-shadow:var(--tb-shadow-sm);

}

.lesson-nav-card:hover{

    transform:translateY(-2px);

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

    box-shadow:var(--tb-shadow);

}

.lesson-nav-next{

    text-align:right;

}

.lesson-nav-label{

    display:flex;

    align-items:center;

    gap:8px;

    color:#94a3b8;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    margin-bottom:8px;

}

.lesson-nav-next .lesson-nav-label{

    justify-content:flex-end;

    color:var(--tb-primary);

}

.lesson-nav-title{

    font-size:17px;

    font-weight:700;

    color:#111827;

    line-height:1.4;

}

.lesson-nav-next .lesson-nav-title{

    color:var(--tb-primary);

}


/*==========================================================
SCROLL TO TOP
(created by tutorial.js — was referenced but never styled)
==========================================================*/

.scroll-top{

    position:fixed;

    right:20px;

    bottom:22px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:var(--tb-primary);

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

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:.2s ease;

    z-index:1030;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.scroll-top:hover{

    background:var(--tb-primary);

    color:#fff;

}


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

@media (max-width:1200px){

    .docs-layout{

        grid-template-columns:var(--sidebar-width) minmax(0,1fr);

    }

    .docs-right{

        display:none;

    }

}

@media (max-width:992px){

    .docs-layout{
        display:block;
        padding:0 12px;
    }

    .docs-main{
        width:100%;
        padding-top:0;
    }

    .docs-right{
        display:none;
    }

    /* ======================
       MOBILE SIDEBAR DRAWER
    ======================= */

    .docs-sidebar{

        position:fixed;

        top:0;
        left:0;

        width:300px;
        max-width:85vw;
        height:100vh;

        background:#fff;

        transform:translateX(-100%);
        transition:transform .30s ease;

        overflow-y:auto;
        overflow-x:hidden;

        border:none;
        border-radius:0;

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

        z-index:9999;
    }

    .docs-sidebar.show{

        transform:translateX(0);

    }

    /* Keep previous styling */

    .sidebar-card{

        background:#fff;

        height:100%;

        border:none;

        border-radius:0;

        box-shadow:none;

    }

    .sidebar-header{

        padding:22px;

        border-bottom:1px solid #e5e7eb;

    }

    .sidebar-body{

        padding:10px;

    }

    /* Chapters */

    .accordion-item{

        border:none;

        background:transparent;

    }

    .accordion-button{

        display:flex;

        align-items:center;

        gap:8px;

        padding:12px 10px;

        background:transparent;

        border:none;

        box-shadow:none;

        font-size:14px;

        font-weight:700;

    }

    .accordion-button:not(.collapsed){

        background:#ecfdf5;

        color:#16a34a;

    }

    .chapter-number{

        width:22px;

        font-size:11px;

        color:#94a3b8;

    }

    .chapter-title{

        flex:1;

    }

    .chapter-arrow{

        margin-left:auto;

    }

    .lesson-list{

        margin:4px 0 8px 24px;

        padding-left:12px;

        border-left:1px solid #e5e7eb;

    }

    .lesson-link{

        display:flex;

        align-items:center;

        gap:8px;

        padding:8px 0;

        text-decoration:none;

        color:#64748b;

        font-size:13px;

    }

    .lesson-link.active{

        color:#16a34a;

        font-weight:700;

    }

    .lesson-dot{

        width:6px;

        height:6px;

        border-radius:50%;

        background:#cbd5e1;

    }

    .lesson-link.active .lesson-dot{

        background:#16a34a;

    }

    /* Backdrop */

    .sidebar-backdrop{

        position:fixed;

        inset:0;

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

        display:none;

        z-index:9998;

    }

    .sidebar-backdrop.show{

        display:block;

    }

    /* Close Button */

    .sidebar-close-btn{

        position:absolute;

        top:14px;

        right:14px;

        width:38px;

        height:38px;

        border:none;

        border-radius:50%;

        background:#fff;

        display:flex;

        align-items:center;

        justify-content:center;

        box-shadow:0 6px 18px rgba(0,0,0,.15);

        z-index:10000;

    }

    /* Floating Button */

    .chapters-fab{

        display:flex;

        align-items:center;

        gap:8px;

        position:fixed;

        bottom:92px;

        left:20px;

        padding:12px 18px;

        border:none;

        border-radius:999px;

        background:#16a34a;

        color:#fff;

        font-size:14px;

        font-weight:700;

        z-index:999;

    }

}

@media (min-width:993px){

    .sidebar-close-btn,
    .chapters-fab,
    .sidebar-backdrop{

        display:none;

    }

}

@media (max-width:768px){

    .lesson-header-card{ padding:14px 18px 16px; }

    .lesson-title{ font-size:26px; }

    .lesson-article-body{ padding:20px; }

    .quick-answer{ padding:16px 18px; }

    .lesson-navigation{ grid-template-columns:1fr; }

    .lesson-nav-next{ text-align:left; }

    .lesson-nav-next .lesson-nav-label{ justify-content:flex-start; }

}

@media (max-width:576px){

    .sidebar-header{ padding:16px; }

    .sidebar-topic-title{ font-size:14px; }

    .lesson-header-card{ padding:12px 16px 14px; }

    .lesson-title{ font-size:22px; }

    .lesson-content{ font-size:15.5px; line-height:1.6; }

    .lesson-content h2{ font-size:21px; }

    .lesson-content h3{ font-size:19px; }

    .lesson-nav-title{ font-size:16px; }

}


.sidebar-card{

    padding-top:10px;

}

.sidebar-header{

    padding:20px;

}

.sidebar-body{

    padding:15px;

}

.lesson-list{

    margin-top:10px;

}

.accordion-button{

    padding:12px 10px !important;

}


.quick-answer-points{

    margin-top:22px;

}

.quick-answer-points ul{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.quick-answer-points li{

    position:relative;

    padding-left:54px;

    font-size:17px;

    line-height:1.55;

    color:#374151;

    list-style:none;

}

.quick-answer-points li::before{

    counter-increment:point;

    content:counter(point);

    position:absolute;

    left:0;

    top:1px;

    width:30px;

    height:30px;

    border-radius:50%;

    background:#16a34a;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

.quick-answer-points ul{

    counter-reset:point;

}

.quick-answer-points strong{

    color:#111827;

    font-weight:700;

}
/* ========================================================== */
/* LESSON FAQ (AI-generated) */
/* ========================================================== */

.lesson-faq{

    margin:36px 0;

}

.lesson-faq h2{

    font-size:1.5rem;

    font-weight:800;

    margin-bottom:18px;

    color:var(--tb-text);

}

.lesson-faq .accordion-item{

    border:1px solid var(--tb-border) !important;

    border-radius:14px !important;

    overflow:hidden;

    margin-bottom:12px;

    box-shadow:var(--tb-shadow-sm);

}

.lesson-faq .accordion-item:last-child{

    margin-bottom:0;

}

.lesson-faq .accordion-header{

    margin:0;

}

.lesson-faq .accordion-button{

    padding:16px 20px;

    font-size:15.5px;

    font-weight:600;

    color:var(--tb-text);

    background:#fff;

    box-shadow:none !important;

}

.lesson-faq .accordion-button::after{

    background-size:18px;

    transition:.25s;

}

.lesson-faq .accordion-button:not(.collapsed){

    color:var(--tb-primary-dark);

    background-color:var(--tb-primary-soft);

}

.lesson-faq .accordion-button:focus{

    box-shadow:none;

}

.lesson-faq .accordion-body{

    padding:2px 20px 18px;

    color:#4b5563;

    font-size:15px;

    line-height:1.6;

}