/* =========================================================
   OFFICIAL_CONVERSATIONAL_DARK_THEME_V1
   Dark visual layer for the combined time lesson.
   Existing lesson logic and base CSS remain unchanged.
   ========================================================= */

:root {
    color-scheme: dark;

    --oc-bg-deep: #050b17;
    --oc-bg: #081225;
    --oc-surface: #0f1c33;
    --oc-surface-raised: #142541;
    --oc-surface-soft: #192d4d;

    --oc-border:
        rgba(148, 163, 184, 0.24);

    --oc-text: #f8fafc;
    --oc-muted: #b4c1d5;

    --oc-primary: #60a5fa;
    --oc-primary-strong: #2563eb;

    --oc-success: #6ee7b7;
    --oc-warning: #fcd34d;
    --oc-danger: #fca5a5;
}


html {
    min-height: 100%;
    background: var(--oc-bg-deep);
}


body {
    min-height: 100vh;

    color: var(--oc-text);

    background:
        radial-gradient(
            circle at 50% -12%,
            rgba(59, 130, 246, 0.26),
            transparent 40%
        ),
        radial-gradient(
            circle at 6% 58%,
            rgba(79, 70, 229, 0.14),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #0b1630 0%,
            var(--oc-bg) 52%,
            var(--oc-bg-deep) 100%
        );

    background-attachment: fixed;
}


.lesson-return-link {
    border-color:
        rgba(96, 165, 250, 0.34) !important;

    background:
        rgba(15, 28, 51, 0.92) !important;

    color: #dbeafe !important;

    box-shadow:
        0 12px 28px
        rgba(2, 6, 23, 0.25);
}


.lesson-return-link:hover,
.lesson-return-link:focus-visible {
    border-color:
        rgba(96, 165, 250, 0.72) !important;

    background:
        rgba(25, 45, 77, 0.98) !important;
}


.lesson-shell {
    color: var(--oc-text);
}


.lesson-header,
.lesson-header h1,
.lesson-header h2,
.lesson-header h3 {
    color: var(--oc-text) !important;
}


.lesson-header p:not(.eyebrow),
.lesson-shell > p,
.lesson-shell .subtitle,
.lesson-shell .description {
    color: var(--oc-muted) !important;
}


.eyebrow {
    color: #93c5fd !important;
}


select,
.lesson-shell select {
    border-color:
        rgba(148, 163, 184, 0.34) !important;

    background:
        var(--oc-surface) !important;

    color: var(--oc-text) !important;

    box-shadow:
        0 12px 28px
        rgba(2, 6, 23, 0.20);
}


select:focus,
select:focus-visible {
    border-color:
        var(--oc-primary) !important;

    outline:
        3px solid
        rgba(96, 165, 250, 0.24) !important;
}


.lesson-shell section,
.lesson-shell article,
.lesson-shell aside,
.lesson-shell .lesson-card,
.lesson-shell .lesson-panel,
.lesson-shell .lesson-section,
.lesson-shell .lesson-container,
.lesson-shell .content-card,
.lesson-shell .overview-card,
.lesson-shell .exercise-card,
.lesson-shell .question-card,
.lesson-shell .result-card {
    border-color:
        var(--oc-border) !important;

    background:
        linear-gradient(
            155deg,
            rgba(20, 37, 65, 0.98),
            rgba(11, 23, 43, 0.98)
        ) !important;

    color: var(--oc-text) !important;

    box-shadow:
        0 26px 65px
        rgba(2, 6, 23, 0.36);
}


.lesson-shell section h2,
.lesson-shell section h3,
.lesson-shell article h2,
.lesson-shell article h3 {
    color: var(--oc-text) !important;
}


.lesson-shell section p,
.lesson-shell article p,
.lesson-shell aside p {
    color: #c3cee0;
}


.lesson-shell .step-card,
.lesson-shell .lesson-step,
.lesson-shell .instruction-card,
.lesson-shell .method-card,
.lesson-shell .feature-card,
.lesson-shell .explanation-card,
.lesson-shell section > div > article {
    border:
        1px solid
        rgba(148, 163, 184, 0.18) !important;

    background:
        linear-gradient(
            145deg,
            rgba(25, 45, 77, 0.88),
            rgba(16, 30, 54, 0.94)
        ) !important;

    color: var(--oc-text) !important;
}


.lesson-shell .step-card h3,
.lesson-shell .lesson-step h3,
.lesson-shell .instruction-card h3,
.lesson-shell .method-card h3,
.lesson-shell .feature-card h3 {
    color: #f8fafc !important;
}


.lesson-shell .step-number,
.lesson-shell .number,
.lesson-shell [class*="step-number"] {
    border-color:
        rgba(96, 165, 250, 0.28) !important;

    background:
        rgba(37, 99, 235, 0.27) !important;

    color: #bfdbfe !important;
}


.lesson-shell .development-status,
.lesson-shell .status-panel,
.lesson-shell .status-card,
.lesson-shell .notice,
.lesson-shell .info-box,
.lesson-shell [class*="development"],
.lesson-shell [class*="status-banner"] {
    border-color:
        rgba(96, 165, 250, 0.30) !important;

    background:
        rgba(30, 64, 175, 0.20) !important;

    color: #dbeafe !important;
}


.lesson-shell input,
.lesson-shell textarea {
    border-color:
        rgba(148, 163, 184, 0.34) !important;

    background:
        rgba(6, 14, 29, 0.90) !important;

    color: var(--oc-text) !important;

    caret-color: var(--oc-primary);
}


.lesson-shell input::placeholder,
.lesson-shell textarea::placeholder {
    color: #77869d;
}


.lesson-shell input:focus,
.lesson-shell textarea:focus {
    border-color:
        var(--oc-primary) !important;

    outline:
        3px solid
        rgba(96, 165, 250, 0.20) !important;
}


.lesson-shell button,
.lesson-shell .button,
.lesson-shell .primary-button,
.lesson-shell .start-button,
.lesson-shell [class*="start-button"] {
    border-color:
        rgba(96, 165, 250, 0.42) !important;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 30px
        rgba(37, 99, 235, 0.28);
}


.lesson-shell button:hover:not(:disabled),
.lesson-shell .button:hover,
.lesson-shell .primary-button:hover,
.lesson-shell .start-button:hover {
    filter: brightness(1.09);

    box-shadow:
        0 17px 36px
        rgba(14, 165, 233, 0.34);
}


.lesson-shell button:disabled {
    opacity: 0.56;
}


.lesson-shell .option,
.lesson-shell .answer-option,
.lesson-shell .choice,
.lesson-shell [class*="option"] {
    border-color:
        rgba(148, 163, 184, 0.26) !important;

    background:
        rgba(20, 37, 65, 0.94) !important;

    color: var(--oc-text) !important;
}


.lesson-shell .option:hover,
.lesson-shell .answer-option:hover,
.lesson-shell .choice:hover {
    border-color:
        rgba(96, 165, 250, 0.58) !important;

    background:
        rgba(29, 53, 89, 0.98) !important;
}


.lesson-shell .correct,
.lesson-shell .success,
.lesson-shell [class*="success"] {
    border-color:
        rgba(52, 211, 153, 0.30) !important;

    background:
        rgba(6, 78, 59, 0.48) !important;

    color: var(--oc-success) !important;
}


.lesson-shell .warning,
.lesson-shell [class*="warning"] {
    border-color:
        rgba(251, 191, 36, 0.30) !important;

    background:
        rgba(120, 53, 15, 0.48) !important;

    color: var(--oc-warning) !important;
}


.lesson-shell .incorrect,
.lesson-shell .error,
.lesson-shell [class*="error"] {
    border-color:
        rgba(248, 113, 113, 0.30) !important;

    background:
        rgba(127, 29, 29, 0.48) !important;

    color: var(--oc-danger) !important;
}


.lesson-shell progress {
    accent-color: var(--oc-primary);
}


.lesson-shell hr {
    border-color:
        rgba(148, 163, 184, 0.20);
}


@media (max-width: 720px) {
    body {
        background:
            linear-gradient(
                180deg,
                #0b1630 0%,
                var(--oc-bg-deep) 100%
            );

        background-attachment: scroll;
    }

    .lesson-shell section,
    .lesson-shell article {
        box-shadow:
            0 20px 46px
            rgba(2, 6, 23, 0.32);
    }
}

/* OFFICIAL_CONVERSATIONAL_DARK_THEME_V1_END */


/* =========================================================
   OFFICIAL_CONVERSATIONAL_LIGHT_BLOCK_FIX_V1
   Exact overrides for components not covered by dark theme V1.
   ========================================================= */

.lesson-shell .last-result {
    border:
        1px solid
        rgba(148, 163, 184, 0.22) !important;

    background:
        linear-gradient(
            145deg,
            rgba(20, 37, 65, 0.96),
            rgba(11, 23, 43, 0.98)
        ) !important;

    color: #e2e8f0 !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


.lesson-shell .last-result:empty {
    display: none;
}


.lesson-shell .answer-instruction-panel {
    border-color:
        rgba(96, 165, 250, 0.26) !important;

    background:
        rgba(30, 64, 175, 0.20) !important;

    color: #dbeafe !important;
}


.lesson-shell .answer-instruction-text {
    color: #cbd5e1 !important;
}


.lesson-shell .answers {
    border-color:
        rgba(148, 163, 184, 0.18) !important;

    background:
        transparent !important;

    color: #f8fafc !important;

    box-shadow: none !important;
}


.lesson-shell .answer {
    border-color:
        rgba(148, 163, 184, 0.28) !important;

    background:
        linear-gradient(
            145deg,
            rgba(25, 45, 77, 0.96),
            rgba(16, 30, 54, 0.98)
        ) !important;

    color: #f8fafc !important;
}


.lesson-shell .answer:hover:not(:disabled) {
    border-color:
        rgba(96, 165, 250, 0.64) !important;

    background:
        rgba(30, 58, 96, 0.98) !important;
}


.lesson-shell .answer.correct {
    border-color:
        rgba(52, 211, 153, 0.40) !important;

    background:
        rgba(6, 78, 59, 0.58) !important;

    color: #6ee7b7 !important;
}


.lesson-shell .answer.wrong {
    border-color:
        rgba(248, 113, 113, 0.40) !important;

    background:
        rgba(127, 29, 29, 0.58) !important;

    color: #fca5a5 !important;
}


.lesson-shell .feedback {
    border-color:
        rgba(148, 163, 184, 0.22) !important;

    background:
        rgba(12, 25, 47, 0.96) !important;

    color: #dbeafe !important;
}


.lesson-shell .feedback.correct {
    border-color:
        rgba(52, 211, 153, 0.36) !important;

    background:
        rgba(6, 78, 59, 0.54) !important;

    color: #6ee7b7 !important;
}


.lesson-shell .feedback.wrong {
    border-color:
        rgba(248, 113, 113, 0.36) !important;

    background:
        rgba(127, 29, 29, 0.54) !important;

    color: #fca5a5 !important;
}


.lesson-shell .lesson-status span {
    border:
        1px solid
        rgba(148, 163, 184, 0.22) !important;

    background:
        rgba(25, 45, 77, 0.88) !important;

    color: #dbeafe !important;
}


.lesson-shell .digital-time {
    border-color:
        rgba(96, 165, 250, 0.24) !important;

    background:
        rgba(7, 15, 31, 0.82) !important;

    color: #93c5fd !important;
}


.lesson-shell .instruction-audio-controls {
    border-color:
        rgba(148, 163, 184, 0.20) !important;

    background:
        rgba(12, 25, 47, 0.84) !important;

    color: #dbeafe !important;
}


.lesson-shell .instruction-audio-toggle,
.lesson-shell .instruction-repeat-button {
    border-color:
        rgba(96, 165, 250, 0.30) !important;

    background:
        rgba(25, 45, 77, 0.96) !important;

    color: #dbeafe !important;
}


.lesson-shell .instruction-audio-toggle:hover,
.lesson-shell .instruction-repeat-button:hover {
    border-color:
        rgba(96, 165, 250, 0.64) !important;

    background:
        rgba(30, 58, 96, 0.98) !important;
}

/* OFFICIAL_CONVERSATIONAL_LIGHT_BLOCK_FIX_V1_END */