/* Mission 01, Pages 4-16: visual language approved in the reference board. */

.m01-refined {
    --m01-primary: #00d4ff;
    --m01-success: #45f0b2;
    --m01-violet: #9a6cff;
    --m01-canvas: #071a34;
    --m01-panel: rgba(7, 24, 54, .88);
    --m01-panel-soft: rgba(9, 34, 68, .76);
    --m01-panel-deep: rgba(4, 16, 40, .92);
    --m01-line: rgba(0, 212, 255, .48);
    --m01-line-soft: rgba(91, 182, 224, .22);
    --m01-text: #f7fbff;
    --m01-text-soft: #b8e6ff;
    --m01-text-muted: #7fb6d9;
    color: var(--m01-text) !important;
    background: transparent !important;
}

.m01-refined::before {
    background: transparent !important;
}

.m01-refined::after {
    background:
        radial-gradient(circle at 82% 8%, rgba(0, 212, 255, .09), transparent 30%),
        linear-gradient(180deg, rgba(4, 13, 38, .12), rgba(3, 13, 34, .34)) !important;
    pointer-events: none;
}

/* Type hierarchy */
.m01-refined :is(h1, h2) {
    color: var(--m01-primary) !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 18px rgba(0, 212, 255, .16) !important;
}

#page10EvidenceAvenue.m01-refined .page10-title-zone h2,
#page11PositionPoint.m01-refined .page11-title-zone h2,
#page12DecisionHub.m01-refined .page12-title-zone h2,
#page13ActionStudio.m01-refined .page13-title-zone h2,
#page14FieldMission.m01-refined .page14-title-zone h2,
#page15MissionReport.m01-refined .page15-title-zone h2 {
    color: var(--m01-primary) !important;
    text-shadow: 0 0 18px rgba(0, 212, 255, .16) !important;
}

.m01-refined :is(h3, h4, h5, h6, strong, b) {
    color: var(--m01-text) !important;
    letter-spacing: 0 !important;
}

.m01-refined :is(p, li, label) {
    color: var(--m01-text) !important;
}

.m01-refined :is(small, em, [class*="subtitle"], [class*="instruction"], [class*="hint"], [class*="meta"]) {
    color: var(--m01-text-soft) !important;
}

.m01-refined :is(
    [class*="task-label"],
    [class*="question-label"],
    [class*="word-puzzle-label"],
    [class*="word-discovery-label"],
    [class*="eyebrow"],
    [class*="kicker"],
    .toolbox-label,
    .idea-bank-label
) {
    color: var(--m01-success) !important;
}

/* Header, stage and score chrome */
.m01-refined :is(
    .mission-header,
    .page11-mission-header,
    .page12-mission-header,
    .page13-mission-header,
    .page14-mission-header,
    .page15-mission-header
) {
    border-bottom-color: rgba(0, 212, 255, .18) !important;
    background: linear-gradient(90deg, rgba(5, 22, 51, .76), rgba(9, 21, 58, .42)) !important;
    box-shadow: 0 10px 28px rgba(0, 7, 24, .2) !important;
}

.m01-refined :is(
    .mission-badge,
    .page11-mission-badge,
    [class*="stage-badge"],
    .mission-identity > span,
    .mission-header-left > span,
    .mission-header-left > b
) {
    border: 1px solid var(--m01-line) !important;
    border-radius: 7px !important;
    color: var(--m01-primary) !important;
    background: rgba(5, 24, 53, .78) !important;
    box-shadow: inset 0 0 14px rgba(0, 212, 255, .04) !important;
}

.m01-refined :is(
    .mission-score,
    .page10-mission-score,
    .page11-mission-score,
    .page12-mission-score,
    .page13-mission-score,
    .page14-mission-score,
    .page15-mission-score,
    .vocab-progress-card
) {
    border: 1px solid rgba(154, 108, 255, .72) !important;
    border-radius: 8px !important;
    color: var(--m01-text) !important;
    background: rgba(12, 17, 53, .88) !important;
    box-shadow: 0 0 18px rgba(154, 108, 255, .13) !important;
}

.m01-refined :is(.mission-score, [class*="mission-score"]) strong {
    color: var(--m01-text) !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, .22) !important;
}

/* Primary glass surfaces */
.m01-refined :is(
    .timeline-card,
    .drop-zone,
    .nova-mission-update,
    .video-panel,
    .watch-task-panel,
    .listening-card,
    .watch-mission-update,
    .prediction-step,
    .class-poll-step,
    .first-take-nova-core,
    .hypothesis-network,
    .stage-two-update,
    .title-concept-card,
    .title-prediction-area,
    .page6-nova-core,
    .page6-evidence-status,
    .opinion-block,
    .page7-result-zone,
    .paragraph-zone,
    .background-idea-bank,
    .background-map-update,
    .read-apply-image-panel,
    .read-apply-tools,
    .read-apply-assessment,
    .page9-result,
    .tf-card,
    .page10-evidence-system,
    .page10-mission-update,
    .page11-step,
    .author-conclusion,
    .page11-nova-zone,
    .page11-reasoning-zone,
    .page11-next-zone,
    .page12-argument-area,
    .page12-decision-hub,
    .page12-title-callback,
    .page12-nova-zone,
    .page12-map-update,
    .page12-next-zone,
    .word-puzzle-area,
    .word-discovery-area,
    .word-transfer-area,
    .word-formation-takeaway,
    .page13-nova-zone,
    .page14-step-card,
    .page14-toolbox,
    .page14-position-journey,
    .page14-nova-zone,
    .page15-module,
    .page15-final-reflection,
    .page15-nova-zone
) {
    border: 1px solid var(--m01-line) !important;
    border-radius: 8px !important;
    color: var(--m01-text) !important;
    background: linear-gradient(180deg, var(--m01-panel-soft), var(--m01-panel)) !important;
    box-shadow:
        0 12px 30px rgba(0, 7, 27, .25),
        inset 0 1px 0 rgba(153, 238, 255, .035) !important;
}

/* Compact rails and control strips */
.m01-refined :is(
    .timeline-controls,
    .watch-activity-control,
    .page7-action-row,
    .background-controls,
    .read-apply-tools,
    .read-apply-assessment,
    .evidence-strategy,
    .evidence-collection-progress,
    .page15-skills-status
) {
    border: 1px solid rgba(0, 212, 255, .34) !important;
    border-radius: 8px !important;
    color: var(--m01-text) !important;
    background: rgba(4, 17, 42, .9) !important;
    box-shadow: none !important;
}

/* Nested content should read as part of the parent surface, not as white cards. */
.m01-refined :is(
    .timeline-card-text,
    .answer-field,
    .benefit-route,
    .problem-route,
    .title-prediction-option,
    .background-idea-card,
    .toolbox-chip,
    .tf-evidence,
    .tf-evidence-flow,
    .evidence-path-node,
    .attitude-option,
    .clue-option,
    .page12-argument-node,
    .word-puzzle-card,
    .word-part-card,
    .morpheme-block,
    .new-word-box,
    .telegraph-option,
    .page14-position-options button,
    .page15-skills label,
    .page15-report-list span,
    .page15-position-path span,
    .page15-final-reflection button,
    .page15-map > div span
) {
    border-color: rgba(0, 212, 255, .28) !important;
    color: var(--m01-text) !important;
    background: rgba(8, 30, 62, .82) !important;
    box-shadow: none !important;
}

/* Buttons and inputs */
.m01-refined :is(button, input, textarea, select) {
    border-color: rgba(0, 212, 255, .62) !important;
    border-radius: 7px !important;
    color: var(--m01-text) !important;
    background: rgba(5, 27, 58, .92) !important;
    box-shadow: none !important;
}

.m01-refined :is(input, textarea, select)::placeholder {
    color: var(--m01-text-muted) !important;
}

.m01-refined button:not(:disabled):hover,
.m01-refined button:not(:disabled):focus-visible {
    border-color: var(--m01-primary) !important;
    color: #02152c !important;
    background: linear-gradient(180deg, #37dcff, #00bfe8) !important;
    box-shadow: 0 0 18px rgba(0, 212, 255, .34) !important;
}

.m01-refined button:disabled {
    border-color: rgba(127, 182, 217, .18) !important;
    color: rgba(184, 230, 255, .45) !important;
    background: rgba(7, 24, 51, .55) !important;
    opacity: .72 !important;
}

/* Selected, completed and incorrect states */
.m01-refined :is(.selected, .is-selected, .active, .is-active, [aria-pressed="true"]) {
    border-color: var(--m01-primary) !important;
    color: #eaffff !important;
    background: linear-gradient(135deg, rgba(0, 155, 199, .9), rgba(5, 89, 147, .92)) !important;
    box-shadow: 0 0 16px rgba(0, 212, 255, .27) !important;
}

.m01-refined :is(.correct, .is-correct, .complete, .completed, .is-complete, .is-collected, .is-recorded) {
    border-color: var(--m01-success) !important;
    color: #ecfff9 !important;
    background: rgba(16, 111, 100, .86) !important;
    box-shadow: 0 0 15px rgba(69, 240, 178, .2) !important;
}

.m01-refined :is(.wrong, .is-wrong, .incorrect, .is-incorrect) {
    border-color: #ff9b7a !important;
    color: #fff2ee !important;
    background: rgba(112, 42, 47, .86) !important;
}

/* Progress nodes: cyan completed, violet current. */
.m01-refined :is(.activity-progress-dots, .background-progress-dots, .evidence-card-dots, .nova-analysis-progress) i {
    border-color: rgba(0, 212, 255, .65) !important;
    background: rgba(5, 24, 53, .94) !important;
    box-shadow: none !important;
}

.m01-refined :is(.activity-progress-dots, .background-progress-dots, .evidence-card-dots, .nova-analysis-progress) i:is(.active, .is-active) {
    border-color: var(--m01-violet) !important;
    background: var(--m01-violet) !important;
    box-shadow: 0 0 12px rgba(154, 108, 255, .58) !important;
}

.m01-refined :is(.activity-progress-dots, .background-progress-dots, .evidence-card-dots, .nova-analysis-progress) i:is(.complete, .is-complete) {
    border-color: var(--m01-primary) !important;
    background: var(--m01-primary) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, .45) !important;
}

/* Page-specific visual cleanup */
.m01-refined .timeline-line {
    background: linear-gradient(90deg, rgba(0, 212, 255, .2), var(--m01-primary), rgba(69, 240, 178, .32)) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, .2) !important;
}

.m01-refined .evolution-line-bg {
    background: linear-gradient(90deg, rgba(0, 212, 255, .18), rgba(0, 212, 255, .76), rgba(69, 240, 178, .2)) !important;
}

.m01-refined .timeline-track::before,
.m01-refined .timeline-track::after {
    border-color: var(--m01-primary) !important;
    background: var(--m01-canvas) !important;
}

.m01-refined .listening-card::before,
.m01-refined .listening-card::after,
.m01-refined .tf-card::before,
.m01-refined .tf-card::after {
    background: transparent !important;
}

.m01-refined :is(.page7-result-zone, .background-map-update, .page9-result, .page10-mission-update) > * {
    border-color: rgba(0, 212, 255, .18) !important;
}

.m01-refined :is(.page7-result-zone, .background-map-update, .page9-result, .page10-mission-update) span:not([class]) {
    color: var(--m01-text-soft) !important;
    background: rgba(6, 25, 54, .76) !important;
}

.m01-refined :is(
    .poll-results i,
    .concept-examples span,
    .prediction-letter,
    .evidence-route > div,
    .evidence-pattern-flow > div,
    .text-life-pattern > div > b,
    .page9-lens-flow > span,
    .page10-stage-identity > b,
    .strategy-label,
    .teaching-lens-flow > span,
    .attitude-letter,
    .page12-inputs > span,
    .page12-map-update > div > strong,
    .page12-map-update > div > b,
    .page14-chips > span,
    .page14-step-card > em,
    .page14-requirement,
    .page14-sentence-frame,
    .page15-next-mission > div > span
) {
    border-color: rgba(0, 212, 255, .3) !important;
    color: var(--m01-text-soft) !important;
    background: rgba(6, 27, 57, .86) !important;
    box-shadow: none !important;
}

.m01-refined .branching-network {
    border-color: rgba(0, 212, 255, .3) !important;
    color: var(--m01-text) !important;
    background: rgba(5, 23, 52, .82) !important;
}

.m01-refined .text-life-pattern > div > b,
.m01-refined .page12-map-update > div > :is(strong, b) {
    border: 1px solid rgba(0, 212, 255, .3) !important;
    color: var(--m01-text-soft) !important;
    background: rgba(6, 27, 57, .86) !important;
    box-shadow: none !important;
}

.m01-refined .page12-core {
    border: 1px solid rgba(154, 108, 255, .68) !important;
    color: var(--m01-text) !important;
    background: radial-gradient(circle, rgba(24, 48, 94, .96), rgba(8, 22, 54, .94)) !important;
    box-shadow: 0 0 24px rgba(154, 108, 255, .18) !important;
}

.m01-refined .page12-core :is(small, strong) {
    color: var(--m01-text) !important;
}

.m01-refined :is(.prediction-letter, .attitude-letter) {
    color: var(--m01-primary) !important;
}

.m01-refined :is(.strategy-label, .page14-requirement) {
    color: var(--m01-success) !important;
}

.m01-refined .word-puzzle-area,
.m01-refined .word-discovery-area,
.m01-refined .word-transfer-area {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.m01-refined .page15-skills label,
.m01-refined .page15-report-list span {
    border-radius: 6px !important;
}

.m01-refined .page15-final-reflection button.is-selected {
    border-color: var(--m01-success) !important;
    background: rgba(16, 111, 100, .9) !important;
}

.m01-refined .teaching-lens-panel {
    border-color: var(--m01-line) !important;
    color: var(--m01-text) !important;
    background: rgba(4, 18, 43, .97) !important;
    box-shadow: 0 18px 48px rgba(0, 5, 24, .48), 0 0 22px rgba(0, 212, 255, .1) !important;
}

.m01-refined .nova-ball,
.m01-refined [class*="nova"] img {
    filter: drop-shadow(0 0 14px rgba(0, 212, 255, .5)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .m01-refined *,
    .m01-refined *::before,
    .m01-refined *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}
\n\n/* =========================================================\n   PAGE 14 / ACTION STUDIO — WORD PAIR INTERACTION\n   Strong selected state + consume matched pairs.\n   ========================================================= */\n#page13ActionStudio.m01-refined .word-puzzle-card.is-selected {\n    color:#ffffff !important;\n    background:linear-gradient(135deg, rgba(0,199,235,.98), rgba(0,111,170,.96)) !important;\n    border-color:#59f1ff !important;\n    box-shadow:0 0 0 2px rgba(89,241,255,.16), 0 0 24px rgba(0,212,255,.42) !important;\n    transform:translateY(-2px) scale(1.015);\n}\n\n#page13ActionStudio.m01-refined .word-puzzle-card.is-connected {\n    color:#effffb !important;\n    background:linear-gradient(135deg, rgba(15,126,109,.98), rgba(8,76,91,.98)) !important;\n    border-color:#45f0b2 !important;\n    box-shadow:0 0 22px rgba(69,240,178,.35) !important;\n}\n\n#page13ActionStudio.m01-refined .word-puzzle-card.is-consumed {\n    opacity:0 !important;\n    transform:scale(.82) translateY(-5px) !important;\n    pointer-events:none !important;\n    transition:opacity .34s ease, transform .34s ease !important;\n}\n\n#page13ActionStudio.m01-refined .word-puzzle-card[hidden] {\n    display:none !important;\n}\n