/* ============================================================
 * 朱砂米格本 — Vermilion Copybook design system (web port).
 * Warm paper surfaces, cinnabar-red accent, ink-on-paper text.
 * Page chrome only; the worksheet pinyin/grid colors stay user-configurable.
 * ============================================================ */

@font-face {
  font-family: 'Pinyin Hand';
  src: url('/fonts/PinyinHand-v3.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* Surfaces */
  --paper: #FBF7F0;        /* app background — warm rice paper */
  --paper-card: #FFFDF8;   /* raised cards / sheets */
  --paper-sunken: #EFE8DA; /* desk behind the worksheet canvas */

  /* Ink (warm near-black ladder) */
  --ink: #3A3330;
  --ink-soft: #6E655C;
  --ink-faint: #A99E90;

  /* Cinnabar accent */
  --cinnabar: #C9492E;
  --cinnabar-deep: #A8381F;
  --cinnabar-tint: #FBEBE5;   /* active-state wash */
  --cinnabar-line: #E9C8BD;   /* active-state border */

  /* Hairlines */
  --line: #ECE3D5;
  --line-soft: #F3ECDF;

  --tabbar-h: 52px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* 移动端：侧栏只承载输入卡片（版式设置面板隐藏，走「设置」标签页） */
.sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.desk {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0 4px calc(var(--tabbar-h) + 10px);
}

/* ---------------- Top bar ---------------- */

.top-bar {
  flex-shrink: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.brand {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ink);
}

.nav-actions { display: none; gap: 10px; }

/* ---------------- Views ---------------- */

.view { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* ---------------- Sidebar panels（移动端仅输入卡片可见） ---------------- */

.panel-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(58, 51, 48, 0.05);
}

.input-panel {
  position: relative;
  margin: 10px 2px;
  padding: 13px 11px 8px;
  height: 108px;
  cursor: text;
  flex-shrink: 0;
}

.input-head { display: contents; }

/* 移动端：display:contents 让两个按钮维持各自的绝对定位（与改动前一致）；
   桌面端才变成一组 flex pill（见 min-width: 920px 区块）。 */
.input-head-actions { display: contents; }

/* 桌面端专用入口，移动端已在全屏编辑态工具行里有「拍照识字」 */
.desktop-ocr { display: none; }

/* Small "稿纸" tab that names the input card and sets the workbook tone. */
.input-tab {
  position: absolute;
  top: -7px;
  left: 12px;
  padding: 1px 7px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--cinnabar);
  background: var(--paper);
  border-radius: 5px;
}

.text-preview {
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
  white-space: pre-wrap;
}

.placeholder { color: var(--ink-faint); }

/* ---------------- Setting bar / zoom ---------------- */

.setting-bar {
  padding: 0 5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  flex-shrink: 0;
}

.help-text {
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-text::before {
  content: "●";
  margin-right: 4px;
  font-size: 8px;
  color: var(--cinnabar);
  opacity: 0.7;
  vertical-align: 0.5px;
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(58, 51, 48, 0.04);
  flex-shrink: 0;
}

.zoom-btn {
  width: 29px;
  height: 29px;
  line-height: 27px;
  text-align: center;
  font-size: 20px;
  color: var(--cinnabar);
  background: var(--cinnabar-tint);
  border-radius: 5px;
}

.zoom-btn:active { background: var(--cinnabar-line); }
.zoom-btn.disabled { color: var(--ink-faint); background: var(--line-soft); cursor: default; }

.zoom-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 40px;
  text-align: center;
}

.zoom-reset {
  height: 29px;
  line-height: 29px;
  padding: 0 9px;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--line-soft);
  border-radius: 5px;
}

.zoom-reset:active { background: var(--line); }
.zoom-reset.disabled { color: var(--ink-faint); cursor: default; }

.stroke-loading {
  font-size: 12px;
  color: var(--cinnabar);
  text-align: center;
  padding: 5px 0;
  flex-shrink: 0;
}

/* ---------------- Paper canvas (worksheet preview) ---------------- */

.paper-canvas {
  /* Fallback for preview grid lines; overridden by inline --grid-color from JS. */
  --grid-color: #84c6ac;
  --grid-line-w: 1px;
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-sunken); /* warm desk behind the sheet */
  padding: 6px 2px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.canvas-inner {
  display: inline-block;
  min-width: 100%;
  white-space: normal;
  vertical-align: top;
}

.empty-hint {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  padding: 60px 20px;
  white-space: normal;
}

.page-sheet {
  background: #fff;
  margin: 0 auto 15px;
  position: relative;
  box-shadow: 0 3px 11px rgba(58, 51, 48, 0.12);
  /* A4 proportions: 210mm / 297mm ≈ 0.707 */
  aspect-ratio: 210 / 297;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.line-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

/* Ruby-like simulation. No negative margins: every grid line is drawn exactly once
   (see .grid-box), so cells sit flush without overlapping borders. */
.char-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.pinyin-container {
  position: relative;
  width: 100%;
  overflow: visible;
  z-index: 0;
}

/* Four-line band. Line 1 (top) solid; lines 2 & 3 dashed; line 4 = square's top border.
   Lines sit at exact thirds of the band height. Vertical edges only on the row's
   first/last cell, so the band closes on the outside with no internal dividers. */
.pinyin-container.four-line {
  border-top: var(--grid-line-w) solid var(--grid-color);
}

.pinyin-container.four-line::before,
.pinyin-container.four-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background-image: linear-gradient(to right, var(--grid-color) 50%, transparent 50%);
  background-size: 4px 1px;
  background-repeat: repeat-x;
  z-index: -1; /* Behind the pinyin text — lines are the "paper", text writes on top */
}

.pinyin-container.four-line::before { top: 33.33%; }  /* line 2 (x-height top) */
.pinyin-container.four-line::after  { top: 66.67%; }  /* line 3 (baseline)     */

.char-block:first-child .pinyin-container.four-line {
  border-left: var(--grid-line-w) solid var(--grid-color);
}

.char-block:last-child .pinyin-container.four-line {
  border-right: var(--grid-line-w) solid var(--grid-color);
}

.pinyin {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  font-family: "Pinyin Hand", Arial, sans-serif;
  font-weight: 500;
  z-index: 1;
}

/* Container for the character that carries the 田字格 background. */
.char {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Pinyin Hand", "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  line-height: normal;
  text-align: center;
  position: relative;
}

/* 描红 (trace) mode: character renders as a light gray guide instead of solid ink. */
.char-trace { color: #c2c2c2; }

/* Square cell. Each cell draws only its TOP and LEFT line; the next cell/row supplies the
   shared line on the other side, so no line is ever drawn twice. The row's last cell adds
   the right edge and the page's last row adds the bottom edge to close the outer frame. */
.grid-box {
  border-top: var(--grid-line-w) solid var(--grid-color);
  border-left: var(--grid-line-w) solid var(--grid-color);
  position: relative;
  z-index: 1;
}

.char-block:last-child .grid-box {
  border-right: var(--grid-line-w) solid var(--grid-color);
}

.line-row:last-child .grid-box {
  border-bottom: var(--grid-line-w) solid var(--grid-color);
}

.grid-box::before,
.grid-box::after {
  content: "";
  position: absolute;
  z-index: -1;
}

.grid-box::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
  background-image: linear-gradient(to right, var(--grid-color) 50%, transparent 50%);
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.grid-box::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom, var(--grid-color) 50%, transparent 50%);
  background-size: 1px 4px;
  background-repeat: repeat-y;
}

/* Worksheet cell in 'stroke' mode: a transparent SVG of the strokes written so far,
   filling its own 田字格 so the grid lines show through and per-row pixel snapping
   can't accumulate into cross-cell drift. */
.stroke-cell-svg {
  position: absolute;
  inset: 0;
  display: block;
}

.stroke-cell-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------- Floating action button ---------------- */

.fab-btn {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  height: 44px;
  padding: 0 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, #D6553A, #A8381F);
  color: #FFF6F2;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  box-shadow: 0 5px 14px rgba(168, 56, 31, 0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.fab-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(168, 56, 31, 0.26);
}

/* ---------------- Tab bar ---------------- */

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 760px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper-card);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 300;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-faint);
}

.tab-item svg { width: 22px; height: 22px; fill: currentColor; }
.tab-item span { font-size: 10px; }

.tab-item.active { color: var(--cinnabar); }
.tab-item:active { opacity: 0.7; }

/* ---------------- 输入面板编辑态（移动端全屏；桌面端常驻内联） ---------------- */

.editor-tools { display: none; }

body.editing .input-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  height: auto;
  border: none;
  border-radius: 0;
  background: var(--paper);
  cursor: default;
  display: flex;
  flex-direction: column;
  padding: 0;
}

body.editing .input-tab,
body.editing .ai-entry { display: none; }

body.editing .editor-tools { display: flex; }

body.editing .text-preview { display: none; }

body.editing .text-input { display: block; }

.full-page-header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--paper-card);
  flex-shrink: 0;
  position: relative;
}

.header-clear {
  font-size: 14px;
  color: var(--ink-faint);
  padding: 5px 10px;
  border-radius: 5px;
}

.header-clear:active { color: #fa5151; background: #fff1f1; }

.header-left-actions { display: flex; align-items: center; gap: 2px; }

.header-ocr {
  font-size: 14px;
  color: var(--cinnabar);
  padding: 5px 10px;
  border-radius: 5px;
}

.header-ocr:active { background: var(--cinnabar-tint); }

.header-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--ink);
  letter-spacing: 0.5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-action {
  font-size: 15px;
  color: var(--cinnabar);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
}

.header-action:active { background: var(--cinnabar-tint); }

/* 移动端预览态隐藏输入框；编辑态/桌面端显示 */
.text-input {
  display: none;
  flex: 1;
  min-height: 120px;
  width: 100%;
  padding: 10px;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
}

.text-input::placeholder { color: var(--ink-faint); }

/* ---------------- Modals & masks ---------------- */

.modal-mask,
.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-mask[hidden], .sheet-mask[hidden] { display: none; }

.modal-content {
  background: var(--paper-card);
  width: min(320px, 88vw);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(58, 51, 48, 0.22);
  display: flex;
  flex-direction: column;
}

.modal-header {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  padding: 22px 24px 12px;
  color: var(--ink);
}

/* 弹层内容区通用内边距（各弹层可覆写） */
.modal-body {
  padding: 2px 24px 14px;
  display: flex;
  flex-direction: column;
}

.modal-footer {
  border-top: 1px solid var(--line);
  padding: 13px 24px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
}

.confirm-content .modal-header { padding-top: 22px; }

.confirm-body {
  padding: 4px 22px 20px;
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
}

.confirm-actions {
  display: flex;
  border-top: 1px solid var(--line);
}

.confirm-btn {
  flex: 1;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--cinnabar);
  text-align: center;
}

.confirm-btn.ghost {
  color: var(--ink-soft);
  background: transparent;
  font-weight: 400;
  border-right: 1px solid var(--line);
}

.confirm-btn:active { opacity: 0.85; }

.cancel-btn {
  font-size: 15px;
  color: var(--ink-soft);
  width: 100%;
  padding: 8px 0;
}

.cancel-btn:active { opacity: 0.7; }

/* ---------------- OCR result sheet ---------------- */

#ocr-sheet .modal-body { padding: 0 20px 12px; }

.ocr-preview-textarea {
  width: 100%;
  min-height: 150px;
  max-height: 38vh;
  background: var(--line-soft);
  border: none;
  outline: none;
  resize: none;
  border-radius: 8px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.ocr-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.stacked-btn { width: 100%; }

.outline-btn {
  background: transparent;
  color: var(--cinnabar);
  border: 1px solid var(--cinnabar);
}

/* ---------------- Bottom sheets ---------------- */

.sheet-mask.sheet-mask-bottom { align-items: flex-end; }
#picker-sheet, #action-sheet { align-items: flex-end; }

@media (max-width: 919px), (max-height: 560px) {
  #stroke-sheet { align-items: flex-end; }
  #stroke-sheet .stroke-sheet { border-radius: 14px 14px 0 0; width: 100%; }
}

.sheet-panel {
  background: var(--paper-card);
  border-radius: 14px 14px 0 0;
  width: 100%;
  max-height: 70%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -5px 16px rgba(58, 51, 48, 0.16);
  animation: sheetIn 0.2s ease-out;
}

@keyframes sheetIn {
  from { transform: translateY(15px); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

.sheet-header {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}

.sheet-option:last-child { border-bottom: none; }
.sheet-option:active { background: var(--line-soft); }
.sheet-option.active { background: var(--cinnabar-tint); }
.sheet-option.active .option-name { color: var(--cinnabar); font-weight: 600; }

.option-info { display: flex; flex-direction: column; }

.color-option-info { flex-direction: row; align-items: center; gap: 6px; }

.option-check { width: 20px; height: 20px; fill: var(--cinnabar); flex-shrink: 0; }

.option-name { font-size: 16px; color: var(--ink); }
.option-desc { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

.color-swatch {
  width: 28px;
  height: 12px;
  border-radius: 7px;
  border: 1px solid rgba(58, 51, 48, 0.1);
  box-shadow: 0 2px 5px rgba(58, 51, 48, 0.08);
  flex-shrink: 0;
}

.sheet-footer {
  padding: 10px 15px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}

.sheet-cancel {
  font-size: 16px;
  color: var(--ink-soft);
  padding: 8px 20px;
}

.sheet-cancel:active { color: var(--ink); }

/* Export action sheet (iOS style) */
.action-panel {
  width: min(320px, 88vw);
  margin-bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: sheetIn 0.2s ease-out;
}

.action-option {
  background: var(--paper-card);
  padding: 15px 0;
  font-size: 16px;
  color: var(--ink);
  text-align: center;
  border-radius: 12px;
}

.action-option:first-child { border-radius: 12px 12px 0 0; }
.action-option:active { background: var(--line-soft); }

.action-option.primary {
  color: var(--cinnabar);
  font-weight: 600;
  border-radius: 0 0 12px 12px;
  margin-top: -8px;
  background: var(--paper-card);
  padding-top: 15px;
}

/* Grouped look: 复制内容 on top half, 导出为 PDF under it, 取消 as a separate card. */
.action-option.primary { margin-top: 1px; border-radius: 0; }
.action-cancel {
  background: var(--paper-card);
  padding: 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  border-radius: 12px;
}

.action-cancel:active { background: var(--line-soft); }
.action-option:active { background: var(--line-soft); }

/* ---------------- Stroke-order sheet ---------------- */

.ocr-sheet { padding-bottom: env(safe-area-inset-bottom); }

.stroke-sheet .modal-header { padding-bottom: 6px; }

.stroke-sheet .modal-body {
  padding: 0 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 62vh;
  overflow-y: auto;
}

.stroke-stage { display: flex; justify-content: center; padding: 5px 0 3px; }

/* 田字格 backdrop for the animation. Drawn with borders + gradients so the glyph
   SVG can stay transparent. */
.stroke-grid {
  position: relative;
  width: 190px;
  height: 190px;
  border: 1px solid #d9c4bb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stroke-grid::before,
.stroke-grid::after { content: ""; position: absolute; }

.stroke-grid::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
  background-image: linear-gradient(to right, #d9c4bb 50%, transparent 50%);
  background-size: 5px 1px;
  background-repeat: repeat-x;
}

.stroke-grid::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom, #d9c4bb 50%, transparent 50%);
  background-size: 1px 5px;
  background-repeat: repeat-y;
}

.stroke-grid svg { width: 100%; height: 100%; display: block; }

/* Fallback glyph for characters outside the bundled 一级字表. */
.stroke-plain {
  font-family: "Pinyin Hand", "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 130px;
  line-height: 1;
  color: var(--ink);
}

.stroke-status {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 16px;
}

.stroke-step {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.stroke-controls { display: flex; gap: 7px; }

.stroke-btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink);
  background: var(--line-soft);
  border-radius: 7px;
}

.stroke-btn:active { background: var(--line); }
.stroke-btn.primary { color: #fff; background: var(--cinnabar); }
.stroke-btn.disabled { color: var(--ink-faint); opacity: 0.6; }

.stroke-poly {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.stroke-poly-title { font-size: 12px; color: var(--ink-soft); }

.stroke-poly-list { display: flex; flex-wrap: wrap; gap: 8px; }

.poly-chip {
  padding: 7px 16px;
  font-size: 16px;
  line-height: 1.4;
  font-family: "Pinyin Hand", Arial, sans-serif;
  color: var(--ink);
  background: var(--line-soft);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}

.poly-chip.active {
  color: var(--cinnabar);
  background: var(--cinnabar-tint);
  border-color: var(--cinnabar);
}

/* line-height leaves room for the tone marks — Pinyin Hand's accents sit high
   and get clipped at line-height 1. */
.stroke-single-pinyin {
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  font-family: "Pinyin Hand", Arial, sans-serif;
  color: var(--cinnabar);
}

/* ---------------- AI 汉字小课堂 ---------------- */

.ai-card {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.ai-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-card-title {
  font-size: 12px;
  color: var(--cinnabar);
  font-weight: 600;
  letter-spacing: 0.5px;
}

#ai-card-retry {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: underline;
}

.ai-card-body {
  margin-top: 8px;
  background: var(--line-soft);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-card-row p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ai-card-label {
  display: inline-block;
  font-size: 11px;
  color: #fff;
  background: var(--cinnabar);
  border-radius: 4px;
  padding: 1px 7px;
}

.ai-card-body ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.ai-card-body li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.word-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 4px 6px 0 0;
  color: var(--ink);
}

.ai-card-loading,
.ai-card-error {
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  padding: 8px 0;
}

/* ---------------- Settings view ---------------- */

.view-settings {
  padding: 12px 10px calc(var(--tabbar-h) + 20px);
  overflow-y: auto;
  display: block;
}

.settings-group {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(58, 51, 48, 0.04);
}

.settings-header {
  font-size: 12px;
  color: var(--cinnabar);
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 11px 15px 7px;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--line-soft);
}

.settings-item:last-child { border-bottom: none; }

.tap-row { cursor: pointer; }
.tap-row:active { background: var(--line-soft); }

.item-left { flex: 1; display: flex; flex-direction: column; }

.item-label { font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.item-desc { font-size: 12px; color: var(--ink-faint); }

.item-right { display: flex; align-items: center; }

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  border: 0.5px solid var(--line);
}

.item-value { font-size: 15px; color: var(--ink-soft); margin-right: 5px; }

.arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--ink-faint);
  border-right: 2px solid var(--ink-faint);
  transform: rotate(45deg);
}

.info-item { padding: 15px; display: block; }

.info-text {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Small "AI 出题" pill inside the input card, top-right. */
.ai-entry {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 1;
  font-size: 11px;
  color: var(--cinnabar);
  background: var(--cinnabar-tint);
  border-radius: 20px;
  padding: 4px 10px;
}

.ai-entry:active { background: var(--cinnabar-line); }

/* ---------------- AI 出题 sheet ---------------- */

.ai-sheet .modal-body { padding-bottom: 10px; gap: 16px; }

.ai-sheet .ocr-footer { padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); }

#ai-form { min-height: 150px; }

.ai-kind-row { display: flex; flex-wrap: wrap; gap: 8px; }

#ai-grade-chips .ai-chip {
  min-width: 38px;
  text-align: center;
}

.ai-chip {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--line-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.ai-chip.active {
  color: var(--cinnabar);
  background: var(--cinnabar-tint);
  border-color: var(--cinnabar);
}

.ai-field { margin-top: 12px; }

.ai-field label {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.ai-input {
  width: 100%;
  background: var(--line-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  resize: none;
}

.ai-input:focus { border-color: var(--cinnabar-line); background: #fff; }

.primary-grad {
  background: linear-gradient(135deg, #D6553A, #A8381F);
}

/* ---------------- Toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 76px);
  transform: translateX(-50%) translateY(6px);
  background: rgba(17, 17, 17, 0.85);
  color: #fff;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 8px;
  z-index: 1500;
  max-width: 80vw;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast[hidden] { display: none; }

/* ---------------- Loading overlay ---------------- */

.loading-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1600;
}

.loading-mask[hidden] { display: none; }

.loading-box {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  min-width: 130px;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Sidebar 版式设置（桌面侧栏直出，移动端隐藏） ---------------- */

.settings-panel {
  display: none;
  padding: 14px;
}

.panel-title {
  font-size: 12px;
  color: var(--cinnabar);
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.ctl + .ctl { margin-top: 14px; }

.ctl-label {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 7px;
}

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.seg-chip {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
  background: var(--line-soft);
  color: var(--ink-soft);
  border: 1px solid transparent;
  cursor: pointer;
}

.seg-chip.active {
  color: var(--cinnabar);
  background: var(--cinnabar-tint);
  border-color: var(--cinnabar);
}

.dot-row { display: flex; gap: 10px; }

.color-dot-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(58, 51, 48, 0.15), 0 1px 3px rgba(58, 51, 48, 0.12);
}

.ctl-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch { position: relative; display: inline-block; width: 42px; height: 23px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 23px;
  transition: background 0.2s;
  cursor: pointer;
}

.slider::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.switch input:checked + .slider { background: var(--cinnabar); }
.switch input:checked + .slider::before { transform: translateX(19px); }

.ctl-about {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ============================================================
 * 桌面布局 ≥920px：
 * 顶栏（品牌 + 导出）｜左侧栏（输入 + 版式设置）｜右侧画布工作区
 * ============================================================ */

@media (min-width: 920px) {

  .app {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
    grid-template-areas:
      "topbar  topbar"
      "sidebar desk";
  }

  /* ---- 顶栏 ---- */
  .top-bar {
    grid-area: topbar;
    height: 56px;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    background: var(--paper-card);
    border-bottom: 1px solid var(--line);
  }

  .brand { font-size: 16px; font-weight: 700; }

  .nav-actions { display: flex; gap: 10px; }

  .nav-btn {
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
  }

  .nav-btn.ghost {
    color: var(--ink-soft);
    background: var(--paper-card);
    border: 1px solid var(--line);
  }

  .nav-btn.ghost:hover { color: var(--cinnabar); border-color: var(--cinnabar-line); background: var(--paper); }

  .nav-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #D6553A, #A8381F);
    box-shadow: 0 2px 6px rgba(168, 56, 31, 0.25);
  }

  .nav-btn.primary:hover { filter: brightness(1.06); }
  .nav-btn:active { transform: translateY(1px); }

  /* ---- 双栏 ---- */
  .workspace { display: contents; }

  .sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 16px 16px;
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }

  .desk {
    grid-area: desk;
    padding: 14px 28px 24px;
    background: var(--paper-sunken);
  }

  .settings-panel { display: block; }

  /* ---- 输入面板：内联编辑 ---- */
  .input-panel {
    margin: 0;
    height: auto;
    padding: 14px 14px 12px;
  }

  .input-head {
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .input-tab {
    position: static;
    background: transparent;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .ai-entry {
    position: static;
    font-size: 12px;
    padding: 5px 12px;
  }

  .ai-entry:hover { background: var(--cinnabar-line); }

  .input-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .desktop-ocr { display: inline-flex; align-items: center; }

  #mobile-preview { display: none !important; }

  .text-input {
    display: block;
    height: 230px;
    min-height: 140px;
    max-height: 55vh;
    resize: vertical;
    font-size: 14px;
    line-height: 1.8;
  }

  .editor-tools { display: none !important; }

  body.editing .input-panel { position: relative; inset: auto; }

  /* ---- 版式设置 ---- */
  .seg-chip:hover { background: var(--line); }
  .seg-chip.active:hover { background: var(--cinnabar-tint); }
  .color-dot-btn { transition: transform 0.12s; }
  .color-dot-btn:hover { transform: scale(1.12); }
  .color-dot-btn.active { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

  /* ---- 画布区：纸浮在案上 ---- */
  .setting-bar { height: 40px; padding: 0 4px; }

  .help-text { font-size: 12px; }

  .paper-canvas {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 4px 28px;
  }

  .page-sheet {
    box-shadow:
      0 1px 3px rgba(58, 51, 48, 0.08),
      0 8px 28px rgba(58, 51, 48, 0.16);
  }

  /* 细滚动条 */
  .paper-canvas::-webkit-scrollbar { width: 12px; height: 12px; }
  .paper-canvas::-webkit-scrollbar-thumb {
    background: rgba(58, 51, 48, 0.18);
    border-radius: 8px;
    border: 3px solid var(--paper-sunken);
  }
  .paper-canvas::-webkit-scrollbar-track { background: transparent; }

  .sidebar::-webkit-scrollbar { width: 10px; }
  .sidebar::-webkit-scrollbar-thumb {
    background: rgba(58, 51, 48, 0.15);
    border-radius: 6px;
    border: 3px solid var(--paper);
  }

  /* ---- 隐藏移动端专属部件 ---- */
  .tab-bar,
  .fab-btn,
  #view-settings { display: none !important; }

  /* ---- 弹层全部改为居中对话框 ---- */
  .sheet-mask,
  #picker-sheet,
  #action-sheet,
  #stroke-sheet,
  #ocr-sheet,
  #ai-sheet {
    align-items: center;
    justify-content: center;
  }

  @keyframes popIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  .sheet-panel,
  .modal-content,
  .action-panel {
    animation: popIn 0.16s ease-out;
  }

  .sheet-panel {
    width: min(420px, 92vw);
    max-height: 82vh;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(58, 51, 48, 0.22);
  }

  #picker-options { max-height: 60vh; }

  #ocr-sheet .modal-content,
  #ai-sheet .modal-content { width: min(540px, 92vw); }

  /* AI 弹层桌面端加大呼吸感 */
  #ai-sheet .modal-header { padding: 26px 32px 14px; }
  #ai-sheet .modal-body { padding: 6px 36px 20px; gap: 18px; }
  #ai-sheet .ocr-footer { padding: 16px 36px calc(16px + env(safe-area-inset-bottom)); }
  #ai-sheet .ai-field { margin-top: 18px; }
  #ai-sheet .ai-field label { font-size: 12px; margin-bottom: 8px; }
  #ai-sheet .ai-chip { padding: 9px 20px; font-size: 14px; }
  #ai-sheet .ai-input { padding: 11px 14px; font-size: 14px; }

  #stroke-sheet .stroke-sheet { width: min(480px, 92vw); }

  .stroke-grid { width: 260px; height: 260px; }
  .stroke-plain { font-size: 170px; }

  .action-panel { width: 300px; margin-bottom: 0; }

  .ocr-preview-textarea { max-height: 46vh; }

  .toast { bottom: 36px; }
}