/* ===========================================================
   TFS 俄语 · 编辑排版 + 构成主义
   =========================================================== */
:root{
  --paper:#f1ece0;          /* 暖纸底 */
  --paper-2:#e8e1d1;
  --card:#fbf8f1;
  --ink:#191713;            /* 近黑墨 */
  --ink-soft:#5a544a;
  --muted:#938b7c;
  --line:#d8cfbc;
  --line-2:#cabfa8;
  --red:#d6332e;            /* 信号红 */
  --red-deep:#b21f1f;
  --teal:#1f5c54;           /* 第二色 */
  --gold:#c98a1b;
  --cjk:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
  --disp:"Oswald",var(--cjk);
  --serif:"Spectral",Georgia,"Songti SC",serif;
  --rail-w:300px;
  --shadow:0 18px 40px -22px rgba(25,23,19,.45);
}
*{box-sizing:border-box;}
/* 让 hidden 属性真正隐藏元素：覆盖下方 .mgr-mask/.lightbox 等的 display 设置 */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{
  font-family:var(--cjk);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% -5%, rgba(214,51,46,.06), transparent 40%),
    radial-gradient(circle at 105% 8%, rgba(31,92,84,.07), transparent 45%);
  min-height:100vh;
}
/* 纸张颗粒 */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------------- 顶栏 ---------------- */
.masthead{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 34px; gap:20px;
  border-bottom:3px solid var(--ink);
  background:var(--paper);
}
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:6px;
  background:repeating-linear-gradient(90deg,var(--red) 0 26px,transparent 26px 40px);
  opacity:.85;
}
.mast-left{display:flex; align-items:center; gap:18px;}
.logo{
  font-family:var(--disp); font-weight:700; font-size:46px; line-height:.8;
  letter-spacing:1px; color:#fff; background:var(--red);
  padding:10px 14px 8px; transform:rotate(-2deg);
  box-shadow:5px 5px 0 var(--ink);
}
.logo-meta .ru-title{
  font-family:var(--disp); font-weight:600; font-size:23px; letter-spacing:4px;
}
.logo-meta .cn-title{
  font-size:13px; color:var(--ink-soft); letter-spacing:3px; margin-top:2px;
}
.hdr-upload{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--disp); letter-spacing:2px; font-size:14px; color:#fff;
  background:var(--ink); border:2px solid var(--ink); padding:9px 16px; border-radius:3px;
  box-shadow:4px 4px 0 var(--red); transition:.15s;
}
.hdr-upload:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red);}
.hdr-upload .hu-ico{
  font-weight:700; background:var(--red); color:#fff; width:20px; height:20px;
  display:grid; place-items:center; border-radius:50%; font-size:14px;
}

/* ---------------- 目录（下拉，放在标题前） ---------------- */
.toc{position:relative; margin-bottom:20px; z-index:5;}
.toc-btn{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--card); border:2px solid var(--ink); border-radius:6px;
  padding:12px 16px; text-align:left; transition:.15s; box-shadow:3px 3px 0 var(--line-2);
}
.toc-btn:hover{box-shadow:5px 5px 0 var(--line-2);}
.toc-btn .tb-ico{font-size:18px; color:var(--red);}
.toc-btn .tb-label{font-family:var(--disp); letter-spacing:2px; font-size:14px; color:var(--ink-soft);}
.toc-btn .tb-cur{
  flex:1; min-width:0; font-family:var(--serif); font-size:16px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toc-btn .tb-caret{font-size:14px; color:var(--muted); transition:.2s;}
.toc.open .tb-caret{transform:rotate(180deg);}
.toc-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30;
  background:var(--card); border:2px solid var(--ink); border-radius:8px;
  box-shadow:var(--shadow); max-height:60vh; overflow-y:auto; padding:6px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:4px;
}
.toc-item{
  display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  background:transparent; border:0; border-radius:6px; padding:9px 10px; transition:.12s;
}
.toc-item:hover{background:rgba(25,23,19,.06);}
.toc-item.cur{background:var(--ink);}
.toc-item.cur .ti-num{color:var(--red);}
.toc-item.cur .ti-title{color:#fdfaf2;}
.ti-num{
  font-family:var(--disp); font-weight:700; font-size:22px; min-width:30px; text-align:center;
  color:var(--ink);
}
.ti-title{
  flex:1; min-width:0; font-size:13px; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ti-dots{display:flex; gap:3px;}
.dot{
  width:17px; height:17px; border-radius:50%; font-size:9px; font-weight:700;
  display:grid; place-items:center; font-family:var(--cjk);
  background:var(--line-2); color:#8a8174; font-style:normal;
}
.dot.on{color:#fff;}
.dot.v.on{background:var(--teal);}
.dot.a.on{background:var(--gold);}
.dot.h.on{background:var(--red);}

/* ---------------- 主舞台 ---------------- */
.stage{
  position:relative; z-index:2; display:block;
  max-width:1240px; margin:0 auto; width:100%;
  padding:26px 32px 70px; min-width:0;
}
.loading{color:var(--muted); font-family:var(--disp); letter-spacing:2px; padding:60px;}

.lesson-hero{
  position:relative; margin-bottom:26px; padding-bottom:18px;
  border-bottom:2px solid var(--ink);
}
.lesson-hero .urok{
  font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:3px;
  color:var(--red);
}
.lesson-hero h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.6vw,42px);
  margin:6px 0 0; line-height:1.12; color:var(--ink);
}
.lesson-hero .big-num{
  position:absolute; right:0; top:-14px;
  font-family:var(--disp); font-weight:700; font-size:96px; line-height:.8;
  color:transparent; -webkit-text-stroke:2px var(--line-2); user-select:none;
}

/* 选项卡 */
.tabs{display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap;}
.tab{
  font-family:var(--disp); letter-spacing:2px; font-size:14px;
  padding:9px 20px; cursor:pointer; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink); border-radius:2px;
  display:flex; align-items:center; gap:8px; transition:.15s;
}
.tab .cn{font-family:var(--cjk); font-size:13px;}
.tab:hover{background:rgba(25,23,19,.06);}
.tab.active{background:var(--ink); color:#fff;}
.tab .mini{
  width:8px; height:8px; border-radius:50%; background:var(--line-2);
}
.tab.active .mini, .tab .mini.on{background:var(--red);}
.tab .mini.on{background:var(--teal);}

.panel{animation:rise .35s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}

/* 字母表 */
.alpha-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px;
}
.acell{
  display:grid; place-items:center; min-height:96px; border-radius:10px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  font-family:var(--serif); font-weight:600; font-size:34px; color:var(--ink);
  transition:.15s;
}
.acell:hover{transform:translateY(-3px); border-color:var(--red); color:var(--red);}
@media (max-width:900px){
  .alpha-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:9px;}
  .acell{min-height:76px; font-size:27px;}
}

/* 词汇表：大图铺满 */
.vocab-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));
  gap:20px;
}
.vcard{
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; box-shadow:var(--shadow); cursor:zoom-in; transition:.2s;
}
.vcard:hover{transform:translateY(-4px); box-shadow:0 26px 48px -24px rgba(25,23,19,.55);}
.vcard img{display:block; width:100%; height:auto;}
.vcard .vcap{
  font-family:var(--disp); font-size:12px; letter-spacing:2px;
  padding:8px 12px; color:var(--ink-soft); border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
}

/* 讲义：HTML 直接内嵌（无外框，自适应高度） */
.handout-wrap{ background:transparent; }
.handout-frame{
  display:block; width:100%; border:0; background:transparent; min-height:60vh;
}

/* 讲义：PDF.js 内嵌（旧 PDF 兜底） */
.pdf-wrap{
  border:2px solid var(--ink); border-radius:6px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
}
.pdf-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--ink); color:#fff; gap:12px; flex-wrap:wrap;
}
.pdf-bar .pb-name{font-family:var(--disp); letter-spacing:1px; font-size:14px;}
.pdf-pages{
  max-height:82vh; overflow-y:auto; background:#e9e4d8; padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.pdf-page{
  display:block; max-width:100%; background:#fff;
  box-shadow:0 8px 24px -10px rgba(25,23,19,.5); border-radius:2px;
}
.pdf-loading{color:var(--ink-soft); font-family:var(--disp); letter-spacing:2px; padding:40px;}
.pdf-loading a{color:var(--red-deep);}

/* 录音：大喇叭 */
.audio-stage{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:34px; box-shadow:var(--shadow);
}
.speaker{
  flex:0 0 auto; width:128px; height:128px; border-radius:50%; cursor:pointer;
  border:3px solid var(--ink); background:radial-gradient(circle at 35% 30%,#fff,var(--paper-2));
  display:grid; place-items:center; position:relative; transition:.18s;
  box-shadow:6px 6px 0 var(--gold);
}
.speaker:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--gold);}
.speaker.playing{box-shadow:6px 6px 0 var(--red); border-color:var(--red);}
.speaker .spk-ic{width:62px; height:62px; fill:var(--ink); stroke:var(--ink);
  stroke-width:2; stroke-linecap:round; fill-rule:evenodd;}
.speaker .spk-ic .w1,.speaker .spk-ic .w2{fill:none;}
.speaker.playing .spk-ic{fill:var(--red); stroke:var(--red);}
.speaker .spk-state{
  position:absolute; right:-4px; bottom:-4px; width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; font-size:14px;
}
.speaker.playing .spk-state{background:var(--red);}
.audio-meta{flex:1; min-width:240px;}
.am-title{font-family:var(--serif); font-size:22px; color:var(--ink);}
.am-sub{color:var(--muted); font-size:13px; margin:4px 0 14px;}
.audio-meta audio{display:block; width:100%; margin-bottom:12px;}
.audio-list{display:flex; flex-direction:column; gap:16px;}

/* 单词页右下角固定喇叭（点击播放 / 循环倍速） */
.vocab-fab{
  position:fixed; right:22px; bottom:22px; z-index:44;
  width:64px; height:64px; border-radius:50%; cursor:pointer;
  border:3px solid var(--ink); background:radial-gradient(circle at 35% 30%,#fff,var(--paper-2));
  display:grid; place-items:center; position:fixed; transition:.15s;
  box-shadow:5px 5px 0 var(--gold);
}
.vocab-fab:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--gold);}
.vocab-fab.playing{border-color:var(--red); box-shadow:5px 5px 0 var(--red);}
.vocab-fab .spk-ic{width:30px; height:30px; fill:var(--ink); stroke:var(--ink);
  stroke-width:2; stroke-linecap:round; fill-rule:evenodd;}
.vocab-fab .spk-ic .w1,.vocab-fab .spk-ic .w2{fill:none;}
.vocab-fab.playing .spk-ic{fill:var(--red); stroke:var(--red);}
.vocab-fab .vf-rate{
  position:absolute; right:-4px; bottom:-4px; min-width:26px; height:24px; padding:0 5px;
  border-radius:12px; background:var(--ink); color:#fff; display:grid; place-items:center;
  font-family:var(--disp); font-size:12px; letter-spacing:.5px;
}
.vocab-fab.playing .vf-rate{background:var(--red);}

/* 空状态 */
.empty{
  border:2px dashed var(--line-2); border-radius:8px; background:rgba(255,255,255,.4);
  padding:48px 30px; text-align:center;
}
.empty .e-icon{font-size:40px; opacity:.5;}
.empty .e-title{font-family:var(--serif); font-size:20px; margin:10px 0 4px; color:var(--ink);}
.empty .e-sub{color:var(--muted); font-size:13px; margin-bottom:20px;}

/* 按钮 */
.btn{
  font-family:var(--disp); letter-spacing:2px; font-size:14px; cursor:pointer;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  padding:10px 22px; border-radius:2px; transition:.15s; display:inline-flex;
  align-items:center; gap:8px;
}
.btn:hover{background:var(--ink); color:#fff;}
.btn-primary{background:var(--red); border-color:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-deep); border-color:var(--red-deep);}
.btn-primary:disabled{opacity:.45; cursor:not-allowed; background:var(--muted); border-color:var(--muted);}
.btn-ghost{border-color:#fff; color:#fff;}
.btn-ghost:hover{background:#fff; color:var(--ink);}
.btn-sm{padding:7px 14px; font-size:12px;}

.panel-actions{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap;}

/* ---------------- 弹窗 ---------------- */
.modal-mask{
  position:fixed; inset:0; z-index:50; background:rgba(25,23,19,.55);
  display:grid; place-items:center; backdrop-filter:blur(3px); animation:fade .2s ease;
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{
  position:relative; width:min(440px,92vw); background:var(--card);
  border:2px solid var(--ink); border-radius:8px; padding:30px;
  box-shadow:14px 14px 0 var(--red); animation:rise .25s ease both;
}
.modal-x{
  position:absolute; right:14px; top:10px; background:none; border:0;
  font-size:26px; cursor:pointer; color:var(--ink-soft); line-height:1;
}
.modal-kicker{font-family:var(--disp); letter-spacing:3px; color:var(--red); font-size:13px;}
.modal-title{font-family:var(--serif); font-size:24px; margin:4px 0 18px;}
.modal-hint{color:var(--ink-soft); font-size:13.5px; margin:0 0 14px;}
.field{
  width:100%; padding:12px 14px; font-size:15px; border:1.5px solid var(--line-2);
  border-radius:4px; background:#fff; color:var(--ink); margin-bottom:8px;
  font-family:var(--cjk);
}
.field:focus{outline:none; border-color:var(--ink);}
.modal-err{color:var(--red-deep); font-size:13px; min-height:18px; margin:2px 0 10px;}

.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border:2px dashed var(--line-2); border-radius:8px; padding:30px;
  cursor:pointer; background:rgba(255,255,255,.5); transition:.15s; text-align:center;
}
.dropzone:hover,.dropzone.drag{border-color:var(--red); background:rgba(214,51,46,.05);}
.dz-icon{font-size:34px; color:var(--red); line-height:1;}
.dz-text{font-size:14px; color:var(--ink);}
.dz-accept{font-size:11px; color:var(--muted); letter-spacing:1px;}
.upload-bar{height:8px; background:var(--paper-2); border-radius:8px; overflow:hidden; margin:14px 0 6px;}
.upload-bar span{display:block; height:100%; width:0; background:var(--red); transition:width .2s;}

/* ---------------- 灯箱 ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:60; background:rgba(25,23,19,.9);
  display:grid; place-items:center; padding:30px; animation:fade .2s ease;
}
.lightbox img{max-width:96vw; max-height:92vh; box-shadow:0 30px 80px rgba(0,0,0,.6); border-radius:4px;}
.lb-x{
  position:absolute; right:24px; top:18px; background:none; border:0; color:#fff;
  font-size:40px; cursor:pointer; line-height:1;
}

/* ---------------- 右下角 课件上传 入口 ---------------- */
.upload-fab{
  position:fixed; right:24px; bottom:24px; z-index:46;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; border:2px solid var(--ink);
  font-family:var(--disp); letter-spacing:2px; font-size:14px;
  padding:12px 18px; border-radius:3px; cursor:pointer;
  box-shadow:6px 6px 0 var(--red); transition:.15s;
}
.upload-fab:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--red);}
.upload-fab .fab-ico{
  font-weight:700; font-size:16px; background:var(--red); color:#fff;
  width:22px; height:22px; display:grid; place-items:center; border-radius:50%;
}

/* ---------------- 课件管理面板 ---------------- */
.mgr-mask{
  position:fixed; inset:0; z-index:55; background:rgba(25,23,19,.6);
  display:grid; place-items:center; backdrop-filter:blur(3px); animation:fade .2s ease;
}
.mgr{
  position:relative; width:min(820px,94vw); max-height:88vh; display:flex; flex-direction:column;
  background:var(--card); border:2px solid var(--ink); border-radius:8px;
  box-shadow:14px 14px 0 var(--red); animation:rise .25s ease both; overflow:hidden;
}
.mgr-x{
  position:absolute; right:14px; top:10px; background:none; border:0;
  font-size:26px; cursor:pointer; color:var(--ink-soft); line-height:1; z-index:2;
}
.mgr-login{padding:30px;}
.mgr-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px 12px; border-bottom:2px solid var(--ink);
}
.role-badge{
  font-family:var(--disp); letter-spacing:2px; font-size:13px; color:#fff;
  background:var(--teal); padding:5px 14px; border-radius:3px;
}
.role-badge.admin{background:var(--red);}
.mgr-tip{padding:12px 26px 6px; color:var(--ink-soft); font-size:13px;}
.mgr-body{display:flex; flex-direction:column; flex:1; min-height:0;}
.mgr-list{padding:8px 26px 26px; overflow-y:auto; flex:1; min-height:0;}

.mgr-lesson{
  border:1px solid var(--line); border-radius:8px; margin-bottom:12px;
  background:rgba(255,255,255,.45); overflow:hidden;
}
.ml-head{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
.ml-no{
  font-family:var(--disp); font-weight:700; font-size:22px; color:var(--red);
  min-width:30px;
}
.ml-title{font-size:14px; color:var(--ink);}
.ml-types{display:flex; flex-direction:column;}
.ml-type{
  display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center;
  padding:9px 16px; border-bottom:1px dashed var(--line);
}
.ml-type:last-child{border-bottom:0;}
.mt-label{
  font-family:var(--disp); font-size:13px; letter-spacing:2px; color:var(--ink-soft);
}
.mt-files{display:flex; flex-wrap:wrap; gap:6px; min-width:0;}
.chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  background:#fff; border:1px solid var(--line-2); border-radius:999px;
  padding:3px 4px 3px 12px; font-size:12px;
}
.chip a{color:var(--teal); text-decoration:none; max-width:240px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.chip a:hover{text-decoration:underline;}
.chip-x{
  border:0; background:var(--paper-2); color:var(--red-deep); cursor:pointer;
  width:20px; height:20px; border-radius:50%; font-size:15px; line-height:1;
}
.chip-x:hover{background:var(--red); color:#fff;}
.none{color:var(--muted); font-size:13px; font-style:italic;}
.mt-upl{padding:5px 14px; font-size:12px; white-space:nowrap;}

/* ---------------- 背单词 ---------------- */
.quiz-modes{display:flex; flex-direction:column; gap:14px;}
.qm-head{font-family:var(--serif); font-size:18px; color:var(--ink-soft); margin-bottom:2px;}
.qm-card{
  display:flex; align-items:center; gap:16px; cursor:pointer; text-align:left;
  background:var(--card); border:2px solid var(--ink); border-radius:10px;
  padding:18px 20px; transition:.15s; box-shadow:4px 4px 0 var(--line-2);
}
.qm-card:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red);}
.qm-ico{font-size:30px; width:54px; height:54px; display:grid; place-items:center;
  background:var(--soft); border-radius:12px;}
.qm-meta{flex:1; display:flex; flex-direction:column;}
.qm-title{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink);}
.qm-sub{font-size:13px; color:var(--muted); margin-top:2px;}
.qm-arrow{font-size:26px; color:var(--muted);}

.quiz{background:var(--card); border:2px solid var(--ink); border-radius:12px;
  padding:22px; box-shadow:var(--shadow); max-width:680px; margin:0 auto;}
.q-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
  font-family:var(--disp); letter-spacing:1px;}
.q-back{background:none; border:0; cursor:pointer; color:var(--ink-soft); font-size:15px;}
.q-prog{color:var(--muted); font-size:14px;}
.q-score{color:var(--teal); font-weight:700;}
.q-prompt{font-family:var(--serif); font-weight:600; text-align:center;
  font-size:clamp(28px,5vw,40px); color:var(--ink); padding:24px 10px 28px;}
.q-opts{display:grid; gap:12px;}
.q-opt{
  font-size:18px; padding:15px 18px; cursor:pointer; border:2px solid var(--line-2);
  background:#fff; color:var(--ink); border-radius:10px; transition:.12s; text-align:center;
  font-family:var(--cjk);
}
.q-opt:hover{border-color:var(--ink);}
.q-opt.done{cursor:default;}
.q-opt.right{background:#e7f6ec; border-color:#2e9e5b; color:#1f7a45;}
.q-opt.wrong{background:#fdeaea; border-color:var(--red); color:var(--red-deep);}
.q-foot{margin-top:20px; display:flex; gap:12px; justify-content:center;}
.q-result{text-align:center;}
.qr-emoji{font-size:56px;}
.qr-score{font-family:var(--disp); font-weight:700; font-size:40px; color:var(--ink); margin:6px 0;}
.qr-sub{color:var(--muted); margin-bottom:8px;}

.match-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.match-col{display:flex; flex-direction:column; gap:10px;}
.match-cell{
  padding:14px 12px; cursor:pointer; border:2px solid var(--line-2); background:#fff;
  color:var(--ink); border-radius:10px; font-size:16px; transition:.12s; min-height:52px;
  font-family:var(--cjk);
}
.match-cell:hover{border-color:var(--ink);}
.match-cell.sel{border-color:var(--red); background:rgba(214,51,46,.07);}
.match-cell.ok{background:#e7f6ec; border-color:#2e9e5b; color:#1f7a45; cursor:default; opacity:.7;}
.match-cell.bad{border-color:var(--red); background:#fdeaea; animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* ---------------- 移动端 ---------------- */
@media (max-width:900px){
  .masthead{padding:12px 14px;}
  .logo{font-size:30px;}
  .logo-meta .ru-title{font-size:15px; letter-spacing:2px;}
  .logo-meta .cn-title{font-size:11px; letter-spacing:1px;}
  .hdr-upload .hu-txt{display:none;}
  .hdr-upload{padding:9px 12px;}
  .stage{padding:16px 10px 60px;}
  .lesson-hero .big-num{display:none;}
  .toc-panel{grid-template-columns:1fr;}
  /* 单词图片铺满横屏（边到边） */
  .vocab-grid{grid-template-columns:1fr; gap:10px; margin:0 -10px;}
  .vcard{border-radius:0; border-left:0; border-right:0;}
  .speaker{width:104px; height:104px;}
  .speaker .spk-ic{width:50px; height:50px;}
  .pdf-pages{padding:8px; max-height:80vh;}
  /* 灯箱居中 */
  .lightbox{padding:10px;}
  .lightbox img{max-width:100%; max-height:100%; margin:auto;}
}