/* ==========================================================================
   GOLD MASTERY DESIGN SYSTEM - DMTRADE
   Tailored Luxury Gold / Amber, Deep Charcoal Navy, Bullish Emerald &
   Wall Street Terminal Trading Palettes.
   ========================================================================== */

:root {
    --gold-primary: #f59e0b;
    --gold-amber: #d97706;
    --gold-yellow-glow: #fbbf24;
    --gold-bronze: #92400e;
    --gold-dark-bronze: #78350f;
    --gold-cream: #fef3c7;
    --gold-light-bg: #fffbeb;

    --gold-emerald: #10b981;
    --gold-bull-green: #059669;
    --gold-crimson: #ef4444;
    --gold-bear-red: #dc2626;

    --gold-navy: #030712;
    --gold-terminal-dark: #0f172a;
    --gold-terminal-gold: #1c1404;
    --gold-ink: #1e293b;
    --mission-sticky-top: 62px;
    --mission-scroll-offset: 195px;
}

.KantumruyPro {
    font-family: "Kantumruy Pro", sans-serif;
}

body,
body * {
    font-family: "Kantumruy Pro", sans-serif !important;
}

/* Canvas */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box;
}

#appCapsule {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box;
}

body.bg-white {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, .15), transparent 35%),
        radial-gradient(circle at 0 16%, rgba(217, 119, 6, .12), transparent 28%),
        radial-gradient(circle at 85% 72%, rgba(16, 185, 129, .10), transparent 30%),
        linear-gradient(180deg, #fffbeb 0%, #ffffff 32%, #fdfbf7 100%);
}

/* ==========================================================================
   Hero Section - Gold Trading Floor (Dark Charcoal + Gold Glow + Bronze)
   ========================================================================== */
.ai-hero,
.gold-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: 25px;
    padding: 22px 19px 20px;
    margin-top: 6px;
    color: #ffffff;
    background:
        radial-gradient(circle at 90% 12%, rgba(245, 158, 11, .45), transparent 38%),
        radial-gradient(circle at 10% 90%, rgba(217, 119, 6, .35), transparent 36%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, .12), transparent 60%),
        linear-gradient(135deg, #030712 0%, #1f1608 50%, #140d04 100%);
    box-shadow: 0 20px 48px rgba(3, 7, 18, .45), 0 0 25px rgba(245, 158, 11, .20), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.ai-hero::before,
.ai-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ai-hero::before {
    top: -68px;
    right: 42px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(245, 158, 11, .30);
    background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
}

.ai-hero::after {
    bottom: -86px;
    left: 24px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(217, 119, 6, .28);
    background: radial-gradient(circle, rgba(217, 119, 6, .18), transparent 70%);
}

.ai-hero>* {
    position: relative;
    z-index: 1;
}

.ai-pill,
.gold-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    margin-bottom: 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fef08a;
    background: rgba(120, 53, 15, .55);
    border: 1px solid rgba(245, 158, 11, .60);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 18px rgba(245, 158, 11, .35);
    backdrop-filter: blur(14px);
}

.duration-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #fef08a;
    background: rgba(120, 53, 15, .50);
    border: 1px solid rgba(251, 191, 36, .40);
    box-shadow: 0 0 12px rgba(245, 158, 11, .20);
}

.ai-hero-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(26px, 7.5vw, 36px);
    font-weight: 800;
    line-height: 1.35;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .85);
}

.ai-author-row {
    color: rgba(254, 243, 199, .90) !important;
}

.ai-author-row a {
    color: #fbbf24 !important;
    font-weight: 700;
}

.ai-hero .lead {
    color: rgba(254, 252, 232, .95);
    font-size: 16.5px;
    line-height: 1.85;
}

.hero-mission-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 17px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(245, 158, 11, .30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.hero-mission-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-mission-info ion-icon {
    font-size: 24px;
    color: #fbbf24;
}

.hero-mission-copy {
    display: flex;
    flex-direction: column;
}

.hero-mission-copy b {
    font-size: 13px;
    color: #ffffff;
}

.hero-mission-copy span {
    font-size: 12px;
    color: #fde68a;
}

.hero-xp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fbbf24 !important;
    font-weight: 700;
    margin-top: 2px;
}

.mission-start {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #1e1403;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 4px 14px rgba(245, 158, 11, .4);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mission-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, .5);
    color: #1e1403;
}

/* ==========================================================================
   Mission Console Shell & Sticky Navigation Bar (Trading Terminal Matrix)
   ========================================================================== */
.mission-console-shell {
    margin: 12px 16px 17px;
    position: relative;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

.mission-console {
    position: relative;
    z-index: 12;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid rgba(245, 158, 11, .40);
    border-radius: 20px;
    color: #fef3c7;
    background:
        radial-gradient(circle at 92% 10%, rgba(245, 158, 11, .35), transparent 38%),
        radial-gradient(circle at 8% 90%, rgba(217, 119, 6, .25), transparent 35%),
        linear-gradient(135deg, rgba(3, 7, 18, .94), rgba(28, 19, 4, .92) 55%, rgba(40, 20, 5, .94));
    box-shadow: 0 18px 40px rgba(3, 7, 18, .45), inset 0 1px rgba(255, 255, 255, .20);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
}

.mission-console.is-pinned {
    position: fixed !important;
    top: var(--mission-sticky-top, 60px) !important;
    left: var(--mission-fixed-left, 16px) !important;
    width: var(--mission-fixed-width, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    right: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 999 !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .60), 0 0 20px rgba(245, 158, 11, .25), inset 0 1px rgba(255, 255, 255, .28) !important;
}

.mission-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.mission-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: .03em;
}

.mission-status b {
    color: #fbbf24;
}

.mission-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
    margin-bottom: 10px;
}

.mission-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #f97316, #fbbf24);
    box-shadow: 0 0 12px rgba(245, 158, 11, .6);
    transition: width .35s ease;
}

.mission-stages {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.mission-stages::-webkit-scrollbar {
    display: none;
}

.mission-stage {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s ease;
}

.mission-stage .stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .25);
    color: #fbbf24;
    font-size: 10px;
    font-weight: 700;
}

.mission-stage:hover,
.mission-stage.is-active {
    color: #ffffff;
    background: rgba(245, 158, 11, .25);
    border-color: rgba(245, 158, 11, .55);
}

.mission-stage.is-completed {
    color: #d1fae5;
    background: rgba(16, 185, 129, .20);
    border-color: rgba(16, 185, 129, .50);
}

.mission-stage.is-completed .stage-number {
    background: rgba(16, 185, 129, .40);
    color: #34d399;
}

/* ==========================================================================
   Section Cards & Content Elements
   ========================================================================== */
.ai-section-card,
.gold-section-card {
    background: #ffffff;
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 22px;
    padding: 22px 18px;
    margin-top: 14px;
    box-shadow: 0 8px 24px rgba(120, 53, 15, .06), 0 1px 3px rgba(0, 0, 0, .03);
    color: #1e293b;
}

.ai-section-card h2,
.gold-section-card h2 {
    color: #78350f;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(245, 158, 11, .20);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-section-card h3,
.gold-section-card h3 {
    color: #92400e;
    font-size: 17px;
    font-weight: 700;
    margin-top: 18px;
    margin-bottom: 10px;
}

.ai-section-card p,
.gold-section-card p {
    font-size: 15.5px;
    line-height: 1.85;
    color: #334155;
    margin-bottom: 12px;
}

.ai-section-card ul,
.ai-section-card ol,
.gold-section-card ul,
.gold-section-card ol {
    padding-left: 22px;
    margin-bottom: 14px;
    color: #334155;
    font-size: 15px;
    line-height: 1.8;
}

.ai-section-card li,
.gold-section-card li {
    margin-bottom: 6px;
}

.lesson-highlight {
    background: linear-gradient(135deg, rgba(254, 243, 199, .65), rgba(255, 251, 235, .90));
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.8;
    color: #78350f;
}

.objective-card {
    background: linear-gradient(135deg, rgba(209, 250, 229, .55), rgba(240, 253, 244, .85));
    border: 1px solid rgba(16, 185, 129, .25);
    border-radius: 14px;
    padding: 14px 16px;
    color: #065f46;
}

.objective-card h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #047857;
    display: flex;
    align-items: center;
    gap: 6px;
}

.objective-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: #065f46;
}

/* Callout Note Box */
.note-box {
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .30);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 14px 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: #78350f;
}

.note-box.pro-tip {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .30);
    color: #065f46;
}

.note-box.warning {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .30);
    color: #991b1b;
}

/* Table Style */
.table-responsive {
    overflow-x: auto;
    margin: 14px 0;
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, .25);
}

.gold-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

.gold-table th {
    background: #fef3c7;
    color: #78350f;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 2px solid rgba(245, 158, 11, .35);
}

.gold-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(245, 158, 11, .15);
    color: #334155;
}

.gold-table tr:last-child td {
    border-bottom: none;
}

.gold-table tr:nth-child(even) {
    background: rgba(254, 243, 199, .25);
}

/* Formula Box */
.formula-box {
    background: #0f172a;
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 14px 0;
    font-family: 'Courier New', monospace, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Media Figures */
.lesson-media {
    margin: 16px 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, .25);
    box-shadow: 0 8px 22px rgba(120, 53, 15, .08);
}

.lesson-media img,
.lesson-media svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Live Lab Simulator (Interactive)
   ========================================================================== */
.ai-lab,
.gold-lab {
    background: linear-gradient(135deg, #030712 0%, #171105 100%);
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: 22px;
    padding: 20px 18px;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 20px rgba(245, 158, 11, .15);
}

.lab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.lab-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 5px;
}

.lab-title {
    margin: 4px 0 0;
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
}

.lab-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #10b981;
    background: rgba(16, 185, 129, .18);
    border: 1px solid rgba(16, 185, 129, .4);
}

.lab-description {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 14px;
    line-height: 1.7;
}

.lab-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.lab-inputs>.lab-input:nth-child(3):last-child {
    grid-column: span 2;
}

.lab-input {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 8px 11px;
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: 13px;
    color: #fef3c7;
    font-family: "Kantumruy Pro", sans-serif;
    text-align: left;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.lab-input:hover,
.lab-input.is-selected {
    transform: translateY(-2px);
    border-color: #fbbf24;
    background: linear-gradient(135deg, rgba(180, 83, 9, .45), rgba(245, 158, 11, .30));
    box-shadow: 0 10px 24px rgba(245, 158, 11, .25);
}

.lab-input:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.lab-input ion-icon {
    color: #fbbf24;
    font-size: 22px;
}

.lab-input strong {
    display: block;
    font-size: 12.5px;
    line-height: 1.3;
    color: #fff;
}

.lab-input small {
    display: block;
    margin-top: 1px;
    color: rgba(254, 240, 138, .75);
    font-size: 10px;
    line-height: 1.35;
}

.lab-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17px minmax(0, 1fr) 17px minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 10px 6px;
    border-radius: 15px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(245, 158, 11, .25);
}

.lab-node,
.lab-core {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100px;
    padding: 8px 4px;
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 13px;
    text-align: center;
    background: rgba(255, 255, 255, .06);
}

.lab-node ion-icon {
    margin-bottom: 4px;
    color: #fbbf24;
    font-size: 24px;
}

.lab-node strong,
.lab-core strong {
    display: block;
    color: #fff;
    font-size: 11.5px;
    line-height: 1.35;
}

.lab-node small,
.lab-core small {
    display: block;
    margin-top: 2px;
    color: rgba(254, 240, 138, .75);
    font-size: 9px;
    line-height: 1.3;
}

.lab-core {
    position: relative;
    overflow: hidden;
    border-color: rgba(245, 158, 11, .55);
    background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, .40), rgba(217, 119, 6, .20) 45%, rgba(255, 255, 255, .06) 72%);
}

.lab-core ion-icon {
    margin-bottom: 4px;
    color: #fef08a;
    font-size: 28px;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, .9));
    transition: transform .3s ease;
}

.lab-core::after {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: 50%;
    pointer-events: none;
}

.lab-arrow {
    display: grid;
    place-items: center;
    color: #fbbf24;
    font-size: 18px;
    text-shadow: 0 0 12px rgba(245, 158, 11, .85);
}

.lab-result {
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px solid rgba(245, 158, 11, .35);
    border-left: 3px solid #fbbf24;
    border-radius: 12px;
    color: #fef08a;
    font-size: 13px;
    line-height: 1.65;
    background: rgba(120, 53, 15, .35);
    box-shadow: 0 6px 18px rgba(3, 7, 18, .20);
    transition: all .3s ease;
}

.lab-result b {
    color: #fde68a;
}

.lab-status.is-busy {
    background: rgba(245, 158, 11, .35) !important;
    color: #fef08a !important;
    box-shadow: 0 0 16px rgba(245, 158, 11, .8) !important;
    animation: labStatusPulse 0.6s ease-in-out infinite;
}

@keyframes labStatusPulse {

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

    50% {
        opacity: 0.75;
        transform: scale(0.96);
    }
}

@keyframes labCoreRotate {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes labPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 9px rgba(245, 158, 11, .6));
    }

    50% {
        transform: scale(1.18);
        filter: brightness(1.35) drop-shadow(0 0 25px rgba(245, 158, 11, 1));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 9px rgba(245, 158, 11, .6));
    }
}

@keyframes labFlow {
    0% {
        opacity: .3;
        transform: translateX(-5px);
    }

    50% {
        opacity: 1;
        transform: translateX(7px);
        color: #fbbf24;
        text-shadow: 0 0 18px rgba(245, 158, 11, 1);
    }

    100% {
        opacity: .3;
        transform: translateX(-5px);
    }
}

@keyframes labResultPop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

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

.gold-lab.is-processing,
.ai-lab.is-processing {
    border-color: rgba(245, 158, 11, .75) !important;
    box-shadow: 0 20px 48px rgba(245, 158, 11, .35), inset 0 1px rgba(255, 255, 255, .30) !important;
}

.gold-lab.is-processing .lab-core ion-icon,
.ai-lab.is-processing .lab-core ion-icon {
    animation: labPulse .6s ease-in-out infinite;
}

.gold-lab.is-processing .lab-core::after,
.ai-lab.is-processing .lab-core::after {
    border-style: dashed;
    border-color: rgba(245, 158, 11, .85);
    animation: labCoreRotate 2s linear infinite;
}

.gold-lab.is-processing .lab-arrow,
.ai-lab.is-processing .lab-arrow {
    animation: labFlow .5s ease-in-out infinite;
}

.lab-result.is-animating {
    animation: labResultPop .45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   Master Strategy / Action Prompt Box
   ========================================================================== */
.prompt-box,
.strategy-box {
    background: linear-gradient(135deg, rgba(254, 243, 199, .55), rgba(255, 251, 235, .85));
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(120, 53, 15, .06);
}

.prompt-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #b45309;
    margin-bottom: 8px;
}

.prompt-text {
    font-size: 14.5px;
    line-height: 1.8;
    color: #78350f;
    margin-bottom: 12px;
    font-weight: 500;
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #b45309, #d97706);
    border: 1px solid rgba(255, 255, 255, .3);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(180, 83, 9, .25);
    transition: transform .2s ease;
}

.copy-btn:hover {
    transform: translateY(-1px);
}

.copy-feedback {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #059669;
}

/* ==========================================================================
   Knowledge Check Quiz Section
   ========================================================================== */
.check-card {
    background: #ffffff;
    border: 1px solid rgba(245, 158, 11, .30);
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 6px 20px rgba(120, 53, 15, .06);
}

.check-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #b45309;
    margin-bottom: 8px;
}

.check-question {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    line-height: 1.65;
}

.answer-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.answer-option {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    line-height: 1.6;
    transition: all .2s ease;
}

.answer-option:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #78350f;
}

.answer-option.is-selected {
    background: #fef3c7;
    border-color: #d97706;
    color: #78350f;
    font-weight: 700;
}

.answer-option.is-correct {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
    font-weight: 700;
}

.answer-option.is-incorrect,
.answer-option.is-wrong {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

.reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #78350f;
    background: #fef3c7;
    border: 1px solid rgba(245, 158, 11, .35);
    cursor: pointer;
    transition: all .2s ease;
}

.reveal-btn:hover {
    background: #fde68a;
}

.check-answer {
    display: none;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid rgba(16, 185, 129, .35);
    font-size: 14px;
    line-height: 1.75;
    color: #065f46;
}

.check-answer.is-visible,
.check-answer.show {
    display: block;
}

.check-answer.is-incorrect {
    background: #fee2e2 !important;
    border-color: rgba(239, 68, 68, .35) !important;
    color: #991b1b !important;
}

/* ==========================================================================
   Summary Card & Mission Completion
   ========================================================================== */
.summary-card {
    background: linear-gradient(135deg, rgba(254, 243, 199, .5), rgba(255, 255, 255, .9));
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: 18px;
    padding: 18px 16px;
    margin-bottom: 16px;
}

.summary-card h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #78350f;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-list {
    margin: 0;
    padding-left: 20px;
    color: #334155;
    font-size: 14.5px;
    line-height: 1.8;
}

.summary-list li {
    margin-bottom: 6px;
}

.mission-complete {
    background: linear-gradient(135deg, #030712 0%, #1f1608 100%);
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: 20px;
    padding: 20px 18px;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 20px rgba(245, 158, 11, .2);
    margin-top: 14px;
}

.completion-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.completion-orbit {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .25);
    border: 1px solid rgba(245, 158, 11, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fbbf24;
    flex: 0 0 44px;
}

.completion-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fbbf24;
}

#completionTitle {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
}

#completionText {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 14px;
}

.completion-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fde68a;
    background: rgba(245, 158, 11, .20);
    border: 1px solid rgba(245, 158, 11, .40);
}

.completion-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #1e1403;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 1px solid rgba(255, 255, 255, .3);
    text-decoration: none;
    transition: transform .2s ease;
}

.completion-cta:hover {
    transform: translateY(-1px);
    color: #1e1403;
}

/* ==========================================================================
   Navigation & Blog Cards
   ========================================================================== */
.lesson-navigation {
    background: #ffffff;
    border: 1px solid rgba(245, 158, 11, .20);
    border-radius: 20px;
    padding: 18px 16px;
}

.next-card-title {
    font-size: 12px;
    font-weight: 800;
    color: #b45309;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.lesson-navigation h2 {
    color: #78350f;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Lesson Navigation & Cards (Standardized with Forex / All Courses) */
.lesson-navigation .next-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #d97706;
    letter-spacing: .05em;
    margin-bottom: 4px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: "Kantumruy Pro", sans-serif !important;
}

.lesson-navigation h2 {
    font-size: 23px !important;
    font-weight: 800 !important;
    color: #14213d;
    margin: 0 0 10px 0;
    font-family: "Kantumruy Pro", sans-serif !important;
}

.blog-card {
    border: 1px solid rgba(245, 158, 11, .22);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 34px rgba(3, 7, 18, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    transition: transform .2s ease;
}

.blog-card:hover {
    transform: translateY(-2px);
}

.blog-card img,
.blog-card svg {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: auto;
    display: block;
}

.blog-card .text {
    padding: 12px 16px;
}

.blog-card .title {
    margin: 0;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4em !important;
    height: 67px !important;
    overflow: hidden !important;
    color: #27173E !important;
    font-family: "Kantumruy Pro", sans-serif !important;
}

/* Previous / next lesson cards flex row */
.lesson-navigation .row {
    align-items: stretch;
}

.lesson-navigation .col-6 {
    display: flex;
}

.lesson-navigation .col-6 > a {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.lesson-navigation .blog-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lesson-navigation .blog-card .text {
    flex: 1 1 auto;
}

/* ==========================================================================
   Dark Mode Overrides (Luxury Gold Aesthetic)
   ========================================================================== */
body.dark-mode {
    background: #080d1a !important;
    color: #f1f5f9 !important;
}

body.dark-mode .appHeader {
    background: rgba(11, 15, 25, .88) !important;
    border-bottom-color: rgba(245, 158, 11, .20) !important;
}

body.dark-mode .ai-section-card,
body.dark-mode .gold-section-card,
body.dark-mode .check-card,
body.dark-mode .summary-card,
body.dark-mode .lesson-navigation {
    background: #111827 !important;
    border-color: rgba(245, 158, 11, .25) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}

body.dark-mode .ai-section-card h2,
body.dark-mode .gold-section-card h2,
body.dark-mode .ai-section-card h3,
body.dark-mode .gold-section-card h3 {
    color: #fde68a !important;
    border-bottom-color: rgba(245, 158, 11, .25) !important;
}

body.dark-mode .ai-section-card p,
body.dark-mode .gold-section-card p,
body.dark-mode .ai-section-card li,
body.dark-mode .gold-section-card li {
    color: #cbd5e1 !important;
}

body.dark-mode .ai-section-card b,
body.dark-mode .gold-section-card b,
body.dark-mode .ai-section-card strong,
body.dark-mode .gold-section-card strong {
    color: #fef08a !important;
}

body.dark-mode code {
    background: rgba(245, 158, 11, .15) !important;
    color: #fde68a !important;
    border: 1px solid rgba(245, 158, 11, .30) !important;
    border-radius: 6px;
    padding: 2px 6px;
}

/* Dark Mode Table Styling */
body.dark-mode .table-responsive {
    background: linear-gradient(135deg, rgba(17, 24, 39, .95), rgba(30, 20, 5, .90)) !important;
    border-color: rgba(245, 158, 11, .30) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .35) !important;
}

body.dark-mode .gold-table,
body.dark-mode .ai-section-card table {
    background: transparent !important;
}

body.dark-mode .gold-table th,
body.dark-mode .ai-section-card thead th {
    background: linear-gradient(135deg, rgba(120, 53, 15, .75), rgba(30, 20, 5, .85)) !important;
    color: #fef08a !important;
    border-bottom: 2px solid rgba(245, 158, 11, .45) !important;
    font-weight: 800;
}

body.dark-mode .gold-table td,
body.dark-mode .ai-section-card tbody td {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

body.dark-mode .gold-table td b,
body.dark-mode .gold-table td strong,
body.dark-mode .ai-section-card tbody td b,
body.dark-mode .ai-section-card tbody td strong {
    color: #fde68a !important;
}

body.dark-mode .gold-table tr:nth-child(even),
body.dark-mode .ai-section-card tbody tr:nth-child(even) {
    background: rgba(245, 158, 11, .06) !important;
}

body.dark-mode .gold-table tr:hover,
body.dark-mode .ai-section-card tbody tr:hover {
    background: rgba(245, 158, 11, .14) !important;
}

/* Dark Mode វិធានមាស (Master Strategy / Prompt Box) */
body.dark-mode .prompt-box,
body.dark-mode .strategy-box {
    background: linear-gradient(135deg, rgba(35, 22, 5, .92), rgba(17, 24, 39, .96)) !important;
    border: 1px solid rgba(245, 158, 11, .45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .50), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body.dark-mode .prompt-label {
    color: #fbbf24 !important;
}

body.dark-mode .prompt-text {
    color: #fef3c7 !important;
}

body.dark-mode .copy-btn {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-color: rgba(254, 240, 138, .40) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, .30) !important;
}

body.dark-mode .copy-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, .45) !important;
}

body.dark-mode .copy-feedback {
    color: #34d399 !important;
}

/* Dark Mode Notes, Formulas, Highlights */
body.dark-mode .formula-box {
    background: #030712 !important;
    border-color: rgba(245, 158, 11, .45) !important;
    color: #fef08a !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8) !important;
}

body.dark-mode .lesson-highlight {
    background: rgba(120, 53, 15, .25) !important;
    color: #fef3c7 !important;
    border-left-color: #f59e0b !important;
}

body.dark-mode .objective-card {
    background: rgba(6, 78, 59, .25) !important;
    border-color: rgba(16, 185, 129, .3) !important;
    color: #a7f3d0 !important;
}

body.dark-mode .objective-card h4 {
    color: #34d399 !important;
}

body.dark-mode .objective-card p {
    color: #d1fae5 !important;
}

body.dark-mode .note-box {
    background: rgba(17, 24, 39, .90) !important;
    border-color: rgba(245, 158, 11, .35) !important;
    color: #cbd5e1 !important;
}

body.dark-mode .note-box.warning {
    background: rgba(69, 10, 10, .45) !important;
    border-color: rgba(239, 68, 68, .50) !important;
    color: #fecaca !important;
}

body.dark-mode .note-box.warning b,
body.dark-mode .note-box.warning strong {
    color: #fca5a5 !important;
}

body.dark-mode .note-box.pro-tip {
    background: rgba(6, 78, 59, .40) !important;
    border-color: rgba(16, 185, 129, .50) !important;
    color: #d1fae5 !important;
}

body.dark-mode .note-box.pro-tip b,
body.dark-mode .note-box.pro-tip strong {
    color: #6ee7b7 !important;
}

/* Dark Mode Quiz */
body.dark-mode .check-card {
    background: #111827 !important;
    border-color: rgba(245, 158, 11, .30) !important;
}

body.dark-mode .check-kicker {
    color: #fbbf24 !important;
}

body.dark-mode .check-question {
    color: #f8fafc !important;
}

body.dark-mode .answer-option {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .answer-option:hover {
    background: rgba(245, 158, 11, .20) !important;
    border-color: #f59e0b !important;
    color: #fef3c7 !important;
}

body.dark-mode .answer-option.is-selected {
    background: rgba(245, 158, 11, .25) !important;
    border-color: #fbbf24 !important;
    color: #fef08a !important;
}

body.dark-mode .answer-option.is-correct {
    background: rgba(6, 78, 59, .60) !important;
    border-color: rgba(52, 211, 153, .70) !important;
    color: #a7f3d0 !important;
}

body.dark-mode .answer-option.is-incorrect,
body.dark-mode .answer-option.is-wrong {
    background: rgba(69, 10, 10, .60) !important;
    border-color: rgba(239, 68, 68, .70) !important;
    color: #fecaca !important;
}

body.dark-mode .reveal-btn {
    background: rgba(120, 53, 15, .40) !important;
    border-color: rgba(245, 158, 11, .45) !important;
    color: #fef08a !important;
}

body.dark-mode .reveal-btn:hover {
    background: rgba(180, 83, 9, .60) !important;
    color: #ffffff !important;
}

body.dark-mode .check-answer {
    background: rgba(6, 78, 59, .50) !important;
    border-color: rgba(16, 185, 129, .50) !important;
    color: #d1fae5 !important;
}

body.dark-mode .check-answer.is-incorrect {
    background: rgba(69, 10, 10, .50) !important;
    border-color: rgba(239, 68, 68, .50) !important;
    color: #fecaca !important;
}

/* Dark Mode Summary & Footer Navigation */
body.dark-mode .summary-card {
    background: linear-gradient(135deg, rgba(30, 20, 5, .80), rgba(17, 24, 39, .95)) !important;
    border-color: rgba(245, 158, 11, .30) !important;
    border-left: 4px solid #f59e0b !important;
}

body.dark-mode .summary-card h4 {
    color: #fbbf24 !important;
}

body.dark-mode .summary-list li {
    color: #cbd5e1 !important;
}

body.dark-mode .summary-list li::before {
    color: #fbbf24 !important;
}

body.dark-mode .blog-card {
    background: #1f2937 !important;
    border-color: rgba(245, 158, 11, .25) !important;
}

body.dark-mode .blog-card .title {
    color: #f1f5f9 !important;
    font-family: "Kantumruy Pro", sans-serif !important;
    font-weight: 700 !important;
}

body.dark-mode .lesson-navigation h2 {
    color: #fbbf24 !important;
    font-family: "Kantumruy Pro", sans-serif !important;
    font-weight: 800 !important;
}

body.dark-mode .next-card-title {
    color: #fbbf24 !important;
    background: linear-gradient(135deg, rgba(180, 83, 9, .20), rgba(245, 158, 11, .15)) !important;
    border-color: rgba(245, 158, 11, .30) !important;
    font-family: "Kantumruy Pro", sans-serif !important;
    font-weight: 800 !important;
}

/* Dark Mode Navigation & Chips */
body.dark-mode .chip {
    background: #2b3040 !important;
    color: #f8fafc !important;
}

body.dark-mode .chip .chip-label {
    color: #f8fafc !important;
}