/* public/css/conjugaison.css
 * 2026-10-13 ui-refine: 整体轻量化、紧凑、柔和
 *   - verb 名 1.6rem → 1.1rem (去"老年人感")
 *   - 代词列去粗体, 改 muted 色, 让输入框成为视觉焦点
 *   - 输入框 2px border → 1px, padding 减小
 *   - Mode icon / title / summary score 全面缩小
 *   - 正确/错误色改成柔和 pastel
 */

/* ============== 模式入口卡片（index.html） ============== */
.cq-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
  margin: 1.5rem 0 2rem;
}
.cq-mode-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.3rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cq-mode-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong-alt2);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
.cq-mode-card .cq-icon {
  font-size: 1.6rem;
  line-height: 1;
  opacity: .65;
  margin-bottom: .15rem;
}
.cq-mode-card .cq-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
}
.cq-mode-card .cq-desc {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
}
.cq-mode-card .cq-cta {
  display: inline-block;
  padding: .42rem .95rem;
  background: var(--accent-solid);
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  font-size: .82rem;
  margin-top: .35rem;
  align-self: flex-start;
  transition: background .15s;
}
.cq-mode-card:hover .cq-cta { background: var(--accent-solid-hover); }

/* ============== 选择器面板（single/mixed.html 顶部） ============== */
.cq-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  padding: .9rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  align-items: center;
}
.cq-controls label {
  font-size: .8rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.cq-controls select,
.cq-controls input[type="number"] {
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  /* 2026-11-07: .88rem = 14.08px < 16px —— iOS 聚焦下拉/数字框会放大整页。改 1rem。 */
  font-size: 1rem;
  background: var(--surface);
  color: inherit;
}
.cq-controls select:focus,
.cq-controls input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 35, 149, .08);
}
.cq-controls .cq-tense-checks {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  padding: .35rem 0;
}
.cq-controls .cq-tense-checks label {
  flex-direction: row;
  align-items: center;
  font-size: .85rem;
  color: inherit;
  cursor: pointer;
  gap: .3rem;
}

/* ============== 出题主区（变位矩阵） ============== */
.cq-quiz-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.3rem 1.4rem 1.4rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.cq-quiz-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border-soft);
}
.cq-quiz-head .cq-verb {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}
.cq-quiz-head .cq-verb .muted { color: var(--muted); font-weight: 400; font-size: .82rem; margin-left: .25rem; }
.cq-quiz-head .cq-tense {
  font-size: .75rem;
  color: var(--muted);
  padding: .18rem .55rem;
  background: var(--surface-4);
  border: none;
  border-radius: 4px;
  font-weight: 500;
}

.cq-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .35rem;
}
.cq-matrix td {
  padding: .25rem .35rem;
  vertical-align: middle;
}
.cq-matrix .cq-pronoun {
  width: 56px;
  font-weight: 500;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
  text-align: right;
  padding-right: .55rem;
}
.cq-matrix input.cq-input {
  width: 100%;
  padding: .42rem .65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  /* 2026-11-07: .92rem = 14.72px < 16px —— iOS 聚焦输入框会自动放大页面,
     学生写变位时页面被推走。改 1rem = 16px (iOS 不再缩放)。 */
  font-size: 1rem;
  background: var(--surface);
  color: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.cq-matrix input.cq-input::placeholder { color: var(--muted-3); font-style: italic; font-size: .9rem; }
.cq-matrix input.cq-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-3-alt4);
  box-shadow: 0 0 0 3px rgba(0, 35, 149, .08);
}
.cq-matrix tr.cq-correct input.cq-input {
  border-color: var(--success-border-alt2);
  background: var(--success-soft-alt4);
}
.cq-matrix tr.cq-wrong input.cq-input {
  border-color: var(--danger-border-alt3);
  background: var(--danger-soft-alt3);
}
.cq-matrix .cq-status {
  width: 22px;
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
}
.cq-matrix tr.cq-correct .cq-status { color: var(--success-text-alt); }
.cq-matrix tr.cq-wrong .cq-status { color: var(--danger-text-alt3); }
.cq-matrix .cq-correct-answer {
  font-size: .76rem;
  color: var(--muted);
  padding-left: .45rem;
}

/* ============== 底部动作 ============== */
.cq-actions {
  display: flex;
  gap: .65rem;
  margin-top: 1.1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border-soft);
  justify-content: flex-end;
  align-items: center;
}
.cq-progress {
  flex: 1;
  color: var(--muted);
  font-size: .82rem;
}

/* ============== 完成总结 ============== */
.cq-summary {
  max-width: 460px;
  margin: 1.5rem auto;
  text-align: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.6rem 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.cq-summary h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .25rem;
}
.cq-summary .cq-score {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  margin: .35rem 0 .8rem;
  letter-spacing: -.02em;
}
.cq-summary .cq-tense-stats {
  text-align: left;
  margin-top: .85rem;
  font-size: .85rem;
}
.cq-summary .cq-tense-stats .cq-stat-row {
  display: flex;
  justify-content: space-between;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text);
}
.cq-summary .cq-tense-stats .cq-stat-row:last-child { border-bottom: none; }
.cq-summary .cq-tense-stats .cq-stat-row span:last-child { font-weight: 600; color: var(--accent); }


/* ============== 变位词库（index.html 底部，按列表浏览） ============== */
.cq-verbs-section {
  margin: 2.2rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--border);
}
.cq-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: .25rem;
}
.cq-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.cq-level-tabs {
  display: inline-flex;
  background: var(--bg-soft, rgba(0,0,0,.04));
  padding: .22rem;
  border-radius: 10px;
  gap: .15rem;
}
.cq-ltab {
  border: none;
  background: transparent;
  padding: .38rem .85rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s;
}
.cq-ltab.active {
  background: var(--surface, #fff);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.cq-ltab:hover:not(.active) {
  color: var(--text);
}
.cq-verbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .55rem;
  margin-top: .85rem;
}
.cq-verb-chip {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .8rem;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  cursor: pointer;
}
.cq-verb-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 35, 149, .08);
}
.cq-verb-chip .vc-inf {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  line-height: 1.2;
}
.cq-verb-chip .vc-zh {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.4;
}
.cq-verb-chip .vc-grp {
  font-size: .68rem;
  margin-top: .08rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  opacity: .85;
}


/* ============== 词典式变位表（verb.html） ============== */
.cv-toolbar {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
}

.cv-head {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
}
.cv-head .cv-inf {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.cv-head .cv-zh {
  font-size: 1rem;
  color: var(--muted);
  margin-top: .25rem;
}
.cv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .7rem;
}
.cv-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(0, 35, 149, .07);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.cv-badge-pron {
  background: rgba(217, 119, 6, .12);
  color: var(--warning-text-alt);
}

.cv-note {
  background: var(--warning-soft-alt6);
  border: 1px solid var(--warning-border-alt2);
  border-radius: 10px;
  padding: .75rem .95rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--brown-text);
  margin: 0 0 1rem;
}

.cv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.4rem;
}
.cv-actions .btn-primary.sm,
.cv-actions .btn-ghost.sm {
  text-decoration: none;
}

.cv-tense-list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.cv-tense-block {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.1rem;
}
.cv-tense-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem;
  padding-bottom: .6rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--border-soft);
}
.cv-tense-head .cv-tense-fr {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}
.cv-tense-head .cv-tense-zh {
  font-size: .84rem;
  color: var(--muted);
}
.cv-tense-head .cv-tense-code {
  margin-left: auto;
  font-size: .7rem;
  opacity: .7;
}

.cv-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .35rem .9rem;
}
.cv-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .3rem .1rem;
  border-bottom: 1px dotted var(--border-soft);
}
.cv-row:last-child { border-bottom: none; }
.cv-pron {
  /* 2026-11-03: 标签不再只是 "je/tu/il", 现在承载完整主语短语
     ("j'" / "que je" / "que nous" / "qu'elles") —— 列宽要放得下最长那个。 */
  flex: 0 0 4.5rem;
  font-size: .82rem;
  font-style: italic;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-forms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem;
  min-width: 0;
}
.cv-form {
  font-size: .98rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}
.cv-sep {
  color: var(--muted);
  font-size: .85rem;
  opacity: .6;
}

/* passé_composé + être：4 agreement 分栏 */
.cv-agr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
}
.cv-agr-col {
  background: var(--surface-2);
  border: 1px solid var(--border-soft-alt);
  border-radius: 9px;
  padding: .6rem .7rem .7rem;
}
.cv-agr-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  padding-bottom: .4rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--border-soft-alt2);
}
.cv-agr-col .cv-row {
  border-bottom: 1px dotted var(--border-soft-alt3);
  padding: .22rem 0;
}
.cv-agr-col .cv-form { font-size: .9rem; }

@media (max-width: 620px) {
  .cv-head .cv-inf { font-size: 1.55rem; }
  .cv-rows { grid-template-columns: 1fr; }
}


/* ============== être 助动词提示条（renderQuizCard） ============== */
.cq-hint-etre {
  background: var(--warning-soft-alt);
  border: 1px solid var(--warning-border-alt);
  border-left: 3px solid var(--warning-2);
  border-radius: 9px;
  padding: .8rem .95rem .85rem;
  margin: 0 0 1rem;
}
.cq-hint-etre .cq-hint-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--warning-text);
  margin-bottom: .35rem;
}
.cq-hint-etre .cq-hint-body {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--warning-text-alt2);
}
.cq-hint-etre .cq-ex {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: rgba(217, 119, 6, .12);
  padding: .08rem .35rem;
  border-radius: 4px;
  font-weight: 700;
}
.cq-hint-etre .cq-hint-muted {
  font-size: .78rem;
  opacity: .8;
}


/* ============== 定点默写面板（verb.html） ============== */
#cv-practice {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--accent);
}
#cv-practice[hidden] { display: none; }

.cv-practice-btn {
  padding: .22rem .6rem !important;
  font-size: .74rem !important;
  font-weight: 600;
  border: 1px solid rgba(0, 35, 149, .22);
  color: var(--accent) !important;
  background: rgba(0, 35, 149, .05) !important;
  border-radius: 6px;
  cursor: pointer;
  transition: background .14s, border-color .14s;
  white-space: nowrap;
}
.cv-practice-btn:hover {
  background: rgba(0, 35, 149, .12) !important;
  border-color: var(--accent);
}
.cv-tense-head .cv-tense-code { margin-left: .4rem; }

.cv-p-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9rem;
  margin-top: .9rem;
  padding: .7rem .95rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.cv-p-stats .cv-p-round {
  font-size: .92rem;
  color: var(--text);
}
.cv-p-stats .cv-p-round b {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 620px) {
  .cv-tense-head { gap: .4rem; }
  .cv-practice-btn { font-size: .7rem !important; padding: .18rem .45rem !important; }
}


/* ============== 练习模式标签 (verb.html 定点默写) ============== */
.cvp-mode-tag {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cvp-mode-tag.is-single {
  background: rgba(0, 35, 149, .1);
  color: var(--accent);
}
.cvp-mode-tag.is-mixed {
  background: rgba(139, 92, 246, .13);
  color: var(--purple-text-alt2);
}


/* ============== 右侧悬浮法语重音键盘（默写变位） ==============
 * 布局: 桌面 = 竖向窄条 (⌨ 在上, 键位网格在下)
 *       窄屏 = 同样竖向但更紧凑, 绝不横排溢出屏幕
 * 关键: 容器 width 由内容决定, right 锚定 + safe-area 留白
 * ============================================================= */
.cq-float-kb {
  position: fixed;
  right: calc(10px + env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;      /* 关键: 永远竖排, 不横排 */
  align-items: center;
  gap: .35rem;
  width: max-content;          /* 宽度贴合内容 */
  max-width: calc(100vw - 20px);
  padding: .45rem .35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .10);
}
.cq-float-kb .cq-fk-toggle {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.cq-float-kb .cq-fk-toggle:hover {
  background: rgba(0, 35, 149, .08);
  color: var(--accent);
}
.cq-float-kb .cq-fk-body {
  display: grid;
  grid-template-columns: repeat(2, 26px);
  gap: .22rem;
  justify-content: center;
}
.cq-float-kb .cq-fk-body[hidden] { display: none; }

.cq-float-kb .cq-fk-label {
  grid-column: 1 / -1;
  font-size: .58rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
  line-height: 1;
}
.cq-float-kb .cq-fk-shift {
  grid-column: 1 / -1;
  font-size: .58rem;
  padding: .2rem 0;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .05em;
  transition: all .12s;
}
.cq-float-kb .cq-fk-shift:hover { background: var(--surface-3); border-color: var(--border-strong); }
.cq-float-kb .cq-fk-shift.active {
  background: var(--warning-soft);
  color: var(--warning-text);
  border-color: var(--warning);
}

.cq-float-kb .cq-fk-key {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: .98rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Georgia', 'Noto Serif', serif;
  color: var(--text);
  transition: all .1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cq-float-kb .cq-fk-key:hover {
  background: var(--surface-3);
  border-color: var(--accent-border);
  color: var(--accent-3);
}
.cq-float-kb .cq-fk-key:active {
  background: var(--accent-soft);
  transform: translateY(1px);
}

/* 折叠态: 只剩 ⌨ 按钮 */
.cq-float-kb.is-collapsed { padding: .3rem; gap: 0; }

/* 窄屏: 更紧凑, 但仍竖排 */
@media (max-width: 700px) {
  .cq-float-kb {
    right: calc(6px + env(safe-area-inset-right, 0px));
    padding: .32rem .28rem;
    border-radius: 10px;
  }
  .cq-float-kb .cq-fk-body { grid-template-columns: repeat(2, 24px); gap: .18rem; }
  .cq-float-kb .cq-fk-key { width: 24px; height: 24px; font-size: .92rem; border-radius: 4px; }
  .cq-float-kb .cq-fk-toggle { width: 27px; height: 27px; font-size: .92rem; border-radius: 7px; }
  .cq-float-kb .cq-fk-label { font-size: .54rem; }
  .cq-float-kb .cq-fk-shift { font-size: .54rem; }
}

/* 极窄屏 (iPhone SE 等) */
@media (max-width: 380px) {
  .cq-float-kb { right: calc(4px + env(safe-area-inset-right, 0px)); }
  .cq-float-kb .cq-fk-body { grid-template-columns: repeat(2, 22px); }
  .cq-float-kb .cq-fk-key { width: 22px; height: 22px; font-size: .86rem; }
}


/* ============== je 省音提醒（蓝色系，与 être 黄色提示区分） ============== */
.cq-hint-je {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-alt3);
  border-left: 3px solid var(--accent-2);
  border-radius: 9px;
  padding: .8rem .95rem .85rem;
  margin: 0 0 1rem;
}
.cq-hint-je .cq-hint-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-2-alt);
  margin-bottom: .35rem;
}
.cq-hint-je .cq-hint-body {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--accent-2-alt);
}
.cq-hint-je .cq-ex {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: rgba(37, 99, 235, .12);
  padding: .08rem .35rem;
  border-radius: 4px;
  font-weight: 700;
}
.cq-hint-je .cq-wrong {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: rgba(220, 38, 38, .1);
  color: var(--danger-text-alt);
  padding: .08rem .35rem;
  border-radius: 4px;
  text-decoration: line-through;
  opacity: .85;
}
.cq-hint-je .cq-hint-muted {
  font-size: .78rem;
  opacity: .78;
}

/* ============== 词典式字母索引 + 搜索 (2026-11-02) ============== */
.cq-dict-search-wrap {
  position: relative;
  margin: .9rem 0 .4rem;
  max-width: 520px;
}
.cq-dict-search-wrap input[type="search"] {
  width: 100%;
  font-size: 16px;            /* iOS Safari 字号 <16px 会自动放大页面 */
  padding: .6rem 2.4rem .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text);
  font-family: inherit;
}
.cq-dict-search-wrap input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 35, 149, .10);
}
.cq-dict-clear {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 1.15rem; padding: .3rem .45rem; line-height: 1;
}
.cq-dict-clear:hover { color: var(--text); }
.cq-search-count {
  color: var(--muted); font-size: .82rem; margin: .3rem 0 0;
}
.cq-search-count b { color: var(--accent); }
.cq-letterbar {
  position: sticky;
  top: var(--cq-header-h, 64px);   /* JS 实测顶栏高度写入 */
  z-index: 9;                       /* 低于顶栏的 z-index: 10 */
  display: flex; flex-wrap: wrap; gap: .2rem;
  margin: .9rem 0 .2rem;
  padding: .4rem .35rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* 搜索态隐藏字母条 —— 光设 hidden 属性**不够** (2026-11-02 真实 Chrome 实测修复)。
   上面 .cq-letterbar 的 `display: flex` 是**作者样式**, 优先级高于 UA 样式的
   `[hidden] { display: none }` —— JS 的 `barEl.hidden = true` 被它压过去,
   搜索后字母条整条留在屏上 (43px 高, computedDisplay "flex"), 而且显示的是
   **上一次等级的可用状态** (一堆 B1 灰字母), 结果却是个 A1 动词 → 直接误导学生。
   这条兜底特异度 (0,2,0) > `.cq-letterbar` (0,1,0), 宽屏窄屏都盖得住
   (窄屏 @media 里的 `display: grid` 同样是 (0,1,0))。
   同文件里 #cv-practice[hidden] / .cq-float-kb .cq-fk-body[hidden] 就是这个写法。 */
.cq-letterbar[hidden] { display: none; }
.cq-letter {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px;
  background: var(--bg-soft, rgba(0,0,0,.04));
  color: var(--text); font-family: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: background .12s, color .12s;
}
.cq-letter:hover:not(:disabled):not(.active) { background: var(--indigo-soft); color: var(--accent); }
.cq-letter.active { background: var(--accent-solid); color: #fff; }
.cq-letter:disabled { opacity: .28; cursor: default; }
.cq-group { margin: 1.1rem 0 .2rem; }
.cq-group-head {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1rem; font-weight: 800; color: var(--accent);
  letter-spacing: .04em; margin: 0 0 .5rem;
}
.cq-group-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.cq-hit { background: var(--highlight-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.cq-empty { padding: 1.4rem 0; color: var(--muted); font-size: .9rem; }

/* 分组标题与首行卡片之间多出的上边距: .cq-verbs-grid 自带 margin-top .85rem,
   放进 .cq-group 后叠在 .cq-group-head 的 margin 之上, 这里归零。
   只覆盖, 不改原有 .cq-verbs-grid 规则 —— 回滚成本 = 删掉这几行 */
.cq-group .cq-verbs-grid { margin-top: 0; }

/* iOS Safari 的 <input type="search"> 自带清除叉号, 会和自定义的 .cq-dict-clear 叠在一起。
   学生主力设备是 iOS, 必须隐藏原生叉号 */
.cq-dict-search-wrap input[type="search"]::-webkit-search-cancel-button,
.cq-dict-search-wrap input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* 字母条窄屏用 13 列 grid, 而不是 flex 折行。
   flex 折行的行数取决于内容区宽度, 会切出孤儿行 (实测: 600px → 17/9,
   768px → 23/3, 840px → 25/1), 最后一行只有一两个字母, 观感不齐。
   grid 固定 13 列 → 任何宽度都是整齐的 13×2 两行。

   断点 880px 的由来: flex 下 26 个 28px 按钮 + .2rem 间距排满一行需要
   内容区 ≥ 808px (26*28 + 25*3.2); 实测内容区 = 视口 - 45px, 所以视口
   ≥ 860px 才能排满一行, 850px 及以下必然切孤儿行。断点取 880px 留了
   滚动条 (~15px) 的余量: 881px 以上 flex 一定是整齐的一行 26 个。

   按钮高度 28px: WCAG 2.2 AA SC 2.5.8 要求最小 24×24 CSS px, 学生主力
   设备是 iOS, 这 26 个字母键是词库主导航。

   按钮**宽度**按视口实测 (2026-11-02, 真实 Chrome, 取字母条第 1 格):
     375px (iOS, overlay 滚动条)      ≈ 24.1px —— 达标, 但余量只有 0.14px
     360px (安卓, overlay 滚动条)     ≈ 23.0px —— 不达标
     375px (classic 滚动条, 占 15px)  ≈ 23.0px —— 不达标
     320px                            ≈ 19.9px (overlay) / 18.8px (classic) —— 不达标
   学生主力机型 iPhone 375 / 390 / 414 在 iOS (overlay 滚动条) 下达标, 但**余量极薄**:
   .app-main padding、字母条 padding、gap 任一改动都可能把 375px 掉到 24px 以下 ——
   别把它当成「已稳过 24px 门槛」。

   窄屏触控目标 (2026-11-02 决策): 320px ≈ 19.9px、360px ≈ 23.0px, 未达 WCAG 2.2 AA
   SC 2.5.8 的 24×24。**经确认保留 13×2 两行布局** —— 窄屏竖向空间最紧, 吸顶字母条从
   2 行变 3 行 (69px → 约 100px) 在老 iPhone SE (屏高 568px) 上要占 17.6% 的屏高,
   代价比按钮略小更大; 而学生主力是 iOS 375/390/414, 这档已达标。
   即 24px 在这里是**软约束**, 不是硬门槛 —— 这是有意识的取舍, 不是待修缺陷,
   **不要再改这里的 grid 列数 / padding / gap / 按钮尺寸**。

   431–880px 时 grid 单元格比 28px 宽, 按钮会被拉成扁宽药丸 (880px 时 ≈63×28,
   2.2:1), 和 881px 以上的 28×28 正方形不连续 —— 下面用 max-width 限回 28px 并居中。 */
@media (max-width: 880px) {
  .cq-letterbar {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: .1rem;
    padding: .3rem .25rem;
  }
  .cq-letter {
    width: 100%;
    max-width: 28px;      /* 431–880px: 限回正方形, 不被单元格拉成扁宽药丸 */
    justify-self: center; /* 限宽后在单元格里居中 */
    height: 28px;
    font-size: .78rem;
    border-radius: 6px;
  }
}