/* 职业素质英语课堂教学平台 —— 投影友好深色主题（默认） + 浅色打印模式 */
:root{
  --bg:#101826;
  --bg2:#16202f;
  --card:#1c2839;
  --fg:#f2f5fa;
  --muted:#9fb0c7;
  --accent:#ffd54f;
  --accent2:#4fc3f7;
  --ok:#66bb6a;
  --err:#ef5350;
  --border:#33445c;
}
body.light{
  --bg:#f2f5fa;
  --bg2:#ffffff;
  --card:#ffffff;
  --fg:#1c2733;
  --muted:#5b6b7f;
  --accent:#b8860b;
  --accent2:#0277bd;
  --ok:#2e7d32;
  --err:#c62828;
  --border:#c3cfdd;
}
*{box-sizing:border-box;}
html{font-size:20px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  font-size:1.1rem;
  line-height:1.55;
}
.wrap{max-width:1280px;margin:0 auto;padding:18px 22px 60px;}
header.site{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:3px solid var(--accent);padding-bottom:12px;margin-bottom:18px;
}
header.site h1{font-size:2.1rem;margin:0;color:var(--accent);}
header.site .sub{font-size:1.05rem;color:var(--muted);margin-top:4px;}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
h2{font-size:1.8rem;margin:.6em 0 .4em;color:var(--accent);}
h3{font-size:1.35rem;margin:.5em 0 .3em;color:var(--accent2);}
p{margin:.4em 0;}
.muted{color:var(--muted);}
.card{background:var(--card);border:2px solid var(--border);border-radius:.9rem;padding:1.1rem 1.3rem;margin:14px 0;}
.card.highlight{border-color:var(--accent);}
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.grid-6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.btn{
  font-size:1.15rem;font-weight:600;color:var(--fg);background:var(--bg2);
  border:2px solid var(--border);border-radius:.6rem;padding:.55rem 1.1rem;cursor:pointer;
  font-family:inherit;min-height:44px;text-decoration:none;
}
.btn:hover{border-color:var(--accent);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);color:#1a1a1a;border-color:var(--accent);}
.btn-big{font-size:1.45rem;padding:.8rem 1.6rem;min-height:60px;}
.btn-ok{background:var(--ok);color:#0d1a0d;border-color:var(--ok);}
.btn-err{background:var(--err);color:#fff;border-color:var(--err);}
.btn.ghost{background:transparent;}
.btn.small{font-size:1rem;padding:.35rem .7rem;min-height:38px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.tabs .btn{border-radius:.9rem;}
.tabs .btn.active{background:var(--accent);color:#1a1a1a;border-color:var(--accent);}
section.panel{display:none;}
section.panel.active{display:block;}
table.vocab{width:100%;border-collapse:collapse;font-size:1.2rem;}
table.vocab th,table.vocab td{border:2px solid var(--border);padding:.5rem .8rem;text-align:left;vertical-align:top;}
table.vocab th{background:var(--bg2);color:var(--accent);}
table.vocab td.en{font-weight:700;}
table.vocab td.ipa{color:var(--accent2);}
table.vocab.hide-cn td.cn{visibility:hidden;}
table.vocab tr{transition:background .15s;}
table.vocab tbody tr:hover{background:var(--bg2);}
table.data{width:100%;border-collapse:collapse;font-size:1.05rem;}
table.data th,table.data td{border:1px solid var(--border);padding:.4rem .6rem;text-align:left;}
table.data th{background:var(--bg2);}
.para{border-left:5px solid var(--accent2);padding:.5rem 1rem;margin:12px 0;background:var(--card);border-radius:0 .6rem .6rem 0;}
.para .en{font-size:1.25rem;}
.para .zh{color:var(--muted);margin-top:6px;}
.zh-hidden .zh{display:none;}
#resumeBox.zh-hidden .resume-zh{display:none;}
.audio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;}
.audio-item{background:var(--card);border:2px solid var(--border);border-radius:.8rem;padding:12px 14px;}
.audio-item h4{margin:0 0 6px;font-size:1.15rem;color:var(--accent);}
.audio-item audio{width:100%;}
.inline-audio{width:100%;max-width:640px;}
/* 识别匹配 */
.match-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.match-col{display:flex;flex-direction:column;gap:12px;}
.m-item{
  font-size:1.25rem;font-weight:700;padding:14px 16px;border-radius:.7rem;text-align:center;cursor:pointer;
  background:var(--bg2);border:3px solid var(--border);min-height:60px;display:flex;align-items:center;justify-content:center;
  color:var(--fg);
}
.m-item.sel{background:var(--accent);color:#1a1a1a;border-color:var(--accent);}
.m-item.ok{background:var(--ok);color:#0d1a0d;border-color:var(--ok);opacity:.8;cursor:default;}
.m-item.bad{background:var(--err);border-color:var(--err);}
/* 翻牌 */
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:760px;margin:0 auto;}
.flip-card{height:120px;border-radius:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;text-align:center;padding:8px;background:var(--accent);color:#1a1a1a;border:3px solid var(--accent);}
.flip-card.face-down{background:var(--bg2);color:var(--muted);border-color:var(--border);}
.flip-card.matched{background:var(--ok);color:#0d1a0d;border-color:var(--ok);cursor:default;}
/* 快问快答 */
.qa-q{font-size:1.8rem;font-weight:700;text-align:center;margin:16px 0;}
.qa-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.qa-opts .m-item{font-size:1.25rem;}
.m-item.right{background:var(--ok);color:#0d1a0d;border-color:var(--ok);}
.m-item.wrong{background:var(--err);border-color:var(--err);}
.qa-ctrl{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
.group-award{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.group-award .btn{font-size:1.05rem;}
/* 转盘 */
.roll-num{font-size:6rem;font-weight:800;text-align:center;color:var(--accent);min-height:1.2em;line-height:1.1;font-variant-numeric:tabular-nums;margin:10px 0;}
.wheel-result{font-size:1.8rem;font-weight:800;color:var(--accent);min-height:2.2em;text-align:center;}
/* 计时器 */
.timer-num{font-size:5.5rem;font-weight:800;text-align:center;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1;margin:10px 0;}
.timer-num.warn{color:var(--err);}
.timer-ctrl{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
/* 选项选中态（词汇测试题型/题量） */
.btn.sel{background:var(--accent);color:#1a1a1a;border-color:var(--accent);}
/* 学号个人积分板 */
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:12px;}
.stu-tile{background:var(--bg2);border:3px solid var(--border);border-radius:.6rem;padding:.5rem .3rem;text-align:center;cursor:pointer;}
.stu-tile .num{font-weight:800;font-size:1.35rem;color:var(--accent2);line-height:1.2;}
.stu-tile .name{font-size:1rem;color:var(--fg);line-height:1.3;margin-top:2px;word-break:break-all;}
.stu-tile .pt{color:var(--muted);font-size:.95rem;}
.stu-tile.sel{background:var(--accent);border-color:var(--accent);}
.stu-tile.sel .num,.stu-tile.sel .name,.stu-tile.sel .pt{color:#1a1a1a;}
.stu-tile.sel .pt{font-size:1.1rem;font-weight:800;}
.lucky-score{display:inline-block;padding:.15rem .65rem;border-radius:.5rem;background:var(--accent);color:#1a1a1a;font-weight:800;font-size:1.4rem;}
@keyframes scorePulse{0%{transform:scale(1);}40%{transform:scale(1.3);}100%{transform:scale(1);}}
.score-pulse{animation:scorePulse .55s ease;}
/* 积分板 */
.group-row{display:grid;grid-template-columns:1.4fr .7fr 2fr;gap:10px;align-items:center;padding:10px 0;border-bottom:2px solid var(--border);}
.group-row input{font-size:1.2rem;padding:.4rem .6rem;background:var(--bg2);color:var(--fg);border:2px solid var(--border);border-radius:.5rem;width:100%;font-family:inherit;}
.group-row .score{font-size:1.8rem;font-weight:800;text-align:center;color:var(--accent);font-variant-numeric:tabular-nums;}
.group-row .btns{display:flex;gap:8px;flex-wrap:wrap;}
/* 测试 */
.test-form label{display:block;font-size:1.15rem;margin:12px 0 4px;font-weight:600;}
.test-form input[type=text]{font-size:1.25rem;padding:.55rem .8rem;background:var(--bg2);color:var(--fg);border:2px solid var(--border);border-radius:.5rem;width:100%;max-width:420px;font-family:inherit;}
.q-block{background:var(--bg2);border:2px solid var(--border);border-radius:.7rem;padding:14px 16px;margin:12px 0;}
.q-block .q-text{font-size:1.3rem;font-weight:700;margin-bottom:10px;}
.q-block label.opt{display:block;font-size:1.2rem;padding:.55rem .8rem;margin:6px 0;border:2px solid var(--border);border-radius:.5rem;cursor:pointer;background:var(--card);}
.q-block label.opt:hover{border-color:var(--accent);}
.q-block label.opt input{margin-right:10px;transform:scale(1.4);vertical-align:middle;}
.q-block input[type=text].spell{font-size:1.35rem;padding:.5rem .7rem;border:2px solid var(--border);border-radius:.5rem;background:var(--card);color:var(--fg);font-family:inherit;width:100%;max-width:360px;}
.result-num{font-size:3rem;font-weight:800;color:var(--accent);text-align:center;margin:10px 0;}
.result-ok{color:var(--ok);}
.result-bad{color:var(--err);}
.notice{background:var(--bg2);border-left:6px solid var(--accent2);padding:.7rem 1rem;border-radius:0 .5rem .5rem 0;margin:12px 0;}
.ex-ans{display:none;margin-top:8px;font-size:1.35rem;font-weight:800;color:var(--ok);}
.ex-ans.show{display:block;}
.script-box{display:none;margin-top:10px;background:var(--bg2);border:2px dashed var(--border);border-radius:.6rem;padding:10px 14px;font-size:1.05rem;line-height:1.7;}
.script-box.show{display:block;}
footer.site{margin-top:40px;border-top:2px solid var(--border);padding-top:14px;color:var(--muted);font-size:.95rem;}
.unit-cards .unit-card{background:var(--card);border:3px solid var(--border);border-radius:.9rem;padding:1.2rem;text-decoration:none;color:var(--fg);display:block;}
.unit-cards .unit-card:hover{border-color:var(--accent);}
.unit-cards .unit-card .u-num{font-size:1rem;color:var(--accent2);font-weight:700;}
.unit-cards .unit-card .u-name{font-size:1.6rem;font-weight:800;margin:6px 0;}
.unit-cards .unit-card .u-topic{color:var(--muted);}
.unit-cards .unit-card .badge{display:inline-block;background:var(--bg2);border:2px solid var(--border);border-radius:1rem;padding:.15rem .7rem;font-size:.95rem;color:var(--muted);margin-top:8px;}
.unit-cards a.unit-card.done .badge{color:var(--ok);border-color:var(--ok);}
@media (max-width:760px){
  .match-wrap{grid-template-columns:1fr;}
  .qa-opts{grid-template-columns:1fr;}
  .flip-grid{grid-template-columns:repeat(4,1fr);gap:8px;}
  .flip-card{height:90px;font-size:.9rem;}
  .group-row{grid-template-columns:1fr;gap:6px;}
  html{font-size:17px;}
}
@media print{
  body{background:#fff;color:#111;}
  .card,table.vocab th,table.vocab td,.audio-item,.q-block{background:#fff;border-color:#888;color:#111;}
}

/* ==========================================================================
   老浏览器兼容排版
   背景：CSS Grid 要 Chrome 57 以上才支持，flex 的 gap 要 Chrome 84 以上才支持。
   教室里的老电脑不满足，会导致"积分板一个学生一行""识别匹配上下堆叠、无法配对"
   "翻牌配对一个词条一行"等排版塌陷。
   做法：js/common.js 用几何量测探测能力，不支持时给 <html> 加 no-grid / no-flexgap，
   下面这些规则只在老电脑上生效，现代浏览器完全不受影响（仍用原来的 grid 排版）。
   ========================================================================== */

/* 1) 无 Grid：改用 flex，用外边距代替 gap（flex:1 1 基准宽 ≈ auto-fit + 1fr）
      显式写 gap:0：老浏览器本来就会忽略 gap，这里写死可以保证间距只由 margin 决定，
      避免"浏览器支持 flex gap 但不支持 grid"这类组合下间距叠加把一行挤掉。 */
html.no-grid .grid{display:flex;flex-wrap:wrap;gap:0;}
html.no-grid .grid > *{box-sizing:border-box;min-width:0;word-wrap:break-word;margin:0 8px 16px;}
html.no-grid .grid-2 > *{flex:1 1 300px;}
html.no-grid .grid-3 > *{flex:1 1 240px;}
html.no-grid .grid-4 > *{flex:1 1 200px;}
html.no-grid .grid-6 > *{flex:1 1 150px;}
html.no-grid .audio-grid{display:flex;flex-wrap:wrap;gap:0;}
html.no-grid .audio-grid > *{box-sizing:border-box;min-width:0;flex:1 1 340px;margin:0 7px 14px;}

/* 2) 识别匹配：左右两栏并排（原来 grid-template-columns:1fr 1fr） */
html.no-grid .match-wrap{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;}
html.no-grid .match-wrap > *{box-sizing:border-box;min-width:0;flex:1 1 380px;margin:0 10px 12px;}

/* 3) 翻牌配对：一行 4 张（原来 repeat(4,1fr)） */
html.no-grid .flip-grid{display:flex;flex-wrap:wrap;gap:0;max-width:760px;margin:0 auto;}
html.no-grid .flip-grid > *{box-sizing:border-box;min-width:0;word-wrap:break-word;
  width:calc(25% - 20px);margin:0 8px 14px;}

/* 4) 快问快答：一行 2 个选项（原来 1fr 1fr） */
html.no-grid .qa-opts{display:flex;flex-wrap:wrap;gap:0;}
html.no-grid .qa-opts > *{box-sizing:border-box;min-width:0;word-wrap:break-word;
  width:calc(50% - 18px);margin:0 8px 14px;}

/* 5) 积分板：固定宽小卡自动换行（原来 auto-fill minmax(112px,1fr)） */
html.no-grid .stu-grid{display:flex;flex-wrap:wrap;gap:0;}
html.no-grid .stu-grid > *{box-sizing:border-box;width:112px;flex:0 0 112px;margin:0 5px 10px;}

/* 6) 老式三列行（备用） */
html.no-grid .group-row{display:flex;flex-wrap:wrap;align-items:center;gap:0;}
html.no-grid .group-row > *{box-sizing:border-box;padding:0 5px;}
html.no-grid .group-row > *:nth-child(1){flex:1 1 220px;}
html.no-grid .group-row > *:nth-child(2){flex:0 0 90px;}
html.no-grid .group-row > *:nth-child(3){flex:1 1 260px;}

/* 7) flex 不支持 gap：给按钮/标签之间补外边距（Chrome 84 以下） */
html.no-flexgap header.site > *{margin:0 12px 10px 0;}
html.no-flexgap .tools > *{margin:0 10px 8px 0;}
html.no-flexgap .tabs > *{margin:0 10px 10px 0;}
html.no-flexgap .match-col > *{margin-bottom:12px;}
html.no-flexgap .qa-ctrl > *{margin:0 6px 8px;}
html.no-flexgap .group-award > *{margin:0 5px 8px;}
html.no-flexgap .timer-ctrl > *{margin:0 6px 8px;}
html.no-flexgap .group-row .btns > *{margin:0 8px 6px 0;}
html.no-flexgap h3 .btn{margin-left:12px;}

/* ==========================================================================
   界面美化增强（统一视觉，2026-10）
   说明：以下为渐进增强样式；老浏览器（no-grid/no-flexgap）不受影响。
   ========================================================================== */

/* 1) 全局背景：柔和环境光 */
body{
  background:
    radial-gradient(1100px 520px at 12% -6%, rgba(79,195,247,.10), transparent 62%),
    radial-gradient(900px 480px at 100% 110%, rgba(255,213,79,.08), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body.light{
  background:
    radial-gradient(1100px 520px at 12% -6%, rgba(2,119,189,.08), transparent 62%),
    radial-gradient(900px 480px at 100% 110%, rgba(184,134,11,.06), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* 2) 卡片：柔和阴影 + 悬停上浮 */
.card{
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  border-color:var(--accent2);
  box-shadow:0 10px 26px rgba(0,0,0,.20);
  transform:translateY(-2px);
}
.card.highlight:hover{border-color:var(--accent);}

/* 3) 按钮：统一交互动效 */
.btn{transition:border-color .15s, background .15s, color .15s, transform .12s, box-shadow .15s;}
.btn:hover{border-color:var(--accent);}
.btn-primary:hover,.btn-ok:hover,.btn-err:hover{box-shadow:0 4px 12px rgba(0,0,0,.22);}
.btn:active{transform:scale(.95);}

/* 4) 页头：渐变分隔线 */
header.site{position:relative;border-bottom:none;padding-bottom:14px;}
header.site::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), transparent 85%);
}
header.site h1{letter-spacing:.01em;text-shadow:0 2px 14px rgba(0,0,0,.25);}

/* 5) 标签页按钮 */
.tabs .btn{transition:all .15s;}
.tabs .btn:not(.active):hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.14);}

/* 6) 表格表头强调 */
table.vocab th{border-bottom:3px solid var(--accent);}
table.data th{border-bottom:2px solid var(--accent);}
table.data tbody tr{transition:background .12s;}

/* 7) 单元卡 */
.unit-cards .unit-card{
  position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.unit-cards .unit-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));opacity:.85;
}
.unit-cards .unit-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

/* 8) 首页/后台主卡片统一 */
.home-card{
  position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.home-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));opacity:.85;
}
.home-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.22);}

/* 9) 抽题卡片增强（quiz.js 已输出 .quiz-card，补充动效与内部排版） */
.quiz-card{transition:border-color .2s, box-shadow .2s, transform .2s;}
.quiz-card.has-question{box-shadow:0 8px 24px rgba(0,0,0,.18);}
.quiz-card .quiz-q{font-size:1.7rem;font-weight:800;line-height:1.5;color:var(--fg,#f2f5fa);}
.quiz-card .quiz-opts{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;text-align:left;}
.quiz-card .quiz-opt{
  padding:.7rem 1rem;border-radius:.6rem;border:2px solid var(--border,#33445c);
  background:var(--card,#1c2839);font-size:1.15rem;
}
.quiz-card .quiz-ans{color:var(--ok,#66bb6a);font-weight:800;font-size:1.25rem;margin-top:12px;}

/* 10) 后台消息条 */
.msg{border-radius:.6rem;border:2px solid transparent;}
.msg.ok{border-color:var(--ok);}
.msg.err{border-color:var(--err);}

@media (max-width:760px){
  .quiz-card .quiz-q{font-size:1.3rem;}
}