.dashboard-stage-slot { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dashboard-stage-slot[data-stage="1"] { --stage-color: #8b5cf6; --stage-soft: #f3e8ff; --stage-ink: #6d28d9; }
.dashboard-stage-slot[data-stage="2"] { --stage-color: #0ea5e9; --stage-soft: #e0f2fe; --stage-ink: #0369a1; }
.dashboard-stage-slot[data-stage="3"] { --stage-color: #f97316; --stage-soft: #ffedd5; --stage-ink: #c2410c; }
.dashboard-stage-slot[data-stage="4"] { --stage-color: #14b8a6; --stage-soft: #ccfbf1; --stage-ink: #0f766e; }
.stage-first-try { width: 90%; align-self: center; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 8px; border-radius: 20px; border: 2px solid color-mix(in srgb, var(--stage-color) 42%, white); color: var(--stage-ink); background: linear-gradient(145deg, #fff 15%, var(--stage-soft)); box-shadow: inset 0 0 0 3px #ffffffb3, 0 4px 0 color-mix(in srgb, var(--stage-color) 23%, white); font-size: 16px; font-weight: 900; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.stage-first-try-icon { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #e8b83e; background: linear-gradient(145deg, #fff3a3, #ffd34d); color: #94600b; box-shadow: inset 0 1px 2px #fff9, 0 2px 3px #bd8c2526; font-size: 21px; font-weight: 900; line-height: 1; }
.stage-first-try:hover:not(:disabled) { transform: translateY(-3px); box-shadow: inset 0 0 0 3px #fff, 0 6px 0 var(--stage-soft); }
.stage-first-try:focus-visible { outline: 3px solid var(--stage-ink); outline-offset: 4px; }
.stage-first-try:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
body.teacher-tour-open #dashboard-section .dashboard-stage-board { padding-top: 140px; }
body.teacher-tour-open #dashboard-section .dashboard-stage-card { aspect-ratio: .88; }
.stage-tour-listen { border: 1px solid #c5dcb5; border-radius: 12px; background: #f1f8e9; color: #3b6a3f; font-size: 13px; padding: 6px 9px; cursor: pointer; }

.stage-tour-interactive { z-index: 2147483000; pointer-events: none; }
.stage-tour-interactive .teacher-tour-shade { pointer-events: auto; }
.stage-tour-continue { min-height: 42px; padding: 8px 16px; border: 2px solid #438443; border-radius: 14px; color: white; background: #438443; font-size: 15px; font-weight: 900; cursor: pointer; }
.stage-tour-continue[hidden], .stage-tour-interactive button[hidden] { display: none; }
body.stage-tour-open .view-section { padding-bottom: var(--teacher-tour-space, 242px) !important; }
body.stage-tour-open #main-container .view-section > .learning-pane { min-height: 0 !important; max-height: calc(100dvh - var(--teacher-tour-space, 242px) - 110px) !important; overflow-y: auto !important; }
body.stage-tour-open #result-modal { align-items: flex-start; padding-top: 18px; }
body.stage-tour-open #result-modal > div { max-height: calc(100dvh - var(--teacher-tour-space, 242px) - 36px); overflow-y: auto; }
body.stage-tour-open :is(.word-bank-camera-dialog, .shared-word-card-shell, .aiedue-library-shell) { max-height: calc(100dvh - var(--teacher-tour-space, 242px) - 36px); margin-top: 12px; }
body.stage-tour-open :is(#word-bank-camera-modal, #shared-word-card-modal, #aiedue-library-modal) { align-items: flex-start; padding-top: 12px; }
body.stage-tour-open #drawing-canvas { touch-action: none; }