/* 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: #d8dde6;
  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);
  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-hover); }

/* ============== 选择器面板（single/mixed.html 顶部） ============== */
.cq-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  padding: .9rem 1.1rem;
  background: #fafbfc;
  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;
  font-size: .88rem;
  background: #fff;
  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 #f0f1f4;
}
.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: #f3f4f6;
  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 #e5e7eb;
  border-radius: 6px;
  font: inherit;
  font-size: .92rem;
  background: #fff;
  color: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.cq-matrix input.cq-input::placeholder { color: #c4c8d0; font-style: italic; font-size: .85rem; }
.cq-matrix input.cq-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fafbff;
  box-shadow: 0 0 0 3px rgba(0, 35, 149, .08);
}
.cq-matrix tr.cq-correct input.cq-input {
  border-color: #86c5a1;
  background: #f3faf5;
}
.cq-matrix tr.cq-wrong input.cq-input {
  border-color: #d99ba4;
  background: #fdf5f6;
}
.cq-matrix .cq-status {
  width: 22px;
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
}
.cq-matrix tr.cq-correct .cq-status { color: #4f9b6a; }
.cq-matrix tr.cq-wrong .cq-status { color: #b55a68; }
.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 #f0f1f4;
  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: #b45309;
}

.cv-note {
  background: #fffdf5;
  border: 1px solid #f5e6c8;
  border-radius: 10px;
  padding: .75rem .95rem;
  font-size: .82rem;
  line-height: 1.6;
  color: #6b5a3a;
  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 #f0f1f4;
}
.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 #f0f1f4;
}
.cv-row:last-child { border-bottom: none; }
.cv-pron {
  flex: 0 0 3.4rem;
  font-size: .82rem;
  font-style: italic;
  color: var(--muted);
  text-align: right;
}
.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: #fafbfc;
  border: 1px solid #eef0f3;
  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 #e6e9ee;
}
.cv-agr-col .cv-row {
  border-bottom: 1px dotted #eceef1;
  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: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 3px solid #d97706;
  border-radius: 9px;
  padding: .8rem .95rem .85rem;
  margin: 0 0 1rem;
}
.cq-hint-etre .cq-hint-title {
  font-size: .88rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: .35rem;
}
.cq-hint-etre .cq-hint-body {
  font-size: .84rem;
  line-height: 1.65;
  color: #78350f;
}
.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: #fafbfc;
  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: #6d28d9;
}


/* ============== 右侧悬浮法语重音键盘（默写变位） ==============
 * 布局: 桌面 = 竖向窄条 (⌨ 在上, 键位网格在下)
 *       窄屏 = 同样竖向但更紧凑, 绝不横排溢出屏幕
 * 关键: 容器 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: #ffffff;
  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: #fafbfc;
  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: #fff;
  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: #f9fafb; border-color: #d1d5db; }
.cq-float-kb .cq-fk-shift.active {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
}

.cq-float-kb .cq-fk-key {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: .98rem;
  background: #fff;
  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: #f9fafb;
  border-color: #93c5fd;
  color: #1e3a8a;
}
.cq-float-kb .cq-fk-key:active {
  background: #eff6ff;
  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: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 3px solid #2563eb;
  border-radius: 9px;
  padding: .8rem .95rem .85rem;
  margin: 0 0 1rem;
}
.cq-hint-je .cq-hint-title {
  font-size: .88rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: .35rem;
}
.cq-hint-je .cq-hint-body {
  font-size: .84rem;
  line-height: 1.65;
  color: #1e40af;
}
.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: #b91c1c;
  padding: .08rem .35rem;
  border-radius: 4px;
  text-decoration: line-through;
  opacity: .85;
}
.cq-hint-je .cq-hint-muted {
  font-size: .78rem;
  opacity: .78;
}