:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: #17212b;
  background: #edf1f4;
}
* { box-sizing: border-box; }
html,body { width: 100%; min-width: 720px; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; }
i[data-lucide] { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
button:focus-visible { outline: 3px solid rgba(23,126,137,.35); outline-offset: 2px; }
[hidden] { display: none !important; }
.classroom-screen { background: #edf1f4; }
.screen-shell { width: 100%; height: 100%; }

.screen-pair-view {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: 100%;
  height: 100%;
  padding: 32px 44px 24px;
  background: #f8fafb;
}
.screen-brand { display: flex; align-items: center; gap: 12px; }
.screen-brand > span { display: grid; width: 46px; height: 46px; place-items: center; color: #fff; background: #173f5f; border-radius: 7px; }
.screen-brand strong,.screen-brand small { display: block; }
.screen-brand strong { font-size: 22px; }
.screen-brand small { margin-top: 2px; color: #7a8793; font-size: 15px; }
.pair-layout { display: grid; grid-template-columns: minmax(430px, 1fr) 360px; gap: 72px; align-items: center; width: min(1120px, 90%); margin: 0 auto; }
.pair-copy .eyebrow { margin: 0 0 12px; color: #177e89; font-size: 14px; font-weight: 800; }
.pair-copy h1 { margin: 0; color: #173f5f; font-size: 52px; line-height: 1.15; letter-spacing: 0; }
.pair-copy > p:not(.eyebrow) { max-width: 630px; margin: 20px 0 26px; color: #5b6976; font-size: 20px; line-height: 1.75; }
.workspace-choice { display: inline-flex; gap: 4px; padding: 4px; background: #e9eef2; border-radius: 7px; }
.workspace-choice button { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 10px 22px; color: #536371; background: transparent; border: 0; border-radius: 5px; font-size: 17px; font-weight: 700; cursor: pointer; }
.workspace-choice button.active { color: #fff; background: #173f5f; box-shadow: 0 2px 8px rgba(23,63,95,.18); }
.workspace-choice svg { width: 18px; }
.manual-code { display: grid; grid-template-columns: auto auto; gap: 2px 18px; align-items: center; width: max-content; margin-top: 24px; padding: 14px 18px; background: #fff; border: 1px solid #dbe2e8; border-left: 4px solid #d97706; border-radius: 6px; }
.manual-code span { color: #6e7b87; font-size: 17px; }
.manual-code strong { grid-row: 1 / 3; grid-column: 2; color: #173f5f; font-family: Consolas, monospace; font-size: 35px; letter-spacing: 5px; }
.manual-code small { color: #9a6709; font-size: 15px; }
.pair-qr-wrap { display: grid; justify-items: center; gap: 14px; padding: 28px; background: #fff; border: 1px solid #d8e0e7; border-radius: 8px; box-shadow: 0 18px 44px rgba(38,57,73,.1); }
.pair-qr { display: grid; width: 264px; height: 264px; place-items: center; padding: 8px; background: #fff; border: 1px solid #edf0f2; }
.pair-qr img,.pair-qr canvas { width: 248px !important; height: 248px !important; }
.pair-qr-wrap > span { display: inline-flex; align-items: center; gap: 7px; color: #526170; font-size: 17px; }
.pair-qr-wrap > span svg { width: 18px; color: #177e89; }
.classroom-setup-actions { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 16px; }
.classroom-setup-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0 22px; color: #173f5f; background: #fff; border: 1px solid #bfcbd4; border-radius: 7px; font-size: 17px; font-weight: 800; cursor: pointer; }
.classroom-setup-actions button:hover { color: #fff; background: #177e89; border-color: #177e89; }
.classroom-setup-actions button.setup-primary { color: #fff; background: #173f5f; border-color: #173f5f; }
.classroom-setup-actions button:disabled { color: #62727e; background: #e9eef2; border-color: #d6dfe5; cursor: default; }
.classroom-setup-actions button svg { width: 22px; height: 22px; }
.classroom-setup-actions small { max-width: 360px; color: #687783; font-size: 14px; line-height: 1.55; }
.screen-pair-view > footer { display: flex; justify-content: center; align-items: center; gap: 8px; color: #72808c; font-size: 15px; }
.screen-pair-view > footer svg { width: 17px; color: #245e45; }

.screen-active-view { display: grid; grid-template-rows: 92px 1fr 108px; width: 100%; height: 100%; padding: 0 28px 24px; background: #eef2f4; }
.lesson-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lesson-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lesson-identity > span { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; color: #fff; background: #173f5f; border-radius: 7px; }
.lesson-identity strong,.lesson-identity small { display: block; }
.lesson-identity strong { overflow: hidden; color: #173f5f; font-size: 28px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-identity small { margin-top: 3px; color: #74818c; font-size: 16px; }
.lesson-identity small b { color: #4b5b68; }
.lesson-timer { display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 14px; color: #173f5f; background: #fff; border: 1px solid #d8e0e7; border-radius: 7px; }
.lesson-timer > svg { width: 19px; color: #177e89; }
.lesson-timer strong { min-width: 94px; font-family: Consolas, monospace; font-size: 29px; }
.lesson-timer button { display: grid; width: 48px; height: 46px; place-items: center; color: #526170; background: #eef2f5; border: 0; border-radius: 5px; cursor: pointer; }
.lesson-timer button:hover { color: #fff; background: #177e89; }
.lesson-timer button svg { width: 17px; }

.screen-stage { position: relative; min-height: 0; }
.feedback-overlay { position: absolute; z-index: 18; inset: 0; display: grid; align-content: center; justify-items: center; overflow: hidden; padding: clamp(32px,6vh,72px); color: #fff; text-align: center; background: radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),transparent 24%),linear-gradient(135deg,rgba(18,56,66,.98),rgba(23,78,85,.98)); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; }
.feedback-overlay::before,.feedback-overlay::after { position: absolute; width: min(60vw,820px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; content: ''; }
.feedback-overlay::before { top: -48%; left: -18%; box-shadow: 0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018); }
.feedback-overlay::after { right: -22%; bottom: -58%; box-shadow: 0 0 0 80px rgba(255,255,255,.024),0 0 0 160px rgba(255,255,255,.015); }
.feedback-overlay > * { position: relative; z-index: 2; }
.feedback-symbol { display: grid; width: clamp(112px,10vw,168px); height: clamp(112px,10vw,168px); place-items: center; margin-bottom: 22px; color: #143f48; background: #f4c66a; border: 10px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 22px 60px rgba(9,32,39,.28); }
.feedback-symbol svg { width: 52%; height: 52%; stroke-width: 1.7; }
.feedback-overlay > small { color: #a8d8d4; font-size: clamp(18px,1.4vw,26px); font-weight: 900; letter-spacing: .16em; }
.feedback-overlay h1 { margin: 14px 0 8px; font-size: clamp(66px,8vw,142px); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.feedback-overlay p { max-width: 1040px; margin: 0; color: rgba(255,255,255,.84); font-size: clamp(28px,2.8vw,50px); font-weight: 700; line-height: 1.45; text-wrap: balance; }
.feedback-progress { width: min(520px,48vw); height: 6px; margin-top: 34px; overflow: hidden; background: rgba(255,255,255,.16); border-radius: 8px; }
.feedback-progress span { display: block; width: 100%; height: 100%; background: #f4c66a; transform-origin: left; }
.feedback-overlay.showing .feedback-symbol { animation: feedback-symbol-in .52s cubic-bezier(.2,.85,.2,1.2) both; }
.feedback-overlay.showing h1,.feedback-overlay.showing p { animation: feedback-copy-in .5s .08s ease-out both; }
.feedback-overlay.showing .feedback-progress span { animation: feedback-progress 8s linear forwards; }
.feedback-orbit { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.feedback-orbit span { position: absolute; width: 10px; height: 10px; background: #f4c66a; border-radius: 50%; box-shadow: 0 0 0 7px rgba(244,198,106,.12); }
.feedback-orbit span:nth-child(1) { top: 18%; left: 22%; }
.feedback-orbit span:nth-child(2) { top: 25%; right: 20%; width: 7px; height: 7px; }
.feedback-orbit span:nth-child(3) { right: 28%; bottom: 18%; width: 12px; height: 12px; }
.feedback-overlay.tone-focus,.feedback-overlay.tone-time { background: radial-gradient(circle at 50% 42%,rgba(255,255,255,.15),transparent 24%),linear-gradient(135deg,rgba(23,63,95,.98),rgba(43,71,91,.98)); }
.feedback-overlay.tone-focus .feedback-symbol,.feedback-overlay.tone-time .feedback-symbol { color: #173f5f; background: #d8e7f3; }
.feedback-overlay.tone-celebrate { background: radial-gradient(circle at 50% 42%,rgba(255,221,144,.2),transparent 26%),linear-gradient(135deg,rgba(80,56,22,.98),rgba(126,77,19,.98)); }
.feedback-overlay.tone-success { background: radial-gradient(circle at 50% 42%,rgba(174,236,205,.2),transparent 26%),linear-gradient(135deg,rgba(25,73,54,.98),rgba(31,104,76,.98)); }
@keyframes feedback-symbol-in { from { opacity: 0; transform: translateY(28px) scale(.72); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes feedback-copy-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes feedback-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.flow-ribbon { position: absolute; z-index: 8; top: 8px; left: 50%; display: grid; grid-template-columns: auto auto auto; gap: 12px; align-items: center; max-width: calc(100% - 48px); padding: 10px 16px; color: #fff; background: rgba(18,56,66,.94); border: 1px solid rgba(255,255,255,.2); border-radius: 7px; box-shadow: 0 8px 24px rgba(20,39,49,.2); transform: translateX(-50%); backdrop-filter: blur(8px); }
.flow-ribbon span { color: #f4c66a; font-size: 15px; font-weight: 900; white-space: nowrap; }
.flow-ribbon strong { overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.flow-ribbon small { color: rgba(255,255,255,.72); font-size: 14px; white-space: nowrap; }
.flow-presentation { position: relative; display: grid; grid-template-columns: minmax(520px,1.25fr) minmax(300px,.75fr); gap: clamp(40px,6vw,100px); align-items: center; width: 100%; height: 100%; min-height: 0; padding: clamp(44px,7vh,88px) clamp(64px,8vw,140px); overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 20%,rgba(244,198,106,.25),transparent 26%),linear-gradient(135deg,#123842 0%,#174d55 58%,#173f5f 100%); border-radius: 12px; }
.flow-presentation::after { position: absolute; right: -140px; bottom: -220px; width: 600px; height: 600px; border: 2px solid rgba(255,255,255,.11); border-radius: 50%; box-shadow: 0 0 0 86px rgba(255,255,255,.025),0 0 0 172px rgba(255,255,255,.016); content: ''; }
.flow-presentation-copy { position: relative; z-index: 1; }
.flow-presentation-copy > span { display: inline-block; padding: 7px 11px; color: #153f48; background: #f4c66a; border-radius: 5px; font-size: 18px; font-weight: 900; }
.flow-presentation-copy > small { display: block; margin-top: 18px; color: #a8d8d4; font-size: 19px; font-weight: 800; }
.flow-presentation-copy h1 { max-width: 880px; margin: 14px 0 18px; font-size: clamp(48px,5vw,86px); line-height: 1.12; }
.flow-presentation-copy p { max-width: 900px; margin: 0; color: rgba(255,255,255,.82); font-size: clamp(24px,2.2vw,38px); line-height: 1.55; }
.flow-presentation-copy > div { margin-top: 28px; color: #f4c66a; font-size: 20px; font-weight: 800; }
.flow-presentation-mark { position: relative; z-index: 1; display: grid; justify-items: center; gap: 20px; color: rgba(255,255,255,.84); text-align: center; font-size: clamp(20px,2vw,32px); font-weight: 800; line-height: 1.5; }
.flow-presentation-mark > i { width: clamp(130px,11vw,190px); height: clamp(130px,11vw,190px); padding: 34px; color: #f4c66a; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.flow-controls { position: absolute; z-index: 3; right: 28px; bottom: 22px; display: flex; gap: 10px; }
.flow-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; min-height: 58px; padding: 10px 20px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 7px; font-size: 18px; font-weight: 800; cursor: pointer; }
.flow-controls button.answer { color: #173f5f; background: #f4c66a; border-color: #f4c66a; }
.flow-controls button:disabled { opacity: .4; cursor: default; }
.group-score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; height: 100%; min-height: 0; padding: 6px 0 20px; }
.group-score-grid.groups-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group-score-grid.groups-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.group-score-grid.groups-5,.group-score-grid.groups-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.group-score-grid.groups-7,.group-score-grid.groups-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.group-score-grid.groups-9,.group-score-grid.groups-10,.group-score-grid.groups-11,.group-score-grid.groups-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.score-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; padding: 18px; overflow: hidden; background: #fff; border: 1px solid #d7dfe6; border-top: 6px solid var(--group-color); border-radius: 8px; box-shadow: 0 6px 18px rgba(34,51,65,.07); }
.score-card::after { position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; background: var(--group-color); border-radius: 50%; content: ""; opacity: .06; }
.score-card header { display: flex; align-items: center; gap: 9px; }
.score-card header span { width: 13px; height: 13px; background: var(--group-color); border-radius: 50%; }
.score-card header strong { overflow: hidden; color: #2b3946; font-size: 28px; text-overflow: ellipsis; white-space: nowrap; }
.score-card > b { align-self: center; justify-self: center; color: var(--group-color); font-family: Arial, sans-serif; font-size: clamp(70px, 8vw, 150px); line-height: 1; }
.score-card > div { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score-card button { display: grid; min-height: 62px; place-items: center; color: #526170; background: #f0f3f5; border: 1px solid #d9e0e6; border-radius: 6px; cursor: pointer; }
.score-card button:last-child { color: #fff; background: var(--group-color); border-color: var(--group-color); }
.score-card button:hover { filter: brightness(.96); transform: translateY(-1px); }
.score-card button svg { width: 24px; height: 24px; }
.groups-9 .score-card,.groups-10 .score-card,.groups-11 .score-card,.groups-12 .score-card { padding: 12px; }
.groups-9 .score-card header strong,.groups-10 .score-card header strong,.groups-11 .score-card header strong,.groups-12 .score-card header strong { font-size: 17px; }
.groups-9 .score-card > b,.groups-10 .score-card > b,.groups-11 .score-card > b,.groups-12 .score-card > b { font-size: clamp(42px, 5vw, 82px); }
.groups-9 .score-card button,.groups-10 .score-card button,.groups-11 .score-card button,.groups-12 .score-card button { min-height: 38px; }

.media-presentation { display: grid; grid-template-rows: 46px minmax(0, 1fr) 58px; width: 100%; height: 100%; min-height: 0; padding: 0 0 14px; }
.media-presentation > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.media-presentation > header > div { display: flex; align-items: baseline; gap: 12px; }
.media-presentation > header span { color: #177e89; font-size: 18px; font-weight: 800; }
.media-presentation > header strong { color: #405260; font-size: 18px; }
.media-presentation > header p { display: flex; align-items: center; gap: 7px; margin: 0; color: #6b7883; font-size: 16px; }
.media-presentation > header svg { width: 16px; color: #245e45; }
.media-viewer { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; background: #17212b; border: 1px solid #263746; border-radius: 8px; box-shadow: 0 10px 28px rgba(23,33,43,.16); touch-action: none; }
.media-viewer img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; transition: transform .18s ease; user-select: none; -webkit-user-drag: none; }
.media-viewer.cover img { object-fit: cover; }
.media-viewer img[hidden],.media-audio-stage[hidden],.media-viewer video[hidden] { display: none !important; }
.media-viewer video { display: block; width: 100%; height: 100%; background: #071019; object-fit: contain; }
.media-viewer.show-audio { background: radial-gradient(circle at 50% 35%,#28596a 0,#173d4b 38%,#111d27 100%); }
.media-audio-stage { display: grid; width: min(900px,82%); place-items: center; gap: 12px; color: #fff; text-align: center; }
.media-audio-stage > span { display: grid; width: 112px; height: 112px; place-items: center; color: #173f5f; background: #d9f1ec; border: 10px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.media-audio-stage > span svg { width: 54px; height: 54px; }
.media-audio-stage h2 { max-width: 100%; margin: 8px 0 0; overflow: hidden; font-size: clamp(30px,3vw,52px); text-overflow: ellipsis; white-space: nowrap; }
.media-audio-stage p { margin: 0; color: rgba(255,255,255,.7); font-size: 20px; }
.media-audio-stage audio { width: min(760px,100%); margin-top: 12px; }
.media-privacy-mask { position: absolute; z-index: 2; display: grid; place-items: center; color: rgba(255,255,255,.55); background: rgba(13,21,29,.92); font-size: 12px; letter-spacing: 2px; pointer-events: none; }
.media-privacy-mask.top,.media-privacy-mask.bottom { right: 0; left: 0; height: 22%; }
.media-privacy-mask.top { top: 0; }
.media-privacy-mask.bottom { bottom: 0; }
.media-privacy-mask.left,.media-privacy-mask.right { top: 0; bottom: 0; width: 22%; }
.media-privacy-mask.left { left: 0; }
.media-privacy-mask.right { right: 0; }
.media-viewer canvas { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.media-controls { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 9px; }
.media-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 56px; padding: 9px 18px; color: #435463; background: #fff; border: 1px solid #d6dee5; border-radius: 6px; font-size: 17px; font-weight: 700; cursor: pointer; }
.media-controls button:hover,.media-controls button.active { color: #fff; background: #177e89; border-color: #177e89; }
.media-controls svg { width: 17px; }
.media-controls button[hidden] { display: none !important; }

.screen-toolbar { display: grid; grid-template-columns: 160px repeat(10, 112px) 1fr; gap: 8px; align-items: center; padding: 12px; background: #fff; border: 1px solid #d7dfe6; border-radius: 8px; box-shadow: 0 8px 24px rgba(34,51,65,.08); }
.screen-toolbar > button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 66px; color: #435463; background: #eef2f4; border: 1px solid #d9e0e6; border-radius: 6px; font-size: 17px; font-weight: 700; cursor: pointer; }
.screen-toolbar > button.primary { color: #fff; background: #177e89; border-color: #177e89; }
.screen-toolbar > button:hover { filter: brightness(.96); }
.screen-toolbar svg { width: 20px; }

.activity-presentation { display: grid; grid-template-rows: 46px minmax(0, 1fr) 58px; width: 100%; height: 100%; min-height: 0; padding: 0 0 14px; }
.activity-presentation > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.activity-presentation > header > div { display: flex; align-items: baseline; gap: 12px; }
.activity-presentation > header span { color: #177e89; font-size: 18px; font-weight: 800; }
.activity-presentation > header strong,.activity-presentation > header p { margin: 0; color: #687784; font-size: 16px; }
.reveal-presentation { display: grid; grid-template-rows: 50px minmax(0,1fr) 64px; width: 100%; height: 100%; min-height: 0; padding-bottom: 12px; }
.reveal-presentation > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.reveal-presentation > header > div { display: flex; align-items: baseline; gap: 14px; }
.reveal-presentation > header span { color: #177e89; font-size: 20px; font-weight: 900; }
.reveal-presentation > header strong,.reveal-presentation > header p { margin: 0; color: #647684; font-size: 17px; }
.reveal-presentation > header p { display: flex; align-items: center; gap: 7px; }
.reveal-presentation > header svg { width: 20px; }
.reveal-stage { position: relative; display: grid; grid-template-columns: minmax(290px,.72fr) minmax(520px,1.28fr); gap: clamp(26px,3vw,56px); min-height: 0; padding: clamp(30px,4vh,56px) clamp(36px,4vw,74px); overflow: hidden; background: radial-gradient(circle at 88% 18%,rgba(217,151,34,.18),transparent 30%),linear-gradient(135deg,#143f48 0%,#184e57 58%,#123842 100%); border-radius: 12px; }
.reveal-stage::after { position: absolute; right: -100px; bottom: -150px; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 66px rgba(255,255,255,.025),0 0 0 132px rgba(255,255,255,.018); content: ''; pointer-events: none; }
.reveal-title { position: relative; z-index: 1; align-self: center; }
.reveal-title small { display: block; margin-bottom: 15px; color: #9ee1d8; font-size: clamp(18px,1.4vw,25px); font-weight: 800; letter-spacing: .12em; }
.reveal-title h1 { max-width: 620px; margin: 0; color: #fff; font-size: clamp(38px,3.4vw,68px); line-height: 1.2; text-wrap: balance; }
.reveal-stage ol { position: relative; z-index: 1; display: grid; align-content: center; gap: clamp(10px,1.4vh,18px); margin: 0; padding: 0; list-style: none; }
.reveal-stage li { display: grid; grid-template-columns: clamp(42px,3.3vw,60px) 1fr; gap: clamp(14px,1.4vw,24px); align-items: center; min-height: clamp(58px,8vh,88px); padding: 10px clamp(16px,2vw,28px); color: #edf7f6; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; animation: reveal-step-in .42s cubic-bezier(.2,.8,.2,1) both; backdrop-filter: blur(5px); }
.reveal-stage li b { display: grid; width: clamp(40px,3.1vw,56px); height: clamp(40px,3.1vw,56px); place-items: center; color: #153f48; background: #f4c66a; border-radius: 50%; font-size: clamp(18px,1.45vw,26px); }
.reveal-stage li span { font-size: clamp(24px,2vw,38px); font-weight: 700; line-height: 1.35; }
.reveal-stage li.latest { background: rgba(255,255,255,.18); border-color: rgba(244,198,106,.72); }
.reveal-waiting { position: relative; z-index: 1; display: grid; align-self: center; justify-items: center; gap: 15px; color: #d6ebe8; text-align: center; }
.reveal-waiting svg { width: 52px; height: 52px; color: #f4c66a; }
.reveal-waiting span { font-size: clamp(24px,2vw,38px); font-weight: 700; }
.reveal-controls { display: flex; align-items: end; justify-content: center; gap: 12px; }
.reveal-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 170px; min-height: 52px; color: #415361; background: #fff; border: 1px solid #cad5dc; border-radius: 7px; font-size: 16px; font-weight: 800; cursor: pointer; }
.reveal-controls button.answer { color: #fff; background: #177e89; border-color: #177e89; }
.reveal-controls button:disabled { opacity: .4; cursor: not-allowed; }
@keyframes reveal-step-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .reveal-stage li { animation: none; } }
.challenge-presentation { display: grid; grid-template-rows: 50px minmax(0,1fr) 64px; width: 100%; height: 100%; min-height: 0; padding-bottom: 12px; }
.challenge-presentation > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.challenge-presentation > header > div { display: flex; align-items: baseline; gap: 14px; }
.challenge-presentation > header span { color: #a15c08; font-size: 20px; font-weight: 900; }
.challenge-presentation > header strong,.challenge-presentation > header p { margin: 0; color: #647684; font-size: 17px; }
.challenge-presentation > header p { display: flex; align-items: center; gap: 7px; }
.challenge-presentation > header svg { width: 20px; }
.challenge-stage { position: relative; display: grid; grid-template-columns: minmax(420px,1.15fr) minmax(360px,.85fr); gap: clamp(32px,5vw,86px); align-items: center; min-height: 0; padding: clamp(34px,5vh,68px) clamp(48px,6vw,110px); overflow: hidden; color: #fff; background: radial-gradient(circle at 85% 22%,rgba(245,190,78,.24),transparent 28%),linear-gradient(135deg,#123842 0%,#174d55 54%,#173f5f 100%); border-radius: 12px; }
.challenge-stage::before { position: absolute; right: -120px; bottom: -190px; width: 520px; height: 520px; border: 2px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 76px rgba(255,255,255,.025),0 0 0 152px rgba(255,255,255,.016); content: ''; }
.challenge-copy,.challenge-clock { position: relative; z-index: 1; }
.challenge-copy small { color: #9ee1d8; font-size: clamp(18px,1.5vw,26px); font-weight: 900; letter-spacing: .14em; }
.challenge-copy h1 { max-width: 760px; margin: 18px 0 14px; color: #fff; font-size: clamp(44px,4.4vw,82px); line-height: 1.15; text-wrap: balance; }
.challenge-copy p { max-width: 760px; margin: 0; color: #d8eae9; font-size: clamp(22px,2vw,36px); font-weight: 650; line-height: 1.55; }
.challenge-clock { display: grid; justify-items: stretch; gap: 18px; padding: clamp(26px,3vw,48px); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; backdrop-filter: blur(7px); }
.challenge-clock > span { color: #fff; font: 900 clamp(80px,9vw,170px)/1 Consolas,monospace; letter-spacing: -.06em; text-align: center; text-shadow: 0 10px 30px rgba(0,0,0,.18); }
.challenge-clock progress { width: 100%; height: 18px; overflow: hidden; border: 0; border-radius: 14px; }
.challenge-clock progress::-webkit-progress-bar { background: rgba(255,255,255,.18); }
.challenge-clock progress::-webkit-progress-value { background: #f4c66a; border-radius: 14px; }
.challenge-clock small { color: #d8eae9; font-size: clamp(18px,1.4vw,25px); font-weight: 800; text-align: center; }
.challenge-stage.urgent .challenge-clock { border-color: rgba(255,209,102,.8); animation: challenge-pulse .9s ease-in-out infinite alternate; }
.challenge-stage.finished .challenge-clock { background: rgba(217,119,6,.2); border-color: rgba(255,209,102,.8); }
.challenge-controls { display: flex; align-items: end; justify-content: center; gap: 12px; }
.challenge-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 165px; min-height: 52px; color: #415361; background: #fff; border: 1px solid #cad5dc; border-radius: 7px; font-size: 16px; font-weight: 800; cursor: pointer; }
.challenge-controls button.answer { color: #fff; background: #177e89; border-color: #177e89; }
.challenge-controls button:disabled { opacity: .4; cursor: not-allowed; }
@keyframes challenge-pulse { from { box-shadow: 0 0 0 rgba(244,198,106,0); } to { box-shadow: 0 0 0 12px rgba(244,198,106,.12); } }
@media (prefers-reduced-motion: reduce) { .challenge-stage.urgent .challenge-clock { animation: none; } }
@media (prefers-reduced-motion: reduce) { .feedback-overlay.showing .feedback-symbol,.feedback-overlay.showing h1,.feedback-overlay.showing p,.feedback-overlay.showing .feedback-progress span { animation: none; } }
.activity-question { display: grid; align-content: center; gap: 28px; min-height: 0; padding: 38px 7vw; background: #fff; border: 1px solid #d7dfe6; border-top: 6px solid #177e89; border-radius: 8px; box-shadow: 0 8px 22px rgba(34,51,65,.08); }
.activity-question h2 { max-width: 1200px; margin: 0 auto; color: #173f5f; font-size: clamp(34px, 4vw, 64px); line-height: 1.45; text-align: center; }
.activity-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(1050px, 100%); margin: 0 auto; }
.activity-options:empty { display: none; }
.activity-options button { min-height: 84px; padding: 16px 22px; color: #284255; background: #f3f6f8; border: 2px solid #d1dde4; border-radius: 9px; font-size: clamp(22px, 2.15vw, 32px); font-weight: 750; line-height: 1.4; text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.activity-options button:hover:not(:disabled),.activity-options button:focus-visible:not(:disabled) { background: #e7f5f4; border-color: #177e89; transform: translateY(-2px); outline: none; }
.activity-options button:disabled { cursor: default; }
.activity-options button.selected { color: #0b5960; background: #dff3f1; border-color: #177e89; box-shadow: inset 0 0 0 2px rgba(23,126,137,.12); }
.activity-options button.correct { color: #135c39; background: #e4f5eb; border-color: #2f9e62; }
.activity-options button.incorrect { color: #8a3a2f; background: #fff0ed; border-color: #d97762; }
.activity-touch-status { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(1050px,100%); margin: 0 auto; padding: 13px 18px; color: #0f6b73; background: #edf8f7; border: 1px solid #a6cece; border-radius: 7px; font-size: clamp(17px,1.55vw,24px); font-weight: 750; text-align: center; }
.activity-touch-status svg { width: 25px; height: 25px; }
.activity-touch-status.answered { color: #173f5f; background: #eef4fa; border-color: #adc2d6; }
.activity-touch-status.revealed { color: #5f4b17; background: #fff8e6; border-color: #e4ca82; }
.activity-answer { display: grid; gap: 7px; width: min(1050px, 100%); margin: 0 auto; padding: 16px 20px; color: #5f4b17; background: #fff7df; border-left: 5px solid #d97706; border-radius: 6px; }
.activity-answer span { font-size: 13px; font-weight: 800; }
.activity-answer strong { font-size: clamp(21px, 2vw, 31px); line-height: 1.5; }
.activity-controls { display: flex; justify-content: center; gap: 10px; align-items: end; }
.activity-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 180px; min-height: 58px; color: #405464; background: #fff; border: 1px solid #ced8df; border-radius: 6px; font-size: 18px; font-weight: 700; cursor: pointer; }
.activity-controls button.answer { color: #fff; background: #177e89; border-color: #177e89; }
.activity-controls button:disabled { opacity: .4; cursor: not-allowed; }
.screen-status { display: flex; align-items: center; justify-self: end; gap: 10px; }
.screen-status > span { width: 10px; height: 10px; background: #2f9e62; border-radius: 50%; box-shadow: 0 0 0 5px rgba(47,158,98,.12); }
.screen-status p { margin: 0; text-align: right; }
.screen-status strong,.screen-status small { display: block; }
.screen-status strong { color: #334451; font-size: 16px; }
.screen-status small { margin-top: 2px; color: #7b8791; font-size: 13px; }

.classroom-install-overlay { position: fixed; z-index: 90; inset: 0; background: rgba(14,28,39,.7); backdrop-filter: blur(3px); }
.classroom-install-dialog { position: fixed; z-index: 91; top: 50%; left: 50%; width: min(720px,calc(100% - 56px)); padding: 30px; color: #263746; background: #fff; border: 1px solid #d5dfe6; border-radius: 10px; box-shadow: 0 30px 80px rgba(12,28,41,.32); transform: translate(-50%,-50%); }
.classroom-install-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.classroom-install-dialog header small { color: #177e89; font-size: 15px; font-weight: 800; }
.classroom-install-dialog h2 { margin: 5px 0 0; color: #173f5f; font-size: 32px; }
.classroom-install-dialog header button { display: grid; width: 48px; height: 48px; place-items: center; color: #526170; background: #f2f5f7; border: 1px solid #d9e1e7; border-radius: 6px; cursor: pointer; }
.classroom-install-dialog > p { margin: 18px 0; color: #5e6e7a; font-size: 18px; }
.classroom-install-dialog ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.classroom-install-dialog li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 14px 16px; background: #f6f8f9; border: 1px solid #e0e6eb; border-radius: 7px; }
.classroom-install-dialog li > span { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: #177e89; border-radius: 6px; font-size: 19px; font-weight: 800; }
.classroom-install-dialog li strong,.classroom-install-dialog li p { display: block; margin: 0; }
.classroom-install-dialog li strong { font-size: 18px; }
.classroom-install-dialog li p { margin-top: 3px; color: #677783; font-size: 15px; }
.classroom-install-dialog .install-confirm { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 58px; margin-top: 18px; color: #fff; background: #173f5f; border: 0; border-radius: 7px; font-size: 18px; font-weight: 800; cursor: pointer; }

.screen-ended-view { display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; padding: 40px; text-align: center; background: #f8fafb; }
.screen-ended-view > span { display: grid; width: 72px; height: 72px; place-items: center; color: #fff; background: #245e45; border-radius: 10px; }
.screen-ended-view > span svg { width: 38px; height: 38px; }
.screen-ended-view h1 { margin: 22px 0 8px; color: #173f5f; font-size: 40px; letter-spacing: 0; }
.screen-ended-view p { margin: 0; color: #687783; font-size: 17px; }
.screen-ended-view button { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 12px 18px; color: #fff; background: #173f5f; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.screen-ended-view button svg { width: 19px; }

.random-result { position: fixed; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; padding: 40px; color: #fff; text-align: center; background: rgba(23,63,95,.94); }
.random-result span { color: #b7dadd; font-size: 22px; }
.random-result strong { margin: 14px 0 20px; font-size: clamp(66px, 10vw, 150px); letter-spacing: 0; }
.random-result small { max-width: 720px; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.6; }
.screen-toast { position: fixed; z-index: 30; top: 22px; left: 50%; max-width: 600px; padding: 12px 18px; color: #fff; background: #245e45; border-radius: 6px; box-shadow: 0 10px 28px rgba(23,40,54,.2); font-size: 15px; transform: translateX(-50%); }
.screen-toast.error { background: #a43e3e; }

@media (max-height: 720px) {
  .screen-active-view { grid-template-rows: 72px 1fr 82px; padding: 0 20px 16px; }
  .score-card { padding: 12px; }
  .score-card > b { font-size: clamp(54px, 7vw, 100px); }
  .score-card button { min-height: 38px; }
  .screen-toolbar { padding: 8px; }
  .screen-toolbar > button { min-height: 54px; font-size: 15px; }
  .pair-copy h1 { font-size: 42px; }
  .pair-copy > p:not(.eyebrow) { margin: 12px 0 16px; font-size: 17px; }
  .manual-code { margin-top: 14px; padding: 10px 14px; }
  .classroom-setup-actions { padding: 4px 0 8px; }
  .classroom-setup-actions button { min-height: 50px; }
  .media-presentation { grid-template-rows: 38px minmax(0, 1fr) 50px; }
  .media-controls button { min-height: 36px; padding: 5px 9px; }
  .challenge-presentation { grid-template-rows: 38px minmax(0,1fr) 50px; }
  .challenge-stage { padding: 24px 48px; }
  .challenge-controls button { min-width: 140px; min-height: 38px; }
}

@media (max-width: 1600px) {
  .screen-toolbar { grid-template-columns: repeat(11, minmax(76px, 1fr)); }
  .screen-status { display: none; }
}

@media (max-width: 1080px) {
  .screen-toolbar > button { font-size: 15px; }
  .classroom-setup-actions small { display: none; }
}