:root{
  --bg:#F2F2F7; --card:#FFFFFF; --sep:#E5E5EA;
  --txt:#000000; --sec:#6E6E73; --ter:#AEAEB2;
  --blue:#007AFF; --grn:#34C759; --amb:#FF9F0A;
  --r:12px; --sh:0 1px 2px rgba(0,0,0,.05);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{padding-bottom:calc(56px + var(--safe-b))}
#app{max-width:640px;margin:0 auto}

.nav{padding:14px 18px 6px}
.ttl{font-size:31px;font-weight:700;letter-spacing:-.6px;margin:0}
.sub{color:var(--sec);font-size:14px;margin-top:3px}

.gh{padding:20px 18px 7px;font-size:13px;color:var(--sec)}
.gh .u{text-transform:uppercase;letter-spacing:.4px}
.grp{background:var(--card);border-radius:var(--r);margin:0 14px;overflow:hidden;box-shadow:var(--sh)}
.cell{display:flex;align-items:center;gap:10px;padding:12px 15px;
  border-bottom:.5px solid var(--sep);min-height:46px}
.cell:last-child{border-bottom:none}
.cell:active{background:#F7F7FA}
.m{flex:1;min-width:0}
.ti{font-size:16px;line-height:1.35}
.de{font-size:13px;color:var(--sec);margin-top:2px;line-height:1.4}
.chev{color:var(--ter);font-size:19px;flex:none}
.fk{color:var(--sec);font-size:15px;flex:none}
.fv{margin-left:auto;font-size:15px;text-align:right}
.para{padding:9px 20px}
.para p{margin:0}
.ok{color:var(--grn);font-size:15px;flex:none}

.pbar{height:6px;border-radius:3px;background:var(--sep);overflow:hidden;margin-top:8px}
.pbar i{display:block;height:100%;background:var(--grn);border-radius:3px;transition:width .3s}
.pnum{font-variant-numeric:tabular-nums}

.badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:9px;
  background:var(--bg);color:var(--sec);margin-left:6px;vertical-align:middle;font-weight:500}
.badge.b2{background:#E9F2FF;color:var(--blue)}
.badge.gr{background:#E7F8EA;color:#1E8E33}
.badge.am{background:#FFF4E0;color:#A9640A}

/* ===== 对话舞台 ===== */
.stage{margin:14px;background:var(--card);border-radius:16px;box-shadow:var(--sh);
  padding:22px 20px;position:relative;min-height:220px;display:flex;flex-direction:column;
  justify-content:center;cursor:pointer}
.stage .cnt{position:absolute;top:11px;right:15px;font-size:12px;color:var(--ter);
  font-variant-numeric:tabular-nums}
.stage .tag{position:absolute;top:11px;left:15px;font-size:12px;color:var(--ter)}

/* 对方说的话 */
.said{margin-top:14px}
.who{font-size:12px;color:var(--ter);margin-bottom:5px}
.line{font-size:21px;font-weight:600;line-height:1.4;letter-spacing:-.3px}
.linez{font-size:14px;color:var(--sec);margin-top:5px;line-height:1.4}

/* 你的答句 */
.mine{margin-top:18px;padding-top:16px;border-top:.5px solid var(--sep)}
.mine .line{color:var(--blue);font-size:19px;font-weight:600}
.hint{font-size:13px;color:var(--ter);margin-top:16px;text-align:center}

/* 带出的词 */
.wds{margin:0 14px 4px;background:var(--card);border-radius:var(--r);
  padding:11px 15px;box-shadow:var(--sh)}
.wds .h{font-size:12px;color:var(--ter);margin-bottom:7px}
.wd{display:inline-block;font-size:14px;background:var(--bg);border-radius:8px;
  padding:5px 9px;margin:0 6px 6px 0}
.wd b{font-weight:600}
.wd i{color:var(--sec);font-style:normal;margin-left:5px}
.wd.add{background:#FFF4E0}
.wd.cu{background:var(--blue);color:#fff}
.wd.cu i{color:rgba(255,255,255,.8)}
.wd.dn{opacity:.42}
.wd.dn b{text-decoration:line-through}

/* 句式挖空：___ 变下划线，逼你自己填 */
.bk{display:inline-block;min-width:74px;border-bottom:2.5px solid var(--blue);
  text-decoration:none;vertical-align:baseline}
.line.pt{color:var(--txt)}
.ask2{margin-top:11px;font-size:15px;color:var(--sec)}
.ask2 b{color:var(--blue);font-size:18px;font-weight:600;margin-left:4px}
.nt{margin:8px 14px 0;font-size:13px;color:var(--sec);line-height:1.45;
  background:var(--card);border-radius:var(--r);padding:11px 15px;box-shadow:var(--sh)}

.btns{display:flex;gap:10px;margin:12px 14px 0}
.btn{flex:1;padding:13px;border-radius:12px;background:var(--card);text-align:center;
  font-size:16px;font-weight:500;box-shadow:var(--sh);border:none;color:var(--txt)}
.btn:active{opacity:.6}
.btn.p{background:var(--blue);color:#fff}
.btn.g{background:var(--grn);color:#fff}
.btn.w{background:#fff;color:var(--sec)}

#tabs{position:fixed;left:0;right:0;bottom:0;height:calc(56px + var(--safe-b));
  padding-bottom:var(--safe-b);background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep);display:flex;z-index:60}
#tabs div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10px;color:var(--ter)}
#tabs div.on{color:var(--blue)}
#tabs .tl{font-size:19px;line-height:1}

/* ===== 「给他听」兵底屏：字要大到递过去对方能看清 ===== */
.bigcard{margin:14px;background:var(--card);border-radius:16px;box-shadow:var(--sh);
  padding:26px 20px;text-align:center}
.bigen{font-size:27px;font-weight:700;line-height:1.32;letter-spacing:-.5px}
.bigzh{font-size:15px;color:var(--sec);margin-top:12px;line-height:1.45}
.bigbtn{padding:17px;font-size:18px;font-weight:600}
.nt.warn{background:#FFF4E0;color:#7A4A05}

.mask{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:80}
.mask.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;
  background:var(--bg);border-radius:14px 14px 0 0;transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);z-index:90;
  padding-bottom:calc(14px + var(--safe-b));-webkit-overflow-scrolling:touch}
.mask.on ~ .sheet{transform:translateY(0)}
.grab{width:36px;height:5px;border-radius:3px;background:#D1D1D6;margin:8px auto 2px}
.shead{display:flex;align-items:center;padding:8px 16px 10px}
.shead .t2{flex:1;text-align:center;font-size:17px;font-weight:600}
.shead .c{color:var(--blue);font-size:16px;min-width:52px}
.shead .c:last-child{text-align:right}

/* 全表模式：整段对话平铺 */
.dlg{padding:12px 15px;border-bottom:.5px solid var(--sep)}
.dlg:last-child{border-bottom:none}
.dlg .a{font-size:15px;font-weight:600;line-height:1.4}
.dlg .az{font-size:13px;color:var(--sec);margin-top:2px}
.dlg .y{font-size:15px;color:var(--blue);margin-top:8px;line-height:1.4}
.dlg .yz{font-size:13px;color:var(--sec);margin-top:2px}