/* ===== 皮肤：配色/顶栏/按钮 从旧版 spanish-ai-tutor 搬过来（2026-09-19）=====
   电脑优先，不做手机适配。
=============================================================== */
:root{
  --bg:#fbf6ef; --card:#ffffff; --ink:#2b2b2b; --muted:#8a8178;
  --brand:#c0392b; --brand2:#e07a5f; --accent:#3d8361; --accent2:#e9c46a;
  --line:#ece3d8; --me:#e07a5f; --shadow:0 6px 20px rgba(120,90,60,.12);
}

*{box-sizing:border-box}
/* ⚠️ 用 height:100%（不是 min-height），flex 子项的 flex:1 才能正确算出高度 */
html,body{margin:0;height:100%}

body{
  font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; height:100%;
}

/* 顶栏：红橙渐变（旧版同款）*/
header{
  padding:12px 20px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow); flex:none;
}
header h1{font-size:18px;margin:0;font-weight:700}
header .spacer{flex:1}
header .hi{font-size:13px}
/* 右上角剩余额度：半透明底的小胶囊，不抢视线但一眼能看到 */
header .quota{
  font-size:12px;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  white-space:nowrap;
}

/* 按钮（旧版同款）*/
.btn{
  border:none;border-radius:10px;padding:8px 14px;font-size:13px;
  cursor:pointer;background:#fff;color:var(--brand);font-weight:600;
  transition:.15s;margin-top:16px;
}
.btn:hover{transform:translateY(-1px)}

/* 页面切换：同一时间只显示一个
   ⚠️ min-height:0 是关键：flex 子项不加它就会被内容撑高、自己不滚动 */
.screen{display:none;flex:1;flex-direction:column;align-items:center;min-height:0;padding:14px}
.screen.active{display:flex;min-height:0}

/* 登录卡片 */
.loginBox{
  background:var(--card); padding:32px; border-radius:16px;
  box-shadow:var(--shadow); width:100%; max-width:340px; margin:auto;
}
.loginBox h1{margin:0 0 6px;color:var(--brand);font-size:22px}
/* 登录页顶部的浏览器提示（品牌浅色底 + 加粗，比旁边的小字更抓眼） */
.loginBox .browserTip{
  /* 左右各探出 8px，好让这一行挤得下；nowrap：折成两行会像两段话，提示就被弱化了 */
  margin:10px -10px 16px; padding:9px 8px; border-radius:10px;
  background:#fdf1e7; border:1px solid var(--brand2);
  color:var(--brand); font-size:15px; font-weight:700;
  text-align:center; line-height:1.5; white-space:nowrap;
}
.loginBox p{color:var(--muted);font-size:13px;margin:0 0 18px}
.loginBox input{
  width:100%;padding:12px;border-radius:10px;
  border:1px solid var(--line);font-size:15px;outline:none;margin-bottom:12px;
  font-family:inherit;background:#fff;
}
.loginBox input:focus{border-color:var(--brand2)}
/* 框里的提示文字统一用浅灰，跟真正输入进去的深色字区分开 */
.loginBox input::placeholder{color:#b0a79c}
.loginBox button{
  width:100%;padding:12px;border:none;border-radius:10px;
  background:var(--brand);color:#fff;font-size:15px;cursor:pointer;font-weight:600;
}
/* 登录页底部的老师联系方式（激活码用完/没有码时，学生知道找谁）
   排布：上面一行小字说明，下面一条浅色胶囊里放「微信号 + 复制按钮」 */
.loginBox .contact{
  margin:16px 0 0; font-size:12px; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.loginBox .wxRow{
  display:inline-flex; align-items:center; gap:10px;
  background:#f7f3ec; border:1px solid var(--line);
  border-radius:10px; padding:5px 6px 5px 12px;
}
.loginBox .wxRow b{color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.3px}
/* ⚠️ width:auto 不能省：上面的 .loginBox button 写了 width:100%，
      不覆盖的话这个按钮会被撑成整行，跟微信号挤成一团 */
.loginBox .copyBtn{
  width:auto; padding:3px 10px; font-size:11px; font-family:inherit;
  border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--muted); cursor:pointer;
}
.loginBox .copyBtn:hover{color:var(--brand);border-color:var(--brand2)}
/* 领码失败时的话（比如"您已经领过激活码啦"）：品牌色小字，下面挂可复制的微信号 */
.loginBox .claimMsg{
  margin:10px 0 0; font-size:12px; color:var(--brand);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; line-height:1.5;
}
.loginBox .claimMsg .wxRow{margin-top:2px}
.loginBox button:disabled{background:#d8cfc4;cursor:default}
/* 「免费领取激活码」：主按钮下面的次级入口，白底描边，不跟「开始练习」抢视觉 */
.loginBox .claimBtn{
  width:100%; margin-top:10px; padding:11px; border-radius:10px;
  border:1px solid var(--brand2); background:#fff; color:var(--brand);
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
}
.loginBox .claimBtn:hover{border-color:var(--brand)}
.loginBox .claimBtn:disabled{color:#b9ada0;border-color:var(--line);cursor:default}

/* 聊天气泡里的「复制微信号」按钮（次数用完的提示下面那个）
   样式跟登录页那个一致，只是多了上边距、不跟文字挤在一起 */
.bubble .copyBtn{
  width:auto; padding:3px 10px; margin-top:8px; font-size:11px; font-family:inherit;
  border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--muted); cursor:pointer;
}
.bubble .copyBtn:hover{color:var(--brand);border-color:var(--brand2)}

/* 选择面板（级别 / 情景 / 角色卡 共用）*/
.panel{
  background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  padding:24px; margin:auto; width:100%; max-width:580px;
}
.panel h2{margin:0 0 18px;color:var(--brand);font-size:18px}

/* 级别方块（6 个）*/
.levels{display:flex;flex-wrap:wrap;gap:12px}
.level{
  width:160px; border:2px solid var(--line); border-radius:14px; padding:16px;
  cursor:pointer; text-align:center; transition:.15s; background:#fff;
}
.level:hover{border-color:var(--brand2)}
.level .lv{font-size:22px;font-weight:800;color:var(--brand)}
.level .nm{font-size:12px;color:var(--muted);margin-top:4px}
.level.empty{opacity:.4;cursor:default}
.level.empty:hover{border-color:var(--line)}

/* ===== 模块选择：两张大卡（登录后第一屏）===== */
.moduleWrap{display:flex;gap:18px;margin:auto;flex-wrap:wrap;justify-content:center}
.moduleCard{
  width:250px;background:var(--card);border:2px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:26px 20px;cursor:pointer;text-align:center;transition:.15s;
}
.moduleCard:hover{border-color:var(--brand2);transform:translateY(-2px)}
.moduleCard .mIcon{font-size:42px;line-height:1}
.moduleCard .mTitle{font-size:20px;font-weight:700;color:var(--brand);margin-top:12px}
.moduleCard .mSub{font-size:13px;color:var(--muted);margin-top:6px}

/* ===== 模块主页：左栏级别 + 右侧内容 ===== */
.hub{
  display:flex;gap:16px;width:100%;max-width:900px;margin:auto;
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:18px;
  flex:1;min-height:0;
}
.hubSide{width:118px;flex:none;border-right:1px solid var(--line);padding-right:14px}
.hubSide .sideTitle{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:10px}
.hubLevel{
  border:2px solid var(--line);border-radius:12px;padding:9px;text-align:center;
  cursor:pointer;margin-bottom:8px;transition:.15s;
}
.hubLevel:hover{border-color:var(--brand2)}
.hubLevel.on{border-color:var(--brand);background:#fff5ec}
.hubLevel.empty{opacity:.45;cursor:default}
.hubLevel.empty:hover{border-color:var(--line)}
.hubLevel .lv{font-size:16px;font-weight:800;color:var(--brand)}
.hubLevel .nm{font-size:11px;color:var(--muted);margin-top:2px}
.hubMain{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.hubHead{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex:none}
.hubHead h2{margin:0;color:var(--brand);font-size:17px}
.hubHead .btn{margin-top:0;padding:5px 12px}
/* 海外篇没有照片，用大 emoji 当图标 */
.pemoji{
  height:104px;display:flex;align-items:center;justify-content:center;
  font-size:42px;background:#f7f3ec;
}
.hubEmpty{color:var(--muted);font-size:13px;padding:8px 2px}

/* 情景 / 角色卡（带图）*/
.pickList{display:flex;flex-wrap:wrap;gap:12px}
.pick{
  width:160px; border:2px solid var(--line); border-radius:14px; overflow:hidden;
  cursor:pointer; background:#fff; transition:.15s;
}
.pick:hover{border-color:var(--brand2)}
.pick img{width:100%;height:104px;object-fit:cover;display:block;background:var(--bg)}
.pick .pname{padding:8px 10px;font-size:13px;font-weight:600}
/* 练过这张卡（说满 8 句）打的勾 */
.pick .pname .tick{color:#2e9e5b;margin-left:5px}
.pick .pname .pprog{color:#9a9a9a;margin-left:6px;font-size:12px}
.pick .pname .pprog.full{color:#2e9e5b}

/* ===== 对话页：左边对话框，右上图，右下提示词 ===== */
.practice{
  display:flex; gap:14px; width:100%; max-width:880px;
  flex:1; min-height:0;
}
.chatSide{
  flex:1; min-width:0; display:flex; flex-direction:column;
  background:var(--card); border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
}
.infoSide{
  width:250px; flex:none; display:flex; flex-direction:column; gap:12px; min-height:0;
}

/* 谁先开口：进对话页顶上那一行（学生自己挑） */
.startRow{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:10px 14px;border-bottom:1px solid var(--line);background:#fff8ec;
}
.startRow span{font-size:13px;color:var(--muted)}
.btn-start{
  border:1px solid var(--brand2);background:#fff;color:var(--brand);
  border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer;font-family:inherit;
}
.btn-start:hover{background:var(--brand);color:#fff}

/* 消息区（真正的滚动容器）*/
.chat{
  flex:1;min-height:0;
  overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:10px;
}

/* 气泡 */
.bubble{
  max-width:75%;padding:10px 14px;border-radius:16px;
  line-height:1.5;word-wrap:break-word;white-space:pre-wrap;font-size:15px;flex:none;
  /* 长西语单词/整句不折行会顶出气泡 → 允许在任意位置断行 */
  overflow-wrap:anywhere;word-break:break-word;
}
.me{background:var(--me);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.ai{background:#f4f1ec;color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.summary{background:#fdf6e3;border:1px solid var(--accent2);align-self:flex-start}
.typing{color:var(--muted);font-style:italic;align-self:flex-start;font-size:13px}

/* 先听后看：每句一行 = 色块(藏) + 🔊 + 👁 */
.sent{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.masked{display:inline-block;height:14px;background:#d9d2c7;border-radius:7px;flex:none}
.masked.revealed{background:transparent;height:auto;color:var(--ink);flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.sent-zh{color:#8a6d3b;font-size:13px;overflow-wrap:anywhere;word-break:break-word}
.btn-mini{border:none;background:#f0ece5;border-radius:8px;padding:2px 7px;cursor:pointer;font-size:12px;flex:none}
.btn-mini:hover{background:#e5dfd4}

/* 纠错行（不朗读，但正确说法带一个 🔊）*/
.sent.fix{margin-top:2px;padding-top:7px;border-top:1px dashed #ddd5c8}
/* 气泡底部：显示译文 / AI助答 */
.extraBar{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #e6e0d6}
.btn-extra{border:1px solid #ddd5c8;background:#fff;border-radius:10px;padding:3px 10px;cursor:pointer;font-size:12px;color:#8a6d3b;font-family:inherit}
.btn-extra:hover{background:#f7f3ec}
.extraBox{margin-top:6px;padding:8px 10px;background:#fff8ec;border-radius:10px;font-size:13px;color:#6b5636;line-height:1.6;white-space:pre-wrap}
/* 中文鼓励小气泡 */
.praise{display:inline-block;margin-top:8px;background:#fff3cd;border:1px solid #f0d9a0;color:#8a6d3b;border-radius:12px;padding:5px 10px;font-size:13px}

/* 输入区 */
.inputRow{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);flex:none}
.inputRow input{
  flex:1;padding:12px;border-radius:20px;
  border:1px solid var(--line);font-size:15px;outline:none;font-family:inherit;
}
.inputRow input:focus{border-color:var(--brand2)}
.inputRow button{
  padding:0 20px;border:none;border-radius:20px;
  background:var(--brand);color:#fff;cursor:pointer;font-weight:600;
}
.inputRow button:disabled{background:#d8cfc4;cursor:default}
/* 麦克风按钮：平时灰色；正在听的时候变红 + 一圈圈扩散的光环（照旧站的做法，最醒目） */
.inputRow button.mic{background:var(--muted);padding:0 16px}
.inputRow button.mic.on{background:var(--brand);animation:micPulse 1.1s ease-out infinite}
@keyframes micPulse{
  0%  {box-shadow:0 0 0 0 rgba(192,57,43,.55)}
  70% {box-shadow:0 0 0 12px rgba(192,57,43,0)}
  100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}
}
/* 按钮里那颗白点跟着闪，双重提示：看一眼就知道"现在可以开口了" */
.inputRow button.mic.on::before{
  content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#fff;margin:0 7px 1px 0;vertical-align:middle;animation:micBlink 1.1s infinite;
}
@keyframes micBlink{0%,100%{opacity:1}50%{opacity:.2}}

/* 右上：角色卡图片 */
.cardImg{
  width:100%; border-radius:14px; box-shadow:var(--shadow);
  display:block; flex:none;
}
/* 右下：给学生看的提示词 */
.tipBox{
  flex:1; min-height:0; overflow-y:auto;
  background:var(--card); border-radius:14px; box-shadow:var(--shadow); padding:12px 14px;
}
.tipHead{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.tipBody{font-size:13px;line-height:1.8;white-space:pre-wrap}
/* 顶部身份条：你扮演 / 对方扮演 */
.whoBar{
  background:#fff5ec; border:1px solid #f3ddc8; border-radius:10px;
  padding:8px 10px; margin-bottom:10px; font-size:13px; line-height:1.7;
}
.whoBar b{color:var(--brand)}