:root {
    --bg: #f4f7fb;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --line: rgba(15, 23, 42, 0.08);
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-soft: rgba(37, 99, 235, 0.12);
    --footer: #081121;
    --shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
    --bg: #030712;
    --surface: rgba(15, 23, 42, 0.82);
    --surface-strong: #0f172a;
    --text: #e5eefb;
    --muted: #94a3b8;
    --line: rgba(148, 163, 184, 0.18);
    --accent: #60a5fa;
    --accent-strong: #93c5fd;
    --accent-soft: rgba(96, 165, 250, 0.16);
    --footer: #020617;
    --shadow: 0 28px 70px rgba(2, 6, 23, 0.5);
}

body.public-body,
body.learning-shell {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 35%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 30%),
        var(--bg);
    color: var(--text);
}

body.public-body.courses-page,
body.public-body.softwares-page {
    background: var(--surface-strong) !important;
    background-image: none !important;
}

a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.public-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(22px);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
}

.public-header.is-scrolled { border-color: var(--line); }
.public-nav-wrap { display: flex; align-items: center; gap: 1.5rem; }
.public-nav { display: flex; align-items: center; gap: 1.75rem; }
.public-nav a {
    position: relative;
    padding: .65rem .1rem;
    color: var(--muted);
    transition: .2s ease;
}
.public-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35rem;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.public-nav a:hover {
    color: var(--text);
}
.public-nav a:hover::after,
.public-nav a.is-active::after {
    transform: scaleX(1);
}
.public-nav a.is-active {
    color: var(--text);
}

.public-actions { display: flex; align-items: center; gap: .85rem; }
.theme-button, .cta-button, .ghost-button, .profile-trigger, .public-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 999px;
    transition: .2s ease;
}
.theme-button, .ghost-button, .profile-trigger {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    color: var(--text);
    padding: .85rem 1.05rem;
}
.cta-button {
    padding: .95rem 1.4rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 30%, transparent);
}
.dashboard-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.35rem;
    border: 1px solid var(--accent);
    border-radius: .5rem;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color .2s ease, opacity .2s ease, border-color .2s ease;
}
.ghost-button { padding: .95rem 1.4rem; }
.theme-button:hover, .ghost-button:hover, .profile-trigger:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cta-button:hover { transform: translateY(-1px); }
.dashboard-cta-button:hover {
    background: color-mix(in srgb, var(--accent) 90%, black 10%);
    border-color: color-mix(in srgb, var(--accent) 90%, black 10%);
}
.dashboard-cta-button:disabled {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: color-mix(in srgb, var(--accent) 50%, var(--text));
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}
.dashboard-cta-button:disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        color-mix(in srgb, var(--accent) 8%, transparent) 4px,
        color-mix(in srgb, var(--accent) 8%, transparent) 8px
    );
}

.theme-toggle-floating {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #0f172a;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.12);
}
.theme-toggle-floating:hover {
    background: #fff;
    transform: scale(1.08);
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.15);
}
.theme-toggle-floating svg {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    position: absolute;
}
.theme-toggle-floating .icon-sun { opacity: 0; transform: scale(0.5) rotate(30deg); color: #f59e0b; }
.theme-toggle-floating .icon-moon { opacity: 0; transform: scale(0.5) rotate(-30deg); color: #6366f1; }

/* Light Theme: Show Moon */
html[data-theme="light"] .theme-toggle-floating .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); }
html[data-theme="light"] .theme-toggle-floating .icon-sun { opacity: 0; transform: scale(0.5) rotate(30deg); }

/* Dark Theme (Default): Show Sun + Dark button styling */
html:not([data-theme]) .theme-toggle-floating,
html[data-theme="dark"] .theme-toggle-floating {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(96, 165, 250, 0.15);
    color: #e2e8f0;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3), 0 0 16px rgba(96, 165, 250, 0.1);
}
html:not([data-theme]) .theme-toggle-floating:hover,
html[data-theme="dark"] .theme-toggle-floating:hover {
    background: rgba(30, 41, 59, 0.9);
    transform: scale(1.08);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.4), 0 0 24px rgba(96, 165, 250, 0.2);
}
html:not([data-theme]) .theme-toggle-floating .icon-moon,
html[data-theme="dark"] .theme-toggle-floating .icon-moon { opacity: 0; transform: scale(0.5) rotate(-30deg); }
html:not([data-theme]) .theme-toggle-floating .icon-sun,
html[data-theme="dark"] .theme-toggle-floating .icon-sun { opacity: 1; transform: scale(1) rotate(0deg); color: #fbbf24; }

.public-profile {
    position: relative;
    z-index: 70;
}
.profile-trigger {
    min-height: 3rem;
    padding-inline: 1rem;
    white-space: nowrap;
    border-radius: .25rem;
}
.profile-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .75rem);
    min-width: 220px;
    z-index: 80;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface-strong);
    box-shadow: var(--shadow);
    padding: .55rem;
}
.profile-menu a,
.profile-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: .85rem 1rem;
    border-radius: .8rem;
}
.profile-menu a:hover,
.profile-menu button:hover { background: var(--accent-soft); }
.profile-menu-form { margin: 0; }

.public-nav-toggle {
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--line);
    background: var(--surface);
    flex-direction: column;
}
.public-nav-toggle span {
    width: 1.2rem;
    height: 2px;
    background: var(--text);
    border-radius: 999px;
}

.hero-section, .page-shell, .legal-shell { position: relative; }
.hero-title, .section-heading h1, .section-heading h2, .course-detail-hero h1, .legal-card h1 {
    font-size: clamp(2.8rem, 6vw, 4.7rem);
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--text);
}
.hero-copy, .section-heading p { max-width: 44rem; color: var(--muted); font-size: 1.05rem; line-height: 1.9; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .74rem;
    font-weight: 700;
    color: var(--accent);
}
.hero-visual { position: relative; min-height: 420px; }
.hero-card {
    position: absolute;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 2rem;
    box-shadow: var(--shadow);
}
.hero-card-main { inset: 0 0 2rem 2rem; background: var(--surface); }
.hero-card-main img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-floating {
    right: 0;
    bottom: 0;
    padding: 1.2rem 1.4rem;
    max-width: 260px;
    background: linear-gradient(135deg, #111827, #1e3a8a);
    color: #fff;
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1rem;
}
.hero-stats div, .feature-card, .content-panel, .course-purchase-panel, .legal-card, .empty-state {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 1.6rem;
    box-shadow: var(--shadow);
}
.hero-stats div { padding: 1.2rem; }
.hero-stats strong { display: block; color: var(--text); }
.hero-stats span { color: var(--muted); font-size: .92rem; }

.section-heading { margin-bottom: 2.5rem; }
.feature-card, .content-panel, .course-purchase-panel { padding: 2rem; }
.feature-card h3, .feature-card h2, .content-panel h2, .course-purchase-panel h2, .empty-state h2, .legal-card h2 {
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 700;
}
.feature-card p, .content-panel p, .course-purchase-panel p, .legal-card p, .empty-state p {
    color: var(--muted);
    line-height: 1.8;
}

.course-filters {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr));
}
.course-filters input,
.course-filters select,
[data-course-filters] input,
[data-course-filters] select,
#contact-form input,
#contact-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}

.course-filters select,
[data-course-filters] select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25em;
    padding-right: 2.75rem;
}

html[data-theme="dark"] .course-filters select,
html[data-theme="dark"] [data-course-filters] select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.course-card {
    border-radius: 1.6rem;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.course-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.course-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.course-card:hover img { transform: scale(1.04); }
.course-level, .course-price, .course-category, .badge-soft {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.course-level, .course-price { position: absolute; top: 1rem; padding: .45rem .75rem; }
.course-level { left: 1rem; background: rgba(255,255,255,.85); color: #0f172a; }
html[data-theme="dark"] .course-level { background: rgba(15,23,42,.88); color: #e2e8f0; }
.course-price { right: 1rem; background: rgba(15,23,42,.8); color: #fff; }
.course-card-body { padding: 1.4rem; }
.course-card-body h3 { color: var(--text); font-size: 1.25rem; font-weight: 700; }
.course-card-body p { margin-top: .7rem; color: var(--muted); line-height: 1.7; }
.course-category, .badge-soft {
    padding: .45rem .8rem;
    background: var(--accent-soft);
    color: var(--accent);
}
.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .82rem;
}

.course-detail-hero {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: center;
}
.course-detail-cover img {
    width: 100%;
    border-radius: 2rem;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.course-detail-pills { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); }
.course-detail-pills span, .info-row {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem .9rem;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
}

.accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 1rem;
}
.accordion-panel { display: none; }
.accordion-panel.is-open { display: block; }
.lesson-row {
    margin-top: .85rem;
    padding: .95rem 1rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 1rem;
}
.lesson-row strong { color: var(--text); display: block; }
.lesson-row span { color: var(--muted); }

.preview-modal[hidden] { display: none; }
.preview-modal { position: fixed; inset: 0; z-index: 90; }
.preview-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .75); }
.preview-dialog {
    position: relative;
    width: min(880px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow: auto;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.preview-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.feedback-box {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    background: var(--accent-soft);
    color: var(--text);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}
.field-error { color: #ef4444; font-size: .82rem; margin-top: .45rem; min-height: 1.1rem; }
.empty-state { text-align: center; padding: 2.5rem; }
.legal-shell { padding: 8rem 1rem 5rem; }
.legal-card { max-width: 100%; margin: 0 auto; padding: 2.5rem; }
.legal-card h2 { margin-top: 1.8rem; margin-bottom: .6rem; }

.public-footer {
    margin-top: 4rem;
    background: #2563eb;
    color: #fff;
    padding-top: 4rem;
}
.footer-inner { max-width: 1200px; margin-inline: auto; }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 2rem;
}
@media (min-width: 720px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .footer-grid { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; }
}

.footer-brand { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-logo { display: inline-block; max-width: 170px; }
.footer-logo img { width: 100%; height: auto; display: block; }
.footer-brand p { color: rgba(255, 255, 255, 0.75); line-height: 1.75; max-width: 28rem; }

.footer-col h4 {
    margin-bottom: 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.footer-col li { margin: 0; }
.footer-col a,
.footer-col p {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}
.footer-col a { transition: color .2s ease; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
    margin-top: 3rem;
    padding: 1.75rem 1rem;
    background: #101541;
}
.footer-bottom-inner {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.footer-bottom p { margin: 0; color: #ffffff; font-size: .95rem; }
.footer-bottom-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1.5rem; }
.footer-bottom-links a {
    color: #ffffff;
    font-size: .95rem;
    transition: color .2s ease;
}
.footer-bottom-links a:hover { color: rgba(255, 255, 255, 0.75); }
@media (min-width: 720px) {
    .footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

.learning-app {
    --learning-sidebar-width: 580px;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    background: #f9fafb;
    color: #0f172a;
}
.learning-sidebar {
    width: var(--learning-sidebar-width);
    flex: 0 0 var(--learning-sidebar-width);
    order: 2;
    border-left: 1px solid rgba(226, 232, 240, .9);
    background: #fff;
    padding: 1.2rem;
    overflow-y: auto;
    will-change: margin-right, transform, opacity;
    transition: margin-right 200ms ease,
                opacity 200ms ease,
                transform 200ms ease,
                border-color 200ms ease;
    transform: translateX(0);
    margin-right: 0;
}
.learning-app.is-sidebar-collapsed .learning-sidebar {
    width: var(--learning-sidebar-width);
    flex-basis: var(--learning-sidebar-width);
    margin-right: calc(-1 * var(--learning-sidebar-width));
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    border-left-color: transparent;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(100%);
}
.learning-sidebar-header h1,
.learning-sidebar-header h2 { margin-top: .8rem; font-size: 1.45rem; font-weight: 700; }
.learning-progress { display: flex; justify-content: space-between; margin-top: 1rem; color: #64748b; }
.progress-bar {
    margin-top: .55rem;
    height: .55rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #38bdf8);
}
.learning-sections { margin-top: 1.25rem; display: grid; gap: .9rem; }
.learning-section-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
}
.learning-section-panel { display: none; }
.learning-section-panel.is-open { display: block; }
.lesson-nav-item {
    width: 100%;
    text-align: left;
    margin-top: .85rem;
    padding: .95rem 1rem;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(255,255,255,.03);
    border-radius: 1rem;
}
.lesson-nav-item span { display: block; color: #fff; }
.lesson-nav-item small { color: rgba(255,255,255,.6); }
.lesson-nav-item.is-active { border-color: rgba(96, 165, 250, .6); background: rgba(30, 64, 175, .28); }

.learning-stage { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; flex: 1 1 auto; order: 1; }
.learning-topbar,
.learning-navigation {
    padding: 1rem 1.4rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}
.learning-navigation {
    border-top: 1px solid #e2e8f0;
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
}
.learning-content { padding: 1.4rem; overflow-y: auto; }
.learning-content-wrap { max-width: 1120px; margin: 0 auto; width: 100%; }
.learning-topbar-main,
.learning-topbar-left,
.learning-topbar-right,
.learning-lesson-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.learning-topbar-main { justify-content: space-between; }
.learning-topbar-left,
.learning-topbar-right { min-width: 0; }
.learning-back-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #64748b;
    transition: color .2s ease;
}
.learning-back-link:hover { color: #2563eb; }
.learning-topbar-divider { color: #cbd5e1; }
.learning-course-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learning-inline-progress {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #64748b;
    font-size: .82rem;
}
.progress-bar.compact { width: 7rem; margin-top: 0; }
.cta-button.compact,
.ghost-button.compact { padding: .75rem 1rem; }
.learning-stage-card {
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .18);
    padding: 1.5rem;
}
html[data-theme="dark"] .learning-stage-card {
    background: rgba(15, 23, 42, .95);
    color: #fff;
}
.learning-stage-card + .learning-stage-card { margin-top: 1.25rem; }
.learning-lesson-header {
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.learning-lesson-title {
    margin-top: .85rem;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.05;
    font-weight: 700;
}
.lesson-badge {
    display: inline-flex;
    align-items: center;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.lesson-badge.video { color: #2563eb; background: rgba(37, 99, 235, .1); }
.lesson-badge.article { color: #16a34a; background: rgba(22, 163, 74, .12); }
.lesson-badge.quiz { color: #9333ea; background: rgba(147, 51, 234, .12); }
.learning-media-shell { margin-top: .75rem; }
.learning-copy { color: inherit; }
.legacy-learning-sidebar { box-shadow: -10px 0 30px rgba(15, 23, 42, .04); }

html[data-theme="dark"] .learning-app {
    background: #020617;
    color: #fff;
}
html[data-theme="dark"] .learning-sidebar {
    border-left-color: rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .92);
}
html[data-theme="dark"] .learning-progress,
html[data-theme="dark"] .learning-inline-progress,
html[data-theme="dark"] .learning-back-link {
    color: rgba(255,255,255,.74);
}
html[data-theme="dark"] .learning-back-link:hover { color: #fff; }
html[data-theme="dark"] .progress-bar { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .learning-section-trigger {
    background: rgba(255,255,255,.04);
    color: #fff;
    border-color: rgba(148, 163, 184, .16);
}
html[data-theme="dark"] .learning-topbar,
html[data-theme="dark"] .learning-navigation {
    background: rgba(15, 23, 42, .92);
    border-color: rgba(148, 163, 184, .12);
}
html[data-theme="dark"] .learning-topbar-divider { color: rgba(148, 163, 184, .35); }
html[data-theme="dark"] .legacy-learning-sidebar { box-shadow: none; }
.video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, .12);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.quiz-question legend { color: var(--text); font-size: 1.1rem; font-weight: 700; }
.quiz-option {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .95rem 1rem;
}

@media (max-width: 1024px) {
    .public-nav-wrap {
        position: absolute;
        left: 1rem;
        right: 1rem;
        top: calc(100% + .75rem);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        background: var(--surface-strong);
        border: 1px solid var(--line);
        border-radius: 1.5rem;
        box-shadow: var(--shadow);
        display: none;
    }
    .public-nav-wrap.is-open { display: flex; }
    .public-nav { flex-direction: column; align-items: stretch; }
    .public-actions { flex-direction: column; align-items: stretch; }
    .course-filters, .course-detail-hero { grid-template-columns: 1fr; }
    .hero-stats { grid-template-columns: 1fr; }
    .learning-sidebar {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(480px, 92vw);
        flex-basis: min(480px, 92vw);
        padding: 1.2rem;
        opacity: 0;
        transform: translateX(calc(100% + 1rem));
        z-index: 60;
        pointer-events: none;
    }
    .learning-app.is-sidebar-collapsed .learning-sidebar {
        width: min(480px, 92vw);
        flex-basis: min(480px, 92vw);
        padding: 1.2rem;
        border-left-color: rgba(226, 232, 240, .9);
    }
    html[data-theme="dark"] .learning-app.is-sidebar-collapsed .learning-sidebar {
        border-left-color: rgba(148, 163, 184, .16);
    }
    .learning-sidebar.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
    .learning-topbar-main,
    .learning-topbar-left,
    .learning-topbar-right,
    .learning-lesson-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .learning-inline-progress { width: 100%; justify-content: space-between; }
    .progress-bar.compact { flex: 1 1 auto; width: auto; }
}