/* Main page visual polish: scoped overrides for landing/search/course pages. */

/* Ảnh công thức latex (chữ đen nền trong suốt) → trắng khi dark mode.
   Dùng CSS thay vì inline JS để toggle theme / ảnh load trễ vẫn đúng.
   Search page không load course_detail.css nên rule nằm ở đây (shared). */
html.dark .formula-img,
html.dark img[src*="latex" i] {
    filter: invert(1);
}

:root {
    --ctb-sky: #0ea5e9;
    --ctb-cyan: #06b6d4;
    --ctb-amber: #f59e0b;
    --ctb-rose: #fb7185;
    --ctb-ink: #0f172a;
    --ctb-card: rgba(255, 255, 255, 0.76);
    --ctb-border: rgba(14, 165, 233, 0.18);
    --ctb-shadow: 0 24px 70px rgba(14, 165, 233, 0.16);
    --ctb-radius: 24px;
    --ctb-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ctb-page-pad: clamp(0.85rem, 2vw, 2rem);
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe, table, svg {
    max-width: 100%;
}

html.dark {
    --ctb-card: rgba(15, 23, 42, 0.76);
    --ctb-border: rgba(125, 211, 252, 0.18);
    --ctb-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.search-page-body,
.moon-detail-body,
.drive-detail-body,
.tenschool-list-body,
.tenschool-detail-body,
.ssstudy-list-body,
.ssstudy-detail-body {
    min-height: 100svh;
    background:
        radial-gradient(900px 420px at 12% -8%, rgba(34, 211, 238, 0.22), transparent 62%),
        radial-gradient(800px 420px at 92% 4%, rgba(245, 158, 11, 0.14), transparent 62%),
        linear-gradient(180deg, #f8fafc 0%, #eef9ff 45%, #fff7ed 100%);
    background-attachment: fixed;
}

.landing-body .atmos {
    background:
        radial-gradient(64vw 58vw at 82% -8%, rgba(34, 211, 238, 0.18), transparent 60%),
        radial-gradient(52vw 48vw at -6% 22%, rgba(255, 106, 61, 0.12), transparent 58%),
        radial-gradient(70vw 50vw at 50% 116%, rgba(245, 158, 11, 0.08), transparent 60%);
}

.landing-body {
    min-width: 0;
}

.landing-body .feat,
.landing-body footer,
.landing-body section > .rounded-\[2rem\],
.landing-body section > .rounded-\[2\.5rem\] {
    transform: translateZ(0);
}

.landing-body section > div[class*="rounded-"] {
    transform: translateZ(0);
}

html.dark .search-page-body,
html.dark .moon-detail-body,
html.dark .drive-detail-body,
html.dark .tenschool-list-body,
html.dark .tenschool-detail-body,
html.dark .ssstudy-list-body,
html.dark .ssstudy-detail-body {
    background:
        radial-gradient(900px 420px at 12% -8%, rgba(14, 165, 233, 0.20), transparent 62%),
        radial-gradient(800px 420px at 92% 4%, rgba(245, 158, 11, 0.12), transparent 62%),
        linear-gradient(180deg, #020617 0%, #0f172a 48%, #082f49 100%);
    background-attachment: fixed;
}

.search-page-body::before,
.moon-detail-body::before,
.drive-detail-body::before,
.tenschool-list-body::before,
.tenschool-detail-body::before,
.ssstudy-list-body::before,
.ssstudy-detail-body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.38;
    background-image:
        linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 76%, transparent);
}

.search-page-shell {
    padding-top: clamp(2rem, 4vw, 4.5rem);
}

.search-hero-card {
    position: relative;
    overflow: hidden;
    margin: 0 auto 1.5rem;
    max-width: 980px;
    padding: clamp(1.35rem, 4vw, 3rem);
    border: 1px solid var(--ctb-border);
    border-radius: clamp(22px, 4vw, 36px);
    background: linear-gradient(145deg, var(--ctb-card), rgba(255, 255, 255, 0.42));
    box-shadow: var(--ctb-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html.dark .search-hero-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(8, 47, 73, 0.58));
}

.search-hero-card::before {
    content: '';
    position: absolute;
    inset: -35% -12% auto auto;
    width: min(420px, 70vw);
    aspect-ratio: 1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.30), transparent 62%);
    filter: blur(10px);
    pointer-events: none;
}

.search-hero-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    color: #0284c7;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

html.dark .search-hero-eyebrow { color: #67e8f9; }

.search-hero-title {
    position: relative;
    margin: 0 auto 0.9rem;
    max-width: 780px;
    color: #0f172a;
    font-size: clamp(2rem, 6vw, 4.6rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

html.dark .search-hero-title { color: #f8fafc; }

.search-hero-title span {
    background: linear-gradient(110deg, var(--ctb-sky), var(--ctb-cyan), var(--ctb-amber));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.search-hero-subtitle {
    position: relative;
    margin: 0 auto 1.5rem;
    max-width: 680px;
    color: #475569;
    font-size: clamp(0.98rem, 2vw, 1.12rem);
    line-height: 1.7;
}

html.dark .search-hero-subtitle { color: #cbd5e1; }

.search-page-body .search-box-wrapper {
    max-width: 860px;
}

.search-page-body .search-box {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(14, 165, 233, 0.24);
    box-shadow: 0 18px 42px rgba(14, 165, 233, 0.16);
}

html.dark .search-page-body .search-box {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(125, 211, 252, 0.24);
}

.search-page-body #id-input {
    min-width: 0;
    padding: 1rem 1.25rem;
}

.search-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 980px;
    margin: 0 auto 2rem;
}

.search-shortcut-card {
    display: flex;
    min-height: 104px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #0f172a;
    text-decoration: none;
    transition: transform 0.28s var(--ctb-ease), box-shadow 0.28s var(--ctb-ease), border-color 0.28s var(--ctb-ease);
}

html.dark .search-shortcut-card {
    background: rgba(15, 23, 42, 0.68);
    color: #f8fafc;
    border-color: rgba(125, 211, 252, 0.18);
}

.search-shortcut-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 20px 45px rgba(14, 165, 233, 0.16);
}

.search-shortcut-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(6, 182, 212, 0.10));
    color: #0284c7;
    font-size: 1.25rem;
}

html.dark .search-shortcut-icon { color: #67e8f9; }

.search-shortcut-title {
    margin-top: 0.8rem;
    font-weight: 800;
    line-height: 1.25;
}

.search-shortcut-meta {
    color: #64748b;
    font-size: 0.78rem;
}

html.dark .search-shortcut-meta { color: #94a3b8; }

.mc-page {
    width: min(100%, 1500px);
    padding-inline: var(--ctb-page-pad) !important;
}

.mc-page .mc-hero,
.moon-detail-body .course-header-grid,
.drive-detail-body .bg-white,
.drive-detail-body .dark\:bg-slate-800,
.tenschool-list-body .stat-card,
.tenschool-list-body .course-card,
.tenschool-detail-body .bg-white {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mc-page .courses-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.mc-page .courses-toolbar {
    align-items: stretch;
    padding: 1rem;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html.dark .mc-page .courses-toolbar {
    background: rgba(15, 23, 42, 0.52);
    border-color: rgba(125, 211, 252, 0.16);
}

.mc-page #course-search-input {
    width: 100%;
    min-height: 46px;
    min-width: 0;
}

.moon-detail-body #course-detail-page {
    width: min(100%, 1680px);
    padding-inline: var(--ctb-page-pad) !important;
}

.moon-detail-body .course-header-grid {
    box-shadow: 0 24px 70px rgba(99, 102, 241, 0.16);
}

.moon-detail-body .course-tabs {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    border-bottom: 0;
    padding: 0.35rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(14, 165, 233, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html.dark .moon-detail-body .course-tabs {
    background: rgba(15, 23, 42, 0.58);
    border-color: rgba(125, 211, 252, 0.16);
}

.moon-detail-body .course-tabs .tab-btn {
    border-radius: 12px;
    flex: 0 0 auto;
}

.moon-detail-body .course-tabs::-webkit-scrollbar { display: none; }

.moon-detail-body .topics-list,
.moon-detail-body .lessons-list-wrapper,
.moon-detail-body #detail-content-container > div,
.moon-detail-body .quiz-question-block {
    border-radius: 20px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

html.dark .moon-detail-body .topics-list,
html.dark .moon-detail-body .lessons-list-wrapper,
html.dark .moon-detail-body #detail-content-container > div,
html.dark .moon-detail-body .quiz-question-block {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.moon-detail-body .lesson-item {
    min-height: 58px;
    gap: 0.75rem;
}

.drive-detail-body .max-w-screen-xl,
.tenschool-detail-body .max-w-7xl,
.tenschool-list-body .container,
.ssstudy-shell,
.ssstudy-detail-shell {
    width: min(100%, 1440px);
    padding-inline: var(--ctb-page-pad) !important;
}

.drive-detail-body .flex.flex-col.lg\:flex-row {
    align-items: stretch;
}

.drive-detail-body .course-sidebar,
.drive-detail-body main {
    min-width: 0;
}

.drive-detail-body .bg-white,
.drive-detail-body .dark\:bg-slate-800 {
    border: 1px solid rgba(14, 165, 233, 0.14);
    background-color: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 20px 52px rgba(15, 23, 42, 0.10);
}

html.dark .drive-detail-body .bg-white,
html.dark .drive-detail-body .dark\:bg-slate-800 {
    border-color: rgba(125, 211, 252, 0.16);
    background-color: rgba(15, 23, 42, 0.82) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.30);
}

.drive-detail-body #player-container,
.tenschool-detail-body .video-wrapper,
.tenschool-detail-body #video-placeholder,
.moon-detail-body .video-wrapper {
    box-shadow: 0 22px 54px rgba(2, 6, 23, 0.28);
}

.drive-detail-body .course-sidebar,
.drive-detail-body main,
.tenschool-detail-body .rounded-xl,
.tenschool-detail-body .rounded-lg,
.tenschool-list-body .rounded-2xl,
.tenschool-list-body .course-card {
    border-radius: 22px !important;
}

.drive-detail-body .node-title,
.drive-detail-body .file-row,
.tenschool-detail-body .lesson-item,
.tenschool-detail-body .chapter-toggle {
    transition: transform 0.22s var(--ctb-ease), background-color 0.22s var(--ctb-ease), border-color 0.22s var(--ctb-ease), color 0.22s var(--ctb-ease);
}

.drive-detail-body .node-title:hover,
.drive-detail-body .file-row:hover,
.tenschool-detail-body .lesson-item:hover {
    transform: translateX(3px);
}

.drive-detail-body #files-list,
.moon-detail-body #detail-content-container,
.tenschool-detail-body #main-content,
.tenschool-detail-body .tab-panel {
    min-width: 0;
}

.tenschool-list-body .hero-gradient {
    background:
        radial-gradient(900px 320px at 10% -10%, rgba(255, 255, 255, 0.30), transparent 55%),
        linear-gradient(135deg, #0284c7 0%, #06b6d4 48%, #f59e0b 100%);
    box-shadow: inset 0 -70px 90px rgba(15, 23, 42, 0.10);
}

.tenschool-list-body .stat-card,
.tenschool-list-body .bg-white,
.tenschool-list-body .course-card {
    border: 1px solid rgba(14, 165, 233, 0.14) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10) !important;
}

html.dark .tenschool-list-body .stat-card,
html.dark .tenschool-list-body .bg-white,
html.dark .tenschool-list-body .course-card {
    border-color: rgba(125, 211, 252, 0.16) !important;
    background: rgba(15, 23, 42, 0.82) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30) !important;
}

.tenschool-list-body .course-card:hover {
    transform: translateY(-7px) scale(1.01);
}

.tenschool-list-body #filter-form {
    align-items: stretch;
}

.tenschool-list-body #course-list-container {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.tenschool-list-body .filter-input,
.tenschool-list-body select,
.tenschool-list-body input,
.tenschool-detail-body input,
.tenschool-detail-body select,
.ssstudy-list-body input,
.ssstudy-list-body select,
.ssstudy-detail-body input {
    min-height: 44px;
    border-radius: 14px !important;
}

.tenschool-detail-body .bg-white {
    border: 1px solid rgba(245, 158, 11, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10) !important;
}

html.dark .tenschool-detail-body .bg-white,
html.dark .tenschool-detail-body .dark\:bg-gray-800,
html.dark .tenschool-detail-body .dark\:bg-slate-800 {
    border-color: rgba(251, 191, 36, 0.16) !important;
    background-color: rgba(15, 23, 42, 0.84) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30) !important;
}

.tenschool-detail-body .lesson-item.active,
.tenschool-detail-body .lesson-item:hover {
    border-left-color: var(--ctb-amber) !important;
}

.ssstudy-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(224,242,254,0.78) 54%, rgba(255,251,235,0.86));
    box-shadow: 0 22px 58px rgba(14, 165, 233, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html.dark .ssstudy-hero {
    background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(8,47,73,0.8) 54%, rgba(30,41,59,0.9));
    border-color: rgba(125, 211, 252, 0.18);
}

.ssstudy-hero::after {
    content: '';
    position: absolute;
    inset: auto -10% -42% auto;
    width: min(420px, 70vw);
    aspect-ratio: 1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(245,158,11,0.24), transparent 62%);
    pointer-events: none;
}

.ssstudy-eyebrow {
    margin-bottom: 0.45rem;
    color: #0284c7;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

html.dark .ssstudy-eyebrow { color: #67e8f9; }

.ssstudy-title {
    position: relative;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.ssstudy-subtitle {
    position: relative;
    margin-top: 0.5rem;
    color: #475569;
    font-size: 0.95rem;
}

html.dark .ssstudy-subtitle { color: #cbd5e1; }

.ssstudy-filter,
.ssstudy-course-card,
.ssstudy-detail-body .bg-white,
.ssstudy-lesson-sidebar {
    border: 1px solid rgba(14, 165, 233, 0.14) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html.dark .ssstudy-filter,
html.dark .ssstudy-course-card,
html.dark .ssstudy-detail-body .bg-white,
html.dark .ssstudy-lesson-sidebar {
    border-color: rgba(125, 211, 252, 0.16) !important;
    background: rgba(15, 23, 42, 0.84) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30) !important;
}

.ssstudy-course-card {
    border-radius: 22px !important;
}

.ssstudy-course-card img {
    background: #e2e8f0;
}

.ssstudy-list-body .page-link {
    border-color: rgba(14, 165, 233, 0.18) !important;
}

html.dark .ssstudy-list-body .page-link:not(.z-10) {
    background: rgba(15, 23, 42, 0.86) !important;
    color: #cbd5e1 !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
}

.ssstudy-detail-body #video-player-container,
.ssstudy-detail-body #pdf-viewer-container {
    border-radius: 22px !important;
    box-shadow: 0 24px 64px rgba(2, 6, 23, 0.30);
}

.ssstudy-detail-body .chapter-block,
.ssstudy-detail-body .lesson-item {
    border-radius: 16px !important;
}

.ssstudy-detail-body .accordion-trigger:hover,
.ssstudy-detail-body .lesson-item:hover {
    background-color: rgba(14, 165, 233, 0.08) !important;
}

html.dark .ssstudy-detail-body .accordion-content {
    background-color: rgba(15, 23, 42, 0.56) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
}

html.dark .ssstudy-detail-body .lesson-title,
html.dark .ssstudy-detail-body .prose,
html.dark .ssstudy-detail-body .text-gray-700,
html.dark .ssstudy-detail-body .text-gray-600,
html.dark .ssstudy-detail-body .text-gray-500 {
    color: #cbd5e1 !important;
}

.drive-detail-body .max-w-screen-xl > .bg-white:first-of-type {
    overflow: hidden;
}

.drive-detail-body #course-avatar,
.tenschool-list-body .card-thumb,
.ssstudy-course-card img {
    transform: translateZ(0);
}

.drive-detail-body #sidebar-tree-wrap,
.ssstudy-detail-body .custom-scrollbar,
.tenschool-detail-body .lesson-sidebar {
    overscroll-behavior: contain;
}

.tenschool-detail-body .grid,
.tenschool-list-body .grid,
.moon-detail-body .grid {
    min-width: 0;
}

.tenschool-detail-body .video-wrapper,
.tenschool-detail-body #video-placeholder,
.drive-detail-body #player-container,
.moon-detail-body .video-wrapper {
    aspect-ratio: 16 / 9;
}

@media (max-width: 1024px) {
    .moon-detail-body .course-content-wrapper {
        gap: 1.25rem;
    }

    .moon-detail-body #topics-list-container,
    .drive-detail-body .course-sidebar {
        position: static !important;
    }

    .drive-detail-body #sidebar-tree-wrap,
    .tenschool-detail-body .lesson-sidebar {
        max-height: 48vh !important;
    }

    .moon-detail-body .topics-list,
    .moon-detail-body .lessons-list-wrapper {
        max-height: 52vh;
        position: static;
    }

    .tenschool-detail-body #main-content > .grid,
    .drive-detail-body .flex.flex-col.lg\:flex-row {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    :root {
        --ctb-page-pad: 0.9rem;
    }

    .landing-body header nav {
        height: 62px;
    }

    .landing-body #top {
        padding-top: 7.5rem;
        padding-bottom: 3.5rem;
    }

    .landing-body .fab {
        width: 50px;
        height: 50px;
        right: 1rem;
        bottom: 1rem;
    }

    .landing-body section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .landing-body h1,
    .landing-body h2 {
        overflow-wrap: anywhere;
    }

    .landing-body .cursor-dot,
    .landing-body .cursor-ring {
        display: none !important;
    }

    .search-page-shell,
    .moon-detail-body #course-detail-page,
    .drive-detail-body .max-w-screen-xl,
    .tenschool-detail-body .container,
    .tenschool-list-body .container,
    .ssstudy-shell,
    .ssstudy-detail-shell,
    .mc-page {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    .search-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-page-body .search-box {
        align-items: stretch;
    }

    .search-page-body #search-btn {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mc-page .course-tabs,
    .mc-page .course-subtabs,
    .moon-detail-body .course-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.35rem;
        scrollbar-width: none;
    }

    .mc-page .course-tabs::-webkit-scrollbar,
    .mc-page .course-subtabs::-webkit-scrollbar,
    .moon-detail-body .course-tabs::-webkit-scrollbar { display: none; }

    .mc-page .tab-btn,
    .mc-page .subtab-btn,
    .moon-detail-body .tab-btn {
        white-space: nowrap;
    }

    .moon-detail-body .course-header-grid {
        padding: 1rem;
        margin-top: 0.25rem;
        border-radius: 20px;
    }

    .moon-detail-body .course-header-avatar {
        width: min(100%, 280px);
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .drive-detail-body .absolute.top-4.right-4 {
        position: static !important;
        align-self: flex-start;
        margin-bottom: 0.25rem;
    }

    .drive-detail-body .max-w-screen-xl > .bg-white:first-of-type,
    .drive-detail-body .max-w-screen-xl > .dark\:bg-slate-800:first-of-type {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .drive-detail-body #course-avatar {
        width: 5.75rem !important;
        height: 5.75rem !important;
        border-radius: 1rem !important;
    }

    .drive-detail-body #course-title,
    .tenschool-detail-body #lesson-title,
    .tenschool-detail-body #course-title {
        font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
        line-height: 1.15;
    }

    .drive-detail-body .flex.items-start.justify-between,
    .tenschool-detail-body .bg-gray-900.flex,
    .tenschool-detail-body .flex.border-b,
    .ssstudy-detail-body .flex.items-center.justify-between {
        flex-wrap: wrap;
    }

    .ssstudy-detail-shell {
        gap: 1rem !important;
        padding: 0.9rem !important;
    }

    .ssstudy-detail-body .lg\:h-\[calc\(100vh-var\(--top-h\)-var\(--foot-h\)-16px\)\] {
        height: auto !important;
        max-height: none !important;
    }

    .ssstudy-lesson-sidebar > div {
        max-height: 55vh !important;
    }

    .tenschool-detail-body .container > nav {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .tenschool-detail-body .container > nav::-webkit-scrollbar { display: none; }

    .tenschool-detail-body #main-content .lg\:col-span-2,
    .tenschool-detail-body #main-content .space-y-4,
    .tenschool-detail-body #main-content .bg-white {
        min-width: 0;
    }

    .tenschool-list-body .hero-gradient .container {
        padding-top: 2rem !important;
        padding-bottom: 4rem !important;
    }

    .tenschool-list-body #stats-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.65rem !important;
    }

    .tenschool-list-body #filter-form {
        gap: 0.8rem !important;
    }
}

@media (max-width: 520px) {
    :root {
        --ctb-page-pad: 0.75rem;
    }

    .landing-body .marquee {
        animation-duration: 46s;
    }

    .landing-body .btn-lime,
    .landing-body .btn-ghost {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .search-hero-card {
        padding: 1.2rem;
    }

    .search-shortcuts {
        grid-template-columns: 1fr;
    }

    .search-page-body .search-box {
        flex-direction: column;
        padding: 0.45rem;
    }

    .search-page-body #search-btn {
        width: 100%;
        justify-content: center;
        margin: 0;
        border-radius: 16px;
    }

    .search-page-body #id-input {
        width: 100%;
        padding: 0.95rem 0.8rem;
        text-align: center;
    }

    .mc-page .mc-hero {
        padding: 1.25rem;
        border-radius: 20px;
    }

    .mc-page .courses-toolbar {
        padding: 0.8rem;
        border-radius: 18px;
    }

    .mc-page .courses-grid,
    .mc-page #recent-courses-list,
    .moon-detail-body .skeleton-loader {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .mc-page .course-tabs {
        margin-inline: -0.2rem;
    }

    .moon-detail-body .lesson-item {
        padding: 0.85rem 0.95rem;
    }

    .moon-detail-body .course-stats {
        gap: 0.6rem;
        justify-content: flex-start;
    }

    .moon-detail-body .course-group-link {
        width: 100%;
        justify-content: center;
    }

    .drive-detail-body .course-sidebar,
    .drive-detail-body main,
    .tenschool-detail-body .bg-white,
    .tenschool-detail-body .rounded-xl,
    .tenschool-list-body .bg-white,
    .ssstudy-filter,
    .ssstudy-course-card,
    .ssstudy-detail-body .bg-white {
        border-radius: 18px !important;
    }

    .drive-detail-body .course-sidebar,
    .drive-detail-body main,
    .tenschool-list-body .bg-white,
    .ssstudy-filter,
    .ssstudy-detail-body .bg-white {
        padding: 1rem !important;
    }

    .drive-detail-body .file-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tenschool-detail-body .flex.border-b button {
        flex: 1 0 100%;
        border-bottom-width: 1px !important;
    }

    .tenschool-detail-body .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .tenschool-list-body #stats-bar {
        grid-template-columns: 1fr !important;
    }

    .drive-detail-body #btn-prev,
    .drive-detail-body #btn-next,
    .tenschool-detail-body .bg-gray-900 button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .tenschool-list-body #course-list-container {
        grid-template-columns: 1fr !important;
    }

    .ssstudy-hero {
        padding: 1.15rem;
        border-radius: 20px;
    }

    .ssstudy-list-body nav ul {
        max-width: 100%;
        overflow-x: auto;
    }

    .ssstudy-detail-body footer {
        height: auto !important;
        min-height: var(--foot-h);
        padding-block: 0.5rem;
    }

    .ssstudy-detail-body footer > div {
        flex-wrap: wrap;
    }

    .ssstudy-detail-body footer button {
        flex: 1 1 140px;
        justify-content: center;
        padding-inline: 0.8rem !important;
    }
}

@media (hover: none) {
    .search-shortcut-card:hover,
    .tenschool-list-body .course-card:hover,
    .drive-detail-body .node-title:hover,
    .drive-detail-body .file-row:hover,
    .tenschool-detail-body .lesson-item:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* Update 2026-07-19: navigation, accessibility and mobile performance. */
:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(39, 131, 222, 0.55);
    outline-offset: 3px;
}

.user-bar-tailwind a[aria-current="page"] {
    text-decoration: none;
}

@media (max-width: 768px) {
    /* Fixed layered backgrounds and large blur surfaces are expensive on mobile GPUs. */
    .search-page-body,
    .moon-detail-body,
    .drive-detail-body,
    .tenschool-list-body,
    .tenschool-detail-body,
    .ssstudy-list-body,
    .ssstudy-detail-body {
        background-attachment: scroll;
    }

    .search-page-body::before,
    .moon-detail-body::before,
    .drive-detail-body::before,
    .tenschool-list-body::before,
    .tenschool-detail-body::before,
    .ssstudy-list-body::before,
    .ssstudy-detail-body::before {
        display: none;
    }

    .search-hero-card,
    .search-shortcut-card,
    .mc-page .courses-toolbar,
    .mc-page .mc-hero,
    .moon-detail-body .course-header-grid,
    .drive-detail-body .bg-white,
    .drive-detail-body .dark\:bg-slate-800,
    .tenschool-list-body .stat-card,
    .tenschool-list-body .course-card,
    .tenschool-detail-body .bg-white {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}



/* Update 2026-07-19-2: unified course detail experience. */
:is(.moon-detail-body, .drive-detail-body, .tenschool-detail-body) {
    --detail-surface: rgba(255, 255, 255, 0.92);
    --detail-surface-soft: rgba(248, 250, 252, 0.86);
    --detail-border: rgba(15, 23, 42, 0.10);
    --detail-text: #0f172a;
    --detail-muted: #64748b;
    --detail-accent: #2783de;
    --detail-accent-soft: rgba(39, 131, 222, 0.10);
    --detail-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 38px rgba(15, 23, 42, 0.08);
    --detail-radius: 18px;
    color: var(--detail-text);
    text-rendering: optimizeLegibility;
}

html.dark :is(.moon-detail-body, .drive-detail-body, .tenschool-detail-body) {
    --detail-surface: rgba(15, 23, 42, 0.94);
    --detail-surface-soft: rgba(30, 41, 59, 0.82);
    --detail-border: rgba(255, 255, 255, 0.12);
    --detail-text: #f8fafc;
    --detail-muted: #94a3b8;
    --detail-accent: #5e9fe8;
    --detail-accent-soft: rgba(94, 159, 232, 0.13);
    --detail-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.24);
}

:is(.moon-detail-body, .drive-detail-body, .tenschool-detail-body) :is(button, a, input, select) {
    -webkit-tap-highlight-color: transparent;
}

:is(.moon-detail-body, .drive-detail-body, .tenschool-detail-body) :is(button, a) {
    touch-action: manipulation;
}

:is(.moon-detail-body, .drive-detail-body, .tenschool-detail-body) :is(.lesson-item, .file-row) {
    content-visibility: auto;
    contain-intrinsic-size: 58px;
}

/* Moon detail */
.moon-detail-body #course-detail-page {
    padding-top: clamp(1rem, 2vw, 2rem) !important;
}

.moon-detail-body .course-header-grid {
    overflow: hidden;
    border: 1px solid var(--detail-border) !important;
    border-radius: 24px !important;
    background: var(--detail-surface) !important;
    box-shadow: var(--detail-shadow) !important;
}

.moon-detail-body .course-header-grid::before {
    opacity: 0.55;
}

.moon-detail-body .course-header-grid:hover {
    transform: none !important;
}

.moon-detail-body .course-header-avatar {
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.moon-detail-body .course-stats {
    gap: 0.65rem !important;
}

.moon-detail-body .course-stats span {
    min-height: 40px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--detail-border);
    border-radius: 10px;
    background: var(--detail-surface-soft);
}

.moon-detail-body #course-main-content > .border-b {
    border: 0 !important;
    margin-bottom: 1rem !important;
}

.moon-detail-body .course-tabs {
    gap: 0.35rem;
    padding: 0.4rem !important;
    border: 1px solid var(--detail-border) !important;
    border-radius: 14px !important;
    background: var(--detail-surface) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.moon-detail-body .course-tabs .tab-btn {
    min-height: 44px;
    padding: 0.7rem 1rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--detail-muted) !important;
}

.moon-detail-body .course-tabs .tab-btn.active {
    background: var(--detail-accent-soft) !important;
    color: var(--detail-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(39, 131, 222, 0.18);
}

.moon-detail-body .topics-list,
.moon-detail-body .lessons-list-wrapper,
.moon-detail-body #detail-content-container > div {
    border: 1px solid var(--detail-border) !important;
    border-radius: var(--detail-radius) !important;
    background: var(--detail-surface) !important;
    box-shadow: var(--detail-shadow) !important;
}

.moon-detail-body :is(.topic-item, .lesson-item, .lesson-item-panel) {
    min-height: 54px;
    border-color: var(--detail-border) !important;
}

.moon-detail-body .topic-item {
    margin: 0.35rem;
    border-radius: 10px;
}

.moon-detail-body .topic-item:hover,
.moon-detail-body .lesson-item:hover {
    transform: none !important;
    background: var(--detail-accent-soft) !important;
}

.moon-detail-body .topic-item.active {
    border-color: rgba(39, 131, 222, 0.30) !important;
    background: var(--detail-accent-soft) !important;
}

.moon-detail-body .video-wrapper,
.moon-detail-body #detail-content-container :is(video, iframe) {
    width: 100%;
    border-radius: 14px;
    background: #020617;
}

.moon-detail-body #detail-content-container :is(table, pre) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

/* Drive detail */
.drive-detail-body > .max-w-screen-xl {
    width: min(100%, 1540px);
}

.drive-detail-body > .max-w-screen-xl > .bg-white:first-of-type,
.drive-detail-body .course-sidebar,
.drive-detail-body main[data-watch-content] {
    border: 1px solid var(--detail-border) !important;
    border-radius: 22px !important;
    background: var(--detail-surface) !important;
    box-shadow: var(--detail-shadow) !important;
}

.drive-detail-body > .max-w-screen-xl > .bg-white:first-of-type {
    min-height: 172px;
}

.drive-detail-body #course-avatar {
    border: 1px solid var(--detail-border);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
}

.drive-detail-body .course-sidebar {
    padding: 1rem !important;
}

.drive-detail-body #sidebar-tree-wrap {
    max-height: min(68vh, 760px);
    padding-right: 0.3rem;
    overscroll-behavior: contain;
}

.drive-detail-body .node-title {
    min-height: 44px;
    margin-block: 2px;
    border-radius: 10px !important;
}

.drive-detail-body .node-title:hover {
    transform: none !important;
    background: var(--detail-accent-soft) !important;
}

.drive-detail-body .node-title.active {
    background: var(--detail-accent-soft) !important;
    color: var(--detail-accent) !important;
    box-shadow: inset 3px 0 0 var(--detail-accent);
}

.drive-detail-body .search-input {
    min-height: 46px;
    border-color: var(--detail-border) !important;
    background: var(--detail-surface-soft) !important;
}

.drive-detail-body .lesson-player-shell {
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.20) !important;
}

.drive-detail-body .player-frame {
    aspect-ratio: 16 / 9;
    min-height: 0 !important;
    border-radius: 12px !important;
}

.drive-detail-body .player-frame :is(video, iframe) {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.drive-detail-body .player-meta {
    gap: 1rem;
    min-height: 62px;
}

.drive-detail-body .file-row {
    min-height: 58px;
    border-color: var(--detail-border) !important;
    border-radius: 12px !important;
    background: var(--detail-surface-soft) !important;
}

.drive-detail-body .file-row:hover {
    transform: none !important;
    border-color: rgba(39, 131, 222, 0.28) !important;
    background: var(--detail-accent-soft) !important;
}

.drive-detail-body .pill-btn {
    min-height: 40px;
    border-radius: 9px !important;
}

/* Tenschool detail */
.tenschool-detail-body > .container {
    width: min(100%, 1540px);
}

.tenschool-detail-body #main-content > .grid {
    align-items: start;
}

.tenschool-detail-body #main-content [data-watch-content] > .bg-black,
.tenschool-detail-body #main-content [data-watch-content] > .bg-white,
.tenschool-detail-body #main-content [data-watch-sidebar] > .bg-white {
    border: 1px solid var(--detail-border) !important;
    border-radius: 18px !important;
    background: var(--detail-surface) !important;
    box-shadow: var(--detail-shadow) !important;
}

.tenschool-detail-body .video-wrapper,
.tenschool-detail-body #video-placeholder,
.tenschool-detail-body #video-player {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.tenschool-detail-body .video-wrapper {
    border-radius: 16px 16px 0 0;
    isolation: isolate;
}

.tenschool-detail-body #video-player {
    object-fit: contain;
    background: #020617;
}

.tenschool-detail-body .video-controls {
    padding: 0.75rem 1rem !important;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.10)) !important;
}

.tenschool-detail-body .video-controls button {
    min-width: 40px;
    min-height: 40px;
}

.tenschool-detail-body #main-content [data-watch-content] > .bg-white > .flex.border-b {
    gap: 0.25rem;
    padding: 0.35rem;
    border: 0 !important;
    border-radius: 14px 14px 0 0;
    background: var(--detail-surface-soft);
    overflow-x: auto;
    scrollbar-width: none;
}

.tenschool-detail-body #main-content [data-watch-content] > .bg-white > .flex.border-b::-webkit-scrollbar {
    display: none;
}

.tenschool-detail-body #main-content .tab-btn {
    flex: 1 0 auto !important;
    min-width: 132px;
    min-height: 44px;
    padding: 0.65rem 0.9rem !important;
    border: 0 !important;
    border-radius: 10px;
    color: var(--detail-muted) !important;
    white-space: nowrap;
}

.tenschool-detail-body #main-content .tab-btn.text-amber-600 {
    background: var(--detail-accent-soft) !important;
    color: var(--detail-accent) !important;
}

.tenschool-detail-body [data-watch-sidebar] > .bg-white {
    overflow: hidden;
}

.tenschool-detail-body .chapter-toggle {
    min-height: 48px;
    background: var(--detail-surface-soft) !important;
}

.tenschool-detail-body .lesson-item {
    min-height: 48px;
    border-color: var(--detail-border) !important;
}

.tenschool-detail-body .lesson-item:hover,
.tenschool-detail-body .lesson-item.active {
    background: var(--detail-accent-soft) !important;
}

.tenschool-detail-body .lesson-item.active {
    border-left-color: var(--detail-accent) !important;
    color: var(--detail-accent);
}

.tenschool-detail-body .lesson-sidebar {
    max-height: min(62vh, 680px) !important;
    overscroll-behavior: contain;
}

.tenschool-detail-body #main-content :is(.prose, .tab-panel) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tenschool-detail-body #main-content :is(table, pre) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Tablet: keep the player prominent and move navigation below it. */
@media (min-width: 769px) and (max-width: 1180px) {
    .moon-detail-body .course-content-wrapper {
        grid-template-columns: minmax(260px, 34%) minmax(0, 1fr) !important;
        gap: 1rem !important;
    }

    .moon-detail-body #topics-list-container,
    .moon-detail-body #detail-content-container {
        grid-column: auto !important;
    }

    .drive-detail-body [data-watch-layout] {
        gap: 1rem !important;
    }

    .drive-detail-body .course-sidebar {
        width: min(34vw, 340px) !important;
    }

    .tenschool-detail-body #main-content > .grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.8fr) !important;
        gap: 1rem !important;
    }
}

/* Phone and small tablet */
@media (max-width: 768px) {
    :is(.moon-detail-body, .drive-detail-body, .tenschool-detail-body) {
        --detail-radius: 14px;
        --detail-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.07);
    }

    .moon-detail-body .course-header-grid,
    .drive-detail-body > .max-w-screen-xl > .bg-white:first-of-type,
    .drive-detail-body .course-sidebar,
    .drive-detail-body main[data-watch-content],
    .tenschool-detail-body #main-content [data-watch-content] > .bg-black,
    .tenschool-detail-body #main-content [data-watch-content] > .bg-white,
    .tenschool-detail-body #main-content [data-watch-sidebar] > .bg-white {
        border-radius: 16px !important;
    }

    .moon-detail-body .course-header-grid {
        text-align: left !important;
    }

    .moon-detail-body .course-tabs {
        position: sticky;
        top: 0;
        z-index: 20;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .moon-detail-body .course-tabs::-webkit-scrollbar {
        display: none;
    }

    .moon-detail-body .course-tabs .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .moon-detail-body .topics-list,
    .moon-detail-body .lessons-list-wrapper {
        max-height: none !important;
    }

    .drive-detail-body > .max-w-screen-xl > .bg-white:first-of-type {
        min-height: auto;
        padding: 1rem !important;
    }

    .drive-detail-body .course-sidebar,
    .drive-detail-body main[data-watch-content] {
        padding: 0.9rem !important;
    }

    .drive-detail-body #sidebar-tree-wrap,
    .tenschool-detail-body .lesson-sidebar {
        max-height: 52vh !important;
    }

    .drive-detail-body main[data-watch-content] > .flex.items-start.justify-between {
        align-items: stretch !important;
        flex-direction: column;
    }

    .drive-detail-body main[data-watch-content] > .flex.items-start.justify-between > .flex {
        width: 100%;
    }

    .drive-detail-body #btn-prev,
    .drive-detail-body #btn-next {
        flex: 1;
    }

    .drive-detail-body .player-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .drive-detail-body .player-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .drive-detail-body .file-row {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .tenschool-detail-body > .container {
        padding: 0.8rem !important;
    }

    .tenschool-detail-body #main-content > .grid {
        gap: 0.9rem !important;
    }

    .tenschool-detail-body .video-controls {
        padding: 0.55rem 0.65rem !important;
    }

    .tenschool-detail-body .video-controls .volume-group,
    .tenschool-detail-body .video-controls #time-display {
        display: none !important;
    }

    .tenschool-detail-body .video-controls > .flex {
        gap: 0.5rem;
    }

    .tenschool-detail-body #main-content [data-watch-content] > .bg-black > .bg-gray-900 {
        align-items: stretch;
        gap: 0.75rem;
        flex-direction: column;
    }

    .tenschool-detail-body #current-lesson-title {
        white-space: normal;
    }

    .tenschool-detail-body #main-content [data-watch-content] > .bg-white > .p-5,
    .tenschool-detail-body #main-content [data-watch-sidebar] > .bg-white {
        padding: 1rem !important;
    }
}

@media (max-width: 420px) {
    .moon-detail-body .course-stats span {
        width: 100%;
        justify-content: flex-start;
    }

    .drive-detail-body .filter-btn {
        flex: 1;
        padding-inline: 0.5rem !important;
    }

    .tenschool-detail-body .video-controls button {
        min-width: 36px;
        min-height: 36px;
    }

    .tenschool-detail-body #main-content .tab-btn {
        min-width: 118px;
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.moon-detail-body, .drive-detail-body, .tenschool-detail-body) :is(button, a, .topic-item, .lesson-item, .file-row) {
        transition-duration: 160ms !important;
    }
}


/* Update 2026-07-19-3: direct page integration. */
:is(.drive-detail-body,.tenschool-detail-body) .detail-page-topbar {
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
:is(.drive-detail-body,.tenschool-detail-body) .detail-page-button:focus-visible {
    outline: 3px solid rgba(39,131,222,.38);
    outline-offset: 2px;
}
@media(max-width:768px){
    :is(.drive-detail-body,.tenschool-detail-body) .detail-page-topbar{backdrop-filter:none;-webkit-backdrop-filter:none}
}