/* 听写练习纸：屏幕上是设置面板 + 纸张预览，打印时只留纸张 */
.options { display: grid; gap: 12px; padding: 16px 20px; margin-top: 20px; }
.opt-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.opt-group + .opt-group { padding-top: 12px; border-top: 1px solid var(--line); }
.opt-head { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; width: 32px; }
.opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.opt input[type="text"], .opt select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--fill);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
}
.opt input[type="text"] { width: 150px; }
.opt.check { cursor: pointer; }
.opt-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.opt-actions .btn-primary { padding: 8px 22px; font-size: 14px; }

.notice { margin-top: 14px; font-size: 13.5px; color: var(--orange); }
.notice:empty { display: none; }
.hint-line { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.hint-line:last-of-type { margin-bottom: 18px; }
.dot-demo { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; flex: none; }

/* 纸张：尺寸和每个元素的位置都由 worksheet.js 按毫米算好，PDF 用同一份坐标作画 */
.preview { display: grid; gap: 24px; justify-items: center; padding-bottom: 8px; }
.sheet-wrap { zoom: var(--zoom, 1); }
.sheet {
  position: relative; overflow: hidden; color: #111; background: #fff;
  box-shadow: var(--shadow); border-radius: 4px;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "LXGW WenKai", "楷体", serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet > * { position: absolute; }
.sheet-title { left: 0; right: 0; text-align: center; font-weight: 600; line-height: 1; letter-spacing: .06em; }
.sheet-title small { font-size: 60%; font-weight: 400; color: #666; letter-spacing: 0; }
.sheet-meta { left: 0; right: 0; display: flex; justify-content: center; font-size: 11pt; line-height: 1; }
.sheet-meta span { width: 36mm; white-space: nowrap; display: flex; align-items: flex-end; }
.sheet-meta i { width: 18mm; border-bottom: 1px solid #111; margin-left: 1mm; }
.page-no { left: 0; right: 0; text-align: center; font-size: 9pt; line-height: 1; color: #888; }

.item-no { font-size: 9pt; line-height: 1; color: #888; text-align: right; }
.py {
  /* 楷体自带的拉丁字母字距很怪，拼音用衬线西文字体 */
  font: 12pt/1 "Times New Roman", "Noto Serif", "LXGW WenKai", serif; color: #111; white-space: nowrap;
  border: none; background: none; padding: 0; cursor: pointer; border-radius: 3px;
  display: flex; align-items: flex-end; justify-content: center;
}
.py:hover { background: rgba(0, 113, 227, .1); }
.py span { position: relative; }
.py.poly span::after {
  content: ""; position: absolute; top: -0.6mm; right: -1.8mm; width: 1.4mm; height: 1.4mm;
  border-radius: 50%; background: #ff9500;
}
/* 描边一半落在格子外面：不裁掉，外框才和相邻格子共用的边一样粗 */
.grid { display: block; overflow: visible; }
.grid-char { display: grid; place-items: center; line-height: 1; pointer-events: none; }

@media (max-width: 600px) {
  .options { padding: 14px; }
  .opt-head { width: 100%; }
  .opt-actions { justify-content: stretch; }
  .opt-actions > * { flex: 1; }
}

@media print {
  body { background: #fff; display: block; }
  .topbar, .intro, .composer, .error, .options, .notice, .hint-line, .footer { display: none !important; }
  .page { padding: 0; max-width: none; }
  .preview { display: block; padding: 0; }
  .sheet-wrap { zoom: 1 !important; break-after: page; }
  .sheet-wrap:last-child { break-after: auto; }
  .sheet { box-shadow: none; border-radius: 0; }
  .py:hover { background: none; }
  .py.poly span::after { display: none; }
}