:root {
    --bg: #f7faf8;
    --surface: #ffffff;
    --surface-soft: #f2f7f5;
    --navy: #10284b;
    --ink: #253752;
    --muted: #718096;
    --line: #e4ece8;
    --green: #0b9b62;
    --green-dark: #087b4e;
    --mint: #dff6eb;
    --blue-soft: #e8f4fb;
    --blue: #2678bb;
    --amber: #f5b53f;
    --amber-soft: #fff5dd;
    --coral: #e9584f;
    --coral-soft: #fff0ef;
    --shadow: 0 10px 28px rgba(30, 58, 84, .08);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--navy);
    background: var(--bg);
    font-synthesis: none;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--ink);
    background: var(--bg);
    -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

button:focus-visible, input:focus-visible {
    outline: 3px solid rgba(11, 155, 98, .28);
    outline-offset: 2px;
}

.app-shell {
    position: relative;
    width: 100%;
    max-width: 680px;
    min-height: 100vh;
    margin: 0 auto;
    background: var(--bg);
}

.phone-status-preview { display: none; }

.app-bar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    min-height: 52px;
    height: 52px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(228, 236, 232, 0.9);
}

.app-bar-title { text-align: center; min-width: 0; }
.eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--green);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.2;
}

.app-bar h1, h2, h3, h4, p { margin: 0; }
.app-bar h1 { overflow: hidden; color: var(--navy); font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.icon-button {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--navy);
    background: transparent;
    font-size: 29px;
    line-height: 1;
}

.icon-button:hover { background: var(--surface-soft); }
.back-button { justify-self: start; font-size: 35px; font-weight: 300; }
.back-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-bar > .icon-button:last-child { justify-self: end; font-size: 26px; }

.app-main {
    padding: 52px 16px calc(95px + env(safe-area-inset-bottom));
}

.screen-view { display: none; animation: enter .22s ease-out; }
.screen-view.active { display: block; }
.student-only { display: none; }
.role-student .teacher-only { display: none !important; }
.role-student .student-only { display: flex; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.welcome-block { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; padding: 18px 2px 20px; }
.welcome-block h2, .page-intro h2, .account-header h2 { color: var(--navy); font-size: 27px; line-height: 1.1; letter-spacing: -.04em; }
.welcome-block p, .page-intro p { max-width: 435px; margin-top: 9px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.welcome-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #eaa81f; background: var(--amber-soft); border-radius: 50%; font-size: 24px; }

.content-card {
    border: 1px solid rgba(228, 236, 232, .9);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.home-status-card { padding: 18px 17px 16px; margin-bottom: 16px; background: linear-gradient(135deg, #e7f8ef, #effaf5); }
.card-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--navy); font-size: 14px; font-weight: 700; }
.card-heading strong { color: var(--green-dark); font-size: 19px; }
.card-heading small { color: var(--muted); font-weight: 600; font-size: 12px; }
.progress-track { height: 10px; margin: 11px 0 8px; overflow: hidden; border-radius: 99px; background: #cfe0d9; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .25s ease; }
.home-status-card p { color: var(--muted); font-size: 13px; }

.primary-feature {
    display: grid;
    grid-template-columns: 86px 1fr 27px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 138px;
    padding: 10px 14px 10px 10px;
    margin: 0 0 16px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    color: #fff;
    text-align: left;
    background: linear-gradient(135deg, #078a57, #16a86b);
    box-shadow: 0 13px 24px rgba(11, 155, 98, .18);
}
.primary-feature:hover { filter: brightness(1.04); }
.feature-art { position: relative; display: block; width: 86px; height: 112px; align-self: stretch; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, #78c76c, #0e7f4f 72%); }
.feature-art::before, .feature-art::after { position: absolute; content: ""; border-radius: 50%; background: rgba(255,255,255,.14); }
.feature-art::before { width: 56px; height: 56px; left: -10px; top: 8px; }
.feature-art::after { width: 72px; height: 72px; right: -24px; bottom: 7px; }
.art-car { position: absolute; z-index: 1; left: 24px; top: 38px; font-size: 38px; transform: rotate(-10deg); }
.art-road-line { position: absolute; width: 4px; height: 145px; left: 41px; top: -14px; background: repeating-linear-gradient(to bottom, #fff 0 18px, transparent 18px 31px); opacity: .8; transform: rotate(31deg); }
.primary-feature-copy { display: grid; gap: 4px; }
.primary-feature .eyebrow { color: #c3f5dc; margin: 0; }
.primary-feature strong { font-size: 18px; line-height: 1.2; }
.primary-feature small { color: #d9f6e8; font-size: 12px; line-height: 1.35; }
.round-arrow { width: 28px; height: 28px; display: grid; place-items: center; color: var(--green-dark); background: #e7faef; border-radius: 50%; font-size: 25px; line-height: 1; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 15px; }
.feature-tile { position: relative; min-height: 144px; padding: 15px 14px; overflow: hidden; border: 0; border-radius: var(--radius-lg); text-align: left; }
.feature-tile strong, .feature-tile small { display: block; position: relative; z-index: 1; }
.feature-tile strong { margin-top: 13px; color: var(--navy); font-size: 15px; line-height: 1.2; }
.feature-tile small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.tile-blue { background: var(--blue-soft); }
.tile-amber { background: var(--amber-soft); }
.tile-icon { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 47px; height: 47px; border-radius: 15px; background: rgba(255,255,255,.7); font-size: 27px; }
.feature-tile::after { position: absolute; right: -15px; bottom: -24px; width: 80px; height: 80px; content: ""; border-radius: 50%; background: rgba(255,255,255,.48); }
.tile-arrow { position: absolute; z-index: 1; right: 13px; bottom: 11px; color: var(--blue); font-size: 20px; }
.tile-amber .tile-arrow { color: #d88d1b; }

.menu-card { padding: 4px 15px; }
.list-row, .settings-row-button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 69px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.list-row:last-child, .settings-row-button:last-child { border-bottom: 0; }
.list-row > span:nth-child(2), .settings-row-button > span:nth-child(2) { flex: 1; min-width: 0; }
.list-row strong, .settings-row-button strong { display: block; color: var(--navy); font-size: 14px; line-height: 1.25; }
.list-row small, .settings-row-button small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.25; }
.row-icon { width: 39px; height: 39px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 13px; font-size: 20px; font-weight: 800; }
.icon-coral { color: var(--coral); background: var(--coral-soft); }
.icon-blue { color: var(--blue); background: var(--blue-soft); }
.icon-amber { color: #c88913; background: var(--amber-soft); font-size: 10px; }
.icon-green { color: var(--green); background: var(--mint); }
.row-chevron { flex: 0 0 auto; color: #8b9aab; font-size: 26px; font-weight: 300; }
.support-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 19px 3px 2px; color: var(--muted); font-size: 11px; }
.text-button { padding: 4px 0; border: 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 800; }
.recent-session:empty { display: none; }
.recent-session { margin-top: 12px; padding: 11px 13px; border-radius: 14px; color: var(--muted); background: var(--surface-soft); font-size: 12px; }

.page-intro { padding: 16px 2px 19px; }
.page-intro h2 { font-size: 28px; }
.form-card { padding: 5px 17px; margin-bottom: 19px; }
.form-field { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
.form-field:last-child { border-bottom: 0; }
.form-field span { display: block; margin-bottom: 7px; color: var(--navy); font-size: 13px; font-weight: 800; }
.form-field em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 500; }
.form-field input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--navy); background: #fbfdfc; font-size: 14px; }
.form-field input::placeholder { color: #a6b0bc; }
.section-heading { margin: 0 2px 11px; }
.section-heading h3 { color: var(--navy); font-size: 18px; }
.mode-choice-group { display: grid; gap: 10px; margin-bottom: 15px; }
.mode-choice { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.mode-choice.selected { border-color: #80d3ad; background: var(--mint); }
.mode-choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-mark { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; border: 2px solid #b6c7bf; border-radius: 50%; color: transparent; background: #fff; font-size: 12px; font-weight: 900; }
.mode-choice.selected .choice-mark { border-color: var(--green); color: #fff; background: var(--green); }
.mode-choice strong { display: block; color: var(--navy); font-size: 14px; }
.mode-choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ruleset-card { display: flex; align-items: center; gap: 12px; padding: 15px; margin-bottom: 16px; background: linear-gradient(135deg, #fff, #f2fbf6); }
.ruleset-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: var(--green); font-weight: 900; }
.ruleset-card strong { color: var(--navy); font-size: 14px; }
.ruleset-card p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 51px; padding: 12px 20px; border: 0; border-radius: 17px; color: #fff; background: var(--green); box-shadow: 0 7px 15px rgba(11,155,98,.16); font-size: 15px; font-weight: 800; }
.primary-button:hover { background: var(--green-dark); }
.primary-button span { font-size: 21px; line-height: .7; }
.full-width { width: 100%; }

.operator-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 2px 15px; }
.operator-header h2 { color: var(--navy); font-size: 25px; letter-spacing: -.035em; }
.operator-header p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.operator-header p strong { color: var(--ink); }
.hud-status-badge { flex: 0 0 auto; padding: 7px 9px; border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.hud-status-badge.waiting { color: #6d7d8d; background: #e8eef0; }
.hud-status-badge.testing { color: #126a49; background: var(--mint); }
.hud-status-badge.failed { color: #a32e29; background: var(--coral-soft); }
.hud-status-badge.passed { color: #fff; background: var(--green); }
.score-strip { display: grid; grid-template-columns: 1.22fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.score-strip > div { min-height: 76px; padding: 12px 11px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.score-primary { background: linear-gradient(145deg, #e6f8ef, #f3fbf7) !important; }
.score-strip span, .score-strip small { display: block; color: var(--muted); font-size: 11px; }
.score-strip strong { display: inline-block; margin-top: 5px; color: var(--navy); font-size: 24px; letter-spacing: -.04em; }
.score-primary strong { color: var(--green-dark); font-size: 36px; }
.score-primary small { display: inline; margin-left: 2px; font-size: 13px; }
.score-metric strong { font-size: 18px; }
.score-metric small { margin-top: 2px; }
.exam-action-bar { display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: 7px; margin-bottom: 11px; }
.action-button { min-height: 39px; padding: 8px 6px; border: 0; border-radius: 12px; font-size: 12px; font-weight: 800; }
.primary-action { color: #fff; background: var(--green); }
.danger-action { color: var(--coral); background: var(--coral-soft); }
.neutral-action { color: var(--ink); background: #e9efed; }
.ruleset-note, .transition-note { margin: 8px 0; padding: 10px 12px; border-radius: 12px; color: var(--muted); background: #edf4f1; font-size: 11px; line-height: 1.35; }
.transition-note { color: #986e1f; background: var(--amber-soft); }
.operator-tip { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; padding: 11px 12px; border: 1px solid #cfece0; border-radius: 14px; color: #39624f; background: #eefaf4; font-size: 12px; line-height: 1.4; }
.operator-tip > span:first-child { color: var(--green); font-size: 16px; line-height: 1; }

.lesson-list-card { padding: 14px; margin-bottom: 15px; }
.track-progress { display: flex; gap: 4px; height: 7px; margin: 11px 0 12px; }
.track-progress span { min-width: 7px; flex: 1; border-radius: 99px; background: #dfe9e5; }
.track-progress span.active { background: var(--green); }
.track-progress span.current { background: var(--amber); }
.lesson-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.lesson-item { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 8px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); background: #f8fbfa; text-align: left; }
.lesson-item.current { border-color: #9fddc2; color: var(--navy); background: var(--mint); }
.lesson-item.completed { color: var(--green-dark); }
.lesson-item-number { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--ink); background: #e8efec; font-size: 11px; font-weight: 800; }
.lesson-item.current .lesson-item-number, .lesson-item.completed .lesson-item-number { color: #fff; background: var(--green); }
.lesson-item-title { overflow: hidden; font-size: 11px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.lesson-command-card { padding: 16px 14px 15px; margin-bottom: 14px; border-radius: 22px; }
.lesson-command-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: start; gap: 4px; width: calc(100% + 9px); margin-left: -14px; }
.lesson-command-head > div { min-width: 0; padding: 3px 0 0; text-align: center; transform: translateX(8px); }
.light-icon { width: 46px; height: 46px; color: var(--navy); background: #f1f7f4; font-size: 32px; }
.lesson-badge { position: relative; z-index: 1; display: block; width: max-content; padding: 4px 8px; margin: 0 auto; border-radius: 99px; color: var(--green-dark); background: var(--mint); font-size: 10px; font-weight: 900; line-height: 1.2; letter-spacing: .05em; }
.lesson-command-head h3 { margin-top: 18px; color: var(--navy); font-size: 27px; line-height: 1.12; letter-spacing: -.03em; }
.lesson-command-head p { max-width: 510px; margin: 6px auto 0; color: #64758d; font-size: 15px; line-height: 1.3; }
.voice-button { display: flex; justify-content: center; align-items: center; gap: 9px; width: calc(100% + 14px); min-height: 55px; margin: 20px 0 20px -14px; border: 0; border-radius: 17px; color: #075e3c; background: var(--mint); font-size: 17px; font-weight: 850; }
.voice-button:hover { background: #cceede; }
.voice-button span { font-size: 23px; }
.course-card { width: calc(100% + 14px); height: 256px; min-height: 256px; display: grid; place-items: center; margin-left: -14px; overflow: hidden; border-radius: 18px; background: #eaf5e7; }
.course-map { width: 100%; height: 256px; display: block; }
.course-map text { font-family: inherit; }
.map-caption { padding: 9px 2px 1px; color: #64758d; font-size: 11px; text-align: center; }
.fault-section { margin-top: 17px; }
.common-fault-section { padding-top: 16px; border-top: 1px solid var(--line); }
.fault-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.fault-heading-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.fault-heading-dot.coral { background: var(--coral); }
.fault-heading-dot.amber { background: var(--amber); }
.fault-heading h4 { color: var(--navy); font-size: 14px; }
.fault-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.fault-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-fault-item, .fault-btn { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 66px; padding: 9px 10px; border: 1px solid #e3ebe7; border-radius: 14px; color: var(--navy); background: #fbfdfc; text-align: left; box-shadow: 0 3px 8px rgba(32,57,73,.04); }
.btn-fault-item:hover, .fault-btn:hover { border-color: #91d9b6; background: #f1fbf6; }
.btn-fault-item.fatal, .fault-btn.fatal { border-color: #f3c1bd; background: #fff8f7; }
.fault-title-text { display: block; min-width: 0; font-size: 12px; font-weight: 750; line-height: 1.25; }
.fault-audio-icon { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.fault-pts-badge { min-width: 38px; padding: 4px 5px; flex: 0 0 auto; border-radius: 8px; color: var(--coral); background: var(--coral-soft); font-size: 11px; font-weight: 900; text-align: center; }
.fault-pts-badge.danger { color: #fff; background: var(--coral); }
.operator-feedback-card { padding: 14px; margin-bottom: 14px; }
.feedback-status { display: flex; align-items: center; gap: 8px; }
.feedback-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.feedback-status strong { color: var(--navy); font-size: 13px; }
.operator-feedback-card p { margin: 7px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.feedback-actions { display: grid; grid-template-columns: 1fr 1.12fr; gap: 8px; }
.outline-button { min-height: 43px; padding: 8px; border: 1px solid #b8cec4; border-radius: 13px; color: var(--green-dark); background: #fff; font-size: 11px; font-weight: 800; }
.outline-button:disabled { color: #a3b0ad; border-color: #e1e8e5; background: #f7faf9; }
.feedback-actions .primary-button { min-height: 43px; padding: 8px; border-radius: 13px; font-size: 12px; }
.log-panel { padding: 14px; margin-bottom: 14px; }
.event-log { max-height: 245px; margin-top: 10px; overflow: auto; }
.empty-state { padding: 18px 4px 8px; color: var(--muted); font-size: 12px; text-align: center; }
.log-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 7px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.log-line:last-child { border-bottom: 0; }
.log-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.log-message { color: var(--navy); font-weight: 700; line-height: 1.25; }
.log-points { color: var(--coral); font-weight: 900; }
.log-line.undone { opacity: .48; text-decoration: line-through; }
.exam-result-card { padding: 18px; margin-top: 3px; border-radius: var(--radius-lg); text-align: center; background: var(--mint); box-shadow: var(--shadow); }
.exam-result-card.failed { color: #8d2d29; background: var(--coral-soft); }
.exam-result-card h3 { font-size: 20px; }
.exam-result-card p { margin-top: 6px; font-size: 13px; }

.road-illustration { min-height: 150px; display: grid; place-items: center; gap: 7px; margin: 14px 0; border-radius: 17px; color: #54715f; background: linear-gradient(160deg, #e8f3e4, #d7ead3); font-size: 40px; }
.road-illustration strong { color: var(--green-dark); font-size: 13px; letter-spacing: .08em; }
.support-note { display: flex; gap: 10px; padding: 14px; border-radius: 16px; color: #426052; background: var(--mint); font-size: 12px; line-height: 1.4; }
.support-note > span { color: var(--green); font-size: 18px; }
.student-note { display: none; gap: 9px; align-items: flex-start; margin: 10px 0 14px; padding: 12px; border: 1px solid #c7e6f2; border-radius: 14px; color: #356579; background: var(--blue-soft); font-size: 12px; line-height: 1.4; }
.student-note > span { color: var(--blue); font-size: 16px; }

.account-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px 19px; }
.settings-gear { font-size: 25px; }
.teacher-profile-card { display: flex; align-items: center; gap: 12px; padding: 15px; margin-bottom: 14px; }
.avatar { width: 55px; height: 55px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e8f4fb; font-size: 30px; }
.teacher-profile-card > div:nth-child(2) { flex: 1; min-width: 0; }
.teacher-profile-card strong { display: block; color: var(--navy); font-size: 16px; }
.teacher-profile-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.account-result-card { display: flex; align-items: center; gap: 12px; padding: 16px 15px; margin-bottom: 14px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #e2f7ec, #eefaf4); }
.result-trophy { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: #fff4c8; font-size: 25px; }
.account-result-card > div { flex: 1; min-width: 0; }
.account-result-card strong { color: var(--navy); font-size: 13px; }
.account-result-card p { margin-top: 4px; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.settings-card { padding: 4px 15px; margin-bottom: 14px; }
.role-card { padding: 14px 15px; margin-bottom: 14px; }
.role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; padding: 4px; border-radius: 13px; background: var(--surface-soft); }
.role-tab { min-height: 38px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.role-tab.selected { color: #fff; background: var(--green); box-shadow: 0 4px 9px rgba(11,155,98,.15); }
.settings-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 64px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.settings-row > span:first-child { min-width: 0; }
.settings-row strong { display: block; color: var(--navy); font-size: 13px; }
.settings-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.radio-group { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.radio-group input { accent-color: var(--green); margin-left: 4px; }
.radio-group span { white-space: nowrap; }
.device-note { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 3px; color: var(--muted); font-size: 11px; }
.device-note code { margin-left: auto; color: var(--ink); font-size: 10px; letter-spacing: .05em; }

.filter-row { display: flex; gap: 7px; padding: 1px 0 14px; }
.filter-chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 700; }
.filter-chip.selected { color: #fff; border-color: var(--green); background: var(--green); }
.history-list { display: grid; gap: 10px; }
.history-empty { padding: 30px 15px; border-radius: var(--radius-lg); color: var(--muted); background: var(--surface); text-align: center; font-size: 13px; box-shadow: var(--shadow); }
.history-item { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.history-result { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: var(--green); font-size: 20px; }
.history-result.failed { background: var(--coral); }
.history-item > div:nth-child(2) { flex: 1; min-width: 0; }
.history-item strong { display: block; overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.history-score { color: var(--green-dark); font-size: 19px; font-weight: 900; }
.history-score.failed { color: var(--coral); }

.search-wrap { display: flex; align-items: center; gap: 8px; padding: 0 13px; margin: 2px 0 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.search-wrap > span { color: var(--muted); font-size: 23px; }
.search-wrap input { width: 100%; min-height: 45px; border: 0; outline: 0; color: var(--navy); background: transparent; font-size: 13px; }
.soundboard-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.soundboard-pill { padding: 4px 7px; border-radius: 99px; color: var(--green-dark); background: var(--mint); font-size: 9px; letter-spacing: .06em; }
.soundboard-grid { display: grid; gap: 8px; }
.soundboard-grid .fault-card, .soundboard-grid .sound-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.soundboard-grid .sound-item > span { flex: 1; min-width: 0; }
.soundboard-grid .sound-item strong { display: block; overflow: hidden; color: var(--navy); font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.soundboard-grid .sound-item small { display: block; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.soundboard-grid button { min-height: 36px; padding: 7px 10px; border: 0; border-radius: 10px; color: var(--green-dark); background: var(--mint); font-size: 11px; font-weight: 800; }
.soundboard-grid .sound-item button { flex: 0 0 auto; white-space: nowrap; }

.bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 360px; min-height: 95px; margin: 0 auto; padding: 9px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(219, 231, 225, .95); background: rgba(255,255,255,.95); backdrop-filter: blur(16px); }
.bottom-nav-btn { display: grid; place-items: center; gap: 2px; border: 0; border-radius: 13px; color: #758396; background: transparent; font-size: 10px; }
.bottom-nav-btn.active { color: var(--green); background: #effaf5; font-weight: 800; }
.bottom-nav-icon { height: 25px; font-size: 24px; line-height: 25px; }

/* Screenshot parity route used by the visual benchmark; it is inactive in normal navigation. */
body.qa-focus-lesson { background: #fff; }
body.qa-focus-lesson .app-bar, body.qa-focus-lesson .bottom-nav { display: none; }
body.qa-focus-lesson .app-main { padding: 14px 18px 0; }
body.qa-focus-lesson #view-sahinh > *:not(.lesson-command-card) { display: none; }
body.qa-focus-lesson .lesson-command-card { margin: 0; border-color: #e4ece8; box-shadow: none; }
body.qa-focus-lesson .lesson-command-card .fault-section, body.qa-focus-lesson .lesson-command-card .operator-feedback-card, body.qa-focus-lesson .lesson-command-card .log-panel { display: none; }

/* Dynamic engine compatibility classes. */
.fault-list, .specific-faults, .common-faults { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fault-card { display: flex; }
.btn-nav-step { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.selected { border-color: #80d3ad; }
.passed { color: var(--green-dark) !important; background: var(--mint) !important; }
.failed { color: #a32e29 !important; background: var(--coral-soft) !important; }

/* Approved teacher scoring board: the mobile detail composition is intentionally
   compact and follows the reference screens in this order: score, lesson,
   illustration, teacher faults, latest event, next lesson. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.detail-sahinh { background: #fff; }
body.detail-sahinh .app-shell { max-width: 680px; background: #fff; }
body.detail-sahinh .app-bar {
    min-height: 54px;
    padding: 2px 6px 2px;
    background: #fff;
    box-shadow: none;
}
body.detail-sahinh .app-bar-title .eyebrow,
body.detail-sahinh #btn-header-refresh { display: none; }
body.detail-sahinh .app-bar h1 { font-size: 18px; font-weight: 800; }
body.detail-sahinh .app-bar-title { transform: translate(-5px, 7px); }
body.detail-sahinh .back-button { display: inline-grid !important; font-size: 31px; }
body.detail-sahinh .back-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.detail-sahinh .back-button { transform: translate(-9px, 6px); }
body.detail-sahinh .app-main { padding: 6px 0 calc(95px + env(safe-area-inset-bottom)); }
body.detail-sahinh #view-sahinh { max-width: 100%; }
body.detail-sahinh #view-sahinh { min-height: calc(100vh - 79px); display: flex; flex-direction: column; }

.sh-score-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    min-height: 45px;
    margin: 0 0 7px;
    padding: 0;
    width: calc(100% - 10px);
    border-radius: 10px;
    color: var(--navy);
    background: #e4f7ee;
}
.sh-score-value, .sh-time-value { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.sh-score-value { transform: translateX(-18px); }
.sh-time-value { transform: translateX(-11px); }
.sh-score-star { color: #129a65; font-size: 27px; line-height: 1; }
.sh-time-icon { display: inline-grid; place-items: center; color: var(--navy); line-height: 1; }
.sh-time-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.sh-score-value strong, .sh-time-value strong { font-size: 17px; letter-spacing: -.02em; }
.sh-score-value small { margin-left: -5px; color: #64758d; font-size: 12px; font-weight: 700; }
.sh-score-divider { width: 1px; height: 22px; background: #c7e5d7; }

.lesson-summary-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 3px 2px 7px;
}
.lesson-summary-row .sh-step-button { display: none; }
.lesson-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    margin: 0;
    border-radius: 99px;
    color: var(--green-dark);
    background: #e1f7ed;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
}
.sh-lesson-title {
    min-width: 0;
    max-width: 220px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -.015em;
}
.sh-lesson-desc, body.detail-sahinh #btn-sh-play-current-lesson { display: none; }

body.detail-sahinh .course-card {
    width: calc(100% - 5px);
    height: 178px;
    min-height: 178px;
    margin: 8px 0 0;
    border-radius: 10px;
    background: #e5f2e1;
    box-shadow: none;
}
body.detail-sahinh .course-map { width: 100%; height: 100%; }
.course-map text { font-family: inherit; }
body.detail-sahinh .map-caption {
    padding: 10px 2px 19px;
    color: #65758b;
    font-size: 13px;
    line-height: 1.15;
}

.teacher-fault-panel { margin: 0; }
.teacher-fault-heading {
    margin: 0 1px 9px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.teacher-fault-note { display: none; }
.teacher-fault-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.teacher-fault-grid .fault-card { min-width: 0; }
.btn-fault-item.fault-card {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 29px;
    align-items: center;
    gap: 5px;
    min-height: 60px;
    padding: 6px 7px;
    border: 1px solid #bce9d4;
    border-radius: 11px;
    color: var(--navy);
    background: #e0f8eb;
    box-shadow: none;
}
.btn-fault-item.fault-card:hover { border-color: #8bd6b2; background: #d8f3e5; }
.btn-fault-item.fault-card.selected { border: 2px solid var(--green); padding: 5px 6px; background: #b9f0d3; }
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card:not(.fatal):not(.selected),
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card:not(.fatal):not(.selected),
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card:not(.fatal):not(.selected) {
    background: #dcf8ea;
}

/* Fidelity A/B: the approved B2 fault rail runs slightly wider than the map
   crop; keep this board-specific width without changing B1 or other regions. */
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] {
    width: calc(100% - 4px);
}

/* The approved boards use slightly different mint/coral surfaces by lesson;
   keep those measured tones instead of flattening all fault cards to one
   global color. */
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card:not(.fatal):not(.selected) {
    background: #e1f6ed;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card:not(.fatal):not(.selected) {
    background: #dff7ea;
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card.fatal {
    background: #fcb7bc;
}
.btn-fault-item.fault-card.fatal {
    grid-column: 1 / -1;
    border-color: #ec9298;
    color: #a2272b;
    background: #fcb7bc;
}
.fault-card-icon { display: grid; place-items: center; width: 28px; height: 30px; color: #103a61; }
.fatal .fault-card-icon { color: #b92b31; }
.fault-svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.fatal .fault-svg { stroke-width: 1.8; }
.fault-svg.fault-arrow { fill: #eda923; stroke: none; }
.fault-svg.fault-traffic-light { stroke-width: 1.9; }
.fault-svg.fault-traffic-light circle:first-of-type { fill: #e9584f; stroke: none; }
.fault-svg.fault-traffic-light circle:nth-of-type(2) { fill: #f2b33b; stroke: none; }
.fault-svg.fault-traffic-light circle:nth-of-type(3) { fill: #0b9b62; stroke: none; }
.fault-svg.fault-engine { stroke-width: 1.9; }
.fault-svg.fault-filled-person { fill: currentColor; stroke: none; }
.fault-svg.fault-stop-sign { fill: #c82e35; stroke: #c82e35; stroke-width: 1.2; }
.fault-svg.fault-stop-sign path + path { fill: #c82e35; stroke: #fff; stroke-width: 1.8; }
.fault-svg.fault-tire { fill: currentColor; stroke: currentColor; }
.fault-svg.fault-tire path { fill: none; stroke: #fff; stroke-width: 1.45; }
.fault-svg.fault-tire ellipse:nth-of-type(2) { fill: none; stroke: #fff; stroke-width: 1.45; }
.fatal .fault-svg.fault-tire { color: #103a61; }
.fault-svg.fault-pin { stroke-width: 2.6; }
.fault-svg.fault-pin { fill: currentColor; }
.fault-svg.fault-pin circle { fill: #e5f8ef; stroke: none; }
.fault-svg.fault-slope-car path:nth-of-type(2) { fill: currentColor; stroke: currentColor; stroke-width: 1.3; }
.fault-svg.fault-slope-car circle { fill: currentColor; stroke: none; }
.fatal .fault-svg.fault-slope-car { color: #103a61; }
.fault-card-icon svg.fault-filled-person { width: 34px; height: 34px; }
.fault-raster-icon { display: block; width: 38px; height: 46px; object-fit: contain; }
.fault-raster-icon.fault-b1-seatbelt-raster,
.fault-raster-icon.fault-b1-parking-raster { width: 42px; height: 50px; object-fit: contain; }
.fault-raster-icon.fault-b2-pedestrian-raster { width: 33px; height: 54px; object-fit: contain; transform: translate(1px, -6px); }
.fault-raster-icon.fault-b3-rollback-raster { width: 50px; height: 42px; object-fit: contain; transform: translate(-1px, -1px); }
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card[data-fault-code="wheel-track-miss"] .fault-card-icon {
    transform: translateX(-10px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card[data-fault-code="wheel-track-miss"] .fault-raster-icon {
    width: 42px;
    height: 48px;
    transform: translateY(-7px) scale(1.12);
}
/* Bài 1 keeps the reference pictograms optically high in their rails. The
   source crops are measured from the approved 360px board; scale the dark
   silhouette to the same bbox without changing the card's line-box. */
body.detail-sahinh #sh-specific-faults[data-lesson="start"] .fault-card[data-fault-code="start-seatbelt"] .fault-raster-icon {
    transform: translateY(-12px) scale(1.23);
}
body.detail-sahinh #sh-specific-faults[data-lesson="start"] .fault-card[data-fault-code="start-parking-brake"] .fault-raster-icon {
    transform: translateY(-15px) scale(1.23);
}
.fault-glyph { display: inline-grid; place-items: center; min-width: 25px; font-size: 24px; font-weight: 900; line-height: 1; }
.fault-glyph.arrow { color: #efaa27; font-size: 30px; }
.fault-glyph.belt { font-size: 28px; transform: rotate(-25deg); }
.fault-glyph.parking { font-size: 24px; }
.fault-glyph.timer { font-size: 26px; }
.fault-glyph.person { font-size: 26px; }
.fault-glyph.pin { font-size: 27px; }
.fault-glyph.stop { font-size: 25px; }
.fault-glyph.slope { font-size: 25px; }
.fault-glyph.wheel { font-size: 25px; }
.fault-glyph.gear { font-size: 23px; }
.fault-card-content { display: block; min-width: 0; }
.fault-title-text {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.18;
    text-overflow: ellipsis;
}
.fault-no-break { white-space: nowrap; }
.fault-card-state {
    display: block;
    min-height: 0;
    margin-top: 3px;
    color: var(--green-dark);
    font-size: 9px;
    font-weight: 850;
    line-height: 1.1;
}
.fault-card-state:not(:empty)::before { content: none; }
.fault-state-check {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
    color: #fff;
    background: #21a966;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    vertical-align: -4px;
}
.fatal .fault-card-state { color: #b92b31; }
.fault-card-meta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.fault-card-meta .fault-audio-icon { margin: 0; color: #135272; font-size: 15px; line-height: 1; }
.fatal .fault-card-meta .fault-audio-icon { color: #c82e35; }
.fault-card-meta .fault-audio-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fault-card-meta .fault-audio-icon svg .speaker-body { fill: currentColor; stroke: none; }
.fault-card-meta .fault-audio-icon svg .speaker-waves { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fault-card-meta strong { color: var(--navy); font-size: 15px; line-height: 1; }
.fatal .fault-card-meta strong { display: none; }
.extra-fault-details, .common-fault-details { margin-top: 6px; }
.extra-fault-details summary, .common-fault-details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 29px;
    padding: 4px 4px;
    color: #61748a;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.extra-fault-details summary span, .common-fault-details summary span { font-size: 15px; }
.extra-fault-details[open] summary, .common-fault-details[open] summary { color: var(--green-dark); }

body.detail-sahinh .operator-feedback-card {
    display: block;
    width: calc(100% - 15px);
    padding: 11px 10px;
    margin: 10px 5px 10px;
    border: 1px solid #e1e8e8;
    border-radius: 10px;
    background: #f1f6f6;
    box-shadow: none;
}
.feedback-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.feedback-header strong { color: var(--navy); font-size: 12px; }
.feedback-header span { color: #64758d; font-size: 10px; font-variant-numeric: tabular-nums; }
.feedback-line { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 15px; }
.feedback-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--green); font-size: 18px; font-weight: 900; }
.feedback-check-circle { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; font-size: 23px; font-weight: 900; line-height: 1; }
.feedback-icon.danger { background: var(--coral); }
.feedback-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feedback-icon.shape-icon { background: transparent; color: #103a61; }
.feedback-icon.shape-icon.danger { color: #c82e35; }
.feedback-icon.shape-icon .fault-svg { width: 28px; height: 28px; stroke-width: 1.9; }
.feedback-icon.shape-icon .fault-svg.fault-stop-sign { fill: #c82e35; stroke: #c82e35; }
.feedback-icon.shape-icon .fault-svg.fault-stop-sign path + path { fill: #c82e35; stroke: #fff; stroke-width: 1.8; }
.feedback-icon .feedback-check-mark { width: 25px; height: 25px; color: var(--green); stroke-width: 2.6; }
.feedback-line p { color: var(--navy); font-size: 12px; font-weight: 750; line-height: 1.2; }
.feedback-undo { display: none; }
.sh-next-lesson-button {
    width: calc(100% - 15px);
    min-height: 53px;
    margin: 0 5px;
    border-radius: 11px;
    font-size: 14px;
    box-shadow: none;
    margin-top: auto;
}
.sh-operator-tools { margin: 12px 0 0; border-top: 1px solid #e8efec; }
.sh-operator-tools summary { padding: 9px 2px; color: #65758b; font-size: 10px; font-weight: 800; cursor: pointer; }
.sh-operator-tools .exam-action-bar { margin: 0 0 8px; }
.sh-operator-tools .operator-tip { margin: 0 0 8px; }
.sh-operator-tools .log-panel { box-shadow: none; }

body.qa-focus-lesson { background: #fff; }
body.qa-focus-lesson .app-bar, body.qa-focus-lesson .bottom-nav { display: flex; }
body.qa-focus-lesson .app-bar { position: relative; }
body.qa-focus-lesson .app-main { padding: 6px 9px 22px; }
body.qa-focus-lesson #view-sahinh > * { display: initial; }
body.qa-focus-lesson #view-sahinh { display: block; }
body.qa-focus-lesson #view-sahinh .sh-operator-tools,
body.qa-focus-lesson #view-sahinh .student-note,
body.qa-focus-lesson #view-sahinh .lesson-list-card,
body.qa-focus-lesson #view-sahinh #sh-result-card { display: none !important; }

@media (min-width: 680px) {
    body.detail-sahinh .app-main { padding-right: 18px; padding-left: 18px; }
    body.detail-sahinh .course-card { height: 204px; min-height: 204px; }
    body.detail-sahinh .map-caption { font-size: 11px; }
}
.testing { color: #126a49 !important; background: var(--mint) !important; }
.waiting { color: #6d7d8d !important; background: #e8eef0 !important; }

@media (min-width: 700px) {
    body { padding: 18px 0; }
    .app-shell { min-height: calc(100vh - 36px); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 20px 60px rgba(30,58,84,.1); overflow: hidden; }
    .app-bar { border-radius: 28px 28px 0 0; }
    .bottom-nav { position: sticky; margin-top: -72px; border-radius: 0 0 28px 28px; }
}

@media (max-width: 390px) {
    .app-main { padding-right: 12px; padding-left: 12px; }
    .score-strip { gap: 5px; }
    .score-strip > div { padding-right: 8px; padding-left: 8px; }
    .score-primary strong { font-size: 32px; }
    .score-metric strong { font-size: 16px; }
    .lesson-list { grid-template-columns: 1fr; }
    .fault-grid { grid-template-columns: 1fr; }
    .feedback-actions { grid-template-columns: 1fr; }
    .settings-row { align-items: flex-start; flex-direction: column; }
    .radio-group { align-self: flex-end; }
}

/* Final mobile constraints: prevent intrinsic button text from widening the
   canvas. The reference board keeps the first fault rows in two columns even
   on the narrow phone viewport. */
body.detail-sahinh { overflow-x: hidden; }
body.detail-sahinh .app-shell,
body.detail-sahinh .app-main,
body.detail-sahinh #view-sahinh { width: 100%; max-width: 360px; min-width: 0; }
body.detail-sahinh .app-shell { width: 100%; max-width: 360px; }
body.detail-sahinh .app-main { width: 100%; max-width: 360px; padding-right: 0; padding-left: 0; }
body.detail-sahinh .app-main { padding-bottom: 13px; }
body.detail-sahinh .sh-score-strip { width: calc(100% - 5px); min-width: 0; }
body.detail-sahinh .teacher-fault-grid { width: calc(100% - 5px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] { grid-template-columns: minmax(0, 1fr); }
body.detail-sahinh .btn-fault-item.fault-card { width: 100%; min-width: 0; }
body.detail-sahinh .sh-operator-tools { display: none; }
body.detail-sahinh #sh-display-status { display: none !important; }
body.detail-sahinh .course-card {
    width: calc(100% - 5px);
    height: auto;
    min-height: 0;
    aspect-ratio: 360 / 200;
    margin-left: 0;
}
body.detail-sahinh .course-map.approved-course-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
body.detail-sahinh .course-card[data-approved="lesson-1-start"] { aspect-ratio: 351 / 200; margin-top: 10px; }
body.detail-sahinh .course-card[data-approved="lesson-2-pedestrian"] { aspect-ratio: 351 / 196; }
body.detail-sahinh .course-card[data-approved="lesson-3-hill"] { aspect-ratio: 355 / 196; }
body.detail-sahinh .course-card[data-approved="lesson-4-wheel"] { aspect-ratio: 355 / 196; }
body.detail-sahinh .course-card[data-approved] .approved-course-image { object-fit: fill; }

/* Long approved board titles occupy two lines. Reserve their full title
   rhythm before the map, then use the reference map height so the fault
   heading remains on the same vertical baseline. */
body.detail-sahinh .lesson-summary-row[data-lesson="pedestrian-stop"],
body.detail-sahinh .lesson-summary-row[data-lesson="hill-start"],
body.detail-sahinh .lesson-summary-row[data-lesson="wheel-track-right-angle"] {
    min-height: 60px;
}
body.detail-sahinh .lesson-summary-row[data-lesson="hill-start"] .sh-lesson-title,
body.detail-sahinh .lesson-summary-row[data-lesson="wheel-track-right-angle"] .sh-lesson-title {
    max-width: 185px;
}
body.detail-sahinh .lesson-summary-row[data-lesson="hill-start"] .sh-lesson-title {
    max-width: 220px;
    font-size: 17px;
    line-height: 1.15;
    transform: translateY(3px);
}
body.detail-sahinh .lesson-summary-row[data-lesson="pedestrian-stop"] .sh-lesson-title,
body.detail-sahinh .lesson-summary-row[data-lesson="wheel-track-right-angle"] .sh-lesson-title {
    font-size: 18px;
    line-height: 1.36;
    transform: translateY(6px);
}
body.detail-sahinh .lesson-summary-row[data-lesson="start"] .sh-lesson-title { transform: translateY(2px); }
body.detail-sahinh .lesson-summary-row[data-lesson="hill-start"] .sh-lesson-title {
    line-height: 1.35;
    transform: translateY(5px);
}
body.detail-sahinh .lesson-summary-row[data-lesson="wheel-track-right-angle"] .sh-lesson-title {
    line-height: 1.3;
    transform: translateY(8px);
}
body.detail-sahinh .course-card[data-approved="lesson-2-pedestrian"] { aspect-ratio: 351 / 196; }
body.detail-sahinh .course-card[data-approved="lesson-3-hill"],
body.detail-sahinh .course-card[data-approved="lesson-4-wheel"] {
    aspect-ratio: 355 / 196;
}

body.detail-sahinh .teacher-fault-grid { width: calc(100% - 5px); }
body.detail-sahinh .operator-feedback-card { width: 100%; margin-left: 0; margin-right: 0; }
body.detail-sahinh .sh-next-lesson-button { width: 100%; margin-left: 0; margin-right: 0; }
body.detail-sahinh .lesson-badge { min-height: 38px; }

/* The approved Bài 1 board uses two compact columns. Its score sits below
   the fault label inside each card; single-column lessons keep the score in
   the right rail, matching the approved Bài 2–11 boards. */
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card:not(.fatal) {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    min-height: 92px;
    padding: 8px 8px;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card:not(.fatal).selected { padding: 7px 7px; }
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] { margin-top: 17px; }
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-title-text { font-size: 14px; }
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card-meta { position: static; }
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card-meta .fault-audio-icon {
    position: absolute;
    top: 10px;
    right: 13px;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card-meta strong {
    position: absolute;
    left: calc(42px + (100% - 64px) / 2);
    bottom: 8px;
    color: var(--navy);
    font-size: 16px;
    transform: translateX(calc(-50% - 4px));
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-title-text {
    word-break: keep-all;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card-icon {
    width: 34px;
    height: 34px;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card-icon .fault-svg {
    width: 34px;
    height: 34px;
    transform: scale(1.15);
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card.fatal {
    grid-template-columns: 76px minmax(0, 1fr) 29px;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card.fatal .fault-card-icon {
    justify-self: center;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card.fatal .fault-title-text {
    padding-left: 7px;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card.fatal { min-height: 64px; }
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-layout="two-column"]) + .operator-feedback-card {
    min-height: 86px;
    margin-top: 29px;
}
/* In the approved Bài 1 board the two-line labels sit optically above the
   vertical centre of the tall cards, while the -5 score sits on its own lower
   baseline. Keep these adjustments local to Bài 1 so the single-column boards
   retain their independently measured rhythm. */
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card:not(.fatal) .fault-card-content {
    transform: translate(1px, -11px);
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card:not(.fatal) .fault-card-meta strong {
    bottom: 12px;
    font-size: 20px;
    transform: translateX(calc(-50% - 7px));
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card[data-fault-code="start-indicator-off"] .fault-card-content {
    transform: translate(7px, -11px);
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card[data-fault-code="start-left-indicator"] .fault-card-content {
    transform: translate(7px, -11px);
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card-meta .fault-audio-icon svg {
    width: 28px;
    height: 28px;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card:not(.fatal) .fault-card-meta .fault-audio-icon {
    top: 14px;
}

body.detail-sahinh #sh-specific-faults[data-layout="single-column"] { margin-top: 20px; }
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-title-text { font-size: 16px; }
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card.fatal .fault-title-text { font-size: 15px; }
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card {
    grid-template-columns: 70px minmax(0, 1fr) 42px;
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card-icon {
    width: 48px;
    height: 36px;
    justify-self: center;
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card-icon .fault-svg {
    width: 38px;
    height: 38px;
    transform: scale(1.08);
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card-meta .fault-audio-icon svg {
    width: 22px;
    height: 22px;
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card-meta {
    transform: translateX(0);
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card-meta {
    transform: translateX(1px);
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card-meta {
    transform: translateX(-4px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] { margin-top: 14px; }
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card {
    grid-template-columns: 73px minmax(0, 1fr) 42px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card:not(.fatal) { min-height: 77px; }
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card.selected { min-height: 104px; }
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card.selected { margin-bottom: 5px; }
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] { margin-top: 11px; }
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card {
    grid-template-columns: 67px minmax(0, 1fr) 47px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card { min-height: 55px; }
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="hill-start"]) + .operator-feedback-card { margin-top: 12px; }
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] {
    margin-top: 14px;
    gap: 8px;
    width: calc(100% - 15px);
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .sh-score-strip,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .course-card,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .operator-feedback-card,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .sh-next-lesson-button {
    width: calc(100% - 15px);
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .course-card[data-approved="lesson-4-wheel"] {
    aspect-ratio: 345 / 196;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card {
    grid-template-columns: 67px minmax(0, 1fr) 47px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card.fatal {
    position: relative;
    grid-template-columns: 55px minmax(0, 1fr) 29px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card.fatal .fault-title-text {
    font-size: 14px;
    white-space: nowrap;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card.fatal .fault-card-content {
    padding-right: 0;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card.fatal .fault-card-meta {
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translate(-4px, -50%);
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card.fatal .fault-card-icon .fault-svg {
    width: 32px;
    height: 32px;
    transform: translateX(-6px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card {
    min-height: 77px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card:nth-child(-n + 2) {
    min-height: 72px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-title-text {
    font-size: 13px;
}
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-layout="single-column"]) + .operator-feedback-card { margin-top: 20px; }
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="hill-start"]) + .operator-feedback-card { margin-top: 12px; }
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) + .operator-feedback-card {
    min-height: 90px;
    margin-top: 58px;
}

/* Bài 5 exposes six teacher-observed faults. Keep every action visible in
   the 360px board so the feedback and next-lesson controls never fall below
   the viewport. */
body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] { gap: 4px; margin-top: 14px; }
body.detail-sahinh:has(#sh-specific-faults[data-lesson="traffic-light"]) #sh-course-map {
    aspect-ratio: 360 / 170;
}
body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card {
    min-height: 44px;
    padding-top: 2px;
    padding-bottom: 2px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-title-text { font-size: 11px; }
body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card.fatal { min-height: 44px; }
body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card-icon,
body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card-icon .fault-svg { width: 30px; height: 30px; }
body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card-meta .fault-audio-icon svg { width: 18px; height: 18px; }
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="traffic-light"]) + .operator-feedback-card { margin-top: 12px; }

/* The approved 360x922 compositions leave a small, lesson-specific air gap
   between feedback and the final CTA. Preserve the compact viewport rules
   below while matching that baseline on the canonical canvas. */
@media (min-height: 881px) {
    body.detail-sahinh:has(#sh-specific-faults[data-layout="two-column"]) .sh-next-lesson-button { transform: translateY(1px); }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="pedestrian-stop"]) .sh-next-lesson-button { transform: translateY(3px); }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .sh-next-lesson-button { transform: translateY(4px); }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .sh-next-lesson-button { transform: translateY(4px); }
}

/* Student view keeps the same approved visual language while exposing only
   the learning affordances: description, lesson voice and lesson navigation.
   Teacher scoring, feedback and session controls remain teacher-only. */
body.detail-sahinh .app-shell.role-student .lesson-summary-row {
    grid-template-columns: 28px 92px minmax(0, 1fr) 28px;
    gap: 5px;
    padding-left: 0;
    padding-right: 0;
}
body.detail-sahinh .app-shell.role-student .lesson-summary-row .sh-step-button {
    display: grid;
    width: 28px;
    height: 30px;
    padding: 0;
    border: 1px solid #c8e8da;
    border-radius: 9px;
    color: var(--green-dark);
    background: #e8f8f0;
    font-size: 22px;
    line-height: 1;
}
body.detail-sahinh .app-shell.role-student .lesson-summary-row .sh-step-button:disabled {
    color: #a8b8b3;
    background: #f4f7f6;
    opacity: .65;
}
body.detail-sahinh .app-shell.role-student .sh-lesson-desc {
    display: block;
    margin: 0 5px 8px;
    color: #64758d;
    font-size: 12px;
    line-height: 1.35;
}
body.detail-sahinh .app-shell.role-student #btn-sh-play-current-lesson {
    display: flex;
    width: calc(100% - 15px);
    min-height: 48px;
    margin: 8px 5px 10px;
    border-radius: 12px;
    font-size: 14px;
}
body.detail-sahinh .app-shell.role-student #btn-sh-play-current-lesson .voice-symbol svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.detail-sahinh .app-shell.role-student .student-note {
    display: flex;
    margin: 12px 5px 14px;
}

/* Approved Bài 2 wraps the long position label so the selected state sits on
   its own line, matching the teacher-board reference and keeping the action
   rail visually separated from the loudspeaker/score rail. */
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card[data-fault-code="pedestrian-early"] .fault-title-text {
    max-width: 120px;
}
body.detail-sahinh .lesson-summary-row[data-lesson="pedestrian-stop"] {
    grid-template-columns: 114px minmax(0, 1fr);
    gap: 14px;
    padding-left: 0;
    padding-right: 0;
}
/* Bài 4 approved title uses the same visual weight as the Bài 3 title while
   retaining the two-line wrap and the 10px badge/title gap. */
body.detail-sahinh .lesson-summary-row[data-lesson="wheel-track-right-angle"] .sh-lesson-title {
    font-size: 17px;
}
body.detail-sahinh .course-card[data-approved="lesson-4-wheel"] {
    margin-top: 9px;
}
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) + .operator-feedback-card {
    transform: translateY(5px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card.fatal .fault-card-icon .fault-svg.fault-tire {
    height: 37px;
    transform: translateX(-4px);
}
/* Bài 4 has a slightly taller approved feedback band while the CTA remains
   flex-anchored at the bottom of the board. */
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) + .operator-feedback-card {
    min-height: 92px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card[data-fault-code="pedestrian-no-stop"] .fault-card-icon {
    transform: translate(-3px, -2px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card[data-fault-code="pedestrian-no-stop"] .fault-card-icon .fault-svg.fault-filled-person {
    width: 42px;
    height: 43px;
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card.fatal:nth-child(1) { background: #fbbbc3; }
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card.fatal:nth-child(3) { background: #fbb4b5; }
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card.fatal:nth-child(4) { background: #fdb5b7; }
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card.fatal:nth-child(5) { background: #fdb5b7; }
body.detail-sahinh #sh-specific-faults[data-lesson="start"] .fault-card[data-fault-code="start-seatbelt"] .fault-raster-icon {
    transform: translateY(-14px) scale(1.30);
}
body.detail-sahinh #sh-specific-faults[data-lesson="start"] .fault-card[data-fault-code="start-parking-brake"] .fault-raster-icon {
    transform: translate(1px, -18px) scale(1.30);
}
body.detail-sahinh #sh-specific-faults[data-lesson="start"] .fault-card[data-fault-code="start-left-indicator"] .fault-card-icon {
    transform: translate(8px, -9px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="start"] .fault-card[data-fault-code="start-timing"] .fault-card-icon {
    transform: translate(8px, -10px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="start"] .fault-card.fatal .fault-card-icon .fault-svg.fault-timer {
    transform: translate(-1px, 0) scale(1.12, 1.24);
}
body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="pedestrian-stop"]) + .operator-feedback-card {
    margin-top: 22px;
}

/* Reference-map crops are exact assets; these optical offsets align their
   visible top/bottom edges to the approved 360px captures without shifting
   the caption, fault controls or CTA layout. */
body.detail-sahinh .course-card[data-approved="lesson-3-hill"] .approved-course-image {
    transform: translateY(1px);
}
body.detail-sahinh .course-card[data-approved="lesson-2-pedestrian"] .approved-course-image {
    transform: translateY(2px);
}
body.detail-sahinh .course-card[data-approved="lesson-4-wheel"] .approved-course-image {
    transform: translateY(1px);
}

/* Mobile-first navigation: keep the approved bottom bar pinned to the viewport
   while the content scrolls. Screens that use a focused operator canvas hide
   it explicitly so it never covers the score board or fault controls. */
.app-shell { display: flex; flex-direction: column; }
.app-main { flex: 1 0 auto; }
.bottom-nav {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    flex: 0 0 auto;
    width: 100%;
    margin: 0 auto;
}
body:not(.detail-sahinh) .app-main { padding-bottom: 112px; }
body[data-view="view-home"] .app-main,
body[data-view="view-settings"] .app-main { padding-bottom: 112px; }
@media (min-width: 700px) {
    .bottom-nav { position: fixed; margin: 0 auto; }
}
@media (max-height: 880px) {
    body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] { gap: 3px; margin-top: 10px; }
    body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card,
    body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card.fatal {
        min-height: 35px;
        padding: 2px 6px;
    }
    body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card-icon { width: 24px; height: 24px; }
    body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card-icon .fault-svg { width: 24px; height: 24px; }
    body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-card-meta .fault-audio-icon svg { width: 17px; height: 17px; }
    body.detail-sahinh #sh-specific-faults[data-lesson="traffic-light"] .fault-title-text { font-size: 9.5px; }
    body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-lesson="traffic-light"]) + .operator-feedback-card { margin-top: 8px; }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="traffic-light"]) .operator-feedback-card {
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 6px;
    }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="traffic-light"]) .feedback-header { margin-bottom: 4px; }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="traffic-light"]) .feedback-icon { width: 24px; height: 24px; }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="traffic-light"]) .sh-next-lesson-button { min-height: 48px; }

    /* Short mobile canvases keep the same hierarchy while reclaiming only
       vertical whitespace. The canonical 360x922 composition is unchanged. */
    body.detail-sahinh .lesson-summary-row[data-lesson="pedestrian-stop"],
    body.detail-sahinh .lesson-summary-row[data-lesson="hill-start"],
    body.detail-sahinh .lesson-summary-row[data-lesson="wheel-track-right-angle"] {
        min-height: 54px;
    }
    body.detail-sahinh .course-card[data-approved="lesson-2-pedestrian"],
    body.detail-sahinh .course-card[data-approved="lesson-3-hill"],
    body.detail-sahinh .course-card[data-approved="lesson-4-wheel"] {
        aspect-ratio: 360 / 184;
    }
    body.detail-sahinh #sh-specific-faults[data-layout="single-column"]:not([data-lesson="traffic-light"]) {
        gap: 4px;
        margin-top: 10px;
    }
    body.detail-sahinh #sh-specific-faults[data-layout="single-column"]:not([data-lesson="traffic-light"]) .fault-card {
        min-height: 54px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card.selected { min-height: 72px; }
    body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card { min-height: 50px; }
    body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card { min-height: 58px; }
    body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card:nth-child(-n + 2) { min-height: 54px; }
    body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-layout="single-column"]) + .operator-feedback-card {
        min-height: 74px;
        margin-top: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    body.detail-sahinh .sh-next-lesson-button { min-height: 48px; }

    body.detail-sahinh .course-card[data-approved="lesson-1-start"] { aspect-ratio: 360 / 180; }
    body.detail-sahinh #sh-specific-faults[data-layout="two-column"] {
        gap: 4px;
        margin-top: 12px;
    }
    body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card:not(.fatal) {
        min-height: 78px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card.fatal { min-height: 58px; }
    body.detail-sahinh .teacher-fault-panel:has(#sh-specific-faults[data-layout="two-column"]) + .operator-feedback-card {
        min-height: 74px;
        margin-top: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .sh-next-lesson-button {
        position: fixed;
        z-index: 19;
        right: auto;
        bottom: 2px;
        left: 50%;
        width: min(360px, calc(100vw - 8px));
        margin: 0;
        transform: translateX(-50%);
    }
}

/* Score strip parity: the approved boards center the score group in the
   left half; the clock group sits only slightly left of its right-half
   center. Keep this after all detail/mobile rules so both canonical and
   responsive captures use the same alignment. */
body.detail-sahinh .sh-score-value {
    transform: translateX(0);
}
body.detail-sahinh .sh-time-value {
    transform: translateX(-5px);
}
body.detail-sahinh .sh-score-star {
    transform: translateX(-7px) scale(1.12);
    transform-origin: right center;
}
body.detail-sahinh .sh-time-icon {
    transform: translateX(-7px) scale(1.1);
    transform-origin: right center;
}

/* Approved lesson-introduction typography and step rail. These dimensions
   follow the reference board: larger reading hierarchy, a 49px step icon,
   and a deliberate gap before the instructional copy. */
body[data-view="view-lesson-intro"] .lesson-intro-title {
    font-size: 32px;
    line-height: 1.08;
}
body[data-view="view-lesson-intro"] .lesson-intro-desc {
    max-width: 320px;
    margin-top: 11px;
    font-size: 16px;
    line-height: 1.35;
}
body[data-view="view-lesson-intro"] .lesson-intro-chips {
    margin-top: 18px;
    margin-bottom: 25px;
}
body[data-view="view-lesson-intro"] .lesson-objective-card {
    margin-bottom: 16px;
}
body[data-view="view-lesson-intro"] .lesson-objective-card strong {
    font-size: 16px;
}
body[data-view="view-lesson-intro"] .lesson-objective-card p {
    font-size: 13px;
    line-height: 1.35;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice {
    margin-bottom: 19px;
    font-size: 20px;
}
body[data-view="view-lesson-intro"] .lesson-steps-title {
    margin-bottom: 13px;
    font-size: 20px;
}
body[data-view="view-lesson-intro"] .lesson-step {
    grid-template-columns: 28px 49px minmax(0, 1fr);
    column-gap: 16px;
    min-height: 92px;
}
body[data-view="view-lesson-intro"] .lesson-step-icon {
    width: 49px;
    height: 49px;
}
body[data-view="view-lesson-intro"] .lesson-step-icon.step-belt svg circle {
    fill: currentColor;
    stroke: none;
}
body[data-view="view-lesson-intro"] .lesson-step-icon.step-arrow svg {
    stroke-width: 3.2;
}
body[data-view="view-lesson-intro"] .lesson-step-icon.step-brake svg {
    stroke-width: 2.1;
}
.intro-raster-icon { display: block; object-fit: contain; }
.intro-belt-raster { width: 39px; height: 57px; transform: translate(3px, 0); }
.intro-arrow-raster { width: 42px; height: 48px; transform: translate(3px, -4px); }
.intro-brake-raster { width: 42px; height: 48px; transform: translate(3px, -3px); }
body[data-view="view-lesson-intro"] .lesson-step-copy strong {
    font-size: 16px;
}
body[data-view="view-lesson-intro"] .lesson-step-copy small {
    font-size: 12px;
}
body[data-view="view-lesson-intro"] .lesson-intro-start {
    transform: translateY(10px);
}

/* v40 mobile navigation contract: the primary bar is a viewport control,
   never part of the scrolling document. Keep the phone-width geometry while
   making the pin explicit for standalone/file and hosted PWA runs. */
.bottom-nav {
    position: fixed !important;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(100%, 360px);
    height: 95px;
    min-height: 95px;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    transform: translateZ(0);
}
@media (min-width: 700px) {
    .bottom-nav {
        position: fixed !important;
        top: auto;
        right: max(0px, calc((100vw - 680px) / 2));
        left: max(0px, calc((100vw - 680px) / 2));
        width: auto;
        max-width: 680px;
        margin-right: 0;
        margin-left: 0;
        border-radius: 0 0 28px 28px;
    }
}

/* Browser-preview fidelity: the approved Bài 1–4 reference crops retain the
   centered notch. Keep it presentation-only in browser captures; installed
   standalone PWAs use the device's own safe-area/status chrome instead. */
@media (min-width: 480px) and (display-mode: browser) {
    body.detail-sahinh .phone-status-preview { display: block !important; }
    body.detail-sahinh .phone-status-notch { display: block !important; }
}

/* Intro fidelity A/B: the approved three step cards are two pixels taller
   each; tighten the heading-to-rail gap so the CTA keeps its approved anchor. */
body[data-view="view-lesson-intro"] .lesson-steps-title {
    margin-bottom: 10px;
}
body[data-view="view-lesson-intro"] .lesson-steps {
    gap: 7px;
}
body[data-view="view-lesson-intro"] .lesson-step {
    min-height: 94px;
}

/* Navigation icon fidelity: match the approved cone, road and user
   silhouettes and give the bottom labels the same readable mobile scale. */
.bottom-nav-btn {
    gap: 3px;
    font-size: 11px;
}
.bottom-nav-icon {
    height: 27px;
    line-height: 27px;
}
.bottom-nav-icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.2;
}
.bottom-nav {
    padding-left: 0;
    padding-right: 0;
}

/* v86 A/B: measured center-surface colors from the approved teacher-board
   references. Keep these scoped to Sa hình detail boards; Home, Intro,
   Account and Đường trường retain their own approved surfaces. */
body.detail-sahinh .sh-score-strip {
    background: #e4f7ee !important;
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="pedestrian-stop"]) .sh-score-strip {
    background: #e7f8f0 !important;
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .sh-score-strip {
    background: #e7f8f0 !important;
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .sh-score-strip {
    background: #e6f7ed !important;
}
body.detail-sahinh .operator-feedback-card {
    background: #eff4f4 !important;
}
body.detail-sahinh .sh-next-lesson-button {
    background: #148a59 !important;
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="pedestrian-stop"]) .operator-feedback-card,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .operator-feedback-card {
    background: #eff3f4 !important;
}

/* Installed PWAs already receive the device's own safe-area/status chrome;
   never paint a second synthetic notch there. The canonical browser preview
   remains unchanged for comparison with the approved mockups. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    body.detail-sahinh .phone-status-preview {
        display: none !important;
    }
}



/* v82 A/B effective tail: primary-canvas and Home-hero adjustments must be
   after the legacy fidelity cascade to be measured on the real runtime. */
body[data-view="view-home"],
body[data-view="view-lesson-intro"],
body[data-view="view-settings"],
body[data-view="view-home"] .app-shell,
body[data-view="view-lesson-intro"] .app-shell,
body[data-view="view-settings"] .app-shell,
body[data-view="view-home"] .app-main,
body[data-view="view-lesson-intro"] .app-main,
body[data-view="view-settings"] .app-main {
    background: #fafaf8 !important;
}
body[data-view="view-home"] .primary-feature-copy { bottom: 27px !important; }
body[data-view="view-home"] .primary-feature strong { line-height: 1.2 !important; }

/* v77 A/B fidelity pass: the approved teacher-board captures use a slightly
   darker action green and a white inner surface for the latest-event row;
   keep both changes scoped to the detail board so Home/Account colors and
   interaction semantics remain untouched. */
body.detail-sahinh .operator-feedback-card {
    background: #eff4f4;
}
body.detail-sahinh .feedback-line {
    position: relative;
    isolation: isolate;
}
body.detail-sahinh .feedback-line::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 2px 0 -11px;
    border-radius: 8px;
    background: #ffffff;
}
body.detail-sahinh .feedback-line > * {
    position: relative;
    z-index: 1;
}
body.detail-sahinh .sh-next-lesson-button {
    background: #148a59;
}

/* v78 A/B: the approved detail captures carry a near-white #fcfcfc canvas
   outside the colored score/map/fault bands. */
body.detail-sahinh,
body.detail-sahinh .app-shell,
body.detail-sahinh .app-main,
body.detail-sahinh #view-sahinh {
    background: #fcfcfc;
}

/* v79 A/B: retain the approved phone-screen bottom corner mask on the
   canonical detail capture while keeping the interior canvas near-white. */
body.detail-sahinh .app-shell {
    background: #000000;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

/* The approved teacher-board captures use the same near-white canvas in the
   top bar as they do between the content bands. Keep the bar visually level
   with the board while leaving the real PWA status chrome untouched. */
body.detail-sahinh .app-bar {
    background: #fcfcfc;
}

/* v80 A/B: primary approved screens use a warm near-white canvas between
   cards; keep the colored cards and fixed navigation on their own surfaces. */
body[data-view="view-home"],
body[data-view="view-lesson-intro"],
body[data-view="view-settings"],
body[data-view="view-home"] .app-shell,
body[data-view="view-lesson-intro"] .app-shell,
body[data-view="view-settings"] .app-shell,
body[data-view="view-home"] .app-main,
body[data-view="view-lesson-intro"] .app-main,
body[data-view="view-settings"] .app-main {
    background: #fafaf8;
}

/* v81 A/B: the approved Home hero gives the title a taller line box while
   keeping the two-line description on its existing lower baseline. */
body[data-view="view-home"] .primary-feature-copy {
    bottom: 27px;
}
body[data-view="view-home"] .primary-feature strong {
    line-height: 1.2;
}

/* v85 A/B: the approved B1-B4 detail references retain the centered black
   phone notch in the captured canvas. Keep it as presentation chrome only;
   it is absolutely positioned and therefore cannot move the teacher board,
   score strip, map, fault rows, feedback or CTA. */
body.detail-sahinh .phone-status-preview {
    position: absolute;
    z-index: 31;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 28px;
    padding: 0;
    pointer-events: none;
}
body.detail-sahinh .phone-status-notch {
    position: absolute;
    top: 0;
    left: calc(50% - 5px);
    display: block;
    width: 104px;
    height: 8px;
    border-radius: 0 0 24px 24px / 0 0 7px 7px;
    background: #050505;
    transform: translateX(-50%);
}
body.detail-sahinh .back-button svg {
    width: 31px;
    height: 31px;
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .back-button {
    transform: translate(-11px, 4px);
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .back-button {
    transform: translate(-16px, 4px);
}
body.detail-sahinh .phone-status-time,
body.detail-sahinh .phone-status-indicators { display: none; }
body.detail-sahinh:has(#sh-specific-faults[data-lesson="pedestrian-stop"]) .phone-status-notch {
    left: calc(50% - 3px);
}
body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .phone-status-notch {
    left: calc(50% - 12px);
}
body.detail-sahinh .fault-svg.fault-arrow {
    fill: #eda923;
    stroke: none;
}
/* Short mobile viewports must keep the approved final action fully visible. */
@media (max-height: 880px) {
    body[data-view="view-lesson-intro"] .lesson-objective-card {
        min-height: 94px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    body[data-view="view-lesson-intro"] .lesson-intro-voice {
        min-height: 65px !important;
    }
    body[data-view="view-lesson-intro"] .lesson-steps {
        gap: 6px !important;
    }
    body[data-view="view-lesson-intro"] .lesson-step {
        min-height: 82px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    body[data-view="view-lesson-intro"] .lesson-step-icon {
        width: 44px !important;
        height: 44px !important;
    }
    body[data-view="view-lesson-intro"] .lesson-step-copy strong {
        font-size: 15px !important;
    }
    body[data-view="view-lesson-intro"] .lesson-step-copy small {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
    body[data-view="view-lesson-intro"] .lesson-intro-start {
        transform: translateY(-12px) !important;
    }
}

/* Effective last-cascade alignment for the approved intro voice control. */
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol {
    transform: translate(-1px, 1px);
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol svg {
    width: 55px;
    height: 55px;
    transform: scaleX(.80);
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-label {
    position: absolute;
    top: 21px;
    left: 126px;
    transform: scaleX(.74);
    transform-origin: left center;
    white-space: nowrap;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice {
    position: relative;
    display: block;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol {
    position: absolute;
    top: 10px;
    left: 64px;
    width: 49px;
    height: 49px;
    transform: none;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol svg {
    width: 49px;
    height: 49px;
    transform: none;
}
/* Final approved-intro alignment: match the reference voice control's
   speaker scale and compact label without changing the button geometry. */
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol {
    transform: translateX(4px);
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol svg {
    width: 55px;
    height: 55px;
    transform: scaleX(.86);
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-label {
    transform: translateX(0) scaleX(.70);
    transform-origin: left center;
}

/* Canonical approved boards use a 52px final action bar. The existing
   per-board translations keep each green band on its reference baseline. */
body.detail-sahinh .sh-next-lesson-button { min-height: 52px; }
@media (min-height: 881px) {
    body.detail-sahinh:has(#sh-specific-faults[data-layout="two-column"]) .sh-next-lesson-button { transform: translateY(0); }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="pedestrian-stop"]) .sh-next-lesson-button { transform: translateY(2px); }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .sh-next-lesson-button { transform: translateY(2px); }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="wheel-track-right-angle"]) .sh-next-lesson-button { transform: translateY(3px); }
}

/* Per-board mint tones from the approved captures. Keeping these scoped to
   the lesson avoids flattening the slightly different B2/B3/B4 card tints. */
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card:not(.fatal):not(.selected) {
    background: #e1f7eb;
}
body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card.selected {
    background: #b9eed0;
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card:not(.fatal):not(.selected) {
    background: #dcf8ea;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card:not(.fatal):not(.selected) {
    background: #dcf8ea;
}

/* Approved primary screens: Home and Tài khoản share the same clean canvas
   as the supplied four-phone reference. The application bar is intentionally
   omitted on these two destinations; each screen owns its own title block. */
body[data-view="view-home"], body[data-view="view-settings"] { background: #fff; }
body[data-view="view-home"] .app-bar { display: grid !important; }
body[data-view="view-settings"] .app-bar { display: none; }
body[data-view="view-home"] .app-shell,
body[data-view="view-settings"] .app-shell { max-width: 430px; background: #fff; }
body[data-view="view-home"] .app-main { padding: 52px 12px calc(93px + env(safe-area-inset-bottom)) !important; }
body[data-view="view-settings"] .app-main { padding: 0 12px calc(93px + env(safe-area-inset-bottom)); }

body[data-view="view-home"] .welcome-block {
    position: relative;
    display: block;
    align-items: flex-start;
    padding: 4px 4px 14px !important;
}
body[data-view="view-home"] .home-greeting-kicker {
    display: block;
    color: var(--navy);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
body[data-view="view-home"] .welcome-block h2 {
    margin-top: 12px;
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -.04em;
}
body[data-view="view-home"] .welcome-block p {
    max-width: 300px;
    margin-top: 18px;
    color: #64758d;
    font-size: 16px;
    line-height: 1.5;
}
body[data-view="view-home"] .welcome-side {
    position: absolute;
    top: 14px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 4px;
    color: #34435a;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
}
body[data-view="view-home"] .welcome-mark {
    width: 38px;
    height: 38px;
    color: #f1b428;
    background: var(--amber-soft);
    font-size: 22px;
}
body[data-view="view-home"] .home-status-card {
    padding: 16px 17px 14px;
    min-height: 123px;
    width: calc(100% - 6px);
    margin: 0 3px 18px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(145deg, #e3f7ec, #eefaf5);
    box-shadow: none;
}
body[data-view="view-home"] .home-status-card .card-heading { font-size: 14px; }
body[data-view="view-home"] .home-status-card .card-heading strong { font-size: 18px; }
body[data-view="view-home"] .home-status-card .progress-track { height: 10px; margin: 10px 0 8px; }
body[data-view="view-home"] .home-status-card p { font-size: 13px; }

body[data-view="view-home"] .primary-feature {
    position: relative;
    display: block;
    min-height: 227px;
    padding: 0;
    width: calc(100% - 6px);
    margin: 0 3px 18px;
    border-radius: 18px;
    background: #087d50;
    box-shadow: none;
}
body[data-view="view-home"] .primary-feature .feature-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: #087d50;
}
body[data-view="view-home"] .primary-feature .feature-art::before { display: none; }
body[data-view="view-home"] .primary-feature .feature-art::after {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(5,103,66,.02) 25%, rgba(2,88,55,.84) 100%);
}
body[data-view="view-home"] .primary-feature .feature-art img {
    display: block;
    width: 100%;
    height: 61%;
    object-fit: cover;
    object-position: center top;
}
body[data-view="view-home"] .primary-feature-copy {
    position: absolute;
    z-index: 2;
    right: 52px;
    bottom: 16px;
    left: 16px;
    display: grid;
    gap: 3px;
}
body[data-view="view-home"] .primary-feature .eyebrow { display: none; }
body[data-view="view-home"] .primary-feature strong {
    font-size: 23px;
    line-height: 1.08;
}
body[data-view="view-home"] .primary-feature small {
    color: #dcf8e9;
    font-size: 13px;
    line-height: 1.3;
}
body[data-view="view-home"] .primary-feature .round-arrow {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 18px;
    width: 37px;
    height: 37px;
    font-size: 29px;
}

body[data-view="view-home"] .feature-grid { width: calc(100% - 6px); margin: 0 3px; gap: 12px; }
body[data-view="view-home"] .feature-tile {
    min-height: 213px;
    padding: 12px 10px 13px;
    border-radius: 18px;
}
body[data-view="view-home"] .feature-tile .tile-visual {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 93px;
    overflow: hidden;
    border-radius: 13px;
    background: rgba(255,255,255,.7);
}
body[data-view="view-home"] .feature-tile .tile-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body[data-view="view-home"] .feature-tile strong { margin-top: 11px; font-size: 15px; }
body[data-view="view-home"] .feature-tile small { margin-top: 4px; font-size: 11px; line-height: 1.25; }
body[data-view="view-home"] .feature-tile .tile-arrow { right: 11px; bottom: 10px; font-size: 18px; }
body[data-view="view-home"] .home-secondary-menu,
body[data-view="view-home"] .support-row,
body[data-view="view-home"] .recent-session { display: none; }

@media (max-height: 880px) {
    body[data-view="view-home"] .feature-tile { min-height: 150px; }
    body[data-view="view-home"] .feature-tile .tile-visual { height: 70px; }
    body[data-view="view-home"] .feature-tile strong { margin-top: 8px; font-size: 14px; }
    body[data-view="view-home"] .feature-tile small { margin-top: 3px; font-size: 10px; }
}

body[data-view="view-settings"] .account-header {
    padding: 64px 6px 28px;
}
body[data-view="view-settings"] .account-header h2 {
    font-size: 28px;
    line-height: 1.05;
}
body[data-view="view-settings"] .settings-gear {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    color: var(--navy);
    background: transparent;
    font-size: 25px;
}
body[data-view="view-settings"] .settings-gear svg {
    width: 31px;
    height: 31px;
}
body[data-view="view-settings"] .settings-gear svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body[data-view="view-settings"] .teacher-profile-card {
    min-height: 114px;
    padding: 14px 15px;
    width: calc(100% - 6px);
    margin: 0 3px 15px;
    box-shadow: none;
}
body[data-view="view-settings"] .avatar {
    width: 55px;
    height: 55px;
    overflow: hidden;
    background: #e8f4fb;
}
body[data-view="view-settings"] .avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
body[data-view="view-settings"] .teacher-profile-card strong { font-size: 16px; }
body[data-view="view-settings"] .teacher-profile-card small { font-size: 11px; }
body[data-view="view-settings"] .teacher-profile-card small:nth-of-type(2) { display: none; }
body[data-view="view-settings"] .account-result-card {
    min-height: 130px;
    padding: 16px 15px;
    width: calc(100% - 6px);
    margin: 0 3px 21px;
    box-shadow: none;
}
body[data-view="view-settings"] .result-trophy svg {
    width: 51px;
    height: 68px;
    fill: none;
    stroke: #e2a71f;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body[data-view="view-settings"] .result-trophy {
    transform: translateX(-10px);
}
body[data-view="view-settings"] .result-trophy svg path:first-child { fill: #f0b52d; }
body[data-view="view-settings"] .account-result-copy { flex: 1; min-width: 0; }
body[data-view="view-settings"] .account-result-copy > strong { font-size: 13px; }
body[data-view="view-settings"] .account-result-copy p {
    margin-top: 5px;
    color: var(--green-dark);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}
body[data-view="view-settings"] .account-result-copy .result-denom { color: var(--navy); font-size: 12px; }
body[data-view="view-settings"] .account-result-copy small {
    display: block;
    margin-top: 5px;
    color: #64758d;
    font-size: 11px;
}
body[data-view="view-settings"] .account-result-date {
    display: grid;
    gap: 2px;
    min-width: 43px;
    padding: 0;
    border: 0;
    color: #64758d;
    background: transparent;
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
}
body[data-view="view-settings"] .account-result-date span:first-child { color: #64758d; }
body[data-view="view-settings"] .account-result-date span:last-child { font-variant-numeric: tabular-nums; }
body[data-view="view-settings"] .account-action-card {
    display: grid;
    gap: 19px;
    width: calc(100% - 6px);
    margin: 0 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body[data-view="view-settings"] .account-action-card .settings-row-button {
    min-height: 93px;
    padding: 13px 15px;
    border: 1px solid rgba(228, 236, 232, .9);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
body[data-view="view-settings"] .account-action-card .row-icon.icon-navy {
    color: var(--navy);
    background: #f0f5f7;
}
body[data-view="view-settings"] .account-action-card .row-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body[data-view="view-settings"] .account-action-card .settings-row-button:nth-child(3) .row-icon svg {
    width: 34px;
    height: 34px;
}
body[data-view="view-settings"] .account-advanced-settings { padding-top: 15px; }
body[data-view="view-settings"] .account-advanced-settings[hidden] { display: none !important; }

.bottom-nav-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav-btn.active { background: transparent; }
.bottom-nav-btn.active:first-child .bottom-nav-icon svg path:first-child { fill: currentColor; stroke: none; }
.bottom-nav-btn.active[data-view="view-settings"] .bottom-nav-icon svg circle,
.bottom-nav-btn.active[data-view="view-settings"] .bottom-nav-icon svg path { fill: currentColor; stroke: none; }

@media (max-width: 390px) {
    body[data-view="view-home"] .app-main,
    body[data-view="view-settings"] .app-main { padding-right: 12px; padding-left: 12px; }
    body[data-view="view-home"] .welcome-block { padding-top: 12px; }
    body[data-view="view-home"] .welcome-side { gap: 5px; font-size: 10px; }
    body[data-view="view-home"] .welcome-mark { width: 36px; height: 36px; }
    body[data-view="view-home"] .primary-feature { min-height: 227px; }
    body[data-view="view-home"] .primary-feature strong { font-size: 21px; }
    body[data-view="view-home"] .primary-feature small { font-size: 12px; }
    body[data-view="view-home"] .feature-tile { min-height: 213px; }
}

/* Final Home fidelity pass: the approved composition uses a taller progress
   meter, a higher hero copy block, and circular arrows on the two secondary
   tiles. Keep these overrides after the narrow-viewport rules so the 360px
   evidence canvas uses the approved measurements. */
body[data-view="view-home"] .home-status-card {
    padding: 17px 19px 10px;
}
body[data-view="view-home"] .home-status-card .card-heading {
    font-size: 16px;
}
body[data-view="view-home"] .home-status-card .card-heading strong {
    font-size: 20px;
}
body[data-view="view-home"] .home-status-card .progress-track {
    height: 16px;
    margin: 12px 0 10px;
}
body[data-view="view-home"] .home-status-card p {
    font-size: 14px;
}
body[data-view="view-home"] .primary-feature .feature-art img {
    height: 58%;
}
body[data-view="view-home"] .primary-feature-copy {
    right: 72px;
    bottom: 25px;
}
body[data-view="view-home"] .primary-feature strong {
    font-size: 27px;
}
body[data-view="view-home"] .primary-feature small {
    max-width: 190px;
    font-size: 14px;
}
body[data-view="view-home"] .primary-feature .round-arrow {
    bottom: 46px;
}
body[data-view="view-home"] .feature-tile .tile-visual,
body[data-view="view-home"] .feature-tile strong {
    transform: translateY(-13px);
}
body[data-view="view-home"] .feature-tile small {
    transform: translateY(-9px);
}
body[data-view="view-home"] .feature-tile .tile-arrow {
    display: grid;
    place-items: center;
    right: 10px;
    bottom: 18px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #cfe9f8;
    font-size: 18px;
}
body[data-view="view-home"] .feature-tile.tile-amber .tile-arrow {
    background: #ffe5b6;
}

/* Account screen fidelity pass: the approved account board uses a wider
   inner canvas, a 75px avatar, and a larger result summary. */
body[data-view="view-settings"] .app-main {
    padding-right: 0;
    padding-left: 0;
}
body[data-view="view-settings"] .account-header {
    width: min(328px, 100%);
    padding-right: 6px;
    padding-left: 6px;
}
body[data-view="view-settings"] .teacher-profile-card,
body[data-view="view-settings"] .account-result-card,
body[data-view="view-settings"] .account-action-card {
    width: min(323px, calc(100% - 10px));
    margin-right: 0;
    margin-left: 5px;
}
body[data-view="view-settings"] .teacher-profile-card {
    min-height: 115px;
    margin-bottom: 16px;
    gap: 6px;
    padding: 13px;
    box-shadow: var(--shadow);
}
body[data-view="view-settings"] .teacher-profile-card .avatar {
    width: 75px;
    height: 75px;
}
body[data-view="view-settings"] .teacher-profile-card strong {
    font-size: 20px;
}
body[data-view="view-settings"] .teacher-profile-card small {
    font-size: 15px;
}
body[data-view="view-settings"] .account-result-card {
    gap: 4px;
    padding: 16px 15px 16px 26px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}
body[data-view="view-settings"] .result-trophy {
    width: 64px;
    height: 64px;
}
body[data-view="view-settings"] .result-trophy svg {
    width: 51px;
    height: 68px;
    transform: translate(-2px, -1px) scaleY(1.3);
}
body[data-view="view-settings"] .result-trophy .account-trophy-reference {
    display: block;
    width: 46px;
    height: 58px;
    object-fit: contain;
    transform: translate(-2px, 0);
}
body[data-view="view-settings"] .account-result-copy > strong {
    font-size: 16px;
}
body[data-view="view-settings"] .account-result-copy p {
    font-size: 22px;
}
body[data-view="view-settings"] .account-result-copy small {
    font-size: 14px;
}
body[data-view="view-settings"] .account-result-date {
    font-size: 12px;
}
body[data-view="view-settings"] .account-action-card .settings-row-button strong {
    font-size: 16px;
}
body[data-view="view-settings"] .account-action-card .settings-row-button small {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
body[data-view="view-settings"] .account-action-card .settings-row-button:nth-child(1) .row-icon svg {
    width: 42px;
    height: 42px;
}
body[data-view="view-settings"] .account-action-card .settings-row-button:nth-child(2) .row-icon svg {
    width: 44px;
    height: 44px;
}
body[data-view="view-settings"] .account-action-card .settings-row-button:nth-child(3) .row-icon svg {
    width: 40px;
    height: 44px;
}
body[data-view="view-settings"] .account-action-card .settings-row-button:nth-child(1) .row-icon svg {
    transform: translate(1px, -2px);
}
body[data-view="view-settings"] .account-action-card .settings-row-button:nth-child(2) .row-icon svg {
    transform: translate(-1px, -5px);
}
body[data-view="view-settings"] .account-action-card .settings-row-button:nth-child(3) .row-icon svg {
    transform: translate(3px, -2px);
}
body[data-view="view-settings"] .account-action-card .settings-row-button:last-child small {
    font-size: 13px;
}

/* License class picker: keep the available B ruleset explicit while making
   the other road-test classes visible as catalog entries, never as fake
   selectable content without a validated ruleset. */
.license-class-row {
    display: block;
    padding: 13px 0 11px;
}
.license-class-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin-top: 11px;
}
.license-class-option {
    display: grid;
    gap: 3px;
    min-height: 53px;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--navy);
    background: #fbfdfc;
    text-align: left;
}
.license-class-option strong { font-size: 12px; line-height: 1.1; }
.license-class-option small { color: var(--muted); font-size: 9px; line-height: 1.1; }
.license-class-option.selected { border-color: var(--green); background: var(--mint); }
.license-class-option:disabled { cursor: not-allowed; opacity: .58; }
.license-class-note {
    margin: -2px 0 12px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

/* Đường trường uses the same operator board hierarchy as sa hình. The
   situation chips make 1–5 direct targets, while the arrows remain available
   for one-step navigation. */
body.detail-duongtruong {
    overflow-x: hidden;
    background: #fff;
}
body.detail-duongtruong .app-shell,
body.detail-duongtruong .app-main,
body.detail-duongtruong #view-duongtruong {
    width: 100%;
    max-width: 360px;
    min-width: 0;
}
body.detail-duongtruong .app-shell { background: #fff; }
body.detail-duongtruong .app-bar {
    min-height: 54px;
    padding: 2px 6px;
    background: #fff;
    box-shadow: none;
}
body.detail-duongtruong .app-bar-title .eyebrow,
body.detail-duongtruong #btn-header-refresh { display: none; }
body.detail-duongtruong .app-bar h1 { font-size: 18px; font-weight: 800; }
body.detail-duongtruong .app-bar-title { transform: translate(-5px, 5px); }
body.detail-duongtruong .back-button { display: inline-grid !important; transform: translateX(-15px); }
body.detail-duongtruong .bottom-nav { display: none; }
body.detail-duongtruong .app-main { padding: 6px 0 13px; }
body.detail-duongtruong #view-duongtruong { display: flex; flex-direction: column; }
body.detail-duongtruong .dt-score-strip {
    width: calc(100% - 5px);
    min-height: 45px;
    margin-bottom: 8px;
}
body.detail-duongtruong .dt-summary-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 5px;
    min-height: 57px;
    width: calc(100% - 5px);
}
body.detail-duongtruong .dt-summary-row .sh-step-button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
}
body.detail-duongtruong .dt-summary-copy { min-width: 0; text-align: center; }
body.detail-duongtruong .dt-summary-copy .lesson-badge { margin: 0 auto 6px; }
body.detail-duongtruong .dt-summary-copy h3 {
    overflow: hidden;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.12;
    text-overflow: ellipsis;
}
body.detail-duongtruong .dt-situation-chips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    width: calc(100% - 5px);
    margin: 4px 0 9px;
}
body.detail-duongtruong .dt-situation-chip {
    min-height: 32px;
    padding: 4px 2px;
    border: 1px solid #cbe8db;
    border-radius: 99px;
    color: #55738a;
    background: #fff;
    font-size: 11px;
    font-weight: 850;
}
body.detail-duongtruong .dt-situation-chip.active {
    color: var(--green-dark);
    border-color: var(--mint);
    background: var(--mint);
}
body.detail-duongtruong .dt-lesson-desc {
    width: calc(100% - 5px);
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}
body.detail-duongtruong .dt-voice-button {
    width: calc(100% - 5px);
    min-height: 48px;
    margin-bottom: 10px;
    border-radius: 17px;
    font-size: 17px;
}
body.detail-duongtruong .dt-course-card {
    width: calc(100% - 5px);
    height: auto;
    min-height: 0;
    aspect-ratio: 640 / 260;
    overflow: hidden;
    border-radius: 16px;
    background: #e4f1de;
}
body.detail-duongtruong .dt-course-card svg { display: block; width: 100%; height: 100%; }
body.detail-duongtruong .dt-course-card svg text {
    fill: #34566a;
    font-size: 18px;
    font-weight: 800;
}
body.detail-duongtruong .dt-map-caption {
    width: calc(100% - 5px);
    margin: 6px 0 0;
    color: #647b92;
    font-size: 10px;
    text-align: center;
}
body.detail-duongtruong .dt-fault-panel {
    width: calc(100% - 5px);
    margin-top: 14px;
}
body.detail-duongtruong .dt-fault-panel .teacher-fault-note { display: none; }
body.detail-duongtruong .dt-fault-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 10px;
}
body.detail-duongtruong .dt-fault-grid .fault-card {
    min-height: 58px;
    grid-template-columns: 56px minmax(0, 1fr) 42px;
}
body.detail-duongtruong .dt-feedback-card {
    width: calc(100% - 5px);
    margin: 15px 0 10px;
}
body.detail-duongtruong .dt-next-situation {
    width: calc(100% - 5px);
    margin: 0;
    min-height: 52px;
}
body.detail-duongtruong .dt-support-note {
    width: calc(100% - 5px);
    margin: 12px 0 0;
    font-size: 10px;
}
body.detail-duongtruong .dt-support-note p { font-size: 10px; line-height: 1.35; }
@media (max-width: 680px) {
    body.detail-duongtruong .dt-support-note { display: none; }
}

/* Keep Đường trường on the same approved teacher-board surface system as
   Sa hình: near-white canvas, inner latest-event row and dark green CTA. */
body.detail-duongtruong,
body.detail-duongtruong .app-shell,
body.detail-duongtruong .app-main,
body.detail-duongtruong #view-duongtruong {
    background: #fcfcfc;
}
body.detail-duongtruong .operator-feedback-card {
    background: #eff4f4;
}
body.detail-duongtruong .feedback-line {
    position: relative;
    isolation: isolate;
}
body.detail-duongtruong .feedback-line::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 2px 0 -11px;
    border-radius: 8px;
    background: #ffffff;
}
body.detail-duongtruong .feedback-line > * {
    position: relative;
    z-index: 1;
}
body.detail-duongtruong .dt-next-situation {
    background: #148a59;
}

/* Bài 1 board geometry: the approved first two rows begin 4px earlier and
   are 2px taller; the added row height preserves the fatal/feedback anchor. */
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] {
    margin-top: 13px;
}
body.detail-sahinh #sh-specific-faults[data-layout="two-column"] .fault-card:not(.fatal) {
    min-height: 94px;
}
/* Bài 4 uses the shorter approved badge/title gap and the larger wheel glyphs
   visible in the reference board. */
body.detail-sahinh .lesson-summary-row[data-lesson="wheel-track-right-angle"] {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card:not(.fatal) .fault-card-icon .fault-svg {
    width: 42px;
    height: 42px;
    transform: scale(1);
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-card.fatal .fault-card-icon .fault-svg {
    width: 40px;
    height: 40px;
    transform: scale(1);
}
body.detail-sahinh .lesson-summary-row[data-lesson="hill-start"] .sh-lesson-title {
    max-width: 235px;
    font-size: 18px;
    letter-spacing: -.008em;
}
/* Detail board canvas parity: the approved phone captures leave a 9px
   right-side breathing strip before the bezel. Apply one shared width to all
   primary board bands so map, faults, feedback and CTA terminate together. */
body.detail-sahinh .sh-score-strip,
body.detail-sahinh .course-card,
body.detail-sahinh .teacher-fault-grid,
body.detail-sahinh .operator-feedback-card,
body.detail-sahinh .sh-next-lesson-button {
    width: calc(100% - 9px);
}

/* Bài 3 reference retains the wider map/board canvas; keep its single-column
   rail at the previously measured 355px while Bài 1–2 use the 351px crop. */
body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .sh-score-strip,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .course-card,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .teacher-fault-grid,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .operator-feedback-card,
body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .sh-next-lesson-button {
    width: calc(100% - 5px);
}
body[data-view="view-settings"] .account-action-card {
    gap: 17px;
}
body[data-view="view-settings"] .account-action-card .settings-row-button {
    column-gap: 23px;
}

/* Final teacher-board icon pass: the approved board gives the left fault
   glyph more visual weight and keeps it close to the card edge. The audio
   glyph occupies the full right rail instead of reading as a tiny text mark. */
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card-icon {
    transform: translateX(-7px);
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card.fatal .fault-card-icon {
    transform: translateX(-5px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card.fatal .fault-card-icon {
    transform: translateX(-8px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card[data-fault-code="hill-no-stop"] .fault-card-icon .fault-svg {
    transform: translateY(-3px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card[data-fault-code="hill-over"] .fault-card-icon .fault-svg {
    transform: translateY(1px);
}
body.detail-sahinh #sh-specific-faults[data-lesson="hill-start"] .fault-card[data-fault-code="hill-timeout"] .fault-card-icon .fault-svg {
    transform: translateY(1px) scaleY(1.13);
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card.fatal .fault-card-icon .fault-svg {
    width: 34px;
    height: 34px;
    transform: scale(1);
}
body.detail-sahinh #sh-specific-faults[data-layout="single-column"] .fault-card-meta .fault-audio-icon svg {
    /* Scale the drawing without enlarging the flex/grid line box; long
       lessons must keep their CTA visible at the approved 375x850 viewport. */
    width: 22px;
    height: 22px;
    transform: scale(1.23);
    transform-origin: center;
}
body.detail-sahinh #sh-specific-faults[data-lesson="wheel-track-right-angle"] .fault-wheel-line {
    stroke-width: 2.5;
}

/* Canonical Bài 2 rhythm A/B: the approved capture gives the two ordinary
   rows two extra pixels and the selected row one extra pixel; reclaim the
   selected-row bottom gap so feedback/CTA anchors remain unchanged. */
@media (min-height: 881px) {
    body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card:not(.selected) {
        min-height: 77px;
    }
    body.detail-sahinh #sh-specific-faults[data-lesson="pedestrian-stop"] .fault-card.selected {
        min-height: 105px;
        margin-bottom: 1px;
    }
}

@media (max-height: 880px) {
    /* Leave a measured safety gutter below the CTA on short phone canvases. */
    body.detail-sahinh .sh-next-lesson-button {
        transform: translateY(-4px);
    }
    body.detail-sahinh:has(#sh-specific-faults[data-lesson="hill-start"]) .sh-next-lesson-button {
        transform: translate(-50%, -4px);
    }
}

/* Approved lesson introduction screen (the second screen in the original
   reference): title, 1..11 lesson chips, objective, voice, steps and one
   anchored primary action. */
body[data-view="view-lesson-intro"] { background: #fff; }
body[data-view="view-lesson-intro"] .app-shell { max-width: 360px; background: #fff; }
body[data-view="view-lesson-intro"] .app-bar {
    min-height: 88px;
    padding: 34px 14px 4px;
    background: #fff;
    box-shadow: none;
}
body[data-view="view-lesson-intro"] .app-bar-title .eyebrow,
body[data-view="view-lesson-intro"] #btn-header-refresh { display: none; }
body[data-view="view-lesson-intro"] .app-bar h1 { font-size: 16px; }
body[data-view="view-lesson-intro"] .back-button { display: inline-grid !important; font-size: 34px; }
/* v117 A/B candidate: the approved intro header uses a narrower title word
   shape and sits lower than the generic app-bar baseline. Keep this local to
   the intro screen so Home and teacher-board headers are unaffected. */
body[data-view="view-lesson-intro"] .app-bar-title {
    transform: translate(2px, 4px) scaleX(.88);
    transform-origin: center center;
}
body[data-view="view-lesson-intro"] .back-button {
    transform: translateY(5px);
}
body[data-view="view-lesson-intro"] .app-main { padding: 18px 14px calc(55px + env(safe-area-inset-bottom)) 26px; }
body[data-view="view-lesson-intro"] .bottom-nav { display: none; }
body[data-view="view-lesson-intro"] #view-lesson-intro { min-height: calc(100vh - 144px); display: flex; flex-direction: column; }
body[data-view="view-lesson-intro"] .lesson-intro-title {
    color: var(--navy);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.04em;
}
body[data-view="view-lesson-intro"] .lesson-intro-desc {
    max-width: 430px;
    margin-top: 7px;
    color: #64758d;
    font-size: 14px;
    line-height: 1.4;
}
.lesson-intro-chips {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 3px;
    margin: 18px 0 37px;
    overflow: visible;
}
.intro-chip {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    min-height: 31px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid #cfdad5;
    border-radius: 50%;
    color: #5d6c7e;
    background: #fff;
    font-size: 11px;
}
.intro-chip.active {
    border-color: var(--green);
    color: #fff;
    background: var(--green);
    font-weight: 850;
}
.intro-chip.completed:not(.active) { color: var(--green-dark); border-color: #94d6b5; background: #e9f8f0; }
.lesson-objective-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px;
    min-height: 102px;
    margin-bottom: 17px;
    border-radius: 16px;
    box-shadow: 0 7px 18px rgba(30,58,84,.07);
}
.objective-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #fff5e7;
    font-size: 25px;
}
.objective-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: #e98b22;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.objective-icon svg.objective-cone { fill: #f0a12a; stroke: #e98b22; stroke-width: 1.35; }
.objective-icon svg.objective-cone path:first-child,
.objective-icon svg.objective-cone path:last-child { fill: none; stroke: #e98b22; }
.objective-reference-icon { display: block; width: 35px; height: 43px; object-fit: contain; transform: translate(-2px, 6px); }
.objective-icon svg.objective-cone path:nth-child(3) { fill: none; stroke: #fff; stroke-width: 1.7; }
.lesson-objective-card strong { color: var(--navy); font-size: 15px; }
.lesson-objective-card p { margin-top: 5px; color: #64758d; font-size: 12px; line-height: 1.4; }
body[data-view="view-lesson-intro"] .lesson-intro-voice {
    width: 100%;
    min-height: 73px;
    margin: 0 0 17px;
    border-radius: 30px;
    gap: 14px;
    color: #075e3c;
    background: #d9f4e7;
    font-size: 17px;
}
body[data-view="view-lesson-intro"] .voice-symbol { display: inline-grid; place-items: center; }
body[data-view="view-lesson-intro"] .voice-symbol svg {
    width: 49px;
    height: 49px;
    fill: #087b4e;
    stroke: #087b4e;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-label {
    display: inline-block;
    transform: scaleX(.88);
    transform-origin: center;
}
body[data-view="view-lesson-intro"] .lesson-steps-title {
    margin-bottom: 15px;
    color: var(--navy);
    font-size: 18px;
    letter-spacing: -.02em;
}
.lesson-steps { position: relative; display: grid; gap: 8px; }
.lesson-steps::before {
    position: absolute;
    z-index: 0;
    top: 20px;
    bottom: 20px;
    left: 14px;
    width: 2px;
    content: "";
    background: #c7eadb;
}
.lesson-step {
    display: grid;
    grid-template-columns: 28px 42px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 94px;
    padding: 9px 12px 9px 0;
    border: 1px solid #edf1ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(30,58,84,.05);
}
/* The approved intro composition keeps the numbered rail outside the white
   instruction card. Paint the card from the icon column onward so the rail
   remains visually independent while preserving the existing grid/DOM flow. */
body[data-view="view-lesson-intro"] .lesson-step {
    position: relative;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
body[data-view="view-lesson-intro"] .lesson-step::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 35px;
    content: "";
    border: 1px solid #edf1ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(30,58,84,.05);
}
body[data-view="view-lesson-intro"] .lesson-step-number,
body[data-view="view-lesson-intro"] .lesson-step-icon,
body[data-view="view-lesson-intro"] .lesson-step-copy {
    position: relative;
    z-index: 1;
}
.lesson-step-number {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--green-dark);
    background: #e5f7ef;
    font-size: 13px;
    font-weight: 850;
}
.lesson-step-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--navy);
    background: #edf6f9;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
}
.lesson-step-icon.step-arrow { color: #f0ae24; background: #fff5de; font-size: 31px; }
.lesson-step-icon.step-brake { color: #123a5a; font-size: 24px; }
.lesson-step-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.lesson-step-icon.step-arrow svg { width: 34px; height: 34px; fill: #efa91f; stroke: none; }
.lesson-step-icon.step-belt svg { width: 34px; height: 34px; stroke-width: 1.8; }
.lesson-step-icon.step-brake svg { width: 34px; height: 34px; stroke-width: 2.1; }
.lesson-step-copy { min-width: 0; }
.lesson-step-copy strong { display: block; color: var(--navy); font-size: 14px; line-height: 1.25; }
.lesson-step-copy small { display: block; margin-top: 3px; color: #64758d; font-size: 11px; line-height: 1.3; }
body[data-view="view-lesson-intro"] .lesson-intro-start {
    min-height: 63px;
    margin-top: auto;
    transform: translateY(10px);
    padding-top: 13px;
    padding-bottom: 13px;
    border-radius: 18px;
    font-size: 15px;
}

@media (max-height: 880px) {
    body[data-view="view-lesson-intro"] #view-lesson-intro { min-height: calc(100vh - 225px); }
    body[data-view="view-lesson-intro"] .lesson-steps { gap: 6px; }
    body[data-view="view-lesson-intro"] .lesson-step {
        min-height: 68px;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    body[data-view="view-lesson-intro"] .lesson-step-copy strong { font-size: 13px; }
    body[data-view="view-lesson-intro"] .lesson-step-copy small { font-size: 10px; }
    body[data-view="view-lesson-intro"] .lesson-intro-start { min-height: 53px; }
}

/* Keep the PWA at a phone-sized reading width on desktop canvases; on an
   actual phone the fluid width remains smaller than this cap. */
.app-shell { max-width: 360px; }

/* The approved references include a phone status-bar/notch as presentation
   chrome. Reproduce it only on desktop preview canvases; real phones supply
   this chrome through the operating system, so it remains absent below 480px. */
@media (min-width: 480px) {
    .phone-status-preview {
        position: absolute;
        z-index: 31;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        height: 28px;
        padding: 8px 22px 0;
        pointer-events: none;
        color: #101820;
        font-size: 12px;
        font-weight: 800;
        line-height: 14px;
    }
    .phone-status-notch {
        position: absolute;
        top: -7px;
        left: 50%;
        width: 92px;
        height: 20px;
        border-radius: 0 0 13px 13px;
        background: #050505;
        transform: translateX(-50%);
    }
    .phone-status-indicators { display: inline-flex; align-items: center; gap: 6px; height: 14px; }
    .signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
    .signal-bars i { display: block; width: 2px; border-radius: 2px; background: currentColor; }
    .signal-bars i:nth-child(1) { height: 4px; }
    .signal-bars i:nth-child(2) { height: 6px; }
    .signal-bars i:nth-child(3) { height: 9px; }
    .signal-bars i:nth-child(4) { height: 12px; }
    .wifi-mark { position: relative; width: 13px; height: 10px; overflow: hidden; border: 2px solid currentColor; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom: 0; transform: translateY(1px); }
    .wifi-mark::after { content: ''; position: absolute; bottom: -3px; left: 4px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
    .battery-mark { display: block; position: relative; width: 19px; height: 10px; border: 1.6px solid currentColor; border-radius: 3px; }
    .battery-mark::before { content: ''; position: absolute; top: 2px; right: -4px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: currentColor; }
    .battery-mark::after { content: ''; position: absolute; inset: 2px 3px 2px 2px; border-radius: 1px; background: currentColor; }

    /* The approved teacher-board reference is cropped below the OS status
       indicators and retains only the centered notch. Keep the full status
       treatment on Home, lesson intro, and Account previews. */
    body.detail-sahinh .phone-status-time,
    body.detail-sahinh .phone-status-indicators { display: none; }
}

/* Final approved intro fidelity pass. This block intentionally lives after
   the legacy intro component rules above so the approved 32px/49px hierarchy
   is the effective cascade on the real runtime, not just a dormant contract. */
body[data-view="view-lesson-intro"] .lesson-intro-title {
    font-size: 32px;
    line-height: 1.08;
}
body[data-view="view-lesson-intro"] .lesson-intro-desc {
    max-width: 320px;
    margin-top: 11px;
    font-size: 16px;
    line-height: 1.35;
}
body[data-view="view-lesson-intro"] .lesson-intro-chips {
    margin-top: 18px;
    margin-bottom: 25px;
}
body[data-view="view-lesson-intro"] .lesson-objective-card {
    margin-bottom: 16px;
}
body[data-view="view-lesson-intro"] .lesson-objective-card strong {
    font-size: 16px;
}
body[data-view="view-lesson-intro"] .lesson-objective-card p {
    font-size: 13px;
    line-height: 1.35;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice {
    margin-bottom: 19px;
    font-size: 20px;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol {
    transform: translate(-1px, 1px);
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol svg {
    width: 55px;
    height: 55px;
    transform: scaleX(.80);
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-label {
    transform: translateX(-2px) scaleX(.62);
    transform-origin: left center;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice {
    position: relative;
    display: block;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol {
    position: absolute;
    top: 10px;
    left: 64px;
    width: 49px;
    height: 49px;
    transform: none;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-symbol svg {
    width: 49px;
    height: 49px;
    transform: none;
}
body[data-view="view-lesson-intro"] .lesson-intro-voice .voice-label {
    position: absolute;
    top: 21px;
    left: 126px;
    transform: scaleX(.74);
    transform-origin: left center;
    white-space: nowrap;
}
body[data-view="view-lesson-intro"] .lesson-steps-title {
    margin-bottom: 13px;
    font-size: 20px;
}
body[data-view="view-lesson-intro"] .lesson-step {
    grid-template-columns: 28px 49px minmax(0, 1fr);
    column-gap: 16px;
    min-height: 92px;
}
body[data-view="view-lesson-intro"] .lesson-step-icon {
    width: 49px;
    height: 49px;
}
body[data-view="view-lesson-intro"] .lesson-step-copy strong {
    font-size: 16px;
}
body[data-view="view-lesson-intro"] .lesson-step-copy small {
    font-size: 12px;
}
body[data-view="view-lesson-intro"] .lesson-intro-start {
    transform: translateY(10px);
}

/* ==========================================================================
   COMPLETE MOBILE APP & LAYOUT HARMONIZATION OVERHAUL (ANTIGRAVITY)
   ========================================================================== */

/* 1. Hide synthetic status bar preview, notch, and battery icons completely */
.phone-status-preview,
.phone-status-notch,
.phone-status-indicators,
.phone-status-time {
    display: none !important;
}

/* 2. Body styling - center mobile app shell on desktop */
body {
    margin: 0 !important;
    padding: 0 !important;
    background: #0f172a !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 100vh !important;
}

/* 3. Standalone Mobile App Shell - 430px standard mobile container */
.app-shell,
body.detail-sahinh .app-shell,
body[data-view="view-settings"] .app-shell,
body[data-view="view-lesson-intro"] .app-shell {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    background: var(--bg) !important;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 4. Top Header Bar (App Bar) - Sleek, centered, fixed on top */
.app-bar {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 430px !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    align-items: center !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 12px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(228, 236, 232, 0.9) !important;
}

.app-bar-title {
    text-align: center !important;
    width: 100% !important;
}

.app-bar-title .eyebrow {
    display: none !important; /* Hide tiny eyebrow text to streamline top title */
}

.app-bar h1 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.icon-button.back-button {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

/* 5. Main Content Area - Full width, no right whitespace gap, smooth scrolling */
.app-main,
body.detail-sahinh .app-main {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 52px 14px 85px 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

.screen-view,
body.detail-sahinh #view-sahinh {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Fix Codex hacks: negative margins and hardcoded 360px width limits */
.lesson-command-head,
.voice-button,
.course-card,
.score-strip,
.sh-score-strip,
.teacher-fault-grid,
.fault-grid,
.content-card,
.primary-feature,
.feature-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.course-card {
    height: auto !important;
    min-height: 190px !important;
    aspect-ratio: 16 / 9 !important;
}

.course-map {
    width: 100% !important;
    height: 100% !important;
}

/* 6. Harmonize Font Sizes & Heading Hierarchy */
.welcome-block h2,
.page-intro h2,
.account-header h2,
body[data-view="view-lesson-intro"] .lesson-intro-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

.lesson-command-head h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
    margin-top: 8px !important;
}

.score-primary strong {
    font-size: 24px !important;
}

.score-strip strong {
    font-size: 18px !important;
}

/* 7. STRICTLY FIXED MOBILE BOTTOM NAVIGATION BAR ACROSS ALL VIEWS */
.bottom-nav,
body.detail-sahinh .bottom-nav,
body.detail-duongtruong .bottom-nav,
body[data-view="view-lesson-intro"] .bottom-nav,
body.qa-focus-lesson .bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 62px !important;
    min-height: 62px !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) 6px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07) !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
}

.bottom-nav-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    height: 100% !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #64748b !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}

.bottom-nav-btn.active {
    color: var(--green) !important;
    background: #effaf5 !important;
    font-weight: 800 !important;
}

.bottom-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
}

.bottom-nav-icon svg {
    width: 20px !important;
    height: 20px !important;
}

/* 8. WALKIE TALKIE (BỘ ĐÀM) REDESIGNED MOBILE PWA STYLES */
.bodam-status-card {
    padding: 14px 16px !important;
    margin-bottom: 14px !important;
    background: linear-gradient(135deg, #e7f8ef, #effaf5) !important;
    border-color: rgba(228, 236, 232, 0.9) !important;
}

.bodam-channel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.channel-icon {
    font-size: 24px;
}

.channel-info strong {
    display: block;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
}

.channel-info small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

.bodam-badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--green-dark);
    background: var(--mint);
}

.bodam-badge.transmitting {
    color: #b91c1c !important;
    background: #fee2e2 !important;
    animation: pttPulse 0.5s infinite alternate;
}

@keyframes pttPulse {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0.85; transform: scale(1.03); }
}

.bodam-controller-card {
    padding: 20px 16px !important;
    margin-bottom: 14px !important;
    text-align: center;
}

.bodam-mic-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.bodam-ptt-btn {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    border: 5px solid #087b4e !important;
    background: linear-gradient(135deg, #0b9b62, #078a57) !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-shadow: 0 12px 24px rgba(11, 155, 98, 0.28) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease !important;
}

.bodam-ptt-btn:active, .bodam-ptt-btn.active {
    transform: scale(0.93) !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #b91c1c !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45) !important;
}

.bodam-mic-symbol svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bodam-btn-title {
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.03em;
}

.bodam-btn-hint {
    font-size: 10px;
    opacity: 0.88;
}

.bodam-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    text-align: left;
}

.bodam-field label {
    display: block;
    color: var(--navy);
    font-size: 12px;
    margin-bottom: 6px;
}

.bodam-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    outline: none;
}

.bodam-slider {
    width: 100%;
    accent-color: var(--green);
    cursor: pointer;
    margin-top: 6px;
}

.bodam-log-card {
    padding: 16px !important;
}

.bodam-log-list {
    max-height: 110px;
    overflow-y: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.bodam-log-item {
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
}

.bodam-log-item.system {
    color: var(--green-dark);
    font-weight: 600;
}
.bodam-log-item.tx {
    color: #c53030;
    font-weight: 600;
}
.bodam-log-item.rx {
    color: var(--blue);
    font-weight: 600;
}