/* web 版专属:桌面样式之上的差异。移动优先 —— 单列、大点击区、无 hover 依赖。 */

/* 品牌位:图标 + 字。写在这里而不是 styles.css —— 那份是桌面样式的拷贝,
   由 web/build.sh 生成,改了下次构建就冲掉。 */
.brand { display: inline-flex; align-items: center; gap: 7px; }
.brand img { display: block; }

.app.web { max-width: 560px; }
.app.web main { padding: 20px 18px 48px; }

/* 复习卡:提示面要大、要居中,一次只看见一个词 */
.app.web .prompt { font-size: 24px; line-height: 1.5; margin: 14px 0 6px; }
.app.web .cue { margin-bottom: 4px; }

/* 说:麦克风是可选步骤,不该抢过「看答案」 */
.app.web .micwrap { margin-top: 22px; }
.app.web .mic { width: 64px; height: 64px; font-size: 20px; }
.app.web .mic.live { background: var(--bad); }
.app.web .center > .btn.go { margin-top: 24px; padding: 12px 28px; font-size: 15px; }

/* 复习卡整屏布局:主操作固定在底部 —— 移动端拇指够得到的地方,
   而不是浮在屏幕中段、下面留一大片空白。 */
#s-card.active { display: flex; flex-direction: column; min-height: calc(100vh - 150px); }
.cardface { flex: 1; justify-content: center; }
.cardbar { position: sticky; bottom: 0; padding: 14px 0 6px;
  background: linear-gradient(to top, var(--bg) 70%, transparent); }
.btn.go.wide { display: block; width: 100%; text-align: center; padding: 13px; font-size: 15px; }
.cardbar .rating-row { margin: 0; }

/* 揭示面 */
.reveal { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.reveal .ctx { font-family: var(--jp); color: var(--faint); font-size: 13px; line-height: 1.8;
  margin: 0 0 18px; }
.reveal .ctx b { color: var(--text); font-weight: 600; }
.ans-jp { font-family: var(--jp); font-size: 30px; font-weight: 600; }
.ans-rd { font-family: var(--jp); color: var(--muted); font-size: 14px; margin-top: 4px; }
.reveal .btnrow { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* 底部导航:三个次要入口,不用页签栏(web 只有两屏重要) */
.webnav { display: flex; gap: 14px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

.app.web .search { margin: 12px 0; }
.app.web .search input { width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); background: var(--bg); color: var(--text); font-size: 15px; }

@media (max-width: 420px) {
  .app.web .prompt { font-size: 21px; }
  .app.web .ans-jp { font-size: 26px; }
}

/* 「开始复习」与下面的词表之间要有呼吸 —— 此前按钮底边紧贴 eyebrow。 */
.app.web #today-list { margin-top: 18px; }

/* 进度条 0% 时纯灰一条像分隔线,含义传达不到 —— 干脆不画。 */
.today-progress.empty { display: none; }

.app.web .iconbtn .ic { width: 16px; height: 16px; }
.app.web .mic .ic { width: 26px; height: 26px; stroke: #fff; stroke-width: 2; fill: none; }

/* 登录 / 注册 */
.authform { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.authform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.authform input { padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--line2);
  background: var(--bg); color: var(--text); font-size: 16px; }  /* 16px:iOS 下小于它会自动放大页面 */
.authform input:focus { outline: none; border-color: var(--accent); }
.authform .primary { margin-top: 4px; }
.authmsg { margin: 0; font-size: 13px; line-height: 1.6; color: var(--bad); }
.authmsg.ok { color: var(--good); }
.linkbtn.danger { color: var(--bad); }