@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&display=swap');

:root {
    --primary: #3b82f6;
    --primary-dark: #1d4ed8;
    --secondary: #FFD700;
    /* Gold */
    --accent: #f43f5e;

    /* COSMIC THEME OVERRIDES */
    --bg: #0F2027;
    /* Fallback */
    --card: rgba(255, 255, 255, 0.05);
    /* Glass */
    --card-hover: rgba(255, 255, 255, 0.1);

    --text: #f1f5f9;
    --text-light: rgba(255, 255, 255, 0.7);
    --border: rgba(255, 255, 255, 0.1);

    --font-ui: 'Outfit', sans-serif;
    --font-serif: 'Outfit', sans-serif;
    --font-ar: 'Scheherazade New', serif;
    --radius: 20px;
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --glow: 0 0 20px rgba(59, 130, 246, 0.15);
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* --- COSMIC BACKGROUND & ANIMATIONS --- */
.iqan-global-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #1B3A57 0%, #0F2027 100%);
    z-index: -10;
    overflow: hidden;
}

.iqan-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: orbFloat 20s infinite alternate;
    z-index: -9;
}

.orb-gold {
    top: 10%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: rgba(212, 175, 55, 0.2);
    animation-duration: 25s;
}

.orb-blue {
    bottom: 10%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: rgba(41, 128, 185, 0.3);
    animation-duration: 18s;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 30px) scale(1.1);
    }
}

/* --- GEOMETRIC SHAPES --- */
.iqan-shape {
    position: absolute;
    border: 2px solid rgba(212, 175, 55, 0.3);
    z-index: -8;
    animation: floatAndSpin 15s linear infinite;
    pointer-events: none;
}

.shape-hex {
    top: 20%;
    right: 15%;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.02);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.shape-square {
    bottom: 25%;
    left: 15%;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border-color: rgba(255, 255, 255, 0.1);
    animation-duration: 20s;
    animation-delay: 2s;
}

.shape-circle {
    top: 60%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.4);
    border: none;
    filter: blur(2px);
    animation: floatUp 10s infinite linear;
}

@keyframes floatAndSpin {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(20px, -40px) rotate(180deg);
    }

    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-500px);
        opacity: 0;
    }
}

@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- GLASSMORPHISM COMPONENTS --- */
.iqan-glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    color: white;
    font-family: var(--font-ui);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, background 0.3s ease;
}

.iqan-h1 {
    font-family: var(--font-ui);
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 800;
    background: linear-gradient(to right, #ffffff, #e2e2e2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.iqan-brand-gold {
    color: #FFD700;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.iqan-btn-shiny {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(45deg, #D4AF37, #F4C430);
    color: #000;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
}

.iqan-btn-shiny:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

/* PORTAL (MENU) */
.portal-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns on desktop */
    gap: 20px;
    padding-top: 20px;
}

/* Responsive: 1 column on mobile */
@media (max-width: 992px) {
    .portal-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portal-container {
        grid-template-columns: 1fr;
    }
}

.portal-title {
    font-size: 2.2rem;
    font-weight: 900;
    background: linear-gradient(to right, #ffffff, #e2e2e2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    grid-column: 1 / -1;
    /* Span all columns */
}

.portal-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #FFD700;
    /* Gold */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 5px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    grid-column: 1 / -1;
    /* Span all columns */
}

.course-card {
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.8), rgba(10, 25, 40, 0.9)) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    /* Stack icon and text vertically for grid cards */
    align-items: center;
    text-align: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    min-height: 180px;
    color: #ffffff !important;
    animation: floatIn 0.4s ease-out;
}

.course-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.4) !important;
    /* Gold border on hover */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.course-card:active {
    transform: scale(0.98);
}

.course-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
}

/* Specific Course Colors */
.icon-izhar {
    background: #10b981;
    color: white;
}

/* Emerald */
.icon-idgham {
    background: #3b82f6;
    color: white;
}

/* Blue */
.icon-bila {
    background: #64748b;
    color: white;
}

/* Slate */
.icon-ikhfaa {
    background: #f59e0b;
    color: white;
}

/* Amber */
.icon-iqlab {
    background: #8b5cf6;
    color: white;
}

/* Violet */

/* TRANSPARENCY OVERRIDES */
body {
    background-color: #0F2027 !important;
    margin: 0;
}

.body,
.main-container,
.viewport,
.dashboard-shell {
    background: transparent !important;
}

.header,
.footer {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(5px);
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* HEADER OVERRIDES */
.portal-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #ffffff, #e2e2e2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.portal-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFD700;
    /* Gold */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 5px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.course-card,
.dark-card {
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.8), rgba(10, 25, 40, 0.9)) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    color: #ffffff !important;
}

.course-card:hover,
.dark-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.3) !important;
    /* Gold border on hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.course-completed {
    border: 2px solid #FFD700 !important;
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(0, 0, 0, 0.6)) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15) !important;
}

.course-completed .dc-title {
    color: #FFD700 !important;
}

.course-name,
.dc-title {
    color: white !important;
    font-family: var(--font-ui);
}

.course-desc,
.dc-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

.progress-track {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--secondary);
    width: 0%;
    transition: width 0.5s ease;
}

/* VIEWPORT */
.viewport {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    padding-bottom: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* FOOTER NAV */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.05);
}

.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.btn-nav {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-family: var(--font-ui);
}

.btn-nav:hover {
    background: var(--bg);
    border-color: #cbd5e1;
}

.btn-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
}

.btn-nav:active:not(:disabled) {
    background: #e2e8f0;
    transform: scale(0.98);
}

.btn-main {
    flex: 1;
    padding: 16px 30px;
    border-radius: 50px;
    /* Pill shape */
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    background: linear-gradient(45deg, #D4AF37, #F4C430);
    /* Shiny Gold */
    color: #0F2027;
    /* Dark text */
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

.btn-main:active {
    transform: translateY(1px);
}

.btn-main:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* UI ELEMENTS */
/* UI ELEMENTS */
.mentor-box {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-bottom: 32px;
    animation: slideIn 0.3s ease-out;
    align-items: flex-start;
}

.mentor-avatar {
    width: 42px;
    height: 42px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(30, 41, 59, 0.1);
}

.mentor-bubble {
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.8), rgba(10, 25, 40, 0.9));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 20px;
    border-radius: 0 25px 25px 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    line-height: 1.6;
    color: #e0e0e0;
    flex: 1;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    animation: floatIn 0.4s ease-out;
}

.concept-card {
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.8), rgba(10, 25, 40, 0.9));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 25px;
    padding: 32px 24px;
    text-align: center;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    animation: floatIn 0.4s ease-out;
}

.concept-card h3 {
    margin-top: 0;
    color: #FFD700;
    /* Gold for titles */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.concept-card p {
    color: #e0e0e0;
    line-height: 1.6;
}

.concept-card div {
    color: #e0e0e0;
}

/* STYLES THÉORIE */
.ar-big {
    font-family: var(--font-ar);
    font-size: 2.8rem;
    color: #FFD700;
    /* Gold for Arabic emphasis */
    line-height: 1.2;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.ar-inline {
    font-family: var(--font-ar);
    font-size: 1.6rem;
    color: var(--secondary-dark);
    line-height: 1;
    vertical-align: middle;
    margin: 0 4px;
}

.recap-grid {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

.simple-list {
    text-align: left;
    margin-top: 20px;
    padding: 0 10px;
}

.simple-item {
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #e0e0e0;
    /* Light grey for dark theme */
    line-height: 1.5;
    display: flex;
    gap: 12px;
    align-items: center;
}

.check-icon {
    color: var(--primary);
    font-weight: bold;
    font-size: 0.8rem;
    background: #e6fffa;
    padding: 4px 8px;
    border-radius: 4px;
}

.check-icon.bad {
    color: var(--accent-dark);
    background: #fff5f5;
}

.letters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
    direction: rtl;
}

.l-card {
    background: white;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    border: 1px solid #eee;
    color: #2d3436;
    /* Force dark text */
}

.l-ar {
    font-family: var(--font-ar);
    font-size: 2.2rem;
    line-height: 1;
    color: #2d3436;
    /* Force dark text */
}

.card-qalqala {
    border-left: 4px solid #ef4444;
    /* Rouge Alerte */
}

/* RA MODULES */
.card-tafkhim {
    border-left: 4px solid #d35400;
    /* Terracotta Fort */
}

.card-tarqiq {
    border-left: 4px solid #74b9ff;
    /* Bleu Ciel */
}

.card-jawaz {
    border-left: 4px solid #fdcb6e;
    /* Or Exception */
}

.tip-box {
    background: #f1f9ff;
    border-left: 4px solid var(--secondary);
    padding: 15px;
    border-radius: 4px;
    margin: 20px 0;
    text-align: left;
    color: #2d3436;
    /* Force dark text */
}

.tip-chars {
    font-family: var(--font-ar);
    font-size: 2rem;
    color: #0984e3;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    direction: rtl;
    border-bottom: 1px solid #ddebf7;
    padding-bottom: 10px;
}

/* BOUTONS AUDIO DÉFINITION */
.def-audio-row {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    justify-content: center;
}

.def-audio-btn {
    background: white;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.def-audio-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.def-audio-btn:active {
    background: #f8f9fa;
    transform: translateY(1px);
}

.def-audio-btn.playing {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

/* ATELIER AUDIO */
.instruction-banner {
    background: white;
    border-bottom: 2px solid var(--primary);
    color: var(--text);
    padding: 12px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.step-n {
    background: var(--primary);
    color: white;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    margin-right: 5px;
}

.audio-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px 20px;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ac-header {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 15px;
}

.ac-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    background: #eee;
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ac-arabic {
    font-family: var(--font-ar);
    font-size: 3.2rem;
    color: #2d3436;
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

.ac-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.audio-hint {
    font-size: 0.9rem;
    color: #555;
    text-align: center;
    background: #f9f9f9;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #eee;
    font-style: italic;
}

.btn-audio {
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
    min-width: 120px;
    background: white;
    color: #333;
}

.btn-listen:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.btn-listen.playing {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-record:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

.btn-record.recording {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btn-self {
    background: #f0f7ff;
    color: #0984e3;
    border-color: #cce4ff;
    display: none;
}

.btn-self.playing {
    background: #0984e3;
    color: white;
}

/* IMMERSION (MUSHAF STYLE) */
.immersion-instruction {
    background: white;
    color: #333;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 4px solid var(--primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    line-height: 1.6;
}

.mushaf-container {
    background: #fffdf5;
    border: 1px solid #e6dcb8;
    padding: 30px 25px;
    border-radius: 8px;
    direction: rtl;
    line-height: 2.8;
    font-family: var(--font-ar);
    font-size: 2.2rem;
    text-align: justify;
    color: #2c2c2c;
}

.m-word {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: 0.1s;
    display: inline-block;
    position: relative;
}

.m-word:hover {
    background: rgba(0, 0, 0, 0.04);
}

.m-word.selected {
    background: #d1ecf1;
    outline: 2px solid #0c5460;
    box-shadow: 0 0 4px rgba(12, 84, 96, 0.3);
}

.m-word.val-correct {
    color: #008f72;
    background: rgba(0, 184, 148, 0.1);
    font-weight: bold;
}

.m-word.val-wrong {
    color: #d63031;
    background: rgba(214, 48, 49, 0.1);
    text-decoration: line-through;
    text-decoration-color: #d63031;
}

.m-word.val-missed {
    border-bottom: 2px dashed #00b894;
}

.verse-end {
    color: #d4b886;
    font-size: 1.4rem;
    margin: 0 8px;
    display: inline-block;
    vertical-align: middle;
    font-feature-settings: "cv01";
}

/* FEEDBACK IMMERSION */
.immersion-feedback-list {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.if-item {
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
}

.if-ar {
    font-family: var(--font-ar);
    font-size: 1.6rem;
    color: #2d3436;
    margin-right: auto;
    word-break: normal !important;
    white-space: nowrap !important;
}

.if-expl {
    color: #555;
    font-size: 0.8rem;
    font-weight: 600;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* QUIZ */
.quiz-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* GENERIC CARD */
.card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #2d3436;
    border: 1px solid var(--border);
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.q-btn {
    background: white;
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
    color: #2d3436;
    /* Force dark text for visibility */
}

.q-btn:hover {
    border-color: #bbb;
}

/* STYLE SÉLECTION NEUTRE (BLEU) */
.q-btn.selected {
    border: 2px solid var(--secondary);
    background: #eef7ff;
    box-shadow: 0 0 0 4px rgba(9, 132, 227, 0.1);
}

.q-text {
    font-family: var(--font-ar);
    font-size: 2.4rem;
    color: #2d3436;
}

/* STYLES VALIDATION (VERT/ROUGE) */
.q-btn.correct {
    background: #f0fdf4;
    border-color: var(--primary);
    color: var(--primary-dark);
}

.q-btn.wrong {
    background: #fffafa;
    border-color: var(--accent);
    color: var(--accent-dark);
    opacity: 0.7;
}

/* FEEDBACK & ZONE RENCONTRE */
.feedback-box {
    margin-top: 25px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    background: white;
    border: 1px solid var(--border);
    display: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.fb-logic {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    direction: rtl;
}

.fb-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.fb-blue {
    background: #f0f7ff;
    color: var(--secondary);
    border: 1px solid #cce4ff;
}

.fb-green {
    background: #f0fdf4;
    color: var(--primary-dark);
    border: 1px solid #bbf7d0;
}

.fb-arrow {
    color: #ccc;
    font-size: 1.2rem;
}

.mz-container {
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.85), rgba(10, 25, 40, 0.9)) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    margin-top: 15px;
}

.mz-phrase {
    font-family: 'Scheherazade New', serif;
    font-size: 3.8rem;
    color: #FFD700 !important;
    /* Gold for Arabic */
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    direction: rtl;
    line-height: 1.4;
    margin-bottom: 20px;
}

.mz-analysis {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    direction: ltr;
}

.mz-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mz-box {
    font-family: 'Scheherazade New', serif;
    font-size: 2.4rem;
    padding: 5px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 70px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mz-blue {
    color: #60A5FA !important;
    /* Light blue */
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.15);
}

.mz-green {
    color: #10B981 !important;
    /* Green */
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.15);
}

.mz-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 10px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8) !important;
}

.mz-icon {
    font-size: 1.5rem;
    margin-top: 45px;
    color: rgba(255, 255, 255, 0.5);
}

.ex-logic {
    text-align: left;
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.8), rgba(10, 25, 40, 0.9)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border-left: 3px solid #FFD700;
    margin-top: 20px;
    font-size: 0.95rem;
    color: #e0e0e0 !important;
    line-height: 1.7;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ex-def {
    display: block;
    margin-top: 12px;
    font-style: italic;
    color: #008f72;
    font-size: 0.9rem;
}

.eq-container {
    width: 100%;
}

.eq-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    border: 1px solid #eee;
    margin-top: 10px;
}

.eq-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 25px 0;
    font-size: 1.1rem;
    direction: ltr;
}

.eq-tag {
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.tag-blue {
    background: #f0f7ff;
    color: #0984e3;
    border: 1px solid #cce4ff;
}

.tag-green {
    background: #f0fdf4;
    color: #008f72;
    border: 1px solid #bbf7d0;
}

.card-jawaz {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    border-left: 5px solid #FBC02D;
}

.card-lam {
    background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
    border-left: 5px solid #9C27B0;
}

.card-ghunna {
    background: linear-gradient(135deg, #FCE4EC, #F8BBD0);
    border-left: 5px solid #E91E63;
}

.card-mad {
    background: linear-gradient(135deg, #E0F7FA, #B2EBF2);
    border-left: 5px solid #00BCD4;
}

.eq-plus {
    color: #ccc;
    font-weight: 300;
    font-size: 1.5rem;
}

.res-text {
    font-weight: 800;
    color: #00b894;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* SCHÉMA ALGORITHME */
.flow-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

.flow-step {
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.8), rgba(10, 25, 40, 0.9)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 18px;
    border-radius: 15px;
    width: 100%;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #e0e0e0 !important;
}

.flow-num {
    background: rgba(255, 215, 0, 0.2);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    color: #FFD700;
    flex-shrink: 0;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.flow-arrow {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
}

.flow-final {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.2)) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #10B981 !important;
    font-weight: 700;
    justify-content: center;
    text-align: center;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* Audio Row for Examples */
.audio-row-item {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid var(--border);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    gap: 15px;
}

.ar-xs {
    font-family: var(--font-ar);
    font-size: 1.5rem;
    color: var(--primary);
    width: 30px;
    text-align: center;
    font-weight: bold;
}

.ar-word {
    font-family: var(--font-ar);
    font-size: 1.8rem;
    flex: 1;
    color: var(--text);
}

.mini-play {
    background: white;
    border: 1px solid var(--border);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.mini-play:active {
    transform: scale(0.95);
}

.ex-label {
    font-size: 0.8rem;
    color: #888;
    margin-left: 10px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PORTAL STYLES */
.portal-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 20px 0;
}

.portal-title {
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
    color: var(--text);
}

.course-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.course-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.course-card:active {
    transform: scale(0.98);
}

.course-icon {
    width: 60px;
    height: 60px;
    background: var(--bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.course-info {
    flex: 1;
}

.course-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.course-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.home-btn {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
}

/* SIDE PANEL (Interactive Immersion) */
.side-panel {
    position: fixed;
    top: 60px;
    right: -340px;
    width: 320px;
    height: calc(100% - 60px - 70px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.05);
    z-index: 90;
    transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
}

.side-panel.open {
    right: 0;
}

.sp-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(248, 249, 250, 0.8);
}

.sp-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    letter-spacing: -0.5px;
}

.sp-subtitle {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 4px;
    font-weight: 500;
}

.btn-sp-close {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    margin: -5px -5px 0 0;
    transition: color 0.2s;
}

.btn-sp-close:hover {
    color: var(--accent);
}

.sp-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.sp-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.btn-sp-opt {
    padding: 14px 16px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text);
    transition: all 0.2s;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-sp-opt:hover {
    border-color: var(--secondary);
    background: #fdfdfd;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.btn-sp-opt.active {
    background: #f0f7ff;
    border-color: var(--secondary);
    color: var(--primary-dark);
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.answer-log {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.answer-log h5 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.log-item {
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.log-word {
    font-family: var(--font-ar);
    font-size: 1.3rem;
    color: var(--text);
}

.log-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-choice {
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.log-status {
    font-size: 1.1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE (Mobile) */
@media (max-width: 768px) {
    .side-panel {
        top: auto;
        bottom: -70vh;
        left: 0;
        right: 0;
        width: 100%;
        height: 60vh;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 20px 20px 0 0;
        transition: bottom 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .side-panel.open {
        bottom: 0;
        right: 0;
    }

    .viewport {
        padding-bottom: 60vh;
        /* Make space for panel */
    }

    .sp-header {
        border-radius: 20px 20px 0 0;
    }
}

/* === DARK PREMIUM THEME REMOVED FOR LIGHT AESTHETIC === */
/* 
:root {
    --bg-main: #0B1120;
    --bg-card: #151E32;
    --text-main: #FFFFFF;
    --text-muted: #94A3B8;
    --accent-gold: #FBBF24;
    --accent-blue: #38BDF8;
} 
*/

/* Minimalist Menu Styles */
.nav-minimal-select {
    appearance: none;
    background-color: transparent;
    border: none;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    outline: none;
    transition: color 0.2s;
}

.nav-minimal-select:hover {
    color: var(--primary);
}

.home-icon-minimal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card);
    /* Adjusted for dark theme */
    box-shadow: var(--shadow);
    color: var(--text);
    border: 1px solid var(--border);
    transition: 0.2s;
}

.home-icon-minimal:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}





.dashboard-shell {
    min-height: 100vh;
    padding: 0 0 60px 0;
    display: block;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    max-width: none;
}

.brand-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.brand-logo span {
    color: var(--accent-blue);
}

.user-greet {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.main-container {
    max-width: none;
    margin: 0;
    padding: 0 40px;
}

.hero-card {
    background: #101623;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 60px;
    border-left: 4px solid var(--accent-gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hero-text h1 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    color: white;
}

.hero-text p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin: 0;
}

.btn-hero {
    background: var(--accent-blue);
    color: #0F172A;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-hero:hover {
    background: #7dd3fc;
    transform: translateY(-2px);
}

.section-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 35px;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    margin: 0;
    color: white;
}

.section-subtitle {
    color: #FFD700;
    font-size: 1rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Dark Grid for Courses - 4 columns on desktop */
.dark-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .dark-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dark-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dark-grid {
        grid-template-columns: 1fr;
    }
}

.dark-card {
    background: linear-gradient(145deg, rgba(20, 40, 60, 0.8), rgba(10, 25, 40, 0.9)) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px;
    padding: 28px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    min-height: 200px;
    animation: floatIn 0.4s ease-out;
}

.dark-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.4) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.dc-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFD700;
}

.dc-icon-box svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.icon-blue {
    color: #60A5FA;
}

.icon-purple {
    color: #C084FC;
}

.icon-yellow {
    color: #FFD700;
}

.icon-gold {
    color: #FFD700;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
}

.icon-green {
    color: #10B981;
}

.dc-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dc-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.dc-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0;
    line-height: 1.5;
}

.dc-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-tag {
    color: #FFD700;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dc-link {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.dark-card:hover .dc-link {
    gap: 10px;
}

/* ADDED FOR CONTRAST */
.btn-opt {
    color: #2d3436;
    /* Force dark text */
    font-weight: 600;
}

/* DEFINITION BOX CONTRAST FIX - NUN SAKINA STYLE (LIGHT) */
.def-box {
    text-align: left;
    margin: 15px;
    list-style-type: none;
    background: #e0f7fa !important;
    /* Light Cyan */
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #00acc1 !important;
    color: #006064 !important;
    /* Dark Teal */
}

.def-box li,
.def-box strong,
.def-box span,
.def-box p {
    color: #006064 !important;
    /* Force Dark Teal */
    text-shadow: none !important;
}

.def-box li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* SMALL QUIZ BUTTONS CONTRAST FIX */
.q-btn-small {
    background: white;
    color: #2d3436;
    /* Force dark text */
    font-weight: 600;
    transition: 0.2s;
}

.q-btn-small:hover {
    background: #f8f9fa;
    border-color: #cbd5e1;
}

/* ================================================== */
/* GLOBAL TEXT CONTRAST FIXES FOR COURSE CONTENT      */
/* ================================================== */

/* Fix grey text in concept-card (dark theme) */
.concept-card p,
.concept-card div {
    color: #e0e0e0;
}

/* Fix text in light-colored boxes within dark theme */
.concept-card [style*="background:#e3f2fd"],
.concept-card [style*="background: #e3f2fd"],
.concept-card [style*="background:#fff3e0"],
.concept-card [style*="background: #fff3e0"],
.concept-card [style*="background:#fff"],
.concept-card [style*="background: #fff"],
.concept-card [style*="background:white"],
.concept-card [style*="background: white"],
.concept-card [style*="background:#f9fbe7"],
.concept-card [style*="background: #f9fbe7"],
.concept-card [style*="background:#ffebee"],
.concept-card [style*="background: #ffebee"],
.concept-card [style*="background:#e8f5e9"],
.concept-card [style*="background: #e8f5e9"],
.concept-card [style*="background:#f5f5f5"],
.concept-card [style*="background: #f5f5f5"] {
    color: #2d3436 !important;
}

.concept-card [style*="background:#e3f2fd"] *,
.concept-card [style*="background: #e3f2fd"] *,
.concept-card [style*="background:#fff3e0"] *,
.concept-card [style*="background: #fff3e0"] *,
.concept-card [style*="background:#fff"] *,
.concept-card [style*="background: #fff"] *,
.concept-card [style*="background:white"] *,
.concept-card [style*="background: white"] *,
.concept-card [style*="background:#f9fbe7"] *,
.concept-card [style*="background: #f9fbe7"] *,
.concept-card [style*="background:#ffebee"] *,
.concept-card [style*="background: #ffebee"] *,
.concept-card [style*="background:#e8f5e9"] *,
.concept-card [style*="background: #e8f5e9"] *,
.concept-card [style*="background:#f5f5f5"] *,
.concept-card [style*="background: #f5f5f5"] * {
    color: #2d3436;
}

/* Ensure labels in light boxes stay readable */
.concept-card [style*="background:#e3f2fd"] [style*="font-weight:bold"],
.concept-card [style*="background:#fff3e0"] [style*="font-weight:bold"] {
    color: #1a1a1a !important;
}

/* Fix the letters grid - ensure dark text on white cards */
.letters-grid .l-card {
    background: white !important;
    color: #2d3436 !important;
}

.letters-grid .l-card .l-ar {
    color: #1a237e !important;
}

/* Fix audio comparison boxes - ensure proper contrast */
.btn-audio,
.btn-listen {
    color: #2d3436 !important;
    background: white !important;
}

.btn-audio div,
.btn-listen div {
    color: inherit !important;
}

.btn-audio [style*="color:#555"],
.btn-listen [style*="color:#555"],
.btn-audio [style*="color: #555"],
.btn-listen [style*="color: #555"] {
    color: #333 !important;
}

/* Ensure green correct buttons have readable text */
[style*="background:#e8f5e9"] [style*="color:#2e7d32"],
[style*="background: #e8f5e9"] [style*="color:#2e7d32"] {
    color: #1b5e20 !important;
}

/* Ensure red incorrect buttons have readable text */
[style*="background:#ffebee"] [style*="color:#c62828"],
[style*="background: #ffebee"] [style*="color:#c62828"] {
    color: #b71c1c !important;
}

/* Fix the Makhraj example labels */
.ar-med {
    color: #1a237e !important;
}

/* Fix grey italic notes in green technical boxes */
[style*="background:#f9fbe7"] p[style*="font-style:italic"] {
    color: #33691e !important;
}

/* Fix small grey descriptive text everywhere */
[style*="color:#555"],
[style*="color: #555"] {
    color: #333 !important;
}

[style*="color:#666"],
[style*="color: #666"] {
    color: #333 !important;
}

/* But keep light text for dark backgrounds in concept cards */
.concept-card>p,
.concept-card>div:not([style*="background:"]) {
    color: #e0e0e0 !important;
}

/* Fix tip boxes and flow charts text */
.tip-box {
    color: #2d3436 !important;
}

.tip-box * {
    color: #2d3436 !important;
}

/* Fix audio hint text */
.audio-hint {
    color: #333 !important;
}

/* Fix recap grid text */
.recap-grid {
    color: #e0e0e0 !important;
}

/* Fix step indicators text */
.flow-step div {
    color: #e0e0e0 !important;
}

/* Make sure example explanation boxes have good contrast */
.ex-logic {
    color: #e0e0e0 !important;
}

.ex-logic strong {
    color: #ffffff !important;
}

/* Improved audio card styling for dark theme */
.audio-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.ac-tag {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

.ac-arabic {
    color: #FFD700 !important;
}

/* ================================================== */
/* ADDITIONAL CONTRAST FIXES FOR LAVENDER, GREY BLUE  */
/* ================================================== */

/* Fix lavender/purple headings - make them brighter on dark backgrounds */
.concept-card [style*="color:#6c5ce7"],
.concept-card [style*="color: #6c5ce7"] {
    color: #a29bfe !important;
}

.concept-card h4[style*="color:#6c5ce7"] {
    color: #b8b5ff !important;
}

/* Fix grey titles on dark backgrounds (#444) */
.concept-card [style*="color:#444"],
.concept-card [style*="color: #444"] {
    color: #e0e0e0 !important;
}

.concept-card h4[style*="color:#444"] {
    color: #ffffff !important;
}

/* Fix step indicator banner - grey text on white background */
.instruction-banner {
    color: #2d3436 !important;
}

.instruction-banner span {
    color: #2d3436 !important;
}

/* Make the step numbers visible */
.step-n {
    background: #4285f4 !important;
    color: white !important;
}

/* Fix the grey italic text in astuce/tip boxes */
[style*="background:#fff9c4"] p,
[style*="background: #fff9c4"] p,
.concept-card [style*="background:#fff9c4"] *,
.concept-card [style*="background: #fff9c4"] * {
    color: #5d4037 !important;
}

/* Fix grey labels in letter cards within dark theme */
.concept-card .l-card div:last-child,
.concept-card [style*="color:#777"],
.concept-card [style*="color: #777"],
.concept-card [style*="color:#888"],
.concept-card [style*="color: #888"] {
    color: #555 !important;
}

/* Ensure letter cards have dark text */
.concept-card .l-card {
    background: white !important;
    color: #2d3436 !important;
}

.concept-card .l-card * {
    color: #2d3436 !important;
}

/* Fix the Waw, Alif labels in letter cards */
.concept-card .l-card .l-name,
.concept-card .l-card div[style*="font-size:0.75rem"],
.concept-card .l-card div[style*="font-size:0.8rem"] {
    color: #1565c0 !important;
}

/* Make Arabic letters in cards more visible */
.concept-card .l-card .l-ar {
    color: #1a237e !important;
}

/* Fix the bottom text in letter cards (Prolonge la...) */
.l-card div[style*="color:#666"],
.l-card div[style*="color:#555"] {
    color: #333 !important;
}

/* Fix list items with grey text within concept cards */
.concept-card ul li[style*="color:#555"],
.concept-card ul li[style*="color:#666"],
.concept-card ul li[style*="color:#444"] {
    color: #e0e0e0 !important;
}

/* Fix the list with checkmarks (Mad Tabi'i, Mad Wajib/Jaiz, etc.) */
.concept-card ul[style*="color:#444"] li,
.concept-card ul li {
    color: #e0e0e0 !important;
}

/* Fix the grey explanatory text at the bottom */
.concept-card p[style*="color:#666"],
.concept-card p[style*="color:#555"],
.concept-card p[style*="color:#444"] {
    color: #b0b0b0 !important;
}

/* Fix Al-Qalb and Cela signifie... lavender text */
.concept-card [style*="color:#d63031"],
.concept-card [style*="color: #d63031"] {
    color: #ff7675 !important;
}

/* Fix text inside orange/coral boxes */
.concept-card [style*="color:#e17055"],
.concept-card [style*="color: #e17055"] {
    color: #fab1a0 !important;
}

/* Fix feedback and analysis text in dark areas */
.feedback-box {
    color: #333 !important;
}

.feedback-box .fb-logic {
    color: #333 !important;
}

/* Make sure any remaining grey inline text is visible */
.concept-card span[style*="color:#555"],
.concept-card span[style*="color:#666"],
.concept-card span[style*="color:#777"] {
    color: #ccc !important;
}

/* Fix the NOUN SAKINA button text */
[style*="background:rgba(10,20,35,0.6)"] {
    color: #ffffff !important;
}

[style*="background:rgba(10,20,35,0.6)"] * {
    color: #ffffff !important;
}

/* ================================================== */
/* PORTAL GLASS HERO SECTION                          */
/* ================================================== */

.portal-dark-mode {
    background: transparent;
}

.portal-hero-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    margin: 30px auto 40px;
    max-width: 700px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    animation: floatIn 0.6s ease-out;
}

.hero-brand {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 20px;
}

.brand-itqan {
    font-family: var(--font-ui);
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.brand-pro {
    font-family: var(--font-ui);
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

.hero-title {
    font-family: var(--font-ui);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.2;
}

.hero-title .gold-text {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 25px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #FFD700;
    font-weight: 600;
    margin-bottom: 25px;
}

.badge-icon {
    font-size: 1.2rem;
}

.hero-nav {
    margin-top: 20px;
}

.nav-select-glass {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 1rem;
    color: #ffffff;
    font-family: var(--font-ui);
    cursor: pointer;
    min-width: 250px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    transition: all 0.3s ease;
}

.nav-select-glass:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 215, 0, 0.4);
}

.nav-select-glass option {
    background: #1a2a3a;
    color: white;
    padding: 10px;
}

.portal-footer {
    margin-top: 60px;
    text-align: center;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* ================================================== */
/* NAVIGATION BUTTONS - CENTERED LAYOUT               */
/* ================================================== */

.footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px;
    padding: 15px 20px !important;
    background: rgba(10, 20, 35, 0.95) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

#btn-prev,
#btn-next {
    flex: 0 0 auto;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    text-align: center;
}

#btn-prev {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

#btn-prev:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

#btn-prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#btn-next,
#btn-action {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: none;
    color: #1a1a1a;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

#btn-action {
    flex: 1;
    max-width: 300px;
    padding: 14px 30px;
    border-radius: 12px;
    font-size: 1rem;
}

#btn-next:hover,
#btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

#btn-next:disabled,
#btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ================================================== */
/* ADDITIONAL TEXT CONTRAST FIXES                     */
/* ================================================== */

/* Fix "Durée : 4 ou 5 temps" grey text */
.concept-card [style*="color:#555"],
.concept-card [style*="color: #555"],
.concept-card [style*="color:#666"],
.concept-card [style*="color: #666"] {
    color: #333 !important;
}

/* Fix grey text in white/light boxes */
[style*="background:#fff"] [style*="color:#555"],
[style*="background:#fff"] [style*="color:#666"],
[style*="background:white"] [style*="color:#555"],
[style*="background:white"] [style*="color:#666"],
[style*="background:#f5f5f5"] [style*="color:#555"],
[style*="background:#f5f5f5"] [style*="color:#666"] {
    color: #333 !important;
}

/* Fix "Inna (Vraiment/Certes)" type labels */
.concept-card [style*="color:#999"],
.concept-card [style*="color: #999"] {
    color: #555 !important;
}

/* Fix grey italic notes */
.concept-card [style*="font-style:italic"][style*="color:#"],
[style*="background:#fff9c4"] [style*="font-style:italic"] {
    color: #5d4037 !important;
}

/* Fix Muttasil/Munfasil labels */
.concept-card [style*="color:#777"],
.concept-card [style*="color: #777"] {
    color: #2d3436 !important;
}

/* Yellow note boxes - ensure dark text */
[style*="background:#fff9c4"],
[style*="background: #fff9c4"],
[style*="background:#fffde7"],
[style*="background: #fffde7"] {
    color: #5d4037 !important;
}

[style*="background:#fff9c4"] *,
[style*="background: #fff9c4"] *,
[style*="background:#fffde7"] *,
[style*="background: #fffde7"] * {
    color: #5d4037 !important;
}

/* Pink/rose boxes */
[style*="background:#ffebee"],
[style*="background: #ffebee"],
[style*="background:#fce4ec"],
[style*="background: #fce4ec"] {
    color: #880e4f !important;
}

[style*="background:#ffebee"] *,
[style*="background: #ffebee"] *,
[style*="background:#fce4ec"] *,
[style*="background:#fce4ec"] * {
    color: #880e4f !important;
}

/* ================================================== */
/* HOME LINK BUTTON IN PORTAL                         */
/* ================================================== */

.home-link-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.home-link-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateX(-3px);
}

.home-link-btn svg {
    stroke: currentColor;
}

.portal-hero-glass {
    position: relative;
}

/* ================================================== */
/* COMPREHENSIVE RESPONSIVE DESIGN                    */
/* ================================================== */

/* Tablet and smaller (max 1024px) */
@media (max-width: 1024px) {
    .dark-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .portal-hero-glass {
        margin: 20px 15px 30px;
        padding: 45px 30px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .dark-card {
        padding: 18px;
    }
}

/* Mobile landscape and smaller tablets (max 768px) */
@media (max-width: 768px) {
    .dark-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .portal-hero-glass {
        margin: 15px 10px 25px;
        padding: 40px 25px;
        border-radius: 18px;
    }

    .home-link-btn {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 20px;
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    .hero-brand {
        flex-direction: row;
        gap: 5px;
    }

    .brand-itqan,
    .brand-pro {
        font-size: 1.5rem !important;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        padding: 0 10px;
    }

    .hero-badge {
        padding: 8px 15px;
        font-size: 0.8rem;
    }

    .nav-select-glass {
        min-width: 200px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .section-header {
        margin: 25px 0 15px;
        padding: 0 10px;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .dark-card {
        flex-direction: column;
        /* Vertical stack like home */
        padding: 25px 20px;
        gap: 15px;
        text-align: center;
        /* Center content */
        align-items: center;
        min-height: auto;
    }

    .dc-icon-box {
        width: 65px;
        height: 65px;
        min-width: 65px;
        border-radius: 18px;
        font-size: 1.8rem;
        margin: 0 auto;
        /* Center icon */
    }

    .dc-icon-box svg {
        width: 32px;
        height: 32px;
    }

    .dc-content {
        align-items: center;
        width: 100%;
    }

    .dc-title {
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
        text-align: center;
        white-space: normal;
        display: block;
    }

    .dc-desc {
        font-size: 0.9rem !important;
        display: block !important;
        /* Make visible again */
        color: rgba(255, 255, 255, 0.7) !important;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .dc-footer {
        width: 100%;
        justify-content: space-between;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Mobile Footer Refinement */
    .footer {
        flex-direction: column;
        gap: 10px;
        padding: 10px 15px;
        /* Reduced padding */
    }

    .nav-row {
        flex-direction: row !important;
        /* Force row on mobile */
        width: 100%;
        gap: 8px;
        /* Tighter gap */
        justify-content: space-between;
    }

    /* Hide text, show icons on mobile */
    .d-txt {
        display: none;
    }

    .d-icon {
        display: inline-block;
        font-size: 1.4rem;
        line-height: 1;
    }

    /* Button sizing for single line */
    .btn-nav {
        width: auto !important;
        padding: 0 15px !important;
        min-width: 50px;
    }

    .btn-main {
        flex-grow: 1;
        /* Take remaining space */
        width: auto !important;
        padding: 12px 10px !important;
        font-size: 0.95rem !important;
    }

    .section-header {
        text-align: center;
    }

    #btn-prev,
    #btn-next {
        /* Reset manual padding from previous step */
        font-size: 1rem;
    }

    /* Mobile Text & Layout Fixes */
    @media (max-width: 480px) {
        .dark-card {
            padding: 20px 15px !important;
        }

        .dc-title {
            font-size: 1.1rem !important;
        }

        .main-container {
            padding: 0 15px !important;
            overflow-x: hidden;
            /* Prevent container overflow */
        }

        /* Prevent Concept Card Overflow */
        .concept-card {
            padding: 20px 15px !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            overflow-wrap: break-word !important;
            word-wrap: break-word !important;
        }

        /* Adjust Large Arabic Text */
        .ar-big {
            font-size: 1.8rem !important;
            line-height: 1.4 !important;
            word-break: break-all;
            /* Allow breaking very long Arabic words if needed */
        }

        .ar-block {
            font-size: 1.5rem !important;
        }

        /* Ensure images/diagrams don't overflow */
        .concept-card img,
        .concept-card svg {
            max-width: 100% !important;
            height: auto !important;
        }

        /* Immersion Mobile Fixes */
        .mushaf-container {
            padding: 20px 10px !important;
            line-height: 2 !important;
            text-align: center !important;
        }

        .m-word {
            font-size: 1.8rem !important;
            /* Smaller font on mobile */
            margin: 2px 1px !important;
            display: inline !important;
            /* Allow natural flow */
        }
    }

    /* Course content */
    .concept-card {
        padding: 20px 15px;
        margin: 10px;
    }

    .l-card {
        padding: 8px;
    }

    .l-ar {
        font-size: 1.8rem;
    }
}

/* Small phones (max 480px) */
@media (max-width: 480px) {
    .portal-hero-glass {
        margin: 10px;
        padding: 30px 20px;
        border-radius: 15px;
    }

    .brand-itqan,
    .brand-pro {
        font-size: 1.3rem !important;
    }

    .hero-title {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 0.85rem;
    }

    .hero-badge {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .nav-select-glass {
        width: 100%;
        min-width: auto;
    }

    .dark-grid {
        padding: 0 5px;
    }

    .dark-card {
        padding: 12px;
        border-radius: 12px;
    }

    .dc-icon-box {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .dc-title {
        font-size: 0.85rem;
    }

    .dc-tag {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .dc-link {
        font-size: 0.75rem;
    }

    /* Footer nav */
    #btn-prev,
    #btn-next {
        padding: 8px 15px;
        font-size: 0.8rem;
        min-width: 80px;
    }

    #btn-action {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    /* Course content adjustments */
    .letters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .arabic-big {
        font-size: 2rem;
    }

    .phrase-audio {
        flex-direction: column;
        gap: 10px;
    }

    .audio-box {
        padding: 15px;
    }
}

/* Very small phones (max 360px) */
@media (max-width: 360px) {
    .home-link-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .home-link-btn span {
        display: none;
    }

    .home-link-btn svg {
        width: 18px;
        height: 18px;
    }

    .portal-hero-glass {
        padding: 25px 15px;
    }

    .brand-itqan,
    .brand-pro {
        font-size: 1.1rem !important;
    }

    .hero-title {
        font-size: 1.2rem;
    }

    .letters-grid {
        grid-template-columns: 1fr 1fr;
    }

    .l-ar {
        font-size: 1.5rem;
    }
}

/* ================================================== */
/* COURSE HEADER STYLING                              */
/* ================================================== */

.course-header {
    background: rgba(10, 20, 35, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px 20px !important;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 215, 0, 0.4);
}

.header-btn svg {
    stroke: currentColor;
}

.header-title {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.header-mode {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* Mobile header adjustments */
@media (max-width: 600px) {
    .course-header {
        padding: 12px 15px !important;
    }

    .header-btn span {
        display: none;
    }

    .header-btn {
        padding: 8px 10px;
    }

    .header-title {
        font-size: 0.85rem;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-mode {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
}

/* ================================================== */
/* IMMERSION EXERCISES (Styles Mushaf)                */
/* ================================================== */

.immersion-instruction {
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    font-size: 1.1rem;
    color: #2d3436;
    border-left: 5px solid var(--accent-blue);
    line-height: 1.5;
}

.mushaf-container {
    background: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    direction: rtl;
    /* Essential for Arabic */
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    line-height: 2.2;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;

    /* Ensure wrapping */
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.m-word {
    font-family: var(--font-ar);
    /* 'Scheherazade New', serif */
    font-size: 2.4rem;
    color: #2d3436;
    display: inline-block;
    padding: 0 4px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.m-word:hover {
    background: #f1f2f6;
    color: var(--primary);
}

.m-word.selected {
    background: #e3f2fd;
    color: var(--primary-dark);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

.m-word.answered {
    cursor: default;
}

.m-word.correct {
    color: #2e7d32;
    background: #e8f5e9;
}

.m-word.wrong {
    color: #c62828;
    text-decoration: line-through;
    opacity: 0.6;
}

/* ================================================== */
/* AGGRESSIVE MOBILE OVERRIDES (FINAL FIX)            */
/* ================================================== */

@media (max-width: 600px) {

    /* 1. Force Containers to Vertical & Full Width */
    .main-container,
    .viewport,
    .dark-grid,
    .quiz-grid,
    .concept-card,
    .dark-card,
    .mushaf-container,
    .mz-analysis,
    .ex-logic,
    .phrase-audio {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        /* Override native min-width */
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Fix Horizontal Overflow in Body */
    body,
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 3. Text Wrapping Enforcers */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    span,
    div,
    li,
    .m-word {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* 4. Specific Immersion Fixes */
    .mushaf-container {
        padding: 15px 10px !important;
        text-align: center !important;
        line-height: 1.8 !important;
        display: block !important;
        /* Block for text flow */
    }

    .m-word {
        display: inline-block !important;
        /* Inline-block to respect line-height */
        font-size: 1.6rem !important;
        margin: 5px 2px !important;
        width: auto !important;
        /* Reset width */
    }

    /* 5. Analysis Boxes (Module 1 Examples) */
    .mz-container {
        padding: 10px !important;
    }

    .mz-phrase {
        font-size: 2rem !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        word-break: keep-all;
        direction: rtl;
    }

    .mz-analysis {
        flex-direction: row !important;
        /* Keep analysis row for small icons if possible, or wrap */
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* 6. Card Padding Reset */
    .dark-card,
    .concept-card {
        padding: 20px 15px !important;
        gap: 15px !important;
        height: auto !important;
    }

    /* 7. Hide non-essential spacers if any cause overflow */
    .spacer,
    .divider {
        max-width: 100% !important;
    }
}

/* ================================================== */
/* FINAL FOOTER & CONTRAST FIXES                      */
/* ================================================== */

/* 1. Mobile Footer Centering */
@media (max-width: 480px) {

    .dc-footer,
    .footer,
    .nav-row {
        justify-content: center !important;
        text-align: center !important;
        gap: 20px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #btn-prev,
    #btn-next {
        margin: 0 !important;
        flex-grow: 0 !important;
        /* Prevent stretching */
        min-width: 60px !important;
    }
}

/* 2. UNIVERSAL DARK TEXT ENFORCER for Light Boxes */
/* Catches all variations of white, off-white, light-blue, light-green backgrounds */

/* Light Blue / Cyan */
[style*="background:#e0f7fa"] *,
[style*="background: #e0f7fa"] *,
[style*="background:#e1f5fe"] *,
[style*="background: #e1f5fe"] *,
[style*="background:#e3f2fd"] *,
[style*="background: #e3f2fd"] *,

/* Light Green */
[style*="background:#e8f5e9"] *,
[style*="background: #e8f5e9"] *,
[style*="background:#f1f8e9"] *,
[style*="background: #f1f8e9"] *,
[style*="background:#f9fbe7"] *,
[style*="background: #f9fbe7"] *,

/* Light Yellow / Orange */
[style*="background:#fff3e0"] *,
[style*="background: #fff3e0"] *,
[style*="background:#fffde7"] *,
[style*="background: #fffde7"] *,
[style*="background:#fff9c4"] *,
[style*="background: #fff9c4"] *,

/* Light Red / Pink */
[style*="background:#ffebee"] *,
[style*="background: #ffebee"] *,
[style*="background:#fce4ec"] *,
[style*="background: #fce4ec"] *,

/* Pure White / Grey */
[style*="background:white"] *,
[style*="background: white"] *,
[style*="background:#ffffff"] *,
[style*="background: #ffffff"] *,
[style*="background:#f5f5f5"] *,
[style*="background: #f5f5f5"] *,
[style*="background:#fafafa"] *,
[style*="background: #fafafa"] * {
    color: #2d3436 !important;
    /* Dark Charcoal */
}

/* Specific overrides for bold text to ensure it's black */
[style*="font-weight:bold"],
strong,
b {
    /* Only apply if inside a light box context if possible, 
      but for now, let's rely on the inheritance above. 
      However, we need to ensure the parent rule wins.
      The rule above uses * so it should cover b/strong tags. */
}

/* Fix for specific components that might use their own color rules */
.audio-card *,
.quiz-grid *,
.theory-q-block * {
    /* If they have light backgrounds, they are covered above. */
}

/* Ensure the course text generally isn't washed out in cards */
.concept-card {
    /* Base color for dark card is handled, but if there are unstyled divs */
}

/* ================================================== */
/* FINAL CONTRAST FIX - FORCE DARK TEXT ON LIGHT BG   */
/* ================================================== */

/* 1. Specific Box Overrides */
/* These boxes often appear inside darker cards but have light backgrounds themselves. */
.tip-box,
.info-box,
.alert-box,
.definition-box,
.example-box {
    color: #1a1a1a !important;
    /* Force nearly black text */
}

/* 2. Direct Child Enforcer */
/* Ensure paragraphs, headings, and spans inside these boxes also turn black. */
.tip-box *,
.info-box *,
.alert-box *,
.definition-box *,
.example-box * {
    color: #1a1a1a !important;
}

/* 3. Aggressive Inline Style Override for Light Backgrounds */
/* If an element has a specific light background color set inline, force its text to be dark. */

/* Light Blue Backgrounds (Common in Mad Badal/Tajwid) */
[style*="background:#e3f2fd"],
[style*="background: #e3f2fd"],
[style*="background:#bbdefb"],
[style*="background: #bbdefb"] {
    color: #0d47a1 !important;
    /* Dark Blue Text */
}

[style*="background:#e3f2fd"] *,
[style*="background: #e3f2fd"] *,
[style*="background:#bbdefb"] *,
[style*="background: #bbdefb"] * {
    color: #0d47a1 !important;
    /* Recursive for children */
}

/* Light Yellow/Orange (Common for emphasis) */
[style*="background:#fff3e0"],
[style*="background: #fff3e0"],
[style*="background:#fffde7"],
[style*="background: #fffde7"] {
    color: #e65100 !important;
    /* Dark Orange Text */
}

[style*="background:#fff3e0"] *,
[style*="background: #fff3e0"] *,
[style*="background:#fffde7"] *,
[style*="background: #fffde7"] * {
    color: #e65100 !important;
}

/* White Backgrounds */
[style*="background:white"],
[style*="background: white"],
[style*="background:#ffffff"],
[style*="background: #ffffff"] {
    color: #2d3436 !important;
    /* Dark Charcoal */
}

[style*="background:white"] *,
[style*="background: white"] *,
[style*="background:#ffffff"] *,
[style*="background: #ffffff"] * {
    color: #2d3436 !important;
}

/* 4. Fix for "Durée" box specific case in Mad Badal */
/* It uses inline style: background:#e3f2fd; border:2px solid #2196f3; */
/* The text inside has specific colors like #0d47a1. We want to ENSURE those are visible. */
/* The code above sets color to #0d47a1 which is good. */

/* 5. Fix for Letter Grids (Light text on light bg issue) */
.letters-grid .letter-card,
.dark-card .letter-box {
    /* If the card itself is light, text must be dark */
    /* Usually these are controlled by theme, but if explicit background is set: */
}

/* Force specific problematic elements identified in screenshots */
/* "Lettres de Lin" box */
[style*="background:#e3f2fd"] strong,
[style*="background:#e3f2fd"] b {
    color: #000000 !important;
}

/* ================================================== */
/* SUPER AGGRESSIVE CONTRAST FIX v2                   */
/* ================================================== */

/* Target ANY element that has a light background inline style */
/* and force ALL its children to be dark and fully opaque */

/* Light Blue */
[style*="background:#e3f2fd"] *,
[style*="background: #e3f2fd"] *,
[style*="background:#bbdefb"] *,
[style*="background: #bbdefb"] * {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    --text: #000000 !important;
    --text-light: #333333 !important;
}

/* Light Yellow */
[style*="background:#fff3e0"] *,
[style*="background: #fff3e0"] *,
[style*="background:#fffde7"] *,
[style*="background: #fffde7"] * {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* White / Off-White */
[style*="background:white"] *,
[style*="background: white"] *,
[style*="background:#ffffff"] *,
[style*="background: #ffffff"] *,
[style*="background:#f5f5f5"] *,
[style*="background: #f5f5f5"] * {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Specific targeted fixes for the screenshots provided */
/* "Jugement : Wajib (Obligatoire)" box */
.concept-card [style*="background"] h3,
.concept-card [style*="background"] div,
.concept-card [style*="background"] span,
.concept-card [style*="background"] p,
.concept-card [style*="background"] strong {
    color: #000000 !important;
}

/* Fix "Durée" text specifically */
/* In case it uses a class we missed, target the content directly if possible (CSS can't do text content, but we target context) */
.concept-card div[style*="border-radius"] {
    color: #000000 !important;
}

/* Re-apply overrides for Letter Grids if they are light */
.letters-grid .letter-card {
    color: #000000 !important;
}

/* But wait, letter cards might be dark. Only if they have light bg. */
.letters-grid .letter-card[style*="background:white"],
.letters-grid .letter-card[style*="background: #ffffff"] {
    color: #000000 !important;
}

/* ================================================== */
/* UNIVERSAL CONTRAST FIX v3 (CASE INSENSITIVE HACK)  */
/* ================================================== */

/* Light Blue Variations (#e3f2fd, #bbdefb, cyan) */
[style*="background"] {
    /* Base rule: if it has a background inline style, we might need to check it */
}

/* We simply duplicate selectors for Uppercase and different properties */

/* #E3F2FD */
[style*="background:#E3F2FD"] *,
[style*="background: #E3F2FD"] *,
[style*="background-color:#e3f2fd"] *,
[style*="background-color: #e3f2fd"] *,
[style*="background-color:#E3F2FD"] *,
[style*="background-color: #E3F2FD"] *,

/* #BBDEFB */
[style*="background:#BBDEFB"] *,
[style*="background: #BBDEFB"] *,
[style*="background-color:#bbdefb"] *,
[style*="background-color: #bbdefb"] *,
[style*="background-color:#BBDEFB"] *,
[style*="background-color: #BBDEFB"] *,

/* RGB variations just in case */
[style*="rgb(227, 242, 253)"] *,
[style*="rgb(187, 222, 251)"] * {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    --text: #000000 !important;
    --text-light: #333333 !important;
}


/* Light Yellow Variations (#fff3e0, #fffde7) */
[style*="background:#FFF3E0"] *,
[style*="background: #FFF3E0"] *,
[style*="background-color:#fff3e0"] *,
[style*="background-color: #fff3e0"] *,
[style*="background-color:#FFF3E0"] *,
[style*="background-color: #FFF3E0"] *,

[style*="background:#FFFDE7"] *,
[style*="background: #FFFDE7"] *,
[style*="background-color:#fffde7"] *,
[style*="background-color: #fffde7"] *,
[style*="background-color:#FFFDE7"] *,
[style*="background-color: #FFFDE7"] * {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Generic White Variations */
[style*="background-color:white"] *,
[style*="background-color: white"] *,
[style*="background-color:#ffffff"] *,
[style*="background-color: #ffffff"] *,
[style*="background-color:#FFFFFF"] *,
[style*="background-color: #FFFFFF"] * {
    color: #000000 !important;
    opacity: 1 !important;
}

/* Direct targeted override for the specific card types seen in screenshots */
.tip-box *,
.info-box *,
.alert-box *,
.definition-box *,
.example-box * {
    /* If they have light background classes, force dark text */
    /* This is safer than inline style parsing if classes exist */
}

/* Force dark text on specific light-colored classes if they exist */
.bg-blue-50 *,
.bg-blue-100 *,
.bg-cyan-50 *,
.bg-cyan-100 *,
.bg-yellow-50 *,
.bg-yellow-100 *,
.bg-orange-50 *,
.bg-orange-100 *,
.bg-white * {
    color: #000000 !important;
}

/* ================================================== */
/* FINAL CONTRAST FIX v4 (CONTAINER TARGETING)        */
/* ================================================== */

/* 1. Target the CONTAINER ITSELF, not just children */
[style*="background"] {
    color: #000000 !important;
    text-shadow: none !important;
}

/* 2. Specific Class Overrides */
/* 2. Specific Class Overrides */
.tip-box,
.alert-box,
.info-box,
.example-box {
    color: #2d3436 !important;
    /* Force dark text for these light boxes */
    text-shadow: none !important;
}

/* 3. Force dark text on all descendants of these classes too */
.tip-box *,
.alert-box *,
.info-box *,
.example-box * {
    color: #2d3436 !important;
    text-shadow: none !important;
}

/* 4. Re-iterate the inline style variations, targeting the element itself + children */
/* Light Blue */
[style*="background:#e3f2fd"],
[style*="background: #e3f2fd"],
[style*="background:#bbdefb"],
[style*="background: #bbdefb"],
[style*="background-color:#e3f2fd"],
[style*="background-color: #e3f2fd"],
[style*="background-color:#bbdefb"],
[style*="background-color: #bbdefb"] {
    color: #000000 !important;
}

/* Light Yellow */
[style*="background:#fff3e0"],
[style*="background: #fff3e0"],
[style*="background:#fffde7"],
[style*="background: #fffde7"],
[style*="background-color:#fff3e0"],
[style*="background-color: #fff3e0"],
[style*="background-color:#fffde7"],
[style*="background-color: #fffde7"] {
    color: #000000 !important;
}

/* White */
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:white"],
[style*="background-color: white"] {
    color: #000000 !important;
}

/* 5. Specific fix for the text mentioned by user */
/* "Pourquoi Badal ?" is in a .tip-box, covered above. */
/* "Ghafurun" examples are in flex containers with inline backgrounds. */

/* 6. Exception for Arabic Highlighting if needed, BUT user asked for black. */
/* We will keep the forced black for now as requested. */
/* If specific arabic words need color, they usually have specific classes, but */
/* the 'color: #000000 !important' on * will override them. */
/* To allow Colored Arabic: */
.ar-word,
.ar-word * {
    /* If the user wants specific Tajwid colors, we might need to NOT force black on .ar-word */
    /* But for now, let's stick to readability as priority. */
    /* Re-enabling specific colors if they have !important inline could work, */
    /* but let's assume the user wants EVERYTHING readable first. */
}
/* --- NEW PORTAL HERO STYLES --- */

.portal-hero-glass {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px auto;
    padding: 30px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.glass-btn-home {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.glass-btn-home:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    color: white;
}

.hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #a0a0a0;
    margin-bottom: 25px;
    font-weight: 400;
    max-width: 600px;
}

.riwayat-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: rgba(255, 215, 0, 0.1); 
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50px;
    color: #FFD700;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.riwayat-badge:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    transform: translateY(-1px);
}

.nav-select-glass {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 15px 25px;
    font-size: 1.1rem;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.nav-select-glass:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.nav-select-glass option {
    background: #0F2027; /* Fallback dark bg for options */
    color: white;
    padding: 10px;
}

/* ============================================================ */
/* CORRECTIFS — Alignement hero + contraste boîtes de leçon     */
/* Ajoutés le 02/07 — priment sur les règles précédentes        */
/* ============================================================ */

/* 1) ALIGNEMENT : hero et cartes de cours sur le même gabarit  */
.portal-hero-glass,
.main-container {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.portal-hero-glass {
    padding-left: 32px !important;
    padding-right: 32px !important;
}
.main-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
@media (max-width: 768px) {
    .portal-hero-glass,
    .main-container {
        max-width: 100% !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: auto !important;
    }
    .portal-hero-glass {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .main-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 2) CONTRASTE : texte foncé garanti dans les boîtes claires   */
/* Bat la règle .concept-card>div:not([style*="background:"]) (ligne ~2218) */
.dashboard-shell .concept-card .tip-box,
.dashboard-shell .concept-card .tip-box *,
.dashboard-shell .concept-card .info-box,
.dashboard-shell .concept-card .info-box *,
.dashboard-shell .concept-card .alert-box,
.dashboard-shell .concept-card .alert-box *,
.dashboard-shell .concept-card .example-box,
.dashboard-shell .concept-card .example-box *,
.viewport .concept-card .tip-box,
.viewport .concept-card .tip-box *,
.viewport .concept-card .info-box,
.viewport .concept-card .info-box *,
.viewport .concept-card .alert-box,
.viewport .concept-card .alert-box *,
.viewport .concept-card .example-box,
.viewport .concept-card .example-box *,
.concept-card>.tip-box:not([style*="background:"]),
.concept-card>.info-box:not([style*="background:"]),
.concept-card>.alert-box:not([style*="background:"]),
.concept-card>.example-box:not([style*="background:"]) {
    color: #1f2d3d !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
/* Fond légèrement plus marqué pour un contraste net */
.dashboard-shell .concept-card .tip-box,
.viewport .concept-card .tip-box {
    background: #eef6ff !important;
    border-left: 4px solid #FFA500 !important;
    color: #1f2d3d !important;
}

/* 3) CONTRASTE — autres boîtes claires (def-box, note-box, intro-box, mz-box) */
/* Ces classes ont un fond clair mais le texte hérite parfois du gris du thème. */
.dashboard-shell .concept-card .def-box,
.dashboard-shell .concept-card .def-box *,
.viewport .concept-card .def-box,
.viewport .concept-card .def-box *,
.concept-card>.def-box:not([style*="background:"]) {
    color: #06424a !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.dashboard-shell .concept-card .note-box,
.dashboard-shell .concept-card .note-box *,
.dashboard-shell .concept-card .intro-box,
.dashboard-shell .concept-card .intro-box *,
.dashboard-shell .concept-card .mz-box,
.dashboard-shell .concept-card .mz-box *,
.viewport .concept-card .note-box,
.viewport .concept-card .note-box *,
.viewport .concept-card .intro-box,
.viewport .concept-card .intro-box *,
.viewport .concept-card .mz-box,
.viewport .concept-card .mz-box * {
    color: #1f2d3d !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* 4) CONTRASTE — lignes audio à fond clair (ex: Inna / Thumma / 'Amma) */
/* Le fond est #f8f9fa ; on force un texte foncé sur tous les enfants texte. */
.dashboard-shell .concept-card .audio-row-item,
.dashboard-shell .concept-card .audio-row-item strong,
.dashboard-shell .concept-card .audio-row-item div:not([style*="color"]),
.dashboard-shell .concept-card .audio-row-item span:not([style*="color"]),
.viewport .concept-card .audio-row-item,
.viewport .concept-card .audio-row-item strong,
.viewport .concept-card .audio-row-item div:not([style*="color"]),
.viewport .concept-card .audio-row-item span:not([style*="color"]) {
    color: #1f2d3d !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* ===== FREEMIUM — Cadenas sur contenu payant ===== */
.free-lock {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 1.4rem;
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.course-locked {
    position: relative;
    opacity: 0.85;
}
.course-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,215,0,0.04), rgba(0,0,0,0.15));
    border-radius: inherit;
    pointer-events: none;
}
.course-locked:hover {
    border-color: rgba(255,215,0,0.4) !important;
}