/* 竖式谜专属样式 —— 通用组件在 app.css */

.page-vertical { max-width: 1400px; }

/* ============================================================
 *  主操作条
 * ============================================================ */
.primary-bar .input-row { gap: var(--sp-3); }
.primary-bar .input-main { font-size: 17px; }

/* ============================================================
 *  双栏布局
 * ============================================================ */
.dual-pane {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 1.2fr);
  gap: var(--sp-4);
  align-items: start;
}

.pane-edit { display: flex; flex-direction: column; gap: var(--sp-3); }
.pane-preview {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  background: var(--bg-card);
}

/* ============================================================
 *  网格区
 * ============================================================ */
.grid-stage {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
}

/* 除数行（移到网格上方，与被除数对齐） */
.divisor-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
}
.divisor-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.divisor-cells {
  display: flex;
  gap: 4px;
}

.grid-wrap { margin: 0 auto; }
.grid-table { border-collapse: collapse; }
.grid-table td { padding: 0; }

.g-op {
  width: 36px;
  height: 56px;
  text-align: center;
  vertical-align: middle;
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
  background: transparent;
  border: none;
  user-select: none;
  border-radius: var(--r-sm);
  transition: background .1s;
}
.g-op:hover { background: var(--accent-soft); }

.g-cell {
  width: 52px;
  height: 56px;
  text-align: center;
  vertical-align: middle;
  font-size: 22px;
  color: var(--text-primary);
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  user-select: none;
  position: relative;
  transition: all .1s;
  border-radius: var(--r-sm);
}
.g-cell:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.g-cell.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-border);
  font-weight: 600;
}
.g-cell.blank-cell { color: var(--text-secondary); }
.g-cell.blank-cell::after {
  content: "□";
  font-size: 20px;
  color: var(--accent);
  opacity: 0.5;
}
/* shape char 不同背景色（视觉差异化） */
.g-cell[data-shape="#"]::after { content: "□"; }
.g-cell[data-shape="@"]::after { content: "○"; }
.g-cell[data-shape="^"]::after { content: "△"; }
.g-cell[data-shape="`"]::after { content: "▽"; }
.g-cell[data-shape="$"]::after { content: "◇"; }
.g-cell[data-shape="%"]::after { content: "☆"; }
.g-cell[data-shape="&"]::after { content: "✚"; }
.g-cell[data-shape="~"]::after { content: "⬡"; }

/* 除数小格子 */
.divisor-cells .g-cell {
  width: 40px;
  height: 44px;
  font-size: 18px;
}

/* 横线行 */
.g-hline td { padding: 0; height: 4px; border: none; }
.g-hline-inner { height: 2px; background: var(--text-primary); margin: 1px 0; border-radius: 1px; }

/* 列号 */
.g-hdr {
  width: 36px;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  height: 20px;
}
.g-hdr-line {
  width: 52px;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  height: 20px;
}

/* ============================================================
 *  单元格工具栏
 * ============================================================ */
.cell-toolbar {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  min-height: 56px;
  display: flex;
  align-items: center;
}
.cell-toolbar .hint {
  font-size: 13px;
  color: var(--text-tertiary);
}
.cell-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.tb-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-right: 4px;
}
.shape-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 18px;
  color: var(--text-primary);
  transition: all .1s;
}
.shape-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.quick-char {
  width: 44px;
  height: 36px;
  text-align: center;
  font-size: 16px;
  font-family: var(--font-mono);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-primary);
}
.quick-char:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ============================================================
 *  网格元数据（行列 / 模板）
 * ============================================================ */
.grid-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.grid-controls, .preset-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.division-next-btn {
  font-weight: 600;
}

/* ============================================================
 *  预览区
 * ============================================================ */
.preview-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  text-align: center;
  min-height: 240px;
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
.preview-img {
  max-width: 100%;
  max-height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
}

/* ============================================================
 *  求解结果面板
 * ============================================================ */
.solution-panel {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  margin-top: auto;
}
.sol-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.sol-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sol-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--font-mono);
}
.sol-list .sol-item {
  text-align: left;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font-mono);
}
.sol-list .sol-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
.sol-list .sol-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
  font-family: var(--font-ui);
}

.sol-preview {
  margin-top: var(--sp-3);
  text-align: center;
}
.sol-preview img {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* ============================================================
 *  参数网格
 * ============================================================ */
.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.params-grid label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.params-grid input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-primary);
}
.params-grid input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ============================================================
 *  响应式
 * ============================================================ */
@media (max-width: 1024px) {
  .dual-pane { grid-template-columns: 1fr; }
}