/* 多米语音台样式 */
  :root {
    --bg: #07060f;
    --card: rgba(255, 255, 255, 0.045);
    --card-border: rgba(167, 139, 250, 0.16);
    --purple: #a78bfa;
    --cyan: #22d3ee;
    --green: #4ade80;
    --red: #f87171;
    --amber: #fbbf24;
    --text: #e9e6f7;
    --muted: #8b87a6;
    --radius: 16px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body {
    background: var(--bg); color: var(--text);
    font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
    min-height: 100vh; overflow-x: hidden; line-height: 1.5;
  }
  .bg-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
  .bg-glow::before, .bg-glow::after {
    content: ""; position: absolute; width: 520px; height: 520px;
    border-radius: 50%; filter: blur(120px); opacity: .5; animation: drift 16s ease-in-out infinite alternate;
  }
  .bg-glow::before { background: rgba(139, 92, 246, .32); top: -140px; left: -120px; }
  .bg-glow::after { background: rgba(34, 211, 238, .22); bottom: -160px; right: -120px; animation-delay: -8s; }
  @keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(60px, 40px) scale(1.15); }
  }
  .wrap { max-width: 760px; margin: 0 auto; padding: 20px 14px 40px; }

  header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .mini-brand { font-size: 15px; font-weight: 800; letter-spacing: .5px;
    background: linear-gradient(90deg, var(--purple), var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .top-link {
    font-size: 12px; color: var(--muted); text-decoration: none;
    background: var(--card); border: 1px solid var(--card-border); border-radius: 999px;
    padding: 5px 14px; backdrop-filter: blur(10px);
  }

  .card {
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
    padding: 14px 16px; margin-bottom: 12px;
  }
  .btn {
    border: none; outline: none; cursor: pointer; font-family: inherit;
    border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700;
    background: rgba(167, 139, 250, .16); color: var(--purple); transition: transform .1s, opacity .2s;
  }
  .btn:active { transform: scale(.94); }
  .btn.primary { background: linear-gradient(90deg, #8b5cf6, #06b6d4); color: #fff;
    box-shadow: 0 4px 18px rgba(139, 92, 246, .35); }
  .btn:disabled { opacity: .4; }
  .tip { font-size: 12px; color: #6d688c; margin-top: 10px; }
  .hidden { display: none !important; }

  input[type=text] {
    width: 100%; border-radius: 12px; padding: 10px 12px; outline: none;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    color: var(--text); font-size: 14px; font-family: inherit; transition: border-color .2s;
  }
  input[type=text]:focus { border-color: var(--purple); }
  ::placeholder { color: #5c5878; }
  .input-row { display: flex; gap: 8px; margin-top: 8px; }
  .input-row input { flex: 1; }
  .chip-mini {
    border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--muted);
    border-radius: 999px; font-family: inherit; font-size: 12px; padding: 3px 12px; cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .chip-mini:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }

  /* 选课页 */
  .intro { text-align: center; padding: 22px 18px 24px; }
  .intro-kicker { font-size: 12px; letter-spacing: 4px; color: var(--muted); margin-bottom: 12px; }
  .lesson-box { text-align: left; }
  .grade-banner { font-size: 15px; font-weight: 700; color: var(--ink, #fff); margin: 16px 0 2px;
    padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.15); }
  .unit { font-size: 11px; color: var(--muted); letter-spacing: 1px; margin: 10px 0 6px; }
  .unit-row { display: flex; flex-wrap: wrap; gap: 7px; }
  .lesson-chip {
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text);
    border-radius: 10px; padding: 6px 11px; cursor: pointer; font-family: inherit; font-size: 13px;
    font-weight: 700; text-align: left; transition: border-color .15s, background .15s; line-height: 1.3;
  }
  .lesson-chip small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; }
  .lesson-chip.sel { border-color: var(--purple); background: rgba(139,92,246,.16);
    box-shadow: 0 0 12px rgba(139,92,246,.35); }
  .lesson-chip.na { opacity: .38; cursor: not-allowed; }
  .begin-btn {
    margin-top: 18px; width: 220px; padding: 13px 0; border: none; border-radius: 999px;
    cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 800; color: #fff;
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    box-shadow: 0 6px 24px rgba(139, 92, 246, .4); transition: transform .1s;
  }
  .begin-btn:active { transform: scale(.96); }
  .intro .tip { margin-top: 10px; }

  /* ============ 孩子的舞台 ============ */
  .stage { display: flex; flex-direction: column; height: calc(100vh - 96px); min-height: 420px; }
  .stage-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
  .stage-top #vStatus { flex: 1; }
  .mic-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
  .mic-dot.live { background: var(--green); animation: blink 1.4s ease-in-out infinite; }
  .mic-dot.talk { background: var(--cyan); animation: blink .9s ease-in-out infinite; }
  @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

  /* 老师：面对面说话的光晕头像 */
  .orb-wrap { display: flex; justify-content: center; padding: 10px 0 6px; }
  .orb {
    width: 88px; height: 88px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(167, 139, 250, .55), rgba(34, 211, 238, .12) 70%);
    border: 1px solid rgba(167, 139, 250, .4);
    box-shadow: 0 0 34px rgba(139, 92, 246, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
    animation: breathe 3.6s ease-in-out infinite;
  }
  .orb.listen {
    background: radial-gradient(circle at 32% 30%, rgba(74, 222, 128, .5), rgba(34, 211, 238, .1) 70%);
    border-color: rgba(74, 222, 128, .45);
    box-shadow: 0 0 30px rgba(74, 222, 128, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
  }
  .orb.talk { animation: talkPulse .8s ease-in-out infinite; }
  @keyframes breathe {
    0%,100% { transform: scale(1); box-shadow: 0 0 26px rgba(139, 92, 246, .25); }
    50%     { transform: scale(1.05); box-shadow: 0 0 44px rgba(139, 92, 246, .45); }
  }
  @keyframes talkPulse {
    0%,100% { transform: scale(1);    box-shadow: 0 0 30px rgba(34, 211, 238, .4); }
    50%     { transform: scale(1.1);  box-shadow: 0 0 56px rgba(34, 211, 238, .65); }
  }

  /* 计数牌 */
  .counters { display: flex; justify-content: center; gap: 22px; font-size: 14px; color: var(--muted);
    padding: 4px 0 10px; }
  .counters b { font-size: 17px; font-weight: 900; margin: 0 2px; }
  .c-ok { color: var(--green); } .c-ok b { color: var(--green); }
  .c-bad { color: var(--red); } .c-bad b { color: var(--red); }
  .c-done { color: var(--text); } .c-done b { color: var(--cyan); }

  /* 一个萝卜一个坑：词坑格子阵 */
  .slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; flex: 1;
    align-content: start; overflow-y: auto; padding: 2px; }
  .slot {
    border-radius: 12px; min-height: 62px; padding: 6px 4px; text-align: center;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    background: rgba(255, 255, 255, .035); border: 1px dashed rgba(255, 255, 255, .14);
    transition: all .3s;
  }
  .slot .n { font-size: 11px; color: #55516e; font-weight: 700; }
  .slot .w { font-size: 14px; font-weight: 800; letter-spacing: 1px; min-height: 20px; color: var(--muted); }
  .slot.cur {
    background: rgba(139, 92, 246, .16); border: 1px solid rgba(167, 139, 250, .65);
    box-shadow: 0 0 18px rgba(139, 92, 246, .4); animation: slotPulse 1.1s ease-in-out infinite;
  }
  .slot.cur .n { color: var(--purple); }
  @keyframes slotPulse {
    0%,100% { box-shadow: 0 0 10px rgba(139, 92, 246, .3); }
    50%     { box-shadow: 0 0 24px rgba(139, 92, 246, .65); }
  }
  .slot.ok { background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .5); }
  .slot.ok .w { color: var(--green); }
  .slot.ok .n { color: rgba(74, 222, 128, .6); }
  .slot.bad { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .55);
    box-shadow: 0 0 14px rgba(248, 113, 113, .25); }
  .slot.bad .w { color: var(--red); }
  .slot.bad .n { color: rgba(248, 113, 113, .6); }

  /* 成绩操作（一轮完成才出现） */
  #resultActions { display: flex; gap: 10px; justify-content: center; padding: 12px 0 4px; flex-wrap: wrap; }
  .quick {
    border: 1px solid rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .12); color: var(--text);
    font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    transition: transform .1s, background .2s;
  }
  .quick:active { transform: scale(.95); }
  .quick:hover { background: rgba(167, 139, 250, .22); }

  /* 不会的词：大字炫酷展示 */
  #wrongFlash {
    position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    background: radial-gradient(circle at center, rgba(248, 113, 113, .22), rgba(7, 6, 15, .94));
    opacity: 0; pointer-events: none; transition: opacity .35s;
  }
  #wrongFlash.show { opacity: 1; }
  #wrongFlash .x { font-size: 64px; font-weight: 900; color: var(--red);
    text-shadow: 0 0 30px rgba(248, 113, 113, .8); animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1); }
  #wrongFlash .word { font-size: 110px; font-weight: 900; letter-spacing: 14px; color: #fff;
    text-shadow: 0 0 24px rgba(248, 113, 113, .95), 0 0 90px rgba(248, 113, 113, .55);
    animation: popIn .6s cubic-bezier(.2, 1.6, .4, 1); }
  #wrongFlash .tt { font-size: 14px; color: var(--muted); letter-spacing: 4px; }
  @keyframes popIn {
    from { transform: scale(.2); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    to { transform: scale(1); opacity: 1; }
  }

  /* ============ 开发者抽屉（可折叠辅助窗口） ============ */
  #devDrawer {
    position: fixed; left: 12px; right: 12px; bottom: 0; z-index: 80;
    background: rgba(14, 12, 28, .96); border: 1px solid var(--card-border);
    border-radius: 16px 16px 0 0; padding: 10px 14px 14px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
    transform: translateY(105%); transition: transform .3s ease;
    max-height: 72vh; overflow-y: auto;
  }
  #devDrawer.dev-open { transform: translateY(0); }
  .dev-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .dev-title { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 1px; }
  .dev-tools { display: flex; gap: 6px; }
  #devDrawer .conv-log {
    display: flex; flex-direction: column; gap: 5px; height: 150px; overflow-y: auto;
    padding: 8px; background: rgba(0, 0, 0, .3); border-radius: 10px;
  }
  .bub { max-width: 86%; padding: 6px 10px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
  .bub.ta { align-self: flex-start; background: rgba(139, 92, 246, .18); border: 1px solid rgba(139, 92, 246, .3); }
  .bub.me { align-self: flex-end; background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .28); }
  .bub.sys { align-self: center; background: none; color: var(--muted); font-size: 11px; padding: 2px; }
  #dbgBox, #mgrBox {
    font-family: Menlo, Consolas, monospace; font-size: 10px; line-height: 1.55;
    padding: 8px; border-radius: 8px;
    max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin: 0;
  }
  #mgrBox { background: rgba(139, 92, 246, .08); color: #cfc6f5; border: 1px solid rgba(139, 92, 246, .25); }
  #dbgBox { background: #000; color: #8f8; }
  .dev-sec-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 1px; margin-bottom: 5px; }

  /* 本轮完成覆盖层：彩带 + 去留选择 */
  #doneOverlay {
    position: fixed; inset: 0; z-index: 95; display: none;
    background: rgba(7,6,15,.86); backdrop-filter: blur(6px); overflow: hidden;
  }
  #doneOverlay.show { display: block; }
  .confetti-box { position: absolute; inset: 0; pointer-events: none; }
  .confetti-box i {
    position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px;
    opacity: .95; animation: confFall linear forwards;
  }
  @keyframes confFall {
    to { transform: translateY(105vh) rotate(720deg); opacity: .6; }
  }
  .done-card {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    text-align: center; background: var(--card); border: 1px solid var(--card-border);
    border-radius: 20px; padding: 30px 44px; box-shadow: 0 20px 70px rgba(0,0,0,.6);
    animation: popIn .5s cubic-bezier(.2,1.6,.4,1);
  }
  .done-emoji { font-size: 52px; }
  .done-title { font-size: 26px; font-weight: 900; letter-spacing: 3px; margin: 6px 0 8px;
    background: linear-gradient(90deg, var(--purple), var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .done-sum { font-size: 15px; color: var(--text); }
  .done-sum b { color: var(--cyan); font-size: 18px; }
  .done-sum .d-ok { color: var(--green); font-weight: 800; }
  .done-sum .d-bad { color: var(--red); font-weight: 800; }
  .done-btns { margin-top: 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .quick.big { font-size: 17px; padding: 14px 24px; border-radius: 14px; }
  .end-big {
    display: block; width: 100%; margin-top: 14px; padding: 18px 0; border: none; border-radius: 14px;
    cursor: pointer; font-family: inherit; font-size: 21px; font-weight: 900; letter-spacing: 6px; color: #fff;
    background: linear-gradient(90deg, #f87171, #fb923c);
    box-shadow: 0 8px 28px rgba(248, 113, 113, .4); transition: transform .1s;
  }
  .end-big:active { transform: scale(.97); }
  .quick.ghost2 { background: transparent; border: 1px solid rgba(255,255,255,.2); color: var(--muted); }