:root{
    --bg-base:#FFF6EB; --bg-layer1:#FFFBF5; --bg-layer2:#FDECD6;
    --border1:rgba(194,65,12,0.10); --border2:rgba(194,65,12,0.20);
    --brand:#FFFFFF; --brand-soft:#FFF1E0; --label1:#2A2118; --label2:#5C4A3A;
    --success:#FFFFFF; --sky:#FFFFFF; --btn:#FFFFFF; --btn-hover:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:ui-rounded,"PingFang SC","Hiragino Maru Gothic ProN","Microsoft YaHei",system-ui,sans-serif;
    background:var(--bg-base); color:var(--label1); font-size:18px; line-height:1.6;
  }
  .app{max-width:780px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding:16px;}
  header.appbar{
    display:flex; align-items:center; gap:10px; padding:12px 14px; flex-wrap:wrap;
    background:linear-gradient(135deg,#FFE7CC,#FFD9B0); border-radius:18px;
    box-shadow:0 4px 14px rgba(194,65,12,0.12); margin-bottom:12px;
  }
  .logo{font-size:32px;}
  .title h1{margin:0; font-size:21px; color:var(--brand);}
  .title p{margin:2px 0 0; font-size:12.5px; color:var(--label2);}
  .spacer{flex:1;}
  .ghost-btn{
    border:1px solid var(--border2); background:var(--bg-layer1); color:var(--brand);
    border-radius:12px; padding:7px 11px; font-size:13px; cursor:pointer;
  }
  .ghost-btn:hover{background:var(--bg-layer2);}
  .chip{background:#fff; border:1px solid var(--border2); color:var(--brand);
    border-radius:999px; padding:5px 12px; font-size:13px;}
  .chat{flex:1; display:flex; flex-direction:column; gap:14px; padding:6px 2px 10px; overflow-y:auto;}
  .bubble{display:flex; gap:10px; align-items:flex-start; max-width:100%;}
  .bubble .ava{width:42px; height:42px; border-radius:50%; background:var(--bg-layer2);
    display:flex; align-items:center; justify-content:center; font-size:24px; flex:0 0 auto;}
  .bubble .msg{background:var(--bg-layer1); border:1px solid var(--border1); border-radius:16px;
    padding:12px 14px; box-shadow:0 2px 8px rgba(0,0,0,0.04); max-width:100%;}
  .bubble.me{flex-direction:row-reverse;}
  .bubble.me .msg{background:#FCEAD2; border-color:var(--border2);}
  .bubble.me .ava{background:#FFD9B0;}
  .say{font-size:17px;}
  .hint{font-size:13px; color:var(--label2); margin-top:6px;}
  .choices{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
  .choice{
    min-height:52px; padding:10px 16px; border-radius:14px; border:2px solid var(--border2);
    background:#fff; color:var(--label1); font-size:17px; cursor:pointer; transition:.15s;
  }
  .choice:hover{border-color:var(--brand); transform:translateY(-1px);}
  .choice.correct{background:#E7F6F3; border-color:var(--success); color:var(--success);}
  .choice.wrong{background:#FDECEC; border-color:#FFFFFF; color:#DC2626;}
  .choice:disabled{cursor:default; opacity:.95;}
  .card{
    background:linear-gradient(160deg,#FFFDF9,#FFF1DD); border:2px solid var(--border2);
    border-radius:18px; padding:16px; text-align:center; box-shadow:0 6px 18px rgba(194,65,12,0.12);
  }
  .card .emoji{font-size:60px; line-height:1;}
  .card .word{font-size:38px; font-weight:800; color:var(--brand); margin:6px 0 2px; letter-spacing:1px;}
  .card .spell{font-size:16px; color:var(--label2); letter-spacing:2px; margin-bottom:4px;}
  .card .mean{font-size:22px; color:var(--label1);}
  .card .ex{font-size:16px; color:var(--label2); margin-top:10px;}
  .card .tip{font-size:15px; color:var(--brand); margin-top:10px; background:var(--brand-soft);
    border-radius:10px; padding:8px 10px; display:inline-block;}
  .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; justify-content:center;}
  .primary{
    background:var(--btn); color:#3F3722; border:none; border-radius:14px; padding:12px 18px;
    font-size:17px; cursor:pointer; box-shadow:0 4px 12px rgba(194,65,12,0.25);
  }
  .primary:hover{background:var(--btn-hover);}
  .primary:disabled{opacity:.5; cursor:default;}
  .pill{border:2px solid var(--border2); background:#fff; border-radius:999px; padding:10px 18px;
    font-size:17px; cursor:pointer;}
  .pill:hover{border-color:var(--brand);}
  .pill.active{background:var(--brand); color:#3F3722; border-color:var(--brand);}
  .mini{
    border:2px solid var(--border2); background:#fff; border-radius:12px; padding:8px 12px;
    font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  }
  .mini:hover{border-color:var(--brand); background:var(--brand-soft);}
  .mini.rec{border-color:#FFFFFF; background:#FDECEC; color:#DC2626;}
  .story{background:#FFF7E9; border-left:5px solid var(--brand); border-radius:12px; padding:12px 14px;}
  .summary{background:var(--bg-layer2); border-radius:16px; padding:16px;}
  .stars{color:#84755C; font-size:20px;}
  .progress{height:10px; background:#F3E3CE; border-radius:999px; overflow:hidden; margin:4px 0 12px;}
  .progress > i{display:block; height:100%; background:var(--brand); width:0; transition:.3s;}
  /* 跟读结果卡 */
  .score-box{
    background:#fff; border:2px solid var(--border2); border-radius:16px; padding:14px; text-align:center;
  }
  .score-box .big-star{font-size:30px; letter-spacing:4px;}
  .score-box .heard{font-size:14px; color:var(--label2); margin-top:6px;}
  .score-box .pct{font-size:22px; font-weight:800; color:var(--success);}
  .wave{display:inline-flex; gap:3px; align-items:flex-end; height:22px; vertical-align:middle;}
  .wave i{width:4px; background:#FFFFFF; border-radius:2px; height:8px; animation:wv .7s infinite ease-in-out;}
  .wave i:nth-child(2){animation-delay:.1s} .wave i:nth-child(3){animation-delay:.2s}
  .wave i:nth-child(4){animation-delay:.3s} .wave i:nth-child(5){animation-delay:.15s}
  @keyframes wv{0%,100%{height:6px}50%{height:20px}}
  .note-sky{background:#EAF1FE; border-left:5px solid var(--sky); border-radius:10px;
    padding:10px 12px; font-size:14px; color:#1E3A5F; margin-top:10px;}
  /* modal */
  .modal-mask{position:fixed; inset:0; background:rgba(42,33,24,.45); display:none;
    align-items:center; justify-content:center; padding:20px; z-index:50;}
  .modal{background:var(--bg-layer1); border-radius:18px; padding:20px; max-width:680px; width:100%;
    max-height:84vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3);}
  .modal h2{margin:0 0 10px; color:var(--brand); font-size:20px;}
  .modal pre{background:#FFFFFF; color:#3F3722; padding:14px; border-radius:12px; white-space:pre-wrap;
    font-size:13px; line-height:1.5; font-family:"SFMono-Regular",Consolas,monospace;}
  .modal .field{margin:12px 0;}
  .modal label{display:block; font-size:14px; color:var(--label2); margin-bottom:4px;}
  .modal input[type=range]{width:100%;}
  .modal .note{font-size:12px; color:var(--label2); margin-top:6px;}
  .switch{display:flex; align-items:center; gap:10px; font-size:15px; margin:8px 0;}
  .close{float:right; border:none; background:transparent; font-size:22px; cursor:pointer; color:var(--label2);}
  .foot{font-size:12px; color:var(--label2); text-align:center; margin-top:14px;}
  body.demo .app{height:auto; min-height:auto;}
  body.demo .chat{overflow:visible; height:auto; max-height:none;}
  body.demo *, body.demo *::before, body.demo *::after{animation:none !important; transition:none !important;}
  .kbd{background:#F3E7D6; border-radius:6px; padding:1px 6px; font-size:14px;}
  /* —— 打磨新增：进度条 / 动效 / 发音差异高亮 / 响应式 —— */
  .prog-wrap{display:flex; align-items:center; gap:10px; margin:0 2px 10px;}
  .prog-wrap .txt{font-size:13px; color:var(--label2); white-space:nowrap;}
  .prog-wrap .progress{flex:1; margin:0;}
  @keyframes pop{from{transform:scale(.94) translateY(6px); opacity:0} to{transform:none; opacity:1}}
  @keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  @keyframes floatUp{from{transform:translateY(0); opacity:1} to{transform:translateY(-42px); opacity:0}}
  .anim-pop{animation:pop .28s ease-out;}
  .anim-shake{animation:shake .32s ease-in-out;}
  .confetti{position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden;}
  .confetti span{position:absolute; font-size:26px; animation:floatUp 1.6s ease-out forwards;}
  .diff{font-family:"SFMono-Regular",Consolas,monospace; font-size:16px; letter-spacing:1px; margin-top:6px;}
  .diff .row-line{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;}
  .diff .lab{font-size:12px; color:var(--label2); width:44px; text-align:right;}
  .diff .ok{color:var(--success); font-weight:700;}
  .diff .bad{color:#DC2626; font-weight:700; text-decoration:underline;}
  .badge-new{display:inline-block; background:#FFE7CC; color:var(--brand); border-radius:999px;
    padding:2px 10px; font-size:12px;}
  .stat-grid{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
  .stat-grid .st{flex:1; min-width:110px; background:#fff; border:1px solid var(--border1);
    border-radius:12px; padding:8px 10px; text-align:center;}
  .stat-grid .st b{display:block; font-size:20px; color:var(--brand);}
  .stat-grid .st span{font-size:12px; color:var(--label2);}
  @media (max-width:560px){
    body{font-size:17px;}
    .app{padding:10px;}
    .title h1{font-size:18px;} .title p{font-size:11.5px;}
    .card .word{font-size:32px;} .card .emoji{font-size:52px;}
    .choice{min-height:46px; font-size:16px; padding:8px 12px;}
    .primary,.pill{padding:10px 14px; font-size:16px;}
    .modal{padding:16px;}
  }
/* ============================================================
   ★ 视觉重构 v2：星核学习舱 · STAR-CORE ENGLISH LAB
   暗色全息 HUD · 青/紫/金三色霓虹 · 儿童友好
   （仅覆盖视觉层，JS 逻辑不变）
   ============================================================ */
:root{
  --void:#FFFFFF; --space:#FFFFFF; --space-2:#121D44;
  --glass:#FFFDF6; --glass-line:rgba(31,168,91,0.28);
  --cyan:#34E7F0; --cyan-deep:#0BB6C9; --violet:#A78BFA; --gold:#FFD45E;
  --text:#E8F0FF; --text-dim:#9FB2D9;
  --good:#4ADE80; --bad:#FF7AA2; --brand:#34E7F0; --label2:#9FB2D9;
  --success:#4ADE80; --sky:#34E7F0;
  --font-display:'Orbitron', ui-rounded,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:ui-rounded,'PingFang SC','Hiragino Maru Gothic ProN','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'Share Tech Mono', ui-monospace,'SFMono-Regular',Consolas,monospace;
  --glow-cyan:0 0 22px rgba(34,180,94,0.40);
  --glow-violet:0 0 22px rgba(255,159,67,0.30);
}
/* —— 背景层：星云 + 星点 + 网格 + 扫描线 —— */
.bg-stars,.bg-grid,.scan{position:fixed; inset:0; pointer-events:none;}
.bg-stars{z-index:-3; background:radial-gradient(1200px 680px at 16% -10%, rgba(34,180,94,0.34), transparent 60%),
  radial-gradient(1100px 760px at 94% 6%, rgba(255,159,67,0.36), transparent 60%),
  radial-gradient(1000px 640px at 50% 122%, rgba(74,222,128,0.20), transparent 60%),
  radial-gradient(900px 500px at 50% 40%, rgba(34,180,94,0.10), transparent 70%),
  var(--void);}
.bg-stars::before{content:''; position:absolute; inset:0; opacity:.95;
  background-image:radial-gradient(2.6px 2.6px at 8% 14%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 22% 62%, #cfeaff, transparent),
    radial-gradient(2.8px 2.8px at 38% 28%, #ffffff, transparent),
    radial-gradient(1.8px 1.8px at 55% 80%, #d8c8ff, transparent),
    radial-gradient(2.4px 2.4px at 70% 18%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 84% 55%, #bff3ff, transparent),
    radial-gradient(2.6px 2.6px at 92% 88%, #ffffff, transparent),
    radial-gradient(1.7px 1.7px at 14% 90%, #cfeaff, transparent),
    radial-gradient(2.4px 2.4px at 48% 46%, #ffffff, transparent),
    radial-gradient(1.8px 1.8px at 64% 38%, #e9d8ff, transparent),
    radial-gradient(2.2px 2.2px at 30% 75%, #ffffff, transparent),
    radial-gradient(1.8px 1.8px at 78% 35%, #bff3ff, transparent),
    radial-gradient(3.2px 3.2px at 62% 12%, #ffffff, transparent),
    radial-gradient(2.2px 2.2px at 12% 52%, #ffffff, transparent);
  animation:twinkle 5.5s ease-in-out infinite alternate;}
.bg-grid{z-index:-2;
  background-image:linear-gradient(rgba(34,180,94,0.20) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(34,180,94,0.20) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 88% 64% at 50% 32%, #FFFFFF 28%, transparent 90%);
          mask-image:radial-gradient(ellipse 88% 64% at 50% 32%, #FFFFFF 28%, transparent 90%);}
.scan{z-index:-1; height:200px; top:-200px;
  background:linear-gradient(180deg, transparent, rgba(34,180,94,0.16), transparent);
  animation:scanmove 7s linear infinite;}
@keyframes twinkle{0%{opacity:.35}100%{opacity:.7}}
@keyframes scanmove{0%{top:-160px}100%{top:100%}}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--void); color:var(--text); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:840px; margin:0 auto; height:100vh; display:flex; flex-direction:column;
  padding:16px; position:relative; z-index:1;}
/* HUD 四角括号 */
.app::before,.app::after{content:''; position:absolute; width:26px; height:26px;
  border:2px solid var(--cyan); opacity:.45; pointer-events:none; z-index:2;}
.app::before{top:6px; left:6px; border-right:none; border-bottom:none;
  box-shadow:-3px -3px 12px rgba(34,180,94,0.25);}
.app::after{bottom:6px; right:6px; border-left:none; border-top:none;
  box-shadow:3px 3px 12px rgba(34,180,94,0.25);}

/* —— 顶栏 HUD —— */
header.appbar{
  display:flex; align-items:center; gap:10px; padding:12px 16px; flex-wrap:wrap;
  background:linear-gradient(135deg, #FFFFFF, #FFFFFF);
  border:1px solid var(--glass-line); border-radius:18px;
  box-shadow:var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); margin-bottom:12px;
}
.logo{font-size:28px; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(34,180,94,0.55), rgba(255,159,67,0.28));
  box-shadow:var(--glow-cyan);}
.title h1{margin:0; font-family:var(--font-display); font-size:20px; color:#3F3722;
  letter-spacing:1.5px; text-shadow:0 0 12px rgba(34,180,94,0.55);}
.title p{margin:2px 0 0; font-family:var(--font-mono); font-size:11px; color:var(--cyan);
  letter-spacing:1px; opacity:.85;}
.spacer{flex:1;}
.status{font-family:var(--font-mono); font-size:11px; color:var(--cyan);
  border:1px solid rgba(34,180,94,0.45); border-radius:999px; padding:3px 10px;
  box-shadow:0 0 12px rgba(34,180,94,0.35); white-space:nowrap;}
.ghost-btn{
  border:1px solid var(--glass-line); background:#FFFDF6; color:var(--cyan);
  border-radius:12px; padding:7px 11px; font-size:13px; cursor:pointer;
  backdrop-filter:blur(4px); transition:.2s; font-family:var(--font-body);
}
.ghost-btn:hover{background:rgba(34,180,94,0.12); box-shadow:var(--glow-cyan);}
.chip{background:#FFFFFF; border:1px solid var(--glass-line); color:var(--cyan);
  border-radius:999px; padding:5px 12px; font-size:13px; box-shadow:var(--glow-cyan);}

/* —— 对话气泡（玻璃面板）—— */
.chat{flex:1; display:flex; flex-direction:column; gap:14px; padding:6px 2px 10px; overflow-y:auto;}
.chat::-webkit-scrollbar{width:8px;} .chat::-webkit-scrollbar-thumb{background:rgba(34,180,94,0.3);border-radius:8px;}
.bubble{display:flex; gap:10px; align-items:flex-start; max-width:100%;}
.bubble .ava{width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%, rgba(34,180,94,0.5), rgba(255,159,67,0.22));
  display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:var(--glow-cyan);}
.bubble .msg{background:linear-gradient(160deg, #FFFFFF, #FFFFFF);
  border:1px solid var(--glass-line); border-radius:16px; padding:12px 14px;
  box-shadow:0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  max-width:100%; backdrop-filter:blur(6px);}
.bubble.me{flex-direction:row-reverse;}
.bubble.me .msg{background:linear-gradient(160deg, rgba(34,180,94,0.16), #FFFFFF);
  border-color:rgba(34,180,94,0.42);}
.bubble.me .ava{background:radial-gradient(circle at 30% 30%, rgba(255,159,67,0.55), rgba(34,180,94,0.22));}
.say{font-size:17px; color:var(--text);}
.hint{font-size:13px; color:var(--text-dim); margin-top:6px;}

/* —— 选项 —— */
.choices{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.choice{
  min-height:52px; padding:10px 16px; border-radius:14px; border:1.5px solid var(--glass-line);
  background:#FFFFFF; color:var(--text); font-size:17px; cursor:pointer;
  transition:.18s; backdrop-filter:blur(4px); font-family:var(--font-mono); letter-spacing:1px;
}
.choice:hover{border-color:var(--cyan); transform:translateY(-2px); box-shadow:var(--glow-cyan); color:#3F3722;}
.choice.correct{background:rgba(74,222,128,0.15); border-color:var(--good); color:var(--good);
  box-shadow:0 0 16px rgba(74,222,128,0.32);}
.choice.wrong{background:rgba(255,122,162,0.12); border-color:var(--bad); color:var(--bad);}
.choice:disabled{cursor:default; opacity:.95;}

/* —— 单词卡（全息投影）—— */
.card{
  background:linear-gradient(160deg, #FFFFFF, #FFFFFF);
  border:1.5px solid var(--glass-line); border-radius:18px; padding:18px; text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.45), 0 0 30px rgba(34,180,94,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(8px); position:relative; overflow:hidden;
}
.card::before{content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(34,180,94,0.18), transparent 55%); pointer-events:none;}
.card .emoji{font-size:60px; line-height:1; filter:drop-shadow(0 0 12px rgba(34,180,94,0.5));}
.card .word{font-family:var(--font-display); font-size:40px; font-weight:900; color:#3F3722;
  margin:6px 0 2px; letter-spacing:2px; text-shadow:0 0 18px rgba(34,180,94,0.7);}
.card .spell{font-family:var(--font-mono); font-size:15px; color:var(--cyan);
  letter-spacing:3px; margin-bottom:4px; text-shadow:0 0 8px rgba(34,180,94,0.4);}
.card .mean{font-size:22px; color:var(--text);}
.card .ex{font-size:15px; color:var(--text-dim); margin-top:10px;}
.card .tip{font-size:14px; color:var(--gold); margin-top:10px;
  background:rgba(255,212,94,0.10); border:1px solid rgba(255,212,94,0.3);
  border-radius:10px; padding:8px 10px; display:inline-block;}

.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; justify-content:center;}
.primary{
  background:linear-gradient(135deg, var(--cyan), var(--cyan-deep)); color:#04121A; border:none;
  border-radius:14px; padding:12px 18px; font-size:17px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 20px rgba(34,180,94,0.4); transition:.2s;
  font-family:var(--font-display); letter-spacing:1px;
}
.primary:hover{filter:brightness(1.1); box-shadow:0 8px 28px rgba(34,180,94,0.6); transform:translateY(-1px);}
.primary:disabled{opacity:.5; cursor:default; filter:none; transform:none;}
.pill{border:1.5px solid var(--glass-line); background:#FFFFFF; color:var(--text);
  border-radius:999px; padding:10px 18px; font-size:17px; cursor:pointer; transition:.2s; backdrop-filter:blur(4px);}
.pill:hover{border-color:var(--cyan); box-shadow:var(--glow-cyan); color:#3F3722;}
.pill.active{background:linear-gradient(135deg, var(--cyan), var(--cyan-deep)); color:#04121A; border-color:var(--cyan); font-weight:700;}
.mini{
  border:1.5px solid var(--glass-line); background:#FFFFFF; color:var(--text);
  border-radius:12px; padding:8px 12px; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:.18s; backdrop-filter:blur(4px);
}
.mini:hover{border-color:var(--cyan); background:rgba(34,180,94,0.12); color:#3F3722; box-shadow:var(--glow-cyan);}
.mini.rec{border-color:var(--bad); background:rgba(255,122,162,0.14); color:var(--bad);}
.story{background:#FFFFFF; border-left:4px solid var(--cyan); border-radius:12px; padding:12px 14px;
  box-shadow:inset 0 0 18px rgba(34,180,94,0.06);}
.summary{background:linear-gradient(160deg, #FFFFFF, #FFFFFF);
  border:1.5px solid var(--glass-line); border-radius:16px; padding:18px;
  box-shadow:0 8px 30px rgba(0,0,0,0.4), inset 0 0 24px rgba(34,180,94,0.05); backdrop-filter:blur(8px);}
.summary h2{color:#3F3722; text-shadow:0 0 12px rgba(34,180,94,0.4); margin:0 0 8px;}
.stars{color:var(--gold); font-size:20px; filter:drop-shadow(0 0 6px rgba(255,212,94,0.55));}

/* —— 进度条 —— */
.progress{height:10px; background:#FFFFFF; border:1px solid var(--glass-line);
  border-radius:999px; overflow:hidden; margin:4px 0 12px;}
.progress > i{display:block; height:100%; width:0; transition:.4s; position:relative;
  background:linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow:0 0 12px rgba(34,180,94,0.6);}
.progress > i::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation:shimmer 1.6s infinite;}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* —— 跟读结果卡（霓虹扫描框）—— */
.score-box{
  background:linear-gradient(160deg, #FFFFFF, #FFFFFF);
  border:1.5px solid var(--cyan); border-radius:16px; padding:16px; text-align:center;
  box-shadow:0 0 24px rgba(34,180,94,0.28), inset 0 0 20px rgba(34,180,94,0.06);
  backdrop-filter:blur(6px); position:relative;
}
.score-box .big-star{font-size:30px; letter-spacing:4px; filter:drop-shadow(0 0 8px rgba(255,212,94,0.6));}
.score-box .heard{font-size:13px; color:var(--text-dim); margin-top:6px; font-family:var(--font-mono);}
.score-box .pct{font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--cyan);
  text-shadow:0 0 12px rgba(34,180,94,0.6);}
.wave{display:inline-flex; gap:3px; align-items:flex-end; height:22px; vertical-align:middle;}
.wave i{width:4px; background:var(--cyan); border-radius:2px; height:8px;
  box-shadow:0 0 8px rgba(34,180,94,0.6); animation:wv .7s infinite ease-in-out;}
.wave i:nth-child(2){animation-delay:.1s} .wave i:nth-child(3){animation-delay:.2s}
.wave i:nth-child(4){animation-delay:.3s} .wave i:nth-child(5){animation-delay:.15s}
@keyframes wv{0%,100%{height:6px}50%{height:20px}}
.note-sky{background:rgba(34,180,94,0.08); border-left:5px solid var(--cyan); border-radius:10px;
  padding:10px 12px; font-size:14px; color:#3F3722; margin-top:10px;}

/* —— 弹窗 —— */
.modal-mask{position:fixed; inset:0; background:rgba(4,8,18,0.72); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:50; backdrop-filter:blur(4px);}
.modal{background:linear-gradient(160deg, #FFFFFF, #FFFFFF);
  border:1.5px solid var(--glass-line); border-radius:18px; padding:20px; max-width:680px; width:100%;
  max-height:84vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(34,180,94,0.15);}
.modal h2{margin:0 0 10px; color:var(--cyan); font-size:20px; text-shadow:0 0 12px rgba(34,180,94,0.4); font-family:var(--font-display); letter-spacing:1px;}
.modal pre{background:#FFFFFF; color:#3F3722; padding:14px; border-radius:12px; white-space:pre-wrap;
  font-size:13px; line-height:1.5; border:1px solid var(--glass-line);
  font-family:var(--font-mono); box-shadow:inset 0 0 18px rgba(34,180,94,0.06);}
.modal .field{margin:12px 0;}
.modal label{display:block; font-size:14px; color:var(--text-dim); margin-bottom:4px;}
.modal input[type=range]{width:100%; accent-color:var(--cyan);}
.modal select{width:100%; background:#FFFFFF; color:var(--text);
  border:1px solid var(--glass-line); border-radius:10px; padding:9px 10px; font-size:15px;}
.modal input[type=checkbox]{accent-color:var(--cyan); width:16px; height:16px; vertical-align:middle;}
.modal .note{font-size:12px; color:var(--text-dim); margin-top:6px;}
.switch{display:flex; align-items:center; gap:10px; font-size:15px; margin:8px 0; color:var(--text);}
.close{float:right; border:none; background:transparent; font-size:22px; cursor:pointer; color:var(--text-dim);}
.close:hover{color:var(--cyan);}
.warn{margin:10px 0; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.65;
  color:#3F3722; background:rgba(255,212,94,0.08); border:1px solid rgba(255,212,94,0.35);
  box-shadow:0 0 14px rgba(255,212,94,0.12); white-space:pre-line;}
.foot{font-size:12px; color:var(--text-dim); text-align:center; margin-top:14px; opacity:.9;
  background:#FFFDF6; border:1px solid var(--glass-line); border-radius:12px;
  padding:8px 12px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}

/* —— 错词本 / 差异高亮 / 徽章 —— */
.kbd{background:#FFFFFF; border:1px solid var(--glass-line); border-radius:6px; padding:1px 6px; font-size:14px; color:var(--cyan);}
.prog-wrap{display:flex; align-items:center; gap:10px; margin:0 2px 10px;}
.prog-wrap .txt{font-size:13px; color:var(--text-dim); white-space:nowrap; font-family:var(--font-mono);}
.prog-wrap .progress{flex:1; margin:0;}
.anim-pop{animation:pop .28s ease-out;}
.anim-shake{animation:shake .32s ease-in-out;}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden;}
.confetti span{position:absolute; font-size:26px; animation:floatUp 1.6s ease-out forwards; filter:drop-shadow(0 0 8px rgba(34,180,94,0.6));}
.diff{font-family:var(--font-mono); font-size:16px; letter-spacing:1px; margin-top:8px;}
.diff .row-line{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;}
.diff .lab{font-size:12px; color:var(--text-dim); width:44px; text-align:right;}
.diff .ok{color:var(--good); font-weight:700; text-shadow:0 0 6px rgba(74,222,128,0.5);}
.diff .bad{color:var(--bad); font-weight:700; text-decoration:underline; text-shadow:0 0 6px rgba(255,122,162,0.5);}
.badge-new{display:inline-block; background:rgba(34,180,94,0.12); color:var(--cyan);
  border:1px solid var(--glass-line); border-radius:999px; padding:2px 10px; font-size:12px; font-family:var(--font-mono);}
.stat-grid{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.stat-grid .st{flex:1; min-width:110px; background:#FFFFFF; border:1px solid var(--glass-line);
  border-radius:12px; padding:8px 10px; text-align:center; backdrop-filter:blur(4px);}
.stat-grid .st b{display:block; font-size:20px; color:var(--cyan); font-family:var(--font-display);
  text-shadow:0 0 10px rgba(34,180,94,0.5);}
.stat-grid .st span{font-size:12px; color:var(--text-dim);}

@keyframes pop{from{transform:scale(.94) translateY(6px); opacity:0} to{transform:none; opacity:1}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes floatUp{from{transform:translateY(0); opacity:1} to{transform:translateY(-42px); opacity:0}}

body.demo .app{height:auto; min-height:auto;}
body.demo .chat{overflow:visible; height:auto; max-height:none;}
body.demo *, body.demo *::before, body.demo *::after{animation:none !important; transition:none !important;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .bg-stars::before,.scan,.progress > i::after{animation:none !important;}
}
@media (max-width:560px){
  body{font-size:17px;}
  .app{padding:10px;}
  .title h1{font-size:18px;} .title p{font-size:11px;}
  .card .word{font-size:32px;} .card .emoji{font-size:52px;}
  .choice{min-height:46px; font-size:16px; padding:8px 12px;}
  .primary,.pill{padding:10px 14px; font-size:16px;}
  .modal{padding:16px;}
}

/* —— 打磨：logo 呼吸辉光 + 状态灯闪烁 —— */
.logo{animation:logoPulse 3s ease-in-out infinite;}
@keyframes logoPulse{
  0%,100%{box-shadow:0 0 18px rgba(34,180,94,0.40);}
  50%{box-shadow:0 0 34px rgba(34,180,94,0.85), 0 0 12px rgba(255,159,67,0.5);}
}
.status{animation:statusBlink 2.4s ease-in-out infinite;}
@keyframes statusBlink{0%,100%{opacity:1}50%{opacity:.55}}
/* HUD 四角再补一对对角括号，增强"舱体"感 */
.app::before{border-radius:6px;}
.app::after{border-radius:6px;}

/* —— 首屏玩法说明 hero 卡 —— */
.hero{background:linear-gradient(160deg, #FFFFFF, #FFFFFF);
  border:1.5px solid var(--glass-line); border-radius:18px; padding:16px 18px; margin-top:6px;
  box-shadow:0 8px 30px rgba(0,0,0,0.4), inset 0 0 26px rgba(34,180,94,0.06); backdrop-filter:blur(8px);}
.hero-title{font-family:var(--font-display); font-size:17px; color:#3F3722; letter-spacing:1px;
  text-shadow:0 0 12px rgba(34,180,94,0.5); margin-bottom:12px; text-align:center;}
.hero-steps{display:flex; align-items:stretch; gap:8px; justify-content:center; flex-wrap:wrap;}
.hero-step{flex:1; min-width:120px; background:#FFFFFF; border:1px solid var(--glass-line);
  border-radius:14px; padding:12px 10px; text-align:center;}
.hero-step .hs-ico{font-size:30px; filter:drop-shadow(0 0 10px rgba(34,180,94,0.6));}
.hero-step .hs-t{font-family:var(--font-display); font-size:15px; color:var(--cyan); margin-top:4px; letter-spacing:1px;}
.hero-step .hs-d{font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.4;}
.hero-arrow{display:flex; align-items:center; color:var(--violet); font-size:22px; font-weight:700;
  text-shadow:0 0 10px rgba(255,159,67,0.6);}
.hero-note{margin-top:12px; font-size:12.5px; color:var(--gold); text-align:center;
  background:rgba(255,212,94,0.08); border:1px solid rgba(255,212,94,0.25); border-radius:10px; padding:7px 10px;}
@media (max-width:560px){ .hero-arrow{display:none;} .hero-step{min-width:100%;} }

/* —— 双模式聊天区（一屏学习 / 聊天记录）—— */
#chatScroll{flex:1; display:flex; flex-direction:column; gap:14px; padding:6px 2px 10px; overflow-y:auto;}
#chatScroll::-webkit-scrollbar{width:8px;} #chatScroll::-webkit-scrollbar-thumb{background:rgba(34,180,94,0.3);border-radius:8px;}
#chat{flex:0 0 auto; display:flex; flex-direction:column; gap:14px;}
#chatHistory{display:flex; flex-direction:column; gap:14px;}
#chatHistory.x-hide{display:none;}
.hist-screen{display:flex; flex-direction:column; gap:14px; opacity:.9;
  border-bottom:1px dashed var(--glass-line); padding-bottom:14px;}
.hist-empty{text-align:center; color:var(--text-dim); font-size:14px; padding:24px 0;}
.mode-bar{display:flex; gap:8px; justify-content:center; padding:0 0 8px; flex:0 0 auto;}
.mode-btn{border:1px solid var(--glass-line); background:#FFFFFF; color:var(--text-dim);
  border-radius:999px; padding:6px 16px; font-size:13.5px; cursor:pointer; transition:.2s;
  font-family:var(--font-body);}
.mode-btn:hover{border-color:var(--cyan); color:#3F3722;}
.mode-btn.on{background:linear-gradient(135deg, var(--cyan), var(--cyan-deep)); color:#04121A;
  font-weight:700; border-color:var(--cyan); box-shadow:var(--glow-cyan);}

/* —— 一屏导航确认条（吸顶，保留当前年级/主题）—— */
/* —— 小老师入口 —— */
.chat-cta{background:linear-gradient(135deg, var(--cyan), var(--cyan-deep)); color:#04121A; border:none;
  border-radius:12px; padding:7px 13px; font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 0 16px rgba(34,180,94,0.4); transition:.2s; white-space:nowrap;}
.chat-cta:hover{transform:translateY(-1px); box-shadow:0 4px 22px rgba(34,180,94,0.6);}
.chat-entry{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:linear-gradient(135deg, rgba(34,180,94,0.16), rgba(255,159,67,0.14));
  border:1.5px solid var(--cyan); border-radius:18px; padding:16px 18px; cursor:pointer;
  transition:.2s; box-shadow:0 0 24px rgba(34,180,94,0.18); font-family:var(--font-body);}
.chat-entry:hover{transform:translateY(-2px); box-shadow:0 8px 32px rgba(34,180,94,0.4);}
.chat-entry .ce-ico{font-size:34px; filter:drop-shadow(0 0 10px rgba(34,180,94,0.6));}
.chat-entry .ce-body{flex:1; display:flex; flex-direction:column; gap:3px;}
.chat-entry .ce-body b{color:#3F3722; font-size:18px;}
.chat-entry .ce-body small{color:var(--text-dim); font-size:13px;}
.chat-entry .ce-go{color:var(--cyan); font-weight:700; font-size:15px; white-space:nowrap;}

/* —— 顶部折叠条：学习时只留一个透明的小图标 —— */
.top-zone{flex:0 0 auto;}

/* ============================================================
   底部常驻对话坞：单词卡在上、对话框在下，同一屏完成
   ============================================================ */
/* 对话框：贴在聊天流末尾，随内容吸附在底部（不再是独立的一条底栏） */
.chatbar{position:sticky; bottom:0; z-index:8; display:flex; align-items:center; gap:7px;
  margin-top:4px; padding:8px 9px; border-radius:15px;
  border:1px solid rgba(34,180,94,0.30);
  background:linear-gradient(160deg, #FFFFFF, #FFFFFF);
  box-shadow:0 8px 24px rgba(0,0,0,0.26);
  backdrop-filter:blur(10px);}
.chatbar.x-hide{display:none;}
.chatbar .dw-mic{padding:8px 11px;}
/* 实时语音对话：开启后输入框让位给「电平 + 状态」 */
.dw-rt{padding:8px 11px; border-radius:10px; cursor:pointer; font-family:var(--font-body);
  font-size:14px; border:1px solid rgba(34,180,94,0.42); background:rgba(34,180,94,0.12);
  color:#3F3722; transition:.18s;}
.dw-rt:hover{background:rgba(34,180,94,0.26);}
.chatbar.live .dw-rt{border-color:#FF7AA2; background:rgba(255,122,162,0.22); color:#3F3722;}
.rt-live{display:none; flex:1; min-width:0; align-items:center; gap:9px;}
.chatbar.live #dwMic, .chatbar.live #dwInput, .chatbar.live #dwSend{display:none;}
.chatbar.live .rt-live{display:flex;}
.rt-wave{display:inline-flex; align-items:flex-end; gap:3px; height:18px; flex:0 0 auto;}
.rt-wave i{width:3px; height:100%; border-radius:2px; background:linear-gradient(180deg,#34E7F0,#A78BFA);
  transform-origin:bottom; transform:scaleY(calc(0.22 + var(--lv,0) * 0.78)); transition:transform .09s linear;}
.rt-wave i:nth-child(2){transition-delay:.02s;} .rt-wave i:nth-child(3){transition-delay:.04s;}
.rt-wave i:nth-child(4){transition-delay:.06s;} .rt-wave i:nth-child(5){transition-delay:.08s;}
.rt-txt{flex:1; min-width:0; font-size:12.5px; color:#3F3722; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.rt-live.st-think .rt-txt{color:#3F3722;} .rt-live.st-speak .rt-txt{color:#3F3722;}
.rt-live.st-hear .rt-txt{color:#3F3722;}
.rt-stop{padding:7px 12px; border-radius:9px; cursor:pointer; font-family:var(--font-body);
  font-size:12.5px; border:1px solid rgba(255,122,162,0.5); background:rgba(255,122,162,0.16);
  color:#3F3722;}
.rt-stop:hover{background:rgba(255,122,162,0.3);}
.dw-mic{padding:8px 12px; border-radius:10px; cursor:pointer; font-family:var(--font-body);
  font-size:13px; border:1px solid rgba(255,159,67,0.5); background:rgba(255,159,67,0.14);
  color:#3F3722; white-space:nowrap; transition:.18s;}
.dw-mic:hover{background:rgba(255,159,67,0.28);}
.dw-mic.rec{border-color:#FF7AA2; background:rgba(255,122,162,0.22); color:#3F3722;
  animation:dw-pulse 1.05s ease-in-out infinite;}
@keyframes dw-pulse{0%,100%{box-shadow:0 0 6px rgba(255,95,122,0.4);}50%{box-shadow:0 0 20px rgba(255,95,122,0.95);}}
#dwInput{flex:1; min-width:0; padding:9px 13px; border-radius:11px; font-size:13.5px;
  border:1px solid rgba(34,180,94,0.30); background:#FFFFFF; color:#3F3722;
  font-family:var(--font-body);}
#dwInput:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(34,180,94,0.16);}
.dw-send{padding:9px 16px; border-radius:11px; cursor:pointer; font-family:var(--font-body);
  font-size:13.5px; font-weight:800; color:#04101F; border:none;
  background:linear-gradient(135deg,#34E7F0,#A78BFA); transition:.18s;}
.dw-send:hover{filter:brightness(1.1); transform:translateY(-1px);}
.dock-hint{margin-top:6px; font-size:11.5px; color:#84755C; line-height:1.6;}
.dock-hint:empty{display:none;}
.dock-hint b{color:#3F3722;}

/* 小老师现场做的单词卡（和上面那张卡同款） */
.r-cards{display:flex; flex-direction:column; gap:10px; margin:8px 0 2px;}
.r-bigcard{display:flex; gap:13px; align-items:flex-start; padding:12px 14px; border-radius:16px;
  background:linear-gradient(160deg,#FFFDF4,#FFF3D6);
  border:1.5px solid rgba(255,190,70,0.5);
  box-shadow:0 8px 20px rgba(150,100,10,0.16);
  cursor:pointer; transition:.16s; animation:pop-in .3s cubic-bezier(.2,1.4,.4,1) both;}
.r-bigcard:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(150,100,10,0.24);}
.bc-emoji{font-size:40px; line-height:1; flex:0 0 auto;}
.bc-body{min-width:0;}
.bc-word{font-size:30px; font-weight:900; color:#3A2200; letter-spacing:.6px; line-height:1.15;}
.bc-spell{font-size:12px; color:#A5762A; letter-spacing:1.4px;}
.bc-mean{font-size:16px; font-weight:800; color:#6B4B18; margin-top:2px;}
.bc-ex{font-size:13.5px; color:#5C4A3A; margin-top:5px;}
.bc-tip{font-size:12.5px; color:#8A6A2A; margin-top:3px;}

/* 回复开头先亮出的那张卡（比正文里的紧凑版大一号） */
.r-cardwrap{display:flex; margin:0 0 9px;}
.r-cardwrap .r-wcard{margin:0; padding:6px 15px 6px 11px; gap:11px;}
.r-cardwrap .rw-emoji{font-size:32px;}
.r-cardwrap .rw-word{font-size:27px;}
.r-cardwrap .rw-spell{font-size:11px; letter-spacing:1.2px;}
.r-cardwrap .rw-mean{font-size:14px;}

/* —— 思考动画 —— */
.think-bub{display:flex; align-items:center; gap:9px;}
.tb-dots{display:inline-flex; gap:4px;}
.tb-dots i{width:7px; height:7px; border-radius:50%; background:#34E7F0; display:inline-block;
  animation:tb-dot 1.05s ease-in-out infinite; box-shadow:0 0 8px rgba(34,180,94,0.6);}
.tb-dots i:nth-child(2){animation-delay:.15s; background:#A78BFA;}
.tb-dots i:nth-child(3){animation-delay:.30s; background:#FFD45E;}
@keyframes tb-dot{0%,80%,100%{transform:translateY(0) scale(0.8); opacity:.45;}
  45%{transform:translateY(-6px) scale(1.15); opacity:1;}}
.tb-txt{font-size:12.5px; color:#84755C;}

/* —— 小老师回复：分段 / 多色 / 卡片 —— */
.rich{display:block;}
.rich .r-p{margin:6px 0; padding:7px 11px; border-left:3px solid #34E7F0; border-radius:0 10px 10px 0;
  background:rgba(34,180,94,0.07); font-size:13.5px; line-height:1.78;}
.rich .r-p.c1{border-left-color:#A78BFA; background:rgba(255,159,67,0.10);}
.rich .r-p.c2{border-left-color:#FFD45E; background:rgba(255,212,94,0.10);}
.rich .r-h{display:block; margin:10px 0 3px; font-weight:800; font-size:14px; color:#3F3722;}
.rich .r-list{margin:6px 0 6px 2px; padding-left:20px;}
.rich .r-list li{margin:3px 0; font-size:13.5px; line-height:1.72;}
.rich .r-say{margin:7px 0; padding:9px 12px; border-radius:12px;
  border:1px dashed rgba(34,180,94,0.45);
  background:linear-gradient(135deg, rgba(34,180,94,0.12), rgba(255,159,67,0.12));
  display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.62;}
.rich .r-word{display:inline-block; padding:0 5px; border-radius:6px; cursor:pointer;
  background:rgba(255,212,94,0.16); border-bottom:1.5px solid rgba(255,212,94,0.6);
  color:#3F3722; font-weight:700;}
.rich .r-word:hover{background:rgba(255,212,94,0.34);}
/* 正在学的那个词：回复里第一次出现 → 长成一张紧凑单词卡，跟在句子中间也不破版 */
.rich .r-wcard{display:inline-flex; align-items:center; gap:8px; margin:2px 5px 2px 2px;
  padding:4px 11px 4px 8px; border-radius:13px; cursor:pointer; vertical-align:middle;
  background:linear-gradient(135deg,#FFF9E4,#FFE9AE 60%,#FFD98A);
  border:1.5px solid rgba(255,186,60,.62);
  box-shadow:0 4px 12px rgba(176,116,10,.20), 0 0 0 3px rgba(255,236,180,.30);
  animation:pop-in .34s cubic-bezier(.2,1.4,.4,1) both;}
.rich .r-wcard:hover{transform:translateY(-1px); filter:brightness(1.03);}
.rich .rw-emoji{font-size:24px; line-height:1; flex:0 0 auto;}
.rich .rw-main{display:flex; flex-direction:column; min-width:0;}
.rich .rw-word{font-size:22px; font-weight:900; color:#3A2200; letter-spacing:.5px; line-height:1.1;}
.rich .rw-spell{font-size:9.5px; color:#A5762A; letter-spacing:1px;}
.rich .rw-mean{font-size:12px; font-weight:700; color:#6B4B18; line-height:1.3;}
.rich .r-main-word{display:inline-block; margin:2px 3px; padding:1px 12px; border-radius:12px;
  cursor:pointer; font-size:1.95em; line-height:1.35; font-weight:900; letter-spacing:.6px;
  color:#3A2200; background:linear-gradient(135deg,#FFE082,#FFC53D 62%,#FFB020);
  border-bottom:none; box-shadow:0 6px 16px rgba(255,176,32,.35), 0 0 0 1px rgba(255,255,255,.35) inset;
  vertical-align:middle; animation:pop-in .32s cubic-bezier(.2,1.4,.4,1) both;}
.rich .r-main-word:hover{filter:brightness(1.06); transform:translateY(-1px);}
.rich .r-mini{padding:4px 9px; border-radius:8px; cursor:pointer; font-family:var(--font-body);
  font-size:12px; border:1px solid rgba(34,180,94,0.35); background:rgba(34,180,94,0.10);
  color:#3F3722; white-space:nowrap;}
.rich .r-mini:hover{background:rgba(34,180,94,0.24);}
.rich .r-tools{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap;}

/* —— 拼读字母格 —— */
.sp-tiles{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0;}
.sp-tile{width:34px; height:38px; border-radius:9px; cursor:pointer; font-family:var(--font-body);
  border:1.5px solid rgba(255,159,67,0.5); background:rgba(255,159,67,0.16);
  color:#3F3722; font-size:17px; font-weight:800; transition:.15s;}
.sp-tile:hover:not(:disabled){border-color:#FFD45E; transform:translateY(-1px);}
.sp-slot{width:34px; height:38px; border-radius:9px; border:1.5px dashed rgba(34,180,94,0.5);
  background:#FFFDF6; display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; color:#3F3722;}
.sp-slot.done{border:1.5px solid #4ADE80; color:#84755C; background:rgba(74,222,128,0.14);}
.sp-shake{animation:sp-shake .3s;}
@keyframes sp-shake{25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}