* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html { font-size: 0.5208vw; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: #08080A;
  color: #F2F2F4;
  font-family: "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC",
               "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  cursor: default;
}

em { font-style: normal; }


.bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #08080A; }

.glow {
  position: absolute; border-radius: 50%;
  -webkit-animation: drift 30s ease-in-out infinite;
  animation: drift 30s ease-in-out infinite;
}
.glow-a {
  width: 120rem; height: 120rem; right: -34rem; top: -46rem;
  background: -webkit-radial-gradient(closest-side, rgba(255,122,26,.20), rgba(255,122,26,0));
  background: radial-gradient(closest-side, rgba(255,122,26,.20), rgba(255,122,26,0));
}
.glow-b {
  width: 100rem; height: 100rem; left: -30rem; bottom: -52rem;
  background: -webkit-radial-gradient(closest-side, rgba(255,176,32,.13), rgba(255,176,32,0));
  background: radial-gradient(closest-side, rgba(255,176,32,.13), rgba(255,176,32,0));
  -webkit-animation-delay: -14s; animation-delay: -14s;
}
.grain {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.055) 1px, rgba(255,255,255,0) 1.3px);
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, rgba(255,255,255,0) 1.3px);
  background-size: 3.2rem 3.2rem;
  opacity: .7;
}
@-webkit-keyframes drift {
  0%,100% { -webkit-transform: translate3d(0,0,0) scale(1); }
  50%     { -webkit-transform: translate3d(2rem,-2rem,0) scale(1.05); }
}
@keyframes drift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(2rem,-2rem,0) scale(1.05); }
}


.topbar {
  position: relative; z-index: 5;
  height: 9rem; padding: 0 7rem;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
}
.brand { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.logo {
  position: relative; display: block; width: 3.4rem; height: 3.4rem; margin-right: 1.4rem;
  border-radius: 1rem;
  background: -webkit-linear-gradient(135deg, #FFB020, #FF5A1A);
  background: linear-gradient(135deg, #FFB020, #FF5A1A);
}
.logo i {
  position: absolute; left: 1.12rem; top: .85rem;
  width: 0; height: 0;
  border-left: 1.2rem solid #08080A;
  border-top: .85rem solid transparent;
  border-bottom: .85rem solid transparent;
}
.brand-text { font-size: 2rem; font-weight: 700; letter-spacing: .02em; color: #F2F2F4; }
.topright { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.pill {
  font-size: 1.6rem; color: #C9C9CF;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px; padding: .9rem 1.9rem;
}
.clock { font-size: 1.9rem; font-weight: 600; color: #8E8E96; margin-left: 2.2rem; font-variant-numeric: tabular-nums; }


#stage { position: relative; z-index: 4; height: calc(100vh - 9rem); padding: 2rem 7rem 6rem; }
.screen { display: none; height: 100%; }
.screen.active {
  display: -webkit-flex; display: flex;
  -webkit-animation: fadeUp .4s cubic-bezier(.22,.61,.36,1);
  animation: fadeUp .4s cubic-bezier(.22,.61,.36,1);
}
@-webkit-keyframes fadeUp { from { opacity: 0; -webkit-transform: translate3d(0,2rem,0);} to { opacity: 1; -webkit-transform: none;} }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0,2rem,0);} to { opacity: 1; transform: none;} }


.quiz-wrap {
  position: relative; width: 100%; height: 100%;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
}
.quiz-head {
  position: absolute; top: 0; left: 0; right: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
}
.crumb { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; }
.crumb-sub { font-size: 1.7rem; font-weight: 700; color: #FF8A3D; letter-spacing: .04em; }
.crumb-sep { margin: 0 1rem; font-size: 1.7rem; color: #4A4A52; }
.crumb-main { font-size: 1.7rem; color: #9A9AA2; }

.counter { font-size: 1.7rem; color: #6B6B74; font-variant-numeric: tabular-nums; }
.counter b { font-size: 2.6rem; font-weight: 800; color: #F2F2F4; }
.counter i { margin-left: .6rem; font-style: normal; }

.question {
  margin: 0 0 4.6rem;
  font-size: 5.6rem; line-height: 1.3; font-weight: 800; color: #FAFAFB;
  letter-spacing: -.01em; max-width: 148rem;
}

.options { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.option {
  width: 47.5%; margin: 0 5% 2.2rem 0;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  padding: 2.9rem 3.2rem; border-radius: 1.8rem;
  background: #141416;
  border: 2px solid #1F1F23;
  font-size: 3.2rem; font-weight: 700; color: #E9E9EC;
  -webkit-transition: -webkit-transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.option:nth-child(2n) { margin-right: 0; }
.option .letter {
  width: 5rem; height: 5rem; margin-right: 2.4rem; line-height: 5rem; text-align: center;
  font-size: 2rem; font-weight: 800; color: #8E8E96;
  background: rgba(255,255,255,.06); border-radius: 1.2rem;
}
.option.focused {
  -webkit-transform: scale(1.025); transform: scale(1.025);
  background: #1D1A16;
  border-color: #FFB020;
  -webkit-box-shadow: 0 0 0 .4rem rgba(255,176,32,.20), 0 2.4rem 5rem rgba(0,0,0,.55);
  box-shadow: 0 0 0 .4rem rgba(255,176,32,.20), 0 2.4rem 5rem rgba(0,0,0,.55);
}
.option.focused .letter { background: #FFB020; color: #14100A; }
.option.right { background: #10241A; border-color: #33D17A; }
.option.right .letter { background: #33D17A; color: #06210F; }
.option.wrong { background: #2A1214; border-color: #F2545B; }
.option.wrong .letter { background: #F2545B; color: #2A0507; }

.quiz-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
}
.dots-progress { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.dot {
  width: 2.2rem; height: .6rem; border-radius: 999px; margin-right: .8rem;
  background: #24242A;
  -webkit-transition: all .3s ease; transition: all .3s ease;
}
.dot.done { background: #5A5A64; }
.dot.now { width: 5.4rem; background: -webkit-linear-gradient(90deg, #FFB020, #FF5A1A);
  background: linear-gradient(90deg, #FFB020, #FF5A1A); }

.hint { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 1.6rem; color: #6B6B74; }
.kbd {
  display: inline-block; min-width: 3.2rem; margin-right: .7rem; padding: .5rem .8rem;
  font-size: 1.5rem; text-align: center; color: #B9B9C1;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  border-radius: .8rem;
}
.kbd-wide { min-width: 5rem; margin-left: 2rem; }
.hint-text { margin-right: 1.4rem; }


.btn {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  margin-right: 2rem;
  padding: 2.1rem 4.2rem;
  font-family: inherit; font-size: 2.3rem; font-weight: 700;
  color: #E9E9EC; background: #16161A;
  border: 2px solid #26262C;
  border-radius: 1.6rem;
  cursor: default; outline: none;
  -webkit-transition: -webkit-transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn:last-child { margin-right: 0; }
.btn-primary {
  color: #14100A;
  background: -webkit-linear-gradient(135deg, #FFC24A, #FF6A1F);
  background: linear-gradient(135deg, #FFC24A, #FF6A1F);
  border-color: transparent;
  -webkit-box-shadow: 0 1.4rem 3.4rem rgba(255,106,31,.28);
  box-shadow: 0 1.4rem 3.4rem rgba(255,106,31,.28);
}
.btn.focused {
  -webkit-transform: scale(1.04); transform: scale(1.04);
  -webkit-box-shadow: 0 0 0 .45rem rgba(255,176,32,.42), 0 2rem 4.4rem rgba(0,0,0,.6);
  box-shadow: 0 0 0 .45rem rgba(255,176,32,.42), 0 2rem 4.4rem rgba(0,0,0,.6);
}
.btn-ghost.focused { background: #1F1F25; border-color: #3A3A42; }


.lock-wrap {
  width: 100%; max-width: 118rem; margin: 0 auto;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  text-align: center;
}
.lock-badge {
  position: relative;
  width: 12rem; height: 12rem; margin-bottom: 3.4rem;
  line-height: 12rem; color: #FFB020;
}
.lock-badge:before {
  content: ""; position: absolute; left: -3rem; top: -3rem; right: -3rem; bottom: -3rem;
  border-radius: 50%;
  background: -webkit-radial-gradient(closest-side, rgba(255,140,40,.22), rgba(255,140,40,0));
  background: radial-gradient(closest-side, rgba(255,140,40,.22), rgba(255,140,40,0));
}
.lock-badge svg { position: relative; width: 11rem; height: 11rem; vertical-align: middle; margin-top: -.6rem; }
.lock-title {
  margin: 0 0 2.2rem;
  font-size: 6rem; font-weight: 800; line-height: 1.24; color: #FAFAFB; letter-spacing: -.015em;
}
.lock-title em {
  background: -webkit-linear-gradient(100deg, #FFC24A 10%, #FF6A1F 90%);
  background: linear-gradient(100deg, #FFC24A, #FF6A1F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #FFB020;
}
.lock-desc { margin: 0 0 4.6rem; font-size: 2.3rem; line-height: 1.7; color: #A2A2AA; }
.lock-desc b { color: #F2F2F4; }
.lock-actions { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.lock-note { margin-top: 4.2rem; font-size: 1.7rem; color: #63636B; }


.word-card {
  padding: 4.6rem 5.6rem; border-radius: 2.4rem;
  background: #121214; border: 2px solid #1E1E23;
  text-align: center;
}
.word { font-size: 9rem; font-weight: 800; color: #FAFAFB; letter-spacing: -.02em; }
.word-phon { margin-top: 1rem; font-size: 2.4rem; color: #FF8A3D; }
.word-mean { margin-top: 2.4rem; font-size: 3.2rem; color: #E9E9EC; }
.word-sentence { margin-top: 1.6rem; font-size: 2rem; color: #8E8E96; line-height: 1.6; }
.word-actions { margin-top: 4rem; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }


.remote-hint {
  position: fixed; left: 7rem; right: 7rem; bottom: 2.6rem; z-index: 6;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: flex-end; justify-content: flex-end;
  font-size: 1.5rem; color: #4E4E56;
}
body.on-quiz .remote-hint { display: none; }


.no-anim .screen.active,
.no-anim .glow {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
}


.toast {
  position: fixed; left: 50%; bottom: 9rem; z-index: 20;
  -webkit-transform: translateX(-50%) translateY(1rem);
  transform: translateX(-50%) translateY(1rem);
  padding: 1.6rem 3.2rem; border-radius: 1.4rem;
  background: #16161A; border: 2px solid #2C2C33;
  color: #F2F2F4; font-size: 2rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  -webkit-transition: opacity .22s ease, -webkit-transform .22s ease;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }


body.on-lock .pill,
body.on-lock .remote-hint { display: none; }


.pair-code {
  margin: 2.4rem 0 1rem;
  font-size: 10rem; font-weight: 800; letter-spacing: .14em;
  color: #FFB020; font-variant-numeric: tabular-nums;
  text-indent: .14em;
}


.qr-box {
  width: 34rem; height: 34rem; margin-bottom: 3rem;
  border-radius: 2.4rem; padding: 1.6rem;
  background: #FFFFFF;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-box-shadow: 0 2rem 5rem rgba(0,0,0,.5);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.5);
}
.qr-box img, .qr-box canvas { display: block; width: 30rem; height: 30rem; }


.update-tip {
  position: fixed; right: 6.4rem; top: 10rem; z-index: 30;
  display: none; -webkit-align-items: center; align-items: center;
  padding: 1.4rem 1.6rem 1.4rem 2rem;
  border-radius: 1.6rem;
  background: #17171B; border: 2px solid #2A2A31;
  -webkit-box-shadow: 0 1.6rem 4rem rgba(0,0,0,.55);
  box-shadow: 0 1.6rem 4rem rgba(0,0,0,.55);
}
.update-tip.show { display: -webkit-flex; display: flex; }
.update-dot { width: 1rem; height: 1rem; border-radius: 50%; background: #FFB020; margin-right: 1.2rem; }
.update-text { font-size: 1.9rem; color: #E9E9EC; margin-right: 1.8rem; }
.update-btn {
  font-family: inherit; font-size: 1.7rem; font-weight: 700; color: #14100A;
  padding: .9rem 1.8rem; border: 0; border-radius: 999px;
  background: -webkit-linear-gradient(135deg, #FFC24A, #FF6A1F);
  background: linear-gradient(135deg, #FFC24A, #FF6A1F);
}
.update-btn.focused { -webkit-transform: scale(1.06); transform: scale(1.06); }
.update-close {
  margin-left: 1rem; width: 3.4rem; height: 3.4rem; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #A2A2AA; font-size: 2.2rem; line-height: 1;
}

button.option { font-family:inherit; text-align:left; }
.option.selected { border-color:#FFB020; background:#332611; }
.written-answer { width:100%; padding:2rem; border:2px solid #FFB020; border-radius:1.2rem; background:#16161A; color:#fff; font:inherit; font-size:3rem; margin-bottom:2rem; }
.answer-submit { margin-top:1rem; }
.pool-status { color:#FFB020; font-size:1.8rem; margin-top:1rem; }
.lock-badge { font-size:8rem; }
@media (max-width:1400px) {
  html:not(.tv-device) { font-size:8px; }
  html:not(.tv-device) body { overflow:auto; }
  html:not(.tv-device) .topbar { height:auto; min-height:8rem; padding:2rem 3rem; flex-wrap:wrap; }
  html:not(.tv-device) .brand { margin-bottom:1rem; }
  html:not(.tv-device) .topright { flex-wrap:wrap; }
  html:not(.tv-device) .clock { display:none; }
  html:not(.tv-device) #stage { height:auto; min-height:calc(100vh - 12rem); padding:2rem 3rem 4rem; }
  html:not(.tv-device) .screen { min-height:calc(100vh - 18rem); height:auto; }
  html:not(.tv-device) .quiz-wrap { height:auto; min-height:calc(100vh - 18rem); }
  html:not(.tv-device) .quiz-head, html:not(.tv-device) .quiz-foot { position:relative; margin-bottom:3rem; }
  html:not(.tv-device) .question { font-size:4rem; margin:1rem 0 3rem; }
  html:not(.tv-device) .option { padding:2rem; font-size:2.5rem; min-height:9rem; }
  html:not(.tv-device) .option.focused { transform:none; }
  html:not(.tv-device) .option .letter { flex-shrink:0; }
  html:not(.tv-device) .hint { display:none; }
  html:not(.tv-device) .lock-title { font-size:4rem; }
  html:not(.tv-device) .lock-desc { font-size:2rem; overflow-wrap:break-word; max-width:100%; }
  html:not(.tv-device) .toast { max-width:90%; white-space:normal; font-size:2rem; bottom:3rem; }
  html:not(.tv-device) .lock-wrap { padding:3rem 0; }
}
@media (max-width:600px) {
  html:not(.tv-device) .option { width:100%; margin:0 0 1.5rem; }
  html:not(.tv-device) .lock-actions { flex-direction:column; }
  html:not(.tv-device) .lock-actions .btn { margin:0 0 2rem; }
  html:not(.tv-device) .brand-text { font-size:2.5rem; }
  html:not(.tv-device) .pill { font-size:1.7rem; }
}

html:not(.tv-device) { font-size:9px; }
html:not(.tv-device) body { background:#f8f9f6; color:#28322e; overflow:auto; }
html:not(.tv-device) .bg { background:#f8f9f6; }
html:not(.tv-device) .glow,html:not(.tv-device) .grain { display:none; }
html:not(.tv-device) .topbar { height:auto; min-height:96px; max-width:1200px; margin:auto; padding:24px 40px; }
html:not(.tv-device) .brand-text { color:#29332f; font-size:22px; font-weight:650; }
html:not(.tv-device) .logo { width:30px;height:30px; background:#f3a74e; border-radius:10px; }
html:not(.tv-device) .logo i { border-left-color:#fff; }
html:not(.tv-device) .topright { margin:0; }
html:not(.tv-device) .pill { border:0;background:#eff1eb;color:#7a867f;font-size:13px;padding:9px 15px; }
html:not(.tv-device) .clock { display:none; }
html:not(.tv-device) #stage { max-width:1100px;margin:auto;padding:16px 40px 48px;height:auto;min-height:calc(100vh - 96px); }
html:not(.tv-device) .screen { min-height:0;height:auto; }
html:not(.tv-device) .quiz-wrap { height:auto;min-height:600px; padding:36px 44px;background:#fff;border:1px solid #edf0e9;border-radius:28px;box-shadow:0 10px 44px rgba(54,71,50,.035);justify-content:flex-start; }
html:not(.tv-device) .quiz-head { position:relative;margin:0 0 48px; }
html:not(.tv-device) .crumb-main { font-size:14px;color:#879385;letter-spacing:1px; }
html:not(.tv-device) .counter { font-size:14px;color:#a3aba3; }
html:not(.tv-device) .counter b { color:#303a33;font-size:22px; }
html:not(.tv-device) .question { font-size:32px;font-weight:600;color:#26312b;line-height:1.8;letter-spacing:0;margin:0 0 44px;max-width:100%; }
html:not(.tv-device) .options { width:100%; }
html:not(.tv-device) .option { background:#f9faf7;color:#384239;font-size:19px;font-weight:500;border:1px solid #edf0e8;border-radius:16px;padding:20px 24px;min-height:80px;margin-bottom:16px; }
html:not(.tv-device) .option .letter { width:34px;height:34px;line-height:34px;margin-right:18px;font-size:14px;color:#929d8b;background:#edf1e8;border-radius:11px; }
html:not(.tv-device) .option.focused,html:not(.tv-device) .option.selected { transform:none;box-shadow:none;background:#fff7ec;border-color:#f3bd76; }
html:not(.tv-device) .option.focused .letter,html:not(.tv-device) .option.selected .letter { background:#f7dfbd;color:#925d20; }
html:not(.tv-device) .option.right { background:#eff7ed;border-color:#a9c7a0; }
html:not(.tv-device) .option.wrong { background:#fff3ed;border-color:#e4b6a6; }
html:not(.tv-device) .quiz-foot { position:relative;margin:30px 0 0; }
html:not(.tv-device) .hint { display:none; }
html:not(.tv-device) .pool-status { margin-top:24px;font-size:14px;color:#b37d3a; }
html:not(.tv-device) .btn { font-size:16px;padding:14px 24px;font-weight:500;border-radius:14px;background:#f1f3ee;color:#6b7768;border:0;box-shadow:none; }
html:not(.tv-device) .btn-primary { background:#edaa5a;color:#fff; }
html:not(.tv-device) .btn.focused { transform:none;box-shadow:0 0 0 3px #f9e6ce; }
html:not(.tv-device) .written-answer { display:block;resize:vertical;min-height:170px;border:1px solid #e6ece0;border-radius:16px;padding:20px;font-size:20px;line-height:1.8;background:#fcfdfb;color:#2f3b31;font-family:inherit; }
html:not(.tv-device) .written-answer:focus { outline:none;border-color:#e5bb87; }
html:not(.tv-device) .answer-submit { margin:28px 0 0 auto;min-width:170px; }
.input-tools { display:flex;width:100%;gap:12px;margin-top:8px; }
.input-tools .btn { margin-right:0; }
.drawing-preview { display:block;width:100%;max-height:300px;object-fit:contain;background:white;border:1px solid #e7ebe2;border-radius:12px;margin-top:16px; }
html:not(.tv-device) .lock-wrap { min-height:65vh;padding:48px 16px; }
html:not(.tv-device) .lock-title { color:#2e3a31;font-size:36px;font-weight:600; }
html:not(.tv-device) .lock-desc { color:#8b9589;font-size:18px;line-height:1.8; }
html:not(.tv-device) .lock-desc b { color:#657660; }
html:not(.tv-device) .lock-badge { color:#d8a465;font-size:54px; }
html:not(.tv-device) .lock-badge:before { display:none; }
html:not(.tv-device) .lock-note { font-size:12px;color:#a1aa9d; }
html:not(.tv-device) .toast { background:#fffaf2;border:1px solid #ebdfce;color:#755d3f;font-size:16px;box-shadow:0 8px 30px #d6d1c340;max-width:85%;white-space:normal; }
html:not(.tv-device) .qr-box { box-shadow:none;border:1px solid #edece6; }
.katex-display { overflow-x:auto;overflow-y:hidden;padding:12px 0; }
@media (max-width:600px) {
  html:not(.tv-device) .topbar { padding:20px;min-height:80px; }
  html:not(.tv-device) .brand-text { font-size:20px; }
  html:not(.tv-device) #stage { padding:4px 16px 32px; }
  html:not(.tv-device) .quiz-wrap { padding:28px 22px;min-height:65vh;border-radius:22px; }
  html:not(.tv-device) .quiz-head { margin-bottom:30px; }
  html:not(.tv-device) .question { font-size:25px;margin-bottom:30px; }
  html:not(.tv-device) .option { width:100%;margin-right:0;font-size:17px;padding:16px;min-height:66px; }
  html:not(.tv-device) .pill { font-size:11px;padding:7px 10px; }
  html:not(.tv-device) .lock-title { font-size:28px; }
  html:not(.tv-device) .input-tools .btn { font-size:14px;padding:12px 16px; }
}

.tv-device .glow,.tv-device .grain{display:none}.tv-device .bg{background:#08080a}

#lockDesc{white-space:pre-line;max-height:32vh;overflow-y:auto}

/* ---- 遥控器体验补充 ---- */
/* 电视 GPU 较弱：关闭背景光晕的循环动画 */
html.tv-device .glow { -webkit-animation: none; animation: none; }
/* 长题干 / 长选项自动缩小，避免在固定高度的电视画面里被裁掉 */
.question.long { font-size: 4.4rem; line-height: 1.35; margin-bottom: 3.6rem; }
.question.longer { font-size: 3.4rem; line-height: 1.45; margin-bottom: 3rem; }
.options.wordy .option { font-size: 2.5rem; padding: 2.2rem 2.8rem; }
.options.many .option { padding: 1.8rem 2.6rem; margin-bottom: 1.6rem; }
.options.many .option .letter { width: 4.2rem; height: 4.2rem; line-height: 4.2rem; }
/* 遥控器选中输入框 / 更新提示时要有明显焦点 */
.written-answer.focusable { cursor: default; border-color: #3A3A42; }
.written-answer.focused { border-color: #FFB020; -webkit-box-shadow: 0 0 0 .45rem rgba(255,176,32,.32); box-shadow: 0 0 0 .45rem rgba(255,176,32,.32); }
.update-btn.focused, .update-close.focused { -webkit-box-shadow: 0 0 0 .35rem rgba(255,176,32,.55); box-shadow: 0 0 0 .35rem rgba(255,176,32,.55); outline: none; }
.update-close.focused { background: rgba(255,176,32,.25); color: #fff; }
#screen-pair .lock-desc { margin-bottom: 3.4rem; }
#screen-pair .lock-actions .btn { padding: 1.8rem 3.6rem; }
html.tv-device .hint { display: -webkit-flex; display: flex; }

/* ---- 答题反馈条（参考多邻国：答完在底部给出结果，孩子按“继续”进入下一题） ---- */
.feedback {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  display: none; -webkit-align-items: center; align-items: center;
  padding: 3rem 7rem 3.4rem; border-top: .4rem solid #33D17A; background: #0F1F17;
  -webkit-animation: fbUp .26s cubic-bezier(.22,.61,.36,1); animation: fbUp .26s cubic-bezier(.22,.61,.36,1);
}
.feedback.show { display: -webkit-flex; display: flex; }
.feedback.is-wrong { border-top-color: #F2545B; background: #24100F; }
@-webkit-keyframes fbUp { from { -webkit-transform: translate3d(0,100%,0); } to { -webkit-transform: none; } }
@keyframes fbUp { from { transform: translate3d(0,100%,0); } to { transform: none; } }
.fb-icon { -webkit-flex-shrink: 0; flex-shrink: 0; width: 7.2rem; height: 7.2rem; margin-right: 3rem; border-radius: 50%; text-align: center; line-height: 7.2rem;
  font-size: 4.2rem; font-weight: 800; color: #06210F; background: #33D17A; }
.is-wrong .fb-icon { background: #F2545B; color: #2A0507; }
.fb-body { -webkit-flex: 1; flex: 1; min-width: 0; }
.fb-title { font-size: 3.6rem; font-weight: 800; color: #7BE3A4; }
.is-wrong .fb-title { color: #FF9A9E; }
.fb-answer { margin-top: 1rem; font-size: 2.6rem; font-weight: 700; color: #F2F2F4; }
.fb-tip { margin-top: .8rem; font-size: 2rem; line-height: 1.5; color: #B9B9C1; max-height: 6rem; overflow: hidden; }
.fb-answer:empty, .fb-tip:empty { display: none; }
.feedback .btn { -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 3rem; min-width: 22rem; font-size: 2.6rem; }
.feedback.is-right .btn-primary { background: #33D17A; color: #06210F; -webkit-box-shadow: none; box-shadow: none; }
.btn-danger { background: #F2545B; color: #2A0507; border-color: transparent; }
.feedback .btn.focused { -webkit-box-shadow: 0 0 0 .45rem rgba(255,255,255,.85); box-shadow: 0 0 0 .45rem rgba(255,255,255,.85); }
.option.answered { opacity: .55; }
.option.answered.right, .option.answered.wrong { opacity: 1; }
html:not(.tv-device) .feedback { padding: 18px 24px 22px; border-top-width: 3px; background: #effaf0; }
html:not(.tv-device) .feedback.is-wrong { background: #fff1ee; }
html:not(.tv-device) .fb-icon { width: 46px; height: 46px; line-height: 46px; font-size: 26px; margin-right: 16px; }
html:not(.tv-device) .fb-title { font-size: 20px; color: #2f8a52; }
html:not(.tv-device) .is-wrong .fb-title { color: #c4473f; }
html:not(.tv-device) .fb-answer { font-size: 16px; color: #303a33; margin-top: 4px; }
html:not(.tv-device) .fb-tip { font-size: 14px; color: #6b7768; max-height: none; }
html:not(.tv-device) .feedback .btn { min-width: 112px; font-size: 16px; margin-left: 16px; padding: 14px 22px; }
@media (max-width:600px) { html:not(.tv-device) .feedback { -webkit-flex-wrap: wrap; flex-wrap: wrap; } html:not(.tv-device) .feedback .btn { width: 100%; margin: 14px 0 0; } }


/* =====================================================================
 * 电视界面（参考 Apple TV / Netflix 的遥控器交互）
 * - 未选中：低调的半透明灰；选中：白色卡片“浮起”+ 放大 + 阴影（深色）/ 深色反白（浅色）
 * - 大字号、宽安全边距、只用系统语义色（绿 = 对，红 = 错，蓝 = 已选）
 * - 不使用 CSS 变量，旧电视 WebView 也能得到同样的效果
 * 深色为默认；html[data-mode=light] 为浅色
 * ===================================================================== */
html.tv-device body { background: #141414; color: #E8E8E8; font-family: "SF Pro Display", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
html.tv-device .bg { background: #141414; background: -webkit-radial-gradient(50% -20%, ellipse, #242424 0%, #141414 60%); background: radial-gradient(ellipse at 50% -20%, #242424 0%, #141414 60%); }
html.tv-device .glow, html.tv-device .grain { display: none; }

/* 顶栏 */
html.tv-device .topbar { height: 10rem; padding: 0 9rem; }
html.tv-device .logo { width: 3.6rem; height: 3.6rem; border-radius: 1rem; background: #E8E8E8; }
html.tv-device .logo i { border-left-color: #141414; }
html.tv-device .brand-text { font-size: 2.2rem; font-weight: 600; color: #E8E8E8; letter-spacing: 0; }
html.tv-device .pill { font-size: 1.8rem; color: #A3A3A3; background: rgba(255,255,255,.08); border: 0; padding: 1rem 2.2rem; }
html.tv-device .clock { font-size: 2.2rem; font-weight: 500; color: #A3A3A3; }
html.tv-device #stage { height: calc(100vh - 10rem); padding: 1rem 9rem 7rem; }

/* 题目 */
html.tv-device .crumb-main { font-size: 1.9rem; font-weight: 500; color: #A3A3A3; letter-spacing: .02em; }
html.tv-device .counter { font-size: 1.9rem; color: #6E6E6E; }
html.tv-device .counter b { font-size: 2.8rem; font-weight: 700; color: #E8E8E8; }
html.tv-device .question { font-size: 6rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #E8E8E8; margin-bottom: 5rem; }
html.tv-device .question.long { font-size: 4.6rem; }
html.tv-device .question.longer { font-size: 3.6rem; }

html.tv-device .option { width: 48.5%; margin: 0 3% 2.4rem 0; padding: 3rem 3.4rem; border-radius: 2.2rem; border: 0; background: rgba(255,255,255,.09); background: #222222; color: #E8E8E8; font-size: 3.2rem; font-weight: 600;
  -webkit-box-shadow: none; box-shadow: none; -webkit-transform: none; transform: none;
  -webkit-transition: -webkit-transform .22s cubic-bezier(.2,.8,.2,1), background .18s ease, color .18s ease, box-shadow .22s ease;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .18s ease, color .18s ease, box-shadow .22s ease; }
html.tv-device .option:nth-child(2n) { margin-right: 0; }
html.tv-device .option .letter { width: 5.4rem; height: 5.4rem; line-height: 5.4rem; border-radius: 50%; margin-right: 2.6rem; font-size: 2.2rem; font-weight: 700; color: #A3A3A3; background: rgba(255,255,255,.1); }
html.tv-device .option.focused { background: #E8E8E8; color: #141414; -webkit-transform: scale(1.05); transform: scale(1.05);
  -webkit-box-shadow: 0 2.6rem 6rem rgba(0,0,0,.55); box-shadow: 0 2.6rem 6rem rgba(0,0,0,.55); }
html.tv-device .option.focused .letter { background: #141414; color: #E8E8E8; }
html.tv-device .option.selected { -webkit-box-shadow: inset 0 0 0 .4rem #AEB4BB; box-shadow: inset 0 0 0 .4rem #AEB4BB; }
html.tv-device .option.selected .letter { background: #AEB4BB; color: #FFFFFF; }
html.tv-device .option.selected.focused { -webkit-box-shadow: inset 0 0 0 .4rem #AEB4BB, 0 2.6rem 6rem rgba(0,0,0,.55); box-shadow: inset 0 0 0 .4rem #AEB4BB, 0 2.6rem 6rem rgba(0,0,0,.55); }
html.tv-device .option.right { background: #1E2820; color: #E8E8E8; -webkit-box-shadow: inset 0 0 0 .4rem #86B98C; box-shadow: inset 0 0 0 .4rem #86B98C; -webkit-transform: none; transform: none; }
html.tv-device .option.right .letter { background: #86B98C; color: #16251A; }
html.tv-device .option.wrong { background: #2E201D; color: #E8E8E8; -webkit-box-shadow: inset 0 0 0 .4rem #D98276; box-shadow: inset 0 0 0 .4rem #D98276; -webkit-transform: none; transform: none; }
html.tv-device .option.wrong .letter { background: #D98276; color: #2A1714; }
html.tv-device .option.answered { opacity: .4; }
html.tv-device .option.answered.right, html.tv-device .option.answered.wrong { opacity: 1; }
html.tv-device .pool-status { color: #A3A3A3; font-size: 2rem; margin-top: 1.4rem; }

/* 按钮：未选中是灰色胶囊，选中变白并放大 */
html.tv-device .btn { padding: 2rem 4.4rem; margin-right: 2.4rem; border: 0; border-radius: 1.6rem; font-size: 2.4rem; font-weight: 600; color: #E8E8E8; background: #2E2E2E;
  -webkit-box-shadow: none; box-shadow: none;
  -webkit-transition: -webkit-transform .2s cubic-bezier(.2,.8,.2,1), background .18s ease, color .18s ease; transition: transform .2s cubic-bezier(.2,.8,.2,1), background .18s ease, color .18s ease; }
html.tv-device .btn-primary { background: #333333; }
html.tv-device .btn.focused, html.tv-device .btn-ghost.focused { background: #E8E8E8; color: #141414; -webkit-transform: scale(1.06); transform: scale(1.06);
  -webkit-box-shadow: 0 1.8rem 4.4rem rgba(0,0,0,.55); box-shadow: 0 1.8rem 4.4rem rgba(0,0,0,.55); }

/* 底部按键提示 */
html.tv-device .quiz-foot { bottom: -2rem; }
html.tv-device .hint { font-size: 1.7rem; color: #6E6E6E; }
html.tv-device .kbd { min-width: 0; padding: .5rem 1.1rem; margin-right: .8rem; font-size: 1.5rem; color: #A3A3A3; background: rgba(255,255,255,.08); border: 0; border-radius: .8rem; }
html.tv-device .hint .hint-text { margin-right: 2.8rem; }

/* 锁定 / 完成 / 等待批改 */
html.tv-device .lock-wrap { max-width: 120rem; }
html.tv-device .lock-badge { width: 14rem; height: 14rem; line-height: 14rem; margin-bottom: 4rem; color: #E8E8E8; border-radius: 50%; background: rgba(255,255,255,.08); background: #222222; }
html.tv-device .lock-badge:before { display: none; }
html.tv-device .lock-badge svg { width: 7rem; height: 7rem; margin-top: 0; vertical-align: middle; }
html.tv-device .lock-title { font-size: 6.4rem; font-weight: 700; letter-spacing: -.015em; color: #E8E8E8; margin-bottom: 2rem; }
html.tv-device .lock-title em { background: none; -webkit-text-fill-color: currentColor; color: #E8E8E8; }
html.tv-device .lock-desc { font-size: 2.6rem; color: #A3A3A3; margin-bottom: 5rem; }
html.tv-device .lock-desc b { color: #E8E8E8; font-weight: 600; }
html.tv-device .lock-note { font-size: 1.9rem; color: #6E6E6E; margin-top: 4.6rem; }

/* 连接家长手机（参考 Netflix“用手机登录”页：左边步骤，右边二维码） */
.pair-wrap { width: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.pair-copy { -webkit-flex: 1; flex: 1; min-width: 0; padding-right: 8rem; }
.pair-eyebrow { font-size: 2rem; font-weight: 600; color: #A3A3A3; letter-spacing: .04em; margin: 0 0 1.6rem; }
.pair-title { font-size: 6rem; font-weight: 700; line-height: 1.2; margin: 0 0 4.4rem; color: #E8E8E8; }
.pair-steps { list-style: none; margin: 0 0 5rem; padding: 0; }
.pair-steps li { position: relative; padding-left: 7rem; margin-bottom: 3rem; font-size: 2.6rem; line-height: 1.5; color: #CFCFCF; min-height: 4.6rem; }
.pair-steps li b { position: absolute; left: 0; top: -.2rem; width: 4.6rem; height: 4.6rem; line-height: 4.6rem; border-radius: 50%; text-align: center; font-size: 2.2rem; background: rgba(255,255,255,.1); background: #2E2E2E; color: #E8E8E8; }
.pair-url { display: inline-block; margin-top: 1rem; padding: .8rem 1.6rem; border-radius: 1rem; background: #222222; color: #E8E8E8; font-weight: 600; font-size: 2.4rem; letter-spacing: .01em; }
.pair-wrap .lock-actions { -webkit-justify-content: flex-start; justify-content: flex-start; }
html.tv-device .qr-box { width: 46rem; height: 46rem; padding: 3rem; border-radius: 3.2rem; background: #FFFFFF; margin: 0; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-box-shadow: 0 3rem 8rem rgba(0,0,0,.5); box-shadow: 0 3rem 8rem rgba(0,0,0,.5); }
html.tv-device .qr-box img, html.tv-device .qr-box canvas { width: 40rem; height: 40rem; }
html:not(.tv-device) .pair-wrap { display: block; text-align: center; }
html:not(.tv-device) .pair-copy { padding: 0; }
html:not(.tv-device) .pair-title { font-size: 26px; color: #26312b; margin-bottom: 20px; }
html:not(.tv-device) .pair-eyebrow { font-size: 13px; color: #879385; }
html:not(.tv-device) .pair-steps { text-align: left; display: inline-block; margin-bottom: 24px; }
html:not(.tv-device) .pair-steps li { font-size: 15px; padding-left: 40px; margin-bottom: 14px; min-height: 28px; color: #4b5650; }
html:not(.tv-device) .pair-steps li b { width: 28px; height: 28px; line-height: 28px; font-size: 13px; background: #eef1eb; color: #4b5650; }
html:not(.tv-device) .pair-url { font-size: 14px; background: #eef1eb; color: #26312b; padding: 4px 10px; }
html:not(.tv-device) .pair-wrap .qr-box { margin: 0 auto 24px; }
html:not(.tv-device) .pair-wrap .lock-actions { -webkit-justify-content: center; justify-content: center; }
body.on-pair .pill { display: none; }

/* 答题反馈：底部半透明面板 */
html.tv-device .feedback { padding: 3.4rem 9rem 4rem; border-top: 0; background: #1C1C1C; -webkit-box-shadow: 0 -2rem 6rem rgba(0,0,0,.5); box-shadow: 0 -2rem 6rem rgba(0,0,0,.5); }
html.tv-device .feedback.is-wrong { background: #1C1C1C; }
html.tv-device .fb-icon { width: 7.6rem; height: 7.6rem; line-height: 7.6rem; background: #86B98C; color: #16251A; }
html.tv-device .is-wrong .fb-icon { background: #D98276; color: #2A1714; }
html.tv-device .fb-title { font-size: 3.8rem; font-weight: 700; color: #86B98C; }
html.tv-device .is-wrong .fb-title { color: #D98276; }
html.tv-device .fb-answer { font-size: 2.8rem; font-weight: 600; color: #E8E8E8; }
html.tv-device .fb-tip { font-size: 2.1rem; color: #A3A3A3; }
html.tv-device .feedback .btn, html.tv-device .feedback.is-right .btn-primary, html.tv-device .btn-danger { background: #333333; color: #E8E8E8; min-width: 24rem; }
html.tv-device .feedback .btn.focused { background: #E8E8E8; color: #141414; }

/* 输入框、提示、更新卡片 */
html.tv-device .written-answer { background: #222222; color: #E8E8E8; border: 0; border-radius: 2rem; padding: 3rem; font-size: 3rem; -webkit-box-shadow: none; box-shadow: none; }
html.tv-device .written-answer.focused { background: #E8E8E8; color: #141414; -webkit-box-shadow: 0 2.4rem 5rem rgba(0,0,0,.5); box-shadow: 0 2.4rem 5rem rgba(0,0,0,.5); }
html.tv-device .written-answer::-webkit-input-placeholder { color: #8E8E93; }
html.tv-device .toast { background: #2E2E2E; border: 0; color: #E8E8E8; font-size: 2.2rem; border-radius: 1.6rem; padding: 1.8rem 3.4rem; }
html.tv-device .update-tip { right: 9rem; top: 11rem; background: #222222; border: 0; border-radius: 2rem; padding: 1.6rem 1.6rem 1.6rem 2.6rem; }
html.tv-device .update-text { color: #E8E8E8; font-size: 2rem; }
html.tv-device .update-btn { background: #333333; color: #E8E8E8; padding: 1.1rem 2.4rem; font-size: 1.9rem; }
html.tv-device .update-close { background: #2E2E2E; color: #A3A3A3; }
html.tv-device .update-btn.focused, html.tv-device .update-close.focused { background: #E8E8E8; color: #141414; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: scale(1.08); transform: scale(1.08); }

/* ---------- 浅色模式 ---------- */
html.tv-device[data-mode="light"] body, html.tv-device[data-mode="light"] .bg { background: #F4F4F4; color: #1E1E1E; }
html.tv-device[data-mode="light"] .bg { background: -webkit-radial-gradient(50% -20%, ellipse, #FFFFFF 0%, #F4F4F4 60%); background: radial-gradient(ellipse at 50% -20%, #FFFFFF 0%, #F4F4F4 60%); }
html.tv-device[data-mode="light"] .logo { background: #1E1E1E; }
html.tv-device[data-mode="light"] .logo i { border-left-color: #F4F4F4; }
html.tv-device[data-mode="light"] .brand-text, html.tv-device[data-mode="light"] .counter b, html.tv-device[data-mode="light"] .question,
html.tv-device[data-mode="light"] .lock-title, html.tv-device[data-mode="light"] .lock-title em, html.tv-device[data-mode="light"] .lock-desc b,
html.tv-device[data-mode="light"] .pair-title, html.tv-device[data-mode="light"] .fb-answer, html.tv-device[data-mode="light"] .update-text { color: #1E1E1E; }
html.tv-device[data-mode="light"] .pill, html.tv-device[data-mode="light"] .kbd { background: rgba(0,0,0,.06); color: #666666; }
html.tv-device[data-mode="light"] .clock, html.tv-device[data-mode="light"] .crumb-main, html.tv-device[data-mode="light"] .lock-desc,
html.tv-device[data-mode="light"] .pair-eyebrow, html.tv-device[data-mode="light"] .fb-tip, html.tv-device[data-mode="light"] .pool-status { color: #666666; }
html.tv-device[data-mode="light"] .counter, html.tv-device[data-mode="light"] .hint, html.tv-device[data-mode="light"] .lock-note { color: #999999; }
html.tv-device[data-mode="light"] .option, html.tv-device[data-mode="light"] .written-answer, html.tv-device[data-mode="light"] .lock-badge,
html.tv-device[data-mode="light"] .update-tip, html.tv-device[data-mode="light"] .pair-url { background: #FFFFFF; color: #1E1E1E; -webkit-box-shadow: 0 .6rem 2rem rgba(0,0,0,.06); box-shadow: 0 .6rem 2rem rgba(0,0,0,.06); }
html.tv-device[data-mode="light"] .option .letter, html.tv-device[data-mode="light"] .pair-steps li b { background: #F4F4F4; color: #666666; }
html.tv-device[data-mode="light"] .pair-steps li { color: #444444; }
html.tv-device[data-mode="light"] .option.focused, html.tv-device[data-mode="light"] .written-answer.focused { background: #1E1E1E; color: #FFFFFF; -webkit-box-shadow: 0 2.6rem 5rem rgba(0,0,0,.22); box-shadow: 0 2.6rem 5rem rgba(0,0,0,.22); }
html.tv-device[data-mode="light"] .option.focused .letter { background: #FFFFFF; color: #1E1E1E; }
html.tv-device[data-mode="light"] .option.right { background: #EEF4EC; color: #1E1E1E; }
html.tv-device[data-mode="light"] .option.wrong { background: #F8ECE8; color: #1E1E1E; }
html.tv-device[data-mode="light"] .lock-badge { color: #1E1E1E; }
html.tv-device[data-mode="light"] .btn, html.tv-device[data-mode="light"] .btn-primary, html.tv-device[data-mode="light"] .feedback .btn,
html.tv-device[data-mode="light"] .update-btn, html.tv-device[data-mode="light"] .update-close { background: #E9E9E9; color: #1E1E1E; }
html.tv-device[data-mode="light"] .btn.focused, html.tv-device[data-mode="light"] .feedback .btn.focused, html.tv-device[data-mode="light"] .update-btn.focused,
html.tv-device[data-mode="light"] .update-close.focused { background: #1E1E1E; color: #FFFFFF; -webkit-box-shadow: 0 1.8rem 4rem rgba(0,0,0,.2); box-shadow: 0 1.8rem 4rem rgba(0,0,0,.2); }
html.tv-device[data-mode="light"] .feedback { background: #FFFFFF; -webkit-box-shadow: 0 -1.4rem 4rem rgba(0,0,0,.08); box-shadow: 0 -1.4rem 4rem rgba(0,0,0,.08); }
html.tv-device[data-mode="light"] .fb-title { color: #4E8A57; }
html.tv-device[data-mode="light"] .is-wrong .fb-title { color: #B8574B; }
html.tv-device[data-mode="light"] .toast { background: #1E1E1E; color: #FFFFFF; }
html.tv-device[data-mode="light"] .qr-box { -webkit-box-shadow: 0 2rem 6rem rgba(0,0,0,.12); box-shadow: 0 2rem 6rem rgba(0,0,0,.12); }
html:not(.tv-device) .lock-badge svg { width: 56px; height: 56px; margin-top: 0; }


/* ---------- 焦点（方案 B，参考 Netflix）：底色几乎不变，选中项加一圈柔和的浅灰描边并放大 5%，文字颜色不变 ---------- */
html.tv-device .logo { background: #B3B3B3; }
html.tv-device .logo i { border-left-color: #141414; }
html.tv-device .lock-badge, html.tv-device .pair-steps li b { color: #CFCFCF; }

html.tv-device .option, html.tv-device .written-answer { background: #222222; color: #E8E8E8; }
html.tv-device .option .letter { background: #2E2E2E; color: #A3A3A3; }
html.tv-device .btn, html.tv-device .btn-primary, html.tv-device .btn-ghost, html.tv-device .feedback .btn, html.tv-device .update-btn, html.tv-device .update-close { background: #2A2A2A; color: #E8E8E8; }

html.tv-device .option.focused, html.tv-device .written-answer.focused,
html.tv-device .btn.focused, html.tv-device .btn-ghost.focused, html.tv-device .feedback .btn.focused, html.tv-device .update-btn.focused, html.tv-device .update-close.focused {
  background: #2A2A2A; color: #F0F0F0; -webkit-transform: scale(1.05); transform: scale(1.05);
  -webkit-box-shadow: inset 0 0 0 .22rem rgba(229,229,229,.72); box-shadow: inset 0 0 0 .22rem rgba(229,229,229,.72); }
html.tv-device .option.focused .letter { background: #3A3A3A; color: #F0F0F0; }
html.tv-device .option.selected { -webkit-box-shadow: inset 0 0 0 .22rem rgba(229,229,229,.35); box-shadow: inset 0 0 0 .22rem rgba(229,229,229,.35); }
html.tv-device .option.selected .letter { background: #8A8A8A; color: #141414; }
html.tv-device .option.selected.focused { -webkit-box-shadow: inset 0 0 0 .22rem rgba(229,229,229,.72); box-shadow: inset 0 0 0 .22rem rgba(229,229,229,.72); }

html.tv-device[data-mode="light"] .logo { background: #555555; }
html.tv-device[data-mode="light"] .logo i { border-left-color: #F4F4F4; }
html.tv-device[data-mode="light"] .lock-badge, html.tv-device[data-mode="light"] .pair-steps li b { color: #555555; }
html.tv-device[data-mode="light"] .pair-steps li b { background: #FFFFFF; }
html.tv-device[data-mode="light"] .option, html.tv-device[data-mode="light"] .written-answer { background: #FFFFFF; color: #1E1E1E; -webkit-box-shadow: none; box-shadow: none; }
html.tv-device[data-mode="light"] .option .letter { background: #EFEFEF; color: #666666; }
html.tv-device[data-mode="light"] .btn, html.tv-device[data-mode="light"] .btn-primary, html.tv-device[data-mode="light"] .btn-ghost, html.tv-device[data-mode="light"] .feedback .btn,
html.tv-device[data-mode="light"] .update-btn, html.tv-device[data-mode="light"] .update-close { background: #E9E9E9; color: #1E1E1E; }
html.tv-device[data-mode="light"] .option.focused, html.tv-device[data-mode="light"] .written-answer.focused,
html.tv-device[data-mode="light"] .btn.focused, html.tv-device[data-mode="light"] .btn-ghost.focused, html.tv-device[data-mode="light"] .feedback .btn.focused, html.tv-device[data-mode="light"] .update-btn.focused, html.tv-device[data-mode="light"] .update-close.focused {
  background: #FFFFFF; color: #1E1E1E;
  -webkit-box-shadow: inset 0 0 0 .22rem rgba(30,30,30,.5), 0 1.2rem 3rem rgba(0,0,0,.08); box-shadow: inset 0 0 0 .22rem rgba(30,30,30,.5), 0 1.2rem 3rem rgba(0,0,0,.08); }
html.tv-device[data-mode="light"] .option.focused .letter { background: #E4E4E4; color: #1E1E1E; }
html.tv-device[data-mode="light"] .option.selected .letter { background: #666666; color: #FFFFFF; }
html.tv-device[data-mode="light"] .toast { background: #333333; color: #F4F4F4; }

/* =====================================================================
 * 手机 / 平板学习页（与电视方案 B 同一套中性灰配色），支持深色 / 浅色
 * 手机 WebView 都较新，这里使用 CSS 变量
 * ===================================================================== */
html:not(.tv-device) {
  --m-bg: #F4F4F4; --m-surface: #FFFFFF; --m-surface-2: #E9E9E9; --m-line: rgba(0,0,0,.08);
  --m-text: #1E1E1E; --m-text-2: #666666; --m-text-3: #999999;
  --m-ok: #4E8A57; --m-ok-bg: #EEF4EC; --m-bad: #B8574B; --m-bad-bg: #F8ECE8;
  --m-primary: #1E1E1E; --m-primary-ink: #FFFFFF; --m-ring: rgba(30,30,30,.5);
}
html:not(.tv-device)[data-mode="dark"] {
  --m-bg: #141414; --m-surface: #222222; --m-surface-2: #2E2E2E; --m-line: rgba(255,255,255,.08);
  --m-text: #E8E8E8; --m-text-2: #A3A3A3; --m-text-3: #6E6E6E;
  --m-ok: #86B98C; --m-ok-bg: #1E2820; --m-bad: #D98276; --m-bad-bg: #2E201D;
  --m-primary: #E8E8E8; --m-primary-ink: #141414; --m-ring: rgba(229,229,229,.72);
  color-scheme: dark;
}
html:not(.tv-device) body, html:not(.tv-device) .bg { background: var(--m-bg); color: var(--m-text); font-family: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html:not(.tv-device) .topbar { padding: 18px 20px 8px; min-height: 0; }
html:not(.tv-device) .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--m-primary); }
html:not(.tv-device) .logo i { border-left-color: var(--m-primary-ink); }
html:not(.tv-device) .brand-text { color: var(--m-text); font-size: 19px; font-weight: 650; }
html:not(.tv-device) .pill { background: var(--m-surface); color: var(--m-text-2); border: 1px solid var(--m-line); }
html:not(.tv-device) #stage { padding: 8px 20px 140px; }
html:not(.tv-device) .quiz-wrap { background: transparent; border: 0; box-shadow: none; padding: 8px 0 0; min-height: 0; }
html:not(.tv-device) .crumb-main, html:not(.tv-device) .counter { color: var(--m-text-2); }
html:not(.tv-device) .counter b { color: var(--m-text); }
html:not(.tv-device) .question { color: var(--m-text); font-size: 28px; line-height: 1.5; margin: 0 0 28px; }
html:not(.tv-device) .question.long { font-size: 23px; }
html:not(.tv-device) .question.longer { font-size: 19px; }
html:not(.tv-device) .option { background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); border-radius: 16px; min-height: 68px; padding: 16px 18px; margin-bottom: 12px; font-size: 18px; -webkit-transition: background .15s, box-shadow .15s; transition: background .15s, box-shadow .15s; }
html:not(.tv-device) .option .letter { background: var(--m-surface-2); color: var(--m-text-2); border-radius: 50%; }
html:not(.tv-device) .option:active, html:not(.tv-device) .option.focused { background: var(--m-surface); box-shadow: inset 0 0 0 2px var(--m-ring); border-color: transparent; }
html:not(.tv-device) .option.focused .letter { background: var(--m-surface-2); color: var(--m-text); }
html:not(.tv-device) .option.selected { box-shadow: inset 0 0 0 2px var(--m-ring); border-color: transparent; }
html:not(.tv-device) .option.selected .letter { background: var(--m-primary); color: var(--m-primary-ink); }
html:not(.tv-device) .option.right { background: var(--m-ok-bg); box-shadow: inset 0 0 0 2px var(--m-ok); border-color: transparent; }
html:not(.tv-device) .option.right .letter { background: var(--m-ok); color: var(--m-surface); }
html:not(.tv-device) .option.wrong { background: var(--m-bad-bg); box-shadow: inset 0 0 0 2px var(--m-bad); border-color: transparent; }
html:not(.tv-device) .option.wrong .letter { background: var(--m-bad); color: var(--m-surface); }
html:not(.tv-device) .option.answered { opacity: .45; }
html:not(.tv-device) .option.answered.right, html:not(.tv-device) .option.answered.wrong { opacity: 1; }
html:not(.tv-device) .pool-status { color: var(--m-text-2); }
html:not(.tv-device) .btn { background: var(--m-surface-2); color: var(--m-text); border: 0; border-radius: 14px; min-height: 48px; box-shadow: none; }
html:not(.tv-device) .btn-primary { background: var(--m-primary); color: var(--m-primary-ink); }
html:not(.tv-device) .btn.focused { box-shadow: inset 0 0 0 2px var(--m-ring); }
html:not(.tv-device) .written-answer { background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); }
html:not(.tv-device) .written-answer:focus { border-color: var(--m-ring); }
html:not(.tv-device) .lock-badge { color: var(--m-text-2); background: var(--m-surface); border-radius: 50%; width: 96px; height: 96px; line-height: 96px; }
html:not(.tv-device) .lock-badge:before { display: none; }
html:not(.tv-device) .lock-badge svg { width: 44px; height: 44px; vertical-align: middle; }
html:not(.tv-device) .lock-title, html:not(.tv-device) .lock-title em, html:not(.tv-device) .lock-desc b { color: var(--m-text); -webkit-text-fill-color: currentColor; background: none; }
html:not(.tv-device) .lock-desc { color: var(--m-text-2); }
html:not(.tv-device) .lock-note { color: var(--m-text-3); }
html:not(.tv-device) .feedback { background: var(--m-surface); border-top: 0; box-shadow: 0 -10px 30px rgba(0,0,0,.08); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
html:not(.tv-device) .feedback.is-wrong { background: var(--m-surface); }
html:not(.tv-device) .fb-icon { background: var(--m-ok); color: var(--m-surface); }
html:not(.tv-device) .is-wrong .fb-icon { background: var(--m-bad); }
html:not(.tv-device) .fb-title { color: var(--m-ok); }
html:not(.tv-device) .is-wrong .fb-title { color: var(--m-bad); }
html:not(.tv-device) .fb-answer { color: var(--m-text); }
html:not(.tv-device) .fb-tip { color: var(--m-text-2); }
html:not(.tv-device) .feedback .btn, html:not(.tv-device) .feedback.is-right .btn-primary, html:not(.tv-device) .btn-danger { background: var(--m-primary); color: var(--m-primary-ink); box-shadow: none; border: 0; }
html:not(.tv-device) .toast { background: var(--m-primary); color: var(--m-primary-ink); border: 0; }
html:not(.tv-device) .update-tip { background: var(--m-surface); border: 1px solid var(--m-line); }
html:not(.tv-device) .update-text { color: var(--m-text); }
html:not(.tv-device) .update-btn { background: var(--m-primary); color: var(--m-primary-ink); }
html:not(.tv-device) .update-close { background: var(--m-surface-2); color: var(--m-text-2); }
html:not(.tv-device) .pair-title { color: var(--m-text); }
html:not(.tv-device) .pair-eyebrow { color: var(--m-text-2); }
html:not(.tv-device) .pair-steps li { color: var(--m-text-2); }
html:not(.tv-device) .pair-steps li b, html:not(.tv-device) .pair-url { background: var(--m-surface); color: var(--m-text); }

/* =====================================================================
 * 对错配色（设计稿方案 2「淡雅色调」）：面板是接近白色的淡绿 / 淡红，标题和按钮用中等饱和度的绿 / 红
 * ===================================================================== */
html.tv-device .option.right { background: #1E2A23; color: #E8E8E8; -webkit-box-shadow: inset 0 0 0 .3rem #5DB07A; box-shadow: inset 0 0 0 .3rem #5DB07A; }
html.tv-device .option.right .letter { background: #5DB07A; color: #FFFFFF; }
html.tv-device .option.wrong { background: #2F2120; color: #E8E8E8; -webkit-box-shadow: inset 0 0 0 .3rem #E07870; box-shadow: inset 0 0 0 .3rem #E07870; }
html.tv-device .option.wrong .letter { background: #E07870; color: #FFFFFF; }
html.tv-device .feedback, html.tv-device .feedback.is-right { background: #1B2620; -webkit-box-shadow: none; box-shadow: none; }
html.tv-device .feedback.is-wrong { background: #2C1D1C; }
html.tv-device .fb-icon { background: #5DB07A; color: #FFFFFF; }
html.tv-device .is-wrong .fb-icon { background: #E07870; color: #FFFFFF; }
html.tv-device .fb-title { color: #7BC294; }
html.tv-device .is-wrong .fb-title { color: #EB8E87; }
html.tv-device .fb-answer { color: #E8E8E8; }
html.tv-device .feedback .btn, html.tv-device .feedback.is-right .btn-primary, html.tv-device .feedback .btn.focused { background: #5DB07A; color: #FFFFFF; }
html.tv-device .feedback.is-wrong .btn, html.tv-device .feedback .btn-danger, html.tv-device .feedback.is-wrong .btn.focused { background: #E07870; color: #FFFFFF; }
html.tv-device .feedback .btn.focused { -webkit-box-shadow: 0 0 0 .3rem #1B2620, 0 0 0 .55rem rgba(229,229,229,.72); box-shadow: 0 0 0 .3rem #1B2620, 0 0 0 .55rem rgba(229,229,229,.72); }
html.tv-device .feedback.is-wrong .btn.focused { -webkit-box-shadow: 0 0 0 .3rem #2C1D1C, 0 0 0 .55rem rgba(229,229,229,.72); box-shadow: 0 0 0 .3rem #2C1D1C, 0 0 0 .55rem rgba(229,229,229,.72); }

html.tv-device[data-mode="light"] .option.right { background: #F3F9F4; color: #1E1E1E; -webkit-box-shadow: inset 0 0 0 .3rem #3B9A5A; box-shadow: inset 0 0 0 .3rem #3B9A5A; }
html.tv-device[data-mode="light"] .option.right .letter { background: #3B9A5A; color: #FFFFFF; }
html.tv-device[data-mode="light"] .option.wrong { background: #FDF3F2; color: #1E1E1E; -webkit-box-shadow: inset 0 0 0 .3rem #D2544C; box-shadow: inset 0 0 0 .3rem #D2544C; }
html.tv-device[data-mode="light"] .option.wrong .letter { background: #D2544C; color: #FFFFFF; }
html.tv-device[data-mode="light"] .feedback, html.tv-device[data-mode="light"] .feedback.is-right { background: #EEF6F0; }
html.tv-device[data-mode="light"] .feedback.is-wrong { background: #FBEEEE; }
html.tv-device[data-mode="light"] .fb-icon { background: #3B9A5A; color: #FFFFFF; }
html.tv-device[data-mode="light"] .is-wrong .fb-icon { background: #D2544C; color: #FFFFFF; }
html.tv-device[data-mode="light"] .fb-title { color: #2F8A4E; }
html.tv-device[data-mode="light"] .is-wrong .fb-title { color: #C04840; }
html.tv-device[data-mode="light"] .fb-answer { color: #1E1E1E; }
html.tv-device[data-mode="light"] .feedback .btn, html.tv-device[data-mode="light"] .feedback .btn.focused { background: #3B9A5A; color: #FFFFFF; }
html.tv-device[data-mode="light"] .feedback.is-wrong .btn, html.tv-device[data-mode="light"] .feedback.is-wrong .btn.focused { background: #D2544C; color: #FFFFFF; }
html.tv-device[data-mode="light"] .feedback .btn.focused { -webkit-box-shadow: 0 0 0 .3rem #EEF6F0, 0 0 0 .55rem rgba(30,30,30,.5); box-shadow: 0 0 0 .3rem #EEF6F0, 0 0 0 .55rem rgba(30,30,30,.5); }
html.tv-device[data-mode="light"] .feedback.is-wrong .btn.focused { -webkit-box-shadow: 0 0 0 .3rem #FBEEEE, 0 0 0 .55rem rgba(30,30,30,.5); box-shadow: 0 0 0 .3rem #FBEEEE, 0 0 0 .55rem rgba(30,30,30,.5); }

/* 手机 / 平板 */
html:not(.tv-device) { --m-ok: #3B9A5A; --m-ok-strong: #2F8A4E; --m-ok-bg: #EEF6F0; --m-ok-opt: #F3F9F4; --m-ok-ink: #FFFFFF; --m-bad: #D2544C; --m-bad-strong: #C04840; --m-bad-bg: #FBEEEE; --m-bad-opt: #FDF3F2; --m-bad-ink: #FFFFFF; }
html:not(.tv-device)[data-mode="dark"] { --m-ok: #5DB07A; --m-ok-strong: #7BC294; --m-ok-bg: #1B2620; --m-ok-opt: #1E2A23; --m-ok-ink: #FFFFFF; --m-bad: #E07870; --m-bad-strong: #EB8E87; --m-bad-bg: #2C1D1C; --m-bad-opt: #2F2120; --m-bad-ink: #FFFFFF; }
html:not(.tv-device) .option.right { background: var(--m-ok-opt); box-shadow: inset 0 0 0 2px var(--m-ok); border-color: transparent; }
html:not(.tv-device) .option.right .letter { background: var(--m-ok); color: var(--m-ok-ink); }
html:not(.tv-device) .option.wrong { background: var(--m-bad-opt); box-shadow: inset 0 0 0 2px var(--m-bad); border-color: transparent; }
html:not(.tv-device) .option.wrong .letter { background: var(--m-bad); color: var(--m-bad-ink); }
html:not(.tv-device) .feedback, html:not(.tv-device) .feedback.is-right { background: var(--m-ok-bg); box-shadow: none; }
html:not(.tv-device) .feedback.is-wrong { background: var(--m-bad-bg); }
html:not(.tv-device) .fb-icon { background: var(--m-ok); color: var(--m-ok-ink); }
html:not(.tv-device) .is-wrong .fb-icon { background: var(--m-bad); color: var(--m-bad-ink); }
html:not(.tv-device) .fb-title { color: var(--m-ok-strong); }
html:not(.tv-device) .is-wrong .fb-title { color: var(--m-bad-strong); }
html:not(.tv-device) .feedback .btn, html:not(.tv-device) .feedback.is-right .btn-primary { background: var(--m-ok); color: var(--m-ok-ink); font-weight: 700; }
html:not(.tv-device) .feedback.is-wrong .btn, html:not(.tv-device) .btn-danger { background: var(--m-bad); color: var(--m-bad-ink); font-weight: 700; }

/* 平板（宽度 ≥ 900px）：放大字号和点按区域，内容整体下移，不再缩在左上角 */
@media (min-width: 900px) {
  html:not(.tv-device) .topbar { max-width: 1180px; padding: 28px 40px 8px; }
  html:not(.tv-device) #stage { max-width: 1180px; padding: 4vh 40px 180px; }
  html:not(.tv-device) .quiz-head { margin-bottom: 36px; }
  html:not(.tv-device) .crumb-main, html:not(.tv-device) .counter { font-size: 17px; }
  html:not(.tv-device) .counter b { font-size: 28px; }
  html:not(.tv-device) .question { font-size: 40px; margin-bottom: 40px; }
  html:not(.tv-device) .question.long { font-size: 32px; }
  html:not(.tv-device) .question.longer { font-size: 26px; }
  html:not(.tv-device) .options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  html:not(.tv-device) .option { width: auto; margin: 0; min-height: 96px; padding: 22px 26px; font-size: 24px; }
  html:not(.tv-device) .option .letter { width: 44px; height: 44px; line-height: 44px; font-size: 17px; margin-right: 20px; }
  html:not(.tv-device) .written-answer { grid-column: 1 / -1; font-size: 22px; min-height: 200px; }
  html:not(.tv-device) .input-tools, html:not(.tv-device) .answer-submit { grid-column: 1 / -1; }
  html:not(.tv-device) .btn { font-size: 18px; min-height: 56px; padding: 0 30px; }
  html:not(.tv-device) .feedback { padding: 22px max(40px, calc((100vw - 1100px) / 2)) 26px; }
  html:not(.tv-device) .fb-title { font-size: 24px; }
  html:not(.tv-device) .fb-answer { font-size: 19px; }
  html:not(.tv-device) .fb-tip { font-size: 16px; }
  html:not(.tv-device) .feedback .btn { min-width: 200px; }
}