/* ============================================================
   AKJ PaisaGyan - Tutorial / Academy Lesson Layout
   ============================================================ */

:root {
    --tutorial-sidebar-w: 280px;
    --tutorial-topbar-h: 52px;
    --tutorial-bg: #ffffff;
    --tutorial-text: #1a1a2e;
    --tutorial-border: #e2e8f0;
    --tutorial-sidebar-bg: #1a1a2e;
    --tutorial-link: #a8dadc;
}

/* ---- Modes ---- */
[data-mode="dark"] {
    --tutorial-bg: #0d1117;
    --tutorial-text: #e6edf3;
    --tutorial-border: #30363d;
    background: #0d1117;
}
[data-mode="sepia"] {
    --tutorial-bg: #f4efe4;
    --tutorial-text: #3d2b1f;
    --tutorial-border: #d8c9b0;
    background: #f4efe4;
}

/* ---- Top Bar ---- */
.tutorial-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--tutorial-topbar-h);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1040;
}

/* Mobile: with the academy name hidden (see tutorial.php), the bar only has to fit the
   logo on the left and search + 3 mode buttons + 2 font buttons (+ Login, when logged
   out) on the right -- tighten padding/gaps so that comfortably fits one row at 320-375px
   without wrapping or overlapping the breadcrumb underneath. */
@media (max-width: 767.98px) {
    .tutorial-topbar { padding: 0 .6rem; }
    .tutorial-topbar-left { gap: .5rem !important; }
    .tutorial-topbar-right { gap: .3rem !important; }
    .tutorial-topbar-right .btn { padding-left: .4rem; padding-right: .4rem; }
}

/* ---- Reading Progress Bar ---- */
.reading-progress-bar {
    position: fixed;
    top: var(--tutorial-topbar-h);
    left: 0;
    height: 3px;
    background: var(--accent);
    width: 0%;
    z-index: 1041;
    transition: width .1s ease;
}

/* ---- Layout ---- */
.tutorial-body { padding-top: var(--tutorial-topbar-h); overflow: hidden; }

.tutorial-layout {
    display: flex;
    height: calc(100vh - var(--tutorial-topbar-h));
    overflow: hidden;
}

/* ---- Sidebar ---- */
.tutorial-sidebar {
    width: var(--tutorial-sidebar-w);
    min-width: var(--tutorial-sidebar-w);
    background: var(--tutorial-sidebar-bg);
    overflow: hidden;
    border-right: 1px solid #30363d;
    transition: transform .3s ease;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-inner { padding: 1rem; overflow-y: auto; flex: 1 1 auto; }
.sidebar-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #8b949e;
    font-weight: 600;
    margin-bottom: .75rem;
}

.sidebar-module-btn {
    color: #e6edf3 !important;
    background: transparent !important;
    font-size: 13px;
    border: none;
    padding: .4rem 0 !important;
}
.sidebar-module-btn::after { filter: invert(1); width: .95rem; height: .95rem; background-size: .95rem; }

.sidebar-lesson {
    border-radius: 6px;
    transition: background .15s;
    margin-bottom: 2px;
}
.sidebar-lesson a { color: #8b949e; font-size: 13px; padding: .3rem .5rem; border-radius: 6px; }
.sidebar-lesson a:hover { background: rgba(255,255,255,.06); color: #e6edf3; }
.sidebar-lesson.active a { background: rgba(255,255,255,.1); color: #58a6ff; font-weight: 600; }

/* ---- Main Content ---- */
.tutorial-content {
    flex: 1;
    overflow-y: auto;
    background: var(--tutorial-bg, #fff);
    color: var(--tutorial-text, #1a1a2e);
}

.lesson-article {
    max-width: 780px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

/* ---- Lesson Header ---- */
.lesson-header { margin-bottom: 2rem; }
.lesson-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .75rem;
    color: var(--tutorial-text);
}
.lesson-excerpt { font-size: 1.1rem; color: #6c757d; }
.lesson-trust-line { font-size: .78rem; color: #6c757d; margin-top: .6rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lesson-trust-line i { color: #2f9e44; }
[data-mode="dark"] .lesson-trust-line { color: #8b949e; }
[data-mode="dark"] .lesson-trust-line i { color: #4ade80; }

/* ---- Lesson Body ---- */
.lesson-body {
    font-size: 17px;
    line-height: 1.85;
    color: var(--tutorial-text, #2d3748);
}
.lesson-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--primary); border-bottom: 2px solid; border-color: var(--accent); padding-bottom: .3rem; }
.lesson-body h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.lesson-body h4 { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 .6rem; }
.lesson-body p { margin-bottom: 1.2rem; }
.lesson-body ul, .lesson-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.lesson-body li { margin-bottom: .5rem; }
.lesson-body blockquote {
    border-left: 4px solid var(--accent);
    background: rgba(244,162,97,.08);
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    font-style: italic;
}
.lesson-body .tip, .lesson-body .note {
    background: rgba(88,166,255,.08);
    border-left: 4px solid #58a6ff;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}
.lesson-body .warning {
    background: rgba(249,199,79,.1);
    border-left: 4px solid #f9c74f;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}
.lesson-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 15px; }
.lesson-body th { background: rgba(10,35,66,.05); font-weight: 600; text-align: left; }
.lesson-body td, .lesson-body th { padding: .6rem .8rem; border: 1px solid var(--tutorial-border, #e2e8f0); }
.lesson-body tr:nth-child(even) { background: rgba(0,0,0,.02); }
.lesson-body code { background: rgba(107,47,160,.08); padding: 2px 6px; border-radius: 4px; font-size: .9em; color: #6b2fa0; }
.lesson-body pre { background: #0d1117; color: #a8dadc; padding: 1rem 1.25rem; border-radius: 8px; overflow-x: auto; font-size: 14px; }
.lesson-body img { max-width: 100%; border-radius: 8px; margin: .75rem 0; }

/* ---- Dark Mode Lesson Body ---- */
[data-mode="dark"] .lesson-body, [data-mode="dark"] .lesson-article { color: #e6edf3; }
[data-mode="dark"] .lesson-body h2 { color: #58a6ff; }
[data-mode="dark"] .lesson-body td, [data-mode="dark"] .lesson-body th { border-color: #30363d; }
[data-mode="dark"] .lesson-body code { background: rgba(88,166,255,.1); color: #58a6ff; }

/* ---- Sepia Mode ---- */
[data-mode="sepia"] .lesson-body, [data-mode="sepia"] .lesson-article { color: #3d2b1f; }
[data-mode="sepia"] .lesson-body h2 { color: #7b4f2e; }

/* ---- Lesson Nav ---- */
.lesson-nav { padding-top: 1.5rem; border-top: 1px solid var(--tutorial-border, #e2e8f0); }

/* ---- Mobile Sidebar ---- */
/* Modules/Lessons hamburger button -- lives in the topbar (see tutorial.php), not floating
   over the article anymore. Hidden by default; shown only at the same <=991px breakpoint
   where the sidebar below switches from a pinned column to a slide-in overlay, since above
   that it's already visible with no need for a toggle. */
.tutorial-menu-btn { display: none; }

@media (max-width: 991px) {
    .tutorial-sidebar {
        position: fixed;
        top: var(--tutorial-topbar-h);
        left: 0;
        bottom: 0;
        z-index: 1039;
        transform: translateX(-100%);
    }
    .tutorial-sidebar.open { transform: translateX(0); }
    /* .btn-sm's default padding renders this under the ~44px touch-target minimum; pin an
       explicit square size instead so it's comfortable to tap without looking oversized next
       to the other topbar-right icons. */
    .tutorial-menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
    .lesson-article { padding: 1.5rem 1rem; }
    .lesson-title { font-size: 1.5rem; }
}

/* ---- Go to Top + Suggest ---- */
/* Both toggled by tutorial.js via IntersectionObserver on .comments-section -- they only
   appear once the reader has scrolled down to the Comments block at the end of a lesson,
   rather than after a generic scroll distance, so they stay out of the way for most of
   the read. Stacked bottom-right with go-to-top above suggest, mirroring the main site's
   back-to-top/suggest-btn stack (assets/css/style.css). */
.tutorial-back-to-top,
.tutorial-suggest-fab {
    position: fixed;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    z-index: 1035;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s;
}
.tutorial-back-to-top { bottom: 80px; }
.tutorial-suggest-fab { bottom: 24px; }
.tutorial-back-to-top.show,
.tutorial-suggest-fab.show { opacity: 1; visibility: visible; transform: translateY(0); }
.tutorial-back-to-top:hover,
.tutorial-suggest-fab:hover { background: var(--accent); }

/* ---- Font sizes ---- */
.tutorial-content[data-font-size="small"]  .lesson-body { font-size: 15px; }
.tutorial-content[data-font-size="large"]  .lesson-body { font-size: 19px; }
.tutorial-content[data-font-size="xlarge"] .lesson-body { font-size: 21px; }

/* ---- Accordion (sidebar) ---- */
.accordion-button:not(.collapsed) { background: rgba(255,255,255,.06); }
.accordion-button::after { filter: brightness(0) invert(1); }

/* ============================================================
   Lesson Page Beautify (header, content steps, callouts, nav)
   ============================================================ */

/* Breadcrumb (now rendered inside .lesson-article) */
.lesson-article > nav { margin-bottom: 1.4rem; }
.lesson-article > nav .breadcrumb { margin: 0; padding: 0; font-size: .82rem; flex-wrap: wrap; }
.lesson-article > nav .breadcrumb-item { color: var(--text-muted, #6c757d); }
.lesson-article > nav .breadcrumb-item a { color: var(--text-muted, #6c757d); text-decoration: none; }
.lesson-article > nav .breadcrumb-item a:hover { color: var(--primary); text-decoration: underline; }
.lesson-article > nav .breadcrumb-item.active { color: var(--tutorial-text); font-weight: 600; }
.lesson-article > nav .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--tutorial-border, #ccc); }

/* Meta pill row */
.lesson-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.15rem; }
.lesson-meta-row .badge { font-size: .78rem; padding: .4rem .75rem; border-radius: 999px; font-weight: 600; }
.lesson-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--text-muted, #6c757d); background: rgba(0,0,0,.045); padding: .4rem .75rem; border-radius: 999px; }
[data-mode="dark"] .lesson-pill { background: rgba(255,255,255,.07); color: #8b949e; }
[data-mode="sepia"] .lesson-pill { background: rgba(61,43,31,.08); color: #6b5643; }
.lesson-pill-free { color: #2d6a4f; background: rgba(45,106,79,.1); font-weight: 600; }

/* Lesson header polish */
.lesson-header { padding-bottom: 1.75rem; border-bottom: 1px solid var(--tutorial-border, #e2e8f0); margin-bottom: 2.25rem; }
.lesson-title { letter-spacing: -.01em; }
.lesson-excerpt { border-left: 3px solid var(--accent); padding-left: 1rem; margin-bottom: 0; }

/* Key Takeaways box polish */
.takeaways-box {
    background: linear-gradient(135deg, rgba(249,199,79,.16), rgba(249,199,79,.04));
    border: 1px solid rgba(249,199,79,.4);
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.takeaways-box h5 { display: flex; align-items: center; font-weight: 700; margin-bottom: 1rem; }
.takeaways-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #f9c74f; color: #5c4600 !important; font-size: 1rem; margin-right: .65rem; flex-shrink: 0; }
.takeaways-box ul { padding-left: 1.1rem; margin-bottom: 0; }
.takeaways-box li { margin-bottom: .5rem; line-height: 1.6; }
.takeaways-box li::marker { color: #d99a00; font-weight: 700; }

.objectives-box {
    background: linear-gradient(135deg, rgba(76,153,201,.14), rgba(76,153,201,.03));
    border: 1px solid rgba(76,153,201,.35);
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.objectives-box h5 { display: flex; align-items: center; font-weight: 700; margin-bottom: 1rem; }
.objectives-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #4c99c9; color: #fff !important; font-size: 1rem; margin-right: .65rem; flex-shrink: 0; }
.objectives-box ul { padding-left: 1.1rem; margin-bottom: 0; }
.objectives-box li { margin-bottom: .5rem; line-height: 1.6; }
.objectives-box li::marker { color: #2c7aa8; font-weight: 700; }

.mistakes-to-avoid-box {
    background: linear-gradient(135deg, rgba(220,53,69,.10), rgba(220,53,69,.02));
    border: 1px solid rgba(220,53,69,.3);
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.mistakes-to-avoid-box h5 { display: flex; align-items: center; font-weight: 700; margin-bottom: 1rem; }
.mistakes-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #dc3545; color: #fff !important; font-size: 1rem; margin-right: .65rem; flex-shrink: 0; }
.mistakes-to-avoid-box ul { padding-left: 1.1rem; margin-bottom: 0; }
.mistakes-to-avoid-box li { margin-bottom: .5rem; line-height: 1.6; }
.mistakes-to-avoid-box li::marker { color: #dc3545; font-weight: 700; }

/* Step headings with numbered badge (CSS counters) */
.lesson-body { counter-reset: step; }
.lesson-body h2 {
    counter-increment: step;
    display: flex;
    align-items: center;
    gap: .85rem;
    font-size: 1.4rem;
    border-bottom: none !important;
    background: linear-gradient(90deg, rgba(244,162,97,.12), transparent);
    padding: .7rem .9rem .7rem .6rem;
    border-radius: 10px;
    border-left: 4px solid var(--accent);
}
.lesson-body h2::before {
    content: counter(step);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.lesson-body h2:last-of-type { background: linear-gradient(90deg, rgba(45,106,79,.12), transparent); border-left-color: #2d6a4f; }
.lesson-body h2:last-of-type::before { content: "\2713"; background: #2d6a4f; }

/* Tip / Note / Warning callouts polish */
.lesson-body .tip, .lesson-body .note, .lesson-body .warning {
    border-radius: 0 12px 12px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    padding: 1.1rem 1.3rem;
}
.lesson-body .tip::before, .lesson-body .note::before {
    content: "\1F4A1 TIP";
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #2468b5;
    margin-bottom: .4rem;
}
.lesson-body .warning::before {
    content: "\26A0 \0932\0947 \0932\094B ध्यान दें";
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #a1720c;
    margin-bottom: .4rem;
}

/* Complete / already-completed boxes */
.complete-box { background: linear-gradient(135deg, #f8f9fb, #fff) !important; border: 1px dashed var(--tutorial-border, #dbe1e8); border-radius: 16px !important; }
.complete-box-icon { width: 3rem; height: 3rem; border-radius: 50%; background: rgba(45,106,79,.12); color: #2d6a4f; display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; font-size: 1.25rem; }
.complete-box .btn-success { border-radius: 999px; padding: .7rem 1.75rem; box-shadow: 0 6px 16px rgba(45,106,79,.25); border: none; transition: transform .15s, box-shadow .15s; }
.complete-box .btn-success:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(45,106,79,.3); }
.lesson-article .bg-success-subtle.rounded-3 { border: 1px solid rgba(45,106,79,.25); border-radius: 16px !important; box-shadow: 0 4px 14px rgba(45,106,79,.08); }

/* Notes section */
.notes-section { background: #fff; border: 1px solid var(--tutorial-border, #e2e8f0) !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.notes-section h5 { font-weight: 700; margin-bottom: 1rem; }
.notes-section textarea { border-radius: 10px; resize: vertical; }
.notes-section textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,35,66,.12); }
.notes-section .btn-primary { background: var(--primary); border-color: var(--primary); border-radius: 999px; padding: .45rem 1.3rem; font-weight: 600; }

/* Prev / Next lesson nav cards */
.lesson-nav { gap: 1rem !important; }
.lesson-nav a.btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #fff;
    border: 1px solid var(--tutorial-border, #e2e8f0);
    color: var(--tutorial-text);
    border-radius: 14px;
    padding: 1rem 1.3rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s;
    white-space: normal;
}
.lesson-nav a.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); color: var(--tutorial-text); }
.lesson-nav a.btn .nav-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted, #6c757d); margin-bottom: .3rem; font-weight: 700; }
.lesson-nav a.btn .nav-title { font-weight: 600; font-size: .95rem; }
.lesson-nav a.btn.btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); border: none; color: #fff; align-items: flex-end; text-align: right; }
.lesson-nav a.btn.btn-primary:hover { color: #fff; }
.lesson-nav a.btn.btn-primary .nav-label { color: rgba(255,255,255,.8); }

/* Suggestion section */
.suggestion-section { border-top: 1px solid var(--tutorial-border, #e2e8f0) !important; }
.suggestion-section .btn { border-radius: 999px; }

/* Top bar mode / font controls polish */
.tutorial-topbar .btn-group { border-radius: 999px; overflow: hidden; }
.tutorial-topbar .btn-group .btn-dark { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.tutorial-topbar .btn-group .btn-dark:hover { background: rgba(255,255,255,.2); }

/* Reading progress bar polish */
.reading-progress-bar { height: 4px; box-shadow: 0 0 8px rgba(244,162,97,.5); }

/* Dark / Sepia mode adjustments */
[data-mode="dark"] .lesson-header { border-color: #30363d; }
[data-mode="dark"] .takeaways-box { background: linear-gradient(135deg, rgba(249,199,79,.1), rgba(249,199,79,.02)); border-color: rgba(249,199,79,.25); }
[data-mode="dark"] .objectives-box { background: linear-gradient(135deg, rgba(76,153,201,.1), rgba(76,153,201,.02)); border-color: rgba(76,153,201,.25); }
[data-mode="dark"] .mistakes-to-avoid-box { background: linear-gradient(135deg, rgba(220,53,69,.08), rgba(220,53,69,.02)); border-color: rgba(220,53,69,.25); }
[data-mode="dark"] .lesson-body .tip, [data-mode="dark"] .lesson-body .note { background: rgba(88,166,255,.08); }
[data-mode="dark"] .notes-section, [data-mode="dark"] .complete-box { background: #161b22 !important; border-color: #30363d !important; }
[data-mode="dark"] .lesson-nav a.btn.btn-outline-secondary { background: #161b22; border-color: #30363d; color: #e6edf3; }
[data-mode="dark"] .lesson-article > nav .breadcrumb-item.active { color: #e6edf3; }
[data-mode="dark"] .lesson-print-btn { background: #161b22; border-color: #30363d; color: #e6edf3; }

/* Auto-linked Glossary/Full-Form/Calculator terms inside lesson content -- same
   dotted-underline treatment as articles (see .auto-term-link in style.css), just
   re-tinted to stay legible against the tutorial reading-mode dark background. */
[data-mode="dark"] .auto-term-link { border-bottom-color: #74c69d; }
[data-mode="dark"] .auto-term-link:hover { color: #74c69d; }

/* Lesson comments (reuses the same markup/classes as article comments) */
[data-mode="dark"] .comments-section h4 { color: #e6edf3; }
[data-mode="dark"] .comments-section .text-muted { color: #8b949e !important; }
[data-mode="dark"] .comment-item .fw-600 { color: #e6edf3; }
[data-mode="dark"] .comment-item .fw-600 a.text-dark { color: #e6edf3 !important; }
[data-mode="dark"] .comment-item p { color: #c9d1d9; }
[data-mode="dark"] #comment-form textarea,
[data-mode="dark"] .reply-form textarea { background: #161b22; border-color: #30363d; color: #e6edf3; }
[data-mode="dark"] #comment-form textarea::placeholder,
[data-mode="dark"] .reply-form textarea::placeholder { color: #8b949e; }

/* Print / Save as PDF -- keep only the lesson content itself, drop chrome that
   makes no sense on paper (nav, sidebar, search, notes, comments, CTAs). */
@media print {
    .tutorial-topbar, .tutorial-sidebar, .tutorial-footer, .lesson-nav,
    .notes-section, .comments-section, .quiz-cta-box, .complete-box,
    .lesson-actions, .suggestion-section, .lessonSuggestModal { display: none !important; }
    .tutorial-layout { display: block !important; }
    .tutorial-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
    body, .lesson-body, .lesson-article, [data-mode="dark"] .lesson-body, [data-mode="dark"] .lesson-article {
        color: #000 !important; background: #fff !important;
    }
    .lesson-body a, .lesson-article a { color: #000 !important; text-decoration: underline; }
    .lesson-header { border-bottom: 1px solid #000 !important; }
}

@media (max-width: 576px) {
    .lesson-nav { flex-direction: column; }
    .lesson-nav a.btn.btn-primary { align-items: flex-start; text-align: left; }
    .lesson-body h2 { font-size: 1.15rem; padding: .6rem .7rem .6rem .5rem; }
    .lesson-body h2::before { width: 1.8rem; height: 1.8rem; font-size: .85rem; }
}

/* ============================================================
   Topbar brand logo / profile link
   ============================================================ */
.tutorial-brand { display: inline-flex; align-items: center; gap: .5rem; }
.tutorial-brand-logo { height: 30px; width: auto; display: block; }
.tutorial-profile-link { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px; transition: background .15s; }
.tutorial-profile-link:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ============================================================
   Sidebar: font consistency + slightly larger text, footer links
   ============================================================ */
.tutorial-sidebar, .sidebar-module-btn, .sidebar-lesson a, .sidebar-title {
    font-family: var(--font-main, 'Noto Sans Devanagari', 'Segoe UI', sans-serif);
}
.sidebar-title { font-size: 12px; }
.sidebar-module-btn { font-size: 14px; }
.sidebar-lesson a { font-size: 14px; }

.sidebar-footer {
    flex-shrink: 0;
    padding: .75rem 1rem;
    background: var(--tutorial-sidebar-bg);
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .5rem;
    border-radius: 8px;
    color: #8b949e;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sidebar-footer-link i { font-size: 1rem; width: 1.2rem; text-align: center; }
.sidebar-footer-link:hover { background: rgba(255,255,255,.06); color: #e6edf3; }
.sidebar-footer-logout:hover { color: #ff7b72; }

/* ============================================================
   Notes list (multiple saved notes, newest first)
   ============================================================ */
.notes-list { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.note-item { background: #f8f9fb; border: 1px solid var(--tutorial-border, #e2e8f0); border-radius: 10px; padding: .8rem 1rem; }
.note-text { font-size: .92rem; line-height: 1.55; color: var(--tutorial-text); white-space: pre-wrap; }
.note-date { font-size: .74rem; color: var(--text-muted, #6c757d); margin-top: .4rem; }
[data-mode="dark"] .note-item { background: #161b22; border-color: #30363d; }
[data-mode="sepia"] .note-item { background: #efe6d4; border-color: #d8c9b0; }

/* ============================================================
   Note item footer (date + edit/delete actions)
   ============================================================ */
.note-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
.note-date { font-size: .74rem; color: var(--text-muted, #6c757d); }
.note-date em { font-style: normal; opacity: .75; }
.note-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.note-action-btn {
    border: none;
    background: transparent;
    color: var(--text-muted, #6c757d);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: background .15s, color .15s;
}
.note-action-btn:hover { background: rgba(0,0,0,.06); color: var(--tutorial-text); }
.note-delete-btn:hover { color: #e85d04; }
.note-edit-save-btn:hover { color: #2d6a4f; }
.note-edit-textarea { font-size: .92rem; }
[data-mode="dark"] .note-action-btn:hover { background: rgba(255,255,255,.08); color: #e6edf3; }

/* ============================================================
   Sidebar scrollbar (visible when modules/lessons are expanded)
   ============================================================ */
.sidebar-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
.sidebar-inner::-webkit-scrollbar { width: 7px; }
.sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 999px;
}
.sidebar-inner::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }

/* ============================================================
   Compact lesson-page footer (logo, company links, disclaimer)
   ============================================================ */
.tutorial-footer {
    margin-top: 3rem;
    padding: 2rem 0 1.5rem;
    border-top: 1px solid var(--tutorial-border, #e2e8f0);
    text-align: center;
}
.tutorial-footer-logo { height: 30px; width: auto; display: inline-block; margin-bottom: 1rem; }
.tutorial-footer-logo-white { display: none; }
[data-mode="dark"] .tutorial-footer-logo-color { display: none; }
[data-mode="dark"] .tutorial-footer-logo-white { display: inline-block; }
.tutorial-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-bottom: 1.25rem; }
.tutorial-footer-links a { color: var(--text-muted, #6c757d); font-size: .85rem; text-decoration: none; }
.tutorial-footer-links a:hover { color: var(--tutorial-text, #1a1a2e); text-decoration: underline; }
.tutorial-footer-disclaimer { max-width: 720px; margin: 0 auto .6rem; font-size: .78rem; line-height: 1.6; color: var(--text-muted, #6c757d); }
.tutorial-footer-disclaimer strong { color: #a1720c; }
.tutorial-footer-copy { font-size: .78rem; color: var(--text-muted, #6c757d); margin-bottom: 0; }
[data-mode="dark"] .tutorial-footer { border-color: #30363d; }

/* ============================================================
   Confirm Delete modal
   ============================================================ */
.confirm-modal-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(232,93,4,.12);
    color: #e85d04;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto .75rem;
}
[data-mode="dark"] .confirm-modal-content { background: #161b22; color: #e6edf3; }
[data-mode="dark"] .confirm-modal-content .text-muted { color: #8b949e !important; }

/* Quick Recap checklist (Quill strips custom classes, so target structurally:
   the ul/ol that immediately follows the last h2, i.e. "Quick Recap") */
.lesson-body h2:last-of-type + ul,
.lesson-body h2:last-of-type + ol { list-style: none; padding-left: 0; margin-top: .5rem; }
.lesson-body h2:last-of-type + ul > li,
.lesson-body h2:last-of-type + ol > li {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: .75rem;
    line-height: 1.5;
}
.lesson-body h2:last-of-type + ul > li::before,
.lesson-body h2:last-of-type + ol > li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: .05rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #2d6a4f;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Academy-scoped search (tutorial topbar) */
.tutorial-search { position: relative; }
.tutorial-search-box {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, 90vw);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    padding: .6rem;
    z-index: 1050;
}
.tutorial-search-box input#tutorial-search-input {
    border-radius: 8px;
}
.tutorial-search-results {
    margin-top: .5rem;
    max-height: 320px;
    overflow-y: auto;
}
.tutorial-search-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a2e;
}
.tutorial-search-item:hover { background: rgba(45,106,79,.08); }
.tutorial-search-item-title { font-size: .88rem; font-weight: 600; }
.tutorial-search-item-module { font-size: .74rem; color: #6b7280; }
.tutorial-search-empty { padding: .6rem; font-size: .85rem; color: #6b7280; text-align: center; }

[data-mode="dark"] .tutorial-search-box { background: #161b22; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
[data-mode="dark"] .tutorial-search-item { color: #e6edf3; }
[data-mode="dark"] .tutorial-search-item:hover { background: rgba(255,255,255,.06); }
[data-mode="dark"] .tutorial-search-item-module { color: #9ca3af; }
[data-mode="dark"] .tutorial-search-empty { color: #9ca3af; }

@media (max-width: 576px) {
    .tutorial-search-box { width: 90vw; right: -3rem; }
}

/* Lesson Quiz CTA */
.quiz-cta-box {
    background: linear-gradient(135deg, rgba(244,162,97,.14), rgba(244,162,97,.03)) !important;
    border: 1px dashed rgba(244,162,97,.45);
}
.quiz-cta-icon {
    width: 3rem; height: 3rem; border-radius: 50%;
    background: rgba(244,162,97,.18); color: #e07a1f;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .75rem; font-size: 1.25rem;
}
.quiz-cta-box .btn-primary {
    border-radius: 999px; padding: .7rem 1.75rem;
    background: var(--primary); border: none;
    box-shadow: 0 6px 16px rgba(10,35,66,.25);
    transition: transform .15s, box-shadow .15s;
}
.quiz-cta-box .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,35,66,.3); }
[data-mode="dark"] .quiz-cta-box { background: #161b22 !important; border-color: rgba(244,162,97,.35); }

/* ===== Lesson page (phones): Previous / Next bar fixed at the bottom ===== */
@media (max-width: 767.98px) {
    .lesson-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; margin: 0 !important; padding: .45rem .6rem !important;
        gap: .5rem !important; background: var(--tutorial-bg, #fff); border-top: 1px solid var(--tutorial-border, #e2e8f0);
        box-shadow: 0 -2px 12px rgba(0,0,0,.12);
    }
    .lesson-nav a.btn { flex: 1 1 0; min-width: 0; padding: .4rem .6rem !important; }
    .lesson-nav a.btn .nav-label { display: none !important; }
    .lesson-nav a.btn .nav-title { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
    .lesson-nav a.btn:hover { transform: none; box-shadow: none; }
    body { padding-bottom: 64px; }
    .tutorial-back-to-top { bottom: 140px !important; }
    .tutorial-suggest-fab { bottom: 84px !important; }
}
[data-mode="dark"] .lesson-nav { background: #0d1117; }