:root {
    --navy: #0b2d4f;
    --navy-2: #123f68;
    --teal: #119f9a;
    --teal-dark: #0f766e;
    --cyan: #34d6ce;
    --yellow: #facc15;
    --orange: #fb923c;
    --red: #ef4444;
    --green: #22c55e;
    --ink: #172033;
    --muted: #64748b;
    --line: #dce5ee;
    --surface: #ffffff;
    --surface-soft: #f5f8fb;
    --shadow: 0 18px 55px rgba(15, 43, 73, .12);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #eef4f8;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}
button, input, select { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
    min-height: 78px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 12px clamp(18px, 4vw, 56px);
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: linear-gradient(145deg, var(--navy), var(--teal));
    font-weight: 900;
    font-size: 24px;
    box-shadow: 0 8px 18px rgba(17,159,154,.25);
}
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { color: var(--navy); font-size: 15px; }
.brand small { color: var(--teal-dark); font-size: 12px; margin-top: 3px; }
.topnav { display: flex; justify-content: center; gap: 8px; }
.topnav a { padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--muted); }
.topnav a:hover, .topnav a.active { color: var(--navy); background: #eaf5f5; }
.profile-chip { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.profile-chip > span:last-child { display: flex; flex-direction: column; font-size: 13px; }
.profile-chip small { color: var(--muted); }

.avatar-mini, .avatar-large, .avatar-table {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(145deg, #fde68a, #fb7185);
    overflow: hidden;
}
.avatar-mini { width: 38px; height: 38px; }
.avatar-large { width: 104px; height: 104px; border: 5px solid white; box-shadow: 0 10px 30px rgba(15,43,73,.14); }
.avatar-table { width: 36px; height: 36px; }
.avatar-mini::before, .avatar-large::before, .avatar-table::before {
    content: "";
    position: absolute;
    width: 42%;
    height: 42%;
    border-radius: 50%;
    background: #7c2d12;
    left: 29%;
    top: 19%;
    box-shadow: 0 26px 0 9px #1e3a8a;
}
.avatar-2 { background: linear-gradient(145deg, #bfdbfe, #a78bfa); }
.avatar-2::before { background: #92400e; box-shadow: 0 26px 0 9px #0f766e; }
.avatar-3 { background: linear-gradient(145deg, #bbf7d0, #2dd4bf); }
.avatar-3::before { background: #5b321f; box-shadow: 0 26px 0 9px #7c3aed; }
.avatar-4 { background: linear-gradient(145deg, #fecdd3, #f59e0b); }
.avatar-4::before { background: #3f2415; box-shadow: 0 26px 0 9px #be123c; }
.teacher::before { background: #7c2d12; box-shadow: 0 26px 0 9px #0f766e; }

.app-shell { width: min(1480px, 100%); margin: 0 auto; padding: 28px clamp(18px, 4vw, 56px) 64px; }
.auth-shell { width: 100%; min-height: 100vh; padding: 0; display: grid; place-items: center; background: radial-gradient(circle at 15% 20%, rgba(52,214,206,.22), transparent 35%), #eaf1f6; }

.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 900; color: var(--teal-dark); }
.eyebrow.light { color: #9ff5ef; }
.muted { color: var(--muted); }

.login-card { width: min(1100px, calc(100% - 32px)); min-height: 680px; display: grid; grid-template-columns: 1.08fr .92fr; background: white; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 90px rgba(11,45,79,.18); }
.login-visual { position: relative; overflow: hidden; padding: 54px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, var(--navy), #0b4e67 55%, var(--teal)); color: white; }
.login-visual::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); right: -130px; bottom: -130px; }
.login-visual h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.02; margin: 10px 0 18px; letter-spacing: -.04em; }
.login-visual p { max-width: 540px; color: #d9f9f6; font-size: 17px; }
.hero-laptop { width: 320px; margin: 50px auto 20px; position: relative; z-index: 2; transform: perspective(900px) rotateY(-8deg) rotateX(4deg); }
.hero-screen { min-height: 210px; border: 12px solid #142132; border-bottom-width: 18px; border-radius: 18px 18px 8px 8px; background: linear-gradient(160deg, #f0fdfa, #dbeafe); color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 25px 55px rgba(0,0,0,.3); }
.hero-screen .pixel { font-size: 55px; }
.hero-screen small { color: var(--muted); }
.hero-base { height: 18px; background: #d5dce5; clip-path: polygon(8% 0,92% 0,100% 100%,0 100%); border-radius: 0 0 16px 16px; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.orbit-one { width: 390px; height: 390px; top: 70px; left: 70px; }
.orbit-two { width: 240px; height: 240px; top: 145px; left: 145px; }
.login-form-wrap { padding: clamp(38px, 6vw, 78px); display: flex; flex-direction: column; justify-content: center; }
.login-form-wrap h2 { margin: 8px 0 6px; font-size: 34px; color: var(--navy); }
.mobile-logo { display: none; align-items: center; gap: 10px; margin-bottom: 32px; color: var(--navy); }
.stack-form { display: grid; gap: 18px; margin-top: 28px; }
.stack-form label { display: grid; gap: 8px; font-weight: 800; font-size: 14px; color: var(--navy); }
.stack-form input { width: 100%; min-height: 52px; border: 1px solid #cbd5e1; border-radius: 14px; padding: 0 14px; outline: none; color: var(--ink); }
.stack-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(17,159,154,.13); }
.password-field { display: grid; grid-template-columns: 1fr auto; border: 1px solid #cbd5e1; border-radius: 14px; overflow: hidden; }
.password-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(17,159,154,.13); }
.password-field input { border: 0; border-radius: 0; box-shadow: none !important; }
.text-button { border: 0; background: white; color: var(--teal-dark); font-weight: 800; padding: 0 14px; cursor: pointer; }
.primary-button, .secondary-button, .mission-button { min-height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 18px; font-weight: 900; text-decoration: none; cursor: pointer; transition: .2s ease; }
.primary-button { border: 0; color: white; background: linear-gradient(135deg, var(--teal-dark), var(--teal)); box-shadow: 0 10px 22px rgba(15,118,110,.22); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 28px rgba(15,118,110,.3); }
.secondary-button { border: 1px solid var(--line); background: white; color: var(--navy); }
.secondary-button:hover { border-color: var(--teal); background: #f0fdfa; }
.demo-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.demo-accounts button { border: 1px solid var(--line); background: var(--surface-soft); border-radius: 14px; padding: 12px; text-align: left; cursor: pointer; color: var(--navy); }
.demo-accounts button:hover { border-color: var(--teal); background: #f0fdfa; }
.demo-accounts small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.alert { border-radius: 13px; padding: 12px 14px; margin-top: 18px; font-weight: 700; }
.alert.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.dashboard-hero, .teacher-hero { border-radius: 28px; color: white; background: linear-gradient(135deg, var(--navy), #0f4e65 60%, var(--teal)); padding: clamp(28px, 5vw, 54px); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.dashboard-hero::after, .teacher-hero::after { content: ""; position: absolute; width: 310px; height: 310px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); right: -70px; top: -170px; }
.dashboard-hero h1, .teacher-hero h1 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(32px, 4.8vw, 58px); line-height: 1.05; letter-spacing: -.035em; }
.dashboard-hero p, .teacher-hero p { max-width: 760px; color: #d9f9f6; font-size: 17px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-stats span { min-width: 120px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; }
.hero-stats strong { font-size: 22px; }
.hero-stats small { color: #b7efec; }
.progress-ring { --progress: 0; flex: 0 0 170px; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--yellow) calc(var(--progress) * 1%), rgba(255,255,255,.14) 0); position: relative; z-index: 2; }
.progress-ring::before { content: ""; width: 132px; height: 132px; border-radius: 50%; background: var(--navy-2); }
.progress-ring > div { position: absolute; text-align: center; display: flex; flex-direction: column; }
.progress-ring strong { font-size: 34px; }
.progress-ring small { color: #b7efec; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 42px 0 22px; }
.section-heading h2 { margin: 5px 0 0; color: var(--navy); font-size: 30px; }

.mission-map { position: relative; max-width: 1100px; margin: 0 auto; padding: 20px 0; }
.map-path { position: absolute; left: 50%; top: 40px; bottom: 40px; width: 8px; border-radius: 10px; background: repeating-linear-gradient(to bottom, #b7d9dc 0 20px, transparent 20px 34px); transform: translateX(-50%); }
.mission-node { position: relative; display: grid; grid-template-columns: 1fr 88px 1fr; align-items: center; margin: 34px 0; }
.mission-node:nth-of-type(even) .mission-card { grid-column: 1; grid-row: 1; }
.mission-node:nth-of-type(odd) .mission-card { grid-column: 3; grid-row: 1; }
.node-badge { grid-column: 2; grid-row: 1; width: 74px; height: 74px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: white; border: 8px solid #c8edf0; font-size: 30px; box-shadow: 0 12px 30px rgba(11,45,79,.15); z-index: 2; }
.mission-node.completed .node-badge { border-color: #86efac; background: #f0fdf4; }
.mission-node.locked .node-badge { filter: grayscale(1); opacity: .72; }
.mission-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 12px 35px rgba(15,43,73,.08); }
.mission-card:hover { border-color: #acdadd; transform: translateY(-2px); transition: .2s ease; }
.mission-node.locked .mission-card { opacity: .68; box-shadow: none; }
.mission-card-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.complete-label { color: #15803d; }
.ready-label { color: var(--teal-dark); }
.lock-label { color: #64748b; }
.mission-card h3 { margin: 10px 0 7px; color: var(--navy); font-size: 23px; }
.mission-card p { margin: 0; color: var(--muted); }
.mission-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.mission-meta span { background: #edf6f7; color: var(--teal-dark); padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: #d8dee7; font-size: 22px; }
.stars .earned { color: var(--yellow); text-shadow: 0 2px 4px rgba(250,204,21,.2); }
.mission-button { width: 100%; border: 0; background: var(--navy); color: white; }
.mission-button:hover { background: var(--teal-dark); }
.mission-button:disabled { background: #cbd5e1; cursor: not-allowed; }

.avatar-dialog { border: 0; border-radius: 24px; padding: 0; width: min(650px, calc(100% - 28px)); box-shadow: 0 35px 100px rgba(11,45,79,.28); }
.avatar-dialog::backdrop { background: rgba(11,45,79,.66); backdrop-filter: blur(5px); }
.avatar-dialog form { padding: 28px; }
.dialog-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.dialog-head h2 { margin: 5px 0 0; color: var(--navy); }
.dialog-head button { border: 0; background: #edf2f7; width: 38px; height: 38px; border-radius: 50%; font-size: 25px; cursor: pointer; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
.avatar-option { text-align: center; cursor: pointer; border: 2px solid transparent; border-radius: 18px; padding: 12px; }
.avatar-option:has(input:checked) { border-color: var(--teal); background: #f0fdfa; }
.avatar-option input { position: absolute; opacity: 0; }
.avatar-option strong { display: block; font-size: 12px; margin-top: 8px; color: var(--navy); }

.mission-shell { display: grid; grid-template-columns: 350px minmax(0, 1fr); min-height: calc(100vh - 136px); background: white; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); }
.mission-sidebar { background: linear-gradient(165deg, var(--navy), #0c4960 68%, var(--teal-dark)); color: white; padding: 30px; display: flex; flex-direction: column; }
.back-link { color: #c9f7f3; text-decoration: none; font-weight: 800; font-size: 13px; }
.mission-number { margin: 28px 0 10px; text-transform: uppercase; letter-spacing: .12em; color: #9ff5ef; font-size: 11px; font-weight: 900; }
.mission-icon-large { width: 82px; height: 82px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.17); border-radius: 24px; font-size: 38px; margin-bottom: 18px; }
.mission-sidebar h1 { font-size: 34px; line-height: 1.05; margin: 7px 0 12px; }
.mission-sidebar > p { color: #d9f9f6; }
.mission-objective { border-top: 1px solid rgba(255,255,255,.13); padding: 15px 0; display: grid; gap: 3px; }
.mission-objective strong { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #9ff5ef; }
.mission-objective span { font-size: 13px; }
.mission-progress { margin-top: auto; padding-top: 26px; }
.mission-progress > span { display: flex; justify-content: space-between; font-size: 12px; }
.mission-progress em { font-style: normal; color: var(--yellow); }
.mission-progress > div { height: 8px; border-radius: 999px; background: rgba(255,255,255,.15); margin-top: 8px; overflow: hidden; }
.mission-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), #fef08a); transition: width .35s ease; }
.mission-score { display: flex; justify-content: space-between; margin-top: 18px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.1); }
.mission-score span { display: flex; flex-direction: column; font-size: 11px; color: #b7efec; }
.mission-score strong { font-size: 19px; color: white; }
.mission-stage { min-width: 0; background: #f2f6f9; }
.stage-toolbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; background: white; border-bottom: 1px solid var(--line); }
.guide-chip { display: flex; gap: 11px; align-items: center; }
.guide-chip > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: #ecfeff; font-size: 24px; }
.guide-chip > div { display: flex; flex-direction: column; }
.guide-chip small { color: var(--muted); }
.timer { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-weight: 900; color: var(--navy); background: var(--surface-soft); }
.mission-app { padding: clamp(18px, 3vw, 34px); min-height: 650px; }

.mission-panel { background: white; border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 10px 28px rgba(11,45,79,.07); }
.briefing { text-align: center; max-width: 720px; margin: 50px auto; }
.briefing-icon { width: 112px; height: 112px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 30px; background: linear-gradient(145deg, #e0f7f6, #dbeafe); font-size: 55px; }
.briefing h2 { color: var(--navy); font-size: 34px; margin: 0 0 10px; }
.briefing p { color: var(--muted); font-size: 17px; }
.briefing ul { display: inline-grid; gap: 8px; text-align: left; padding: 0; list-style: none; margin: 20px auto; }
.briefing li::before { content: "✓"; margin-right: 9px; color: var(--teal-dark); font-weight: 900; }
.task-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 22px; }
.task-heading h2 { margin: 5px 0; color: var(--navy); font-size: 28px; }
.task-heading p { margin: 0; color: var(--muted); }
.step-chip { white-space: nowrap; border-radius: 999px; padding: 8px 12px; background: #ecfeff; color: var(--teal-dark); font-weight: 900; font-size: 12px; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.option-card { border: 2px solid var(--line); background: white; border-radius: 17px; padding: 18px; cursor: pointer; text-align: left; transition: .2s ease; }
.option-card:hover { border-color: #8dd4d3; transform: translateY(-2px); }
.option-card.selected, .option-card.correct { border-color: var(--teal); background: #f0fdfa; }
.option-card.wrong { border-color: #fca5a5; background: #fef2f2; }
.option-card .option-icon { font-size: 34px; display: block; margin-bottom: 8px; }
.option-card strong { display: block; color: var(--navy); }
.option-card small { color: var(--muted); }
.task-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.feedback-box { margin-top: 18px; border-radius: 15px; padding: 13px 15px; font-weight: 700; display: none; }
.feedback-box.show { display: block; }
.feedback-box.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.feedback-box.info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.feedback-box.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.drag-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 22px; }
.parts-tray { background: #f7fafc; border: 1px solid var(--line); border-radius: 18px; padding: 15px; }
.parts-tray h3 { color: var(--navy); margin: 0 0 12px; }
.draggable-part { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; margin: 8px 0; cursor: grab; font-weight: 800; color: var(--navy); box-shadow: 0 4px 12px rgba(15,43,73,.05); }
.draggable-part:active { cursor: grabbing; }
.draggable-part.placed { opacity: .35; pointer-events: none; }
.computer-desk { min-height: 450px; border: 2px dashed #a7cfd2; border-radius: 20px; background: linear-gradient(#e9f9fa 0 68%, #c99b6b 68% 73%, #e8edf2 73%); padding: 25px; display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; }
.drop-zone { border: 2px dashed #94a3b8; border-radius: 16px; min-height: 130px; display: grid; place-items: center; color: #64748b; text-align: center; padding: 10px; background: rgba(255,255,255,.55); transition: .2s ease; }
.drop-zone.drag-over { border-color: var(--teal); background: #ecfeff; transform: scale(1.02); }
.drop-zone.filled { border-style: solid; border-color: #6ee7b7; background: rgba(240,253,244,.92); color: #166534; font-weight: 900; }
.drop-zone.wrong-drop { animation: shake .35s ease; border-color: #ef4444; }
.device-emoji { font-size: 48px; display: block; }
@keyframes shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }

.sort-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sort-bin { min-height: 210px; border: 2px dashed #aab8c8; border-radius: 17px; padding: 12px; background: #f8fafc; }
.sort-bin h3 { margin: 0 0 10px; color: var(--navy); font-size: 15px; }
.sort-bin .draggable-part { font-size: 12px; }
.sort-bin.drag-over { border-color: var(--teal); background: #f0fdfa; }

.port-board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.port-device, .port-target { border: 2px solid var(--line); border-radius: 18px; padding: 18px; min-height: 90px; display: flex; align-items: center; gap: 12px; background: white; cursor: pointer; }
.port-device:hover, .port-target:hover { border-color: #8dd4d3; }
.port-device.selected { border-color: var(--teal); background: #f0fdfa; }
.port-target.matched { border-color: #22c55e; background: #f0fdf4; }
.port-target.wrong { border-color: #ef4444; background: #fef2f2; }
.port-symbol { font-size: 30px; min-width: 45px; text-align: center; }

.virtual-laptop { max-width: 760px; margin: 0 auto; }
.laptop-screen { min-height: 440px; border: 15px solid #172033; border-bottom-width: 24px; border-radius: 20px 20px 9px 9px; background: linear-gradient(145deg, #0b5270, #0f766e); overflow: hidden; position: relative; color: white; }
.laptop-base { height: 22px; background: #cbd5e1; clip-path: polygon(7% 0,93% 0,100% 100%,0 100%); border-radius: 0 0 18px 18px; }
.power-state { min-height: 401px; display: grid; place-items: center; text-align: center; padding: 30px; }
.power-state .power-icon { font-size: 72px; }
.power-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.power-controls button { border: 1px solid rgba(255,255,255,.3); color: white; background: rgba(255,255,255,.12); border-radius: 14px; padding: 11px 15px; cursor: pointer; font-weight: 800; }
.power-controls button:hover { background: rgba(255,255,255,.22); }
.desktop-screen { min-height: 401px; background: linear-gradient(145deg, #155e75, #0f766e); position: relative; padding: 24px; }
.desktop-icons { display: grid; width: 100px; gap: 18px; }
.desktop-icon { text-align: center; font-size: 12px; }
.desktop-icon span { display: block; font-size: 38px; }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; min-height: 48px; padding: 6px 10px; background: rgba(6,24,43,.78); display: flex; align-items: center; justify-content: space-between; }
.start-button { border: 0; width: 38px; height: 38px; border-radius: 10px; background: #0ea5e9; color: white; cursor: pointer; }
.start-menu { position: absolute; left: 12px; bottom: 56px; width: 260px; padding: 16px; border-radius: 16px; background: rgba(15,23,42,.96); box-shadow: 0 15px 45px rgba(0,0,0,.35); display: none; }
.start-menu.open { display: block; }
.start-menu button { width: 100%; border: 0; border-radius: 10px; color: white; background: transparent; padding: 10px; text-align: left; cursor: pointer; }
.start-menu button:hover { background: rgba(255,255,255,.1); }

.mouse-game { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.mouse-field { min-height: 430px; border: 2px solid var(--line); border-radius: 20px; position: relative; background: linear-gradient(135deg, #eef9fa, #eff6ff); overflow: hidden; }
.click-target { position: absolute; width: 72px; height: 72px; border-radius: 50%; border: 7px solid white; background: var(--teal); box-shadow: 0 8px 22px rgba(15,118,110,.28); cursor: pointer; display: grid; place-items: center; color: white; font-weight: 900; user-select: none; }
.mouse-instructions { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: white; }
.mouse-instructions h3 { color: var(--navy); }
.typing-box { margin-top: 18px; }
.typing-box code { display: block; padding: 14px; border-radius: 12px; background: #0f172a; color: #d1fae5; font-size: 16px; }
.typing-box textarea { width: 100%; min-height: 100px; border: 2px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; resize: vertical; }
.typing-box textarea:focus { outline: none; border-color: var(--teal); }

.device-scenarios { display: grid; gap: 14px; }
.scenario-row { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(4, 110px); gap: 10px; align-items: stretch; }
.scenario-text { border-radius: 15px; background: #f8fafc; border: 1px solid var(--line); padding: 15px; color: var(--navy); font-weight: 800; }
.device-choice { border: 2px solid var(--line); border-radius: 15px; background: white; padding: 10px; cursor: pointer; text-align: center; }
.device-choice:hover { border-color: #8dd4d3; }
.device-choice.selected { border-color: var(--teal); background: #f0fdfa; }
.device-choice.correct { border-color: #22c55e; background: #f0fdf4; }
.device-choice.wrong { border-color: #ef4444; background: #fef2f2; }
.device-choice span { display: block; font-size: 29px; }
.device-choice small { font-weight: 800; }

.results-card { max-width: 650px; margin: 35px auto; text-align: center; }
.result-burst { width: 130px; height: 130px; display: grid; place-items: center; border-radius: 50%; margin: 0 auto 20px; background: linear-gradient(145deg, #fef3c7, #fde68a); font-size: 65px; box-shadow: 0 18px 40px rgba(250,204,21,.24); }
.results-card h2 { color: var(--navy); font-size: 38px; margin: 0 0 7px; }
.result-stars { color: #d8dee7; font-size: 45px; letter-spacing: 4px; }
.result-stars .earned { color: var(--yellow); }
.result-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.result-metrics div { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); display: flex; flex-direction: column; }
.result-metrics strong { font-size: 23px; color: var(--navy); }
.result-metrics small { color: var(--muted); }
.result-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.teacher-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.class-selector { min-width: 250px; position: relative; z-index: 2; }
.class-selector label { display: grid; gap: 7px; font-size: 12px; font-weight: 900; color: #b7efec; }
.class-selector select { min-height: 46px; border-radius: 13px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.13); color: white; padding: 0 12px; }
.class-selector option { color: var(--ink); }
.class-selector > span { display: block; margin-top: 8px; color: #b7efec; font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.metric-grid article { background: white; border: 1px solid var(--line); border-radius: 19px; padding: 18px; display: flex; gap: 13px; box-shadow: 0 8px 24px rgba(15,43,73,.06); }
.metric-grid article > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: #edf7f7; font-size: 21px; }
.metric-grid article > div { display: flex; flex-direction: column; }
.metric-grid small, .metric-grid em { color: var(--muted); font-style: normal; font-size: 11px; }
.metric-grid strong { color: var(--navy); font-size: 27px; line-height: 1.1; }
.teacher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 21px; padding: 22px; box-shadow: 0 8px 24px rgba(15,43,73,.05); }
.panel.wide { grid-column: 1 / -1; }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.panel-head h2 { margin: 5px 0 0; color: var(--navy); font-size: 22px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: 10px; }
td { font-size: 13px; }
.learner-cell { display: flex; align-items: center; gap: 9px; color: var(--navy); }
.mini-progress { width: 140px; height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.mini-progress span { display: block; height: 100%; background: var(--teal); }
td small { color: var(--muted); }
.support-pill { padding: 6px 9px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-weight: 800; font-size: 11px; }
.support-pill.excellent { background: #f0fdf4; color: #15803d; }
.support-pill.needs-support { background: #fef2f2; color: #b91c1c; }
.support-pill.mouse-practice { background: #fff7ed; color: #c2410c; }
.bar-list { display: grid; gap: 14px; }
.bar-list > div > span { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.bar-list em { font-style: normal; color: var(--muted); }
.bar-list > div > div { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.bar-list i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-dark), var(--cyan)); }
.attention-list { display: grid; gap: 13px; }
.attention-list > div { display: flex; gap: 12px; padding: 13px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--line); }
.attention-list > div > span { font-size: 24px; }
.attention-list p { margin: 0; display: flex; flex-direction: column; }
.attention-list small { color: var(--muted); margin-top: 2px; }
.empty-state { text-align: center; padding: 100px 20px; }

@media (max-width: 1050px) {
    .login-card { grid-template-columns: 1fr; max-width: 650px; }
    .login-visual { display: none; }
    .mobile-logo { display: flex; }
    .mission-shell { grid-template-columns: 290px minmax(0,1fr); }
    .drag-layout, .mouse-game { grid-template-columns: 1fr; }
    .parts-tray { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .parts-tray h3 { grid-column: 1 / -1; }
    .draggable-part { margin: 0; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
    .topbar { grid-template-columns: 1fr auto; }
    .topnav { display: none; }
    .profile-chip > span:last-child { display: none; }
    .app-shell { padding-top: 18px; }
    .dashboard-hero, .teacher-hero { align-items: start; flex-direction: column; }
    .progress-ring { width: 135px; height: 135px; flex-basis: 135px; }
    .progress-ring::before { width: 104px; height: 104px; }
    .mission-map { padding-left: 58px; }
    .map-path { left: 30px; transform: none; }
    .mission-node { grid-template-columns: 65px minmax(0,1fr); }
    .mission-node:nth-of-type(even) .mission-card, .mission-node:nth-of-type(odd) .mission-card { grid-column: 2; }
    .node-badge { grid-column: 1; width: 58px; height: 58px; border-width: 6px; font-size: 24px; }
    .mission-shell { grid-template-columns: 1fr; }
    .mission-sidebar { min-height: auto; }
    .mission-progress { margin-top: 20px; }
    .option-grid { grid-template-columns: 1fr; }
    .sort-grid { grid-template-columns: repeat(2, 1fr); }
    .port-board { grid-template-columns: 1fr; }
    .scenario-row { grid-template-columns: 1fr repeat(2, 1fr); }
    .scenario-text { grid-column: 1 / -1; }
    .teacher-grid { grid-template-columns: 1fr; }
    .panel.wide { grid-column: auto; }
}

@media (max-width: 560px) {
    .login-card { width: 100%; min-height: 100vh; border-radius: 0; }
    .login-form-wrap { padding: 34px 22px; }
    .demo-accounts { grid-template-columns: 1fr; }
    .dashboard-hero h1, .teacher-hero h1 { font-size: 34px; }
    .section-heading { align-items: stretch; flex-direction: column; }
    .mission-map { padding-left: 44px; }
    .map-path { left: 21px; }
    .mission-node { grid-template-columns: 45px minmax(0,1fr); }
    .node-badge { width: 44px; height: 44px; border-width: 4px; font-size: 19px; }
    .mission-card { padding: 18px; }
    .avatar-grid { grid-template-columns: repeat(2,1fr); }
    .avatar-large { width: 84px; height: 84px; }
    .stage-toolbar { align-items: start; }
    .timer { font-size: 12px; }
    .mission-app { padding: 12px; }
    .mission-panel { padding: 18px; }
    .parts-tray { grid-template-columns: 1fr; }
    .computer-desk { grid-template-columns: 1fr 1fr; min-height: 520px; }
    .sort-grid { grid-template-columns: 1fr; }
    .result-metrics { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: 1fr; }
    .scenario-row { grid-template-columns: 1fr 1fr; }
}

/* Version 3: visual lessons, productivity simulators, rewards and accessible audio */
.topnav { display: flex; align-items: center; justify-content: center; gap: 8px; }
.topnav a, .sound-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 11px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.topnav a:hover, .sound-toggle:hover { background: #edf7f7; color: var(--teal-dark); }
.topnav a.active { color: var(--teal-dark); background: #e7f8f7; }
.sound-toggle small { font: inherit; }

.game-hero { align-items: stretch; }
.hero-copy { position: relative; z-index: 2; max-width: 820px; }
.hero-game-side { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 190px; }
.level-track { max-width: 540px; margin-top: 20px; }
.level-track > span { display: flex; justify-content: space-between; align-items: center; color: white; font-size: 13px; }
.level-track > span small { color: #b7efec; }
.level-track > div { height: 10px; margin-top: 7px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.level-track > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), #fb923c); box-shadow: 0 0 14px rgba(250,204,21,.55); }
.level-track > em { display: block; margin-top: 6px; color: #b7efec; font-style: normal; font-size: 11px; }
.streak-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.1); color: white; }
.streak-card > span { font-size: 28px; }
.streak-card div { display: flex; flex-direction: column; }
.streak-card small { color: #b7efec; }

.daily-quest {
    margin: 20px 0 26px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border: 1px solid #fed7aa;
    box-shadow: 0 10px 30px rgba(234,88,12,.08);
}
.daily-quest-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: white; font-size: 30px; box-shadow: 0 8px 20px rgba(234,88,12,.12); }
.daily-quest h2 { margin: 4px 0 3px; color: var(--navy); font-size: 20px; }
.daily-quest p { margin: 0; color: var(--muted); }
.daily-reward { min-width: 110px; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: 7px; padding: 10px 14px; border-radius: 15px; background: white; border: 1px solid #fde68a; }
.daily-reward span { grid-row: 1 / 3; font-size: 29px; }
.daily-reward strong { color: #b45309; font-size: 22px; line-height: 1; }
.daily-reward small { color: var(--muted); font-size: 10px; }
.heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mission-thumb { position: relative; height: 150px; margin: 14px 0 16px; border-radius: 17px; overflow: hidden; background: #eff8f7; border: 1px solid var(--line); }
.mission-thumb::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(4,25,46,.68)); }
.mission-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.mission-card:hover .mission-thumb img { transform: scale(1.035); }
.mission-thumb span { position: absolute; z-index: 2; left: 11px; bottom: 9px; color: white; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.mission-rewards { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0; }
.mission-rewards span { padding: 6px 8px; border-radius: 999px; background: #f1f5f9; color: var(--navy); font-size: 10px; font-weight: 900; }
.mission-card h3 { margin-top: 0; }

.mission-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); }
.mission-journey span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border-radius: 12px; color: #94a3b8; font-size: 12px; }
.mission-journey i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e2e8f0; color: #64748b; font-style: normal; font-size: 11px; font-weight: 900; }
.mission-journey span.active { color: var(--teal-dark); background: #ecfdf5; }
.mission-journey span.active i { color: white; background: var(--teal); }
.mission-journey span.done { color: #15803d; }
.mission-journey span.done i { color: white; background: #22c55e; }

.lesson-briefing { max-width: 1080px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; text-align: left; }
.briefing-copy > p { font-size: 17px; color: var(--muted); }
.briefing-picture { min-width: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #eef9f8; }
.briefing-picture img { width: 100%; display: block; }
.briefing-rewards { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.briefing-rewards span { padding: 7px 10px; border-radius: 999px; background: #edf7f7; color: var(--navy); font-size: 11px; font-weight: 900; }

.lesson-screen { max-width: 1100px; margin: 0 auto; }
.lesson-screen-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lesson-stage-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: linear-gradient(90deg, var(--teal-dark), var(--teal)); color: white; font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.lesson-visual-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: stretch; }
.lesson-copy { padding: 26px; border-radius: 22px; background: linear-gradient(145deg, #fff, #f8fbfd); border: 1px solid var(--line); }
.lesson-copy h2 { margin: 7px 0 12px; color: var(--navy); font-size: clamp(28px, 4vw, 44px); line-height: 1.06; }
.lesson-lead { color: #475569; font-size: 17px; line-height: 1.7; }
.lesson-picture-card { min-width: 0; position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #eaf8f7; box-shadow: 0 14px 38px rgba(15,43,73,.09); }
.lesson-picture-card > img { width: 100%; height: 330px; object-fit: cover; display: block; }
.lesson-picture-card > div { display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: white; }
.lesson-picture-card > div > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; background: #edf7f7; font-size: 24px; }
.lesson-picture-card p { margin: 0; display: flex; flex-direction: column; }
.lesson-picture-card small { color: var(--muted); }
.lesson-bullets { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.lesson-bullets li { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 13px; background: white; border: 1px solid var(--line); color: #334155; }
.lesson-bullets li span { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 900; }

.reveal-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 20px; }
.reveal-card { min-height: 170px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 18px; border: 2px solid var(--line); border-radius: 18px; background: white; text-align: left; cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.reveal-card:hover { transform: translateY(-3px); border-color: #7dd3fc; box-shadow: 0 12px 26px rgba(14,165,233,.12); }
.reveal-card .reveal-icon { font-size: 34px; }
.reveal-card strong { color: var(--navy); font-size: 16px; }
.reveal-card small { color: var(--teal-dark); font-weight: 800; }
.reveal-card p { max-height: 0; margin: 0; opacity: 0; transform: translateY(8px); color: var(--muted); font-size: 13px; transition: .25s ease; }
.reveal-card.revealed { border-color: var(--teal); background: #f0fdfa; }
.reveal-card.revealed small { display: none; }
.reveal-card.revealed p { max-height: 90px; opacity: 1; transform: none; }
.lesson-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.lesson-process > div { min-height: 145px; position: relative; padding: 20px 15px 16px; border-radius: 18px; background: white; border: 1px solid var(--line); text-align: center; }
.lesson-process > div:not(:last-child)::after { content: '→'; position: absolute; right: -19px; top: 50%; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); transform: translateY(-50%); }
.lesson-process span { width: 38px; height: 38px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: white; font-weight: 900; }
.lesson-process strong, .lesson-process small { display: block; }
.lesson-process strong { color: var(--navy); }
.lesson-process small { margin-top: 4px; color: var(--muted); }
.lesson-navigation { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 24px; }
.lesson-navigation button:disabled { opacity: .45; cursor: not-allowed; }
.lesson-dots { display: flex; justify-content: center; gap: 7px; }
.lesson-dots i { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; }
.lesson-dots i.active { width: 28px; border-radius: 999px; background: var(--teal); }
.lesson-dots i.done { background: #22c55e; }

.lesson-check { max-width: 780px; margin: 10px auto; text-align: center; }
.knowledge-orb { width: 92px; height: 92px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; color: white; background: radial-gradient(circle at 35% 30%, #67e8f9, var(--teal-dark)); box-shadow: 0 15px 35px rgba(15,118,110,.22); font-size: 52px; font-weight: 900; }
.lesson-check h2 { color: var(--navy); font-size: clamp(25px, 4vw, 39px); }
.check-options { display: grid; gap: 10px; margin: 22px 0; }
.check-options button { display: flex; align-items: center; gap: 13px; min-height: 64px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 15px; background: white; color: var(--navy); text-align: left; cursor: pointer; }
.check-options button > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #eef4f8; color: var(--muted); font-weight: 900; }
.check-options button:hover, .check-options button.selected { border-color: var(--teal); background: #f0fdfa; }
.check-options button.correct { border-color: #22c55e; background: #f0fdf4; }
.check-options button.wrong { border-color: #ef4444; background: #fef2f2; }

.full-results { max-width: 760px; }
.prize-result { animation: result-float 1.8s ease-in-out infinite alternate; }
.full-results .result-metrics { grid-template-columns: repeat(4, 1fr); }
.badge-unlocked { max-width: 440px; margin: 18px auto 24px; display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-radius: 17px; background: linear-gradient(135deg, #fff7ed, #fef3c7); border: 1px solid #fde68a; text-align: left; }
.badge-unlocked > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: white; font-size: 30px; box-shadow: 0 8px 18px rgba(180,83,9,.11); }
.badge-unlocked div { display: flex; flex-direction: column; }
.badge-unlocked small { color: #b45309; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.badge-unlocked strong { color: var(--navy); font-size: 19px; }
@keyframes result-float { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-8px) rotate(3deg); } }

.prize-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: clamp(28px, 5vw, 55px); border-radius: 28px; color: white; background: radial-gradient(circle at 85% 15%, rgba(250,204,21,.32), transparent 24%), linear-gradient(135deg, #0b2d4f, #123f68 58%, #0f766e); box-shadow: var(--shadow); }
.prize-hero h1 { margin: 8px 0 10px; font-size: clamp(35px, 5vw, 58px); line-height: 1; }
.prize-hero p { max-width: 680px; margin: 0; color: #d4f4f1; }
.prize-totals { display: flex; gap: 10px; }
.prize-totals span { min-width: 92px; padding: 14px; border-radius: 17px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); text-align: center; }
.prize-totals strong, .prize-totals small { display: block; }
.prize-totals strong { font-size: 27px; }
.prize-totals small { color: #b7efec; }
.badge-vault { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vault-card { position: relative; overflow: hidden; padding: 18px; border-radius: 22px; background: white; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(15,43,73,.06); }
.vault-card.unlocked { border-color: color-mix(in srgb, var(--vault-accent) 45%, white); }
.vault-card.locked { filter: grayscale(.8); opacity: .72; }
.vault-picture { height: 150px; position: relative; margin: -18px -18px 18px; overflow: hidden; background: #eef4f8; }
.vault-picture img { width: 100%; height: 100%; object-fit: cover; }
.vault-picture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(11,45,79,.72)); }
.vault-picture > span { position: absolute; z-index: 2; left: 14px; bottom: 11px; color: white; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.vault-badge { position: absolute; z-index: 3; right: 17px; top: 118px; width: 62px; height: 62px; display: grid; place-items: center; border: 5px solid white; border-radius: 50%; background: var(--vault-accent); font-size: 27px; box-shadow: 0 9px 18px rgba(15,43,73,.16); }
.vault-card h3 { margin: 7px 0 6px; color: var(--navy); font-size: 22px; }
.vault-card p { min-height: 45px; color: var(--muted); font-size: 13px; }
.prize-button { width: 100%; min-height: 43px; border: 0; border-radius: 12px; background: linear-gradient(90deg, var(--vault-accent), var(--teal)); color: white; font-weight: 900; cursor: pointer; }
.prize-button:disabled { opacity: .75; cursor: default; }
.achievement-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 22px; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, #fff7ed, #fffbeb); border: 1px solid #fde68a; }
.achievement-strip > div:first-child { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 19px; background: white; font-size: 38px; }
.achievement-strip h2 { margin: 4px 0; color: var(--navy); }
.achievement-strip p { margin: 0; color: var(--muted); }
.achievement-strip > strong { font-size: 30px; color: #b45309; }

.reward-particle, .coin-particle { position: fixed; z-index: 9999; pointer-events: none; font-style: normal; font-size: 19px; animation: reward-pop 1.15s cubic-bezier(.2,.85,.25,1) var(--delay) forwards; }
.reward-particle { color: var(--yellow); text-shadow: 0 1px 0 #b45309; }
.coin-particle { color: #f59e0b; font-size: 15px; text-shadow: 0 1px 0 #92400e; }
@keyframes reward-pop { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.1); } }
.confetti-layer { position: fixed; z-index: 9997; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-layer i { position: absolute; top: -25px; width: 11px; height: 20px; border-radius: 3px; background: #facc15; animation: confetti-fall var(--fall) linear var(--delay) forwards; }
.confetti-layer i:nth-child(4n+2) { background: #34d6ce; }
.confetti-layer i:nth-child(4n+3) { background: #fb923c; }
.confetti-layer i:nth-child(4n+4) { background: #8b5cf6; }
@keyframes confetti-fall { to { transform: translate(var(--drift), calc(100vh + 60px)) rotate(var(--spin)); } }
.prize-bomb { position: fixed; z-index: 10000; left: 50%; top: 50%; width: 190px; height: 190px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #fff 0 24%, #facc15 25% 47%, #fb923c 48% 66%, rgba(251,146,60,0) 67%); transform: translate(-50%,-50%) scale(.1) rotate(-45deg); opacity: 0; pointer-events: none; }
.prize-bomb::before, .prize-bomb::after { content: ''; position: absolute; inset: -30px; background: repeating-conic-gradient(from 0deg, #facc15 0 8deg, transparent 8deg 18deg); clip-path: polygon(50% 0,56% 37%,85% 15%,65% 43%,100% 50%,65% 57%,85% 85%,56% 63%,50% 100%,44% 63%,15% 85%,35% 57%,0 50%,35% 43%,15% 15%,44% 37%); }
.prize-bomb::after { inset: -8px; background: repeating-conic-gradient(from 7deg, #34d6ce 0 7deg, transparent 7deg 17deg); }
.prize-bomb span, .prize-bomb strong { position: relative; z-index: 2; }
.prize-bomb span { font-size: 58px; }
.prize-bomb strong { position: absolute; bottom: 18px; padding: 5px 9px; border-radius: 999px; color: white; background: var(--navy); font-size: 11px; letter-spacing: .08em; }
.prize-bomb.explode { animation: prize-explode 1.55s cubic-bezier(.15,.8,.2,1) forwards; }
@keyframes prize-explode { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.1) rotate(-45deg); } 35% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(6deg); } 60% { transform: translate(-50%,-50%) scale(.96) rotate(-2deg); } 82% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); } }

@media (max-width: 1050px) {
    .lesson-visual-layout { grid-template-columns: 1fr; }
    .lesson-picture-card > img { height: auto; max-height: 430px; }
    .reveal-card-grid { grid-template-columns: repeat(2, 1fr); }
    .badge-vault { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
    .sound-toggle small { display: none; }
    .daily-quest { grid-template-columns: auto 1fr; }
    .daily-reward { grid-column: 1 / -1; justify-self: stretch; }
    .lesson-briefing { grid-template-columns: 1fr; }
    .briefing-picture { order: -1; }
    .lesson-process { grid-template-columns: repeat(2, 1fr); }
    .lesson-process > div::after { display: none !important; }
    .full-results .result-metrics { grid-template-columns: repeat(2, 1fr); }
    .prize-hero { align-items: flex-start; flex-direction: column; }
    .prize-totals { width: 100%; }
    .prize-totals span { flex: 1; }
}

@media (max-width: 560px) {
    .hero-game-side { width: 100%; align-items: center; }
    .streak-card { width: 100%; }
    .daily-quest { grid-template-columns: 1fr; text-align: center; }
    .daily-quest-icon { margin: auto; }
    .mission-thumb { height: 125px; }
    .mission-journey { gap: 3px; padding: 8px; }
    .mission-journey span { flex-direction: column; gap: 2px; font-size: 9px; }
    .mission-journey i { width: 21px; height: 21px; }
    .lesson-copy { padding: 19px; }
    .lesson-copy h2 { font-size: 30px; }
    .lesson-lead { font-size: 15px; }
    .reveal-card-grid, .lesson-process, .badge-vault { grid-template-columns: 1fr; }
    .reveal-card { min-height: 135px; }
    .lesson-navigation { grid-template-columns: 1fr 1fr; }
    .lesson-dots { grid-column: 1 / -1; grid-row: 1; }
    .lesson-navigation button { width: 100%; }
    .full-results .result-metrics { grid-template-columns: 1fr; }
    .prize-totals { flex-wrap: wrap; }
    .prize-totals span { min-width: 80px; }
    .achievement-strip { grid-template-columns: 1fr; text-align: center; }
    .achievement-strip > div:first-child { margin: auto; }
}

/* Version 3: richer lessons, touchpad practice and productivity simulations */
.world-divider {
    grid-column: 1 / -1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 4px;
    padding: 18px 22px;
    border: 1px solid rgba(15,118,110,.18);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(236,254,255,.96));
    box-shadow: 0 10px 30px rgba(15,43,73,.06);
}
.world-divider > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: white; background: linear-gradient(145deg, var(--navy), var(--teal)); font-size: 29px; }
.world-divider small { color: var(--teal-dark); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.world-divider h2 { margin: 2px 0 0; color: var(--navy); }

.lesson-audio-controls { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.audio-action { min-height: 38px; padding: 7px 11px; border: 1px solid #a5f3fc; border-radius: 11px; background: #ecfeff; color: #155e75; font-weight: 800; cursor: pointer; }
.audio-action.subtle { border-color: var(--line); background: white; color: var(--muted); }
.lesson-tip { display: flex; gap: 13px; align-items: flex-start; margin-top: 18px; padding: 16px; border: 1px solid #fde68a; border-radius: 16px; background: linear-gradient(135deg,#fffbeb,#fff7ed); }
.lesson-tip > span { font-size: 27px; }
.lesson-tip strong { color: #92400e; }
.lesson-tip p { margin: 2px 0 0; color: #78350f; }
.lesson-try-card { margin-top: 18px; padding: 18px; border: 2px solid #bfdbfe; border-radius: 19px; background: linear-gradient(135deg,#eff6ff,#f8fafc); }
.lesson-try-card.passed { border-color: #86efac; background: linear-gradient(135deg,#f0fdf4,#ecfeff); }
.try-heading { display: flex; gap: 12px; align-items: center; }
.try-heading > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: white; font-size: 25px; box-shadow: 0 7px 18px rgba(15,43,73,.08); }
.try-heading small, .try-heading strong { display: block; }
.try-heading small { color: #1d4ed8; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.try-heading strong { color: var(--navy); font-size: 17px; }
.try-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 15px; }
.try-options button { min-height: 56px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 13px; background: white; color: var(--navy); text-align: left; font-weight: 750; cursor: pointer; }
.try-options button > span { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; background: #e2e8f0; }
.try-options button.selected { border-color: #3b82f6; background: #eff6ff; }
.try-options button.correct { border-color: #22c55e; background: #f0fdf4; }
.try-options button.wrong { border-color: #ef4444; background: #fef2f2; animation: shake .35s ease; }
.try-footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.try-footer p { margin: 0; color: var(--muted); font-size: 13px; }
.compact-button { min-height: 38px; padding: 7px 15px; border: 0; border-radius: 11px; background: var(--navy); color: white; font-weight: 900; cursor: pointer; }
.compact-button:disabled { background: #16a34a; cursor: default; }

.pointer-lab { position: relative; overflow: hidden; }
.context-demo { display: none; position: absolute; z-index: 4; width: 155px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 12px; background: white; box-shadow: 0 14px 30px rgba(15,23,42,.18); }
.context-demo.open { display: grid; animation: pop-in .22s ease; }
.context-demo strong, .context-demo span { padding: 5px 7px; }
.context-demo span:hover { background: #eff6ff; }
@keyframes pop-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

.gesture-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.gesture-station { position: relative; min-width: 0; padding: 17px; border: 2px solid var(--line); border-radius: 18px; background: #f8fafc; }
.gesture-station.station-complete { border-color: #4ade80; background: #f0fdf4; }
.station-number { position: absolute; right: 12px; top: 12px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--navy); color: white; font-weight: 900; }
.gesture-station h3 { margin: 0 35px 4px 0; color: var(--navy); }
.gesture-station > p { min-height: 44px; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.gesture-station > em { display: block; margin-top: 9px; color: var(--teal-dark); font-size: 12px; font-style: normal; font-weight: 800; }
.virtual-laptop { padding: 10px; border-radius: 15px; background: #334155; }
.virtual-screen { height: 115px; position: relative; border-radius: 10px; background: linear-gradient(135deg,#dbeafe,#ecfeff); }
.virtual-file { position: absolute; left: 25px; top: 25px; width: 72px; min-height: 66px; border: 2px solid transparent; border-radius: 10px; background: transparent; font-size: 27px; cursor: pointer; }
.virtual-file small { display: block; font-size: 9px; }
.virtual-file.selected { border-color: #3b82f6; background: rgba(255,255,255,.72); }
.virtual-file.opened { border-color: #22c55e; }
.virtual-touchpad { width: 72%; height: 54px; display: grid; place-items: center; margin: 9px auto 0; border: 1px solid #94a3b8; border-radius: 10px; background: #cbd5e1; color: #334155; touch-action: manipulation; cursor: pointer; }
.virtual-touchpad i { width: 24px; height: 3px; border-radius: 999px; background: #64748b; }
.virtual-touchpad small { font-size: 9px; }
.scroll-practice { height: 205px; overflow: auto; padding: 12px; border: 2px solid #cbd5e1; border-radius: 13px; background: white; scroll-behavior: smooth; }
.scroll-practice:focus { outline: 3px solid rgba(59,130,246,.25); }
.scroll-practice h4 { margin-top: 0; color: var(--navy); }
.scroll-practice p { font-size: 12px; }
.scroll-finish { display: block; padding: 10px; border-radius: 9px; background: #dcfce7; color: #166534; }
.drag-desktop { position: relative; height: 205px; overflow: hidden; border: 2px solid #cbd5e1; border-radius: 13px; background: linear-gradient(160deg,#dbeafe,#f0fdfa); touch-action: none; }
.drag-file, .drag-folder { position: absolute; width: 84px; min-height: 72px; display: grid; place-items: center; border-radius: 12px; text-align: center; }
.drag-file { left: 18px; top: 34px; z-index: 2; border: 2px solid #60a5fa; background: white; cursor: grab; font-size: 28px; touch-action: none; }
.drag-file.dragging { cursor: grabbing; box-shadow: 0 14px 26px rgba(15,23,42,.2); transform: scale(1.04); }
.drag-file.filed { opacity: 0; pointer-events: none; }
.drag-folder { right: 18px; bottom: 25px; border: 2px dashed #f59e0b; background: #fffbeb; font-size: 35px; }
.drag-folder.received { border-style: solid; border-color: #22c55e; background: #f0fdf4; }
.drag-file small, .drag-folder small { display: block; color: var(--navy); font-size: 9px; font-weight: 800; }
.typing-meter { margin-top: 10px; }
.typing-meter > span { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.typing-meter > div { height: 8px; overflow: hidden; margin-top: 6px; border-radius: 999px; background: #e2e8f0; }
.typing-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--teal),#22c55e); transition: width .15s; }
.keyboard-hints { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.keyboard-hints span { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: white; color: var(--navy); font-size: 11px; font-weight: 800; box-shadow: 0 3px 0 #cbd5e1; }

.tool-legend { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 17px; }
.tool-legend > div { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.tool-legend span { grid-row: 1 / 3; font-size: 31px; }
.tool-legend strong { color: var(--navy); }
.tool-legend small { color: var(--muted); }
.tool-match-list { display: grid; gap: 10px; }
.tool-match-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.tool-match-row p { display: flex; align-items: center; gap: 10px; margin: 0; }
.tool-match-row p > strong { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; color: white; background: var(--navy); }
.tool-match-row > div { display: flex; gap: 7px; }
.tool-match-row button { padding: 8px 10px; border: 2px solid var(--line); border-radius: 11px; background: white; color: var(--navy); font-weight: 800; cursor: pointer; }
.tool-match-row button.selected { border-color: #3b82f6; background: #eff6ff; }
.tool-match-row button.correct { border-color: #22c55e; background: #f0fdf4; }
.tool-match-row button.wrong { border-color: #ef4444; background: #fef2f2; }
.folder-planner { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #f8fafc; }
.folder-planner label { display: grid; gap: 6px; color: var(--navy); font-weight: 800; }
.folder-planner input, .folder-planner select { width: 100%; min-height: 45px; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 11px; background: white; }
.file-name-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.file-name-grid article { display: flex; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.file-name-grid article > span { font-size: 31px; }
.file-name-grid article div { flex: 1; min-width: 0; }
.file-name-grid strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 13px; }

.office-task-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 15px; }
.office-window { overflow: hidden; border: 1px solid #94a3b8; border-radius: 13px; background: #e5e7eb; box-shadow: 0 18px 38px rgba(15,23,42,.12); }
.office-titlebar { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 13px; color: white; background: #2563eb; }
.office-titlebar > span:last-child { margin-left: auto; font-size: 12px; opacity: .85; }
.app-symbol { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; color: white; font-weight: 900; }
.word-symbol { background: #1d4ed8; border: 1px solid rgba(255,255,255,.5); }
.ppt-symbol { background: #c2410c; border: 1px solid rgba(255,255,255,.5); }
.excel-symbol { background: #166534; border: 1px solid rgba(255,255,255,.5); }
.office-tabs { display: flex; gap: 4px; padding: 5px 10px 0; background: white; }
.office-tabs button { padding: 7px 11px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #334155; }
.office-tabs button.active { border-color: #2563eb; color: #1d4ed8; font-weight: 800; }
.office-ribbon { display: flex; gap: 10px; padding: 9px; border-top: 1px solid var(--line); border-bottom: 1px solid #cbd5e1; background: #f8fafc; }
.office-ribbon > div { display: flex; align-items: center; gap: 5px; padding-right: 10px; border-right: 1px solid #cbd5e1; }
.office-ribbon small { align-self: flex-end; color: #64748b; font-size: 9px; }
.office-ribbon button, .office-ribbon select { min-height: 33px; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: white; cursor: pointer; }
.office-ribbon button.active-command { border-color: #2563eb; background: #dbeafe; }
.word-ruler { height: 22px; background: repeating-linear-gradient(90deg,#f8fafc 0 19px,#94a3b8 20px); }
.word-page { width: min(92%, 610px); min-height: 420px; margin: 20px auto; padding: 52px 58px; background: white; box-shadow: 0 5px 15px rgba(15,23,42,.18); }
.word-editable { white-space: pre-line; outline: none; }
.word-heading { margin-bottom: 25px; color: #0f172a; font-size: 20px; }
.word-body { min-height: 160px; color: #334155; line-height: 1.8; }
.word-editable.active-editable { outline: 2px dashed #60a5fa; outline-offset: 5px; }
.is-bold { font-weight: 800; }
.is-italic { font-style: italic; }
.is-underline { text-decoration: underline; }
.is-center { text-align: center; }
.is-left { text-align: left; }
.is-bullets { padding-left: 22px; white-space: pre-line; }
.is-bullets::first-line { }
.is-bullets { list-style: disc; }
.word-picture-placeholder { margin-top: 18px; padding: 17px; border: 2px dashed #60a5fa; border-radius: 12px; background: #eff6ff; text-align: center; }
.office-status { display: flex; justify-content: space-between; padding: 7px 12px; border-top: 1px solid #cbd5e1; background: white; color: #64748b; font-size: 11px; }
.office-checklist { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.office-checklist h3 { margin-top: 0; color: var(--navy); }
.office-checklist label { display: flex; gap: 8px; margin: 12px 0; color: #334155; font-size: 13px; }
.office-checklist input { accent-color: #16a34a; }
.insert-workspace { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(250px,.8fr); gap: 16px; }
.document-preview { min-height: 390px; padding: 45px; border: 1px solid #cbd5e1; background: white; box-shadow: 0 12px 26px rgba(15,23,42,.08); }
.document-preview h2 { color: #1d4ed8; }
.document-preview [data-inserted-picture] { min-height: 170px; display: grid; place-items: center; margin-top: 25px; border: 2px dashed #93c5fd; border-radius: 14px; background: #eff6ff; color: #64748b; text-align: center; }
.large-visual { display: block; font-size: 75px; }
.insert-workspace > aside { padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; }
.insert-workspace label { display: grid; gap: 5px; margin-top: 13px; color: var(--navy); font-weight: 800; }
.insert-workspace input, .insert-workspace select { min-height: 42px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: white; }
.picture-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.picture-picker button { min-height: 78px; border: 2px solid var(--line); border-radius: 11px; background: white; font-size: 28px; cursor: pointer; }
.picture-picker small { display: block; font-size: 9px; }
.picture-picker button.selected { border-color: #2563eb; background: #eff6ff; }

.powerpoint-window { overflow: hidden; border: 1px solid #94a3b8; border-radius: 14px; background: #e2e8f0; box-shadow: 0 18px 38px rgba(15,23,42,.12); }
.powerpoint-window .office-titlebar { background: #ea580c; }
.ppt-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px; background: #fff7ed; border-bottom: 1px solid #fed7aa; }
.ppt-toolbar button, .ppt-toolbar select { min-height: 38px; padding: 7px 10px; border: 1px solid #fdba74; border-radius: 9px; background: white; }
.ppt-toolbar span { margin-left: auto; color: #9a3412; font-weight: 800; }
.ppt-body { display: grid; grid-template-columns: 180px minmax(0,1fr); min-height: 480px; }
.slide-thumbnails { display: grid; align-content: start; gap: 9px; padding: 12px; overflow: auto; background: #f8fafc; }
.slide-thumb { min-height: 92px; position: relative; padding: 11px; border: 3px solid #cbd5e1; border-radius: 9px; background: white; text-align: left; cursor: pointer; }
.slide-thumb.active { border-color: #ea580c; }
.slide-thumb small { position: absolute; left: 4px; top: 4px; color: #64748b; font-size: 9px; }
.slide-thumb strong { display: block; margin-top: 16px; color: #7c2d12; font-size: 11px; }
.slide-canvas { display: grid; place-items: center; padding: 28px; background: #cbd5e1; }
.editable-slide { width: min(100%, 720px); aspect-ratio: 16/9; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 45px; background: white; box-shadow: 0 15px 35px rgba(15,23,42,.18); }
.editable-slide input, .editable-slide textarea { width: 100%; border: 2px dashed transparent; background: transparent; color: #0f172a; text-align: center; outline: none; }
.editable-slide input:focus, .editable-slide textarea:focus { border-color: #fb923c; }
.editable-slide input { font-size: clamp(24px,4vw,42px); font-weight: 800; }
.editable-slide textarea { resize: none; font-size: clamp(15px,2vw,22px); }
.slide-picture-placeholder { min-height: 55px; border: 2px dashed #fdba74; border-radius: 12px; background: #fff7ed; color: #9a3412; font-weight: 800; }
.presentation-instructions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #fff7ed; color: #9a3412; }
.presentation-instructions span { padding: 4px 8px; border-radius: 8px; background: white; }
.design-studio { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 17px; }
.design-studio > aside { display: grid; align-content: start; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.theme-choice { min-height: 52px; border: 3px solid transparent; border-radius: 11px; font-weight: 800; cursor: pointer; }
.theme-choice.light { background: white; color: #0f172a; border-color: #cbd5e1; }
.theme-choice.ocean { background: #0f3d60; color: white; }
.theme-choice.busy { color: #581c87; background: repeating-linear-gradient(45deg,#f0abfc 0 8px,#fef3c7 8px 16px); }
.theme-choice.selected { outline: 4px solid #38bdf8; }
.design-studio label { display: grid; gap: 5px; color: var(--navy); font-weight: 800; }
.design-studio select { min-height: 42px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 9px; }
.slide-show-preview { min-height: 410px; display: grid; place-items: center; overflow: hidden; border: 8px solid #334155; border-radius: 18px; background: #0f172a; color: white; text-align: center; }
.slide-show-preview > div { width: 100%; padding: 35px; }
.slide-show-preview h2 { font-size: clamp(30px,5vw,55px); }
.slide-show-preview p { font-size: 20px; }
.theme-light { background: white; color: #0f172a; }
.theme-ocean { background: linear-gradient(135deg,#0f172a,#0e7490); color: white; }
.transition-fade > div { animation: fade-slide .6s ease; }
.transition-wipe > div { animation: wipe-slide .6s ease; }
@keyframes fade-slide { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.excel-window { overflow: hidden; border: 1px solid #94a3b8; border-radius: 14px; background: white; box-shadow: 0 18px 38px rgba(15,23,42,.12); }
.excel-window .office-titlebar { background: #15803d; }
.formula-bar { display: grid; grid-template-columns: 70px 35px 1fr; align-items: center; gap: 5px; padding: 8px; border-bottom: 1px solid #cbd5e1; background: #f0fdf4; }
.formula-bar span, .formula-bar strong { min-height: 34px; display: grid; place-items: center; border: 1px solid #bbf7d0; background: white; }
.formula-bar input { min-height: 34px; padding: 6px 9px; border: 1px solid #86efac; }
.sheet-wrap { overflow: auto; }
.excel-sheet { width: 100%; min-width: 690px; border-collapse: collapse; }
.excel-sheet th, .excel-sheet td { height: 48px; border: 1px solid #cbd5e1; padding: 0 9px; }
.excel-sheet th { background: #e2e8f0; color: #334155; }
.excel-sheet .header-cell { background: #dcfce7; color: #14532d; font-weight: 900; }
.excel-sheet input { width: 100%; height: 100%; border: 0; outline: none; background: #fffbeb; font-family: ui-monospace, monospace; }
.excel-sheet input:focus { outline: 3px solid #22c55e; outline-offset: -3px; }
.excel-sheet input.calculated { background: #f0fdf4; color: #166534; font-weight: 900; }
.total-row { font-weight: 900; }
.excel-design-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 15px; }
.formatted-table table { width: 100%; border-collapse: collapse; background: white; }
.formatted-table th, .formatted-table td { padding: 13px; border: 1px solid #bbf7d0; }
.formatted-table th { background: #dcfce7; color: #14532d; }
.excel-design-layout aside { display: grid; align-content: start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #f8fafc; }
.excel-design-layout button, .excel-design-layout select, .excel-design-layout input { min-height: 42px; padding: 8px 10px; border: 1px solid #86efac; border-radius: 9px; background: white; }
.excel-design-layout button.selected { color: white; background: #15803d; }
.excel-design-layout label { display: grid; gap: 5px; color: var(--navy); font-weight: 800; }
.chart-stage { min-height: 300px; display: grid; place-items: center; margin-top: 15px; padding: 18px; border: 2px dashed #86efac; border-radius: 15px; background: white; }
.chart-stage h3 { margin: 0 0 15px; color: #14532d; text-align: center; }
.budget-chart { height: 220px; display: flex; align-items: flex-end; justify-content: center; gap: 25px; padding: 20px 20px 0; border-left: 2px solid #64748b; border-bottom: 2px solid #64748b; }
.budget-chart > div { width: 70px; display: grid; justify-items: center; gap: 7px; }
.budget-chart span { width: 48px; position: relative; display: block; border-radius: 8px 8px 0 0; background: linear-gradient(#4ade80,#15803d); }
.budget-chart b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); color: #14532d; font-size: 10px; }
.budget-chart small { color: #334155; font-size: 9px; text-align: center; }

.portfolio-workspace { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 16px; }
.portfolio-folder { min-height: 420px; display: flex; flex-direction: column; align-items: center; padding: 24px; border: 2px solid #fbbf24; border-radius: 20px; background: linear-gradient(160deg,#fffbeb,#fef3c7); text-align: center; }
.portfolio-folder > span { font-size: 85px; }
.portfolio-folder h3 { color: #92400e; word-break: break-word; }
.portfolio-folder [data-portfolio-stack] { width: 100%; display: grid; gap: 7px; margin-top: 15px; }
.portfolio-folder [data-portfolio-stack] span { padding: 7px; border: 1px solid #fde68a; border-radius: 9px; background: white; color: #78350f; font-size: 10px; word-break: break-all; }
.portfolio-files { display: grid; gap: 12px; }
.portfolio-files article { padding: 15px; border: 2px solid var(--line); border-radius: 16px; background: white; }
.portfolio-files article.portfolio-ready { border-color: #22c55e; background: #f0fdf4; }
.portfolio-files article > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.portfolio-files article > div:first-child span { font-size: 32px; }
.portfolio-files h3 { margin: 6px 0; color: var(--navy); font-size: 15px; word-break: break-word; }
.portfolio-files p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.portfolio-files label { display: inline-flex; align-items: center; gap: 5px; margin: 4px 10px 4px 0; font-size: 11px; }
.portfolio-files button { display: block; width: 100%; min-height: 40px; margin-top: 10px; border: 0; border-radius: 10px; color: white; background: var(--navy); font-weight: 900; cursor: pointer; }
.portfolio-files button:disabled { background: #16a34a; }

@media (max-width: 1100px) {
    .gesture-grid, .file-name-grid { grid-template-columns: 1fr; }
    .office-task-layout { grid-template-columns: 1fr; }
    .office-checklist { display: grid; grid-template-columns: repeat(2,1fr); }
    .office-checklist h3 { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
    .try-options, .tool-legend { grid-template-columns: 1fr; }
    .tool-match-row { grid-template-columns: 1fr; }
    .tool-match-row > div { flex-wrap: wrap; }
    .insert-workspace, .design-studio, .excel-design-layout, .portfolio-workspace { grid-template-columns: 1fr; }
    .ppt-body { grid-template-columns: 120px minmax(0,1fr); }
    .editable-slide { padding: 25px; }
    .lesson-screen-top { flex-wrap: wrap; }
    .lesson-audio-controls { order: 3; width: 100%; margin-left: 0; }
}

@media (max-width: 600px) {
    .try-footer { align-items: flex-start; flex-direction: column; }
    .office-ribbon { overflow-x: auto; }
    .word-page { min-height: 360px; margin: 10px auto; padding: 30px 24px; }
    .ppt-body { grid-template-columns: 1fr; }
    .slide-thumbnails { grid-auto-flow: column; grid-auto-columns: 120px; overflow-x: auto; }
    .slide-canvas { padding: 12px; }
    .editable-slide { padding: 18px; }
    .ppt-toolbar { flex-wrap: wrap; }
    .ppt-toolbar span { width: 100%; margin-left: 0; }
    .picture-picker { grid-template-columns: 1fr; }
    .budget-chart { gap: 8px; padding-left: 5px; padding-right: 5px; }
    .budget-chart > div { width: 52px; }
    .office-checklist { grid-template-columns: 1fr; }
}

/* Production v5: grade access, learner accounts, administration and expanded curriculum */
.public-main{min-height:100vh;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at top left,#dff8f5 0,transparent 36%),linear-gradient(145deg,#eff6ff,#f8fafc 56%,#ecfeff)}
.production-login{max-width:1120px;width:100%}
.login-worlds{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.login-worlds span{padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);font-weight:700}
.join-callout{margin-top:22px;padding:18px;border-radius:18px;background:#f0fdfa;border:1px solid #99f6e4}.join-callout p{margin:4px 0 12px;color:#475569}
.demo-accounts{margin-top:16px;border-top:1px solid #e2e8f0;padding-top:14px}.demo-accounts summary{cursor:pointer;font-weight:800}.demo-accounts button{display:block;width:100%;margin-top:8px;padding:10px 12px;text-align:left;border:1px solid #cbd5e1;border-radius:12px;background:white;cursor:pointer}
.access-shell{width:min(980px,100%);display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);background:white;border-radius:28px;overflow:hidden;box-shadow:0 28px 70px rgba(15,23,42,.16)}
.access-visual{padding:52px;color:white;background:linear-gradient(145deg,#0f766e,#0ea5e9);display:flex;flex-direction:column;justify-content:center}.access-visual>span{font-size:64px}.access-visual h1{font-size:clamp(32px,5vw,52px);margin:18px 0 8px}.access-visual p{font-size:18px;line-height:1.6}.access-form{padding:46px}.access-form h2{font-size:34px;margin:8px 0 22px}.access-form form{display:grid;gap:16px}.access-form label,.stack-form label{display:grid;gap:7px;font-weight:800}.access-form input,.stack-form input,.stack-form select,.class-selector select{width:100%;padding:13px 14px;border:1px solid #cbd5e1;border-radius:12px;background:white;font:inherit}.grade-panel{background:linear-gradient(145deg,#4338ca,#7c3aed)}
.form-error,.flash{padding:13px 16px;border-radius:13px;margin-bottom:16px;font-weight:700}.form-error,.flash.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.flash.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}.flash{max-width:1200px;margin:0 auto 18px}
.admin-unlocked-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;margin:10px 0 0;padding:6px 10px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:12px;font-weight:900}
.admin-hero{display:flex;justify-content:space-between;gap:26px;align-items:flex-end;padding:34px;border-radius:28px;background:linear-gradient(135deg,#0f172a,#1e3a8a);color:white;margin-bottom:24px}.admin-hero h1{font-size:clamp(30px,4vw,48px);margin:8px 0}.grade-tabs{display:flex;gap:8px;padding:6px;border-radius:16px;background:rgba(255,255,255,.12)}.grade-tabs a{padding:11px 18px;border-radius:12px;color:white;font-weight:900;text-decoration:none}.grade-tabs a.active{background:white;color:#0f172a}
.admin-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:22px;margin-bottom:22px}.stack-form{display:grid;gap:14px}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-codes,.lesson-control{margin-top:22px}.admin-codes code{padding:5px 8px;border-radius:7px;background:#f1f5f9;color:#0f172a;font-weight:800}
.unlock-list{display:grid;gap:10px;max-height:760px;overflow:auto;padding-right:6px}.unlock-list article{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}.unlock-list article>div{display:flex;align-items:center;gap:12px;min-width:0}.unlock-list p{display:grid;gap:3px;margin:0}.unlock-list small{color:#64748b}.lesson-sequence{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#e0f2fe;color:#075985;font-weight:900}
.sequence-builder{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sequence-source,.sequence-output{display:grid;align-content:start;gap:10px;min-height:250px;padding:16px;border:2px dashed #cbd5e1;border-radius:18px;background:#f8fafc}.sequence-source button,.sequence-output button{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #cbd5e1;border-radius:12px;background:white;text-align:left;cursor:pointer}.sequence-source button:disabled{opacity:.35}.sequence-output button span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#0f766e;color:white;font-weight:900}
.scenario-choice-list{display:grid;gap:12px}.scenario-choice-list button{display:flex;align-items:center;gap:14px;padding:16px;border:2px solid #e2e8f0;border-radius:16px;background:white;text-align:left;cursor:pointer}.scenario-choice-list button span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e2e8f0;font-weight:900}.scenario-choice-list button.selected{border-color:#0ea5e9;background:#f0f9ff}.scenario-choice-list button.correct{border-color:#10b981;background:#ecfdf5}.scenario-choice-list button.wrong{border-color:#ef4444;background:#fef2f2}
.office-simulator{border:1px solid #cbd5e1;border-radius:18px;overflow:hidden;background:#eef2f7;box-shadow:0 18px 36px rgba(15,23,42,.12)}.office-titlebar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#1e40af;color:white}.excel-sim .office-titlebar{background:#166534}.powerpoint-sim .office-titlebar{background:#c2410c}.office-titlebar>span{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.18);font-weight:900}.office-titlebar em{margin-left:auto;font-style:normal;font-size:12px}.office-ribbon{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:white;border-bottom:1px solid #cbd5e1}.office-ribbon button{display:grid;gap:4px;place-items:center;padding:9px 11px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;font-size:12px;cursor:pointer}.office-ribbon button.selected{background:#dbeafe;border-color:#2563eb;color:#1e3a8a}.office-canvas{min-height:230px;margin:22px;padding:28px;background:white;border-radius:10px;box-shadow:0 4px 12px rgba(15,23,42,.08)}.office-selection{margin-top:28px;padding:12px;border-radius:12px;background:#f1f5f9;color:#334155;font-weight:700}
.signed-user{display:grid;text-align:right}.signed-user small{color:#64748b}.teacher-grid .panel.wide{grid-column:1/-1}
@media(max-width:900px){.access-shell,.admin-grid{grid-template-columns:1fr}.access-visual{min-height:260px}.admin-hero{align-items:flex-start;flex-direction:column}.sequence-builder{grid-template-columns:1fr}.form-two{grid-template-columns:1fr}.unlock-list article{align-items:flex-start;flex-direction:column}.unlock-list article form,.unlock-list article button{width:100%}}
@media(max-width:640px){.public-main{padding:12px}.access-form,.access-visual{padding:28px}.topbar nav{display:none}.topbar-actions .signed-user{display:none}.admin-hero{padding:24px}.grade-tabs{width:100%}.grade-tabs a{flex:1;text-align:center}}


/* Production mode and reporting safeguards */
.demo-mode-banner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin: 0 auto 1rem;
    padding: .7rem 1rem;
    max-width: 1180px;
    border: 1px solid #f5c451;
    border-radius: 14px;
    background: #fff8dc;
    color: #6b4d00;
    box-shadow: 0 8px 24px rgba(91, 67, 0, .08);
}
.demo-mode-banner strong { white-space: nowrap; }
.demo-mode-banner span { font-size: .9rem; }
.class-selector.fixed-grade {
    display: grid;
    gap: .15rem;
    min-width: 150px;
    padding: .75rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.class-selector.fixed-grade span { font-size: .76rem; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.class-selector.fixed-grade strong { font-size: 1rem; }
@media (max-width: 640px) {
    .demo-mode-banner { align-items: flex-start; flex-direction: column; }
}

/* Production v5: real learner accounts, imports, email readiness and evidence tracking */
.text-link{display:inline-flex;margin-top:8px;color:#0f766e;font-weight:800;text-decoration:none}.text-link:hover,.text-link:focus{text-decoration:underline}
.form-note{margin:6px 0 0;color:#64748b;font-size:.9rem;line-height:1.45}
.admin-section-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:7px;border:1px solid #dbe4ee;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.admin-section-tabs a{padding:10px 15px;border-radius:11px;color:#334155;font-weight:900;text-decoration:none}.admin-section-tabs a:hover,.admin-section-tabs a:focus{background:#f1f5f9}.admin-section-tabs a.active{background:#0f766e;color:#fff}
.production-status{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;padding:17px 19px;border-radius:16px;border:1px solid}.production-status>span{font-size:24px}.production-status h3{margin:0 0 4px}.production-status p{margin:0;line-height:1.5}.production-status.ready{background:#ecfdf5;border-color:#86efac;color:#14532d}.production-status.warning{background:#fff7ed;border-color:#fdba74;color:#7c2d12}
.learner-admin-grid{grid-template-columns:1fr 1fr}.import-help{padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569;line-height:1.55}.import-help code{word-break:break-word}
.button-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.button-row>*{margin:0}.button-row .secondary-button{text-decoration:none}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.count-chip{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:.82rem;font-weight:900;white-space:nowrap}
.status-pill,.verified-mark,.pending-mark{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:.76rem;font-weight:900}.status-pill.active,.verified-mark{background:#dcfce7;color:#166534}.status-pill.pending_setup,.status-pill.pending_verification,.pending-mark{background:#fef3c7;color:#92400e}.status-pill.suspended{background:#fee2e2;color:#991b1b}
.table-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.table-actions form{margin:0}.compact-button.danger{border-color:#fecaca;background:#fff1f2;color:#be123c}.compact-button.danger:hover,.compact-button.danger:focus{background:#ffe4e6}
.activity-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.activity-summary-grid article{padding:16px;border:1px solid #e2e8f0;border-radius:15px;background:#fff}.activity-summary-grid strong{display:block;font-size:1.55rem}.activity-summary-grid small{color:#64748b}.activity-meta{max-width:420px;white-space:normal;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:#475569}
.task-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.task-actions .secondary-button{margin-right:auto}.thinking-hint{padding:13px 15px;border-left:4px solid #0ea5e9;border-radius:12px;background:#f0f9ff;color:#0c4a6e}
@media(max-width:900px){.learner-admin-grid{grid-template-columns:1fr}.activity-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.admin-section-tabs a{flex:1 1 45%;text-align:center}.panel-head{flex-direction:column}.activity-summary-grid{grid-template-columns:1fr}.button-row>*{width:100%;justify-content:center;text-align:center}.task-actions>*{width:100%;justify-content:center}.task-actions .secondary-button{margin-right:0}}


/* Classroom code-only mode */
.classroom-mode-banner { border-left-color: #f59e0b; }
.classroom-code-help { display: grid; gap: .65rem; margin: 1rem 0; }
.classroom-code-help p { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: rgba(15,118,110,.08); border: 1px solid rgba(15,118,110,.18); font-size: 1rem; }
.classroom-code-help strong { color: #0f766e; }

/* Classroom live, no-database profile and local-progress additions */
.classroom-entry-shell .access-form,
.classroom-profile-shell .access-form {
    align-self: center;
}

.profile-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.profile-steps span {
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 700;
    font-size: 0.86rem;
}

.character-picker {
    border: 0;
    padding: 0;
    margin: 20px 0 10px;
}

.character-picker legend {
    margin-bottom: 12px;
    font-weight: 800;
    color: var(--ink, #18313d);
}

.large-avatar-grid {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 12px;
}

.character-option {
    position: relative;
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 132px;
    padding: 14px 8px;
    border: 2px solid #dce8e6;
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.character-option:hover {
    transform: translateY(-2px);
    border-color: #55a89c;
    box-shadow: 0 12px 24px rgba(23, 74, 69, 0.12);
}

.character-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.character-option:has(input:checked) {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
    background: #f3fbf9;
}

.character-option .avatar {
    width: 62px;
    height: 62px;
}

.character-option strong {
    font-size: 0.82rem;
    color: #294b51;
}

.daily-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

button.secondary-button {
    font: inherit;
    cursor: pointer;
}

.mission-node.completed .mission-card {
    border-color: rgba(15, 118, 110, 0.45);
    box-shadow: 0 16px 36px rgba(15, 118, 110, 0.13);
}

.mission-node.completed .node-badge::after {
    content: "✓";
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    border: 3px solid #fff;
}

@media (max-width: 760px) {
    .large-avatar-grid {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }

    .daily-actions {
        width: 100%;
        justify-content: stretch;
    }

    .daily-actions > * {
        flex: 1 1 180px;
        text-align: center;
    }
}

/* V6.4 avatar studio */
.avatar-character {
    --skin: #c68642;
    --hair: #1f2937;
    --accent: #0f766e;
    position: relative;
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, #eef7ff 0%, #dfeef8 100%);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 43, 73, .12);
}
.avatar-choice { width: 62px; height: 62px; }
.avatar-preview { width: 140px; height: 140px; }
.avatar-character > span { position: absolute; display: block; }
.avatar-head {
    width: 40%; height: 36%; left: 30%; top: 18%; border-radius: 48% 48% 44% 44%;
    background: var(--skin); z-index: 3;
}
.avatar-backhair {
    width: 56%; height: 44%; left: 22%; top: 10%;
    background: var(--hair); border-radius: 46% 46% 44% 44%; z-index: 1;
}
.avatar-fringe {
    width: 48%; height: 20%; left: 26%; top: 12%; background: var(--hair);
    border-radius: 50% 50% 40% 40%; z-index: 4;
}
.avatar-body {
    width: 58%; height: 34%; left: 21%; bottom: 8%; background: var(--accent);
    border-radius: 44% 44% 16% 16%; z-index: 2;
}
.avatar-collar {
    width: 18%; height: 12%; left: 41%; bottom: 28%; background: #ffffff;
    clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 5;
}
.avatar-buns, .avatar-ponytail { background: var(--hair); z-index: 0; display: none; }
.avatar-style-buns .avatar-buns { display: block; width: 70%; height: 26%; left: 15%; top: 13%; background: transparent; }
.avatar-style-buns .avatar-buns::before, .avatar-style-buns .avatar-buns::after {
    content: ""; position: absolute; width: 22%; height: 80%; top: 10%; border-radius: 50%; background: var(--hair);
}
.avatar-style-buns .avatar-buns::before { left: -2%; }
.avatar-style-buns .avatar-buns::after { right: -2%; }
.avatar-style-ponytail .avatar-ponytail { display: block; width: 28%; height: 28%; right: 12%; top: 30%; border-radius: 20% 60% 60% 40%; transform: rotate(18deg); }
.avatar-style-curly .avatar-backhair { border-radius: 44% 44% 48% 48%; box-shadow: -8px 2px 0 2px var(--hair), 8px 2px 0 2px var(--hair); }
.avatar-style-braids .avatar-backhair::before, .avatar-style-braids .avatar-backhair::after {
    content: ""; position: absolute; width: 10%; height: 62%; top: 58%; background: var(--hair); border-radius: 999px;
}
.avatar-style-braids .avatar-backhair::before { left: 16%; }
.avatar-style-braids .avatar-backhair::after { right: 16%; }
.avatar-skin-light { --skin: #f4c8a8; }
.avatar-skin-warm { --skin: #d9a06a; }
.avatar-skin-medium { --skin: #a56a43; }
.avatar-skin-deep { --skin: #6e462e; }
.avatar-hair-black { --hair: #1f1a17; }
.avatar-hair-brown { --hair: #5c3b2e; }
.avatar-hair-auburn { --hair: #7b3f22; }
.avatar-accent-teal { --accent: #0f766e; }
.avatar-accent-purple { --accent: #7c3aed; }
.avatar-accent-pink { --accent: #db2777; }
.avatar-accent-gold { --accent: #d97706; }

.avatar-studio {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 22px;
    margin-top: 14px;
}
.avatar-studio-preview {
    padding: 20px; border-radius: 22px; background: linear-gradient(160deg, #f4fbff, #eefbf7);
    border: 1px solid #dbe8ee;
}
.avatar-studio-preview h3 { margin: 6px 0 8px; color: var(--navy); }
.avatar-studio-preview p { margin: 0; color: var(--muted); }
.avatar-preview-stage {
    margin-top: 18px; min-height: 190px; border-radius: 24px; display: grid; place-items: center;
    background: radial-gradient(circle at center, rgba(255,255,255,.96), rgba(219,234,254,.85));
}
.avatar-studio-controls { display: grid; gap: 16px; }
.customizer-group { border: 1px solid #dbe8ee; border-radius: 18px; padding: 14px; margin: 0; }
.customizer-group legend { font-weight: 800; padding: 0 8px; color: var(--navy); }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatch-option {
    position: relative; display: grid; justify-items: center; gap: 8px; min-height: 94px; padding: 12px 6px;
    border: 2px solid #dce8e6; border-radius: 16px; cursor: pointer; background: #fff;
}
.swatch-option input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-option:has(input:checked) { border-color: #0f766e; box-shadow: 0 0 0 4px rgba(15,118,110,.12); background: #f3fbf9; }
.swatch-option strong { font-size: .78rem; color: #294b51; }
.swatch { width: 34px; height: 34px; border-radius: 50%; display: inline-block; border: 2px solid rgba(0,0,0,.08); }
.skin-light { background: #f4c8a8; }
.skin-warm { background: #d9a06a; }
.skin-medium { background: #a56a43; }
.skin-deep { background: #6e462e; }
.hair-black { background: #1f1a17; }
.hair-brown { background: #5c3b2e; }
.hair-auburn { background: #7b3f22; }
.accent-teal { background: #0f766e; }
.accent-purple { background: #7c3aed; }
.accent-pink { background: #db2777; }
.accent-gold { background: #d97706; }
.avatar-dialog form { padding: 26px; }
.avatar-dialog .primary-button { margin-top: 18px; width: 100%; }

@media (max-width: 860px) {
    .avatar-studio { grid-template-columns: 1fr; }
    .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* V6.5: rich lesson design, two-chance understanding checks and PowerPoint 2016 simulator */
.mission-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,253,.98));
}
.lesson-screen { max-width: 1240px; }
.lesson-copy {
    padding: clamp(24px, 3.4vw, 40px);
    background: radial-gradient(circle at 0 0, rgba(20,184,166,.07), transparent 34%), linear-gradient(145deg,#fff,#f8fbfd);
    box-shadow: 0 18px 48px rgba(15,43,73,.07);
}
.lesson-copy h2 { max-width: 820px; }
.lesson-lead { font-size: 17px; line-height: 1.82; }
.lesson-bullets li { line-height: 1.55; }
.lesson-screen-top { position: sticky; top: 0; z-index: 5; padding: 10px 12px; border: 1px solid rgba(203,213,225,.75); border-radius: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); }
.reveal-card { min-height: 192px; }
.reveal-card p { line-height: 1.55; }
.lesson-process > div { min-height: 175px; }
.lesson-process small { line-height: 1.45; }
.lesson-tip { box-shadow: 0 12px 30px rgba(180,83,9,.08); }
.lesson-try-card { padding: 22px; box-shadow: 0 15px 36px rgba(37,99,235,.08); }
.try-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.try-options button { min-height: 70px; line-height: 1.4; }
.restart-section-button { margin-left: auto; }

.understanding-intro { max-width: 900px; margin: 16px auto; text-align: center; padding: clamp(24px,5vw,52px); border-radius: 30px; border: 1px solid #c7d2fe; background: radial-gradient(circle at 50% 0, rgba(99,102,241,.18), transparent 38%), linear-gradient(145deg,#ffffff,#f7f8ff); box-shadow: 0 28px 75px rgba(67,56,202,.12); }
.understanding-icon { width: 108px; height: 108px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 30px; color: white; background: linear-gradient(145deg,#4338ca,#7c3aed); box-shadow: 0 18px 38px rgba(67,56,202,.28); font-size: 52px; transform: rotate(-3deg); }
.understanding-intro h2 { margin: 10px 0 12px; color: var(--navy); font-size: clamp(30px,5vw,48px); letter-spacing: -.035em; }
.understanding-intro > p { max-width: 760px; margin: 0 auto; color: #475569; font-size: 17px; line-height: 1.75; }
.understanding-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 28px 0; text-align: left; }
.understanding-rules > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; padding: 18px; border: 1px solid #dbe3ff; border-radius: 19px; background: rgba(255,255,255,.88); }
.understanding-rules span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: white; background: #4f46e5; font-weight: 900; }
.understanding-rules strong { color: var(--navy); }
.understanding-rules small { color: var(--muted); line-height: 1.45; }
.understanding-start { min-width: 270px; }
.attempt-counter { width: max-content; margin: 12px auto 0; padding: 8px 13px; border-radius: 999px; color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe; font-weight: 900; font-size: 12px; }
.review-lesson-button { margin-left: 8px; }
.lesson-check { max-width: 880px; padding: clamp(20px,4vw,42px); border: 1px solid #dbe3ff; border-radius: 28px; background: linear-gradient(145deg,#fff,#f8faff); box-shadow: 0 24px 65px rgba(15,43,73,.09); }
.check-options button { min-height: 76px; font-size: 15px; line-height: 1.45; }
.check-options button:disabled { cursor: not-allowed; opacity: .7; }

/* Compact PowerPoint 2016 visual used inside lesson content */
.ppt2016-mini-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 22px; background: #f3f3f3; box-shadow: 0 18px 44px rgba(15,23,42,.16); font-family: "Segoe UI", Arial, sans-serif; }
.ppt2016-mini-title { min-height: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 13px; color: white; background: #d24726; font-size: 12px; }
.ppt2016-mini-title small { color: rgba(255,255,255,.85); }
.ppt-app-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 4px; background: rgba(255,255,255,.17); font-weight: 900; }
.ppt2016-mini-tabs { display: flex; gap: 2px; padding: 0 7px; background: white; border-bottom: 1px solid #d7d7d7; overflow-x: auto; }
.ppt2016-mini-tabs span { padding: 9px 8px 7px; white-space: nowrap; color: #444; font-size: 10px; }
.ppt2016-mini-tabs span:first-child { color: white; background: #d24726; }
.ppt2016-mini-tabs span.active:not(:first-child) { color: #d24726; border-bottom: 3px solid #d24726; font-weight: 800; }
.ppt2016-mini-ribbon { min-height: 62px; display: flex; align-items: stretch; gap: 6px; padding: 7px; background: #fafafa; border-bottom: 1px solid #d7d7d7; }
.ppt2016-mini-ribbon span { display: grid; place-items: center; min-width: 70px; padding: 7px; border-right: 1px solid #ddd; color: #555; font-size: 9px; }
.ppt2016-mini-ribbon .highlight { color: #9a3412; background: #fff7ed; border: 1px solid #fdba74; border-radius: 6px; font-weight: 800; }
.ppt2016-mini-workspace { display: grid; grid-template-columns: 26% 1fr; min-height: 260px; background: #e6e6e6; }
.ppt2016-mini-workspace aside { display: grid; gap: 8px; align-content: start; padding: 10px; background: #f3f3f3; border-right: 1px solid #ccc; }
.ppt2016-mini-workspace aside i { height: 52px; border: 2px solid #d24726; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ppt2016-mini-workspace aside i:not(:first-child) { border-color: #bbb; }
.ppt2016-mini-workspace section { align-self: center; width: 86%; aspect-ratio: 16/9; margin: 18px auto; display: grid; align-content: center; gap: 15px; padding: 26px; background: white; box-shadow: 0 7px 22px rgba(0,0,0,.18); }
.ppt-title-placeholder, .ppt-content-placeholder { border: 1px dashed #999; text-align: center; color: #777; }
.ppt-title-placeholder { padding: 14px; font-size: 18px; }
.ppt-content-placeholder { padding: 22px; font-size: 12px; }
.ppt2016-mini-status { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; color: #555; background: white; border-top: 1px solid #d7d7d7; font-size: 9px; }

/* Full PowerPoint 2016-style simulator */
.ppt-task-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 18px; align-items: start; }
.ppt2016-app { min-width: 0; overflow: hidden; border: 1px solid #9ca3af; border-radius: 8px; background: #ececec; box-shadow: 0 24px 60px rgba(15,23,42,.18); font-family: "Segoe UI", Arial, sans-serif; }
.ppt2016-titlebar { min-height: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; color: white; background: #d24726; }
.ppt-qat { display: flex; align-items: center; gap: 1px; padding-left: 6px; }
.ppt-qat button { width: 30px; height: 30px; border: 0; color: white; background: transparent; cursor: pointer; }
.ppt-qat button:hover { background: rgba(255,255,255,.16); }
.ppt-file-name { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; }
.ppt-logo { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 3px; color: #d24726; background: white; font-weight: 900; }
.ppt-window-controls { display: flex; align-self: stretch; }
.ppt-window-controls span { width: 42px; display: grid; place-items: center; font-size: 12px; }
.ppt-window-controls span:last-child:hover { background: #c42b1c; }
.ppt2016-tabs { display: flex; align-items: end; gap: 0; padding: 0 7px; background: white; border-bottom: 1px solid #cfcfcf; overflow-x: auto; }
.ppt2016-tabs button { min-height: 36px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; color: #333; background: transparent; cursor: pointer; white-space: nowrap; font-size: 12px; }
.ppt2016-tabs button:hover { background: #f3f3f3; }
.ppt2016-tabs button.active { color: #d24726; border-bottom-color: #d24726; font-weight: 700; }
.ppt2016-tabs .file-tab { color: white; background: #d24726; }
.ppt2016-ribbon { min-height: 98px; display: flex; gap: 0; padding: 6px 7px 4px; overflow-x: auto; background: #fafafa; border-bottom: 1px solid #cfcfcf; }
.ppt-ribbon-group { min-width: 145px; display: flex; flex-direction: column; justify-content: space-between; padding: 0 8px; border-right: 1px solid #d5d5d5; }
.ppt-command-row { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
.ppt-command { min-width: 58px; min-height: 55px; display: grid; place-items: center; gap: 2px; padding: 4px 5px; border: 1px solid transparent; border-radius: 3px; color: #333; background: transparent; cursor: pointer; }
.ppt-command:hover { border-color: #f2b69e; background: #fff3ee; }
.ppt-command > span { font-size: 20px; }
.ppt-command small { max-width: 70px; color: #333; font-size: 9px; line-height: 1.1; }
.ppt-ribbon-group em { padding-top: 3px; color: #777; text-align: center; font-size: 9px; font-style: normal; }
.ppt2016-workspace { display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 460px; background: #d8d8d8; }
.ppt-thumbnails { overflow-y: auto; padding: 12px 10px; background: #f3f3f3; border-right: 1px solid #c6c6c6; }
.ppt-thumbnails button { width: 100%; display: grid; grid-template-columns: 20px 1fr; gap: 7px; align-items: start; margin-bottom: 10px; padding: 4px; border: 2px solid transparent; background: transparent; cursor: pointer; }
.ppt-thumbnails button.active { border-color: #d24726; background: #fff; }
.ppt-thumbnails button > span { font-size: 10px; }
.ppt-thumbnails i { aspect-ratio: 16/9; display: grid; align-content: center; gap: 2px; padding: 8px; color: #333; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.13); font-style: normal; }
.ppt-thumbnails b { font-size: 9px; }
.ppt-thumbnails small { font-size: 6px; color: #777; }
.ppt-slide-stage { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 26px 30px 0; }
.ppt-slide-canvas { position: relative; width: min(760px,94%); aspect-ratio: 16/9; margin: auto; display: grid; align-content: center; gap: 22px; padding: 9%; overflow: hidden; color: #1f2937; background: linear-gradient(150deg,#fff 60%,#fff7ed); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.ppt-slide-canvas::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 13px; background: #d24726; }
.ppt-slide-title { position: relative; z-index: 2; padding-bottom: 9px; border-bottom: 2px solid #d24726; font-size: clamp(21px,3vw,36px); font-weight: 650; }
.ppt-slide-subtitle { position: relative; z-index: 2; color: #555; font-size: clamp(12px,1.7vw,19px); line-height: 1.4; }
.ppt-slide-decoration { position: absolute; right: -6%; bottom: -18%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(210,71,38,.12); }
.ppt-notes { min-height: 48px; display: flex; gap: 12px; align-items: center; margin-top: 24px; padding: 8px 12px; color: #666; background: white; border: 1px solid #ccc; font-size: 11px; }
.ppt2016-status { min-height: 28px; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 10px; color: #555; background: white; border-top: 1px solid #ccc; font-size: 10px; }
.ppt2016-app [data-ppt-area] { transition: outline .18s ease, background .18s ease; }
.ppt2016-app [data-ppt-area]:hover { outline: 2px solid rgba(37,99,235,.45); outline-offset: -2px; }
.ppt2016-app [data-ppt-area].identified { outline: 3px solid #16a34a; outline-offset: -3px; }
.ppt-learning-panel { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 14px 35px rgba(15,43,73,.07); }
.ppt-learning-panel h3 { margin: 0 0 4px; color: var(--navy); }
.ppt-learning-panel label { display: flex; gap: 9px; align-items: center; padding: 8px; border-radius: 10px; background: #f8fafc; color: #334155; font-size: 13px; }
.ppt-learning-panel input { accent-color: #16a34a; }
.ppt-explanation { min-height: 78px; padding: 13px; border-radius: 13px; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa; font-size: 13px; line-height: 1.5; }
.ppt-command-path { display: grid; gap: 8px; }
.ppt-command-path > div { display: grid; grid-template-columns: auto 1fr; gap: 1px 9px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 12px; }
.ppt-command-path span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: white; background: #94a3b8; font-weight: 900; }
.ppt-command-path strong { color: var(--navy); font-size: 12px; }
.ppt-command-path small { color: var(--muted); font-size: 10px; }
.ppt-command-path .current { border-color: #fb923c; background: #fff7ed; }
.ppt-command-path .current span { background: #ea580c; }
.ppt-command-path .done { border-color: #86efac; background: #f0fdf4; }
.ppt-command-path .done span { background: #16a34a; }
.ppt-slide-choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ppt-slide-choice-grid > button { padding: 13px; border: 3px solid transparent; border-radius: 19px; background: white; box-shadow: 0 12px 28px rgba(15,23,42,.08); cursor: pointer; text-align: left; }
.ppt-slide-choice-grid > button:hover, .ppt-slide-choice-grid > button.selected { border-color: #f97316; transform: translateY(-2px); }
.ppt-slide-choice-grid > button.correct { border-color: #22c55e; }
.ppt-slide-choice-grid > button.wrong { border-color: #ef4444; }
.ppt-slide-choice-grid > button > strong { display: block; margin-top: 11px; color: var(--navy); line-height: 1.4; }
.ppt-choice-slide { position: relative; aspect-ratio: 16/9; overflow: hidden; padding: 14px; background: white; box-shadow: 0 5px 13px rgba(0,0,0,.15); }
.ppt-choice-slide h3 { margin: 0 0 8px; color: #9a3412; font-size: 14px; }
.ppt-choice-slide p { max-width: 72%; margin: 0; color: #475569; font-size: 9px; line-height: 1.45; }
.ppt-choice-slide > span { position: absolute; right: 13px; bottom: 12px; font-size: 34px; }
.ppt-choice-slide.clear { border-left: 7px solid #d24726; background: linear-gradient(145deg,#fff,#fff7ed); }
.ppt-choice-slide.crowded { font-family: serif; background: #fef08a; }
.ppt-choice-slide.crowded p { max-width: 100%; font-size: 7px; }
.ppt-choice-slide.chaotic { color: #7e22ce; background: repeating-linear-gradient(45deg,#fce7f3,#fce7f3 8px,#dbeafe 8px,#dbeafe 16px); }

@media (max-width: 1050px) {
    .ppt-task-layout { grid-template-columns: 1fr; }
    .ppt-learning-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ppt-learning-panel h3, .ppt-learning-panel .ppt-explanation, .ppt-learning-panel .ppt-command-path { grid-column: 1 / -1; }
    .ppt2016-workspace { grid-template-columns: 145px minmax(0,1fr); }
}
@media (max-width: 760px) {
    .understanding-rules, .ppt-slide-choice-grid { grid-template-columns: 1fr; }
    .try-options { grid-template-columns: 1fr; }
    .ppt2016-workspace { grid-template-columns: 90px minmax(0,1fr); min-height: 350px; }
    .ppt-slide-stage { padding: 16px 12px 0; }
    .ppt2016-ribbon { min-height: 82px; }
    .ppt-ribbon-group { min-width: 125px; }
    .ppt2016-status span:nth-child(2), .ppt2016-status span:nth-child(3) { display: none; }
    .ppt-learning-panel { grid-template-columns: 1fr; }
    .ppt2016-mini-workspace { min-height: 210px; }
    .ppt2016-mini-ribbon span { min-width: 55px; }
}

/* V6.6: modern classroom lesson experience and richer visual learning */
:root {
    --glass: rgba(255,255,255,.86);
    --soft-blue: #eef6ff;
    --soft-teal: #ecfdf9;
    --deep: #082f49;
}

body { background: radial-gradient(circle at 18% 8%, rgba(45,212,191,.10), transparent 24%), linear-gradient(180deg,#f3f8fc 0,#edf3f7 100%); }
.topbar {
    min-height: 82px;
    padding: 10px clamp(18px,3.2vw,46px);
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(148,163,184,.25);
    box-shadow: 0 8px 32px rgba(15,43,73,.07);
}
.topbar .brand { gap: 12px; }
.topbar .brand-mark { width: 46px; height: 46px; border-radius: 15px; font-size: 22px; box-shadow: 0 10px 25px rgba(15,118,110,.24); }
.topbar .brand strong { font-size: 16px; letter-spacing: -.02em; }
.topbar .brand small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.topbar .topnav { justify-self: center; padding: 5px; border: 1px solid rgba(203,213,225,.75); border-radius: 16px; background: #f8fbfd; }
.topbar .topnav a { min-height: 42px; padding: 0 18px; border-radius: 12px; }
.topbar .topnav a.active { color: white; background: linear-gradient(135deg,var(--teal-dark),var(--teal)); box-shadow: 0 7px 18px rgba(15,118,110,.22); }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.sound-toggle { border: 1px solid #dbe5ed; background: white; }
.avatar-button {
    min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 5px 11px 5px 6px;
    border: 1px solid #dbe5ed; border-radius: 16px; color: var(--navy); background: white; cursor: pointer;
    box-shadow: 0 6px 17px rgba(15,43,73,.06);
}
.avatar-button > span:last-child { display: grid; text-align: left; }
.avatar-button strong { font-size: 13px; }
.avatar-button small { color: var(--muted); font-size: 11px; }
.logout-link { padding: 10px 12px; border-radius: 12px; color: #475569; font-size: 12px; font-weight: 800; text-decoration: none; }
.logout-link:hover { color: var(--teal-dark); background: #eefbf8; }

.app-main { padding: 20px clamp(14px,2.5vw,34px) 48px; }
.mission-shell {
    grid-template-columns: 310px minmax(0,1fr);
    min-height: calc(100vh - 124px);
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 30px;
    box-shadow: 0 26px 85px rgba(15,43,73,.13);
}
.mission-sidebar {
    position: relative; overflow: hidden; padding: 28px;
    background: radial-gradient(circle at 20% 10%, rgba(45,212,191,.28), transparent 24%), linear-gradient(160deg,#082f49 0%,#0b4e67 58%,#0f766e 100%);
}
.mission-sidebar::before, .mission-sidebar::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.10); pointer-events:none; }
.mission-sidebar::before { width:260px; height:260px; right:-120px; top:80px; }
.mission-sidebar::after { width:390px; height:390px; left:-260px; bottom:-180px; }
.mission-sidebar > * { position: relative; z-index: 1; }
.mission-sidebar .back-link { width:max-content; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.10); }
.mission-number { margin-top: 24px; }
.mission-icon-large { width: 70px; height: 70px; border-radius: 22px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mission-sidebar h1 { font-size: clamp(28px,2.5vw,38px); letter-spacing: -.035em; }
.mission-sidebar > p { font-size: 15px; line-height: 1.7; }
.mission-objective { border-color: rgba(255,255,255,.13); }
.mission-progress { margin-top: 28px; }
.mission-stage { background: linear-gradient(180deg,#f7fafc,#eef4f8); }
.stage-toolbar { min-height: 76px; padding: 13px 20px; background: rgba(255,255,255,.95); }
.guide-chip > span { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(145deg,#ecfeff,#dbeafe); }
.timer { border: 0; background: #eff6ff; box-shadow: inset 0 0 0 1px #dbeafe; }
.journey-bar { min-height: 66px; padding: 11px 18px; background: white; border-bottom: 1px solid #e2e8f0; }
.journey-step { min-height: 42px; border-radius: 14px; font-weight: 800; }
.journey-step.active { color: #075985; background: linear-gradient(135deg,#e0f2fe,#ecfdf5); box-shadow: inset 0 0 0 1px rgba(14,165,233,.15); }
.journey-step.done { color: #047857; }
.mission-app { padding: clamp(16px,2vw,28px); }
.mission-panel { max-width: none; padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }

/* Mission launch */
.mission-launch {
    display: grid; grid-template-columns: minmax(0,1.08fr) minmax(380px,.92fr); gap: 30px;
    min-height: 650px; padding: clamp(28px,4vw,58px); border: 1px solid rgba(203,213,225,.75); border-radius: 30px;
    background: radial-gradient(circle at 92% 8%, rgba(59,130,246,.13), transparent 25%), radial-gradient(circle at 10% 90%, rgba(20,184,166,.10), transparent 30%), white;
    box-shadow: 0 22px 62px rgba(15,43,73,.09);
}
.launch-copy { align-self: center; }
.launch-labels { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.launch-labels span { padding:7px 10px; border-radius:999px; color:#0f766e; background:#ecfdf5; font-size:10px; font-weight:900; letter-spacing:.08em; }
.launch-copy h2 { max-width: 760px; margin: 10px 0 14px; color: var(--navy); font-size: clamp(38px,5vw,68px); line-height: .98; letter-spacing: -.055em; }
.launch-summary { max-width: 720px; margin:0; color:#475569; font-size:18px; line-height:1.72; }
.launch-rewards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:26px 0; }
.launch-rewards > span { display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:center; padding:14px; border:1px solid #dbe7ee; border-radius:18px; background:rgba(248,250,252,.92); }
.launch-rewards b { grid-row:1/3; font-size:24px; }
.launch-rewards small { color:#64748b; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.launch-rewards strong { color:#0f172a; font-size:13px; }
.launch-goals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.launch-goals > div { display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; padding:15px; border-radius:18px; background:#f8fafc; border:1px solid #e2e8f0; }
.launch-goals > div > span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:white; background:linear-gradient(135deg,#0f766e,#14b8a6); font-size:11px; font-weight:900; }
.launch-goals p { margin:0; display:grid; }
.launch-goals strong { color:var(--navy); font-size:13px; }
.launch-goals small { color:#64748b; line-height:1.45; }
.launch-footer { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:28px; padding-top:22px; border-top:1px solid #e2e8f0; }
.launch-footer > div { display:grid; }
.launch-footer > div strong { color:var(--navy); font-size:22px; }
.launch-footer > div small { color:#64748b; font-size:10px; text-transform:uppercase; }
.launch-button { margin-left:auto; min-width:190px; }
.launch-visual { position:relative; align-self:center; min-width:0; padding:18px; }
.launch-visual .visual-glow { position:absolute; inset:10% 5%; filter:blur(60px); background:rgba(14,165,233,.18); }
.launch-visual > .office2016-visual, .launch-visual > .system-map-visual, .launch-visual > .ppt2016-mini-card { position:relative; z-index:1; transform:perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.launch-visual-caption { position:relative; z-index:2; width:calc(100% - 34px); margin:-18px auto 0; display:flex; gap:12px; align-items:center; padding:14px 16px; border:1px solid rgba(203,213,225,.8); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 14px 35px rgba(15,43,73,.12); }
.launch-visual-caption > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#ecfdf5; font-size:22px; }
.launch-visual-caption div { display:grid; }
.launch-visual-caption small { color:#64748b; font-size:9px; letter-spacing:.09em; }
.launch-visual-caption strong { color:var(--navy); font-size:13px; }

/* Modern lesson canvas */
.modern-lesson-screen { display:grid; gap:22px; max-width:1480px; margin:0 auto; }
.lesson-section-header {
    position:sticky; top:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:12px 14px; border:1px solid rgba(203,213,225,.75); border-radius:18px; background:rgba(255,255,255,.91); backdrop-filter:blur(18px); box-shadow:0 10px 28px rgba(15,43,73,.07);
}
.section-identity { display:flex; align-items:center; gap:12px; }
.section-identity p { margin:0; display:grid; }
.section-identity small { color:#64748b; font-size:9px; letter-spacing:.10em; }
.section-identity strong { color:var(--navy); font-size:13px; }
.section-tools { display:flex; align-items:center; gap:8px; }
.reading-time { padding:8px 11px; border-radius:11px; color:#475569; background:#f8fafc; font-size:11px; font-weight:800; }
.lesson-section-progress { height:6px; margin:-12px 8px 0; overflow:hidden; border-radius:999px; background:#dfe8ee; }
.lesson-section-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#14b8a6,#0ea5e9); transition:width .3s ease; }
.lesson-hero-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr); gap:22px; align-items:stretch; }
.lesson-copy-card, .lesson-visual-card, .lesson-content-block, .lesson-try-card, .lesson-tip {
    border:1px solid rgba(203,213,225,.78); border-radius:26px; background:white; box-shadow:0 18px 48px rgba(15,43,73,.07);
}
.lesson-copy-card { padding:clamp(26px,3.5vw,48px); background:radial-gradient(circle at 0 0,rgba(20,184,166,.08),transparent 28%),white; }
.lesson-copy-card h2 { margin:9px 0 18px; color:var(--navy); font-size:clamp(32px,4vw,56px); line-height:1.02; letter-spacing:-.045em; }
.lesson-copy-card .lesson-lead { margin:0; color:#475569; font-size:17px; line-height:1.86; }
.lesson-key-points { margin-top:24px; padding:18px; border-radius:19px; background:#f8fbfd; border:1px solid #e2e8f0; }
.key-points-title { display:flex; align-items:center; gap:9px; margin-bottom:10px; color:var(--navy); }
.key-points-title > span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:white; background:#0f766e; }
.lesson-bullets { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.lesson-bullets li { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; }
.lesson-bullets li > span { width:22px; height:22px; display:grid; place-items:center; border-radius:8px; color:#047857; background:#d1fae5; font-size:10px; font-weight:900; }
.lesson-bullets p { margin:0; color:#334155; line-height:1.58; }
.lesson-visual-card { min-width:0; overflow:hidden; padding:14px; background:linear-gradient(160deg,#f8fbff,#f0fdfa); }
.visual-card-top { display:flex; justify-content:space-between; gap:12px; padding:3px 5px 13px; color:#64748b; font-size:9px; font-weight:900; letter-spacing:.10em; }
.visual-card-top small { max-width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lesson-content-block { padding:clamp(22px,3vw,34px); }
.content-block-heading { display:flex; gap:13px; align-items:center; margin-bottom:20px; }
.content-block-heading > span { min-width:62px; min-height:42px; display:grid; place-items:center; padding:0 10px; border-radius:13px; color:white; background:linear-gradient(135deg,#0f766e,#0ea5e9); font-size:11px; font-weight:900; }
.content-block-heading div { display:grid; }
.content-block-heading small { color:#64748b; font-size:9px; letter-spacing:.12em; }
.content-block-heading h3 { margin:2px 0 0; color:var(--navy); font-size:22px; }
.reveal-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.reveal-card { position:relative; min-height:210px; padding:20px; border:1px solid #dfe8ee; border-radius:20px; background:linear-gradient(155deg,#fff,#f8fbfd); text-align:left; transition:.22s ease; }
.reveal-card:hover { transform:translateY(-4px); border-color:#5eead4; box-shadow:0 16px 34px rgba(15,118,110,.10); }
.reveal-card > i { position:absolute; right:14px; top:14px; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#0f766e; background:#ecfdf5; font-style:normal; font-weight:900; }
.reveal-card.revealed > i { transform:rotate(45deg); }
.reveal-card .reveal-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#eef6ff; font-size:22px; }
.reveal-card strong { display:block; margin:14px 0 5px; color:var(--navy); font-size:15px; }
.reveal-card small { color:#64748b; font-size:10px; }
.reveal-card p { margin:12px 0 0; color:#475569; opacity:0; transform:translateY(5px); transition:.2s ease; }
.reveal-card.revealed p { opacity:1; transform:none; }
.lesson-process { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.lesson-process > div { min-height:0; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:18px; border:1px solid #dfe8ee; border-radius:19px; background:#fbfdff; }
.lesson-process > div > span { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:white; background:linear-gradient(135deg,#0f766e,#14b8a6); font-weight:900; }
.lesson-process p { margin:0; display:grid; gap:5px; }
.lesson-process strong { color:var(--navy); }
.lesson-process small { color:#64748b; line-height:1.55; }
.lesson-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.lesson-comparison article { overflow:hidden; border:1px solid #dfe8ee; border-radius:20px; }
.lesson-comparison header { display:flex; gap:10px; align-items:center; padding:16px 18px; }
.lesson-comparison header span { width:32px; height:32px; display:grid; place-items:center; border-radius:11px; color:white; font-weight:900; }
.lesson-comparison .good header { color:#065f46; background:#ecfdf5; }
.lesson-comparison .good header span { background:#10b981; }
.lesson-comparison .weak header { color:#9f1239; background:#fff1f2; }
.lesson-comparison .weak header span { background:#f43f5e; }
.lesson-comparison ul { margin:0; padding:18px 20px 20px 38px; color:#475569; line-height:1.8; }
.scenario-board { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:18px; }
.scenario-problem { display:flex; gap:14px; align-items:flex-start; padding:22px; border-radius:20px; color:white; background:linear-gradient(145deg,#0b4e67,#0f766e); }
.scenario-problem > span { font-size:32px; }
.scenario-problem p { margin:0; line-height:1.7; }
.scenario-questions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.scenario-questions > div { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:16px; border:1px solid #dfe8ee; border-radius:17px; background:#f8fafc; }
.scenario-questions span { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:white; background:#0ea5e9; font-weight:900; }
.scenario-questions p { margin:0; color:#334155; line-height:1.55; }
.mastery-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mastery-checklist label { position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:16px; border:1px solid #dfe8ee; border-radius:17px; background:#f8fafc; cursor:pointer; }
.mastery-checklist input { position:absolute; opacity:0; }
.mastery-checklist label > span { width:28px; height:28px; border:2px solid #94a3b8; border-radius:9px; background:white; }
.mastery-checklist input:checked + span { display:grid; place-items:center; border-color:#10b981; background:#10b981; }
.mastery-checklist input:checked + span::after { content:"✓"; color:white; font-weight:900; }
.mastery-checklist p { margin:0; color:#334155; line-height:1.55; }
.lesson-tip { display:grid; grid-template-columns:auto 1fr; gap:15px; padding:20px 22px; background:linear-gradient(145deg,#fffdf2,#fff7ed); border-color:#fed7aa; }
.lesson-tip > span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#ffedd5; font-size:24px; }
.lesson-tip strong { color:#9a3412; }
.lesson-tip p { margin:5px 0 0; color:#7c2d12; line-height:1.65; }
.lesson-try-card { padding:clamp(24px,3.2vw,38px); background:radial-gradient(circle at 100% 0,rgba(59,130,246,.12),transparent 35%),white; }
.try-heading { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.try-heading > span { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; color:white; background:linear-gradient(135deg,#4338ca,#0ea5e9); font-size:26px; }
.try-heading div { display:grid; }
.try-heading small { color:#4f46e5; font-size:9px; font-weight:900; letter-spacing:.12em; }
.try-heading strong { color:var(--navy); font-size:21px; line-height:1.35; }
.try-heading p { margin:4px 0 0; color:#64748b; }
.try-options { margin-top:20px; gap:12px; }
.try-options button { min-height:76px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; padding:13px 16px; border:2px solid #e2e8f0; border-radius:17px; background:#fff; text-align:left; }
.try-options button > span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#475569; background:#f1f5f9; font-weight:900; }
.try-options button strong { color:#334155; line-height:1.45; }
.try-options button.selected { border-color:#3b82f6; background:#eff6ff; }
.try-options button.correct { border-color:#10b981; background:#ecfdf5; }
.try-options button.wrong { border-color:#ef4444; background:#fef2f2; }
.try-footer { display:flex; align-items:center; gap:14px; margin-top:16px; }
.try-footer p { margin:0; color:#475569; }
.modern-navigation { position:sticky; bottom:12px; z-index:7; display:grid; grid-template-columns:auto minmax(150px,1fr) auto; align-items:center; gap:16px; padding:12px; border:1px solid rgba(203,213,225,.85); border-radius:18px; background:rgba(255,255,255,.93); backdrop-filter:blur(18px); box-shadow:0 14px 38px rgba(15,43,73,.12); }
.lesson-position { display:grid; justify-items:center; gap:5px; }
.lesson-position strong { color:var(--navy); font-size:12px; }
.lesson-dots { max-width:100%; display:flex; justify-content:center; gap:4px; overflow:hidden; }
.lesson-dots i { width:7px; height:7px; flex:0 0 auto; border-radius:99px; background:#cbd5e1; }
.lesson-dots i.done { background:#5eead4; }
.lesson-dots i.active { width:24px; background:#0f766e; }

/* Rich application and concept visuals */
.office2016-visual, .system-map-visual, .comparison-slide-visual { min-width:0; min-height:390px; overflow:hidden; border:1px solid #cbd5e1; border-radius:20px; background:#e9edf1; box-shadow:0 18px 42px rgba(15,23,42,.15); }
.office-titlebar { min-height:38px; display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:0 11px; color:white; font-family:"Segoe UI",sans-serif; font-size:11px; }
.word-titlebar { background:#2b579a; }
.excel-titlebar { background:#217346; }
.office-app-mark { width:25px; height:25px; display:grid; place-items:center; border-radius:4px; background:rgba(255,255,255,.17); font-weight:900; }
.office-tabs { display:flex; gap:2px; overflow-x:auto; padding:0 7px; background:white; border-bottom:1px solid #d7d7d7; }
.office-tabs span { padding:9px 8px 7px; color:#3f3f46; white-space:nowrap; font:10px "Segoe UI",sans-serif; }
.word2016-visual .office-tabs .file { color:white; background:#2b579a; }
.excel2016-visual .office-tabs .file { color:white; background:#217346; }
.office-tabs .active { border-bottom:2px solid currentColor; font-weight:700; }
.office-ribbon { min-height:62px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:6px; background:#fafafa; border-bottom:1px solid #cfcfcf; }
.office-ribbon > div { display:grid; place-items:center; padding:6px; border-right:1px solid #ddd; }
.office-ribbon b { font-size:10px; }
.office-ribbon small { color:#777; font-size:8px; }
.office-status { display:flex; justify-content:space-between; gap:10px; padding:6px 10px; color:#555; background:white; border-top:1px solid #d7d7d7; font:9px "Segoe UI",sans-serif; }
.word-workspace { min-height:270px; padding:18px 18%; background:#d9dde1; }
.word-workspace article { position:relative; min-height:235px; padding:30px 36px; background:white; box-shadow:0 7px 18px rgba(0,0,0,.17); }
.word-workspace h4 { margin:0 0 20px; color:#1e3a8a; text-align:center; font-size:18px; }
.word-workspace p { height:7px; margin:10px 0; border-radius:99px; background:#cbd5e1; }
.word-workspace p.short { width:62%; }
.word-callout { position:absolute; right:20px; bottom:22px; padding:8px 10px; border-radius:10px; color:#1e3a8a; background:#dbeafe; font-size:9px; font-weight:800; }
.word-ruler { height:12px; margin-bottom:4px; background:repeating-linear-gradient(90deg,#fff,#fff 13px,#94a3b8 14px); }
.excel-formula { display:grid; grid-template-columns:55px 30px 1fr; gap:1px; padding:4px; background:#f3f3f3; border-bottom:1px solid #ccc; font:10px "Segoe UI",sans-serif; }
.excel-formula > * { padding:5px 7px; background:white; }
.excel-formula em { color:#166534; font-style:normal; }
.excel-grid { display:grid; grid-template-columns:34px repeat(6,1fr); min-height:260px; background:white; font:9px "Segoe UI",sans-serif; }
.excel-grid > * { min-width:0; min-height:36px; display:grid; place-items:center; border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
.excel-grid > b { color:#444; background:#f3f3f3; }
.excel-grid span.selected { outline:2px solid #217346; outline-offset:-2px; background:#e9f6ef; }
.system-map-visual { position:relative; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 50% 20%,#fff,#eaf4f8); }
.visual-map-title { align-self:start; width:100%; display:flex; gap:11px; align-items:center; }
.visual-map-title > span { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:white; font-size:22px; box-shadow:0 8px 18px rgba(15,43,73,.08); }
.visual-map-title div { display:grid; }
.visual-map-title small { color:#0f766e; font-size:9px; font-weight:900; letter-spacing:.12em; }
.visual-map-title strong { color:var(--navy); }
.system-flow { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
.system-flow > div { min-width:105px; display:grid; place-items:center; gap:4px; padding:16px 9px; border:1px solid #dbe5ed; border-radius:17px; background:white; box-shadow:0 10px 24px rgba(15,43,73,.07); text-align:center; }
.system-flow > div span { font-size:25px; }
.system-flow > div strong { color:var(--navy); font-size:12px; }
.system-flow > div small { color:#64748b; font-size:9px; }
.system-flow > i { color:#0f766e; font-style:normal; font-weight:900; }
.visual-label-cloud { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.visual-label-cloud span { display:flex; gap:7px; align-items:center; padding:7px 10px; border-radius:999px; background:white; color:#475569; font-size:9px; font-weight:800; }
.visual-label-cloud i { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:white; background:#0f766e; font-style:normal; }
.network-map-visual { min-height:390px; }
.network-cloud { position:absolute; top:35px; right:45px; width:130px; height:70px; display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(135deg,#0ea5e9,#2563eb); font-size:12px; font-weight:900; }
.network-node { position:absolute; display:grid; justify-items:center; gap:4px; width:115px; padding:13px 8px; border:1px solid #dbe5ed; border-radius:17px; background:white; box-shadow:0 12px 26px rgba(15,43,73,.10); text-align:center; }
.network-node span { font-size:25px; }
.network-node strong { color:var(--navy); font-size:11px; }
.network-node.learner { left:35px; bottom:55px; }
.network-node.router { left:37%; bottom:55px; }
.network-node.isp { right:34%; top:130px; }
.network-node.service { right:35px; bottom:55px; }
.network-line { position:absolute; height:3px; transform-origin:left; background:linear-gradient(90deg,#14b8a6,#0ea5e9); }
.network-line.one { width:145px; left:135px; bottom:115px; }
.network-line.two { width:125px; left:48%; bottom:130px; transform:rotate(-31deg); }
.network-line.three { width:135px; right:115px; top:170px; transform:rotate(40deg); }
.secure-route { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:max-content; max-width:90%; padding:8px 12px; border-radius:999px; color:#065f46; background:#d1fae5; font-size:9px; font-weight:800; }
.security-visual { min-height:390px; }
.security-shield { width:120px; height:120px; display:grid; place-items:center; border-radius:35px; color:white; background:linear-gradient(145deg,#0f766e,#0ea5e9); box-shadow:0 20px 45px rgba(15,118,110,.25); font-size:54px; }
.security-ring { position:absolute; width:125px; display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; padding:11px; border:1px solid #dbe5ed; border-radius:16px; background:white; box-shadow:0 10px 24px rgba(15,43,73,.08); }
.security-ring span { grid-row:1/3; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:white; background:#0f766e; font-weight:900; }
.security-ring strong { color:var(--navy); font-size:11px; }
.security-ring small { color:#64748b; font-size:8px; }
.security-ring.ring-one { left:20px; top:70px; }
.security-ring.ring-two { right:20px; top:70px; }
.security-ring.ring-three { left:20px; bottom:55px; }
.security-ring.ring-four { right:20px; bottom:55px; }
.iot-visual svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.iot-visual svg path { fill:none; stroke:#14b8a6; stroke-width:4; stroke-dasharray:8 7; }
.iot-house { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:130px; height:130px; display:grid; place-items:center; border-radius:30px; color:var(--navy); background:white; box-shadow:0 18px 40px rgba(15,43,73,.13); }
.iot-house span { font-size:48px; }
.iot-house strong { font-size:11px; }
.iot-node { position:absolute; width:105px; display:grid; justify-items:center; gap:3px; padding:12px; border-radius:16px; background:white; border:1px solid #dbe5ed; box-shadow:0 10px 24px rgba(15,43,73,.08); }
.iot-node span { font-size:24px; }
.iot-node strong { color:var(--navy); font-size:10px; }
.iot-node small { color:#64748b; font-size:8px; }
.iot-node.sensor { left:20px; top:38px; }
.iot-node.data { right:20px; top:38px; }
.iot-node.rule { left:25px; bottom:38px; }
.iot-node.action { right:25px; bottom:38px; }
.portfolio-visual { grid-template-columns:145px 1fr; align-items:stretch; padding:0; }
.portfolio-visual aside { display:grid; align-content:start; gap:7px; padding:18px 12px; color:white; background:linear-gradient(160deg,#0b2d4f,#0f766e); }
.portfolio-visual aside strong { margin-bottom:10px; font-size:12px; }
.portfolio-visual aside span { padding:9px; border-radius:10px; font-size:9px; }
.portfolio-visual aside span.active { background:rgba(255,255,255,.16); }
.portfolio-visual section { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-content:center; padding:22px; }
.portfolio-file { display:grid; justify-items:center; gap:5px; padding:18px 8px; border:1px solid #dbe5ed; border-radius:16px; background:white; }
.portfolio-file span { font-size:30px; }
.portfolio-file strong { color:var(--navy); font-size:10px; }
.portfolio-file small { color:#047857; font-size:8px; }
.portfolio-review { grid-column:1/-1; padding:13px; border-radius:14px; color:#065f46; background:#ecfdf5; font-size:10px; line-height:1.7; }
.workflow-visual { min-height:320px; }
.workflow-track { display:flex; align-items:stretch; justify-content:center; gap:8px; width:100%; }
.workflow-track > div { flex:1; display:grid; justify-items:center; align-content:center; gap:6px; min-height:175px; padding:14px; border:1px solid #dbe5ed; border-radius:18px; background:white; text-align:center; }
.workflow-track > div span { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; color:white; background:linear-gradient(135deg,#0f766e,#0ea5e9); font-weight:900; }
.workflow-track strong { color:var(--navy); font-size:11px; }
.workflow-track small { color:#64748b; font-size:8px; line-height:1.4; }
.workflow-track > i { align-self:center; color:#0f766e; font-style:normal; font-weight:900; }
.comparison-slide-visual { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:22px; background:linear-gradient(145deg,#f8fafc,#eef6ff); }
.comparison-slide-visual > div { position:relative; aspect-ratio:16/10; padding:18px; overflow:hidden; border-radius:10px; background:white; box-shadow:0 10px 25px rgba(15,43,73,.13); }
.comparison-slide-visual header { padding-bottom:8px; border-bottom:3px solid #0f766e; color:var(--navy); font-weight:900; }
.comparison-slide-visual h4 { margin:15px 0 10px; color:var(--navy); font-size:14px; }
.comparison-slide-visual ul { padding-left:18px; color:#475569; font-size:9px; line-height:1.8; }
.comparison-slide-visual > div > span { position:absolute; left:12px; bottom:10px; padding:6px 8px; border-radius:9px; font-size:8px; font-weight:900; }
.strong-slide > span { color:#065f46; background:#d1fae5; }
.weak-slide { background:repeating-linear-gradient(45deg,#fef3c7,#fef3c7 12px,#fce7f3 12px,#fce7f3 24px)!important; }
.weak-slide header { color:#9f1239; border-color:#f43f5e; font-family:serif; }
.weak-slide p { font-size:7px; }
.weak-slide b { display:block; color:#7c3aed; font-size:25px; }
.weak-slide > span { color:#9f1239; background:#ffe4e6; }
.diagnostic-visual { min-height:320px; }
.diagnostic-screen { width:78%; padding:22px; border-radius:20px; background:white; box-shadow:0 15px 35px rgba(15,43,73,.10); text-align:center; }
.diagnostic-screen .error-dot { display:block; width:15px; height:15px; margin:0 auto 12px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 7px #fee2e2; }
.diagnostic-screen strong { display:block; color:var(--navy); }
.diagnostic-screen p { color:#64748b; }
.diagnostic-steps { position:absolute; bottom:24px; display:flex; gap:8px; }
.diagnostic-steps > div { display:flex; gap:7px; align-items:center; padding:8px 10px; border-radius:999px; background:white; font-size:9px; }
.diagnostic-steps span { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:white; background:#0f766e; font-weight:900; }
.storyboard-visual { min-height:300px; display:flex; gap:8px; align-items:center; }
.storyboard-visual > div { flex:1; display:grid; justify-items:center; gap:7px; padding:18px 10px; border:1px solid #dbe5ed; border-radius:18px; background:white; text-align:center; }
.storyboard-visual > div span { font-size:30px; }
.storyboard-visual strong { color:var(--navy); }
.storyboard-visual small { color:#64748b; font-size:9px; }
.storyboard-visual > i { color:#0f766e; font-style:normal; font-weight:900; }
.mastery-visual { min-height:320px; }
.mastery-core { width:100px; height:100px; display:grid; place-items:center; border-radius:30px; color:white; background:linear-gradient(145deg,#0f766e,#0ea5e9); box-shadow:0 18px 42px rgba(15,118,110,.24); font-size:38px; font-weight:900; }
.mastery-orbit { position:absolute; display:flex; gap:8px; align-items:center; padding:10px 13px; border:1px solid #dbe5ed; border-radius:14px; background:white; box-shadow:0 10px 24px rgba(15,43,73,.08); }
.mastery-orbit span { width:26px; height:26px; display:grid; place-items:center; border-radius:9px; color:white; background:#0f766e; font-weight:900; font-size:10px; }
.mastery-orbit strong { color:var(--navy); font-size:10px; }
.mastery-orbit.orbit-1 { left:20px; top:45px; }
.mastery-orbit.orbit-2 { right:20px; top:45px; }
.mastery-orbit.orbit-3 { left:20px; bottom:45px; }
.mastery-orbit.orbit-4 { right:20px; bottom:45px; }

.ppt2016-mini-card { min-height:390px; }
.ppt2016-mini-workspace { flex:1; min-height:235px; }
.ppt2016-mini-ribbon { min-height:58px; }
.ppt2016-mini-title { min-height:40px; }

@media (max-width: 1180px) {
    .mission-shell { grid-template-columns:260px minmax(0,1fr); }
    .lesson-hero-grid, .mission-launch { grid-template-columns:1fr; }
    .launch-visual { max-width:760px; width:100%; margin:0 auto; }
    .reveal-card-grid, .lesson-process { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .mission-shell { display:block; }
    .mission-sidebar { min-height:auto; }
    .mission-sidebar .mission-progress, .mission-sidebar .mission-score { display:none; }
    .topbar { grid-template-columns:auto 1fr; }
    .topbar .topnav { order:3; grid-column:1/-1; justify-self:stretch; overflow-x:auto; }
    .topbar-actions { justify-self:end; }
    .lesson-comparison, .scenario-board { grid-template-columns:1fr; }
    .mastery-checklist { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
    .app-main { padding:10px; }
    .mission-shell { border-radius:20px; }
    .mission-sidebar { padding:20px; }
    .mission-app { padding:10px; }
    .mission-launch { padding:24px 18px; border-radius:22px; }
    .launch-copy h2 { font-size:38px; }
    .launch-rewards, .launch-goals { grid-template-columns:1fr; }
    .launch-footer { align-items:stretch; }
    .launch-button { width:100%; margin-left:0; }
    .lesson-section-header { position:relative; align-items:flex-start; flex-direction:column; }
    .section-tools { width:100%; flex-wrap:wrap; }
    .lesson-copy-card h2 { font-size:34px; }
    .reveal-card-grid, .lesson-process, .scenario-questions { grid-template-columns:1fr; }
    .lesson-comparison { grid-template-columns:1fr; }
    .try-options { grid-template-columns:1fr; }
    .try-footer { align-items:stretch; flex-direction:column; }
    .modern-navigation { position:relative; bottom:auto; grid-template-columns:1fr; }
    .modern-navigation button { width:100%; }
    .office2016-visual, .system-map-visual, .comparison-slide-visual { min-height:310px; }
    .system-flow { flex-wrap:wrap; }
    .system-flow > i { transform:rotate(90deg); }
    .comparison-slide-visual { grid-template-columns:1fr; }
    .portfolio-visual { grid-template-columns:105px 1fr; }
    .portfolio-visual section { grid-template-columns:1fr; }
    .workflow-track, .storyboard-visual { flex-direction:column; }
    .workflow-track > div, .storyboard-visual > div { width:100%; min-height:120px; }
    .workflow-track > i, .storyboard-visual > i { transform:rotate(90deg); }
    .network-node { transform:scale(.78); }
    .topbar .avatar-button > span:last-child, .logout-link { display:none; }
}

/* =========================================================
   V6.7 Visual-first lesson flow
   Keeps the existing WLI navy, teal, aqua, white and pale-blue palette.
   ========================================================= */
.visual-first-lesson {
    --lesson-navy: var(--navy);
    --lesson-teal: var(--teal);
    --lesson-teal-dark: var(--teal-dark);
    display: grid;
    gap: 16px;
    min-width: 0;
}
.visual-lesson-toolbar {
    position: sticky;
    top: 92px;
    z-index: 16;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 66px;
    padding: 12px 16px;
    border: 1px solid #dbe5ed;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(15,43,73,.08);
    backdrop-filter: blur(12px);
}
.visual-section-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.visual-section-id > div { display: grid; min-width: 0; }
.visual-section-id small { color: #64748b; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.visual-section-id strong { overflow: hidden; color: var(--navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.visual-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.visual-section-actions > span,
.visual-section-actions button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe5ed;
    border-radius: 12px;
    color: #31506a;
    background: #f8fbfd;
    font-size: 12px;
    font-weight: 800;
}
.visual-section-actions button { cursor: pointer; }
.visual-section-actions button:hover { border-color: #9edbd6; color: var(--teal-dark); background: #effcf9; }

.lesson-view-tabs {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    padding: 10px;
    border: 1px solid #dbe5ed;
    border-radius: 20px;
    background: #f8fbfd;
}
.lesson-view-tabs button {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 10px;
    align-items: center;
    min-height: 62px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: #64748b;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: .2s ease;
}
.lesson-view-tabs button > span {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #64748b;
    background: #e7eef4;
    font-weight: 900;
}
.lesson-view-tabs strong { color: #475569; font-size: 13px; }
.lesson-view-tabs small { font-size: 10px; }
.lesson-view-tabs button:hover { border-color: #c9e7e4; background: #fff; transform: translateY(-1px); }
.lesson-view-tabs button.active {
    border-color: rgba(17,159,154,.26);
    color: #0f766e;
    background: linear-gradient(135deg,#edfffb,#edf7ff);
    box-shadow: 0 10px 24px rgba(15,118,110,.09);
}
.lesson-view-tabs button.active > span { color: white; background: linear-gradient(135deg,var(--teal-dark),var(--teal)); }
.lesson-view-tabs button.active strong { color: var(--navy); }

.lesson-view-panel {
    display: none;
    min-width: 0;
    padding: clamp(18px,2.5vw,28px);
    border: 1px solid #dbe5ed;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15,43,73,.08);
}
.lesson-view-panel.active { display: grid; gap: 20px; animation: visualPanelIn .24s ease; }
@keyframes visualPanelIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }

.visual-lesson-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}
.visual-lesson-heading > div:first-child { max-width: 760px; }
.visual-lesson-heading h2 { margin: 7px 0 8px; color: var(--navy); font-size: clamp(30px,3.6vw,48px); line-height: 1.03; letter-spacing: -.04em; }
.visual-lesson-heading p { margin: 0; color: #526579; font-size: 16px; line-height: 1.65; }
.visual-mission-chip {
    display: flex;
    gap: 10px;
    align-items: center;
    width: min(330px,100%);
    padding: 13px 15px;
    border: 1px solid #cce9e6;
    border-radius: 16px;
    background: #effcf9;
}
.visual-mission-chip > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: white; font-size: 20px; }
.visual-mission-chip div { display: grid; }
.visual-mission-chip small { color: #0f766e; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.visual-mission-chip strong { color: #31506a; font-size: 11px; line-height: 1.45; }

.interactive-visual-stage {
    overflow: hidden;
    border: 1px solid #cfdde7;
    border-radius: 24px;
    background: linear-gradient(160deg,#f8fcff,#eef6fb);
}
.visual-stage-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid #dbe5ed;
    background: #fff;
}
.visual-stage-top strong { color: var(--navy); }
.visual-stage-top small { color: #64748b; }
.visual-stage-canvas {
    position: relative;
    min-height: 420px;
    padding: clamp(14px,2vw,24px);
    display: grid;
    place-items: center;
}
.visual-stage-canvas > .office2016-visual,
.visual-stage-canvas > .system-map-visual,
.visual-stage-canvas > .ppt2016-mini-card,
.visual-stage-canvas > .comparison-slide-visual {
    width: min(100%,950px);
    min-height: 390px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(15,43,73,.12);
}
.visual-hotspot {
    position: absolute;
    z-index: 8;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 4px solid rgba(255,255,255,.95);
    border-radius: 50%;
    color: white;
    background: linear-gradient(145deg,var(--teal-dark),var(--cyan));
    box-shadow: 0 0 0 6px rgba(52,214,206,.16), 0 10px 25px rgba(15,118,110,.28);
    cursor: pointer;
    transition: .18s ease;
}
.visual-hotspot:hover,
.visual-hotspot.active { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(52,214,206,.22), 0 13px 30px rgba(15,118,110,.32); }
.visual-hotspot span { font-size: 13px; font-weight: 900; }
.visual-hotspot.hotspot-1 { left: 10%; top: 34%; }
.visual-hotspot.hotspot-2 { left: 47%; top: 12%; }
.visual-hotspot.hotspot-3 { left: 50%; top: 51%; }
.visual-hotspot.hotspot-4 { left: 31%; bottom: 15%; }
.visual-hotspot.hotspot-5 { right: 13%; bottom: 11%; }
.visual-hotspot-caption {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 15px 18px;
    border-top: 1px solid #dbe5ed;
    background: #fff;
}
.visual-hotspot-caption > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: linear-gradient(135deg,var(--teal-dark),var(--teal));
    font-weight: 900;
}
.visual-hotspot-caption > div { display: grid; }
.visual-hotspot-caption small { color: #0f766e; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.visual-hotspot-caption strong { color: var(--navy); font-size: 14px; }
.visual-hotspot-caption p { margin: 3px 0 0; color: #526579; font-size: 12px; line-height: 1.5; }
.visual-vocabulary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #dbe5ed;
    border-radius: 16px;
    background: #f8fbfd;
}
.visual-vocabulary > span { margin-right: 4px; color: var(--navy); font-size: 11px; font-weight: 900; }
.visual-vocabulary button {
    padding: 7px 11px;
    border: 1px solid #cfe0e9;
    border-radius: 999px;
    color: #31506a;
    background: white;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.visual-vocabulary button:hover { border-color: #7ccbc5; color: #0f766e; background: #effcf9; }
.visual-tab-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding-top: 6px;
}
.visual-tab-actions > span { color: #64748b; font-size: 12px; }

.guided-explanation-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border-radius: 22px;
    color: white;
    background: linear-gradient(145deg,var(--navy),#0b4e67 70%,var(--teal-dark));
    box-shadow: 0 18px 40px rgba(11,45,79,.18);
}
.guide-portrait {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    background: rgba(255,255,255,.12);
    font-size: 42px;
}
.guided-explanation-hero h2 { margin: 5px 0 6px; font-size: clamp(26px,3vw,40px); line-height: 1.06; }
.guided-explanation-hero p { margin: 0; color: #d9f9f6; line-height: 1.6; }
.guided-explanation-hero button { min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 13px; color: white; background: rgba(255,255,255,.12); font-weight: 800; cursor: pointer; }
.guided-explanation-hero button:hover { background: rgba(255,255,255,.2); }

.visual-key-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.visual-key-list article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    min-height: 92px;
    padding: 15px;
    border: 1px solid #dbe5ed;
    border-radius: 18px;
    background: #f8fbfd;
}
.visual-key-list article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(135deg,var(--teal-dark),var(--teal)); font-weight: 900; }
.visual-key-list p { margin: 0; color: #425970; line-height: 1.55; }
.visual-reveal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.visual-reveal-card {
    position: relative;
    min-height: 170px;
    padding: 17px;
    border: 1px solid #dbe5ed;
    border-radius: 18px;
    background: linear-gradient(145deg,#fff,#f7fbfd);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.visual-reveal-card > span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 13px; background: #eaf8f6; font-size: 22px; }
.visual-reveal-card strong { display: block; color: var(--navy); }
.visual-reveal-card small { color: #0f766e; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.visual-reveal-card p { max-height: 0; margin: 0; overflow: hidden; color: #526579; opacity: 0; transition: .24s ease; }
.visual-reveal-card i { position: absolute; right: 15px; top: 15px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #0f766e; background: #eaf8f6; font-style: normal; font-weight: 900; }
.visual-reveal-card.revealed { border-color: #7ccbc5; background: #f0fdfa; }
.visual-reveal-card.revealed p { max-height: 190px; margin-top: 10px; opacity: 1; }
.visual-reveal-card.revealed i { transform: rotate(45deg); }
.visual-process-track {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 18px;
    border: 1px solid #dbe5ed;
    border-radius: 20px;
    background: #f8fbfd;
}
.visual-process-track article { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 14px; border: 1px solid #e0e8ee; border-radius: 15px; background: white; }
.visual-process-track article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--teal-dark); font-weight: 900; }
.visual-process-track article strong { color: var(--navy); font-size: 12px; }
.visual-process-track article p { margin: 4px 0 0; color: #64748b; font-size: 10px; line-height: 1.5; }
.visual-process-track > i { align-self: center; color: #0f766e; font-style: normal; font-weight: 900; }
.visual-comparison-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.visual-comparison-board article { padding: 18px; border: 1px solid #dbe5ed; border-radius: 19px; }
.visual-comparison-board article.strong { background: #effcf9; border-color: #bfe7df; }
.visual-comparison-board article.weak { background: #fff7f7; border-color: #f3d0d0; }
.visual-comparison-board header { display: flex; gap: 8px; align-items: center; color: var(--navy); }
.visual-comparison-board header span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: white; background: #0f766e; font-weight: 900; }
.visual-comparison-board article.weak header span { background: #ef4444; }
.visual-comparison-board ul { margin: 13px 0 0; padding-left: 18px; color: #526579; line-height: 1.7; }
.comparison-vs { align-self: center; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #64748b; background: #e7eef4; font-size: 10px; font-weight: 900; }
.visual-thinking-tip { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid #cfe0e9; border-radius: 18px; background: #f8fbfd; }
.visual-thinking-tip > span { font-size: 26px; }
.visual-thinking-tip strong { color: var(--navy); }
.visual-thinking-tip p { margin: 4px 0 0; color: #526579; }

.apply-section-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 20px;
    color: white;
    background: linear-gradient(140deg,var(--navy),#0b4e67);
}
.apply-section-heading > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.13); font-size: 30px; }
.apply-section-heading small { color: #9ff5ef; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.apply-section-heading h2 { margin: 2px 0 3px; font-size: clamp(24px,3vw,36px); }
.apply-section-heading p { margin: 0; color: #d9f9f6; }
.visual-scenario-board { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: 14px; }
.scenario-illustration { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 220px; padding: 24px; border-radius: 20px; color: white; background: radial-gradient(circle at 70% 15%,rgba(52,214,206,.3),transparent 30%),linear-gradient(145deg,var(--navy),var(--teal-dark)); text-align: center; }
.scenario-illustration > span { font-size: 50px; }
.scenario-illustration strong { font-size: 18px; }
.scenario-illustration p { margin: 0; color: #d9f9f6; line-height: 1.6; }
.scenario-prompt-list { display: grid; gap: 10px; }
.scenario-prompt-list article { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 14px; border: 1px solid #dbe5ed; border-radius: 16px; background: #f8fbfd; }
.scenario-prompt-list span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--teal-dark); font-weight: 900; }
.scenario-prompt-list p { margin: 0; color: #425970; }
.visual-mastery-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.visual-mastery-checklist label { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 14px; border: 1px solid #dbe5ed; border-radius: 16px; background: #f8fbfd; cursor: pointer; }
.visual-mastery-checklist input { position: absolute; opacity: 0; }
.visual-mastery-checklist label > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: transparent; background: #e3edf3; font-weight: 900; }
.visual-mastery-checklist input:checked + span { color: white; background: var(--teal); }
.visual-mastery-checklist p { margin: 0; color: #425970; }
.visual-practice-card { overflow: hidden; border: 1px solid #dbe5ed; border-radius: 22px; background: #fff; box-shadow: 0 12px 35px rgba(15,43,73,.07); }
.practice-card-header { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 15px; color: #0f766e; background: #effcf9; border-bottom: 1px solid #cde9e5; }
.practice-card-header span { font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.practice-card-header small { font-size: 10px; }
.practice-question { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; padding: 18px; }
.practice-question > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: #eaf8f6; font-size: 28px; }
.practice-question small { color: #0f766e; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.practice-question h3 { margin: 3px 0 4px; color: var(--navy); font-size: 20px; }
.practice-question p { margin: 0; color: #64748b; }
.visual-try-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 18px 18px; }
.visual-try-options button { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; min-height: 62px; padding: 12px; border: 1px solid #dbe5ed; border-radius: 15px; color: #425970; background: #f8fbfd; text-align: left; cursor: pointer; }
.visual-try-options button > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #31506a; background: #e7eef4; font-weight: 900; }
.visual-try-options button:hover,
.visual-try-options button.selected { border-color: #75c7c1; background: #effcf9; }
.visual-try-options button.selected > span { color: white; background: var(--teal); }
.visual-try-options button.correct { border-color: #22c55e; background: #ecfdf5; }
.visual-try-options button.wrong { border-color: #ef4444; background: #fef2f2; }
.visual-try-footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid #dbe5ed; background: #f8fbfd; }
.visual-try-footer p { margin: 0; color: #526579; }
.visual-practice-card.passed .practice-card-header { color: #065f46; background: #ecfdf5; }

.visual-lesson-navigation {
    position: sticky;
    bottom: 12px;
    z-index: 12;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid #dbe5ed;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 15px 40px rgba(15,43,73,.12);
    backdrop-filter: blur(12px);
}
.visual-section-map { display: grid; justify-items: center; gap: 6px; }
.visual-section-map strong { color: var(--navy); font-size: 12px; }
.visual-section-map > div { display: flex; gap: 5px; max-width: 360px; flex-wrap: wrap; justify-content: center; }
.visual-section-map i { width: 8px; height: 8px; border-radius: 999px; background: #d9e4ec; }
.visual-section-map i.active { width: 24px; background: var(--teal); }
.visual-section-map i.done { background: #34d399; }

/* Keep the existing screenshot palette and make the overall lesson flow cleaner. */
.mission-journey { padding: 10px 18px; gap: 10px; }
.mission-journey span { min-height: 44px; border: 1px solid transparent; }
.mission-journey span.active { border-color: #c9e7e4; color: #0f766e; background: linear-gradient(135deg,#edfffb,#edf7ff); }
.mission-stage { background: linear-gradient(180deg,#f7fbfd,#edf4f8); }

@media (max-width: 1180px) {
    .visual-lesson-heading { display: grid; }
    .visual-mission-chip { width: 100%; }
    .visual-reveal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .visual-process-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .visual-process-track > i { display: none; }
}
@media (max-width: 900px) {
    .visual-lesson-toolbar { top: 10px; }
    .guided-explanation-hero { grid-template-columns: auto 1fr; }
    .guided-explanation-hero button { grid-column: 1 / -1; }
    .visual-scenario-board { grid-template-columns: 1fr; }
    .visual-comparison-board { grid-template-columns: 1fr; }
    .comparison-vs { justify-self: center; }
}
@media (max-width: 700px) {
    .visual-first-lesson { gap: 10px; }
    .visual-lesson-toolbar { position: relative; top: auto; align-items: flex-start; flex-direction: column; }
    .visual-section-actions { width: 100%; }
    .lesson-view-tabs { grid-template-columns: 1fr; }
    .lesson-view-tabs button { min-height: 54px; }
    .lesson-view-panel { padding: 14px; border-radius: 19px; }
    .visual-lesson-heading { gap: 12px; }
    .visual-lesson-heading h2 { font-size: 31px; }
    .visual-stage-top { align-items: flex-start; flex-direction: column; }
    .visual-stage-canvas { min-height: 300px; padding: 8px; }
    .visual-stage-canvas > .office2016-visual,
    .visual-stage-canvas > .system-map-visual,
    .visual-stage-canvas > .ppt2016-mini-card,
    .visual-stage-canvas > .comparison-slide-visual { min-height: 280px; transform: scale(.92); }
    .visual-hotspot { width: 36px; height: 36px; }
    .visual-key-list,
    .visual-reveal-grid,
    .visual-process-track,
    .visual-mastery-checklist,
    .visual-try-options { grid-template-columns: 1fr; }
    .visual-tab-actions,
    .visual-try-footer { align-items: stretch; flex-direction: column; }
    .visual-tab-actions button,
    .visual-try-footer button { width: 100%; }
    .guided-explanation-hero { grid-template-columns: 1fr; text-align: left; }
    .guide-portrait { width: 62px; height: 62px; }
    .visual-lesson-navigation { position: relative; bottom: auto; grid-template-columns: 1fr; }
    .visual-lesson-navigation button { width: 100%; }
}

/* V6.7 mission-flow rail inside the existing teal sidebar */
.sidebar-lesson-flow {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.13);
}
.sidebar-lesson-flow > small { color: #9ff5ef; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.sidebar-lesson-flow > span {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 10px;
    align-items: center;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: rgba(255,255,255,.58);
}
.sidebar-lesson-flow > span:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: -9px;
    width: 1px;
    height: 10px;
    background: rgba(255,255,255,.17);
}
.sidebar-lesson-flow i {
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #b7c8d3;
    background: rgba(255,255,255,.09);
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
}
.sidebar-lesson-flow b { color: inherit; font-size: 12px; }
.sidebar-lesson-flow em { color: inherit; font-size: 9px; font-style: normal; }
.sidebar-lesson-flow > span.active {
    border-color: rgba(159,245,239,.35);
    color: white;
    background: rgba(255,255,255,.11);
    box-shadow: inset 3px 0 0 var(--cyan);
}
.sidebar-lesson-flow > span.active i { color: #064e4b; background: #9ff5ef; }
.sidebar-lesson-flow > span.done { color: #c7fff7; }
.sidebar-lesson-flow > span.done i { color: white; background: #22c55e; }
@media (min-width: 901px) {
    .mission-journey { display: none; }
}
@media (max-width: 900px) {
    .sidebar-lesson-flow { display: none; }
}

/* Keep understanding checks inside the existing WLI colour system. */
.understanding-intro {
    border-color: #cbe3e1;
    background: radial-gradient(circle at 50% 0, rgba(52,214,206,.16), transparent 38%), linear-gradient(145deg,#ffffff,#f2fbfa);
    box-shadow: 0 28px 75px rgba(15,118,110,.12);
}
.understanding-icon {
    background: linear-gradient(145deg,var(--navy),var(--teal));
    box-shadow: 0 18px 38px rgba(15,118,110,.26);
}
.understanding-rules > div { border-color: #d4e7e5; }
.understanding-rules span { background: linear-gradient(135deg,var(--teal-dark),var(--teal)); }
.attempt-counter { color: #0f766e; background: #ecfdf5; border-color: #bde6dd; }
.lesson-check { border-color: #d4e7e5; background: linear-gradient(145deg,#fff,#f4fbfa); }

/* V6.8: full-body avatar studio, companion and responsive profile fixes */
.avatar-character {
    --skin: #a56a43;
    --skin-shadow: #8a5133;
    --hair: #1f1a17;
    --eye: #241a16;
    --uniform: #0f766e;
    --uniform-dark: #075985;
    --shoe: #1f2937;
    position: relative;
    display: inline-block;
    width: 44px;
    height: 56px;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #f7fcff 0%, #e8f4f7 72%, #dcebed 100%);
    box-shadow: 0 10px 24px rgba(15, 43, 73, .14);
    flex: 0 0 auto;
}
.avatar-character > span { position: absolute; display: block; box-sizing: border-box; }
.avatar-mini { width: 44px; height: 44px; border-radius: 50%; }
.avatar-guide-mini { width: 48px; height: 54px; border-radius: 15px; }
.avatar-choice { width: 78px; height: 108px; border-radius: 20px; }
.avatar-full, .avatar-preview { width: 220px; height: 330px; border-radius: 28px; }
.avatar-guide { width: 112px; height: 168px; border-radius: 24px; }

.avatar-floor { left: 11%; bottom: 2%; width: 78%; height: 5%; border-radius: 50%; background: rgba(15, 43, 73, .13); z-index: 0; }
.avatar-backhair { left: 29%; top: 6%; width: 42%; height: 31%; border-radius: 48% 48% 38% 38%; background: var(--hair); z-index: 2; }
.avatar-ponytail, .avatar-buns { z-index: 1; background: var(--hair); }
.avatar-head { left: 34%; top: 11%; width: 32%; height: 24%; border-radius: 48% 48% 44% 44%; background: var(--skin); z-index: 5; }
.avatar-face-round .avatar-head { border-radius: 50%; width: 34%; left: 33%; height: 23%; }
.avatar-face-heart .avatar-head { border-radius: 52% 52% 58% 58% / 43% 43% 66% 66%; }
.avatar-ear { top: 19%; width: 5%; height: 8%; border-radius: 50%; background: var(--skin-shadow); z-index: 4; }
.avatar-ear-left { left: 31.5%; }
.avatar-ear-right { right: 31.5%; }
.avatar-fringe { left: 32%; top: 7%; width: 36%; height: 12%; border-radius: 50% 50% 45% 45%; background: var(--hair); z-index: 7; }
.avatar-eyebrow { top: 19%; width: 8%; height: 1.2%; border-radius: 999px; background: var(--hair); z-index: 8; }
.avatar-eyebrow-left { left: 39%; transform: rotate(-6deg); }
.avatar-eyebrow-right { right: 39%; transform: rotate(6deg); }
.avatar-eye { top: 21%; width: 4.2%; height: 3.4%; border-radius: 50%; background: white; border: 1px solid rgba(15,23,42,.18); z-index: 9; }
.avatar-eye::after { content:""; position:absolute; width:48%; height:58%; left:26%; top:22%; border-radius:50%; background:var(--eye); }
.avatar-eye-left { left: 40%; }
.avatar-eye-right { right: 40%; }
.avatar-eyes-calm .avatar-eye { height: 1.4%; top: 22%; border-radius:999px; background:var(--hair); border:0; }
.avatar-eyes-calm .avatar-eye::after { display:none; }
.avatar-eyes-sparkle .avatar-eye { box-shadow: 0 0 0 1px rgba(20,184,166,.25), 0 0 5px rgba(20,184,166,.65); }
.avatar-nose { left: 49%; top: 23%; width: 2%; height: 3.5%; border-right: 1px solid rgba(93,52,33,.42); border-bottom: 1px solid rgba(93,52,33,.3); border-radius: 0 0 60% 0; z-index: 9; }
.avatar-mouth { left: 45%; top: 28%; width: 10%; height: 3%; border-bottom: 2px solid #7f1d1d; border-radius: 0 0 999px 999px; z-index: 9; }
.avatar-mouth-grin .avatar-mouth { height: 5%; top: 27.5%; background: white; border: 2px solid #7f1d1d; border-top: 0; }
.avatar-mouth-calm .avatar-mouth { height: 1%; top: 29%; border-bottom-width: 1px; border-radius:999px; }
.avatar-neck { left: 45%; top: 32%; width: 10%; height: 9%; background: var(--skin); z-index: 3; }
.avatar-body { left: 28%; top: 38%; width: 44%; height: 29%; border-radius: 20% 20% 11% 11%; background: var(--uniform); z-index: 3; }
.avatar-shirt { left: 36%; top: 38%; width: 28%; height: 22%; background: white; clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); z-index: 4; }
.avatar-collar { left: 39%; top: 38%; width: 22%; height: 10%; background: white; clip-path: polygon(0 0,50% 62%,100% 0,82% 100%,18% 100%); z-index: 7; }
.avatar-jacket { left: 28%; top: 39%; width: 44%; height: 28%; border-radius: 19% 19% 11% 11%; background: linear-gradient(90deg,var(--uniform) 0 43%,transparent 43% 57%,var(--uniform) 57% 100%); z-index: 6; }
.avatar-jacket::after { content:""; position:absolute; left:49%; top:12%; width:2%; height:76%; background:rgba(255,255,255,.42); }
.avatar-arm { top: 41%; width: 10%; height: 28%; border-radius:999px; background: var(--uniform); z-index: 2; transform-origin: 50% 10%; }
.avatar-arm-left { left: 22%; transform: rotate(8deg); }
.avatar-arm-right { right: 22%; transform: rotate(-8deg); }
.avatar-hand { top: 65%; width: 8%; height: 7%; border-radius:50%; background:var(--skin); z-index:5; }
.avatar-hand-left { left: 20%; }
.avatar-hand-right { right: 20%; }
.avatar-bottom { left: 31%; top: 64%; width: 38%; height: 15%; background: var(--uniform-dark); z-index: 4; }
.avatar-bottom-skirt .avatar-bottom { clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); border-radius: 8% 8% 16% 16%; }
.avatar-bottom-trousers .avatar-bottom { background: linear-gradient(90deg,var(--uniform-dark) 0 47%,transparent 47% 53%,var(--uniform-dark) 53%); }
.avatar-leg { top: 76%; width: 8%; height: 16%; border-radius:999px; background:var(--skin); z-index:2; }
.avatar-leg-left { left: 39%; }
.avatar-leg-right { right: 39%; }
.avatar-shoe { top: 90%; width: 14%; height: 5%; border-radius: 70% 35% 30% 35%; background:var(--shoe); z-index:6; }
.avatar-shoe-left { left: 34%; transform: rotate(-2deg); }
.avatar-shoe-right { right: 34%; transform: scaleX(-1) rotate(-2deg); }

.avatar-style-buns .avatar-buns { display:block; left:22%; top:7%; width:56%; height:18%; background:transparent; }
.avatar-style-buns .avatar-buns::before,.avatar-style-buns .avatar-buns::after { content:""; position:absolute; width:24%; height:72%; top:4%; border-radius:50%; background:var(--hair); }
.avatar-style-buns .avatar-buns::before { left:0; }.avatar-style-buns .avatar-buns::after { right:0; }
.avatar-style-ponytail .avatar-ponytail { display:block; right:19%; top:17%; width:20%; height:24%; border-radius:30% 65% 65% 45%; transform:rotate(18deg); }
.avatar-style-curly .avatar-backhair { left:25%; width:50%; border-radius:50%; box-shadow:-5px 3px 0 var(--hair),5px 3px 0 var(--hair),-7px 10px 0 var(--hair),7px 10px 0 var(--hair); }
.avatar-style-afro .avatar-backhair { left:22%; top:3%; width:56%; height:31%; border-radius:50%; box-shadow:-6px 2px 0 var(--hair),6px 2px 0 var(--hair),0 -4px 0 var(--hair); }
.avatar-style-afro .avatar-fringe { width:48%; left:26%; top:7%; border-radius:50%; }
.avatar-style-bob .avatar-backhair { left:28%; top:7%; width:44%; height:35%; border-radius:45% 45% 24% 24%; }
.avatar-style-bob .avatar-fringe { left:31%; width:38%; top:9%; border-radius:50% 50% 16% 16%; }
.avatar-style-braids .avatar-backhair::before,.avatar-style-braids .avatar-backhair::after { content:""; position:absolute; width:12%; height:85%; top:53%; background:var(--hair); border-radius:999px; }
.avatar-style-braids .avatar-backhair::before { left:9%; }.avatar-style-braids .avatar-backhair::after { right:9%; }

.avatar-outfit-cardigan .avatar-jacket { background:linear-gradient(90deg,var(--uniform) 0 46%,transparent 46% 54%,var(--uniform) 54% 100%); border-radius:24% 24% 13% 13%; }
.avatar-outfit-sport .avatar-body,.avatar-outfit-sport .avatar-arm { background:linear-gradient(135deg,var(--uniform),var(--uniform-dark)); }
.avatar-outfit-sport .avatar-shirt { display:none; }
.avatar-outfit-sport .avatar-collar { background:white; clip-path:polygon(0 10%,100% 10%,90% 60%,10% 60%); }
.avatar-outfit-smart .avatar-jacket { display:none; }
.avatar-outfit-smart .avatar-body,.avatar-outfit-smart .avatar-arm { background:white; border:1px solid rgba(15,43,73,.12); }
.avatar-outfit-smart .avatar-collar { background:var(--uniform); }
.avatar-accessory-glasses .avatar-glasses { display:block; left:37%; top:19%; width:26%; height:8%; border:2px solid #334155; border-radius:999px; z-index:12; }
.avatar-accessory-glasses .avatar-glasses::after { content:""; position:absolute; left:47%; top:40%; width:10%; border-top:2px solid #334155; }
.avatar-accessory-headband .avatar-headband { display:block; left:29%; top:10%; width:42%; height:5%; border-radius:999px; background:var(--uniform); z-index:12; }
.avatar-accessory-bow .avatar-bow { display:block; right:26%; top:8%; width:13%; height:8%; background:var(--uniform); clip-path:polygon(0 0,50% 40%,100% 0,84% 100%,50% 60%,16% 100%); z-index:12; }
.avatar-accessory-none .avatar-glasses,.avatar-accessory-none .avatar-headband,.avatar-accessory-none .avatar-bow { display:none; }

.avatar-skin-light { --skin:#f3c6a5; --skin-shadow:#d7a17e; }
.avatar-skin-warm { --skin:#d99a66; --skin-shadow:#b9774b; }
.avatar-skin-medium { --skin:#a56a43; --skin-shadow:#825033; }
.avatar-skin-deep { --skin:#6f452d; --skin-shadow:#56331f; }
.avatar-hair-black { --hair:#1f1a17; }.avatar-hair-brown { --hair:#5c3b2e; }.avatar-hair-auburn { --hair:#7b3f22; }
.avatar-eye-dark { --eye:#171717; }.avatar-eye-brown { --eye:#6b3f2a; }.avatar-eye-hazel { --eye:#8a6f32; }
.avatar-accent-teal { --uniform:#0f766e; --uniform-dark:#075985; }
.avatar-accent-navy { --uniform:#164e63; --uniform-dark:#0f2f49; }
.avatar-accent-aqua { --uniform:#0e9f9a; --uniform-dark:#0f6f78; }
.avatar-accent-gold { --uniform:#b7791f; --uniform-dark:#7c5b16; }
.avatar-shoes-black { --shoe:#1f2937; }.avatar-shoes-brown { --shoe:#5c3b2e; }.avatar-shoes-white { --shoe:#f8fafc; }
.eye-dark { background:#171717; }.eye-brown { background:#6b3f2a; }.eye-hazel { background:#8a6f32; }
.shoe-black { background:#1f2937; }.shoe-brown { background:#5c3b2e; }.shoe-white { background:#f8fafc; }
.accent-navy { background:#164e63; }.accent-aqua { background:#0e9f9a; }

.avatar-mini .avatar-floor,.avatar-mini .avatar-bottom,.avatar-mini .avatar-leg,.avatar-mini .avatar-shoe { display:none; }
.avatar-mini .avatar-head { top:13%; left:31%; width:38%; height:38%; }
.avatar-mini .avatar-backhair { top:5%; left:25%; width:50%; height:48%; }
.avatar-mini .avatar-fringe { top:7%; left:27%; width:46%; height:22%; }
.avatar-mini .avatar-eye { top:28%; width:5%; height:4%; }.avatar-mini .avatar-eye-left{left:39%;}.avatar-mini .avatar-eye-right{right:39%;}
.avatar-mini .avatar-eyebrow{top:25%;}.avatar-mini .avatar-nose{top:31%;}.avatar-mini .avatar-mouth{top:39%;}
.avatar-mini .avatar-neck{top:47%;}.avatar-mini .avatar-body{top:52%;left:19%;width:62%;height:48%;}.avatar-mini .avatar-shirt{top:52%;}.avatar-mini .avatar-collar{top:52%;}.avatar-mini .avatar-jacket{top:54%;left:19%;width:62%;height:46%;}
.avatar-mini .avatar-arm,.avatar-mini .avatar-hand,.avatar-mini .avatar-ear { display:none; }

.avatar-mood-wave .avatar-arm-right { animation:avatar-wave 1.2s ease-in-out infinite; right:18%; top:40%; }
.avatar-mood-wave .avatar-hand-right { right:13%; top:49%; animation:avatar-hand-wave 1.2s ease-in-out infinite; }
.avatar-mood-bounce { animation:avatar-bounce 1.5s ease-in-out infinite; }
.avatar-mood-think .avatar-arm-right { transform:rotate(-58deg); right:26%; top:40%; }
.avatar-mood-celebrate .avatar-arm-left { transform:rotate(145deg); left:25%; top:38%; }.avatar-mood-celebrate .avatar-arm-right { transform:rotate(-145deg); right:25%; top:38%; }
@keyframes avatar-wave { 0%,100%{transform:rotate(-25deg)} 50%{transform:rotate(-70deg)} }
@keyframes avatar-hand-wave { 0%,100%{transform:translate(0,0)} 50%{transform:translate(3px,-4px)} }
@keyframes avatar-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.classroom-profile-shell { width:min(1380px,calc(100% - 24px)); grid-template-columns:minmax(230px,300px) minmax(0,1fr); align-items:stretch; margin:20px auto; overflow:visible; }
.classroom-profile-shell .access-form { padding:clamp(24px,3vw,44px); min-width:0; }
.avatar-studio { grid-template-columns:minmax(250px,320px) minmax(0,1fr); align-items:start; gap:22px; max-width:100%; }
.avatar-studio-preview { position:sticky; top:100px; min-width:0; }
.avatar-preview-stage { min-height:420px; padding:18px; overflow:hidden; }
.avatar-preview-message { position:absolute; right:14px; top:18px; max-width:170px; padding:11px 13px; border-radius:14px 14px 14px 4px; background:white; border:1px solid #d9e7ec; box-shadow:0 10px 24px rgba(15,43,73,.12); display:grid; gap:3px; color:var(--navy); }
.avatar-preview-message span { font-size:11px; color:var(--muted); }
.avatar-preview-summary { margin-top:12px; padding:9px 12px; border-radius:12px; background:#edf8f7; color:#0f766e; font-size:12px; font-weight:800; text-align:center; }
.avatar-builder-panel { min-width:0; }
.avatar-builder-tabs { position:sticky; top:86px; z-index:10; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:7px; border:1px solid #dbe8ee; border-radius:16px; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
.avatar-builder-tabs button { min-height:42px; border:0; border-radius:11px; background:transparent; color:#64748b; font-weight:900; cursor:pointer; }
.avatar-builder-tabs button.active { background:#e8f7f5; color:#0f766e; box-shadow:inset 0 0 0 1px #b7ded9; }
.avatar-builder-section { display:none; gap:16px; margin-top:16px; }.avatar-builder-section.active { display:grid; }
.avatar-option-grid { display:grid; grid-template-columns:repeat(3,minmax(100px,1fr)); gap:10px; }.avatar-option-grid.compact { grid-template-columns:repeat(4,minmax(90px,1fr)); }
.character-option { min-height:145px; }.character-option .avatar-choice { margin:auto; }
.option-chip-grid { display:flex; flex-wrap:wrap; gap:9px; }
.text-option { position:relative; cursor:pointer; }.text-option input { position:absolute; opacity:0; }.text-option span { display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:0 15px; border:2px solid #dce8e6; border-radius:999px; background:white; color:#334155; font-weight:800; }.text-option:has(input:checked) span { border-color:#0f766e; background:#edf9f7; color:#0f766e; box-shadow:0 0 0 3px rgba(15,118,110,.1); }
.swatch-grid.small { grid-template-columns:repeat(3,minmax(85px,1fr)); }
.avatar-ready-card { display:flex; align-items:center; gap:14px; padding:18px; border-radius:18px; background:linear-gradient(135deg,#edf9f7,#eef6fb); border:1px solid #cde3e5; }.avatar-ready-card>span{font-size:30px}.avatar-ready-card p{margin:3px 0 0;color:#64748b}
.avatar-dialog { width:min(1180px,calc(100% - 24px)); max-height:92vh; overflow:auto; border-radius:24px; }
.avatar-dialog form { min-width:0; }
.avatar-dialog .avatar-studio-preview { top:0; }
.avatar-dialog .avatar-builder-tabs { top:0; }
.guide-chip-avatar .avatar-guide-mini { margin-right:2px; }

@media(max-width:1050px){
 .classroom-profile-shell{grid-template-columns:1fr}.classroom-profile-shell .access-visual{min-height:220px}.avatar-studio{grid-template-columns:1fr}.avatar-studio-preview{position:relative;top:auto}.avatar-preview-stage{min-height:360px}.avatar-builder-tabs{top:72px}.avatar-option-grid.compact{grid-template-columns:repeat(2,minmax(100px,1fr))}
}
@media(max-width:680px){
 .classroom-profile-shell{width:100%;margin:0;border-radius:0}.classroom-profile-shell .access-form{padding:20px 14px}.avatar-preview-stage{min-height:330px}.avatar-full,.avatar-preview{width:190px;height:285px}.avatar-preview-message{position:relative;right:auto;top:auto;max-width:none;margin-top:8px}.avatar-builder-tabs{grid-template-columns:repeat(2,1fr);position:relative;top:auto}.avatar-option-grid,.avatar-option-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch-grid,.swatch-grid.small{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-dialog{width:100%;height:100%;max-height:100vh;border-radius:0}.avatar-dialog form{padding:18px 12px}.dialog-head{position:sticky;top:0;z-index:20;background:white;padding:8px 0}
}

/* =========================================================
   V6.8 Guided lesson journey, required hotspots and avatar companion
   Palette preserved: white, pale blue, teal, aqua and navy.
   ========================================================= */
.lesson-workbench { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; min-width:0; }
.lesson-workspace { display:grid; gap:16px; min-width:0; }
.lesson-navigation-rail { position:sticky; top:172px; z-index:11; display:grid; gap:14px; max-height:calc(100vh - 190px); padding:13px; border:1px solid #dbe5ed; border-radius:20px; background:#fff; box-shadow:0 14px 36px rgba(15,43,73,.08); overflow:auto; }
.lesson-rail-toggle { display:none; width:40px; height:40px; border:1px solid #dbe5ed; border-radius:12px; color:#0f766e; background:#f3fbfa; font-size:20px; cursor:pointer; }
.lesson-rail-guide { position:relative; display:grid; justify-items:center; gap:8px; padding:13px 10px; border-radius:16px; background:linear-gradient(155deg,#edf9f7,#edf6fb); text-align:center; }
.lesson-rail-guide>div{display:grid;gap:3px}.lesson-rail-guide>div small,.lesson-rail-current>small,.lesson-rail-sections>small{color:#0f766e;font-size:9px;font-weight:900;letter-spacing:.12em}.lesson-rail-guide strong{color:var(--navy);font-size:12px}.lesson-rail-guide p{margin:0;color:#64748b;font-size:10px;line-height:1.4}.lesson-rail-guide>button{display:none;position:absolute;right:7px;top:7px;width:30px;height:30px;border:0;border-radius:50%;background:#e8f1f5;color:#31506a;font-size:20px;cursor:pointer}
.lesson-rail-current,.lesson-rail-sections{display:grid;gap:7px}.lesson-rail-current>button,.lesson-rail-section{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;width:100%;min-height:52px;padding:8px;border:1px solid #e1eaf0;border-radius:13px;background:#f9fbfd;text-align:left;cursor:pointer}.lesson-rail-current button i,.lesson-rail-section i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#e6eef4;color:#64748b;font-style:normal;font-size:10px;font-weight:900}.lesson-rail-current button span,.lesson-rail-section span{display:grid;min-width:0}.lesson-rail-current button strong,.lesson-rail-section strong{overflow:hidden;color:#31506a;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.lesson-rail-current button small,.lesson-rail-section small{color:#8796a6;font-size:8px}.lesson-rail-current button.active,.lesson-rail-section.current{border-color:#a9dcd7;background:#edfaf8}.lesson-rail-current button.active i,.lesson-rail-section.current i{color:#fff;background:linear-gradient(135deg,var(--teal-dark),var(--teal))}.lesson-rail-current button.done,.lesson-rail-section.done{border-color:#b8e5d1;background:#effcf6}.lesson-rail-current button.done i,.lesson-rail-section.done i{color:#fff;background:#22a66f}.lesson-rail-current button.locked,.lesson-rail-section.locked{opacity:.58;cursor:not-allowed}.lesson-rail-sections{max-height:300px;overflow:auto;padding-right:2px}
.lesson-view-tabs button.locked,.is-locked{opacity:.62;cursor:pointer}.lesson-view-tabs button.locked:hover,.is-locked:hover{transform:none;box-shadow:none}
.lesson-view-tabs button.done{border-color:#b9e6d2;background:#effcf6}.lesson-view-tabs button.done>span{color:#fff;background:#22a66f}.lesson-view-tabs button.done strong{color:#166534}
.visual-hotspot.visited{background:linear-gradient(145deg,#15803d,#22a66f);box-shadow:0 0 0 6px rgba(34,166,111,.14),0 10px 25px rgba(21,128,61,.25)}
.visual-vocabulary button.visited{border-color:#a8dcc5;color:#166534;background:#effcf6}.visual-hotspot-caption.has-content{background:linear-gradient(90deg,#f2fcf8,#fff)}
.hotspot-completion-bar{display:grid;grid-template-columns:minmax(200px,1fr) minmax(180px,.6fr);gap:16px;align-items:center;padding:13px 15px;border:1px solid #dbe5ed;border-radius:15px;background:#f8fbfd}.hotspot-completion-bar>div:first-child{display:grid;gap:2px}.hotspot-completion-bar strong{color:var(--navy);font-size:12px}.hotspot-completion-bar span{color:#64748b;font-size:10px}.hotspot-completion-bar>div:last-child{height:9px;border-radius:999px;background:#dfeaf0;overflow:hidden}.hotspot-completion-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal-dark),var(--cyan));transition:width .25s ease}
.visual-mission-chip .avatar-guide-mini{box-shadow:none}.guided-explanation-hero>.avatar-guide{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);box-shadow:none}.guide-speech{margin-top:9px;padding:9px 12px;border-left:3px solid #5eead4;border-radius:0 10px 10px 0;background:rgba(255,255,255,.1);color:#e6fffb;font-size:12px;font-weight:700}.apply-section-heading>.avatar-guide-mini{margin-right:4px}.practice-question>.avatar-guide{flex:0 0 auto}
.lesson-companion-welcome{display:flex;align-items:center;gap:14px;margin:13px 0 17px;padding:14px 16px;border:1px solid #cce7e4;border-radius:18px;background:linear-gradient(135deg,#eefbf8,#eef6fb)}.lesson-companion-welcome>div{display:grid;gap:4px}.lesson-companion-welcome strong{color:var(--navy);font-size:15px}.lesson-companion-welcome p{margin:0;color:#526579;line-height:1.45}.lesson-companion-welcome button{justify-self:start;margin-top:4px}

.companion-dialog,.hotspot-info-dialog{width:min(850px,calc(100% - 24px));max-height:92vh;padding:0;border:0;border-radius:25px;background:transparent;box-shadow:0 32px 90px rgba(15,43,73,.28);overflow:visible}.companion-dialog::backdrop,.hotspot-info-dialog::backdrop{background:rgba(8,35,55,.66);backdrop-filter:blur(6px)}.companion-dialog-card{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:center;padding:24px;border-radius:25px;background:linear-gradient(145deg,#f4fbff,#edf9f7);border:1px solid rgba(255,255,255,.8);overflow:hidden}.companion-dialog-card>[data-companion-avatar]{display:grid;place-items:center;min-height:350px;border-radius:22px;background:radial-gradient(circle,#fff,#dfeff2)}.companion-dialog-copy{display:grid;gap:9px}.companion-dialog-copy h2{margin:0;color:var(--navy);font-size:clamp(25px,4vw,40px)}.companion-dialog-copy p{margin:0;color:#425970;font-size:16px;line-height:1.65}.companion-dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.companion-close,.hotspot-modal-close{position:absolute;right:13px;top:13px;z-index:4;width:38px;height:38px;border:0;border-radius:50%;background:#e8f0f4;color:#31506a;font-size:24px;cursor:pointer}
.hotspot-modal-card{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;align-items:center;padding:24px;border-radius:25px;background:#fff;border:1px solid #dbe5ed;overflow:auto;max-height:92vh}.hotspot-modal-guide{display:grid;place-items:center;min-height:290px;border-radius:20px;background:linear-gradient(160deg,#edf9f7,#edf6fb)}.hotspot-modal-copy{display:grid;gap:8px;min-width:0}.hotspot-modal-number{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--teal-dark),var(--teal));font-size:15px;font-weight:900}.hotspot-modal-copy h2{margin:0;color:var(--navy);font-size:clamp(26px,4vw,42px);line-height:1.05}.hotspot-modal-lead{margin:0;color:#425970;font-size:16px;line-height:1.65}.hotspot-modal-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:7px}.hotspot-modal-details section{padding:14px;border:1px solid #dbe5ed;border-radius:15px;background:#f8fbfd}.hotspot-modal-details strong{color:#0f766e}.hotspot-modal-details p{margin:5px 0 0;color:#526579;font-size:12px;line-height:1.5}.hotspot-modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:7px}
.understanding-avatar,.knowledge-avatar{width:auto;height:auto;background:transparent}.knowledge-avatar .avatar-guide,.understanding-avatar .avatar-guide{box-shadow:none}.full-results>.avatar-guide{margin:0 auto -25px}

/* Clean UI and accessibility audit fixes */
button:focus-visible,a:focus-visible,input:focus-visible,[role="button"]:focus-visible{outline:3px solid rgba(14,159,154,.38);outline-offset:3px}.mission-app,.lesson-workspace,.lesson-view-panel,.visual-stage-canvas{min-width:0}.lesson-view-panel img,.mission-app img{max-width:100%;height:auto}.visual-section-actions button,.visual-tab-actions button,.visual-lesson-navigation button{white-space:normal}.mission-sidebar{overflow:auto}.avatar-dialog button,.companion-dialog button,.hotspot-info-dialog button{font-family:inherit}

@media(max-width:1180px){.lesson-workbench{grid-template-columns:1fr}.lesson-rail-toggle{display:grid;place-items:center}.lesson-navigation-rail{position:fixed;left:12px;top:92px;bottom:12px;width:min(320px,calc(100vw - 24px));max-height:none;z-index:60;transform:translateX(calc(-100% - 24px));transition:transform .24s ease}.lesson-navigation-rail.open{transform:none}.lesson-rail-guide>button{display:grid;place-items:center}.lesson-rail-sections{max-height:none}.visual-lesson-toolbar{top:82px}}
@media(max-width:760px){.hotspot-completion-bar{grid-template-columns:1fr}.companion-dialog,.hotspot-info-dialog{width:100%;height:100%;max-height:100vh;border-radius:0}.companion-dialog-card,.hotspot-modal-card{grid-template-columns:1fr;height:100%;max-height:100vh;border-radius:0;padding:18px 14px;overflow:auto}.companion-dialog-card>[data-companion-avatar]{min-height:260px}.hotspot-modal-guide{min-height:220px}.hotspot-modal-details{grid-template-columns:1fr}.companion-dialog-actions,.hotspot-modal-actions{display:grid;grid-template-columns:1fr}.companion-dialog-actions button,.hotspot-modal-actions button{width:100%}.lesson-companion-welcome{align-items:flex-start}.lesson-companion-welcome .avatar-guide{width:80px;height:120px}.visual-lesson-heading{display:grid}.visual-mission-chip{width:100%}.guided-explanation-hero>.avatar-guide{width:90px;height:135px}.visual-lesson-toolbar{top:auto}.lesson-navigation-rail{top:12px}}

/* V6.8 mobile audit: keep lesson content close to the top */
@media(max-width:760px){
 .mission-shell{display:block;border-radius:20px;overflow:hidden}
 .mission-sidebar{min-height:0;padding:18px 20px 16px;display:block;overflow:hidden}
 .mission-sidebar .back-link{display:inline-flex;margin-bottom:14px}
 .mission-sidebar .mission-number{margin:0 0 10px;font-size:10px}
 .mission-sidebar .mission-icon-large{width:54px;height:54px;margin:0 0 10px;border-radius:16px;font-size:27px}
 .mission-sidebar h1{margin:7px 0 5px;font-size:29px;line-height:1.04}
 .mission-sidebar>p,.mission-sidebar .mission-objective,.mission-sidebar .sidebar-lesson-flow,.mission-sidebar .mission-progress,.mission-sidebar .mission-score{display:none}
 .stage-toolbar{min-height:72px;padding:11px 14px}
 .guide-chip>div strong{font-size:13px}.guide-chip>div small{font-size:11px;line-height:1.35}
 .mission-journey{display:grid}
 .mission-app{padding:12px 10px 24px}
}

/* V6.8 avatar-page colour and viewport audit */
.classroom-profile-shell .access-visual{padding:32px;background:linear-gradient(155deg,var(--navy),#0b4e67 68%,var(--teal-dark));color:#fff}
.classroom-profile-shell .access-visual h1{max-width:240px;margin:16px 0 14px;font-size:clamp(34px,4vw,48px);line-height:1.04;word-break:normal}
.classroom-profile-shell .access-visual p{max-width:240px;color:#d9f9f6;font-size:16px;line-height:1.55}
.avatar-preview-stage{position:relative}
@media(max-width:680px){
 .classroom-profile-shell .access-visual{min-height:0;padding:20px 22px}
 .classroom-profile-shell .access-visual>span:first-child{font-size:34px}
 .classroom-profile-shell .access-visual h1{max-width:none;margin:8px 0;font-size:28px}
 .classroom-profile-shell .access-visual p{max-width:none;margin:0;font-size:13px}
 .classroom-profile-shell .profile-steps{margin-top:12px;gap:6px}
 .classroom-profile-shell .profile-steps span{padding:6px 9px;font-size:11px}
}

/* V6.9 topic-specific teaching hotspots */
.hotspot-info-dialog{width:min(1040px,calc(100% - 28px))}
.hotspot-modal-card{grid-template-columns:210px minmax(0,1fr);align-items:start}
.hotspot-modal-guide{position:sticky;top:0;min-height:360px}
.hotspot-modal-copy{gap:11px;padding-right:5px}
.hotspot-primary-teaching,.hotspot-task-connection{padding:15px 17px;border:1px solid #cfe4e5;border-radius:17px;background:linear-gradient(145deg,#f4fbff,#edf9f7)}
.hotspot-primary-teaching strong,.hotspot-task-connection strong{display:block;color:var(--teal-dark);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.hotspot-primary-teaching p,.hotspot-task-connection p{margin:7px 0 0;color:#334e63;font-size:14px;line-height:1.62}
.hotspot-task-connection{border-left:5px solid var(--teal);background:#f0fbfa}
.hotspot-modal-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hotspot-modal-details section{min-height:135px;padding:15px 16px;background:#fff;border-color:#dbe7ee;box-shadow:0 8px 22px rgba(15,43,73,.05)}
.hotspot-modal-details strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.hotspot-modal-details p{font-size:13px;line-height:1.58;color:#425970}
.hotspot-modal-actions{position:sticky;bottom:-24px;padding:13px 0 2px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 24%)}
@media(max-width:760px){.hotspot-modal-card{grid-template-columns:1fr}.hotspot-modal-guide{position:relative;min-height:235px}.hotspot-modal-details{grid-template-columns:1fr}.hotspot-modal-details section{min-height:0}.hotspot-modal-copy h2{font-size:30px}.hotspot-primary-teaching p,.hotspot-task-connection p,.hotspot-modal-details p{font-size:14px}}

/* =========================================================
   V7.0: accurate Level 2 Microsoft Office 2016 workspaces
   Hotspots are attached to the actual tab, group, pane or object.
   Existing WLI colours remain unchanged.
   ========================================================= */
.office2016-visual.office-accurate {
    position: relative;
    min-height: 520px;
    border: 1px solid #b9c9d4;
    border-radius: 14px;
    overflow: hidden;
    background: #eef3f6;
    box-shadow: 0 18px 42px rgba(15,43,73,.14);
    font-family: "Segoe UI", Arial, sans-serif;
    color: #203040;
}
.office2016-visual.office-accurate .office-titlebar {
    min-height: 34px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border-radius: 0;
    color: #fff;
    font-size: 12px;
}
.word-titlebar { background: #2b579a; }
.excel-titlebar { background: #217346; }
.ppt-titlebar { background: #d24726; }
.office-app-mark {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.12);
    font-weight: 900;
}
.office-accurate-tabs {
    display: flex;
    align-items: stretch;
    min-height: 38px;
    padding: 0 7px;
    background: #fff;
    border-bottom: 1px solid #cfd8df;
    overflow-x: auto;
}
.office-tab-control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0 12px;
    color: #243646;
    white-space: nowrap;
    font-size: 12px;
}
.office-tab-control.active {
    color: #0f5e83;
    font-weight: 800;
    box-shadow: inset 0 -3px 0 #0e9f9a;
    background: #f6fbfc;
}
.office-tab-control.file {
    min-width: 58px;
    color: white;
    background: #0f766e;
}
.office-accurate-ribbon {
    min-height: 88px;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 7px 8px;
    overflow-x: auto;
    background: #fbfcfd;
    border-bottom: 1px solid #bfcbd3;
}
.ribbon-group {
    position: relative;
    min-width: 125px;
    padding: 8px 13px 19px;
    border-right: 1px solid #d8e0e6;
    text-align: center;
    line-height: 1.35;
}
.ribbon-group b { display: block; min-height: 34px; font-size: 11px; font-weight: 600; }
.ribbon-group small {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    color: #607181;
    font-size: 9px;
}
.target-control { position: relative !important; }
.office-feature-hotspot {
    position: absolute;
    z-index: 30;
    width: 34px;
    height: 34px;
    right: -8px;
    top: -9px;
    display: grid;
    place-items: center;
    border: 3px solid white;
    border-radius: 50%;
    background: linear-gradient(145deg,#0f766e,#21b7b1);
    color: white;
    box-shadow: 0 0 0 6px rgba(52,214,206,.22), 0 8px 20px rgba(15,118,110,.28);
    cursor: pointer;
    animation: office-hotspot-pulse 1.8s ease-in-out infinite;
}
.office-feature-hotspot span { font-size: 12px; font-weight: 900; }
.office-feature-hotspot small {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    width: max-content;
    max-width: 150px;
    transform: translateX(-50%);
    padding: 4px 7px;
    border-radius: 7px;
    background: #0f2b49;
    color: white;
    font-size: 9px;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.office-feature-hotspot:hover small,
.office-feature-hotspot:focus-visible small { opacity: 1; }
.office-feature-hotspot.visited {
    background: linear-gradient(145deg,#15803d,#22a66f);
    animation: none;
}
@keyframes office-hotspot-pulse {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 5px rgba(52,214,206,.17),0 8px 20px rgba(15,118,110,.24); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(52,214,206,.08),0 10px 24px rgba(15,118,110,.31); }
}
.office-tab-control .office-feature-hotspot {
    right: -2px;
    top: -7px;
    width: 29px;
    height: 29px;
}
.ribbon-group .office-feature-hotspot { right: 4px; top: 4px; }
.office-backstage {
    display: grid;
    grid-template-columns: 165px 1fr;
    min-height: 415px;
    background: #fff;
}
.office-backstage > aside {
    padding: 10px 0;
    color: #fff;
    background: #0f766e;
}
.backstage-command {
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 12px;
}
.backstage-command.target { background: rgba(255,255,255,.16); font-weight: 800; }
.backstage-command .office-feature-hotspot { right: 7px; top: 5px; }
.backstage-main { padding: 28px; }
.backstage-main header h4 { margin: 0; color: #243646; font-size: 27px; }
.backstage-main header p { color: #64748b; }
.backstage-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 22px; }
.backstage-cards article { display: grid; gap: 6px; padding: 18px; border: 1px solid #d6e0e6; background: #f8fbfc; }
.backstage-cards article > span { font-size: 28px; }
.backstage-cards small { color: #64748b; line-height: 1.5; }
.backstage-file-fields { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px; background: #eef6f7; }
.backstage-file-fields label { flex: 1; display: grid; gap: 3px; font-size: 10px; color: #607181; }
.backstage-file-fields strong { color: #18334a; font-size: 13px; }
.backstage-file-fields button { min-height: 38px; padding: 0 16px; border: 0; color: white; background: #0f766e; }
.word-accurate-workspace {
    min-height: 335px;
    padding: 30px 32px 22px;
    overflow: auto;
    background: #dce2e7;
}
.word-horizontal-ruler {
    width: min(720px,100%);
    height: 26px;
    margin: 0 auto 6px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #aebbc5;
    background: repeating-linear-gradient(90deg,#fff 0 19px,#dce4e8 19px 20px);
    font-size: 9px;
}
.word-page {
    width: min(690px,88%);
    min-height: 285px;
    margin: auto;
    padding: 34px 50px;
    background: white;
    box-shadow: 0 3px 12px rgba(15,43,73,.18);
}
.word-page h4 { margin: 0 0 18px; color: #243646; font-size: 25px; }
.word-page h5 { margin: 22px 0 8px; color: #2b579a; font-size: 17px; }
.word-page p { color: #374957; line-height: 1.65; font-size: 12px; }
.word-table-object { width: 100%; margin-top: 18px; border-collapse: collapse; }
.word-table-object th,.word-table-object td { padding: 8px; border: 1px solid #7890a1; font-size: 10px; }
.word-selected-object {
    width: 165px;
    height: 70px;
    margin: 18px auto 0;
    display: grid;
    place-items: center;
    border: 2px solid #2b579a;
    color: #2b579a;
    background: #eef5ff;
}
.word-selected-object i::before,
.word-selected-object i::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid #2b579a; background: white; }
.excel-name-formula-row {
    min-height: 38px;
    display: grid;
    grid-template-columns: 90px 36px minmax(220px,1fr);
    align-items: stretch;
    background: white;
    border-bottom: 1px solid #bfcbd3;
}
.excel-name-box,.excel-formula-bar,.excel-fx { display: flex; align-items: center; padding: 0 9px; border-right: 1px solid #cdd7de; font-size: 11px; }
.excel-fx { justify-content: center; font-style: italic; }
.excel-workspace-wrap { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 335px; overflow: auto; background: #fff; }
.excel-grid-accurate {
    position: relative;
    min-width: 650px;
    display: grid;
    grid-template-columns: 42px repeat(6,minmax(92px,1fr));
    grid-auto-rows: 42px;
}
.excel-grid-accurate > b,.excel-grid-accurate > span,.excel-grid-accurate > .corner {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border-right: 1px solid #d4dde3;
    border-bottom: 1px solid #d4dde3;
    font-size: 10px;
}
.excel-grid-accurate > b,.excel-grid-accurate > .corner { justify-content: center; background: #edf1f3; }
.excel-grid-accurate .active-cell { box-shadow: inset 0 0 0 3px #217346; }
.excel-grid-accurate .active-cell::after { content:""; position:absolute; width:7px; height:7px; right:-3px; bottom:-3px; background:#217346; }
.excel-grid-accurate .formula-result { background:#e9f6ef; font-weight:800; }
.excel-chart { position: relative; width: 210px; margin: 24px; padding: 15px; border: 1px solid #bdcbd3; background: white; }
.excel-chart > div { height: 150px; display: flex; align-items: end; justify-content: space-around; border-left: 1px solid #738594; border-bottom: 1px solid #738594; }
.excel-chart i { width: 32px; background: #0e9f9a; }
.excel-sheet-tabs { display: flex; gap: 1px; min-height: 35px; align-items: stretch; padding-left: 44px; background: #eef2f4; }
.excel-sheet-tabs > div { position: relative; min-width: 90px; display: grid; place-items: center; background: #e1e8ec; font-size: 10px; }
.excel-sheet-tabs .active { background: white; border-bottom: 3px solid #217346; }
.ppt-accurate-workspace { min-height: 320px; display: grid; grid-template-columns: 150px minmax(0,1fr) auto; background: #d9dee3; }
.ppt-slides-pane { padding: 12px; overflow: auto; border-right: 1px solid #b7c1c9; background: #f5f7f8; }
.ppt-thumb { display: grid; grid-template-columns: 18px 1fr; gap: 6px; margin-bottom: 10px; font-size: 9px; }
.ppt-thumb i { min-height: 70px; display: grid; align-content: center; padding: 8px; border: 1px solid #aab8c2; background: white; font-style: normal; }
.ppt-thumb.active i { border: 3px solid #d24726; }
.ppt-slide-canvas { display: grid; place-items: center; padding: 28px; }
.ppt-slide-design { position: relative; width: min(620px,92%); aspect-ratio: 16/9; overflow: hidden; padding: 55px; color: white; background: linear-gradient(145deg,#0f2b49,#0f766e); box-shadow: 0 8px 22px rgba(15,43,73,.24); }
.ppt-title-placeholder { position: relative; width: 75%; padding: 12px; border: 1px dashed rgba(255,255,255,.65); font-size: 28px; font-weight: 800; }
.ppt-subtitle { width: 65%; margin-top: 15px; padding: 8px; border: 1px dashed rgba(255,255,255,.42); }
.ppt-geometric-shape { position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; transform: rotate(28deg); background: rgba(52,214,206,.35); }
.ppt-selected-object { position: absolute; right: 50px; bottom: 45px; width: 160px; height: 88px; display: grid; place-items: center; border: 3px solid white; background: rgba(255,255,255,.18); }
.ppt-animation-pane { display: none; width: 190px; padding: 14px; border-left: 1px solid #b7c1c9; background: white; }
.ppt-animation-pane.visible { display: grid; align-content: start; gap: 8px; }
.ppt-animation-pane span { padding: 8px; background: #f2f5f7; font-size: 10px; }
.ppt-notes-pane { position: relative; min-height: 45px; display: flex; align-items: center; padding: 0 16px; border-top: 1px solid #bac5cd; background: white; color: #7a8791; font-size: 10px; }
.office2016-visual .office-status { min-height: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 12px; border-top: 1px solid #b9c4cc; background: #f5f7f8; color: #586b7a; font-size: 9px; }

/* Keep the full avatar and face unobstructed. */
.avatar-preview-stage {
    position: relative;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: visible;
}
.avatar-preview-message {
    position: static !important;
    width: min(100%,260px);
    max-width: none;
    margin: 0 auto;
    text-align: center;
}
.avatar-full,.avatar-preview { width: 230px; height: 345px; overflow: visible; }
.avatar-backhair { z-index: 1; }
.avatar-head { z-index: 6; }
.avatar-fringe {
    top: 7.5%;
    height: 7.5%;
    z-index: 7;
    clip-path: ellipse(50% 55% at 50% 0%);
}
.avatar-style-afro .avatar-fringe,
.avatar-style-curly .avatar-fringe {
    top: 7%;
    height: 6%;
    clip-path: ellipse(50% 48% at 50% 0%);
}
.avatar-eye,.avatar-eyebrow,.avatar-nose,.avatar-mouth { z-index: 12; }
.avatar-accessory-headband .avatar-headband { top: 8.5%; z-index: 9; }
.avatar-accessory-bow .avatar-bow { z-index: 9; }
.avatar-accessory-glasses .avatar-glasses { z-index: 13; }

@media(max-width:900px){
    .office2016-visual.office-accurate { min-height: 460px; }
    .backstage-cards { grid-template-columns: 1fr; }
    .office-backstage { grid-template-columns: 125px minmax(0,1fr); }
    .ppt-accurate-workspace { grid-template-columns: 105px minmax(430px,1fr); overflow:auto; }
    .ppt-animation-pane { display:none !important; }
    .office-feature-hotspot small { display:none; }
}
@media(max-width:620px){
    .office2016-visual.office-accurate { border-radius: 10px; }
    .office-accurate-tabs { min-height: 42px; }
    .office-tab-control { min-width: 58px; padding:0 8px; }
    .office-accurate-ribbon { min-width: 650px; }
    .office-backstage { min-width: 680px; }
    .word-accurate-workspace { min-width: 720px; }
    .ppt-accurate-workspace { min-width: 760px; }
    .excel-name-formula-row,.excel-workspace-wrap,.excel-sheet-tabs { min-width: 700px; }
    .office2016-visual.office-accurate { overflow:auto; }
    .avatar-preview-stage { min-height: 410px; }
    .avatar-full,.avatar-preview { width: 205px; height: 310px; }
}

.hotspot-word-breakdown {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid #c9e3e0;
    border-radius: 14px;
    background: linear-gradient(135deg,#eefaf8,#f5fbff);
}
.hotspot-word-breakdown strong { display:block; margin-bottom:5px; color:#0f766e; }
.hotspot-word-breakdown p { margin:0; color:#334b5d; line-height:1.55; }
.office-accurate-ribbon { position: relative; }
.office-feature-hotspot[data-office-anchor="fill-handle"] { right:-18px; top:auto; bottom:-18px; }
.office-feature-hotspot[data-office-anchor="formula-operators"] { right:-18px; top:-16px; }
.office-feature-hotspot[data-office-anchor="formula-bar"] { right:5px; top:2px; }
.office-feature-hotspot[data-office-anchor="document-page"],
.office-feature-hotspot[data-office-anchor="slide-canvas"],
.office-feature-hotspot[data-office-anchor="worksheet-grid"] { right:10px; top:10px; }
.office-feature-hotspot[data-office-anchor="table-range"],
.office-feature-hotspot[data-office-anchor="source-data"] { left:12px; right:auto; top:55px; }
.office-feature-hotspot[data-office-anchor="row-column-headings"] { right:-13px; top:-13px; }
.office-feature-hotspot[data-office-anchor="slides-pane"] { right:7px; top:7px; }
.office-feature-hotspot[data-office-anchor="notes-pane"] { right:10px; top:5px; }
.office-feature-hotspot[data-office-anchor="selected-object"],
.office-feature-hotspot[data-office-anchor="table-object"],
.office-feature-hotspot[data-office-anchor="chart-object"] { right:-13px; top:-13px; }
.formula-operator-token { display:inline-flex; align-items:center; justify-content:center; min-width:24px; margin:0 3px; color:#217346; }
.office-vocabulary-chip {
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 11px;
    border:1px solid #d7e4e8;
    border-radius:999px;
    color:#425b6d;
    background:#f8fbfc;
    font-size:11px;
    font-weight:800;
}
.office-vocabulary-chip.visited { border-color:#a8dcc5; color:#166534; background:#effcf6; }


/* V7.1 varied interactive learning engine */
.visual-safe-fallback { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; min-height:280px; padding:24px; border:1px solid #bae6e3; border-radius:24px; background:linear-gradient(145deg,#ffffff,#effcfc); }
.visual-safe-fallback .fallback-icon { width:76px; height:76px; display:grid; place-items:center; border-radius:22px; background:#dff7f5; font-size:38px; }
.visual-safe-fallback .system-map-visual { grid-column:1/-1; }
.lesson-teaching-deck { display:grid; gap:18px; margin-top:20px; }
.fun-activity { overflow:hidden; }
.fun-activity-heading { display:flex; gap:16px; align-items:flex-start; margin:18px 0; padding:18px; border:1px solid #d9e7ef; border-radius:18px; background:linear-gradient(135deg,#f8fdff,#eefaf9); }
.fun-activity-heading > span { width:52px; height:52px; display:grid; place-items:center; flex:0 0 auto; border-radius:16px; background:#dff7f5; font-size:28px; }
.fun-activity-heading h3 { margin:0 0 5px; color:var(--navy); }
.fun-activity-heading p { margin:0; color:var(--muted); }
.matching-board { display:grid; grid-template-columns:1fr; gap:16px; }
.matching-bank { display:grid; gap:10px; padding:14px; border:1px solid #d6e3ea; border-radius:18px; background:#f8fbfc; }
.matching-bank > header { display:flex; align-items:center; gap:10px; }
.matching-bank > header > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:#fff; font-weight:900; }
.matching-bank > header strong,.matching-bank > header small { display:block; }
.matching-bank > header small { margin-top:2px; color:#64748b; }
.match-terms,.match-definitions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start; }
.match-term,.match-definition { width:100%; min-height:58px; border:1px solid #cbdde7; border-radius:15px; background:white; color:var(--navy); text-align:left; padding:12px 14px; cursor:pointer; transition:.2s ease; }
.match-term { font-weight:900; background:#effaf9; border-color:#a7dfda; }
.match-term.selected,.match-definition.drag-over { outline:3px solid rgba(20,184,166,.2); border-color:var(--teal); transform:translateY(-1px); }
.match-term.matched,.match-definition.matched { border-color:#22c55e; background:#f0fdf4; opacity:.82; }
.match-definition { display:flex; gap:10px; align-items:flex-start; }
.match-definition span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#e8f4f7; font-weight:900; }
.match-definition p { margin:0; }
.order-board { display:grid; gap:10px; }
.order-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; min-height:60px; padding:10px 12px; border:1px solid #cadde6; border-radius:15px; background:white; box-shadow:0 7px 18px rgba(15,43,73,.05); }
.order-item.dragging { opacity:.55; border-color:var(--teal); }
.order-item p { margin:0; }
.order-grip { color:#7a94a6; font-weight:900; cursor:grab; }
.order-item > div { display:flex; gap:5px; }
.order-item > div button { width:34px; height:34px; border:1px solid #cfe0e8; border-radius:10px; background:#f8fbfc; cursor:pointer; }
.sort-tray { display:flex; flex-wrap:wrap; gap:10px; min-height:72px; padding:14px; border:1px dashed #9db8c7; border-radius:16px; background:#f8fbfd; }
.sort-card { max-width:260px; min-height:48px; border:1px solid #bdd7e1; border-radius:14px; background:white; color:var(--navy); padding:10px 12px; font-weight:800; cursor:grab; }
.sort-card.selected { outline:3px solid rgba(20,184,166,.2); border-color:var(--teal); }
.sort-board { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.sort-board section { min-height:150px; padding:14px; border:2px dashed #b8ccd6; border-radius:18px; background:#fbfdfe; }
.sort-board section:first-child { border-color:#86d6c9; background:#f2fbf8; }
.sort-board section:last-child { border-color:#f2c8a5; background:#fffaf4; }
.sort-board section.drag-over { transform:scale(1.01); box-shadow:0 0 0 4px rgba(20,184,166,.12); }
.sort-board section > strong { display:block; margin-bottom:10px; color:var(--navy); }
.sort-board section > div { display:grid; gap:8px; }
.sort-board .sort-card { max-width:none; width:100%; }
.truefalse-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.truefalse-options button { min-height:100px; border:2px solid #c9dce5; border-radius:20px; background:white; color:var(--navy); font-size:24px; font-weight:950; cursor:pointer; }
.truefalse-options button:hover,.truefalse-options button.selected { border-color:var(--teal); background:#edfbf9; transform:translateY(-2px); }
.fun-activity.needs-rethink { box-shadow:0 0 0 4px rgba(245,158,11,.13); }
.mixed-quiz-card { max-width:980px; margin:0 auto; }
.mixed-quiz-top { display:flex; justify-content:space-between; align-items:center; }
.mixed-quiz-progress { height:8px; overflow:hidden; margin:12px 0 22px; border-radius:999px; background:#e4eef2; }
.mixed-quiz-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#39c6c1); }
.quiz-matching,.quiz-order-board { margin-top:20px; }
.end-lesson-quiz-intro .understanding-rules span { font-size:24px; }
.mixed-quiz-result { max-width:760px; margin:0 auto; }
.lesson-error-recovery { max-width:760px; margin:24px auto; padding:32px; border:1px solid #d9e6ed; border-radius:24px; background:white; text-align:center; box-shadow:0 18px 50px rgba(15,43,73,.1); }
.error-recovery-icon { width:82px; height:82px; display:grid; place-items:center; margin:0 auto 14px; border-radius:24px; background:#eaf8f7; font-size:42px; }
.lesson-error-recovery details { margin:18px 0; padding:12px; border-radius:12px; background:#f6f9fb; text-align:left; }
.lesson-error-recovery code { white-space:pre-wrap; overflow-wrap:anywhere; }
.avatar-studio-preview .avatar-character,.avatar-dialog .avatar-character { overflow:visible !important; }
.avatar-studio-preview { min-height:560px; align-content:start; overflow:auto; }
.avatar-studio-preview .avatar-full { margin-top:8px; transform-origin:top center; }
.avatar-preview-message { position:static !important; margin-top:12px; }
@media (max-width:800px) {
    .matching-board,.sort-board { grid-template-columns:1fr; }
    .match-terms,.match-definitions { grid-template-columns:1fr; }
    .truefalse-options { grid-template-columns:1fr; }
    .avatar-studio-preview { min-height:460px; }
}

/* V7.2 topic and visual alignment */
.office-scene-shell {
    border: 1px solid #cfe0e8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(11,45,79,.11);
    overflow: hidden;
}
.office-scene-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    color: #fff;
}
.office-scene-toolbar > div:first-child { min-width: 0; }
.office-scene-toolbar small { display: block; color: #bde7e5; font-weight: 900; letter-spacing: .08em; }
.office-scene-toolbar strong { display: block; margin-top: 3px; font-size: clamp(15px, 2vw, 20px); }
.office-scene-toolbar p { margin: 5px 0 0; color: #dcecf3; font-size: 13px; }
.office-view-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.office-view-tools button, .office-view-tools strong {
    min-width: 38px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 850;
}
.office-view-tools button { cursor: pointer; }
.office-view-tools button:hover, .office-view-tools button:focus-visible { background: rgba(255,255,255,.22); outline: none; }
.office-zoom-viewport { overflow: auto; background: #e8eef2; padding: 12px; max-height: 760px; }
.office-zoom-content { min-width: 980px; transition: transform .18s ease; }
.office-scene-shell:fullscreen { width: 100vw; height: 100vh; border-radius: 0; background: #e8eef2; }
.office-scene-shell:fullscreen .office-zoom-viewport { max-height: calc(100vh - 108px); height: calc(100vh - 108px); }
.office2016-visual { position: relative; min-width: 960px; }
.office-titlebar { min-height: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 5px 12px; }
.office-quick-access { display: flex; align-items: center; gap: 5px; position: relative; }
.office-quick-access > button { position: relative; width: 34px; height: 30px; border: 0; border-radius: 7px; background: rgba(255,255,255,.15); color: #fff; cursor: default; }
.office-title-file { position: relative; text-align: center; font-weight: 750; }
.office-accurate-tabs { position: relative; }
.office-tab-control { min-width: 64px; }
.office-accurate-ribbon { min-height: 108px; align-items: stretch; }
.ribbon-group { min-width: 130px; position: relative; }
.office-command-row { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-bottom: 5px; }
.office-command { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 7px; border: 1px solid #ccd9e0; border-radius: 6px; background: #fbfdfe; font-size: 11px; font-weight: 750; color: #26394b; }
.office-feature-hotspot { z-index: 15; }
.mini-table-grid { margin-top: 5px; padding: 4px; border: 1px dashed #8eb6c5; border-radius: 6px; font-size: 10px; color: var(--navy); }
.word-horizontal-ruler { position: relative; }
.word-indent-marker { position: absolute; left: 27%; top: -2px; color: var(--teal-dark); font-style: normal; }
.word-page { min-height: 500px; padding: 64px 78px; }
.word-page h4 { margin: 0 0 20px; font-size: 28px; color: #172033; }
.word-page h5 { margin: 28px 0 8px; font-size: 17px; color: #172033; }
.word-selected-text, .word-insertion-point, .word-format-result, .ppt-selected-text { position: relative; }
.word-selected-text, .ppt-selected-text { background: #cfe8ff; outline: 1px solid #7db4e1; }
.word-insertion-point { color: var(--navy); font-weight: 950; animation: officeCursor 1s steps(1) infinite; }
@keyframes officeCursor { 50% { opacity: .15; } }
.word-format-result { display: inline-block; padding: 5px 9px; border-radius: 8px; background: #e8f8f6; color: var(--teal-dark); font-weight: 850; }
.word-result-badge { margin-top: 24px; }
.word-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.word-before-after section { padding: 18px; border: 1px solid #d7e3e9; border-radius: 14px; background: #f9fbfc; position: relative; }
.word-before-after section:last-child { border-color: #93d7d1; background: #f0fbfa; }
.word-before-after small { color: var(--muted); font-weight: 900; }
.word-left-paragraph { text-align: left; line-height: 1.8; position: relative; }
.word-centred-paragraph { text-align: center; font-weight: 800; }
.word-indent-example { margin-left: 52px; padding: 12px; border-left: 4px solid var(--teal); background: #f4faf9; position: relative; }
.word-tab-line { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-top: 20px; padding: 12px; border-bottom: 1px dotted #6f8898; position: relative; }
.word-page-layout-demo { min-height: 330px; border: 18px solid #f3f6f8; padding: 28px; position: relative; }
.word-page-layout-demo.landscape-preview { min-height: 230px; width: 100%; }
.margin-guide { position: absolute; inset: 10px; border: 1px dashed var(--teal); pointer-events: none; }
.margin-guide span { position: absolute; padding: 2px 6px; background: #fff; color: var(--teal-dark); font-size: 10px; font-weight: 800; }
.margin-guide span:nth-child(1) { top: -10px; left: 45%; }
.margin-guide span:nth-child(2) { left: -10px; top: 45%; transform: rotate(-90deg); }
.margin-guide span:nth-child(3) { right: -10px; top: 45%; transform: rotate(90deg); }
.margin-guide span:nth-child(4) { bottom: -10px; left: 45%; }
.word-object-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: center; }
.word-selected-object, .word-text-box { position: relative; min-height: 130px; display: grid; place-items: center; padding: 16px; border: 2px dashed var(--teal); border-radius: 14px; background: #effaf9; }
.word-selected-object span { font-size: 48px; }
.word-file-summary { display: grid; gap: 8px; margin-top: 22px; }
.word-file-summary span { padding: 10px 12px; border: 1px solid #dbe6ec; border-radius: 10px; background: #f8fbfc; }
.office-diagnostic-note { margin: 14px; padding: 13px 15px; border-left: 5px solid var(--orange); border-radius: 10px; background: #fff8ee; color: #5b3a16; }
.office-diagnostic-note p { margin: 4px 0 0; }
.backstage-cards { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.backstage-file-fields { grid-template-columns: 1.2fr 1.2fr auto; }
.excel-formula-bar { min-height: 38px; }
.excel-grid-accurate { position: relative; }
.excel-range-anchor { position: absolute; z-index: 5; top: 30px; left: 50px; width: 65%; height: 68%; border: 2px solid rgba(17,159,154,.55); pointer-events: none; color: var(--teal-dark); font-size: 9px; font-weight: 900; }
.excel-range-anchor .office-feature-hotspot { pointer-events: auto; }
.excel-cell { position: relative; }
.excel-column-heading, .excel-row-heading { position: relative; }
.excel-cell.formatted-header, .formatted-header { background: #dceff0 !important; font-weight: 850; }
.excel-chart { min-width: 260px; }
.ppt-slide-design { min-height: 360px; }
.ppt-layout-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
.ppt-layout-boxes span { padding: 20px 12px; border-radius: 14px; background: #e7f6f5; color: var(--navy); font-weight: 850; }
.ppt-bullet-content { max-width: 66%; margin: 32px auto; text-align: left; font-size: 20px; line-height: 1.7; }
.ppt-readability-result, .ppt-delivery-status { position: relative; display: inline-block; padding: 8px 12px; border-radius: 10px; background: #e8f8f6; color: var(--teal-dark); font-weight: 850; }
.ppt-object-caption { margin-top: 18px; font-size: 17px; font-weight: 800; }
.ppt-themed-slide { min-height: 300px; display: grid; align-content: center; justify-items: center; gap: 12px; border-radius: 18px; background: linear-gradient(135deg, #0b2d4f, #119f9a); color: #fff; padding: 32px; position: relative; }
.ppt-themed-slide h3 { margin: 0; font-size: 32px; }
.theme-swatches { display: flex; gap: 10px; }
.theme-swatches i { width: 42px; height: 18px; border-radius: 999px; background: #fff; opacity: .85; }
.effect-comparison { display: flex; gap: 14px; justify-content: center; margin: 30px 0; }
.effect-comparison span { padding: 12px 16px; border-radius: 12px; background: #eef7f8; color: var(--navy); font-weight: 850; }
.presenter-screen { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; margin: 24px 0; }
.presenter-screen section { padding: 22px; border-radius: 14px; background: #0b2d4f; color: #fff; }
.review-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 38px; }
.review-four span { padding: 18px 10px; border-radius: 12px; background: #e8f8f6; color: var(--navy); font-weight: 850; }
.grade8-topic-visual { min-height: 420px; padding: 24px; border: 1px solid #d5e4eb; border-radius: 20px; background: linear-gradient(160deg, #fff, #f2f8fb); color: var(--ink); overflow: hidden; }
.grade8-topic-visual > header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.grade8-topic-visual > header > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #e5f7f5; font-size: 28px; }
.grade8-topic-visual header small { display: block; color: var(--teal-dark); font-weight: 900; letter-spacing: .08em; }
.grade8-topic-visual header strong { display: block; color: var(--navy); font-size: 20px; }
.learning-worlds, .device-cards, .input-device-grid, .threat-cards, .privacy-settings-panel, .smart-school-map, .productivity-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; }
.learning-worlds article, .device-cards article, .input-device-grid article, .threat-cards article, .smart-school-map article, .productivity-apps article, .family-profiles article { padding: 18px; border: 1px solid #d8e7ed; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(11,45,79,.06); }
.learning-worlds article span, .device-cards article span, .input-device-grid article span, .threat-cards article span, .smart-school-map article span { display: block; font-size: 30px; margin-bottom: 8px; }
.learning-worlds article strong, .device-cards article strong, .input-device-grid article strong, .threat-cards article strong, .smart-school-map article strong { display: block; color: var(--navy); }
.learning-worlds article small, .device-cards article small, .input-device-grid article small, .threat-cards article small, .smart-school-map article small { color: var(--muted); }
.computer-desk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; }
.computer-desk article { min-height: 150px; display: grid; place-items: center; align-content: center; padding: 14px; border: 1px solid #d6e5eb; border-radius: 16px; background: #fff; }
.computer-desk article span { font-size: 42px; }
.motherboard-board { position: relative; min-height: 300px; border: 8px solid #1b5e62; border-radius: 22px; background: #1f8f89; }
.board-chip { position: absolute; display: grid; place-items: center; align-content: center; border: 5px solid #d8ece9; border-radius: 12px; background: #173f55; color: #fff; }
.board-chip span { font-weight: 950; }
.board-chip small { color: #cae8e6; }
.board-chip.cpu { width: 130px; height: 110px; left: 18%; top: 20%; }
.board-chip.ram { width: 170px; height: 58px; left: 46%; top: 18%; }
.board-chip.storage { width: 180px; height: 70px; left: 38%; top: 56%; }
.port-strip { position: absolute; right: 18px; top: 18px; bottom: 18px; display: grid; gap: 8px; }
.port-strip span { min-width: 86px; display: grid; place-items: center; border-radius: 8px; background: #d7f0ed; color: #173f55; font-size: 12px; font-weight: 850; }
.motherboard-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.motherboard-board path { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 4; }
.connector-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.connector-cards span { padding: 9px 12px; border-radius: 999px; background: #e7f5f4; color: var(--navy); font-weight: 800; }
.power-sequence, .network-route, .backup-route, .integration-flow { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; }
.power-sequence article, .network-route article, .backup-route article, .integration-flow article { min-width: 140px; flex: 1; padding: 16px; border: 1px solid #d6e5eb; border-radius: 15px; background: #fff; }
.power-sequence article span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 900; }
.power-sequence i, .network-route i, .backup-route i, .integration-flow i { align-self: center; color: var(--teal-dark); font-size: 24px; font-style: normal; }
.input-mini-challenge, .device-scenario, .network-troubleshoot, .threat-decision, .family-scenario, .grade8-topic-visual > aside, .scene-stage-note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #eaf6f6; color: var(--navy); font-weight: 750; }
.internet-concepts { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.internet-concepts article { padding: 16px; text-align: center; border: 1px solid #d6e5eb; border-radius: 15px; background: #fff; }
.internet-concepts article span { display: block; font-size: 32px; }
.internet-concepts article strong { display: block; color: var(--navy); }
.email-compose { max-width: 760px; margin: 0 auto; padding: 18px; border: 1px solid #d4e3e9; border-radius: 18px; background: #fff; }
.email-field { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e3ebef; }
.email-body { min-height: 180px; padding: 18px 6px; }
.email-attachment { display: inline-block; padding: 8px 12px; border-radius: 10px; background: #edf7f7; color: var(--navy); }
.email-compose > button { float: right; padding: 10px 22px; border: 0; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 850; }
.suspicious-message { max-width: 680px; margin: 0 auto; padding: 20px; border: 1px solid #f2c7b0; border-radius: 18px; background: #fffaf6; }
.suspicious-message button { padding: 9px 15px; border: 0; border-radius: 9px; background: var(--orange); color: #fff; }
.warning-markers, .transaction-checks { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.warning-markers span, .transaction-checks span { padding: 8px 11px; border-radius: 999px; background: #e9f6f5; color: var(--navy); font-weight: 800; }
.password-meter { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 10px; align-items: center; }
.password-meter i { height: 12px; border-radius: 999px; background: #f0b48e; }
.password-meter i.strong { background: var(--teal); }
.browser-address { display: flex; gap: 10px; align-items: center; padding: 12px 15px; border-radius: 12px; background: #fff; border: 1px solid #cfe0e7; }
.checkout-summary, .transaction-checks { max-width: 760px; margin-left: auto; margin-right: auto; }
.checkout-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
.checkout-summary span { padding: 16px; border: 1px solid #d9e7ec; border-radius: 12px; background: #fff; }
.family-profiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.privacy-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 14px 16px; border-bottom: 1px solid #dbe7ec; background: #fff; }
.privacy-row:first-of-type { border-radius: 14px 14px 0 0; }
.privacy-row:last-of-type { border-radius: 0 0 14px 14px; border-bottom: 0; }
.ethics-questions { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.ethics-questions article { padding: 16px; border-radius: 15px; background: #fff; border: 1px solid #d9e7ec; }
.ethics-questions article span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 900; }
.productivity-apps article span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--navy); color: #fff; font-size: 24px; font-weight: 950; }
.tool-scenarios { display: grid; gap: 8px; margin-top: 16px; }
.tool-scenarios span { padding: 10px 12px; border-radius: 10px; background: #edf7f7; }

@media (max-width: 900px) {
    .office-scene-toolbar { align-items: flex-start; flex-direction: column; }
    .office-view-tools { justify-content: flex-start; }
    .office-zoom-content { min-width: 820px; }
    .word-before-after, .word-object-layout, .presenter-screen { grid-template-columns: 1fr; }
    .computer-desk, .internet-concepts, .ethics-questions { grid-template-columns: repeat(2,1fr); }
    .checkout-summary, .family-profiles { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .grade8-topic-visual { padding: 16px; min-height: 360px; }
    .computer-desk, .internet-concepts, .ethics-questions { grid-template-columns: 1fr; }
    .office-view-tools strong { display: none; }
}


/* V7.3 Office viewport, scroll reset and full-width lesson corrections */
html, body { max-width: 100%; overflow-x: hidden; }
.app-main, .mission-shell, .mission-stage, .mission-app, .visual-first-lesson, .lesson-workbench, .lesson-workspace { min-width: 0; max-width: 100%; }

/* Laptop layouts need a full-width mission briefing because the Office window is instructional. */
@media (max-width: 1600px) {
    .mission-launch { grid-template-columns: 1fr; }
    .launch-visual { width: 100%; max-width: 1120px; margin: 0 auto; }
}
.launch-visual > .office-scene-shell,
.launch-visual > .office2016-visual,
.launch-visual > .system-map-visual,
.launch-visual > .ppt2016-mini-card { transform: none !important; }
.launch-visual .office-scene-shell { width: 100%; }

/* Keep a useful lesson journey without sacrificing the Office canvas. */
.lesson-workbench { grid-template-columns: 76px minmax(0,1fr); gap: 12px; }
.lesson-navigation-rail { width: 76px; padding: 8px; overflow: visible; }
.lesson-navigation-rail .lesson-rail-guide { display: grid; justify-items: center; padding: 6px; }
.lesson-navigation-rail .lesson-rail-guide > div,
.lesson-navigation-rail .lesson-rail-current button span,
.lesson-navigation-rail .lesson-rail-sections button span,
.lesson-navigation-rail .lesson-rail-current > small,
.lesson-navigation-rail .lesson-rail-sections > small { display: none; }
.lesson-navigation-rail .lesson-rail-current,
.lesson-navigation-rail .lesson-rail-sections { display: grid; gap: 7px; }
.lesson-navigation-rail .lesson-rail-current button,
.lesson-navigation-rail .lesson-rail-sections button { width: 58px; min-height: 54px; display: grid; place-items: center; padding: 5px; border-radius: 14px; }
.lesson-navigation-rail .lesson-rail-current button i,
.lesson-navigation-rail .lesson-rail-sections button i { margin: 0; }
.lesson-navigation-rail.open { width: 286px; z-index: 40; box-shadow: 0 18px 48px rgba(15,43,73,.18); }
.lesson-navigation-rail.open .lesson-rail-guide { grid-template-columns: auto 1fr auto; justify-items: stretch; }
.lesson-navigation-rail.open .lesson-rail-guide > div,
.lesson-navigation-rail.open .lesson-rail-current button span,
.lesson-navigation-rail.open .lesson-rail-sections button span,
.lesson-navigation-rail.open .lesson-rail-current > small,
.lesson-navigation-rail.open .lesson-rail-sections > small { display: grid; }
.lesson-navigation-rail.open .lesson-rail-current button,
.lesson-navigation-rail.open .lesson-rail-sections button { width: 100%; grid-template-columns: auto 1fr; justify-items: stretch; }

.office-learning-stage { overflow: hidden; }
.office-stage-canvas { display: block; min-height: 0; padding: 0; background: #e8eef2; }
.office-stage-canvas > .office-scene-shell { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.office-learning-stage .visual-stage-top { position: relative; z-index: 2; }

.office-zoom-viewport { width: 100%; min-height: 430px; max-height: none; overflow: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.office-zoom-frame { position: relative; min-width: 0; min-height: 0; }
.office-zoom-content { width: 980px; min-width: 980px; transform-origin: top left; transition: transform .18s ease; }
.office-scene-toolbar { position: relative; z-index: 4; }
.office-scene-toolbar > div:first-child { overflow: visible; }
.office-scene-toolbar small,
.office-scene-toolbar strong,
.office-scene-toolbar p { overflow-wrap: anywhere; }
.office-scene-shell:fullscreen .office-zoom-viewport { min-height: 0; }

/* Markers for a Ribbon group sit at the group label, not on top of command markers. */
.ribbon-group > .office-feature-hotspot[data-office-anchor="paragraph-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="font-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="styles-gallery"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="editing-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="illustrations-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="text-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="page-setup-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="number-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="cells-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="charts-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="sort-filter-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="slides-group"],
.ribbon-group > .office-feature-hotspot[data-office-anchor="variants-group"] {
    width: 27px; height: 27px; top: auto; right: 3px; bottom: 1px;
}
.office-command > .office-feature-hotspot,
.office-command-row .office-feature-hotspot { width: 29px; height: 29px; right: -10px; top: -14px; }

/* Lists and Tabs scenes now show distinct practical documents. */
.word-list-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 18px 0 28px; }
.word-list-comparison section { padding: 18px 22px; border: 1px solid #d9e5eb; border-radius: 14px; background: #f8fbfc; }
.word-list-comparison small { color: #0f766e; font-weight: 900; letter-spacing: .08em; }
.word-list-comparison li, .word-numbered-process li, .word-multilevel-list li { margin: 8px 0; line-height: 1.55; }
.word-tabbed-register { position: relative; margin-top: 24px; border: 1px solid #cbdce4; border-radius: 14px; overflow: visible; }
.word-tabbed-register > div { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 20px; padding: 12px 16px; border-bottom: 1px dotted #9db3bf; }
.word-tabbed-register > div:first-child { background: #e9f7f5; color: #0b2d4f; }
.word-tabbed-register > div:last-of-type { border-bottom: 0; }
.word-multilevel-list { position: relative; padding: 18px 32px; border-left: 4px solid #14a39e; background: #f5fbfa; }
.word-multilevel-list ul { margin-top: 6px; list-style-type: circle; }
.word-numbered-process { position: relative; padding: 18px 24px 18px 48px; border: 1px solid #d8e5eb; border-radius: 14px; background: #fbfdfe; }
.word-list-note { margin-top: 16px; padding: 10px 13px; border-radius: 10px; background: #e9f7f5; color: #0b4e67; font-weight: 750; }

@media (max-width: 1180px) {
    .lesson-workbench { grid-template-columns: 1fr; }
    .lesson-navigation-rail { width: min(320px,calc(100vw - 24px)); }
}
@media (max-width: 760px) {
    .office-zoom-viewport { min-height: 330px; padding: 8px; }
    .word-list-comparison { grid-template-columns: 1fr; }
}


/* V7.3.1 compact rail and visual-first heading refinement */
.lesson-navigation-rail { overflow: hidden; }
.lesson-navigation-rail.open { overflow: auto; }
.lesson-navigation-rail:not(.open) .lesson-rail-guide .avatar-guide {
    width: 44px !important;
    height: 66px !important;
    min-width: 44px;
    transform: none !important;
}
.lesson-navigation-rail:not(.open) .lesson-rail-guide { min-height: 78px; }
.visual-lesson-heading { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.visual-lesson-heading > div:first-child { max-width: none; }
.visual-mission-chip { width: 100%; max-width: none; }
.visual-mission-chip > .avatar-guide-mini { flex: 0 0 auto; }
.lesson-full-explanation { border: 1px solid #dbe6ec; border-radius: 15px; background: #f8fbfd; overflow: hidden; }
.lesson-full-explanation summary { padding: 13px 16px; color: #0b4e67; font-weight: 850; cursor: pointer; }
.lesson-full-explanation p { margin: 0; padding: 0 16px 16px; color: #526579; line-height: 1.7; }

/* V7.3.2 remove unnecessary horizontal scrolling inside fitted Word scenes */
@media (min-width: 621px) {
    .word-accurate-workspace { overflow-x: hidden; overflow-y: auto; }
}


/* V11.2.2 navigation repair: pending actions explain themselves instead of appearing broken. */
.primary-button.navigation-pending[aria-disabled="true"] { opacity:.82; cursor:pointer; filter:saturate(.75); }
.navigation-attention { outline:4px solid rgba(245,177,65,.4); outline-offset:3px; }


/* V11.3: Level 1 friendly navigation, short labels and touch-first actions. */
.mission-journey span { font-weight:850; }
.mission-journey span strong { font-size:12px; }
.task-actions .primary-button { min-width:150px; }
.mission-button[data-locked-link="1"] { background:#64748b; }
.mission-button[data-locked-link="1"]:hover { background:#475569; transform:none; }

@media (max-width: 760px) {
    .mission-sidebar { padding-bottom:12px; }
    .stage-toolbar { min-height:64px; padding:9px 12px; }
    .timer { padding:7px 9px; font-size:12px; }
    .mission-journey {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:5px;
        padding:8px 7px 10px;
    }
    .mission-journey span {
        min-height:52px;
        padding:5px 2px;
        flex-direction:column;
        gap:3px;
        text-align:center;
        line-height:1.1;
    }
    .mission-journey i { width:22px; height:22px; }
    .mission-journey strong { font-size:10px; }
    .mission-app { padding-top:10px; }
    .mission-panel { padding:18px 14px; border-radius:18px; }
    .task-heading { display:grid; grid-template-columns:1fr; gap:8px; }
    .step-chip { justify-self:start; }
}
@media (max-width: 600px) {
    .task-actions { display:grid; grid-template-columns:1fr; }
    .task-actions > * { width:100%; min-height:52px; }
    .task-actions .secondary-button { order:2; }
    .task-actions .primary-button { order:1; }
    .launch-footer .launch-button { width:100%; min-height:54px; }
}

/* V11.3.1 next-lesson hand-off */
.lesson-next-note{margin:16px 0;padding:14px 16px;border:1px solid #d7e4ec;border-radius:14px;background:#f7fafc;color:#243b53}.lesson-next-note strong,.lesson-next-note span{display:block}.lesson-next-note span{margin-top:4px;color:#5c6f82;line-height:1.5}

/* V11.4 Smart Progression */
.smart-progression-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:14px;
    align-items:start;
    margin:18px 0;
    padding:16px 18px;
    border:1px solid #dce8ee;
    border-radius:18px;
    background:#f8fbfc;
}
.smart-progression-card .smart-progression-icon{font-size:1.65rem;line-height:1}
.smart-progression-card small{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#54707d;margin-bottom:3px}
.smart-progression-card strong{display:block;font-size:1.05rem;color:#183642}
.smart-progression-card p{margin:6px 0 0;color:#526771;line-height:1.5}
.smart-progression-card.ready{border-color:#bfe7d7;background:#f3fcf8}
.smart-progression-card.steady{border-color:#c7dff4;background:#f5faff}
.smart-progression-card.practice{border-color:#f0d7a5;background:#fffaf0}
@media (max-width:640px){
    .smart-progression-card{padding:14px;gap:10px;border-radius:15px}
    .full-results .result-actions{display:grid;grid-template-columns:1fr;gap:10px}
    .full-results .result-actions a,.full-results .result-actions button{width:100%;justify-content:center;text-align:center}
}

/* V11.5 production experience */
.dq-loading-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:rgba(7,29,49,.34);backdrop-filter:blur(8px);padding:20px}.dq-loading-overlay[hidden]{display:none}.dq-loading-card{width:min(430px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:20px;border-radius:22px;background:#fff;box-shadow:0 28px 90px rgba(2,22,42,.28);color:#0f2f49}.dq-loading-card>div:nth-child(2){display:grid;gap:3px}.dq-loading-card strong{font-size:16px}.dq-loading-card span{font-size:12px;color:#64748b}.dq-loading-logo{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#0f766e,#075985);color:#fff;font-weight:1000;letter-spacing:-.04em}.dq-loading-track{grid-column:1/-1;height:7px;border-radius:999px;background:#e8f1f5;overflow:hidden}.dq-loading-track i{display:block;width:12%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#14b8a6,#2563eb,#8b5cf6);transition:width .18s ease}.dq-is-loading{cursor:progress}.dq-password-wrap{position:relative;display:block}.dq-password-wrap>input{padding-right:68px!important}.dq-password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;border-radius:9px;background:#edf6f7;color:#0f766e;font-weight:800;padding:7px 10px;cursor:pointer}

.avatar-preset-studio{grid-template-columns:minmax(250px,320px) minmax(0,1fr)}.avatar-preset-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.avatar-preset-heading h3{margin:4px 0 5px;color:var(--navy);font-size:25px}.avatar-preset-heading p{margin:0;color:var(--muted)}.avatar-lock-note{padding:9px 12px;border-radius:999px;background:#eef7ff;color:#1d4ed8;font-size:11px;font-weight:900;white-space:nowrap}.avatar-preset-grid{display:grid;grid-template-columns:repeat(6,minmax(92px,1fr));gap:12px;max-height:650px;overflow:auto;padding:4px 6px 12px 2px}.avatar-preset-option{position:relative;min-width:0;padding:10px 6px 8px;border:2px solid #e0ebef;border-radius:17px;background:linear-gradient(180deg,#fff,#f6fbfc);display:grid;place-items:center;gap:6px;cursor:pointer;transition:.16s ease}.avatar-preset-option:hover{transform:translateY(-2px);border-color:#8bd8d2;box-shadow:0 12px 26px rgba(15,118,110,.12)}.avatar-preset-option.selected,.avatar-preset-option:has(input:checked){border-color:#14b8a6;background:#ecfdf8;box-shadow:0 0 0 3px rgba(20,184,166,.12)}.avatar-preset-option input{position:absolute;opacity:0;pointer-events:none}.avatar-preset-option span{font-size:10px;font-weight:900;color:#475569;text-transform:uppercase;letter-spacing:.03em}.avatar-button-static{cursor:default}.avatar-button-static:hover{transform:none}

/* richer avatar faces and outfits, still lightweight CSS so 48 choices load instantly */
.avatar-character{--skin-hi:rgba(255,255,255,.18);background:radial-gradient(circle at 50% 15%,#fff 0,#f5fafc 38%,#dfeef1 100%)}.avatar-head{background:radial-gradient(circle at 38% 24%,var(--skin-hi),transparent 26%),linear-gradient(145deg,var(--skin),var(--skin-shadow));box-shadow:inset -3px -4px 8px rgba(74,36,22,.12),inset 2px 2px 5px rgba(255,255,255,.16)}.avatar-eye{box-shadow:inset 0 -1px 1px rgba(15,23,42,.18)}.avatar-eye::before{content:"";position:absolute;width:22%;height:24%;border-radius:50%;background:white;left:22%;top:18%;z-index:2}.avatar-mouth-soft .avatar-mouth{left:46%;width:8%;height:2%;top:28.8%;border-bottom:2px solid #8b3f3f}.avatar-eyes-wide .avatar-eye{height:4.2%;width:4.7%}.avatar-eyes-narrow .avatar-eye{height:2.2%;top:21.6%;border-radius:999px}.avatar-face-square .avatar-head{border-radius:38% 38% 34% 34%;width:34%;left:33%}.avatar-face-diamond .avatar-head{clip-path:polygon(18% 8%,82% 8%,100% 45%,74% 100%,26% 100%,0 45%);border-radius:26%}.avatar-face-long .avatar-head{height:26%;top:10%;width:30%;left:35%;border-radius:46% 46% 42% 42%}.avatar-skin-porcelain{--skin:#f5d4c3;--skin-shadow:#d9ad98}.avatar-skin-brown{--skin:#875538;--skin-shadow:#68402c}.avatar-hair-dark_brown{--hair:#30221d}.avatar-hair-copper{--hair:#8a4c2e}.avatar-eye-green{--eye:#3f6f54}.avatar-style-short .avatar-backhair,.avatar-style-fade .avatar-backhair,.avatar-style-waves .avatar-backhair,.avatar-style-buzz .avatar-backhair{left:31%;top:7%;width:38%;height:16%;border-radius:48% 48% 30% 30%}.avatar-style-short .avatar-fringe{left:32%;top:8%;width:36%;height:10%}.avatar-style-fade .avatar-backhair{height:13%;background:linear-gradient(180deg,var(--hair),color-mix(in srgb,var(--hair) 62%,transparent))}.avatar-style-fade .avatar-fringe{height:7%;top:9%}.avatar-style-waves .avatar-fringe{background:repeating-radial-gradient(circle at 20% 40%,var(--hair) 0 2px,transparent 2px 4px),var(--hair)}.avatar-style-buzz .avatar-fringe{display:none}.avatar-style-buzz .avatar-backhair{height:10%;top:10%;opacity:.9}.avatar-style-coils .avatar-backhair{left:24%;top:4%;width:52%;height:29%;border-radius:48%;background:radial-gradient(circle at 25% 30%,var(--hair) 0 10%,transparent 11%),radial-gradient(circle at 55% 20%,var(--hair) 0 11%,transparent 12%),radial-gradient(circle at 72% 50%,var(--hair) 0 12%,transparent 13%),radial-gradient(circle at 35% 68%,var(--hair) 0 13%,transparent 14%),var(--hair)}.avatar-style-locs .avatar-backhair{left:26%;width:48%;height:35%;border-radius:44% 44% 32% 32%}.avatar-style-locs .avatar-backhair::before,.avatar-style-locs .avatar-backhair::after{content:"";position:absolute;top:45%;width:12%;height:100%;border-radius:999px;background:var(--hair);box-shadow:11px 4px 0 var(--hair),22px 1px 0 var(--hair)}.avatar-style-locs .avatar-backhair::before{left:4%}.avatar-style-locs .avatar-backhair::after{right:26%}.avatar-style-twists .avatar-backhair::before,.avatar-style-twists .avatar-backhair::after{content:"";position:absolute;top:42%;width:10%;height:92%;border-radius:999px;background:repeating-linear-gradient(180deg,var(--hair) 0 4px,rgba(255,255,255,.12) 4px 5px,var(--hair) 5px 9px)}.avatar-style-twists .avatar-backhair::before{left:8%}.avatar-style-twists .avatar-backhair::after{right:8%}
.avatar-outfit-hoodie .avatar-jacket{background:linear-gradient(145deg,var(--uniform),var(--uniform-dark));border-radius:26% 26% 12% 12%}.avatar-outfit-hoodie .avatar-collar{background:transparent;border:4px solid rgba(255,255,255,.58);border-top:0;border-radius:0 0 50% 50%;clip-path:none}.avatar-outfit-polo .avatar-jacket{display:none}.avatar-outfit-polo .avatar-body,.avatar-outfit-polo .avatar-arm{background:var(--uniform)}.avatar-outfit-varsity .avatar-jacket{background:linear-gradient(90deg,var(--uniform-dark) 0 26%,var(--uniform) 26% 74%,var(--uniform-dark) 74%)}.avatar-outfit-denim .avatar-jacket{background:linear-gradient(145deg,#47769a,#214b6a)}.avatar-outfit-sweater .avatar-jacket{display:none}.avatar-outfit-sweater .avatar-body,.avatar-outfit-sweater .avatar-arm{background:linear-gradient(145deg,var(--uniform),var(--uniform-dark))}.avatar-outfit-tee .avatar-jacket,.avatar-outfit-tee .avatar-collar{display:none}.avatar-outfit-tee .avatar-shirt{display:none}.avatar-outfit-tee .avatar-body,.avatar-outfit-tee .avatar-arm{background:var(--uniform)}.avatar-bottom-jeans .avatar-bottom,.avatar-bottom-chinos .avatar-bottom,.avatar-bottom-joggers .avatar-bottom{background:linear-gradient(90deg,var(--uniform-dark) 0 47%,transparent 47% 53%,var(--uniform-dark) 53%)}.avatar-bottom-jeans{--uniform-dark:#315b7a}.avatar-bottom-chinos{--uniform-dark:#8b7756}.avatar-bottom-joggers{--uniform-dark:#475569}.avatar-accessory-cap .avatar-fringe{z-index:6}.avatar-accessory-cap .avatar-headband{display:block;left:28%;top:6%;width:44%;height:10%;border-radius:60% 60% 25% 25%;background:var(--uniform);z-index:13}.avatar-accessory-cap .avatar-headband::after{content:"";position:absolute;right:-18%;bottom:-22%;width:35%;height:25%;border-radius:999px;background:var(--uniform)}.avatar-accessory-beanie .avatar-headband{display:block;left:27%;top:4%;width:46%;height:14%;border-radius:50% 50% 16% 16%;background:var(--uniform);z-index:13}.avatar-accent-coral{--uniform:#e56b63;--uniform-dark:#a84343}.avatar-accent-purple{--uniform:#7c5ce7;--uniform-dark:#5138a9}.avatar-accent-green{--uniform:#2f8f61;--uniform-dark:#1e6544}.avatar-accent-red{--uniform:#c94b52;--uniform-dark:#8d3038}.avatar-accent-sky{--uniform:#3b82c4;--uniform-dark:#245b90}.avatar-accent-orange{--uniform:#d97732;--uniform-dark:#a64d1f}.avatar-shoes-navy{--shoe:#172554}

.production-login .access-form,.classroom-profile-shell .access-form{background:linear-gradient(180deg,#fff,#fbfdff)}.production-login input,.classroom-profile-shell input,.classroom-profile-shell select{min-height:50px}.production-login .primary-button,.classroom-profile-shell .primary-button{min-height:52px;border-radius:14px;font-size:15px}.auth-shell{background:radial-gradient(circle at 12% 12%,rgba(20,184,166,.2),transparent 32%),radial-gradient(circle at 88% 82%,rgba(37,99,235,.16),transparent 33%),#eef5f8}
@media(max-width:1150px){.avatar-preset-grid{grid-template-columns:repeat(4,minmax(90px,1fr))}}@media(max-width:760px){.avatar-preset-studio{grid-template-columns:1fr}.avatar-studio-preview{position:relative;top:auto;min-height:370px}.avatar-preset-grid{grid-template-columns:repeat(3,minmax(82px,1fr));max-height:none}.avatar-preset-heading{display:grid}.avatar-lock-note{white-space:normal}.avatar-choice{width:72px;height:100px}}
.lesson-auto-advance{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px auto;padding:10px 14px;border-radius:13px;background:#eef8ff;color:#1e4f78;font-size:12px;font-weight:800}.lesson-auto-advance button{border:1px solid #bad7ea;border-radius:9px;background:#fff;color:#1e4f78;padding:7px 10px;font-weight:800;cursor:pointer}
.lesson-auto-advance{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px auto;padding:10px 14px;border-radius:13px;background:#eef8ff;color:#1e4f78;font-size:12px;font-weight:800}.lesson-auto-advance button{border:1px solid #bad7ea;border-radius:9px;background:#fff;color:#1e4f78;padding:7px 10px;font-weight:800;cursor:pointer}

/* =========================================================
   V11.6.0 - Learning Experience, Avatar Creator, Course Intro
   ========================================================= */
.avatar-creator{grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:24px}.avatar-builder-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.avatar-builder-heading h3{margin:4px 0 6px;color:var(--navy)}.avatar-builder-heading p{margin:0;color:var(--muted)}.avatar-creator-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.avatar-builder-tabs{display:flex;gap:8px;position:sticky;top:72px;z-index:5;background:#fff;padding:8px 0 12px;border-bottom:1px solid #dce7ec;margin-bottom:14px}.avatar-builder-tabs button{border:1px solid #cbdbe2;background:#f7fbfc;color:#24455a;border-radius:999px;padding:9px 14px;font-weight:800;cursor:pointer}.avatar-builder-tabs button.active{background:#0f766e;border-color:#0f766e;color:#fff}.avatar-builder-section{display:none}.avatar-builder-section.active{display:grid;gap:18px}.avatar-option-group{border:1px solid #dbe7ec;border-radius:16px;padding:14px;margin:0;background:#fff}.avatar-option-group legend{font-weight:900;color:#173c55;padding:0 7px}.avatar-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}.avatar-option-grid.compact{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}.avatar-option{min-height:48px;border:1px solid #ccdae1;border-radius:12px;background:#f8fbfc;color:#24455a;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;cursor:pointer;text-align:center}.avatar-option:hover,.avatar-option:focus-visible{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.12)}.avatar-option.selected{border-color:#0f766e;background:#eaf8f5;color:#075f59;box-shadow:inset 0 0 0 1px #0f766e}.avatar-choice-swatch{width:22px;height:22px;border-radius:50%;border:2px solid rgba(15,23,42,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.swatch-skin-porcelain{background:#f5d4c3}.swatch-skin-light{background:#f3c6a5}.swatch-skin-warm{background:#d99a66}.swatch-skin-medium{background:#a56a43}.swatch-skin-brown{background:#875538}.swatch-skin-deep{background:#6f452d}.swatch-hair_color-black{background:#171717}.swatch-hair_color-dark_brown{background:#30221d}.swatch-hair_color-brown{background:#5e3b2a}.swatch-hair_color-auburn{background:#6f352a}.swatch-hair_color-copper{background:#8a4c2e}.swatch-eye_color-dark{background:#1f2937}.swatch-eye_color-brown{background:#70452f}.swatch-eye_color-hazel{background:#8b7447}.swatch-eye_color-green{background:#3f6f54}.swatch-accent-teal{background:#0f8b83}.swatch-accent-navy{background:#173c55}.swatch-accent-aqua{background:#20a4b4}.swatch-accent-gold{background:#d4a72c}.swatch-accent-coral{background:#e56b63}.swatch-accent-purple{background:#7c5ce7}.swatch-accent-green{background:#2f8f61}.swatch-accent-red{background:#c94b52}.swatch-accent-sky{background:#3b82c4}.swatch-accent-orange{background:#d97732}.swatch-shoes-black{background:#1f2937}.swatch-shoes-brown{background:#5c3b2e}.swatch-shoes-white{background:#f8fafc}.swatch-shoes-navy{background:#172554}.avatar-builder-done{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;background:#ecfdf5;border:1px solid #b7ead0;margin-top:18px}.avatar-builder-done>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0f766e;color:white;font-weight:900}.avatar-builder-done strong{color:#12564e}.avatar-builder-done p{margin:3px 0 0;color:#45656f}

.dq-cinema{max-width:1180px;margin:26px auto 54px;padding:0 22px}.dq-cinema-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;background:linear-gradient(135deg,#0e465a,#0f766e);color:#fff;border-radius:26px;padding:28px 30px;box-shadow:0 24px 54px rgba(15,44,58,.18)}.dq-cinema-top h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;margin:5px 0 10px}.dq-cinema-top p{max-width:760px;margin:0;color:#dff8f3;font-size:1.05rem}.dq-cinema-progress{min-width:180px}.dq-cinema-progress>span{font-weight:900}.dq-cinema-progress>div{height:8px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;margin-top:8px}.dq-cinema-progress i{display:block;height:100%;width:16.66%;background:#fff;border-radius:999px;transition:width .3s ease}.dq-cinema-stage{margin-top:18px;background:#071f2c;border-radius:28px;min-height:560px;color:white;overflow:hidden;position:relative;box-shadow:0 30px 70px rgba(8,31,44,.25)}.dq-cinema-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(33,196,179,.2),transparent 35%),radial-gradient(circle at 85% 75%,rgba(72,123,255,.18),transparent 34%);pointer-events:none}.dq-cinema-scene{position:relative;z-index:1;min-height:560px;padding:40px;display:grid;align-content:center;gap:24px;animation:dqSceneIn .35s ease}.dq-cinema-scene[hidden]{display:none!important}@keyframes dqSceneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.dq-scene-characters{display:flex;align-items:flex-end;justify-content:center;gap:54px;min-height:250px}.dq-own-avatar,.dq-coach-character{display:grid;justify-items:center;gap:8px}.avatar-cinema{width:170px;height:245px}.dq-coach-character img{width:160px;height:210px;object-fit:cover;object-position:top;border-radius:26px;border:4px solid rgba(255,255,255,.88);box-shadow:0 18px 35px rgba(0,0,0,.28)}.dq-own-avatar small,.dq-coach-character small{font-weight:900;color:#dff8f3}.dq-dialogue-stack{display:grid;gap:10px;max-width:720px;margin:auto}.dq-speech{position:relative;background:#fff;color:#15384d;border-radius:18px 18px 18px 5px;padding:15px 18px;box-shadow:0 14px 30px rgba(0,0,0,.18);max-width:720px}.dq-speech p{margin:3px 0 0;font-size:1.03rem;line-height:1.5}.dq-speech.coach::before{content:"";position:absolute;left:-9px;bottom:8px;border-width:9px 10px 0 0;border-style:solid;border-color:#fff transparent transparent transparent}.dq-cinema-scene>.primary-button{justify-self:center;min-width:190px}.dq-scene-heading{display:flex;gap:16px;align-items:center;justify-content:center;text-align:left}.dq-scene-heading>span{font-size:3rem}.dq-scene-heading small{color:#7fe4d7;font-weight:900;letter-spacing:.08em}.dq-scene-heading h2{font-size:clamp(1.7rem,3vw,2.8rem);margin:3px 0}.dq-scene-heading p{margin:5px 0;color:#d7eef2}.dq-example-duel{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:auto}.dq-example-duel article{border-radius:20px;padding:20px;min-height:220px}.dq-example-duel .bad{background:#fff1f2;color:#7f1d1d;border:2px solid #fecdd3}.dq-example-duel .good{background:#ecfdf5;color:#14532d;border:2px solid #a7f3d0}.dq-example-duel article h3{margin:12px 0}.dq-example-duel article p,.dq-example-duel article li{line-height:1.45}.dq-story-problem{max-width:760px;margin:auto;background:#fff;color:#173c55;border-radius:22px;padding:22px}.dq-story-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.dq-story-choice button{border:2px solid #d6e2e7;border-radius:14px;padding:15px;background:#f7fafb;font-weight:900;color:#173c55;cursor:pointer}.dq-story-choice button.correct{border-color:#16a36a;background:#ecfdf5}.dq-story-choice button.wrong{border-color:#e15e69;background:#fff1f2}.dq-file-story{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.dq-file-story>div{display:grid;gap:9px;padding:20px;border-radius:20px}.dq-file-story .bad{background:#351f28;border:1px solid #7f4352}.dq-file-story .good{background:#173d37;border:1px solid #2a8f77}.dq-file-story code{font-size:1rem;padding:8px 11px;background:rgba(255,255,255,.1);border-radius:9px}.dq-file-story>span{font-size:2.6rem}.dq-principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:920px;margin:auto}.dq-principle-grid article{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:18px;border-radius:18px}.dq-principle-grid article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#45d0bc;color:#06232e;font-weight:900}.dq-principle-grid strong{display:block;font-size:1.1rem;margin-top:10px}.dq-principle-grid p{margin:4px 0;color:#d9eef2}.dq-coach-picker{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px}.dq-coach-picker button{border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:white;border-radius:18px;padding:12px;display:grid;gap:7px;justify-items:center;cursor:pointer}.dq-coach-picker button.selected{border-color:#6ee7d8;background:rgba(39,190,170,.2)}.dq-coach-picker img{width:72px;height:82px;border-radius:14px;object-fit:cover;object-position:top}.dq-coach-picker span{font-size:2.2rem}.dq-coach-picker small{color:#cce9ed}.dq-intro-skip{display:block;margin:12px auto 0;border:0;background:transparent;color:#59717d;text-decoration:underline;cursor:pointer}

@media(max-width:900px){.avatar-creator{grid-template-columns:1fr}.avatar-studio-preview{position:relative;top:auto}.avatar-builder-tabs{top:0}.dq-cinema{padding:0 12px}.dq-cinema-top{display:grid;padding:22px}.dq-cinema-progress{width:100%}.dq-cinema-stage,.dq-cinema-scene{min-height:520px}.dq-cinema-scene{padding:24px}.dq-principle-grid{grid-template-columns:1fr 1fr}.dq-coach-picker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.avatar-option-grid,.avatar-option-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.dq-cinema-stage,.dq-cinema-scene{min-height:600px}.dq-cinema-scene{padding:20px 16px}.dq-scene-characters{gap:14px}.avatar-cinema{width:125px;height:185px}.dq-coach-character img{width:115px;height:160px}.dq-example-duel{grid-template-columns:1fr}.dq-story-choice{grid-template-columns:1fr}.dq-principle-grid{grid-template-columns:1fr 1fr}.dq-coach-picker{grid-template-columns:repeat(2,1fr)}.dq-cinema-top h1{font-size:2rem}}

/* V11.6 floating mission coach */
.dq-mission-coach{position:fixed;right:18px;bottom:18px;z-index:2200;display:grid;grid-template-columns:auto minmax(240px,360px);gap:10px;align-items:end;max-width:min(440px,calc(100vw - 28px));filter:drop-shadow(0 16px 30px rgba(15,42,55,.22));transition:transform .2s ease,opacity .2s ease}.dq-coach-face{position:relative;width:82px;height:96px;border-radius:20px 20px 9px 20px;overflow:hidden;border:3px solid white;background:#e7f5f3}.dq-coach-face img{width:100%;height:100%;object-fit:cover;object-position:top}.dq-coach-face span{position:absolute;right:3px;bottom:3px;background:white;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.dq-coach-bubble{position:relative;background:white;border:1px solid #d8e6ea;border-radius:20px 20px 6px 20px;padding:13px 14px;color:#18394c}.dq-coach-bubble::after{content:"";position:absolute;left:-10px;bottom:16px;border-width:10px 10px 0 0;border-style:solid;border-color:white transparent transparent transparent}.dq-coach-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.dq-coach-meta strong{color:#0b6c65}.dq-coach-meta small{color:#627986}.dq-coach-meta em{margin-left:auto;font-style:normal;font-size:11px;font-weight:900;color:#437281}.dq-coach-bubble p{margin:7px 0 10px;line-height:1.42}.dq-coach-actions{display:flex;gap:7px;flex-wrap:wrap}.dq-coach-actions button{border:1px solid #bfd8de;background:#f5fbfb;color:#175b61;border-radius:10px;padding:7px 9px;font-weight:800;cursor:pointer}.dq-coach-actions button:hover{background:#e8f7f4}.dq-coach-minimise{position:absolute;right:4px;top:-14px;z-index:3;border:0;width:30px;height:30px;border-radius:50%;background:#173c55;color:white;font-weight:900;cursor:pointer}.dq-mission-coach[data-state="collapsed"]{grid-template-columns:auto}.dq-mission-coach[data-state="collapsed"] .dq-coach-bubble{display:none}.dq-mission-coach[data-state="collapsed"] .dq-coach-face{width:64px;height:72px}.dq-mission-coach[data-mood="celebrate"]{animation:dqCoachCelebrate .65s ease}.dq-mission-coach[data-mood="think"] .dq-coach-face span{content:"💭"}@keyframes dqCoachCelebrate{0%,100%{transform:translateY(0)}45%{transform:translateY(-10px) rotate(-1deg)}}
@media(max-width:700px){.dq-mission-coach{left:10px;right:10px;bottom:10px;grid-template-columns:54px 1fr;max-width:none}.dq-coach-face{width:54px;height:64px;border-radius:14px}.dq-coach-bubble{padding:10px 11px}.dq-coach-bubble p{font-size:13px;margin:4px 0 7px}.dq-coach-meta small{display:none}.dq-coach-actions button{font-size:12px;padding:6px 8px}.dq-mission-coach[data-state="collapsed"]{left:auto;right:10px}.dq-mission-coach[data-state="collapsed"] .dq-coach-face{width:52px;height:60px}}

/* V11.6 lesson blueprint */
.dq-lesson-blueprint{display:grid;gap:10px;margin:18px 0;padding:16px;border:1px solid #d8e7ec;border-radius:18px;background:#fbfefe}.dq-lesson-blueprint>article{display:grid;gap:4px}.dq-lesson-blueprint>article span{font-size:11px;font-weight:900;letter-spacing:.07em;color:#0f766e}.dq-lesson-blueprint>article strong{font-size:15px;line-height:1.45;color:#173c55}.dq-example-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dq-example-compare article{border-radius:13px;padding:12px}.dq-example-compare .bad{background:#fff1f2;border:1px solid #fecdd3;color:#7f1d1d}.dq-example-compare .good{background:#ecfdf5;border:1px solid #bbf7d0;color:#14532d}.dq-example-compare small{font-weight:900}.dq-example-compare p{margin:4px 0 0;line-height:1.4}.dq-blueprint-question{margin:0;padding-top:4px;color:#385c6b;font-weight:800}.mission-launch .dq-lesson-blueprint{max-width:760px}
@media(max-width:700px){.dq-example-compare{grid-template-columns:1fr}}

/* V11.6 learner avatar and teaching coach are separate identities */
.dq-inline-coach{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;border-radius:20px;overflow:visible;background:#e9f7f4;border:3px solid #fff;box-shadow:0 8px 20px rgba(22,63,82,.14)}
.dq-inline-coach img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:inherit;display:block}
.dq-inline-coach i{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;font-style:normal;font-size:14px;box-shadow:0 4px 10px rgba(23,60,85,.15)}
.dq-inline-coach.avatar-guide{width:82px;height:96px}.dq-inline-coach.avatar-guide-mini{width:52px;height:58px;border-radius:14px}.dq-inline-coach.avatar-full{width:126px;height:150px}
.dq-inline-coach.avatar-mood-celebrate,.dq-inline-coach.avatar-mood-bounce{animation:dqCoachMiniBounce .7s ease}
@keyframes dqCoachMiniBounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}}
/* Avatar eyebrow choices */
.avatar-brows-natural .avatar-eyebrow{height:1.3%;border-radius:999px;opacity:.86}
.avatar-brows-straight .avatar-eyebrow{height:1.1%;border-radius:999px;transform:none!important}
.avatar-brows-arched .avatar-eyebrow{height:1.6%;border-radius:70% 70% 20% 20%;transform:translateY(-1px) rotate(-5deg)}
.avatar-brows-arched .avatar-eyebrow-right{transform:translateY(-1px) rotate(5deg)}
.avatar-brows-bold .avatar-eyebrow{height:2%;border-radius:999px;opacity:1}
.dq-coach-face[data-coach-drag]{cursor:grab;touch-action:none}.dq-mission-coach.is-dragging{user-select:none;filter:drop-shadow(0 20px 36px rgba(15,42,55,.3))}.dq-mission-coach.is-dragging .dq-coach-face{cursor:grabbing}
@media(max-width:700px){.dq-coach-face[data-coach-drag]{cursor:default;touch-action:auto}}
.dq-coach-show-target{position:relative;z-index:5;outline:4px solid rgba(15,118,110,.38)!important;outline-offset:5px;animation:dqCoachTargetPulse .8s ease 2}
@keyframes dqCoachTargetPulse{0%,100%{box-shadow:0 0 0 0 rgba(20,184,166,.25)}50%{box-shadow:0 0 0 12px rgba(20,184,166,0)}}
.dq-example-compare button{border-radius:13px;padding:12px;text-align:left;font:inherit;cursor:pointer;transition:.18s ease}.dq-example-compare button:hover,.dq-example-compare button:focus-visible{transform:translateY(-1px);outline:3px solid rgba(15,118,110,.12);outline-offset:2px}.dq-example-compare button.selected{box-shadow:inset 0 0 0 2px #16a085,0 6px 16px rgba(15,118,110,.12)}.dq-example-compare button.wrong{box-shadow:inset 0 0 0 2px #dc5b65}.dq-blueprint-question em{display:block;margin-top:4px;font-style:normal;font-weight:600;color:#6a808a}


/* V11.6.3 Assessment Intelligence */
.assessment-intelligence-pill { display:grid; grid-template-columns:auto auto 1fr; gap:7px 10px; align-items:center; width:fit-content; max-width:100%; margin:10px 0 4px; padding:9px 11px; border-radius:13px; border:1px solid #d8e4ea; background:#fff; }
.assessment-intelligence-pill span { font-size:10px; font-weight:900; letter-spacing:.06em; }
.assessment-intelligence-pill strong { font-size:12px; }
.assessment-intelligence-pill small { grid-column:1/-1; color:#64748b; line-height:1.35; }
.assessment-intelligence-pill.difficulty-supported,.quiz-difficulty.difficulty-supported { background:#eef7ff; color:#245f8d; border-color:#bed9ec; }
.assessment-intelligence-pill.difficulty-standard,.quiz-difficulty.difficulty-standard { background:#f4f6f8; color:#536572; border-color:#dce3e7; }
.assessment-intelligence-pill.difficulty-application,.quiz-difficulty.difficulty-application { background:#fff7e7; color:#8a5a0a; border-color:#f1d499; }
.assessment-intelligence-pill.difficulty-mastery,.quiz-difficulty.difficulty-mastery { background:#f4ecff; color:#6840a5; border-color:#d9c2f7; }
.mixed-quiz-top > div { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.quiz-difficulty { display:inline-flex; align-items:center; min-height:26px; padding:5px 8px; border:1px solid transparent; border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.06em; }
@media (max-width:700px) { .assessment-intelligence-pill { width:100%; } }

/* V11.8.2 Level 1 Visual Interaction Engine */
.dq-blueprint-interaction-host{margin-top:18px}
.g8-interaction{border:1px solid #dbe7f4;border-radius:22px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);padding:18px;box-shadow:0 14px 34px rgba(26,64,113,.08);overflow:hidden}
.g8-interaction.complete{border-color:#b8e7cc;background:linear-gradient(180deg,#ffffff 0%,#f2fff7 100%)}
.g8i-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-bottom:16px}.g8i-badge{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:1.8rem;background:#eef6ff;border:1px solid #d7e7fb}.g8i-head span{font-size:.72rem;letter-spacing:.12em;font-weight:800;color:#58708c}.g8i-head h3{margin:3px 0 4px;font-size:1.05rem;line-height:1.35}.g8i-head p{margin:0;color:#64748b;font-size:.9rem;line-height:1.45}
.g8i-stage{display:grid;gap:14px}.g8i-choice-grid,.g8i-scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.g8i-card{appearance:none;border:1px solid #dce6f2;background:#fff;border-radius:16px;padding:13px;text-align:left;display:flex;gap:11px;align-items:flex-start;cursor:pointer;min-height:82px;transition:.18s ease}.g8i-card:hover,.g8i-card:focus-visible{transform:translateY(-2px);border-color:#8fb8f0;box-shadow:0 8px 20px rgba(35,87,147,.1);outline:none}.g8i-card.selected,.g8i-card.visited{border-color:#4f8fe8;background:#f2f7ff}.g8i-card.correct{border-color:#2fb36d;background:#f0fff7}.g8i-card.wrong{border-color:#e37a7a;background:#fff6f6}.g8i-icon{font-size:1.55rem;line-height:1}.g8i-card strong{display:block;font-size:.93rem}.g8i-card small{display:block;margin-top:4px;color:#66758a;line-height:1.35}
.g8i-sort-source{display:flex;gap:8px;flex-wrap:wrap;padding:12px;border:1px dashed #b9cbe0;border-radius:16px;background:#f8fbff}.g8i-sort-card{border:1px solid #d8e4f0;background:#fff;border-radius:999px;padding:9px 12px;display:flex;align-items:center;gap:7px;cursor:pointer}.g8i-sort-card.selected{outline:3px solid rgba(79,143,232,.18);border-color:#4f8fe8}.g8i-sort-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.g8i-bin{border:1px solid #dbe6f1;border-radius:16px;background:#fff;min-height:120px;padding:11px}.g8i-bin>strong{display:block;margin-bottom:8px}.g8i-bin>div{display:flex;gap:6px;flex-wrap:wrap;min-height:65px}.g8i-bin.drag-over{border-color:#4f8fe8;background:#f2f7ff}.g8i-bin .g8i-sort-card{border-radius:12px;background:#f7fbff}
.g8i-sequence{display:grid;gap:8px}.g8i-sequence-item{border:1px solid #dbe6f1;background:#fff;border-radius:14px;padding:11px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.g8i-sequence-item.dragging{opacity:.55}.g8i-sequence-item>span{font-size:1.35rem}.g8i-sequence-item>div{display:flex;gap:4px}.g8i-sequence-item button{width:32px;height:32px;border:1px solid #d3dfeb;border-radius:9px;background:#f8fbff;cursor:pointer}
.g8i-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #e5edf6;margin-top:15px;padding-top:13px}.g8i-footer p{margin:0;color:#52657a;font-size:.88rem;line-height:1.4}.g8i-meter{display:grid;gap:6px}.g8i-meter span{font-size:.82rem;color:#5f7287;font-weight:700}.g8i-meter>div{height:8px;border-radius:999px;background:#e6eef7;overflow:hidden}.g8i-meter i{display:block;height:100%;background:linear-gradient(90deg,#4f8fe8,#32b878);border-radius:inherit;transition:width .25s ease}
@media(max-width:760px){.g8i-choice-grid,.g8i-scene-grid{grid-template-columns:1fr}.g8i-footer{align-items:stretch;flex-direction:column}.g8i-sort-bins{grid-template-columns:1fr}.g8i-head{grid-template-columns:1fr}.g8i-badge{width:48px;height:48px;border-radius:14px}}

/* V11.8.3 Focused Learning Layout: Level 1 + shared attention system */
.dq-body-lesson .app-main{max-width:none;width:100%;padding:12px clamp(10px,2vw,22px) 28px}
.dq-body-lesson .topbar{min-height:66px;padding:8px clamp(10px,2vw,22px);grid-template-columns:auto 1fr auto;gap:10px}
.dq-body-lesson .topbar .topnav{justify-self:start;background:transparent;border:0;padding:0}
.dq-body-lesson .topbar .topnav a{display:none}
.dq-body-lesson .topbar .topnav a:first-child{display:flex;min-height:38px;padding:0 12px;background:#eef7f7;color:var(--teal-dark)}
.dq-body-lesson .avatar-button-static span,.dq-body-lesson .logout-link{font-size:11px}
.dq-body-lesson .avatar-button-static span small{display:none}

.mission-shell-focused{display:block!important;grid-template-columns:1fr!important;min-height:calc(100vh - 96px);border-radius:22px;overflow:hidden;background:#f4f8fa}
.mission-stage-focused{width:100%;min-width:0;background:#f4f8fa}
.focused-lesson-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px clamp(14px,2vw,22px);background:#fff;border-bottom:1px solid var(--line)}
.focused-lesson-context{display:flex;align-items:center;gap:14px;min-width:0}.focused-lesson-context>div{display:grid;gap:2px;min-width:0}.focused-lesson-context small{font-size:10px;font-weight:900;letter-spacing:.08em;color:#64748b}.focused-lesson-context strong{font-size:16px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focused-map-link{flex:0 0 auto;text-decoration:none;color:var(--teal-dark);font-size:12px;font-weight:900;padding:9px 11px;border-radius:11px;background:#edf8f7}
.focused-lesson-status{display:flex;align-items:center;gap:8px;flex:0 0 auto}.focused-lesson-status>span{display:grid;gap:1px;min-width:70px;padding:7px 10px;border:1px solid #deeaee;border-radius:11px;background:#fbfdfe}.focused-lesson-status small{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#718291;font-weight:900}.focused-lesson-status strong{font-size:13px;color:#153a51}.focused-lesson-status .timer{display:flex;align-items:center;gap:5px;min-width:auto}
.focused-progress-track{margin:0;padding:0;background:#fff}.focused-progress-track>div{height:4px;border-radius:0;background:#e7eff2}.focused-progress-track i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#3b82f6);transition:width .22s ease}
.focused-stage-strip{grid-template-columns:repeat(4,minmax(0,1fr));padding:7px clamp(10px,2vw,18px);gap:5px;background:#fff}.focused-stage-strip span{min-height:34px;border-radius:10px}.focused-stage-strip strong{font-size:11px}.focused-stage-strip i{width:22px;height:22px;font-size:10px}
.focused-coach-line{display:flex;align-items:center;gap:7px;min-height:40px;padding:7px clamp(14px,2vw,22px);background:#eef9f6;border-bottom:1px solid #d9ece7;color:#31566a}.focused-coach-line>span{font-size:17px}.focused-coach-line strong{font-size:11px;color:#0f766e}.focused-coach-line small{font-size:12px;line-height:1.35;color:#466676;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mission-app-focused{padding:clamp(12px,2vw,22px);min-height:620px}

.focused-workbench{display:block!important}.focused-workbench .lesson-workspace{width:100%;max-width:1280px;margin:0 auto}.focused-view-tabs{max-width:430px;margin:0 auto 12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;border:1px solid #dce7eb;border-radius:14px;background:#fff}.focused-view-tabs button{min-height:48px;border-radius:10px}.focused-view-tabs small{font-size:9px}.visual-lesson-toolbar{padding:10px 14px}.visual-section-actions{font-size:10px}.visual-lesson-heading{align-items:flex-start;gap:14px}.visual-lesson-heading h2{font-size:clamp(24px,3vw,34px)}.visual-mission-chip{max-width:390px;padding:10px 12px}.interactive-visual-stage{box-shadow:0 14px 34px rgba(15,43,73,.08)}
.lesson-full-explanation,.focused-extra-learning{margin-top:12px;border:1px solid #dce7eb;border-radius:13px;background:#fff}.lesson-full-explanation summary,.focused-extra-learning>summary{cursor:pointer;padding:11px 13px;font-weight:900;color:#31566a}.focused-extra-learning>div{padding:0 12px 12px}.visual-vocabulary{opacity:.92}.hotspot-completion-bar{margin-top:12px}.visual-tab-actions{margin-top:12px}.visual-lesson-navigation{margin-top:14px}

/* One active visual cue at a time. */
.dq-guided-click,.dq-attention-target{position:relative!important;z-index:12!important;isolation:isolate;outline:3px solid rgba(14,165,233,.34)!important;outline-offset:3px;box-shadow:0 0 0 6px rgba(14,165,233,.08),0 10px 28px rgba(15,90,140,.16)!important}
.dq-guided-click{animation:dqFocusPulse 1.55s ease-in-out infinite}.dq-attention-subtle{animation:none!important;outline-width:2px!important}.dq-attention-showme{animation:dqFocusPulse .9s ease-in-out infinite!important;outline-color:#f59e0b!important;box-shadow:0 0 0 7px rgba(245,158,11,.12),0 12px 30px rgba(120,72,10,.16)!important}
.dq-click-me-badge,.dq-guided-click>em{position:absolute;z-index:50;right:-6px;top:-12px;display:inline-flex;align-items:center;justify-content:center;min-height:23px;padding:3px 8px;border-radius:999px;background:#0ea5e9;color:#fff;font-style:normal;font-size:9px;font-weight:1000;letter-spacing:.06em;white-space:nowrap;box-shadow:0 5px 14px rgba(2,132,199,.25);pointer-events:none}.dq-attention-showme>.dq-click-me-badge{background:#f59e0b;color:#4b2d04}
@keyframes dqFocusPulse{0%,100%{transform:translateY(0);filter:none}50%{transform:translateY(-2px);filter:brightness(1.03)}}
@media (prefers-reduced-motion:reduce){.dq-guided-click,.dq-attention-target,.dq-attention-showme{animation:none!important;transition:none!important}}

/* Focused question flow used by legacy Level 1 practical checkpoints. */
.focused-question-heading{max-width:920px;margin:0 auto 14px}.dq-question-focus{max-width:860px;margin:0 auto}.dq-question-focus-top{display:grid;gap:7px;margin-bottom:10px}.dq-question-focus-top>span{font-size:11px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.dq-question-focus-top>div{height:6px;border-radius:999px;background:#e4edf2;overflow:hidden}.dq-question-focus-top i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),#3b82f6)}.dq-single-question{padding:clamp(18px,3vw,28px)!important}.dq-single-question>strong{display:block;font-size:clamp(18px,2.5vw,24px);line-height:1.4;color:var(--navy);margin-bottom:14px}.dq-single-question .option-grid{grid-template-columns:1fr;gap:9px;margin-top:0}.dq-single-question .option-card{min-height:58px;display:flex;align-items:center;gap:11px;text-align:left}.dq-single-question .option-card>span{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eaf2f5;font-weight:900}.dq-question-focus-actions{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px}.dq-question-focus-actions>span{text-align:center;font-size:11px;color:#64748b;font-weight:800}

/* Keep practical support secondary to the workspace. */
.dq-support-panel-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #dce7eb;border-radius:12px;background:#f7fbfc;padding:10px 12px;color:#31566a;font-weight:900;cursor:pointer}.dq-support-panel.is-collapsed>*:not(.dq-support-panel-toggle){display:none!important}
.dq-body-lesson .office-task-layout,.dq-body-lesson .ppt-task-layout{grid-template-columns:minmax(0,1fr)!important}.dq-body-lesson .office-checklist,.dq-body-lesson .ppt-learning-panel{position:relative!important;top:auto!important;max-width:none!important}

@media(max-width:820px){
  .dq-body-lesson .topbar{grid-template-columns:auto auto;justify-content:space-between}.dq-body-lesson .topbar .topnav{display:none}.dq-body-lesson .avatar-button-static{padding:4px}.dq-body-lesson .avatar-button-static span,.dq-body-lesson .logout-link{display:none}
  .focused-lesson-header{align-items:flex-start}.focused-lesson-status>span:nth-child(2),.focused-lesson-status .timer{display:none}.focused-lesson-context strong{white-space:normal}.focused-stage-strip strong{display:none}.focused-stage-strip span{min-height:32px}.focused-coach-line small{white-space:normal}.visual-lesson-heading{display:grid}.visual-mission-chip{max-width:none}.dq-question-focus-actions{grid-template-columns:1fr 1fr}.dq-question-focus-actions>span{grid-column:1/-1;grid-row:1}.dq-question-focus-actions button{width:100%}
}
@media(max-width:520px){
  .dq-body-lesson .app-main{padding:6px}.mission-shell-focused{border-radius:14px}.focused-lesson-header{padding:10px}.focused-map-link{font-size:0}.focused-map-link::before{content:'←';font-size:16px}.focused-lesson-status>span{min-width:60px;padding:6px 8px}.mission-app-focused{padding:9px}.focused-coach-line{padding-inline:10px}.focused-view-tabs{max-width:none}.visual-lesson-toolbar{padding:8px 10px}.visual-section-actions{display:none}.interactive-visual-stage{border-radius:15px}.dq-click-me-badge,.dq-guided-click>em{font-size:8px;right:0}
}

/* V11.8.3 briefing cleanup: do not compete with the lesson itself. */
.dq-body-lesson .mission-launch{max-width:1180px;margin:0 auto;grid-template-columns:minmax(0,1fr);gap:16px}.dq-body-lesson .mission-launch .launch-visual{max-width:760px;margin:0 auto;width:100%}.dq-body-lesson .launch-rewards,.dq-body-lesson .launch-goals{display:none!important}.dq-body-lesson .launch-footer{justify-content:flex-end}.dq-body-lesson .launch-footer>div{display:none}.dq-body-lesson .launch-copy{max-width:1000px;margin:0 auto}.dq-body-lesson .launch-summary{max-width:760px}.dq-body-lesson .dq-lesson-blueprint{grid-template-columns:1fr 1fr;gap:10px}.dq-body-lesson .dq-example-compare{grid-column:1/-1}.dq-body-lesson .dq-blueprint-question{grid-column:1/-1}.dq-body-lesson .lesson-companion-welcome{padding:12px 14px}.dq-body-lesson .launch-button{min-width:190px}
@media(max-width:700px){.dq-body-lesson .dq-lesson-blueprint{grid-template-columns:1fr}.dq-body-lesson .dq-example-compare,.dq-body-lesson .dq-blueprint-question{grid-column:auto}.dq-body-lesson .mission-launch .launch-visual{display:none}}

/* V11.8.4 Full Width Learning Repair
   Preserve the V11.8.3 focused-learning flow, but restore the wide lesson canvas
   used by earlier builds. This changes presentation only, not lesson logic. */
.dq-body-lesson .focused-workbench .lesson-workspace,
.dq-body-lesson .mission-launch,
.dq-body-lesson .launch-copy,
.dq-body-lesson .launch-summary,
.dq-body-lesson .mission-launch .launch-visual,
.dq-body-lesson .focused-question-heading,
.dq-body-lesson .dq-question-focus {
    width:100%;
    max-width:none;
}
.dq-body-lesson .mission-launch,
.dq-body-lesson .launch-copy,
.dq-body-lesson .mission-launch .launch-visual,
.dq-body-lesson .focused-question-heading,
.dq-body-lesson .dq-question-focus {
    margin-left:0;
    margin-right:0;
}

/* V11.8.7 Review, Resume and Coach Comfort */
.dq-loading-card{
    width:min(590px,calc(100vw - 32px));
    grid-template-columns:92px minmax(0,1fr);
    gap:18px 22px;
    padding:28px;
    border-radius:26px;
}
.dq-loading-visual{position:relative;width:92px;height:92px;display:grid;place-items:center}
.dq-loading-visual>.dq-loading-logo{position:relative;z-index:2;width:62px;height:62px;border-radius:19px;font-size:18px;box-shadow:0 10px 24px rgba(15,118,110,.2)}
.dq-loading-visual>i{position:absolute;inset:5px;border:1px solid rgba(20,184,166,.24);border-radius:50%;animation:dqLoadingOrbit 2.4s linear infinite}
.dq-loading-visual>i:nth-child(2){inset:13px;border-color:rgba(37,99,235,.22);animation-direction:reverse;animation-duration:1.9s}
.dq-loading-visual>i:nth-child(3){inset:0;border-style:dashed;animation-duration:3.1s}
.dq-loading-copy{display:grid;align-content:center;gap:5px;min-width:0}
.dq-loading-copy small{font-size:10px;font-weight:1000;letter-spacing:.12em;color:#0f766e}
.dq-loading-card .dq-loading-copy strong{font-size:clamp(20px,2.4vw,28px);line-height:1.15;color:#123a51}
.dq-loading-card .dq-loading-copy span{font-size:14px;line-height:1.45;color:#607887}
.dq-loading-card .dq-loading-track{grid-column:1/-1;height:9px}
.dq-loading-checks{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dq-loading-checks span{display:flex;align-items:center;justify-content:center;min-height:36px;padding:7px 9px;border-radius:11px;background:#f1f8f8;color:#436572;font-size:11px!important;font-weight:850;text-align:center}
@keyframes dqLoadingOrbit{to{transform:rotate(360deg)}}

/* Coach is deliberately easier to read by default. The learner can make it smaller or larger. */
.dq-mission-coach{grid-template-columns:auto minmax(300px,430px);max-width:min(550px,calc(100vw - 28px));gap:12px}
.dq-coach-face{width:98px;height:116px}
.dq-coach-bubble{padding:16px 17px}
.dq-coach-meta strong{font-size:16px}.dq-coach-meta small{font-size:12px}.dq-coach-bubble p{font-size:15px;line-height:1.5;margin:9px 0 12px}
.dq-coach-actions button{min-height:38px;padding:8px 11px;font-size:13px}
.dq-coach-settings,.dq-coach-minimise{position:absolute;z-index:4;border:0;width:32px;height:32px;border-radius:50%;background:#173c55;color:white;font-weight:900;cursor:pointer;display:grid;place-items:center}
.dq-coach-settings{right:42px;top:-15px;font-size:14px}.dq-coach-minimise{right:4px;top:-15px}
.dq-coach-size-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e4edef}.dq-coach-size-panel[hidden]{display:none}.dq-coach-size-panel>strong{display:block;margin-bottom:7px;font-size:11px;color:#526b78}.dq-coach-size-panel>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.dq-coach-size-panel button{border:1px solid #d7e5e8;border-radius:9px;background:#f7fbfb;color:#315d65;min-height:34px;font-size:11px;font-weight:850;cursor:pointer}.dq-coach-size-panel button[aria-pressed="true"]{border-color:#0f8f83;background:#e8f8f5;color:#0b6c65}
.dq-mission-coach[data-size="compact"]{grid-template-columns:auto minmax(235px,330px);max-width:min(430px,calc(100vw - 28px));gap:9px}.dq-mission-coach[data-size="compact"] .dq-coach-face{width:72px;height:84px}.dq-mission-coach[data-size="compact"] .dq-coach-bubble{padding:11px 12px}.dq-mission-coach[data-size="compact"] .dq-coach-bubble p{font-size:13px;margin:5px 0 8px}.dq-mission-coach[data-size="compact"] .dq-coach-meta strong{font-size:14px}
.dq-mission-coach[data-size="large"]{grid-template-columns:auto minmax(360px,510px);max-width:min(650px,calc(100vw - 28px));gap:14px}.dq-mission-coach[data-size="large"] .dq-coach-face{width:116px;height:138px}.dq-mission-coach[data-size="large"] .dq-coach-bubble{padding:18px 20px}.dq-mission-coach[data-size="large"] .dq-coach-bubble p{font-size:17px;line-height:1.55}.dq-mission-coach[data-size="large"] .dq-coach-meta strong{font-size:18px}.dq-mission-coach[data-size="large"] .dq-coach-meta small{font-size:13px}
.dq-mission-coach[data-state="collapsed"] .dq-coach-settings{display:none}
@media(max-width:700px){
    .dq-loading-card{grid-template-columns:64px 1fr;padding:20px;gap:14px}.dq-loading-visual{width:64px;height:64px}.dq-loading-visual>.dq-loading-logo{width:50px;height:50px}.dq-loading-checks{grid-template-columns:1fr}.dq-loading-checks span:nth-child(n+2){display:none}
    .dq-mission-coach,.dq-mission-coach[data-size="compact"],.dq-mission-coach[data-size="large"]{left:10px;right:10px;bottom:10px;grid-template-columns:58px 1fr;max-width:none}.dq-mission-coach .dq-coach-face,.dq-mission-coach[data-size="compact"] .dq-coach-face,.dq-mission-coach[data-size="large"] .dq-coach-face{width:58px;height:68px}.dq-mission-coach .dq-coach-bubble,.dq-mission-coach[data-size="large"] .dq-coach-bubble{padding:11px 12px}.dq-mission-coach .dq-coach-bubble p,.dq-mission-coach[data-size="large"] .dq-coach-bubble p{font-size:13px;line-height:1.42;margin:5px 0 8px}.dq-coach-settings{right:40px;top:-13px}.dq-coach-minimise{top:-13px}
}
@media(prefers-reduced-motion:reduce){.dq-loading-visual>i{animation:none}}

/* v11.9.0 durable persistence status, visible only while saving/offline/pending. */
.dq-sync-indicator{position:fixed;left:18px;bottom:18px;z-index:12000;display:flex;align-items:center;gap:9px;max-width:min(420px,calc(100vw - 36px));padding:10px 14px;border:1px solid rgba(24,65,82,.14);border-radius:999px;background:rgba(255,255,255,.97);box-shadow:0 10px 30px rgba(15,49,64,.16);font-size:.88rem;font-weight:800;color:#294c5d;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.dq-sync-indicator.visible{opacity:1;transform:translateY(0)}.dq-sync-indicator i{width:10px;height:10px;border-radius:50%;background:#149b83;box-shadow:0 0 0 4px rgba(20,155,131,.12);flex:0 0 auto}.dq-sync-indicator.saving i{background:#1f89bd;box-shadow:0 0 0 4px rgba(31,137,189,.13);animation:dqSyncPulse 1s ease-in-out infinite}.dq-sync-indicator.pending i{background:#d39a20;box-shadow:0 0 0 4px rgba(211,154,32,.13)}.dq-sync-indicator.offline i{background:#c6534a;box-shadow:0 0 0 4px rgba(198,83,74,.12)}@keyframes dqSyncPulse{50%{transform:scale(.72);opacity:.62}}@media(max-width:620px){.dq-sync-indicator{left:12px;bottom:12px;max-width:calc(100vw - 24px);font-size:.82rem;padding:9px 12px}}

.dq-offline-recovery-modal{position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:24px;background:rgba(7,31,45,.6);backdrop-filter:blur(5px)}.dq-offline-recovery-modal>section{width:min(720px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr;gap:20px;background:#fff;border-radius:24px;padding:26px;box-shadow:0 28px 80px rgba(10,45,61,.3)}.dq-offline-recovery-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:#e8f8f5;font-size:30px}.dq-offline-recovery-modal small{font-weight:800;letter-spacing:.08em;color:#10867d}.dq-offline-recovery-modal h2{margin:5px 0 8px;color:#17394f}.dq-offline-recovery-modal p{color:#526f80;line-height:1.6}.dq-offline-recovery-stats{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.dq-offline-recovery-stats span{padding:10px 12px;border-radius:12px;background:#f1f8f9;color:#365667}.dq-offline-recovery-actions{display:flex;flex-wrap:wrap;gap:10px}.dq-offline-recovery-note{display:block;margin-top:14px!important;color:#6d8290!important;letter-spacing:0!important;line-height:1.5}@media(max-width:640px){.dq-offline-recovery-modal{padding:14px}.dq-offline-recovery-modal>section{grid-template-columns:1fr;padding:20px;border-radius:18px}.dq-offline-recovery-actions>*{width:100%}}

/* v12 Continuous Learning: sync/offline visibility and account controls */
.dq-network-notice{position:fixed;left:50%;bottom:22px;transform:translate(-50%,24px);z-index:10030;display:flex;align-items:center;gap:12px;min-width:min(520px,calc(100vw - 28px));max-width:720px;padding:13px 15px;border:1px solid #cbdfe3;border-radius:16px;background:#fff;box-shadow:0 16px 50px rgba(14,42,54,.18);opacity:0;pointer-events:none;transition:.22s ease}.dq-network-notice.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}.dq-network-notice>span{font-size:24px}.dq-network-notice div{display:grid;gap:2px;flex:1}.dq-network-notice strong{color:#17394f}.dq-network-notice small{color:#536f7c;font-size:.88rem}.dq-network-notice button{border:0;background:transparent;font-size:22px;color:#6f828b;cursor:pointer}.dq-network-notice.offline{border-color:#f1c28e;background:#fff8ef}.dq-network-notice.reconnecting,.dq-network-notice.syncing{border-color:#a9d8d2;background:#f2fbf9}.dq-network-notice.saved{border-color:#a9dcc7;background:#f3fbf7}.dq-network-notice.newer{border-color:#b9c9ee;background:#f5f7ff}
.dq-account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:20px 0}.dq-account-card{background:#fff;border:1px solid #d9e6e9;border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(20,54,67,.06)}.dq-account-card h3{margin:.2rem 0 .5rem}.dq-account-card label{display:grid;gap:7px;margin:12px 0;color:#294c5d;font-weight:700}.dq-account-card select,.dq-account-card input[type=text]{width:100%;min-height:44px;border:1px solid #bdcfd5;border-radius:10px;padding:8px 11px;background:#fff}.dq-pref-toggle{display:flex!important;grid-template-columns:none!important;align-items:center;justify-content:space-between;gap:16px}.dq-pref-toggle input{width:44px;height:24px}.dq-sync-health{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#eef8f7;color:#245a58}.dq-profile-shell{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:24px;align-items:start}.dq-profile-shell .avatar-studio{margin:0}.dq-device-list{display:grid;gap:10px;margin-top:12px}.dq-device-row{display:flex;justify-content:space-between;gap:16px;padding:12px;border:1px solid #e0eaed;border-radius:12px;background:#fbfdfd}.dq-device-row small{display:block;color:#70848d}.dq-sync-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
html.dq-high-contrast body{filter:contrast(1.08)}html.dq-reduced-motion *,html.dq-reduced-motion *::before,html.dq-reduced-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}html[data-dq-density="compact"] .content-card,html[data-dq-density="compact"] .g9-settings-card{padding-top:14px!important;padding-bottom:14px!important}
@media(max-width:760px){.dq-profile-shell{grid-template-columns:1fr}.dq-network-notice{bottom:12px}.dq-account-grid{grid-template-columns:1fr}}

/* V12.2 Academic save feedback */
.focused-save-state{
    display:inline-flex!important;align-items:center;justify-content:center;min-width:76px!important;min-height:36px;padding:7px 10px!important;
    border:1px solid #d8e6e8!important;border-radius:999px!important;background:#f3faf8!important;color:#176b5b!important;font-size:11px;font-weight:900;white-space:nowrap;
}
.focused-save-state[data-state="saving"],.focused-save-state[data-state="pending"]{background:#f5f8fb!important;color:#496577!important;border-color:#dce6eb!important}
.focused-save-state[data-state="error"]{background:#fff7ed!important;color:#9a4c12!important;border-color:#fed7aa!important}
.dq-save-failure-dialog{width:min(470px,calc(100vw - 28px));padding:0;border:0;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(8,41,59,.25)}
.dq-save-failure-dialog::backdrop{background:rgba(7,27,42,.48);backdrop-filter:blur(2px)}
.dq-save-failure-card{padding:22px}.dq-save-failure-card h2{margin:0 0 9px;color:var(--navy);font-size:22px}.dq-save-failure-card p{margin:7px 0;color:#4a6575;line-height:1.5}.dq-save-failure-reference{padding:9px 10px;border-radius:10px;background:#f5f8fb;color:#31566a!important;font-size:11px;font-weight:850;word-break:break-word}.dq-save-failure-actions{display:flex;justify-content:flex-end;margin-top:16px}.dq-primary-button{min-height:42px;padding:9px 14px;border:0;border-radius:11px;background:var(--navy);color:#fff;font-weight:900;cursor:pointer}.dq-primary-button:disabled{opacity:.65;cursor:wait}
.quiet-result-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 11px;color:#486678;text-decoration:none;font-size:11px;font-weight:850}.lesson-auto-advance{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto;padding:9px 11px;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:12px;background:#f7fbfc;color:#466676;font-size:11px;font-weight:800}.lesson-auto-advance button{border:0;background:transparent;color:var(--teal-dark);font-weight:900;cursor:pointer}
@media(max-width:520px){.focused-save-state{min-width:62px!important;padding:6px 8px!important}.dq-save-failure-card{padding:18px}.dq-save-failure-actions .dq-primary-button{width:100%}}
.dq-unsaved-leave-dialog{width:min(470px,calc(100vw - 28px));padding:0;border:0;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(8,41,59,.25)}
.dq-unsaved-leave-dialog::backdrop{background:rgba(7,27,42,.48);backdrop-filter:blur(2px)}
.dq-unsaved-leave-card{padding:22px}.dq-unsaved-leave-card h2{margin:0 0 9px;color:var(--navy);font-size:22px}.dq-unsaved-leave-card p{margin:0;color:#4a6575;line-height:1.55}.dq-unsaved-leave-card>div{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.dq-unsaved-leave-card>div>button:first-child{min-height:42px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#36586a;font-weight:850;cursor:pointer}
@media(max-width:520px){.dq-unsaved-leave-card{padding:18px}.dq-unsaved-leave-card>div{display:grid;grid-template-columns:1fr}.dq-unsaved-leave-card button{width:100%}}

/* V12.3.2 Compact sticky learner header: Level 1
   Presentation-only. Existing lesson material widths, activity layouts and persistence logic remain unchanged. */
.dq-body-lesson .topbar{display:none!important}
.dq-body-lesson .app-main{padding-top:8px!important}
.focused-learner-header{
    position:sticky;
    top:0;
    z-index:145;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid #dce8eb;
    box-shadow:0 10px 28px rgba(15,45,73,.08);
    backdrop-filter:blur(14px);
}
.dq-body-lesson .focused-lesson-header{
    min-height:58px;
    padding:7px clamp(10px,2vw,18px);
    gap:10px;
    border:0;
    background:transparent;
}
.dq-body-lesson .focused-lesson-context{gap:9px}
.dq-body-lesson .focused-map-link{min-height:32px;padding:6px 8px;font-size:10px}
.dq-body-lesson .focused-lesson-context small{font-size:9px}
.dq-body-lesson .focused-lesson-context strong{font-size:15px;line-height:1.2}
.dq-body-lesson .focused-lesson-status{gap:6px}
.dq-body-lesson .focused-metric-progress,
.dq-body-lesson .focused-metric-score,
.dq-body-lesson .focused-lesson-status .timer{display:none!important}
.dq-body-lesson .focused-save-state{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    min-height:32px;
    padding:5px 8px;
    border:1px solid #d8e6e8;
    border-radius:999px;
    background:#f3faf8;
    color:#176b5b;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
}
.dq-body-lesson .focused-save-state[data-state="saving"],
.dq-body-lesson .focused-save-state[data-state="pending"]{background:#f5f8fb;color:#496577;border-color:#dce6eb}
.dq-body-lesson .focused-save-state[data-state="error"]{background:#fff7ed;color:#9a4c12;border-color:#fed7aa}
.dq-body-lesson .focused-progress-track{display:none!important}
.focused-stage-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:9px;
    padding:4px clamp(10px,2vw,18px) 6px;
    border-top:1px solid #e6edef;
}
.focused-stage-caption{font-size:10px;font-weight:900;color:#667f8a;letter-spacing:.04em;white-space:nowrap}
.dq-body-lesson .focused-stage-strip{
    width:100%;
    max-width:640px;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    background:transparent;
}
.dq-body-lesson .focused-stage-strip span{
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:4px 6px;
    border-radius:9px;
    background:transparent;
    color:#718591;
}
.dq-body-lesson .focused-stage-strip span i{
    flex:0 0 20px;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e7eef1;
    color:#607784;
    font-size:9px;
    font-style:normal;
}
.dq-body-lesson .focused-stage-strip span strong{font-size:10px;line-height:1.1}
.dq-body-lesson .focused-stage-strip span.active{background:#eaf8f4;color:#0b765f}
.dq-body-lesson .focused-stage-strip span.active i{background:#149174;color:#fff}
.dq-body-lesson .focused-stage-strip span.done{color:#24745f}
.dq-body-lesson .focused-stage-strip span.done i{font-size:0;background:#dff5ed;color:#11735b}
.dq-body-lesson .focused-stage-strip span.done i::before{content:'✓';font-size:11px;font-weight:1000}
.focused-coach-host{
    min-height:48px;
    border-top:1px solid #e7efef;
    background:#f1faf7;
}
.focused-coach-host .focused-coach-line{border:0;background:transparent;min-height:48px;padding:6px clamp(10px,2vw,18px)}
.focused-coach-host .focused-coach-line[hidden]{display:none!important}

/* Dock the existing Level 1 coach into the sticky header instead of the bottom-right corner. */
.dq-body-lesson .dq-mission-coach[data-placement="header"]{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    min-height:48px;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
    padding:4px clamp(10px,2vw,18px)!important;
    filter:none!important;
    transform:none!important;
    background:transparent;
}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-face{
    width:40px!important;
    height:44px!important;
    border-width:2px!important;
    border-radius:12px!important;
    cursor:default!important;
}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-face span{width:20px;height:20px;font-size:11px}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-bubble{
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:3px 10px;
    padding:2px 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-bubble::after{display:none!important}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-meta{grid-column:1;grid-row:1;gap:5px}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-meta strong{font-size:11px}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-meta small{font-size:9px}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-meta em{font-size:9px;margin-left:4px}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-bubble p{
    grid-column:1;
    grid-row:2;
    min-width:0;
    margin:0!important;
    color:#466676;
    font-size:11px!important;
    line-height:1.25!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-actions{
    grid-column:2;
    grid-row:1/3;
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:nowrap;
}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-actions button{
    min-height:30px;
    padding:5px 7px;
    border-radius:8px;
    font-size:9px;
    white-space:nowrap;
}
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-settings,
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-minimise,
.dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-size-panel{display:none!important}

@media(max-width:760px){
    .dq-body-lesson .app-main{padding:4px!important}
    .mission-shell-focused{border-radius:12px!important}
    .dq-body-lesson .focused-lesson-header{padding:6px 8px}
    .dq-body-lesson .focused-map-link{width:32px;font-size:0;padding:5px}
    .dq-body-lesson .focused-map-link::before{content:'←';font-size:15px}
    .focused-stage-row{grid-template-columns:1fr;padding:3px 7px 5px;gap:2px}
    .focused-stage-caption{display:none}
    .dq-body-lesson .focused-stage-strip{max-width:none}
    .dq-body-lesson .focused-stage-strip span{min-height:30px;padding:3px;gap:4px}
    .dq-body-lesson .focused-stage-strip span strong{font-size:9px}
    .dq-body-lesson .dq-mission-coach[data-placement="header"]{grid-template-columns:36px minmax(0,1fr)!important;padding:4px 8px!important}
    .dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-face{width:34px!important;height:38px!important}
    .dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-bubble{grid-template-columns:minmax(0,1fr) auto;gap:2px 6px}
    .dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-bubble p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-actions button{font-size:0;width:30px;padding:4px}
    .dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-actions [data-coach-hint]::before{content:'💡';font-size:13px}
    .dq-body-lesson .dq-mission-coach[data-placement="header"] .dq-coach-actions [data-coach-show]::before{content:'👀';font-size:13px}
}
@media(max-width:480px){
    .dq-body-lesson .focused-lesson-context small{font-size:8px}
    .dq-body-lesson .focused-lesson-context strong{font-size:13px;white-space:nowrap}
    .dq-body-lesson .focused-save-state{min-width:61px;font-size:9px;padding:5px 6px}
    .dq-body-lesson .focused-stage-strip span strong{display:none}
    .dq-body-lesson .focused-stage-strip span{min-height:28px}
}
/* Sticky needs the lesson shell to remain in the viewport scroll context. */
.dq-body-lesson .mission-shell-focused{overflow:visible!important}

/* V12.3.3 Fixed learner header
   The learner header is pinned to the viewport for the whole lesson. The measured
   header height is reserved below it so existing learning material never sits underneath it. */
.dq-body-lesson{
    --dq-fixed-learner-header-height:142px;
}
.dq-body-lesson .focused-learner-header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:420!important;
}
.dq-body-lesson .mission-stage-focused{
    padding-top:var(--dq-fixed-learner-header-height)!important;
    box-sizing:border-box;
}
@media(max-width:760px){
    .dq-body-lesson{--dq-fixed-learner-header-height:150px}
}

/* V12.4 realistic learner identity + gamified student entry */
.avatar-character.avatar-photo{position:relative;display:inline-flex;align-items:stretch;justify-content:stretch;overflow:hidden;background:#eaf5f4;border:1px solid rgba(15,76,88,.12);box-shadow:0 8px 22px rgba(15,43,73,.12);isolation:isolate}
.avatar-character.avatar-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;z-index:1}
.avatar-character.avatar-photo>.avatar-photo-shine{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.2),transparent 38%,rgba(12,86,91,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.avatar-photo.avatar-mini{border-radius:50%}.avatar-photo.avatar-large,.avatar-photo.avatar-table{border-radius:22px}
.avatar-photo.avatar-full,.avatar-photo.avatar-preview{width:230px;height:300px;border-radius:28px}
.avatar-photo.avatar-cinema{width:170px;height:225px;border-radius:28px;border:4px solid rgba(255,255,255,.88);box-shadow:0 18px 35px rgba(0,0,0,.25)}
.avatar-realistic-studio{display:grid;grid-template-columns:minmax(280px,350px) minmax(0,1fr);gap:24px;align-items:start}
.avatar-realistic-preview{position:sticky;top:88px;border:1px solid #dce9ec;border-radius:24px;padding:20px;background:linear-gradient(180deg,#f8fcfc,#edf7f6);box-shadow:0 18px 42px rgba(15,43,73,.08)}
.avatar-realistic-preview h3{margin:5px 0 7px;color:var(--navy);font-size:1.45rem}.avatar-realistic-preview>p{margin:0;color:var(--muted);line-height:1.5}
.avatar-photo-preview-stage{position:relative;display:grid;place-items:center;min-height:370px;margin-top:16px;padding:24px;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 50% 22%,#fff 0,#f6fbfb 38%,#d9eeeb 100%);border:1px solid #d7e8e7}
.avatar-photo-preview-stage::after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;border:1px solid rgba(15,118,110,.16);top:28px;left:50%;transform:translateX(-50%)}
.avatar-photo-hero{position:relative;z-index:2;width:220px;height:275px;border-radius:28px;overflow:hidden;border:5px solid #fff;box-shadow:0 22px 48px rgba(15,55,72,.22);background:#e9f4f3}
.avatar-photo-hero>img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.avatar-photo-level{position:absolute;z-index:4;bottom:18px;left:18px;right:18px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:15px;background:rgba(7,38,50,.9);color:#fff;backdrop-filter:blur(8px);box-shadow:0 10px 28px rgba(3,30,42,.22)}
.avatar-photo-level>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#18b9aa,#2379d7);font-weight:950}.avatar-photo-level div{display:grid}.avatar-photo-level small{color:#c9e8e7}
.avatar-realistic-panel{min-width:0;border:1px solid #dce7ec;border-radius:24px;padding:20px;background:#fff}.realistic-avatar-note{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:15px;background:#f2fbf9;border:1px solid #ccebe6;margin:10px 0 16px}.realistic-avatar-note>span{font-size:1.4rem}.realistic-avatar-note strong{color:#12564e}.realistic-avatar-note p{margin:3px 0 0;color:#557078;font-size:.9rem;line-height:1.45}
.realistic-avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(92px,1fr));gap:10px;max-height:620px;overflow:auto;padding:3px 4px 8px 2px;scrollbar-width:thin}
.realistic-avatar-option{appearance:none;border:2px solid transparent;border-radius:18px;background:#f7fafb;padding:7px;display:grid;gap:6px;color:#24455a;font:inherit;font-weight:850;cursor:pointer;text-align:center;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.realistic-avatar-option:hover,.realistic-avatar-option:focus-visible{transform:translateY(-2px);border-color:#75cfc5;box-shadow:0 10px 22px rgba(15,80,90,.12);outline:0}.realistic-avatar-option.selected{border-color:#0f766e;background:#eaf8f5;box-shadow:0 0 0 3px rgba(15,118,110,.1)}
.realistic-avatar-thumb{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#e9f4f3}.realistic-avatar-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.realistic-avatar-option>span:last-child{font-size:.75rem}
.avatar-lock-note{white-space:nowrap}
/* Platform-style entry */
.platform-entry-visual{position:relative}.quest-brand-lockup{display:flex;align-items:center;gap:12px;position:relative;z-index:2}.quest-brand-lockup>span{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff;color:#0b5964;font-weight:950;box-shadow:0 12px 25px rgba(0,0,0,.15)}.quest-brand-lockup div{display:grid}.quest-brand-lockup small{color:#c9f1ec;font-weight:800;letter-spacing:.06em}
.entry-avatar-stack{display:flex;align-items:center;margin:24px 0 4px}.entry-avatar-stack .avatar-photo{width:56px;height:56px;border-radius:50%;border:3px solid rgba(255,255,255,.9);margin-left:-12px;box-shadow:0 10px 24px rgba(0,0,0,.16)}.entry-avatar-stack .avatar-photo:first-child{margin-left:0}.entry-avatar-stack>span:last-child{margin-left:12px;color:#dcf8f5;font-weight:800;font-size:.9rem}
.platform-proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.platform-proof-grid span{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.09);font-weight:800;color:#efffff}
.entry-form-head{display:grid;gap:5px;margin-bottom:16px}.entry-form-head .entry-step{display:inline-flex;width:max-content;padding:6px 9px;border-radius:999px;background:#e9f8f6;color:#0f766e;font-size:.72rem;font-weight:950;letter-spacing:.06em}.entry-form-head h2{margin:0!important}.entry-form-head p{margin:0;color:var(--muted);line-height:1.5}
.class-code-input{font-size:1.25rem!important;font-weight:900;letter-spacing:.08em;text-transform:none;text-align:center;border-width:2px!important;padding:16px!important;background:#f7fbfc!important}.class-code-input:focus{background:#fff!important}
.entry-security-note{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 12px;border-radius:13px;background:#f6f9fb;color:#59717e;font-size:.82rem;line-height:1.4}.entry-security-note span{font-size:1.05rem}
/* Gamified dashboard shell */
.learner-command-hero{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);align-items:center!important;gap:28px}.learner-identity{display:flex;align-items:center;gap:20px;position:relative;z-index:2}.learner-identity .avatar-photo{flex:0 0 auto;width:112px;height:132px;border-radius:25px;border:4px solid rgba(255,255,255,.95);box-shadow:0 18px 38px rgba(0,0,0,.18)}.learner-identity-copy{min-width:0}.learner-identity-copy h1{margin-top:4px!important}.learner-level-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.learner-level-line span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-weight:850;font-size:.84rem;color:#efffff}
.quest-stat-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:2}.quest-stat-tile{padding:14px;border-radius:17px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);display:grid;gap:2px}.quest-stat-tile strong{font-size:1.35rem}.quest-stat-tile small{color:#cdeeea}
.continue-quest-card{max-width:1180px;margin:18px auto 0;padding:0 22px}.continue-quest-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;border:1px solid #d9e8eb;border-radius:22px;background:#fff;box-shadow:0 16px 38px rgba(15,43,73,.08)}.continue-quest-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#0f766e,#2276d6);color:#fff;font-size:1.6rem;box-shadow:0 10px 24px rgba(15,118,110,.2)}.continue-quest-copy{min-width:0}.continue-quest-copy span{font-size:.72rem;font-weight:950;letter-spacing:.08em;color:#0f8c82}.continue-quest-copy h2{margin:3px 0 4px;color:var(--navy);font-size:1.35rem}.continue-quest-copy p{margin:0;color:var(--muted)}.continue-quest-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dashboard-milestones{max-width:1180px;margin:14px auto 0;padding:0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.milestone-card{border:1px solid #dce8ea;border-radius:18px;background:#fff;padding:15px;display:flex;gap:11px;align-items:center;box-shadow:0 10px 24px rgba(15,43,73,.05)}.milestone-card>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#edf8f6;font-size:1.25rem}.milestone-card div{display:grid}.milestone-card small{color:var(--muted)}
@media(max-width:1050px){.realistic-avatar-grid{grid-template-columns:repeat(4,minmax(88px,1fr))}.learner-command-hero{grid-template-columns:1fr}.quest-stat-panel{grid-template-columns:repeat(4,1fr)}.learner-identity .avatar-photo{width:96px;height:116px}}
@media(max-width:760px){.avatar-realistic-studio{grid-template-columns:1fr}.avatar-realistic-preview{position:relative;top:auto}.realistic-avatar-grid{grid-template-columns:repeat(3,minmax(78px,1fr));max-height:none}.avatar-photo-preview-stage{min-height:330px}.avatar-photo-hero{width:190px;height:238px}.platform-proof-grid{grid-template-columns:1fr}.learner-identity{align-items:flex-start}.learner-identity .avatar-photo{width:82px;height:98px;border-radius:20px}.quest-stat-panel{grid-template-columns:1fr 1fr}.continue-quest-inner{grid-template-columns:auto 1fr}.continue-quest-actions{grid-column:1/-1;justify-content:stretch}.continue-quest-actions a,.continue-quest-actions button{flex:1;text-align:center;justify-content:center}.dashboard-milestones{grid-template-columns:1fr}.entry-avatar-stack .avatar-photo{width:48px;height:48px}}
@media(max-width:480px){.realistic-avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-realistic-panel,.avatar-realistic-preview{padding:14px;border-radius:19px}.learner-identity{gap:13px}.learner-identity .avatar-photo{width:70px;height:84px}.learner-level-line span{font-size:.75rem}.quest-stat-panel{gap:7px}.quest-stat-tile{padding:11px}.continue-quest-card,.dashboard-milestones{padding:0 12px}.continue-quest-inner{padding:14px}.continue-quest-icon{width:48px;height:48px}}

/* V12.5 simplified navigation loading state.
   Normal navigation shows only a calm action label, never a fake progress percentage. */
.dq-loading-overlay{
    background:rgba(7,29,49,.22);
    backdrop-filter:blur(4px);
    padding:16px;
}
.dq-loading-card.dq-loading-card-simple{
    width:min(320px,calc(100vw - 32px));
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:16px 18px;
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 54px rgba(2,22,42,.2);
}
.dq-loading-card-simple .dq-loading-visual{
    position:relative;
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
}
.dq-loading-card-simple .dq-loading-logo{
    position:relative;
    z-index:2;
    width:40px;
    height:40px;
    border-radius:13px;
    font-size:12px;
    box-shadow:none;
}
.dq-loading-card-simple .dq-loading-visual>i{
    position:absolute;
    inset:0;
    border:2px solid rgba(15,118,110,.14);
    border-top-color:#0f8f83;
    border-radius:50%;
    animation:dqSimpleLoadingSpin .85s linear infinite;
}
.dq-loading-card-simple>strong{
    min-width:0;
    font-size:16px;
    line-height:1.3;
    color:#123a51;
}
@keyframes dqSimpleLoadingSpin{to{transform:rotate(360deg)}}
@media(max-width:620px){
    .dq-loading-card.dq-loading-card-simple{width:min(290px,calc(100vw - 24px));padding:14px 16px;border-radius:16px}
    .dq-loading-card-simple .dq-loading-visual{width:42px;height:42px;flex-basis:42px}
    .dq-loading-card-simple .dq-loading-logo{width:35px;height:35px;border-radius:11px;font-size:11px}
    .dq-loading-card-simple>strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.dq-loading-card-simple .dq-loading-visual>i{animation:none}}

/* V12.10 authenticated account navigation
   Profile, settings and Progress & Devices use the shared account shell. Keep this
   navigation fixed too so switching out of a course never changes scroll behaviour. */
body.dq-authenticated-shell{--dq-global-nav-height:82px}
body.dq-authenticated-shell:not(.dq-body-lesson) .topbar[data-dq-global-nav="1"]{
    position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;
    max-width:100vw!important;z-index:6000!important;transform:none!important;contain:none!important;
}
body.dq-authenticated-shell:not(.dq-body-lesson) .app-main{
    padding-top:calc(var(--dq-global-nav-height) + 20px)!important;
}
body.dq-authenticated-shell:not(.dq-body-lesson) .topbar .topnav{
    overflow:visible!important;overflow-x:visible!important;flex-wrap:wrap!important;
}
body.dq-authenticated-shell:not(.dq-body-lesson) .logout-link{
    display:inline-flex!important;align-items:center;justify-content:center;min-height:40px!important;white-space:nowrap!important;
}
@media(max-width:900px){
    body.dq-authenticated-shell:not(.dq-body-lesson) .topbar .topnav{justify-content:flex-start!important}
}
@media(max-width:700px){
    body.dq-authenticated-shell:not(.dq-body-lesson) .logout-link{display:inline-flex!important;padding:8px 9px!important;font-size:12px!important}
}
/* Shared learner account pages keep their navigation links visible on phones. */
body.dq-authenticated-shell:not(.dq-body-lesson) .topbar .topnav{display:flex!important}

/* 12.11 shared coach conversation input helpers */
.dq-coach-quick-questions{display:flex;flex-wrap:wrap;gap:7px}.dq-coach-ask-form{display:grid;gap:6px}.dq-coach-ask-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}

/* V12.12 root scroll-context correction */
html,body{overflow-x:clip!important}


/* ===== V12.14 visual UX regression fixes =====
   Modal layers must sit above sticky lesson navigation, remain usable on short/mobile
   viewports, and expose comfortable touch targets without changing lesson content size. */
.dq-coach-conversation-overlay{z-index:120500!important}
.dq-coach-conversation{max-width:100dvw!important;max-height:100dvh!important}
.dq-coach-conversation>header{padding-top:max(12px,env(safe-area-inset-top))}
.dq-coach-conversation>header>button,.dq-coach-conversation>footer button,.dq-coach-quick-questions button,.dq-coach-ask-form button{min-height:44px!important}
.dq-coach-conversation>header>button{min-width:44px!important}
.dq-coach-ask-form input{min-height:44px!important;font-size:16px!important}
.dq-next-action-strip>button{min-height:44px!important;font-size:13px!important}
.dq-next-click,.dq-choice-group-guided{scroll-margin-top:clamp(110px,24vh,260px)}
.dq-save-failure-dialog,.dq-unsaved-leave-dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.dq-save-failure-actions button,.dq-unsaved-leave-card button{min-height:44px!important}
@media(max-width:700px){
  .dq-coach-quick-questions{overflow-x:visible!important;flex-wrap:wrap!important;padding-bottom:2px}
  .dq-coach-quick-questions button{flex:1 1 145px!important;white-space:normal!important;line-height:1.25}
  .dq-next-action-strip{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px 10px!important}
  .dq-next-action-strip>button{grid-column:1/-1!important;margin-left:0!important;width:100%!important}
  .dq-next-click::after{max-width:min(180px,70vw);white-space:normal!important;text-align:center}
}
@media(max-width:420px){
  .dq-coach-conversation>header{align-items:flex-start!important}
  .dq-coach-conversation-person>span{width:42px!important;height:46px!important;flex-basis:42px!important}
  .dq-coach-conversation-person strong{font-size:14px!important}
  .dq-coach-conversation-list{padding:12px!important}
  .dq-coach-message{max-width:96%!important}
  .dq-save-failure-dialog,.dq-unsaved-leave-dialog{width:calc(100vw - 20px)!important}
}


/* Phase 11: natural conversational coach */
.dq-coach-quick-questions{display:block!important;padding:8px 18px!important;background:#f8fbfc!important;border-top:1px solid #e1ecef!important}
.dq-coach-quick-questions>summary{cursor:pointer;list-style:none;color:#55717d;font-size:12px;font-weight:800;padding:6px 0;user-select:none}
.dq-coach-quick-questions>summary::-webkit-details-marker{display:none}
.dq-coach-quick-questions>summary::before{content:'＋';display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:7px;background:#e7f4f2;color:#0f766e;font-weight:950}
.dq-coach-quick-questions[open]>summary::before{content:'−'}
.dq-coach-quick-questions>div{display:flex;flex-wrap:wrap;gap:7px;padding:7px 0 2px}
.dq-coach-message.coach p{line-height:1.6!important}
.dq-coach-message.learner p{line-height:1.5!important}
.dq-coach-ask-form>label::after{content:' · AI lesson support';font-weight:700;text-transform:none;letter-spacing:0;color:#78909a}
@media(max-width:700px){.dq-coach-quick-questions{padding-inline:14px!important}.dq-coach-quick-questions>div{display:grid;grid-template-columns:1fr!important}.dq-coach-quick-questions button{width:100%!important}}

/* ========================================================================
   Phase 12: deterministic Lesson Knowledge Coach, no free typing
   ======================================================================== */
.dq-coach-knowledge-panel{
  grid-template-rows:auto minmax(0,1fr) auto auto!important;
}
.dq-coach-choice-area{
  display:grid!important;
  gap:12px!important;
  padding:14px 18px 16px!important;
  border-top:1px solid #dce8ed!important;
  background:#f8fbfc!important;
}
.dq-coach-choice-heading{display:grid!important;gap:3px!important}
.dq-coach-choice-heading small{
  color:#0f766e!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
}
.dq-coach-choice-heading strong{
  color:#365866!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.dq-coach-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
.dq-coach-choice-grid button{
  appearance:none!important;
  min-height:48px!important;
  padding:11px 13px!important;
  border:1px solid #cfe0e6!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#173e50!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1.35!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:0 5px 14px rgba(14,44,76,.04)!important;
}
.dq-coach-choice-grid button:hover,
.dq-coach-choice-grid button:focus-visible{
  border-color:#57a9a3!important;
  background:#f1fbf8!important;
  outline:3px solid rgba(15,118,110,.12)!important;
  outline-offset:1px!important;
}
.dq-coach-choice-grid button:disabled{opacity:.55!important;cursor:wait!important}
.dq-coach-knowledge-panel>footer span{max-width:280px!important;line-height:1.4!important}
.dq-coach-message.learner{background:#eaf8f4!important}
.dq-coach-message.learner small::after{content:''!important}
/* Phase 11 free-typing controls are retired. These selectors remain hidden as a
   defensive fallback if an old browser cache briefly mixes old/new markup. */
.dq-coach-ask-form,
.dq-coach-quick-questions{display:none!important}
@media(max-width:700px){
  .dq-coach-choice-area{padding:12px 14px 14px!important}
  .dq-coach-choice-grid{grid-template-columns:1fr!important}
  .dq-coach-choice-grid button{min-height:46px!important}
  .dq-coach-knowledge-panel>footer{display:grid!important;gap:9px!important}
  .dq-coach-knowledge-panel>footer span{max-width:none!important}
  .dq-coach-knowledge-panel>footer button{width:100%!important}
}


/* Phase 20: learner identity onboarding + platform presence */
.avatar-presence-mini{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.avatar-presence-mini span{display:flex;align-items:center;gap:6px;padding:8px 9px;border:1px solid #dcebed;border-radius:11px;background:#fff;color:#48656f;font-size:.78rem;font-weight:800}.avatar-onboarding-intro{display:flex;align-items:flex-start;gap:12px;margin:10px 0 16px;padding:14px 15px;border:1px solid #cde8e4;border-radius:16px;background:#f2fbf9}.avatar-onboarding-intro>span{font-size:1.6rem}.avatar-onboarding-intro strong{color:#124f50}.avatar-onboarding-intro p{margin:4px 0 0;color:#587078;line-height:1.5}.avatar-platform-presence{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 20px}.avatar-platform-presence article{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:14px;border:1px solid #dce9ec;border-radius:17px;background:#fff}.avatar-platform-presence article>span{grid-row:1/3;font-size:1.6rem}.avatar-platform-presence strong{color:#123d55}.avatar-platform-presence small{color:#607680;line-height:1.35}.learner-identity-link{display:inline-flex;align-items:center;margin-top:10px;color:inherit;font-weight:850;text-decoration:none;border-bottom:1px dashed currentColor;opacity:.9}.learner-identity-link:hover,.learner-identity-link:focus-visible{opacity:1}.focused-learner-avatar{display:inline-flex;align-items:center;justify-content:center;margin-right:4px}.focused-learner-avatar .avatar-mini{width:42px;height:42px;border:2px solid #fff;box-shadow:0 4px 12px rgba(15,43,73,.12)}.prize-identity{display:flex;align-items:center;gap:13px;padding:10px 12px;border:1px solid rgba(255,255,255,.28);border-radius:17px;background:rgba(255,255,255,.12)}.prize-identity .avatar-large{width:70px;height:78px;border-width:3px}.prize-identity div{display:grid}.prize-identity small{font-size:.68rem;letter-spacing:.08em}.prize-identity strong{font-size:1.05rem}.prize-identity a{color:#fff;font-size:.78rem;font-weight:800}.dq-identity-intro{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1fr);gap:18px;align-items:center}.dq-identity-explainer{padding:16px;border:1px solid #d8e9ec;border-radius:18px;background:#f8fcfc}.dq-identity-explainer span{display:block;color:#0f766e;font-size:.72rem;font-weight:900;letter-spacing:.08em}.dq-identity-explainer strong{display:block;margin:5px 0;color:#123d55;font-size:1.2rem}.dq-identity-explainer p{margin:0;color:#587078;line-height:1.5}.dq-result-learner-photo{display:inline-flex;width:72px;height:82px;border-radius:18px;overflow:hidden;border:3px solid #fff;box-shadow:0 10px 24px rgba(15,43,73,.14)}.dq-result-learner-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}.realistic-avatar-grid .realistic-avatar-option:nth-child(-n+12){background:#f5fbfa;border-color:#d8ece9}@media(max-width:760px){.avatar-platform-presence{grid-template-columns:1fr 1fr}.dq-identity-intro{grid-template-columns:1fr}.focused-learner-avatar .avatar-mini{width:36px;height:36px}}@media(max-width:480px){.avatar-platform-presence{grid-template-columns:1fr}.avatar-presence-mini{grid-template-columns:1fr}.focused-learner-avatar{display:none}}

.avatar-choice-groups{display:grid;gap:18px}.avatar-choice-group{padding:14px;border:1px solid #e0ebed;border-radius:18px;background:#fbfdfd}.avatar-choice-group-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 2px 10px}.avatar-choice-group-heading strong{color:#123d55;font-size:1rem}.avatar-choice-group-heading small{color:#6a7c84;text-align:right}.avatar-choice-group:first-child{border-color:#bfe5df;background:#f5fbfa}.avatar-choice-group .realistic-avatar-grid{max-height:none}.avatar-choice-group:nth-child(2) .realistic-avatar-grid{max-height:470px}@media(max-width:620px){.avatar-choice-group-heading{align-items:flex-start;flex-direction:column}.avatar-choice-group-heading small{text-align:left}.avatar-choice-group:nth-child(2) .realistic-avatar-grid{max-height:none}}


/* Phase 21: compact mission-map layout, remove alternating empty half-rows */
.mission-map{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
    align-items:stretch!important;
    max-width:1180px!important;
    margin:0 auto!important;
    padding:8px 0 30px!important;
}
.mission-map>.map-path{display:none!important}
.mission-map>.world-divider{
    grid-column:1/-1!important;
    margin:14px 0 0!important;
    padding:15px 18px!important;
}
.mission-map>.world-divider>span{width:50px!important;height:50px!important;font-size:24px!important}
.mission-map>.mission-node{
    display:block!important;
    position:relative!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
}
.mission-map>.mission-node .mission-card{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    height:100%!important;
    box-sizing:border-box!important;
    padding:20px!important;
}
.mission-map>.mission-node .node-badge{
    position:absolute!important;
    top:10px!important;
    right:12px!important;
    z-index:4!important;
    width:46px!important;
    height:46px!important;
    margin:0!important;
    border-width:4px!important;
    font-size:21px!important;
    box-shadow:0 8px 20px rgba(11,45,79,.13)!important;
}
.mission-map>.mission-node .mission-card-top{padding-right:52px!important;min-height:28px!important;align-items:center!important}
.mission-map>.mission-node .mission-thumb{height:142px!important;margin:10px 0 14px!important}
.mission-map>.mission-node .mission-card h3{font-size:21px!important;line-height:1.18!important;margin:0 0 7px!important}
.mission-map>.mission-node .mission-card p{line-height:1.5!important}
.mission-map>.mission-node .mission-meta{margin:13px 0 7px!important}
.mission-map>.mission-node .mission-rewards{margin:9px 0 12px!important}
.mission-map>.mission-node .mission-button{margin-top:auto!important;min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.mission-map>.mission-node.completed .node-badge::after{right:-5px!important;bottom:-5px!important}

@media(max-width:920px){
    .mission-map{grid-template-columns:1fr!important;gap:16px!important;padding-left:0!important}
    .mission-map>.mission-node{display:block!important;grid-template-columns:none!important}
    .mission-map>.mission-node .mission-card{grid-column:auto!important}
    .mission-map>.mission-node .node-badge{grid-column:auto!important;width:44px!important;height:44px!important;font-size:20px!important}
}
@media(max-width:560px){
    .mission-map{padding-left:0!important;gap:13px!important}
    .mission-map>.world-divider{padding:13px 14px!important;border-radius:16px!important}
    .mission-map>.world-divider>span{width:44px!important;height:44px!important;font-size:21px!important;border-radius:14px!important}
    .mission-map>.mission-node .mission-card{padding:16px!important}
    .mission-map>.mission-node .node-badge{top:8px!important;right:9px!important;width:40px!important;height:40px!important;font-size:18px!important}
    .mission-map>.mission-node .mission-card-top{padding-right:45px!important;font-size:11px!important}
    .mission-map>.mission-node .mission-thumb{height:128px!important}
}


/* Phase 23 shared contextual next-step control */
.dq-next-action-strip[hidden]{display:none!important}
.dq-next-action-compact{display:none!important}
.dq-next-action-strip.is-collapsed>.dq-next-action-icon,.dq-next-action-strip.is-collapsed>div,.dq-next-action-strip.is-collapsed>.dq-next-action-show,.dq-next-action-strip.is-collapsed>.dq-next-action-minimise{display:none!important}
.dq-next-action-strip.is-collapsed>.dq-next-action-compact{display:inline-flex!important;align-items:center;gap:8px;min-height:42px;padding:8px 13px;border:1px solid #a8d8d1;border-radius:999px;background:#fff;color:#0d746c;font-weight:900}

/* Phase 28: secure learner account recovery */
.dq-recovery-shell .access-form{align-content:start}
.dq-recovery-options{gap:14px}.dq-recovery-card{border:1px solid #d7e6e9;border-radius:16px;background:#fff;overflow:hidden}.dq-recovery-card[open]{box-shadow:0 10px 28px rgba(15,43,73,.08)}.dq-recovery-card>summary{cursor:pointer;list-style:none;padding:15px 16px;font-weight:900;color:#123a55;background:#f8fbfc}.dq-recovery-card>summary::-webkit-details-marker{display:none}.dq-recovery-card>summary::after{content:'+';float:right;color:#0f766e}.dq-recovery-card[open]>summary::after{content:'−'}.dq-recovery-card form{display:grid;gap:12px;padding:16px;border-top:1px solid #e4eef0}.dq-recovery-card small{color:#607783;line-height:1.5}.dq-recovery-reference{display:grid;gap:5px;padding:14px 16px;border:1px solid #99ddd5;border-radius:15px;background:#effbf9;color:#123a55}.dq-recovery-reference small{font-size:11px;font-weight:950;letter-spacing:.09em;color:#0f766e}.dq-recovery-reference strong{font-size:1.45rem;letter-spacing:.08em;overflow-wrap:anywhere}.dq-recovery-reference span{font-size:.85rem;color:#5b7180}.dq-profile-security{margin-top:22px}.dq-profile-security .dq-account-card form{display:grid;gap:11px}.dq-profile-security .dq-account-card label{display:grid;gap:6px}.dq-profile-security .dq-account-card input{width:100%;box-sizing:border-box}.dq-profile-security .primary-button,.dq-profile-security .secondary-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px}
@media(max-width:720px){.dq-recovery-card form{padding:14px}.dq-recovery-reference strong{font-size:1.2rem}.dq-profile-security{grid-template-columns:1fr!important}}

/* Phase 29: dashboard identity link contrast */
.dashboard-hero .learner-identity-link,.game-hero .learner-identity-link{color:#fff!important;border-bottom-color:rgba(255,255,255,.82)!important;opacity:1!important}
.dashboard-hero .learner-identity-link:hover,.dashboard-hero .learner-identity-link:focus-visible,.game-hero .learner-identity-link:hover,.game-hero .learner-identity-link:focus-visible{color:#fff!important;border-bottom-color:#fff!important;text-decoration:none}

/* Phase 34: illustrative controls must not pretend to be interactive */
.visual-demo-control,.office-tab-demo,.office-demo-control,.office-quick-demo{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#f1f5f9;color:#475569;font-weight:800;cursor:default;user-select:none;box-shadow:none}
.office-tab-demo{border-radius:7px 7px 0 0;background:#f8fafc}.office-tab-demo.active{background:#fff;color:#0f172a;border-bottom-color:#fff}.email-send-demo{background:#e2e8f0}.danger-demo{background:#fff1f2;border-color:#fecdd3;color:#9f1239}

/* ========================================================================
   Phase 4: Coach 2.0 reliability + adaptive rescue
   ======================================================================== */
.dq-coach-knowledge-panel{
  grid-template-rows:auto minmax(0,1fr) auto auto auto!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4{
  display:grid!important;
  gap:7px!important;
  padding:12px 18px 14px!important;
  border-top:1px solid #dce8ed!important;
  background:#fff!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4>label{
  color:#365d6d!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4>label::after{
  content:' · lesson-aware support'!important;
  color:#78909a!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4 input{
  display:block!important;
  min-width:0!important;
  min-height:46px!important;
  padding:10px 12px!important;
  border:1px solid #cbdde2!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#173f54!important;
  font:inherit!important;
  font-size:16px!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4 input:focus{
  outline:0!important;
  border-color:#0f766e!important;
  box-shadow:0 0 0 3px rgba(15,118,110,.12)!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4 button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  padding:9px 16px!important;
  border:0!important;
  border-radius:12px!important;
  background:#0f766e!important;
  color:#fff!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4 button:disabled,
.dq-coach-ask-form.dq-coach-ask-form-phase4 input:disabled{
  opacity:.62!important;
  cursor:wait!important;
}
.dq-coach-ask-form.dq-coach-ask-form-phase4 small{
  color:#667d89!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.dq-coach-knowledge-panel>footer [data-dq-coach-status]{
  max-width:420px!important;
  color:#617985!important;
  font-size:11px!important;
  line-height:1.45!important;
}
@media(max-width:700px){
  .dq-coach-ask-form.dq-coach-ask-form-phase4{padding:12px 14px 14px!important}
  .dq-coach-ask-form.dq-coach-ask-form-phase4>div{grid-template-columns:1fr!important}
  .dq-coach-ask-form.dq-coach-ask-form-phase4 button{width:100%!important}
}

/* Digital Quest v12.6.0: cohort programme scope + learner competency record */
.dq-level-switcher{display:inline-flex;align-items:center;gap:4px;padding:4px 5px;border:1px solid #d5e3e6;border-radius:999px;background:#f7fbfb;margin:0}.dq-level-switcher>span{padding:0 5px;color:#5d747e;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.dq-level-switcher button{min-width:32px;height:28px;border:0;border-radius:999px;background:#e7f0f2;color:#315868;font-size:11px;font-weight:900;cursor:pointer}.dq-level-switcher button:hover{background:#d9efed;color:#0f766e}.dq-level-switcher button.active,.dq-level-switcher button:disabled{background:#0f766e;color:#fff;opacity:1;cursor:default}
.dq-record-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:8px 0 20px;padding:28px;border-radius:24px;background:linear-gradient(135deg,#0e4c63,#0f766e);color:#fff;box-shadow:0 18px 40px rgba(14,76,99,.16)}.dq-record-hero .eyebrow{color:#b8fff1}.dq-record-hero h2{margin:4px 0 6px;font-size:clamp(27px,4vw,42px)}.dq-record-hero p{margin:0;color:#d9f3f2}.dq-record-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 20px}.dq-record-summary article{padding:18px;border:1px solid #d8e8ea;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(20,54,67,.05)}.dq-record-summary span,.dq-record-summary small{display:block;color:#6d828b;font-size:12px}.dq-record-summary strong{display:block;margin:5px 0;color:#103f55;font-size:30px}.dq-record-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:20px 0}.dq-record-level-card{padding:20px;border:1px solid #d8e8ea;border-radius:20px;background:#fff}.dq-record-level-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.dq-record-level-head h3{margin:4px 0 12px;color:#163f53}.dq-record-level-head>strong{font-size:28px;color:#0f766e}.dq-record-level-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dq-record-level-metrics span{padding:9px 10px;border-radius:10px;background:#f3f8f9;color:#506b77;font-size:12px}.dq-record-level-metrics b{color:#143e52}.dq-record-skills{margin:22px 0;padding:22px;border:1px solid #d8e8ea;border-radius:22px;background:#fff}.dq-record-skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.dq-record-skill-grid article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid #e1ebed;border-radius:14px;background:#fbfdfd}.dq-record-skill-grid strong,.dq-record-skill-grid small{display:block}.dq-record-skill-grid small{margin-top:3px;color:#72858e;font-size:11px}.dq-evidence-pill{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#eef5f7;color:#4e6f7c;font-size:10px;font-weight:900;text-transform:uppercase}.dq-evidence-pill.verified{background:#e7f8f1;color:#16735b}.dq-record-foot{padding:8px 0 28px;color:#71858e;font-size:12px}
@media(max-width:1050px){.dq-record-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.dq-level-switcher>span{display:none}}
@media(max-width:760px){.dq-record-hero{align-items:flex-start;flex-direction:column;padding:22px}.dq-record-summary{grid-template-columns:1fr 1fr}.dq-record-skill-grid{grid-template-columns:1fr}.topbar-actions .dq-level-switcher{display:none}}
@media(max-width:480px){.dq-record-summary{grid-template-columns:1fr}.dq-record-level-metrics{grid-template-columns:1fr}}
@media print{.topbar,.dq-record-actions,.logout-link{display:none!important}.app-main{padding:0!important;margin:0!important;max-width:none!important}.dq-record-hero{box-shadow:none;background:#f2f7f8!important;color:#143e52!important;border:1px solid #d8e8ea}.dq-record-hero .eyebrow,.dq-record-hero p{color:#45616e!important}.dq-record-summary article,.dq-record-level-card,.dq-record-skills{break-inside:avoid;box-shadow:none}.dq-record-foot{padding-bottom:0}}


/* Game-style coach mission briefing. Pure UI: no database request is made. */
dialog.dq-coach-briefing{border:0;padding:0;background:transparent;max-width:min(900px,calc(100vw - 28px));width:100%;overflow:visible}
dialog.dq-coach-briefing::backdrop{background:rgba(8,24,37,.66);backdrop-filter:blur(5px)}
.dq-coach-briefing-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:30px;overflow:hidden;box-shadow:0 30px 90px rgba(4,24,38,.34)}
.dq-coach-briefing-person{position:relative;min-height:430px;background:linear-gradient(155deg,#dff8f2,#c8e9ff);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.dq-coach-briefing-person img{width:100%;height:100%;object-fit:cover;object-position:top center}
.dq-coach-briefing-person span{position:absolute;left:18px;top:18px;padding:7px 11px;border-radius:999px;background:#fff;color:#075f5b;font-size:11px;font-weight:950;letter-spacing:.12em;box-shadow:0 6px 18px rgba(0,0,0,.1)}
.dq-coach-briefing-copy{padding:34px 38px 32px;color:#17394c}
.dq-coach-briefing-copy>small{display:block;margin-bottom:8px;color:#0a776d;font-size:12px;font-weight:950;letter-spacing:.14em}
.dq-coach-briefing-copy h2{margin:0 0 10px;font-size:clamp(28px,4vw,44px);line-height:1.06;color:#11364b}
.dq-coach-briefing-copy>p{margin:0 0 18px;font-size:16px;line-height:1.58;color:#4d6674}
.dq-coach-briefing-why{display:grid;gap:4px;padding:13px 15px;margin:0 0 16px;border-radius:16px;background:#f1faf8;border:1px solid #d7eee9}.dq-coach-briefing-why strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#087269}.dq-coach-briefing-why span{font-size:14px;line-height:1.45}
.dq-coach-briefing-actions{display:grid;gap:8px;margin:0 0 20px}.dq-coach-briefing-actions>strong{font-size:13px;color:#244c60}.dq-coach-briefing-actions span{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:750;color:#264a5d}.dq-coach-briefing-actions b{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#e8f6ff;color:#126081;font-size:12px}
.dq-coach-briefing-copy button{border:0;border-radius:14px;padding:13px 18px;background:#0b746c;color:white;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 8px 20px rgba(11,116,108,.2)}.dq-coach-briefing-copy button:hover{transform:translateY(-1px)}
@media(max-width:700px){dialog.dq-coach-briefing{max-width:calc(100vw - 18px)}.dq-coach-briefing-card{grid-template-columns:1fr;border-radius:22px}.dq-coach-briefing-person{min-height:145px;max-height:145px;align-items:flex-start}.dq-coach-briefing-person img{object-position:center 18%}.dq-coach-briefing-person span{left:12px;top:12px}.dq-coach-briefing-copy{padding:20px 18px 18px}.dq-coach-briefing-copy h2{font-size:27px}.dq-coach-briefing-copy>p{font-size:14px}.dq-coach-briefing-actions span{font-size:13px}}
@media(prefers-reduced-motion:reduce){.dq-coach-briefing-copy button{transition:none!important;transform:none!important}}

.class-code-help{display:block;margin-top:7px;color:#64748b;font-size:12px;line-height:1.45;text-align:center}


/* Digital Quest varied lesson mission cards: one learning contract, four opening styles. */
dialog.dq-coach-briefing{max-width:min(1120px,calc(100vw - 28px));max-height:calc(100dvh - 24px);overflow:auto}
.dq-coach-briefing-card{grid-template-columns:210px minmax(0,1fr)}
.dq-coach-briefing-person{min-height:590px}
.dq-coach-briefing-copy{padding:30px 34px 28px}
.dq-coach-briefing-titleline{display:flex;align-items:center;gap:10px;margin-bottom:8px}.dq-coach-briefing-titleline>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e9f7f4;font-size:21px}.dq-coach-briefing-titleline>small{margin:0!important;font-size:12px;font-weight:950;letter-spacing:.08em;color:#0a776d}
.dq-coach-briefing-hook{display:grid;gap:4px;margin:0 0 15px;padding:12px 14px;border:1px solid #d8e7ea;border-radius:15px;background:#f8fbfc}.dq-coach-briefing-hook strong{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#50707d}.dq-coach-briefing-hook span{font-size:14px;line-height:1.45;color:#163f53;font-weight:750}
.dq-lesson-mission-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 18px}.dq-lesson-mission-map article{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:start;padding:11px 12px;border:1px solid #e0eaed;border-radius:14px;background:#fff}.dq-lesson-mission-map article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#eff7f8;font-size:17px}.dq-lesson-mission-map strong{display:block;font-size:11px;color:#315a69;text-transform:uppercase;letter-spacing:.055em}.dq-lesson-mission-map p{margin:3px 0 0!important;font-size:12.5px!important;line-height:1.42!important;color:#526b76!important}
.dq-coach-briefing-actions i{font-style:normal;font-weight:750;color:inherit}
dialog.dq-coach-briefing[data-intro-family="mission"] .dq-coach-briefing-person{background:linear-gradient(165deg,#dff8f2,#c8e9ff)}
dialog.dq-coach-briefing[data-intro-family="mystery"] .dq-coach-briefing-person{background:linear-gradient(165deg,#fff0c9,#ffe1d3)}
dialog.dq-coach-briefing[data-intro-family="mystery"] .dq-coach-briefing-titleline>span{background:#fff0d6}
dialog.dq-coach-briefing[data-intro-family="mystery"] .dq-coach-briefing-hook{background:#fffaf0;border-color:#f4dfb6}
dialog.dq-coach-briefing[data-intro-family="predict"] .dq-coach-briefing-person{background:linear-gradient(165deg,#e6e3ff,#d9edff)}
dialog.dq-coach-briefing[data-intro-family="predict"] .dq-coach-briefing-titleline>span{background:#eeeaff}
dialog.dq-coach-briefing[data-intro-family="predict"] .dq-coach-briefing-hook{background:#f7f5ff;border-color:#ddd8f6}
dialog.dq-coach-briefing[data-intro-family="scenario"] .dq-coach-briefing-person{background:linear-gradient(165deg,#e7f8da,#d9f3e7)}
dialog.dq-coach-briefing[data-intro-family="scenario"] .dq-coach-briefing-titleline>span{background:#edf9e6}
dialog.dq-coach-briefing[data-intro-family="scenario"] .dq-coach-briefing-hook{background:#f4fbef;border-color:#d8ebca}
dialog.dq-coach-briefing[data-intro-stage="practice"] .dq-coach-briefing-person,dialog.dq-coach-briefing[data-intro-stage="try"] .dq-coach-briefing-person,dialog.dq-coach-briefing[data-intro-stage="try_it"] .dq-coach-briefing-person,dialog.dq-coach-briefing[data-intro-stage="challenge"] .dq-coach-briefing-person{min-height:390px}
@media(max-width:820px){dialog.dq-coach-briefing{max-width:calc(100vw - 18px)}.dq-coach-briefing-card{grid-template-columns:150px minmax(0,1fr)}.dq-coach-briefing-person{min-height:560px}.dq-coach-briefing-copy{padding:24px 22px}.dq-lesson-mission-map{grid-template-columns:1fr}}
@media(max-width:620px){dialog.dq-coach-briefing{max-height:calc(100dvh - 12px)}.dq-coach-briefing-card{grid-template-columns:1fr}.dq-coach-briefing-person,.dq-coach-briefing-person[style]{min-height:122px!important;max-height:122px!important}.dq-coach-briefing-person img{object-position:center 16%}.dq-coach-briefing-copy{padding:18px 15px 16px}.dq-coach-briefing-copy h2{font-size:25px}.dq-lesson-mission-map article{padding:10px}.dq-coach-briefing-copy>p{margin-bottom:12px}.dq-coach-briefing-hook{margin-bottom:11px}}