/* ============================================================
   MATRIX ACADEMY — PREMIUM BRAND SYSTEM v12
   Palette: White / Baby Blue / Ink Black
   No dark mode, no purple, no neon gradients.
   ============================================================ */

:root,
[data-theme="light"] {
    --bg-primary: #f7fbff !important;
    --bg-secondary: #ffffff !important;
    --bg-card: #ffffff !important;
    --text-primary: #0b1724 !important;
    --text-secondary: #536579 !important;
    --accent-primary: #1477b9 !important;
    --accent-secondary: #a9def8 !important;
    --accent-gradient: linear-gradient(135deg,#1477b9,#78c9ee) !important;
    --baby-blue: #c9edff !important;
    --ink: #0b1724 !important;
    --soft-blue: #eaf7ff !important;
    --line: #d8e8f2 !important;
    --glass-bg: rgba(255,255,255,.94) !important;
    --glass-border: #d9e8f1 !important;
    --shadow-sm: 0 3px 12px rgba(11,23,36,.06) !important;
    --shadow-md: 0 12px 32px rgba(11,23,36,.09) !important;
    --shadow-lg: 0 22px 60px rgba(11,23,36,.12) !important;
    --shadow-glow: 0 12px 35px rgba(20,119,185,.14) !important;
    --border-radius: 18px !important;
    --border-radius-sm: 12px !important;
    --border-radius-lg: 26px !important;
}

/* Dark theme tokens — never inherit the light palette. */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary:#071522 !important;
    --bg-secondary:#0b1f33 !important;
    --bg-card:#0d2236 !important;
    --text-primary:#f1f7fb !important;
    --text-secondary:#aec2cf !important;
    --accent-primary:#29a9f0 !important;
    --accent-secondary:#8bd8fb !important;
    --accent-gradient:linear-gradient(135deg,#1687d9,#29a9f0) !important;
    --baby-blue:#173b53 !important;
    --ink:#f1f7fb !important;
    --soft-blue:#102d42 !important;
    --line:rgba(157,207,234,.16) !important;
    --glass-bg:rgba(13,34,54,.92) !important;
    --glass-border:rgba(157,207,234,.16) !important;
    --shadow-sm:0 8px 24px rgba(0,0,0,.20) !important;
    --shadow-md:0 16px 42px rgba(0,0,0,.28) !important;
    --shadow-lg:0 26px 70px rgba(0,0,0,.38) !important;
    --shadow-glow:0 14px 40px rgba(41,169,240,.14) !important;
}

html[data-theme="dark"] { background:#071522 !important; }
body {
    background:
      radial-gradient(circle at 10% 0%, rgba(201,237,255,.42), transparent 28%),
      #f7fbff !important;
    color:var(--ink) !important;
    font-weight:500 !important;
    line-height:1.75 !important;
}
h1,h2,h3,h4,h5,h6 { color:var(--ink) !important; letter-spacing:-.02em; }
p,span,label,li { color:inherit; }

/* ---------- Loading ---------- */
.loading-screen {
    background:#ffffff !important;
    color:var(--ink) !important;
    transform:none !important;
}
.loading-container { width:min(520px,88vw); }
.loading-logo-wrap {
    width:190px !important;
    height:190px !important;
    margin:0 auto 24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:34px !important;
    background:#ffffff !important;
    box-shadow:0 18px 50px rgba(20,119,185,.10) !important;
}
.loading-logo-img {
    width:170px !important;
    height:170px !important;
    object-fit:contain !important;
    filter:none !important;
    animation:none !important;
}
.loading-text h1,
.loading-text .glitch-text,
.glitch-text {
    color:var(--ink) !important;
    background:none !important;
    -webkit-text-fill-color:var(--ink) !important;
    animation:none !important;
    text-shadow:none !important;
}
.glitch-text::before,.glitch-text::after { display:none !important; }
.loading-subtitle {
    color:#1477b9 !important;
    font-size:1.05rem !important;
    font-weight:800 !important;
    margin-top:8px !important;
}
.loading-bar-container { margin-top:26px !important; }
.loading-bar {
    height:7px !important;
    background:#e7f4fb !important;
    border:1px solid #d6eaf4 !important;
    box-shadow:none !important;
}
.loading-bar-fill {
    background:#1477b9 !important;
    box-shadow:none !important;
}
.loading-percent { color:#5a7186 !important; font-weight:700 !important; }

/* ---------- Top bar / navbar ---------- */
.top-bar {
    background:#ffffff !important;
    color:#536579 !important;
    border-bottom:1px solid var(--line) !important;
    min-height:44px !important;
    padding:7px clamp(18px,4vw,60px) !important;
}
.top-bar .date-time { color:#536579 !important; font-weight:600 !important; }
.navbar {
    background:rgba(255,255,255,.97) !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:0 8px 30px rgba(11,23,36,.05) !important;
    backdrop-filter:blur(18px) !important;
}
.nav-container {
    min-height:82px !important;
    max-width:1320px !important;
    padding:0 28px !important;
}
.nav-logo { gap:0 !important; }
.nav-logo-img {
    width:106px !important;
    height:68px !important;
    object-fit:contain !important;
    filter:none !important;
}
.nav-links { gap:7px !important; }
.nav-link {
    color:#31465a !important;
    border-radius:11px !important;
    padding:10px 14px !important;
    font-weight:700 !important;
}
.nav-link i { color:#1477b9 !important; }
.nav-link:hover {
    background:#eef9ff !important;
    color:#0b1724 !important;
}
.nav-link.active {
    background:#c9edff !important;
    color:#0b1724 !important;
    box-shadow:none !important;
}
.btn-icon {
    background:#f1f8fc !important;
    color:#1477b9 !important;
    border:1px solid #d8e8f1 !important;
}
.currency-selector select {
    background:#ffffff !important;
    color:#0b1724 !important;
    border:1px solid #d8e8f1 !important;
}

/* ---------- Global cards ---------- */
.glass-card,
.subject-card,
.course-card,
.offer-card,
.teacher-card,
.review-card {
    background:#ffffff !important;
    border:1px solid #d9e8f1 !important;
    box-shadow:var(--shadow-sm) !important;
    backdrop-filter:none !important;
}
.glass-card:hover,
.subject-card:hover,
.course-card:hover,
.offer-card:hover,
.teacher-card:hover,
.review-card:hover {
    border-color:#a9def8 !important;
    box-shadow:0 18px 44px rgba(20,119,185,.10) !important;
    transform:translateY(-4px);
}
.btn {
    border-radius:12px !important;
    font-weight:800 !important;
    min-height:46px !important;
    box-shadow:none !important;
}
.btn-primary {
    background:#1477b9 !important;
    color:#fff !important;
    border:1px solid #1477b9 !important;
}
.btn-primary:hover {
    background:#0e6097 !important;
    transform:translateY(-1px);
}
.btn-success { background:#0b1724 !important; color:#fff !important; }
.btn-danger { background:#b83b3b !important; }

/* ---------- Hero ---------- */
.hero-section {
    min-height:650px !important;
    background:#dff4ff !important;
}
.hero-video {
    filter:saturate(.75) brightness(.88) !important;
}
.hero-video-overlay {
    background:linear-gradient(90deg,rgba(247,251,255,.26) 0%,rgba(247,251,255,.18) 46%,rgba(247,251,255,.12) 100%) !important;
}
.hero-video-mark-cover {
    position:absolute !important;
    right:0;
    bottom:0;
    width:145px;
    height:105px;
    z-index:1;
    border-radius:18px;
    background:rgba(247,251,255,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px) saturate(.85);
    -webkit-backdrop-filter:blur(14px) saturate(.85);
    box-shadow:0 0 28px rgba(235,247,253,.28);
    pointer-events:none;
}

.hero-content {
    max-width:720px !important;
    margin-inline:auto !important;
    padding:70px 28px !important;
}
.hero-badge {
    display:inline-flex !important;
    background:#ffffff !important;
    color:#1477b9 !important;
    border:1px solid #c9edff !important;
    box-shadow:0 8px 24px rgba(20,119,185,.08) !important;
}
.hero-title {
    color:#0b1724 !important;
    text-shadow:none !important;
}
.education-systems { gap:20px !important; margin-top:28px !important; }
.system-logo {
    background:#ffffff !important;
    border:1px solid #d9e8f1 !important;
    box-shadow:0 8px 24px rgba(11,23,36,.07) !important;
    border-radius:14px !important;
    padding:9px 16px !important;
}

/* ---------- Section headings ---------- */
.section-title {
    color:#0b1724 !important;
    font-weight:900 !important;
}
.section-subtitle { color:#5c7184 !important; }
.section-header::after,
.section-title::after { background:#1477b9 !important; }

/* ---------- Subjects ---------- */
#page-subjects,
#page-offers,
#page-teachers,
#page-reviews,
#page-faq,
#page-contact,
#page-courses {
    background:#f7fbff !important;
}
.subjects-grid,
.offers-grid,
.teachers-grid,
.reviews-grid {
    gap:26px !important;
}
.subject-card {
    overflow:hidden !important;
    padding:0 !important;
    cursor:pointer;
}
.subject-image-wrap {
    height:245px !important;
    padding:0 !important;
    background:#eef9ff !important;
    border-bottom:1px solid #d9e8f1 !important;
}
.subject-image {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}
.subject-card-content {
    padding:24px 24px 28px !important;
    text-align:center !important;
}
.subject-card-content h3 {
    font-size:1.55rem !important;
    margin-bottom:6px !important;
    color:#0b1724 !important;
}
.subject-card-content p {
    color:#64798a !important;
}

/* ---------- Courses ---------- */
.premium-course-header {
    min-height:190px !important;
    display:flex !important;
    align-items:stretch !important;
    padding:0 !important;
    background:#eef9ff !important;
    color:#0b1724 !important;
}
.course-subject-image {
    width:42% !important;
    min-width:42% !important;
    height:190px !important;
    object-fit:cover !important;
}
.course-header-copy {
    padding:24px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:6px !important;
}
.course-header-copy h3 { color:#0b1724 !important; margin:0 !important; }
.course-header-copy small { color:#6a7f90 !important; }
.course-type {
    display:inline-flex !important;
    width:max-content !important;
    background:#c9edff !important;
    color:#0b1724 !important;
    border:1px solid #a9def8 !important;
    border-radius:999px !important;
    padding:5px 10px !important;
}
.course-card-body { padding:24px !important; }
.course-info-item {
    border-bottom:1px solid #edf3f7 !important;
    padding:9px 0 !important;
}
.course-info-item i { color:#1477b9 !important; }
.course-price { color:#1477b9 !important; }
.course-card-footer { padding:0 24px 24px !important; }

/* ---------- Offers ---------- */
.premium-offer-card { overflow:hidden !important; padding:0 !important; }
.offer-media {
    position:relative !important;
    height:235px !important;
    background:#eef9ff !important;
    overflow:hidden !important;
}
.offer-media img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}
.offer-media::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(11,23,36,.34));
    pointer-events:none;
}
.offer-badge {
    position:absolute !important;
    top:16px !important;
    right:16px !important;
    z-index:2 !important;
    background:#ffffff !important;
    color:#1477b9 !important;
    border:1px solid #d9e8f1 !important;
    border-radius:999px !important;
    padding:7px 12px !important;
    font-weight:800 !important;
}
.offer-content { padding:25px !important; }
.offer-kicker {
    color:#1477b9 !important;
    font-size:.78rem !important;
    font-weight:800 !important;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.offer-content h3 { margin:7px 0 8px !important; }
.offer-content p { color:#607688 !important; }
.offer-meta {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:18px 0 !important;
}
.offer-meta span {
    background:#f2f9fd !important;
    border:1px solid #e0edf4 !important;
    color:#314b60 !important;
    border-radius:999px !important;
    padding:7px 10px !important;
    font-size:.78rem !important;
}
.offer-meta i { color:#1477b9 !important; margin-inline-end:5px !important; }
.offer-feature {
    display:flex !important;
    gap:9px !important;
    align-items:center !important;
    padding:6px 0 !important;
    color:#41586b !important;
}
.offer-feature i { color:#1477b9 !important; }
.offer-pricing {
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin:18px 0 !important;
}
.offer-pricing strong { font-size:1.55rem !important; color:#0b1724 !important; }
.offer-saving { color:#1477b9 !important; font-weight:800 !important; }

/* ---------- Teachers ---------- */
.teacher-avatar {
    width:74px !important;
    height:74px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:#c9edff !important;
    border:1px solid #a9def8 !important;
    box-shadow:none !important;
}

/* ---------- Footer ---------- */
footer,
.site-footer {
    background:#0b1724 !important;
    color:#ffffff !important;
    border-top:1px solid #1e3345 !important;
}
footer h3, footer h4, footer p, footer span, footer a { color:#ffffff !important; }
footer a:hover { color:#a9def8 !important; }
.social-links a,
.social-icon {
    background:#ffffff !important;
    color:#0b1724 !important;
    border:1px solid #d9e8f1 !important;
    box-shadow:none !important;
}
.social-links a:hover,
.social-icon:hover { background:#c9edff !important; color:#0b1724 !important; }

/* ---------- Forms / auth ---------- */
input,select,textarea {
    background:#ffffff !important;
    color:#0b1724 !important;
    border:1px solid #cfe2ec !important;
    border-radius:12px !important;
}
input:focus,select:focus,textarea:focus {
    border-color:#1477b9 !important;
    box-shadow:0 0 0 4px rgba(20,119,185,.09) !important;
    outline:none !important;
}
.auth-card,.login-card,.register-card {
    background:#ffffff !important;
    border:1px solid #d9e8f1 !important;
    box-shadow:0 20px 60px rgba(11,23,36,.09) !important;
}

/* ---------- Admin ---------- */
.admin-sidebar,
.admin-nav,
.admin-header {
    background:#ffffff !important;
    border-color:#d9e8f1 !important;
}
.admin-link { color:#344c60 !important; }
.admin-link:hover,.admin-link.active {
    background:#eef9ff !important;
    color:#1477b9 !important;
}
.admin-section-title { color:#0b1724 !important; }
.admin-card,.admin-panel,.dashboard-card {
    background:#ffffff !important;
    border:1px solid #d9e8f1 !important;
    box-shadow:var(--shadow-sm) !important;
}
.badge,.status-badge {
    border-radius:999px !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .nav-container { padding:0 16px !important; }
    .nav-logo-img { width:90px !important; }
    .nav-links {
        background:#ffffff !important;
        border:1px solid #d9e8f1 !important;
        box-shadow:0 20px 50px rgba(11,23,36,.12) !important;
    }
    .hero-section { min-height:590px !important; }
    .hero-video-mark-cover { right:12px; bottom:12px; width:82px; height:62px; border-radius:14px; }
    .hero-content { padding:52px 20px !important; }
    .education-systems { gap:10px !important; flex-wrap:wrap !important; }
    .system-logo { padding:7px 11px !important; }
    .subject-image-wrap { height:210px !important; }
    .premium-course-header { min-height:160px !important; }
    .course-subject-image { height:160px !important; }
}

/* Social brand icons: keep TikTok visible even if Font Awesome is unavailable. */
.social-link.tiktok { background:#0b1724 !important; color:#fff !important; }
.social-link.tiktok .tiktok-svg { width:20px !important; height:20px !important; display:block !important; fill:currentColor !important; }
.social-link.tiktok:hover { background:#000 !important; color:#c9edff !important; }
/* Never show a broken-image icon while the subject card is loading. */
.subject-image, .course-subject-image { background:#eef9ff !important; }


/* ---------- Matrix Academy final visual cleanup ---------- */
.hero-section {
    background:#eaf7ff !important;
}
.hero-video {
    filter: blur(3.8px) saturate(.72) brightness(.72) contrast(1.03) !important;
    transform:scale(1.055) !important;
}
.hero-video-overlay {
    background:
      linear-gradient(90deg,
        rgba(238,248,255,.48) 0%,
        rgba(238,248,255,.30) 34%,
        rgba(238,248,255,.12) 66%,
        rgba(7,18,30,.18) 100%) !important;
}
/* The old white watermark rectangle is intentionally disabled. The video
   itself is softly blurred so the generated-video mark is not readable. */
.hero-video-mark-cover { display:none !important; }
.hero-content { max-width:900px !important; }
.hero-title,
.hero-title span,
.hero-desc {
    color:#071a2b !important;
    text-shadow:0 2px 14px rgba(255,255,255,.55) !important;
}
.hero-title { font-weight:900 !important; letter-spacing:-.03em !important; }
.hero-desc { font-weight:700 !important; }
.hero-badge {
    background:rgba(255,255,255,.90) !important;
    color:#0c6fbb !important;
    border-color:#bfe4f8 !important;
}
.stat-card {
    background:rgba(255,255,255,.94) !important;
    color:#071a2b !important;
    border-color:#cbe8f7 !important;
}
.stat-card .stat-number { color:#0877c9 !important; }
.stat-card .stat-label { color:#49647a !important; }
.hero-buttons .btn-primary { background:#0877c9 !important; color:#fff !important; }
.hero-buttons .btn-whatsapp { background:#16b95f !important; color:#fff !important; }

/* Keep the supplied TikTok SVG visible even when Font Awesome fails. */
.social-link.tiktok { background:#07131f !important; color:#fff !important; }
.social-link.tiktok .tiktok-svg { width:21px !important; height:21px !important; display:block !important; fill:currentColor !important; }

/* Subject visuals: no broken-image placeholder if an old record has a bad URL. */
.subject-image-wrap { background:#eaf7ff !important; }
.subject-image { object-fit:cover !important; }


/* ============================================================
   MATRIX ACADEMY — FINAL PREMIUM POLISH
   ============================================================ */
:root {
  --deep-navy:#071522 !important;
  --primary-navy:#0B1F33 !important;
  --premium-blue:#1687D9 !important;
  --bright-blue:#29A9F0 !important;
  --light-bg:#F4F8FC !important;
  --dark-text:#102A43 !important;
  --secondary-text:#60758A !important;
  --whatsapp:#16B86A !important;
}
body { background:#F4F8FC !important; color:#102A43 !important; }
.hero-section { background:#071522 !important; overflow:hidden !important; }
.hero-video { filter:brightness(.72) saturate(.82) contrast(1.03) blur(.35px) !important; transform:scale(1.012) !important; }
.hero-video-overlay { background:linear-gradient(90deg,rgba(7,21,34,.82),rgba(7,21,34,.52) 52%,rgba(7,21,34,.30)) !important; }
.hero-video-mark-cover { width:210px !important;height:125px !important;background:rgba(7,21,34,.38) !important;backdrop-filter:blur(18px) !important;box-shadow:none !important; }
.navbar { background:#fff !important; border-bottom:1px solid rgba(11,31,51,.08) !important; box-shadow:0 8px 26px rgba(7,21,34,.055) !important; }
.nav-container { max-width:1360px !important; min-height:76px !important; }
.nav-link.active { background:#EAF6FD !important; color:#0B1F33 !important; box-shadow:inset 0 -2px #1687D9 !important; }
.glass-card,.subject-card,.course-card,.offer-card,.teacher-card,.review-card { border:1px solid rgba(11,31,51,.08) !important; box-shadow:0 10px 30px rgba(7,21,34,.055) !important; border-radius:18px !important; }
.btn-primary { background:linear-gradient(135deg,#1687D9,#29A9F0) !important; border:0 !important; box-shadow:0 10px 22px rgba(22,135,217,.18) !important; }
.btn-primary:hover { transform:translateY(-2px) !important; box-shadow:0 14px 28px rgba(22,135,217,.23) !important; }
.btn-whatsapp { background:#16B86A !important; color:#fff !important; border:0 !important; }
.section-title,.admin-section-title { color:#0B1F33 !important; font-weight:800 !important; }
.section-title::after { background:#1687D9 !important; }
.quiz-shell { width:100%; }
.quiz-topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.quiz-back-btn { min-height:42px !important; background:#fff !important; border:1px solid rgba(11,31,51,.10) !important; color:#102A43 !important; }
.quiz-timer { min-width:118px; text-align:center; padding:10px 15px; border-radius:12px; background:#071522; color:#fff; font-weight:900; letter-spacing:.04em; box-shadow:0 8px 20px rgba(7,21,34,.12); }
.quiz-timer.is-warning { background:#1687D9; }
.quiz-timer.is-expired { background:#60758A; }
.quiz-source-badge { display:inline-flex; margin-top:10px; padding:7px 11px; border-radius:999px; background:#EAF6FD; color:#1687D9; font-size:.82rem; font-weight:800; }
@media(max-width:640px){ .quiz-topbar{align-items:stretch}.quiz-back-btn{flex:1}.quiz-timer{min-width:100px}.quiz-container{padding:18px !important}.quiz-question-card{padding:22px !important} }

/* ---------- V30 AI assessment premium layer ---------- */
.quiz-shell { max-width: 920px !important; }
.quiz-topbar { padding: 14px 16px !important; border: 1px solid #d8e8f2 !important; border-radius: 18px !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 12px 35px rgba(11,23,36,.07) !important; }
.quiz-header { padding: 28px 4px 12px !important; }
.quiz-kicker { color:#1477b9 !important; font-size:.76rem !important; font-weight:800 !important; letter-spacing:.12em !important; margin-bottom:8px !important; }
.quiz-header h2 { font-size:clamp(1.45rem,3vw,2.1rem) !important; font-weight:800 !important; }
.quiz-header h2 span { color:#60758A !important; font-weight:600 !important; }
.quiz-source-badge { display:inline-flex !important; margin-top:12px !important; padding:8px 12px !important; border-radius:999px !important; background:#eaf7ff !important; color:#0b5f91 !important; border:1px solid #c9e8f7 !important; font-size:.82rem !important; font-weight:700 !important; }
.quiz-question-card { border:1px solid rgba(11,31,51,.09) !important; border-radius:22px !important; background:#fff !important; box-shadow:0 18px 50px rgba(11,31,51,.08) !important; padding:34px !important; }
.quiz-question-number { color:#1477b9 !important; font-size:.75rem !important; font-weight:800 !important; letter-spacing:.14em !important; margin-bottom:12px !important; }
.quiz-question-card h3 { font-size:clamp(1.15rem,2.3vw,1.55rem) !important; line-height:1.55 !important; color:#0b1724 !important; font-weight:750 !important; }
.quiz-option { border:1px solid #d8e8f2 !important; background:#f9fcff !important; border-radius:15px !important; padding:16px 18px !important; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important; }
.quiz-option:hover { transform:translateY(-2px) !important; border-color:#8fcff0 !important; box-shadow:0 8px 24px rgba(20,119,185,.10) !important; }
.quiz-option.selected { border-color:#1687D9 !important; background:#eaf7ff !important; box-shadow:0 8px 24px rgba(20,119,185,.12) !important; }
.quiz-diagram { margin:24px auto 8px; padding:18px; max-width:720px; background:#fff; border:1px solid #d8e8f2; border-radius:18px; overflow:auto; box-shadow:0 8px 24px rgba(11,31,51,.05); }
.quiz-diagram svg { display:block; width:100%; max-height:420px; height:auto; margin:auto; }
.quiz-timer { min-width:118px !important; text-align:center !important; font-variant-numeric:tabular-nums !important; font-weight:800 !important; border:1px solid #c9e8f7 !important; background:#eaf7ff !important; color:#0b5f91 !important; border-radius:14px !important; padding:10px 14px !important; }
.quiz-timer.is-warning { color:#9a6200 !important; background:#fff8e6 !important; border-color:#f0d69a !important; }
.quiz-timer.is-expired { color:#8b3d3d !important; background:#fff1f1 !important; border-color:#edc5c5 !important; }

/* ============================================================
   MATRIX ACADEMY — FINAL FRONTEND TOUCH v31
   Focus: readability, hierarchy, premium contrast.
   ============================================================ */
:root {
  --matrix-ink:#0A1B2B !important;
  --matrix-navy:#071522 !important;
  --matrix-blue:#1687D9 !important;
  --matrix-cyan:#38BDF8 !important;
  --matrix-surface:#FFFFFF !important;
  --matrix-muted:#61788D !important;
}

.hero-section {
  min-height:700px !important;
  background:#071522 !important;
  isolation:isolate !important;
}
.hero-video {
  filter:brightness(.58) saturate(.72) contrast(1.06) blur(1.2px) !important;
  transform:scale(1.035) !important;
}
.hero-video-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(7,21,34,.18) 0%, rgba(7,21,34,.48) 62%, rgba(7,21,34,.72) 100%),
    linear-gradient(90deg, rgba(7,21,34,.78) 0%, rgba(7,21,34,.48) 48%, rgba(7,21,34,.62) 100%) !important;
}
.hero-video-mark-cover { display:none !important; }
.hero-content {
  max-width:980px !important;
  padding:64px 28px !important;
  text-align:center !important;
}
.hero-title,
.hero-title span,
.hero-desc {
  color:#FFFFFF !important;
  text-shadow:0 3px 18px rgba(0,0,0,.38) !important;
}
.hero-title {
  font-size:clamp(2.4rem,5vw,4.25rem) !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  margin-bottom:16px !important;
}
.hero-desc {
  color:rgba(255,255,255,.86) !important;
  font-size:1.08rem !important;
  line-height:1.75 !important;
  max-width:720px !important;
  margin:0 auto !important;
}
.education-systems { margin:26px 0 !important; }
.system-logo {
  width:132px !important;
  height:64px !important;
  background:rgba(255,255,255,.97) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(10px) !important;
}
.stat-card {
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  color:var(--matrix-ink) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.18) !important;
  border-radius:18px !important;
}
.stat-card .stat-number { color:#0D7CC7 !important; }
.stat-card .stat-label { color:#50677A !important; }
.hero-buttons .btn-primary {
  background:linear-gradient(135deg,#1687D9,#35B8F2) !important;
  border:0 !important;
  box-shadow:0 12px 28px rgba(22,135,217,.28) !important;
}
.hero-buttons .btn-whatsapp { box-shadow:0 12px 28px rgba(22,184,106,.22) !important; }

body { color:var(--matrix-ink) !important; }
h1,h2,h3,h4,h5,strong { color:var(--matrix-ink); }
p,.section-subtitle { color:var(--matrix-muted); }
.glass-card,.subject-card,.course-card,.offer-card,.teacher-card,.review-card {
  background:#fff !important;
  border:1px solid #DCE8F0 !important;
  box-shadow:0 12px 34px rgba(7,21,34,.065) !important;
}

.ai-generate-btn {
  min-height:58px !important;
  border-radius:16px !important;
  font-size:1rem !important;
  background:linear-gradient(135deg,#147BC5,#28A9ED) !important;
  box-shadow:0 14px 30px rgba(20,123,197,.20) !important;
}
.ai-source-box {
  border-radius:16px !important;
  border:1px solid #D5E8F3 !important;
  background:#F7FBFE !important;
}

.quiz-shell { max-width:980px !important; }
.quiz-topbar {
  position:sticky !important;
  top:12px !important;
  z-index:20 !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(14px) !important;
  border:1px solid #D9E8F1 !important;
  box-shadow:0 12px 34px rgba(7,21,34,.09) !important;
}
.quiz-question-card h3 { color:#0A1B2B !important; font-weight:800 !important; letter-spacing:-.01em !important; }
.quiz-option { color:#17354B !important; background:#FBFDFF !important; font-weight:650 !important; }
.quiz-option.selected { color:#083E63 !important; background:#EAF6FD !important; }
.quiz-diagram { background:#FFFFFF !important; border:1px solid #D7E6EF !important; }
.quiz-diagram svg text { font-family:Arial,sans-serif !important; }

@media (max-width:700px) {
  .hero-section { min-height:650px !important; }
  .hero-content { padding:48px 18px !important; }
  .hero-title { font-size:clamp(2rem,9vw,3rem) !important; }
  .quiz-topbar { position:relative !important; top:auto !important; }
}

/* ===== Matrix Academy V32 premium placement/pricing layer ===== */
.course-price.assessment-price{font-size:1.35rem;line-height:1.25;letter-spacing:-.02em;background:linear-gradient(135deg,#1266d6,#20a4e8);-webkit-background-clip:text;background-clip:text;color:transparent;}
.course-price-note{color:var(--text-secondary);font-size:.82rem;line-height:1.55;margin-top:6px;max-width:330px;}
.assessment-price-admin{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(26,115,232,.08);color:#1266d6;font-weight:800;font-size:.8rem;}
.assessment-offer-pricing{display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.offer-assessment-note{font-size:.78rem;color:var(--text-secondary);line-height:1.45;}.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:900;color:#1687d9;display:block;margin-bottom:5px;}.empty-state{text-align:center;padding:42px 20px;color:var(--text-secondary);}
.empty-state-icon{font-size:2.6rem;margin-bottom:8px;}
.notifications-list{display:grid;gap:12px;}
.notification-card{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:16px;background:rgba(255,255,255,.84);border:1px solid rgba(20,119,185,.11);margin:8px 0;}
.notification-card.success{border-color:rgba(39,174,96,.2);}
.notification-card.warning{border-color:rgba(243,156,18,.22);}
.notification-card p{margin:4px 0;color:var(--text-secondary);line-height:1.5;}
.notification-card small{color:#8795a5;}
.notification-dot{width:9px;height:9px;border-radius:50%;background:#1687d9;margin-top:7px;flex:0 0 auto;box-shadow:0 0 0 5px rgba(22,135,217,.08);}
.notification-card.success .notification-dot{background:#27ae60;box-shadow:0 0 0 5px rgba(39,174,96,.08);}
.notification-card.warning .notification-dot{background:#f39c12;box-shadow:0 0 0 5px rgba(243,156,18,.08);}
@media(max-width:700px){}

/* ============================================================
   MATRIX ACADEMY — ART-DIRECTED EXPERIENCE LAYER
   Homepage / loading / subjects / courses / reviews
   ============================================================ */
:root {
  --mx-navy:#071b35 !important;
  --mx-blue:#1687d9 !important;
  --mx-blue-2:#4bb9f3 !important;
  --mx-baby:#eaf7ff !important;
  --mx-line:#dcebf5 !important;
  --mx-muted:#63788c !important;
}

body { background:#f7fbff !important; color:var(--mx-navy) !important; }
.main-app { min-height:100vh; background:#f7fbff; }

/* Loading: score progression, no fake percentage meter */
.loading-screen {
  isolation:isolate !important;
  background:linear-gradient(135deg,#fff 0%,#f9fdff 48%,#eef9ff 100%) !important;
  color:var(--mx-navy) !important;
  transition:opacity .52s ease, transform .52s cubic-bezier(.22,.8,.2,1) !important;
}
.loading-screen::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(22,135,217,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(22,135,217,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center,black 0%,transparent 68%);
}
.loading-network { position:absolute; inset:0; pointer-events:none; opacity:.35; background:radial-gradient(circle at 50% 42%,rgba(75,185,243,.18),transparent 25%), radial-gradient(circle at 20% 70%,rgba(22,135,217,.10),transparent 18%), radial-gradient(circle at 80% 25%,rgba(22,135,217,.08),transparent 18%); }
.loading-orbit { position:absolute; border:1px solid rgba(22,135,217,.10); border-radius:50%; pointer-events:none; }
.loading-orbit-a { width:min(58vw,680px); aspect-ratio:1; animation:loadingOrbit 14s linear infinite; }
.loading-orbit-b { width:min(34vw,400px); aspect-ratio:1; animation:loadingOrbit 9s linear infinite reverse; }
@keyframes loadingOrbit { to { transform:rotate(360deg); } }
.loading-container { width:min(480px,88vw) !important; position:relative; z-index:2; text-align:center; }
.loading-logo-wrap { width:136px !important; height:136px !important; margin:0 auto 20px !important; border-radius:34px !important; background:rgba(255,255,255,.82) !important; border:1px solid rgba(22,135,217,.10) !important; box-shadow:0 20px 70px rgba(22,135,217,.12) !important; animation:loadingLogoIn .8s cubic-bezier(.22,.8,.2,1) both; }
.loading-logo-img { width:112px !important; height:112px !important; }
@keyframes loadingLogoIn { from{opacity:0;transform:translateY(12px) scale(.94)} to{opacity:1;transform:none} }
.loading-kicker { font:800 .72rem/1 Poppins,sans-serif; letter-spacing:.24em; color:#5b7790; margin-bottom:8px; }
.loading-score { font:900 clamp(4rem,10vw,6.5rem)/.92 Poppins,sans-serif; letter-spacing:-.08em; color:var(--mx-navy); text-shadow:0 12px 38px rgba(22,135,217,.12); }
.loading-score.is-changing { animation:scoreReveal .26s ease both; }
@keyframes scoreReveal { from{opacity:.15;transform:translateY(8px) scale(.96);filter:blur(3px)} to{opacity:1;transform:none;filter:none} }
.loading-tagline { margin:12px 0 24px !important; color:#4d6a82 !important; font-size:1rem !important; font-weight:700 !important; }
.loading-progress-line { height:2px; width:190px; margin:0 auto; overflow:hidden; background:#dfeef7; border-radius:999px; }
.loading-progress-line span { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,var(--mx-blue),var(--mx-blue-2)); transition:transform .22s ease; }
[dir="rtl"] .loading-progress-line span { transform-origin:right center; }
.loading-screen.is-complete .loading-logo-wrap { transform:scale(.98); box-shadow:0 12px 40px rgba(22,135,217,.10); }
.loading-screen.is-complete { opacity:0; transform:scale(1.018); }

/* Header */
.top-bar { min-height:38px !important; padding:6px clamp(18px,4vw,56px) !important; background:#fbfdff !important; }
.navbar { top:38px !important; background:rgba(255,255,255,.88) !important; backdrop-filter:blur(22px) saturate(1.1) !important; -webkit-backdrop-filter:blur(22px) saturate(1.1) !important; border-bottom:1px solid rgba(11,31,51,.07) !important; box-shadow:0 10px 34px rgba(7,21,34,.045) !important; }
.nav-container { min-height:78px !important; }
.nav-logo-img { width:110px !important; height:62px !important; }
.nav-link { font-size:.86rem !important; padding:10px 13px !important; border-radius:12px !important; }
.nav-link.active { background:#eaf6fd !important; box-shadow:inset 0 -2px var(--mx-blue) !important; }

/* Premium homepage hero */
#page-home { background:#f7fbff !important; }
.premium-hero { min-height:690px !important; position:relative; overflow:hidden !important; background:linear-gradient(120deg,#f7fcff 0%,#fff 46%,#eaf7ff 100%) !important; }
.premium-hero::before { content:""; position:absolute; inset:auto -10% -45% 30%; height:85%; border-radius:50%; background:radial-gradient(circle,rgba(75,185,243,.18),transparent 65%); filter:blur(10px); }
.hero-grid-pattern { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(22,135,217,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(22,135,217,.035) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,black 0%,transparent 82%); }
.hero-orb { position:absolute; border:1px solid rgba(22,135,217,.09); border-radius:50%; filter:blur(.1px); }
.hero-orb-one { width:620px; height:620px; right:-250px; top:-210px; }
.hero-orb-two { width:340px; height:340px; left:-160px; bottom:-190px; }
.premium-hero .hero-content { width:min(1380px,100%); max-width:none !important; min-height:690px; padding:72px clamp(22px,5vw,70px) 68px !important; margin:auto !important; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(460px,.98fr); align-items:center; gap:40px; position:relative; z-index:2; text-align:start; }
[dir="rtl"] .premium-hero .hero-content { grid-template-columns:minmax(460px,.98fr) minmax(0,1.02fr); }
.hero-copy { max-width:700px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid #d8eaf5; border-radius:999px; background:rgba(255,255,255,.82); color:#48677f; font:800 .74rem/1 Poppins,sans-serif; letter-spacing:.12em; box-shadow:0 8px 28px rgba(22,135,217,.05); }
.hero-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--mx-blue); box-shadow:0 0 0 5px rgba(22,135,217,.09); }
.hero-title { margin:22px 0 18px !important; font-size:clamp(3rem,6vw,5.5rem) !important; line-height:1.08 !important; letter-spacing:-.055em !important; color:var(--mx-navy) !important; }
.hero-title-accent { display:block; margin-top:12px; color:var(--mx-blue) !important; font-size:.48em; line-height:1.35; letter-spacing:-.025em; font-weight:800; }
.hero-desc { max-width:610px !important; margin:0 0 28px !important; color:#5f7387 !important; font-size:1.08rem !important; line-height:1.9 !important; }
.hero-pathways { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.pathway-chip { display:flex; align-items:center; gap:9px; padding:7px 12px 7px 9px; background:#fff; border:1px solid #dcebf5; border-radius:12px; color:var(--mx-navy); font:800 .78rem/1 Poppins,sans-serif; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.pathway-chip img { width:34px; height:25px; object-fit:contain; border-radius:7px; }
.pathway-chip:hover { transform:translateY(-2px); border-color:#a8d8f3; box-shadow:0 10px 26px rgba(22,135,217,.09); }
.hero-buttons { justify-content:flex-start !important; gap:10px !important; }
.btn-outline-light { background:#fff !important; color:var(--mx-navy) !important; border:1px solid #cfe2ee !important; box-shadow:0 8px 22px rgba(7,21,34,.05) !important; }
.btn-outline-light:hover { border-color:#9bcff0 !important; background:#f7fcff !important; }

/* Hero visual: abstract academic intelligence, no stock video */
.hero-visual { min-height:520px; position:relative; display:grid; place-items:center; }
.hero-visual-glow { position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(75,185,243,.26),rgba(22,135,217,.07) 42%,transparent 72%); filter:blur(2px); }
.hero-score-ring { width:330px; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; background:radial-gradient(circle at 35% 28%,#fff,#eef9ff 56%,#d8effb); border:1px solid rgba(22,135,217,.20); box-shadow:inset 0 0 0 20px rgba(255,255,255,.42),0 35px 100px rgba(22,135,217,.18); }
.hero-score-ring::before,.hero-score-ring::after { content:""; position:absolute; inset:17px; border-radius:50%; border:1px dashed rgba(22,135,217,.16); animation:heroOrbit 18s linear infinite; }
.hero-score-ring::after { inset:-16px; border-style:solid; border-color:rgba(22,135,217,.09) transparent rgba(75,185,243,.14) transparent; animation-duration:11s; animation-direction:reverse; }
@keyframes heroOrbit { to{transform:rotate(360deg)} }
.hero-score-ring span { font:900 clamp(4rem,7vw,6.8rem)/.9 Poppins,sans-serif; letter-spacing:-.08em; color:var(--mx-navy); }
.hero-score-ring small { margin-top:13px; color:#63819a; font:800 .68rem/1 Poppins,sans-serif; letter-spacing:.22em; }
.hero-float-card { position:absolute; min-width:190px; padding:14px 15px; display:grid; grid-template-columns:36px 1fr; column-gap:10px; align-items:center; background:rgba(255,255,255,.82); border:1px solid rgba(22,135,217,.12); border-radius:16px; box-shadow:0 18px 50px rgba(7,21,34,.10); backdrop-filter:blur(16px); animation:heroFloat 5s ease-in-out infinite; }
.hero-float-card strong { font-size:.9rem; color:var(--mx-navy); }
.hero-float-card small { grid-column:2; color:#71879a; font-size:.65rem; font-weight:700; }
.float-card-icon { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; grid-row:1 / span 2; background:#eaf7ff; color:var(--mx-blue); font:900 .9rem Poppins,sans-serif; }
.hero-float-math { top:16%; left:0; animation-delay:-1.2s; }
.hero-float-english { top:56%; right:-4%; animation-delay:-2.4s; }
.hero-float-biology { bottom:6%; left:9%; animation-delay:-3.6s; }
@keyframes heroFloat { 0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)} }
.hero-visual-line { position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(22,135,217,.26),transparent); transform-origin:center; }
.line-a { width:260px; top:28%; left:14%; transform:rotate(24deg); }.line-b{width:230px; right:12%; top:42%; transform:rotate(-28deg)}.line-c{width:220px; left:24%; bottom:25%; transform:rotate(-18deg)}
.hero-node { position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--mx-blue); box-shadow:0 0 0 7px rgba(22,135,217,.07); }
.node-a{left:17%;top:27%}.node-b{right:15%;top:41%}.node-c{left:26%;bottom:24%}

/* Story sections */
.home-micro-stats { padding-top:28px !important; padding-bottom:72px !important; display:grid; grid-template-columns:1fr 2fr; gap:42px; align-items:center; }
.section-kicker { display:block; color:var(--mx-blue); font:800 .68rem/1.2 Poppins,sans-serif; letter-spacing:.18em; text-transform:uppercase; margin-bottom:9px; }
.micro-stat-intro h2 { font-size:clamp(1.5rem,2.8vw,2.25rem); line-height:1.25; margin:0; letter-spacing:-.035em; }
.micro-stat-list { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--mx-line); border-bottom:1px solid var(--mx-line); }
.micro-stat { padding:18px 16px; border-inline-start:1px solid var(--mx-line); }.micro-stat:first-child{border-inline-start:0}.micro-stat strong{display:block;font:900 1.65rem/1.1 Poppins,sans-serif;color:var(--mx-navy)}.micro-stat span{display:block;margin-top:5px;color:#72879a;font-size:.78rem;font-weight:700}
.section-heading-row { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.section-heading-row > p { max-width:470px; color:#72879a; margin:0; font-size:.95rem; }
.section-title-left { font-size:clamp(2rem,3.7vw,3rem); margin:0 !important; color:var(--mx-navy) !important; letter-spacing:-.05em; }
.section-title-left::after { display:none !important; }
.text-link { border:0; background:none; color:var(--mx-blue); font-size:.84rem !important; font-weight:800 !important; cursor:pointer; padding:8px 0; }
.text-link i { margin-inline-start:7px; transition:transform .2s ease; }.text-link:hover i{transform:translateX(-3px)}
.home-path-section,.home-subject-section,.home-why-section,.home-result-section,.home-stories-section,.home-cta-section { padding-top:72px !important; padding-bottom:72px !important; }
.path-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.path-card { min-height:220px; position:relative; overflow:hidden; border:1px solid var(--mx-line); background:#fff; border-radius:20px; box-shadow:0 12px 34px rgba(7,21,34,.045); padding:0; cursor:pointer; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.path-card:hover { transform:translateY(-5px); border-color:#afd9ef; box-shadow:0 24px 54px rgba(22,135,217,.10); }
.path-card img { width:100%; height:128px; object-fit:cover; display:block; border-bottom:1px solid #e2eef5; }
.path-card > div { padding:15px 17px; }.path-card > div > span{color:#7890a2;font:800 .64rem Poppins,sans-serif}.path-card h3{margin:4px 0;font:900 1.5rem/1 Poppins,sans-serif;color:var(--mx-navy)}.path-card p{margin:0;color:#71879a;font-size:.75rem;font-weight:600;max-width:290px}.path-card > i{position:absolute;left:17px;bottom:17px;color:var(--mx-blue);font-size:.8rem}
[dir="ltr"] .path-card > i { right:17px; left:auto; transform:rotate(180deg); }
.home-subject-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.home-subject-card { background:#fff; border:1px solid var(--mx-line); border-radius:20px; overflow:hidden; cursor:pointer; box-shadow:0 12px 34px rgba(7,21,34,.045); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.home-subject-card:hover { transform:translateY(-6px); box-shadow:0 26px 60px rgba(22,135,217,.11); border-color:#abd7ef; }
.home-subject-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:#eef9ff; }.home-subject-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.22,.8,.2,1)}.home-subject-card:hover .home-subject-media img{transform:scale(1.045)}.home-subject-media span{position:absolute;top:13px;inset-inline-start:13px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.84);color:var(--mx-navy);font:800 .65rem Poppins,sans-serif;backdrop-filter:blur(8px)}
.home-subject-content { padding:18px 18px 20px; display:flex; justify-content:space-between; gap:18px; align-items:end; }.home-subject-content small{color:#7a91a4;font:800 .62rem Poppins,sans-serif;letter-spacing:.14em}.home-subject-content h3{margin:4px 0 3px;font-size:1.35rem}.home-subject-content p{margin:0;color:#708598;font-size:.74rem}.home-subject-content > i{color:var(--mx-blue);padding-bottom:5px}
.why-panel { display:grid; grid-template-columns:.85fr 1.15fr; gap:0; background:linear-gradient(120deg,#071b35,#0d2a49); border-radius:26px; overflow:hidden; position:relative; box-shadow:0 30px 80px rgba(7,21,34,.13); }
.why-panel::after { content:""; position:absolute; width:480px;height:480px;right:-200px;top:-250px;border-radius:50%;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.why-copy { padding:54px; position:relative; z-index:1; }.why-copy h2{color:#fff !important;font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.04;margin:0 0 16px;letter-spacing:-.055em}.why-copy h2 em{color:#74caff;font-style:normal}.why-copy p{max-width:420px;color:#afc2d3;font-size:.92rem;line-height:1.9;margin:0}.why-features{display:grid;grid-template-columns:repeat(2,1fr);border-inline-start:1px solid rgba(255,255,255,.08);position:relative;z-index:1}.why-features>div{padding:34px;border-bottom:1px solid rgba(255,255,255,.08);}.why-features>div:nth-child(odd){border-inline-end:1px solid rgba(255,255,255,.08)}.why-features>div:nth-child(3),.why-features>div:nth-child(4){border-bottom:0}.why-features span{color:#67c4fb;font:800 .65rem Poppins,sans-serif}.why-features h3{color:#fff !important;margin:8px 0 4px;font-size:1rem}.why-features p{color:#9fb4c7;margin:0;font-size:.76rem;line-height:1.7}
.result-panel { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:30px; padding:54px; border:1px solid var(--mx-line); border-radius:24px; background:linear-gradient(120deg,#fff,#f2faff); overflow:hidden; position:relative; }.result-panel h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 8px;letter-spacing:-.05em}.result-panel p{color:#6f8497;margin:0 0 24px}.result-800{justify-self:center;width:270px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid #cce6f4;box-shadow:0 25px 70px rgba(22,135,217,.13);position:relative}.result-800::before{content:"";position:absolute;inset:17px;border-radius:50%;border:1px dashed rgba(22,135,217,.18)}.result-800 span{font:900 4.7rem/.9 Poppins,sans-serif;letter-spacing:-.08em;color:var(--mx-blue)}.result-800 small{font:800 .6rem Poppins,sans-serif;color:#7890a2;letter-spacing:.18em;margin-top:10px}.result-line{display:flex;gap:6px;margin-top:22px}.result-line i{width:22px;height:3px;background:#d9edf8;border-radius:10px}.result-line i:last-child{background:var(--mx-blue)}
.home-review-feature { min-height:230px; }.featured-review-card{display:grid;grid-template-columns:80px 1fr 150px;gap:18px;align-items:center;min-height:260px;padding:38px 40px;background:#fff;border:1px solid var(--mx-line);border-radius:24px;position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(7,21,34,.06)}.featured-review-card::after{content:"“";position:absolute;left:10%;bottom:-100px;font:900 24rem/.7 Georgia,serif;color:#eef8fd;pointer-events:none}.featured-review-mark{font:900 5rem/.8 Georgia,serif;color:#9bd8f5;align-self:start}.featured-review-main{position:relative;z-index:1}.premium-stars{color:#1687d9 !important;letter-spacing:.18em;font-size:.75rem}.featured-review-main blockquote{font-size:clamp(1.1rem,2.3vw,1.65rem);line-height:1.65;margin:12px 0 20px;color:var(--mx-navy);font-weight:700}.featured-review-author{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.featured-review-author strong{font-size:.92rem}.featured-review-author span{color:#7a91a4;font-size:.74rem}.featured-review-side{padding:18px;border-inline-start:1px solid var(--mx-line);text-align:center;position:relative;z-index:1}.featured-review-side span{display:block;color:#8aa0b2;font:800 .58rem Poppins,sans-serif;letter-spacing:.18em}.featured-review-side strong{display:block;color:var(--mx-blue);font:900 2rem/1.1 Poppins,sans-serif;margin:7px 0}.featured-review-side small{color:#7a91a4;font-size:.68rem}
.final-cta { display:flex;align-items:center;justify-content:space-between;gap:28px;padding:44px 48px;border-radius:24px;background:#fff;border:1px solid var(--mx-line);box-shadow:0 18px 50px rgba(7,21,34,.05); }.final-cta h2{font-size:clamp(2.2rem,4vw,3.6rem);margin:0;letter-spacing:-.06em}.final-cta p{margin:7px 0 0;color:#71879a}.final-cta-actions{display:flex;gap:10px;flex-wrap:wrap}.btn-light-outline{background:#f3f9fd !important;color:var(--mx-navy) !important;border:1px solid #d7e9f3 !important}
.legacy-features-wrap { padding-top:25px !important; padding-bottom:90px !important; }.legacy-features-wrap .feature-card{padding:28px !important;text-align:start !important}.legacy-features-wrap .feature-icon{font-size:1.5rem;margin-bottom:14px}.legacy-features-wrap .feature-icon span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eaf7ff;color:var(--mx-blue)}

/* Subjects / course listing art direction */
#page-subjects .section-container,#page-courses .section-container,#page-offers .section-container,#page-teachers .section-container,#page-reviews .section-container,#page-faq .section-container,#page-contact .section-container { padding-top:72px !important; padding-bottom:90px !important; }
#page-subjects .section-title,#page-courses .section-title,#page-offers .section-title,#page-teachers .section-title,#page-reviews .section-title,#page-faq .section-title,#page-contact .section-title { font-size:clamp(2rem,4vw,3rem) !important; text-align:start !important; margin-bottom:34px !important; letter-spacing:-.045em; }.section-title::after{margin-inline-start:0 !important;margin-inline-end:0 !important;width:48px !important;height:3px !important}
.subjects-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px !important; }.subject-card{border-radius:20px !important}.subject-image-wrap{height:auto !important;aspect-ratio:16/9 !important;border-bottom:0 !important;position:relative !important}.subject-image-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,27,53,.38));pointer-events:none}.subject-card-content{text-align:start !important;padding:18px 20px 21px !important}.subject-card-content h3{font-size:1.35rem !important}.subject-card-content p{font-size:.78rem !important}
.courses-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px !important; }.course-card{border-radius:20px !important;cursor:default !important}.premium-course-header{height:auto !important;min-height:0 !important;display:block !important;position:relative !important;padding:0 !important;overflow:hidden !important;background:#eaf7ff !important}.premium-course-header::after{display:none !important}.course-subject-image{display:block !important;width:100% !important;min-width:0 !important;height:auto !important;aspect-ratio:16/9 !important;object-fit:cover !important;transition:transform .55s cubic-bezier(.22,.8,.2,1) !important}.course-card:hover .course-subject-image{transform:scale(1.035)}.course-header-copy{position:absolute !important;inset:auto 0 0 0 !important;padding:42px 18px 16px !important;background:linear-gradient(180deg,transparent,rgba(7,27,53,.82)) !important;color:#fff !important}.course-header-copy h3,.course-header-copy small{color:#fff !important}.course-header-copy h3{font-size:1.18rem !important}.course-header-copy small{opacity:.82}.course-type{background:rgba(255,255,255,.88) !important;color:var(--mx-navy) !important;border:0 !important;font-size:.63rem !important;padding:5px 8px !important;margin-bottom:3px}.course-card-body{padding:20px !important}.course-info-item{font-size:.76rem !important;padding:8px 0 !important}.course-price{font-size:1.5rem !important;margin:14px 0 3px !important}.course-price-note{font-size:.69rem !important;color:#72879a !important;min-height:38px}.course-card-footer{padding:0 20px 20px !important}.course-card-footer .btn{font-size:.82rem !important}
.offer-media{height:auto !important;aspect-ratio:16/9 !important}.offer-content{padding:21px !important}
/* Review listing: featured-first hierarchy */
#reviewsGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px !important; }.review-card{padding:24px !important;border-radius:18px !important}.review-card:first-child{grid-column:1/-1;padding:34px !important;background:linear-gradient(120deg,#fff,#f0f9ff) !important}.review-card:first-child .review-text{font-size:1.25rem !important;max-width:900px}.review-stars{color:#1687d9 !important;font-size:.8rem !important;letter-spacing:.15em}

/* Motion + accessibility */
.animate-card { transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.2,1) !important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; } }

@media (max-width:1100px){
  .premium-hero .hero-content,[dir="rtl"] .premium-hero .hero-content{grid-template-columns:1fr 430px;gap:18px}.hero-title{font-size:clamp(2.8rem,6vw,4.5rem) !important}.hero-score-ring{width:280px}.hero-float-card{min-width:165px}.home-micro-stats{grid-template-columns:1fr}.subjects-grid,.courses-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.home-subject-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .premium-hero .hero-content,[dir="rtl"] .premium-hero .hero-content{grid-template-columns:1fr;text-align:center;padding-top:58px !important}.hero-copy{max-width:760px;margin:auto}.hero-eyebrow{margin-inline:auto}.hero-desc{margin-inline:auto !important}.hero-pathways,.hero-buttons{justify-content:center !important}.hero-visual{min-height:430px}.hero-score-ring{width:250px}.hero-float-math{left:3%;top:10%}.hero-float-english{right:3%;top:53%}.hero-float-biology{left:8%;bottom:4%}.path-grid,.home-subject-grid{grid-template-columns:1fr}.why-panel,.result-panel{grid-template-columns:1fr}.why-features{border-inline-start:0;border-top:1px solid rgba(255,255,255,.08)}.result-800{justify-self:start;width:220px}.featured-review-card{grid-template-columns:55px 1fr}.featured-review-side{display:none}.final-cta{flex-direction:column;align-items:flex-start}.micro-stat-list{grid-template-columns:repeat(2,1fr)}.micro-stat:nth-child(3){border-inline-start:0;border-top:1px solid var(--mx-line)}.micro-stat:nth-child(4){border-top:1px solid var(--mx-line)}
}
@media (max-width:620px){
  .top-bar .date-time{display:none}.navbar{top:38px !important}.nav-container{min-height:70px !important}.nav-logo-img{width:92px !important}.nav-links{top:70px !important;padding:12px !important;border-radius:0 0 16px 16px !important}.nav-link{width:100%;text-align:start}.premium-hero{min-height:auto !important}.premium-hero .hero-content{min-height:auto;padding:48px 18px 42px !important}.hero-title{font-size:clamp(2.45rem,13vw,3.6rem) !important}.hero-title-accent{font-size:.48em}.hero-visual{min-height:360px}.hero-score-ring{width:205px}.hero-score-ring span{font-size:4rem}.hero-float-card{min-width:140px;padding:10px;grid-template-columns:30px 1fr;column-gap:8px}.hero-float-card small{font-size:.55rem}.float-card-icon{width:30px;height:30px}.hero-float-math{left:0}.hero-float-english{right:0}.hero-float-biology{left:2%;bottom:0}.section-container{padding-inline:18px !important}.home-path-section,.home-subject-section,.home-why-section,.home-result-section,.home-stories-section,.home-cta-section{padding-top:50px !important;padding-bottom:50px !important}.section-heading-row{align-items:flex-start;flex-direction:column;gap:10px}.path-card{min-height:200px}.why-copy{padding:32px 24px}.why-features{grid-template-columns:1fr}.why-features>div,.why-features>div:nth-child(odd){border-inline-end:0 !important;border-bottom:1px solid rgba(255,255,255,.08)}.why-features>div:last-child{border-bottom:0}.result-panel{padding:30px 24px}.final-cta{padding:30px 24px}.final-cta-actions,.final-cta-actions .btn{width:100%}.final-cta-actions .btn{justify-content:center}.featured-review-card{padding:26px 22px;grid-template-columns:1fr}.featured-review-mark{display:none}.featured-review-main blockquote{font-size:1.05rem}.micro-stat-list{grid-template-columns:repeat(2,1fr)}.micro-stat{padding:15px 12px}.micro-stat strong{font-size:1.35rem}#reviewsGrid,.subjects-grid,.courses-grid{grid-template-columns:1fr !important}.review-card:first-child{grid-column:auto}.review-card:first-child .review-text{font-size:1.05rem}.course-price-note{min-height:0}.loading-logo-wrap{width:112px !important;height:112px !important}.loading-logo-img{width:92px !important;height:92px !important}.loading-score{font-size:4.7rem}
}
.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.review-card-top>span{font:800 .65rem Poppins,sans-serif;color:#8aa0b2}.review-card .review-text{font-style:normal !important;padding:0 !important}.review-card .review-text::before{display:none !important}.review-context{display:block;color:#8297a8;font-size:.68rem;font-weight:600}.review-card-featured{position:relative;overflow:hidden}.review-card-featured::before{content:"“";position:absolute;inset:auto 20px -80px auto;font:900 16rem/.7 Georgia,serif;color:#eef8fd;pointer-events:none}.review-card-featured>*{position:relative;z-index:1}
.empty-state-card{padding:34px;background:#fff;border:1px solid var(--mx-line);border-radius:18px;color:var(--mx-navy)}
@keyframes premiumAppReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================
   MATRIX ACADEMY — PREMIUM VISUAL SYSTEM V8
   Polished light/dark modes + editorial loading entrance.
   Frontend-only: no API, auth, data or business logic changes.
   ========================================================= */
:root {
  --mx-font-ar: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  --mx-font-en: 'Inter', 'Poppins', sans-serif;
  --mx-bg: #f7fbff;
  --mx-surface: #ffffff;
  --mx-surface-2: #f3f9fd;
  --mx-ink: #102b46;
  --mx-muted: #60778c;
  --mx-line: #d9e9f3;
  --mx-blue: #167fe0;
  --mx-blue-2: #55c7f5;
  --mx-blue-soft: #eaf7ff;
  --mx-shadow: 0 18px 55px rgba(18, 65, 100, .09);
  --mx-shadow-hover: 0 24px 70px rgba(18, 65, 100, .14);
}
html, body { font-family: var(--mx-font-ar) !important; }
[dir="ltr"] body, [dir="ltr"] button, [dir="ltr"] input, [dir="ltr"] textarea, [dir="ltr"] select { font-family: var(--mx-font-en) !important; }
body { font-weight: 500 !important; letter-spacing: -.01em; }
h1,h2,h3,h4,h5,h6,.nav-link,.btn,.section-kicker,.hero-eyebrow,.loading-kicker { font-family: var(--mx-font-ar) !important; }
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4,[dir="ltr"] h5,[dir="ltr"] h6,[dir="ltr"] .nav-link,[dir="ltr"] .btn,[dir="ltr"] .section-kicker,[dir="ltr"] .hero-eyebrow,[dir="ltr"] .loading-kicker { font-family: var(--mx-font-en) !important; }

/* ---- Loading screen: image-led, balanced left/right composition ---- */
.loading-screen {
  background:
    radial-gradient(circle at 50% 45%, rgba(96,205,249,.17), transparent 24%),
    linear-gradient(115deg, #eef8fe 0%, #ffffff 33%, #ffffff 67%, #eef8fe 100%) !important;
}
.loading-gallery { position:absolute; top:0; bottom:0; width:min(30vw,520px); display:flex; flex-direction:column; gap:20px; justify-content:center; pointer-events:none; z-index:1; opacity:.9; }
.loading-gallery-left { left:-42px; transform:rotate(-4deg); }
.loading-gallery-right { right:-42px; transform:rotate(4deg); }
.loading-gallery-card { width:100%; height:25vh; min-height:150px; max-height:260px; overflow:hidden; border-radius:28px; border:1px solid rgba(255,255,255,.86); box-shadow:0 24px 70px rgba(15,65,102,.12); position:relative; }
.loading-gallery-card::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(10,48,78,.10), rgba(255,255,255,.10)); }
.loading-gallery-card img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.86) contrast(.98); transform:scale(1.05); }
.loading-gallery-card.card-b { transform:translateX(42px) scale(.94); opacity:.82; }
.loading-gallery-card.card-c { transform:translateX(78px) scale(.88); opacity:.66; }
.loading-gallery-right .card-b { transform:translateX(-42px) scale(.94); }
.loading-gallery-right .card-c { transform:translateX(-78px) scale(.88); }
.loading-brand-lockup { display:flex; flex-direction:column; align-items:center; gap:12px; }
.loading-logo-wrap { width:176px !important; height:176px !important; margin:0 !important; border-radius:50% !important; background:rgba(255,255,255,.72) !important; border:1px solid rgba(255,255,255,.95) !important; box-shadow:0 26px 90px rgba(22,127,224,.16), inset 0 0 0 1px rgba(22,127,224,.05) !important; position:relative; }
.loading-logo-halo { position:absolute; inset:12px; border-radius:50%; border:1px solid rgba(22,127,224,.13); box-shadow:0 0 0 12px rgba(22,127,224,.025); }
.loading-logo-img { width:122px !important; height:98px !important; object-fit:contain !important; position:relative; z-index:2; filter:drop-shadow(0 10px 20px rgba(16,43,70,.10)); }
.loading-wordmark { width:205px; max-width:54vw; height:auto; object-fit:contain; display:block; }
.loading-kicker { color:#607b91 !important; letter-spacing:.18em !important; font-size:.66rem !important; margin-top:6px; }
.loading-score { color:#0d3558 !important; font-size:clamp(4.6rem,9vw,7.1rem) !important; text-shadow:0 16px 40px rgba(22,127,224,.12) !important; }
.loading-tagline { color:#557087 !important; font-size:1rem !important; font-weight:600 !important; }
.loading-progress-line { width:240px !important; height:3px !important; background:#dbeef8 !important; }
.loading-progress-line span { background:linear-gradient(90deg,#167fe0,#59c9f5) !important; }

/* ---- Theme switch control ---- */
#themeToggle.theme-toggle { display:inline-flex !important; align-items:center; gap:8px; }
#themeToggle { min-width:76px; }

/* ---- Light mode: high contrast, calm hierarchy ---- */
[data-theme="light"] body { background:var(--mx-bg) !important; color:var(--mx-ink) !important; }
[data-theme="light"] .top-bar { background:#f9fcff !important; color:#47637a !important; }
[data-theme="light"] .navbar { background:rgba(255,255,255,.92) !important; }
[data-theme="light"] .nav-link { color:#294a63 !important; }
[data-theme="light"] .nav-link:hover { color:#116fbe !important; background:#edf8ff !important; }
[data-theme="light"] .nav-link.active { color:#126fc4 !important; background:#e9f6fe !important; box-shadow:inset 0 -2px #1687e8 !important; }
[data-theme="light"] .btn-icon { background:#f2f9fd !important; color:#31566f !important; border-color:#d6e9f3 !important; }
[data-theme="light"] .currency-selector select { background:#fff !important; color:#31566f !important; }
[data-theme="light"] .hero-title { color:#102f4d !important; }
[data-theme="light"] .hero-desc { color:#526c81 !important; }
[data-theme="light"] .section-title-left, [data-theme="light"] .section-title, [data-theme="light"] .subject-card-content h3 { color:#102f4d !important; }
[data-theme="light"] .section-heading-row > p, [data-theme="light"] .subject-card-content p { color:#62788b !important; }
[data-theme="light"] .glass-card, [data-theme="light"] .subject-card, [data-theme="light"] .course-card, [data-theme="light"] .review-card, [data-theme="light"] .offer-card { background:#fff !important; border-color:#dbeaf3 !important; box-shadow:var(--mx-shadow) !important; }
[data-theme="light"] .glass-card:hover, [data-theme="light"] .subject-card:hover, [data-theme="light"] .course-card:hover, [data-theme="light"] .review-card:hover { box-shadow:var(--mx-shadow-hover) !important; }
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background:#fff !important; color:#18354e !important; border-color:#d5e7f1 !important; }
[data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color:#8aa0b0 !important; }

/* ---- Dark mode: full brand-aware inversion, not a generic black theme ---- */
html[data-theme="dark"] {
  --mx-bg:#071421;
  --mx-surface:#0d1d2b;
  --mx-surface-2:#102637;
  --mx-ink:#edf7ff;
  --mx-muted:#a7bdcd;
  --mx-line:rgba(157,207,234,.16);
  --mx-blue:#4bb7f2;
  --mx-blue-2:#79d9ff;
  --mx-blue-soft:#12364c;
  --mx-shadow:0 18px 55px rgba(0,0,0,.28);
  --mx-shadow-hover:0 25px 75px rgba(0,0,0,.40);
}
html[data-theme="dark"], html[data-theme="dark"] body { background:#071421 !important; color:#edf7ff !important; }
[data-theme="dark"] .top-bar { background:#091a29 !important; color:#9fb8c9 !important; border-color:rgba(157,207,234,.10) !important; }
[data-theme="dark"] .navbar { background:rgba(8,23,35,.92) !important; border-color:rgba(157,207,234,.11) !important; box-shadow:0 12px 36px rgba(0,0,0,.22) !important; }
[data-theme="dark"] .nav-logo-img { filter:drop-shadow(0 5px 16px rgba(75,183,242,.12)); }
[data-theme="dark"] .nav-link { color:#c3d6e3 !important; }
[data-theme="dark"] .nav-link i { color:#58bdf4 !important; }
[data-theme="dark"] .nav-link:hover { color:#fff !important; background:#102c40 !important; }
[data-theme="dark"] .nav-link.active { color:#fff !important; background:#12384f !important; box-shadow:inset 0 -2px #58c6f7 !important; }
[data-theme="dark"] .nav-link.active i { color:#79d9ff !important; }
[data-theme="dark"] .btn-icon, [data-theme="dark"] .currency-selector select { background:#102738 !important; color:#d5e8f4 !important; border-color:rgba(157,207,234,.17) !important; }
[data-theme="dark"] .premium-hero, [data-theme="dark"] #page-home { background:linear-gradient(120deg,#071824 0%,#0a1d2d 48%,#0c2537 100%) !important; }
[data-theme="dark"] .premium-hero::before { background:radial-gradient(circle,rgba(63,181,239,.15),transparent 65%) !important; }
[data-theme="dark"] .hero-grid-pattern { opacity:.26; background-image:linear-gradient(rgba(113,202,239,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(113,202,239,.055) 1px,transparent 1px); }
[data-theme="dark"] .hero-orb { border-color:rgba(113,202,239,.12) !important; }
[data-theme="dark"] .hero-eyebrow { background:rgba(12,35,51,.80) !important; border-color:rgba(124,207,239,.16) !important; color:#b4ccda !important; box-shadow:none !important; }
[data-theme="dark"] .hero-title { color:#f3f9fd !important; }
[data-theme="dark"] .hero-title-accent { color:#61c8fa !important; }
[data-theme="dark"] .hero-desc { color:#afc3d0 !important; }
[data-theme="dark"] .hero-score-ring { background:rgba(10,31,45,.76) !important; border-color:rgba(102,201,245,.22) !important; box-shadow:0 0 60px rgba(48,166,222,.13), inset 0 0 50px rgba(70,182,232,.06) !important; }
[data-theme="dark"] .hero-score-ring span { color:#eaf8ff !important; }
[data-theme="dark"] .hero-score-ring small { color:#8db3c8 !important; }
[data-theme="dark"] .hero-float-card { background:rgba(11,31,45,.88) !important; border-color:rgba(122,206,240,.16) !important; color:#e9f6fc !important; box-shadow:0 18px 45px rgba(0,0,0,.25) !important; }
[data-theme="dark"] .hero-float-card small { color:#91b0c1 !important; }
[data-theme="dark"] .hero-float-card .float-card-icon { background:#123b53 !important; color:#70d1fb !important; }
[data-theme="dark"] .home-micro-stats, [data-theme="dark"] .home-path-section, [data-theme="dark"] .home-subject-section, [data-theme="dark"] .home-stories-section { background:transparent !important; }
[data-theme="dark"] .micro-stat-intro h2, [data-theme="dark"] .section-title-left, [data-theme="dark"] .section-title, [data-theme="dark"] .subject-card-content h3, [data-theme="dark"] .review-card h3 { color:#edf7ff !important; }
[data-theme="dark"] .section-heading-row > p, [data-theme="dark"] .subject-card-content p, [data-theme="dark"] .review-card p, [data-theme="dark"] .review-text { color:#a8bdcc !important; }
[data-theme="dark"] .micro-stat { border-color:rgba(157,207,234,.12) !important; }
[data-theme="dark"] .micro-stat strong { color:#69cdf9 !important; }
[data-theme="dark"] .path-card { background:#0d202f !important; border-color:rgba(157,207,234,.13) !important; box-shadow:var(--mx-shadow) !important; }
[data-theme="dark"] .path-card h3, [data-theme="dark"] .path-card p { color:#edf7ff !important; }
[data-theme="dark"] .path-card p { color:#a7bdcc !important; }
[data-theme="dark"] .path-card > span, [data-theme="dark"] .path-card div > span { color:#67c9f7 !important; }
[data-theme="dark"] .subject-card, [data-theme="dark"] .course-card, [data-theme="dark"] .review-card, [data-theme="dark"] .offer-card, [data-theme="dark"] .glass-card, [data-theme="dark"] .empty-state-card { background:#0d1e2d !important; border-color:rgba(157,207,234,.14) !important; box-shadow:var(--mx-shadow) !important; }
[data-theme="dark"] .subject-image-wrap { background:#102a3c !important; border-color:rgba(157,207,234,.11) !important; }
[data-theme="dark"] .course-card-body, [data-theme="dark"] .course-card-footer { background:transparent !important; }
[data-theme="dark"] .course-card h3, [data-theme="dark"] .course-card-title { color:#eef8ff !important; }
[data-theme="dark"] .course-card p, [data-theme="dark"] .course-meta, [data-theme="dark"] .course-price-note { color:#9fb8c8 !important; }
[data-theme="dark"] .premium-course-header { background:#102b3c !important; color:#eef8ff !important; }
[data-theme="dark"] .premium-course-header * { color:inherit; }
[data-theme="dark"] #page-subjects, [data-theme="dark"] #page-offers, [data-theme="dark"] #page-teachers, [data-theme="dark"] #page-reviews, [data-theme="dark"] #page-faq, [data-theme="dark"] #page-contact, [data-theme="dark"] #page-courses { background:#071421 !important; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background:#0c1d2b !important; color:#eaf6fd !important; border-color:rgba(157,207,234,.18) !important; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color:#6f8da1 !important; }
[data-theme="dark"] label { color:#b8cdd9 !important; }
[data-theme="dark"] .why-panel { background:linear-gradient(135deg,#0b2435,#0d3349) !important; }
[data-theme="dark"] .why-copy h2, [data-theme="dark"] .why-copy p, [data-theme="dark"] .why-features h3, [data-theme="dark"] .why-features p { color:#eef8ff !important; }
[data-theme="dark"] .why-features p { color:#a5bdcc !important; }
[data-theme="dark"] .result-panel { background:linear-gradient(135deg,#0c2638,#0d354b) !important; }
[data-theme="dark"] .result-panel h2, [data-theme="dark"] .result-panel p { color:#f0f8fc !important; }
[data-theme="dark"] .final-cta { background:#0d1e2d !important; border-color:rgba(157,207,234,.13) !important; }
[data-theme="dark"] .final-cta h2, [data-theme="dark"] .final-cta p { color:#eef8ff !important; }
[data-theme="dark"] .footer { background:#06111b !important; border-color:rgba(157,207,234,.10) !important; }
[data-theme="dark"] .footer * { color:#a8bdcb; }
[data-theme="dark"] .modal-content, [data-theme="dark"] .auth-card, [data-theme="dark"] .form-card { background:#0d1e2d !important; color:#eaf6fd !important; border-color:rgba(157,207,234,.15) !important; }
[data-theme="dark"] .modal-content h2, [data-theme="dark"] .modal-content h3, [data-theme="dark"] .auth-card h2, [data-theme="dark"] .auth-card h3 { color:#eef8ff !important; }
[data-theme="dark"] .loading-screen { background:radial-gradient(circle at 50% 45%,rgba(72,189,242,.11),transparent 25%),linear-gradient(115deg,#071824 0%,#0b1d2b 35%,#0a1b29 65%,#071824 100%) !important; color:#edf7ff !important; }
[data-theme="dark"] .loading-screen::before { opacity:.22 !important; }
[data-theme="dark"] .loading-gallery-card { border-color:rgba(157,207,234,.12); box-shadow:0 24px 70px rgba(0,0,0,.38); }
[data-theme="dark"] .loading-gallery-card::after { background:linear-gradient(135deg,rgba(3,18,29,.42),rgba(24,105,144,.10)); }
[data-theme="dark"] .loading-logo-wrap { background:rgba(10,30,44,.78) !important; border-color:rgba(150,221,247,.16) !important; box-shadow:0 26px 90px rgba(0,0,0,.36), inset 0 0 0 1px rgba(99,202,243,.08) !important; }
[data-theme="dark"] .loading-kicker { color:#87aabd !important; }
[data-theme="dark"] .loading-score { color:#eff9ff !important; text-shadow:0 16px 40px rgba(73,190,242,.17) !important; }
[data-theme="dark"] .loading-tagline { color:#9eb8c8 !important; }
[data-theme="dark"] .loading-progress-line { background:#173344 !important; }

/* Mobile loading: keep the sides but avoid crowding the central brand. */
@media (max-width:900px) {
  .loading-gallery { width:34vw; opacity:.42; gap:12px; }
  .loading-gallery-card { min-height:115px; height:18vh; border-radius:20px; }
  .loading-gallery-left { left:-70px; }
  .loading-gallery-right { right:-70px; }
  .loading-container { width:min(430px,76vw) !important; }
}
@media (max-width:620px) {
  .loading-gallery { width:48vw; opacity:.16; filter:blur(1px); }
  .loading-gallery-left { left:-115px; }
  .loading-gallery-right { right:-115px; }
  .loading-gallery-card { min-height:110px; border-radius:18px; }
  .loading-container { width:min(340px,86vw) !important; }
  .loading-logo-wrap { width:140px !important; height:140px !important; }
  .loading-logo-img { width:96px !important; height:78px !important; }
  .loading-wordmark { width:170px; }
  .loading-kicker { font-size:.54rem !important; letter-spacing:.12em !important; }
  .loading-score { font-size:4.6rem !important; }
  #themeToggle { min-width:44px; padding-inline:10px !important; }
  #themeToggle span { display:none; }
}

/* ============================================================
   MATRIX ACADEMY — CONTRAST FOUNDATION V33
   Theme-safe readability layer. Frontend only.
   ============================================================ */
:root {
  color-scheme: light;
  --theme-heading:#0b2540;
  --theme-body:#526b80;
  --theme-muted:#70869a;
  --theme-surface:#ffffff;
  --theme-border:#d8e8f1;
}

/* Light mode: explicitly cover nested hero text so the child <span>
   can never inherit the old white hero treatment. */
html[data-theme="light"] {
  color-scheme:light;
  --theme-heading:#0b2540;
  --theme-body:#4f687d;
  --theme-muted:#6d8396;
  --theme-surface:#ffffff;
  --theme-border:#d8e8f1;
}
html[data-theme="light"] .hero-title,
html[data-theme="light"] .hero-title > span,
html[data-theme="light"] .hero-title-accent {
  color:#0b3152 !important;
  text-shadow:0 2px 16px rgba(255,255,255,.72) !important;
}
html[data-theme="light"] .hero-title-accent { color:#147fd1 !important; }
html[data-theme="light"] .hero-desc { color:#4f687d !important; }
html[data-theme="light"] .section-title,
html[data-theme="light"] .section-title-left,
html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .micro-stat-intro h2,
html[data-theme="light"] .final-cta h2,
html[data-theme="light"] .result-panel h2 { color:var(--theme-heading) !important; }
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .section-heading-row > p,
html[data-theme="light"] .final-cta p,
html[data-theme="light"] .result-panel p { color:var(--theme-body) !important; }

/* Dark mode: fix legacy sections and every common text primitive in one
   place. This deliberately uses high-contrast blue-white values rather
   than simply inverting the light palette. */
html[data-theme="dark"] {
  color-scheme:dark;
  --theme-heading:#f2f8fc;
  --theme-body:#b8cad6;
  --theme-muted:#91a9b8;
  --theme-surface:#0d1e2d;
  --theme-border:rgba(157,207,234,.16);
}
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-title-left,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .micro-stat-intro h2,
html[data-theme="dark"] .final-cta h2,
html[data-theme="dark"] .result-panel h2,
html[data-theme="dark"] .feature-card strong,
html[data-theme="dark"] .modal-content h1,
html[data-theme="dark"] .modal-content h2,
html[data-theme="dark"] .modal-content h3,
html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .auth-card h2,
html[data-theme="dark"] .auth-card h3 {
  color:var(--theme-heading) !important;
}
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .section-heading-row > p,
html[data-theme="dark"] .final-cta p,
html[data-theme="dark"] .result-panel p,
html[data-theme="dark"] .feature-card small,
html[data-theme="dark"] .feature-card .text-muted,
html[data-theme="dark"] .section-subtitle {
  color:var(--theme-body) !important;
}
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .legacy-features-wrap .feature-card {
  background:#0d1e2d !important;
  color:#eef7fc !important;
  border-color:rgba(157,207,234,.14) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] .feature-icon span {
  background:#12364c !important;
  border-color:rgba(117,210,250,.20) !important;
  color:#71d0fa !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] .legacy-features-wrap .section-kicker,
html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .eyebrow { color:#62c9f8 !important; }
html[data-theme="dark"] .text-link { color:#68cdf8 !important; }
html[data-theme="dark"] .btn-light-outline,
html[data-theme="dark"] .btn-outline-light {
  background:#102b3d !important;
  color:#eaf6fc !important;
  border-color:rgba(157,207,234,.22) !important;
}
html[data-theme="dark"] .btn-light-outline:hover,
html[data-theme="dark"] .btn-outline-light:hover {
  background:#15384d !important;
  color:#fff !important;
}
html[data-theme="dark"] .path-card,
html[data-theme="dark"] .home-subject-card,
html[data-theme="dark"] .result-panel,
html[data-theme="dark"] .final-cta,
html[data-theme="dark"] .featured-review-card {
  color:#edf7fc !important;
}
html[data-theme="dark"] .path-card h3,
html[data-theme="dark"] .home-subject-content h3,
html[data-theme="dark"] .result-panel h2,
html[data-theme="dark"] .final-cta h2,
html[data-theme="dark"] .featured-review-main blockquote {
  color:#f0f8fc !important;
}
html[data-theme="dark"] .path-card p,
html[data-theme="dark"] .home-subject-content p,
html[data-theme="dark"] .result-panel p,
html[data-theme="dark"] .final-cta p,
html[data-theme="dark"] .featured-review-author span,
html[data-theme="dark"] .featured-review-side span,
html[data-theme="dark"] .featured-review-side small {
  color:#a9bfcd !important;
}

/* Dark quiz/readability hardening for the assessment UI. */
html[data-theme="dark"] .quiz-topbar,
html[data-theme="dark"] .quiz-question-card,
html[data-theme="dark"] .quiz-diagram {
  background:#0d1e2d !important;
  border-color:rgba(157,207,234,.16) !important;
  color:#edf7fc !important;
  box-shadow:0 18px 50px rgba(0,0,0,.26) !important;
}
html[data-theme="dark"] .quiz-question-card h3 { color:#f0f8fc !important; }
html[data-theme="dark"] .quiz-option { background:#102536 !important; border-color:rgba(157,207,234,.18) !important; color:#dcecf5 !important; }
html[data-theme="dark"] .quiz-option:hover { background:#143248 !important; border-color:#55bff0 !important; }
html[data-theme="dark"] .quiz-option.selected { background:#123b53 !important; border-color:#55c6f6 !important; color:#f1f9fd !important; }
html[data-theme="dark"] .quiz-back-btn { background:#102536 !important; color:#e8f5fb !important; border-color:rgba(157,207,234,.18) !important; }
html[data-theme="dark"] .quiz-timer { background:#123b53 !important; color:#eaf8ff !important; border-color:rgba(117,210,250,.20) !important; }

/* Forms / common controls. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
  background:#0c1d2b !important;
  color:#eaf6fd !important;
  border-color:rgba(157,207,234,.18) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#7893a5 !important; }
html[data-theme="dark"] label { color:#bed0db !important; }

/* Make theme transitions subtle and stable, without animating text layout. */
html[data-theme="light"] body,
html[data-theme="dark"] body,
html[data-theme="light"] .main-app,
html[data-theme="dark"] .main-app { transition:background-color .22s ease,color .22s ease; }

@media (prefers-reduced-motion:reduce) {
  html[data-theme="light"] body,
  html[data-theme="dark"] body,
  html[data-theme="light"] .main-app,
  html[data-theme="dark"] .main-app { transition:none; }
}



/* ============================================================
   MATRIX ACADEMY — FINAL THEME HARDENING V34
   Fixes the actual cause of low-contrast dark mode: legacy rules
   and !important light-mode surfaces were winning the cascade.
   Frontend visual layer only. No backend/business logic changes.
   ============================================================ */
html[data-theme="dark"] body,
html[data-theme="dark"] .main-app {
    background:#071522 !important;
    color:#f1f7fb !important;
}
html[data-theme="dark"] #page-home,
html[data-theme="dark"] #page-subjects,
html[data-theme="dark"] #page-courses,
html[data-theme="dark"] #page-course-detail,
html[data-theme="dark"] #page-offers,
html[data-theme="dark"] #page-teachers,
html[data-theme="dark"] #page-reviews,
html[data-theme="dark"] #page-faq,
html[data-theme="dark"] #page-contact,
html[data-theme="dark"] #page-student-login,
html[data-theme="dark"] #page-student-dashboard,
html[data-theme="dark"] #page-admin {
    background:#071522 !important;
    color:#f1f7fb !important;
}

/* Header */
html[data-theme="dark"] .top-bar,
html[data-theme="dark"] .navbar {
    background:rgba(7,21,34,.94) !important;
    color:#dcecf5 !important;
    border-color:rgba(157,207,234,.13) !important;
    box-shadow:0 10px 34px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] .top-bar .date-time,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-brand {
    color:#dcecf5 !important;
}
html[data-theme="dark"] .nav-link i,
html[data-theme="dark"] .nav-link.active i {
    color:#62c9f8 !important;
}
html[data-theme="dark"] .nav-link:hover {
    background:#102f44 !important;
    color:#fff !important;
}
html[data-theme="dark"] .nav-link.active {
    background:#12364d !important;
    color:#fff !important;
    box-shadow:inset 0 -2px #29a9f0 !important;
}
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .currency-selector select {
    background:#0d2538 !important;
    color:#eaf6fd !important;
    border-color:rgba(157,207,234,.18) !important;
}

/* Global text primitives. Keep buttons/icons handled by their own rules. */
html[data-theme="dark"] .main-app h1,
html[data-theme="dark"] .main-app h2,
html[data-theme="dark"] .main-app h3,
html[data-theme="dark"] .main-app h4,
html[data-theme="dark"] .main-app h5,
html[data-theme="dark"] .main-app h6 {
    color:#f1f7fb !important;
}
html[data-theme="dark"] .main-app p,
html[data-theme="dark"] .main-app label,
html[data-theme="dark"] .main-app .section-heading-row > p,
html[data-theme="dark"] .main-app .section-subtitle,
html[data-theme="dark"] .main-app .text-muted {
    color:#aec2cf !important;
}
html[data-theme="dark"] .main-app .section-kicker,
html[data-theme="dark"] .main-app .eyebrow,
html[data-theme="dark"] .main-app .section-kicker * {
    color:#62c9f8 !important;
}

/* Home */
html[data-theme="dark"] .premium-hero {
    background:linear-gradient(120deg,#071522 0%,#0a1d2e 48%,#0c2638 100%) !important;
}
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .pathway-chip {
    background:#0e273a !important;
    color:#eaf6fd !important;
    border-color:rgba(157,207,234,.18) !important;
}
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .hero-title > span,
html[data-theme="dark"] .hero-title-accent {
    color:#f4f9fc !important;
    text-shadow:none !important;
}
html[data-theme="dark"] .hero-title-accent { color:#42b8f4 !important; }
html[data-theme="dark"] .hero-desc { color:#b8cad6 !important; }
html[data-theme="dark"] .hero-score-ring {
    background:radial-gradient(circle at 35% 28%,#17364b,#0d2639 58%,#0b2031) !important;
    border-color:rgba(98,201,248,.24) !important;
}
html[data-theme="dark"] .hero-score-ring span { color:#f2f8fc !important; }
html[data-theme="dark"] .hero-score-ring small { color:#9fc0d0 !important; }
html[data-theme="dark"] .hero-float-card {
    background:rgba(13,34,54,.94) !important;
    color:#eef7fc !important;
    border-color:rgba(157,207,234,.18) !important;
}
html[data-theme="dark"] .hero-float-card strong { color:#eef7fc !important; }
html[data-theme="dark"] .hero-float-card small { color:#9fb8c8 !important; }
html[data-theme="dark"] .hero-pathways .pathway-chip { color:#eef7fc !important; }

/* Cards across subjects, courses, offers, teachers, reviews and feature grid. */
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .subject-card,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .teacher-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .home-subject-card,
html[data-theme="dark"] .path-card,
html[data-theme="dark"] .final-cta,
html[data-theme="dark"] .result-panel,
html[data-theme="dark"] .featured-review-card {
    background:#0d2236 !important;
    color:#eaf6fd !important;
    border-color:rgba(157,207,234,.16) !important;
    box-shadow:0 16px 42px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] .glass-card h3,
html[data-theme="dark"] .subject-card h3,
html[data-theme="dark"] .course-card h3,
html[data-theme="dark"] .offer-card h3,
html[data-theme="dark"] .teacher-card h3,
html[data-theme="dark"] .review-card h3,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .home-subject-card h3,
html[data-theme="dark"] .path-card h3 {
    color:#f0f7fb !important;
}
html[data-theme="dark"] .glass-card p,
html[data-theme="dark"] .subject-card p,
html[data-theme="dark"] .course-card p,
html[data-theme="dark"] .offer-card p,
html[data-theme="dark"] .teacher-card p,
html[data-theme="dark"] .review-card p,
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .home-subject-card p,
html[data-theme="dark"] .path-card p {
    color:#a9bfcc !important;
}

/* Course / offer internals that previously inherited nearly-black text. */
html[data-theme="dark"] .course-card-body,
html[data-theme="dark"] .course-card-footer,
html[data-theme="dark"] .offer-content { color:#eaf6fd !important; }
html[data-theme="dark"] .course-card .course-info-item,
html[data-theme="dark"] .course-card .course-info-item span,
html[data-theme="dark"] .offer-meta,
html[data-theme="dark"] .offer-meta span,
html[data-theme="dark"] .offer-feature,
html[data-theme="dark"] .offer-feature span,
html[data-theme="dark"] .offer-assessment-note,
html[data-theme="dark"] .course-price-note {
    color:#a9bfcc !important;
}
html[data-theme="dark"] .course-card .course-info-item i,
html[data-theme="dark"] .offer-meta i,
html[data-theme="dark"] .offer-feature i { color:#55c4f7 !important; }
html[data-theme="dark"] .course-type,
html[data-theme="dark"] .offer-kicker,
html[data-theme="dark"] .course-card small {
    color:#62c9f8 !important;
}
html[data-theme="dark"] .premium-course-header { background:#102b3c !important; color:#f0f7fb !important; }
html[data-theme="dark"] .premium-course-header * { color:inherit !important; }
html[data-theme="dark"] .course-price-old { color:#7894a6 !important; }
html[data-theme="dark"] .offer-pricing strong,
html[data-theme="dark"] .course-price { color:#57c7f8 !important; }
html[data-theme="dark"] .offer-saving { color:#6dd5a5 !important; }

/* Subject/path image frames */
html[data-theme="dark"] .subject-image-wrap { background:#102b3c !important; border-color:rgba(157,207,234,.12) !important; }
html[data-theme="dark"] .path-card img { border-bottom-color:rgba(157,207,234,.14) !important; }

/* Forms / FAQ / auth / dashboard */
html[data-theme="dark"] .faq-question,
html[data-theme="dark"] .faq-answer,
html[data-theme="dark"] .auth-tabs,
html[data-theme="dark"] .dashboard-sidebar,
html[data-theme="dark"] .dash-link {
    background:#0d2236 !important;
    color:#eaf6fd !important;
    border-color:rgba(157,207,234,.16) !important;
}
html[data-theme="dark"] .faq-answer-content,
html[data-theme="dark"] .auth-tab { color:#aec2cf !important; }
html[data-theme="dark"] .faq-question:hover,
html[data-theme="dark"] .dash-link:hover,
html[data-theme="dark"] .dash-link.active { background:#12364d !important; color:#fff !important; }
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .contact-info-item,
html[data-theme="dark"] .contact-info-item a { color:#d8e9f2 !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
    background:#0a1c2b !important;
    color:#edf7fb !important;
    border-color:rgba(157,207,234,.20) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#7893a5 !important; }

/* Footer */
html[data-theme="dark"] .footer { background:#06111b !important; color:#a9bfcc !important; border-color:rgba(157,207,234,.10) !important; }
html[data-theme="dark"] .footer h4 { color:#edf7fb !important; }
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .footer-bottom { color:#9fb8c8 !important; }

/* Buttons: preserve white text against blue/green fills. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary span,
html[data-theme="dark"] .btn-primary i,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-danger { color:#fff !important; }
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-light-outline { color:#eaf6fd !important; background:#102b3d !important; border-color:rgba(157,207,234,.22) !important; }

/* Loading remains premium and keeps the side gallery. */
html[data-theme="dark"] .loading-screen {
    background:radial-gradient(circle at 50% 45%,rgba(72,189,242,.11),transparent 25%),linear-gradient(115deg,#071824 0%,#0b1d2b 35%,#0a1b29 65%,#071824 100%) !important;
    color:#edf7ff !important;
}
html[data-theme="dark"] .loading-wordmark,
html[data-theme="dark"] .loading-kicker,
html[data-theme="dark"] .loading-tagline { color:#b8cad6 !important; }

/* Accessibility: visible focus in both themes. */
html[data-theme="dark"] :focus-visible { outline:2px solid #55c6f6 !important; outline-offset:3px; }

/* =========================================================
   FINAL POLISH — SCORE JOURNEY + STUDENT LOGIN INTRO
   ========================================================= */
.loading-score-journey {
  width:min(820px,88vw);
  margin:22px auto 0;
  position:relative;
  z-index:4;
}
.loading-score-track {
  display:flex;
  align-items:center;
  gap:20px;
  direction:ltr;
  unicode-bidi:isolate;
}
.loading-score-image {
  width:96px;
  height:124px;
  flex:0 0 96px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  background:#fff;
  box-shadow:0 12px 30px rgba(22,127,224,.13);
  position:relative;
}
.loading-score-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(10,47,78,.13));
  pointer-events:none;
}
.loading-score-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.06);
}
.loading-score-image-start img { object-position:center 48%; }
.loading-score-image-end img { object-position:center 48%; }
.loading-score-rail {
  flex:1;
  min-width:300px;
  height:14px;
  border-radius:999px;
  position:relative;
  background:rgba(185,218,236,.48);
  box-shadow:inset 0 1px 2px rgba(16,65,96,.08), 0 0 0 1px rgba(255,255,255,.55);
}
.loading-score-rail-fill {
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#59c9f5 0%,#167fe0 55%,#0b65be 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 18px rgba(22,127,224,.26);
}
.loading-score-rail::before,
.loading-score-rail::after {
  content:"";
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#fff;
  border:2px solid #4bb7f2;
  z-index:2;
}
.loading-score-rail::before { right:-2px; }
.loading-score-rail::after { left:-2px; }
.loading-score-marker {
  --score-progress:0;
  position:absolute;
  top:50%;
  left:calc(var(--score-progress) * 100%);
  width:56px;
  height:48px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.96);
  border:3px solid #167fe0;
  box-shadow:0 8px 25px rgba(22,127,224,.22),0 0 0 7px rgba(22,127,224,.08);
  z-index:5;
  transition:right .18s cubic-bezier(.2,.8,.2,1);
}
.loading-score-marker strong {
  font:900 13px/1 Poppins,Inter,sans-serif;
  color:#0d3558;
  letter-spacing:-.04em;
}
.loading-score-marker::after {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(73,190,242,.22);
  animation:loadingScorePulse 1.5s ease-out infinite;
}
.loading-score-labels {
  display:flex;
  justify-content:space-between;
  direction:ltr;
  unicode-bidi:isolate;
  margin-top:14px;
  padding-inline:106px;
  font:800 .68rem/1 Poppins,Inter,sans-serif;
  color:#66839a;
}
.loading-score-labels span:last-child { color:#167fe0; }
@keyframes loadingScorePulse {
  0% { transform:scale(.78); opacity:.85; }
  70%,100% { transform:scale(1.2); opacity:0; }
}

/* Remove decorative quotation graphics entirely; they read poorly in dark mode. */
.featured-review-mark,
.featured-review-card::after { display:none !important; }
.featured-review-card { grid-template-columns:minmax(0,1fr) 150px !important; }

/* Student login video intro — one presentation per login cycle. */
.student-login-intro {
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}
.student-login-intro.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.student-login-intro-backdrop {
  position:absolute;
  inset:0;
  background:rgba(3,17,29,.72);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}
.student-login-intro-card {
  width:min(920px,94vw);
  max-height:min(900px,94vh);
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(270px,.74fr);
  gap:0;
  overflow:hidden;
  border-radius:28px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 40px 120px rgba(0,0,0,.36),0 0 0 1px rgba(22,127,224,.08);
  transform:translateY(16px) scale(.97);
  transition:transform .34s cubic-bezier(.22,.8,.2,1);
}
.student-login-intro.is-open .student-login-intro-card { transform:none; }
.student-login-video-wrap {
  min-height:520px;
  background:#06111c;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.student-login-video-wrap video {
  width:100%;
  height:100%;
  max-height:min(78vh,720px);
  object-fit:contain;
  display:block;
  background:#06111c;
}
.student-login-intro-copy {
  padding:56px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  direction:rtl;
  text-align:right;
  background:linear-gradient(145deg,#ffffff 0%,#f1f9fe 100%);
}
.student-login-intro-copy .section-kicker { color:#167fe0 !important; }
.student-login-intro-copy h2 {
  margin:12px 0 12px;
  color:#0b2540;
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.2;
}
.student-login-intro-copy p {
  margin:0 0 26px;
  color:#5b7285;
  line-height:1.9;
  font-size:1rem;
}
.student-login-intro-copy .btn { align-self:flex-start; }
.student-login-intro-close {
  position:absolute;
  top:16px;
  inset-inline-end:16px;
  z-index:4;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:rgba(7,25,39,.72);
  color:#fff;
  font:700 26px/1 Inter,sans-serif;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 8px 25px rgba(0,0,0,.2);
}
.student-login-intro-close:hover { transform:scale(1.04); background:#071b2a; }
body.login-intro-open { overflow:hidden; }

html[data-theme="dark"] .student-login-intro-card {
  background:#0c1d2b;
  border-color:rgba(157,207,234,.16);
}
html[data-theme="dark"] .student-login-intro-copy {
  background:linear-gradient(145deg,#0d2234 0%,#0a1a29 100%);
}
html[data-theme="dark"] .student-login-intro-copy h2 { color:#f1f8fc; }
html[data-theme="dark"] .student-login-intro-copy p { color:#a9bfcc; }
html[data-theme="dark"] .loading-score-image {
  border-color:rgba(157,207,234,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}
html[data-theme="dark"] .loading-score-rail {
  background:#173344;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 1px rgba(157,207,234,.08);
}
html[data-theme="dark"] .loading-score-marker {
  background:#102b3c;
  border-color:#55c6f6;
  box-shadow:0 8px 25px rgba(0,0,0,.38),0 0 0 7px rgba(85,198,246,.08);
}
html[data-theme="dark"] .loading-score-marker strong { color:#eaf7fd; }
html[data-theme="dark"] .loading-score-labels { color:#8fa9ba; }

@media (max-width:760px) {
  .loading-score-journey { width:min(680px,90vw); }
  .loading-score-image { width:74px; height:96px; flex-basis:74px; border-radius:12px; }
  .loading-score-track { gap:12px; }
  .loading-score-rail { min-width:200px; height:10px; }
  .loading-score-marker { width:40px; height:40px; }
  .loading-score-marker strong { font-size:11px; }
  .loading-score-labels { padding-inline:86px; margin-top:11px; }
  .student-login-intro { padding:14px; }
  .student-login-intro-card { grid-template-columns:1fr; max-height:94vh; overflow:auto; }
  .student-login-video-wrap { min-height:0; height:min(58vh,620px); }
  .student-login-video-wrap video { max-height:58vh; }
  .student-login-intro-copy { padding:28px 24px 30px; }
  .student-login-intro-copy .btn { align-self:stretch; justify-content:center; }
}


/* =========================================================
   FINAL POLISH V6 — THEME-SAFE NAV LOGO + CLEAR SCORE JOURNEY
   Frontend only. Backend/business logic untouched.
   ========================================================= */
.nav-logo-picture {
  display:block;
  width:106px;
  height:68px;
  position:relative;
  flex:0 0 106px;
}
.nav-logo-picture .nav-logo-img {
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.nav-logo-dark { display:none !important; }
html[data-theme="dark"] .nav-logo-light { display:none !important; }
html[data-theme="dark"] .nav-logo-dark {
  display:block !important;
  filter:drop-shadow(0 0 8px rgba(83,205,255,.26)) drop-shadow(0 5px 18px rgba(0,0,0,.34));
}

.loading-score-journey {
  width:min(820px,90vw) !important;
  margin-top:26px !important;
}
.loading-score-track {
  direction:ltr !important;
  gap:20px !important;
}
.loading-score-image {
  width:96px !important;
  height:124px !important;
  flex-basis:96px !important;
  border-radius:15px !important;
  box-shadow:0 16px 38px rgba(22,127,224,.16), 0 0 0 1px rgba(255,255,255,.55);
}
.loading-score-image img { object-fit:cover !important; transform:scale(1.035) !important; }
.loading-score-rail {
  min-width:300px !important;
  height:14px !important;
}
.loading-score-rail-fill {
  transform-origin:left center !important;
}
.loading-score-marker {
  left:calc(var(--score-progress) * 100%) !important;
  right:auto !important;
  width:58px !important;
  height:58px !important;
  transform:translate(-50%,-50%) !important;
}
.loading-score-marker strong { font-size:14px !important; }
.loading-score-labels {
  direction:ltr !important;
  padding-inline:112px !important;
  font-size:.78rem !important;
  color:#58758d !important;
}
.loading-score-labels span:first-child { color:#1687d9 !important; }
.loading-score-labels span:last-child { color:#0b65be !important; }
html[data-theme="dark"] .loading-score-image {
  background:#0d2435 !important;
  border-color:rgba(157,207,234,.22) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.42), 0 0 0 1px rgba(85,198,246,.08);
}
html[data-theme="dark"] .loading-score-rail { background:#173b50 !important; }
html[data-theme="dark"] .loading-score-labels { color:#a9c4d4 !important; }
html[data-theme="dark"] .loading-score-labels span:first-child { color:#69cfff !important; }
html[data-theme="dark"] .loading-score-labels span:last-child { color:#9bdeff !important; }

@media (max-width:760px) {
  .nav-logo-picture { width:92px; height:58px; flex-basis:92px; }
  .loading-score-journey { width:min(680px,92vw) !important; }
  .loading-score-track { gap:12px !important; }
  .loading-score-image { width:74px !important; height:96px !important; flex-basis:74px !important; }
  .loading-score-rail { min-width:200px !important; height:11px !important; }
  .loading-score-marker { width:44px !important; height:44px !important; }
  .loading-score-marker strong { font-size:11px !important; }
  .loading-score-labels { padding-inline:86px !important; font-size:.7rem !important; }
}
@media (max-width:460px) {
  .loading-score-journey { width:94vw !important; }
  .loading-score-track { gap:8px !important; }
  .loading-score-image { width:56px !important; height:74px !important; flex-basis:56px !important; border-radius:10px !important; }
  .loading-score-rail { min-width:135px !important; height:9px !important; }
  .loading-score-marker { width:38px !important; height:38px !important; }
  .loading-score-labels { padding-inline:64px !important; }
}

/* =========================================================
   FINAL V7 — LOADING LIGHT-FIRST + SCORE ZOOM
   Loading screen is intentionally light in BOTH themes.
   Theme switching applies only after the loading screen reveals the app.
   ========================================================= */
html[data-theme="dark"] #loading-screen,
html[data-theme="dark"] #loading-screen.loading-screen {
  background:
    radial-gradient(circle at 50% 44%, rgba(75,185,243,.13), transparent 27%),
    linear-gradient(135deg,#ffffff 0%,#f9fdff 48%,#eef9ff 100%) !important;
  color:#071b35 !important;
}
html[data-theme="dark"] #loading-screen::before { opacity:.55 !important; }
html[data-theme="dark"] #loading-screen .loading-network { opacity:.35 !important; }
html[data-theme="dark"] #loading-screen .loading-orbit { border-color:rgba(22,135,217,.10) !important; }
html[data-theme="dark"] #loading-screen .loading-kicker { color:#58758d !important; }
html[data-theme="dark"] #loading-screen .loading-tagline { color:#4d6a82 !important; }
html[data-theme="dark"] #loading-screen .loading-logo-wrap {
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(22,135,217,.12) !important;
  box-shadow:0 20px 70px rgba(22,135,217,.12) !important;
}
html[data-theme="dark"] #loading-screen .loading-score-image {
  background:#fff !important;
  border-color:rgba(22,135,217,.14) !important;
  box-shadow:0 18px 42px rgba(22,127,224,.14),0 0 0 1px rgba(255,255,255,.7) !important;
}
html[data-theme="dark"] #loading-screen .loading-score-rail {
  background:rgba(185,218,236,.48) !important;
  box-shadow:inset 0 1px 2px rgba(16,65,96,.08),0 0 0 1px rgba(255,255,255,.55) !important;
}
html[data-theme="dark"] #loading-screen .loading-score-marker {
  background:rgba(255,255,255,.98) !important;
  border-color:#167fe0 !important;
  box-shadow:0 8px 25px rgba(22,127,224,.22),0 0 0 7px rgba(22,127,224,.08) !important;
}
html[data-theme="dark"] #loading-screen .loading-score-marker strong { color:#0d3558 !important; }
html[data-theme="dark"] #loading-screen .loading-score-labels { color:#58758d !important; }
html[data-theme="dark"] #loading-screen .loading-score-labels span:first-child { color:#1687d9 !important; }
html[data-theme="dark"] #loading-screen .loading-score-labels span:last-child { color:#0b65be !important; }

.loading-container {
  width:min(1080px,94vw) !important;
}
.loading-brand-lockup { position:relative; z-index:3; }
.loading-score-journey {
  width:min(1000px,94vw) !important;
  margin:34px auto 0 !important;
}
.loading-score-track {
  gap:28px !important;
  align-items:center !important;
}
.loading-score-image {
  width:160px !important;
  height:183px !important;
  flex:0 0 160px !important;
  border-radius:18px !important;
  border:1px solid rgba(22,135,217,.14) !important;
  box-shadow:0 20px 48px rgba(22,127,224,.17),0 0 0 1px rgba(255,255,255,.72) !important;
}
.loading-score-image img {
  object-fit:cover !important;
  object-position:center !important;
  transform:none !important;
}
.loading-score-image::after {
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(10,47,78,.04)) !important;
}
.loading-score-rail {
  min-width:0 !important;
  height:18px !important;
  border:1px solid rgba(22,135,217,.12) !important;
  box-shadow:inset 0 2px 4px rgba(16,65,96,.09),0 4px 16px rgba(22,127,224,.07) !important;
}
.loading-score-rail-fill {
  background:linear-gradient(90deg,#63d3fa 0%,#1687d9 52%,#075fb7 100%) !important;
  box-shadow:0 0 24px rgba(22,127,224,.34) !important;
}
.loading-score-marker {
  width:72px !important;
  height:72px !important;
  border-width:4px !important;
  box-shadow:0 12px 30px rgba(22,127,224,.24),0 0 0 8px rgba(22,127,224,.09) !important;
}
.loading-score-marker strong {
  font-size:16px !important;
  font-weight:900 !important;
}
.loading-score-labels {
  padding-inline:188px !important;
  margin-top:16px !important;
  font-size:.82rem !important;
  font-weight:900 !important;
}
.loading-score-labels span {
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(22,135,217,.10);
  box-shadow:0 5px 15px rgba(22,127,224,.07);
}
.loading-score-labels span:first-child::before { content:'START'; display:block; font-size:.48rem; letter-spacing:.16em; opacity:.62; margin-bottom:2px; }
.loading-score-labels span:last-child::before { content:'GOAL'; display:block; font-size:.48rem; letter-spacing:.16em; opacity:.62; margin-bottom:2px; }

/* Keep the loading logo clean and premium: never darken it with theme rules. */
html[data-theme="dark"] #loading-screen .loading-logo-img,
html[data-theme="dark"] #loading-screen .loading-wordmark { filter:none !important; }

@media (max-width:900px) {
  .loading-container { width:96vw !important; }
  .loading-score-journey { width:96vw !important; }
  .loading-score-track { gap:16px !important; }
  .loading-score-image { width:128px !important; height:150px !important; flex-basis:128px !important; }
  .loading-score-rail { height:15px !important; }
  .loading-score-marker { width:58px !important; height:58px !important; }
  .loading-score-marker strong { font-size:13px !important; }
  .loading-score-labels { padding-inline:144px !important; }
}
@media (max-width:600px) {
  .loading-score-journey { width:96vw !important; }
  .loading-score-track { gap:8px !important; }
  .loading-score-image { width:88px !important; height:112px !important; flex-basis:88px !important; border-radius:12px !important; }
  .loading-score-rail { height:11px !important; }
  .loading-score-marker { width:46px !important; height:46px !important; border-width:3px !important; }
  .loading-score-marker strong { font-size:11px !important; }
  .loading-score-labels { padding-inline:96px !important; font-size:.68rem !important; }
  .loading-score-labels span { padding:4px 7px; }
}