/* cards.css —— 拾字卡片工坊（浅色工作台） */
.cards-page {
  --cz-bg: #FAF7FC;
  --cz-card: #ffffff;
  --cz-ink: #3D3040;
  --cz-dim: #8a7f95;
  --cz-line: #eee6f3;
  --cz-a: #8B5CF6;
  background: var(--cz-bg);
  color: var(--cz-ink);
  min-height: 100vh;
  font-family: Nunito, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/* ---- Hero ---- */
.cz-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 92px 24px 30px;
  text-align: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--cz-dim);
}
.k-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cz-a); }
.cz-title {
  margin: 12px 0 14px;
  font-size: clamp(36px, 6vw, 58px);
  font-weight: 800;
  background: linear-gradient(120deg, #6D28D9, #EC4899 60%, #F59E0B);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cz-lede { margin: 0 auto; max-width: 560px; color: var(--cz-dim); font-size: 15px; line-height: 1.9; }

/* ---- 主体两栏 ---- */
.cz-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px 30px;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 920px) {
  .cz-wrap { grid-template-columns: 1fr; }
  .cz-stage-wrap { order: -1; }   /* 手机上先看卡再编辑 */
}

/* ---- 编辑器 ---- */
.cz-editor {
  background: var(--cz-card);
  border: 1px solid var(--cz-line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 50px -30px rgba(124, 58, 237, .25);
  display: flex; flex-direction: column; gap: 18px;
}
.cz-field { display: flex; flex-direction: column; gap: 8px; }
.cz-label { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; color: var(--cz-dim); }
.cz-editor textarea, .cz-editor input {
  font-family: inherit; font-size: 15px; color: var(--cz-ink);
  border: 1.5px solid var(--cz-line); border-radius: 14px;
  padding: 12px 14px; outline: none; resize: vertical;
  background: #FCFAFE;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cz-editor textarea:focus, .cz-editor input:focus {
  border-color: var(--cz-a);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .12);
}
.cz-editor textarea { min-height: 96px; line-height: 1.7; }

.cz-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }

/* 风格缩略图：统一行高，选中态不改变布局 */
.cz-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cz-tpl {
  appearance: none; cursor: pointer; border: 2px solid transparent;
  border-radius: 14px; overflow: hidden; padding: 0;
  background: none; position: relative;
  display: flex; flex-direction: column;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-family: inherit;
}
.cz-tpl:hover { transform: translateY(-2px); }
.cz-tpl.on { border-color: var(--cz-a); box-shadow: 0 8px 22px -8px rgba(139, 92, 246, .5); }
.cz-tpl .sw { display: block; height: 54px; width: 100%; flex: none; }
.cz-tpl .nm {
  display: flex; align-items: center; justify-content: center;
  height: 32px; flex: none;
  font-size: 12px; font-weight: 700; color: var(--cz-ink);
  background: #fff; border-top: 1px solid var(--cz-line);
}
.cz-tpl.on .nm { color: #6D28D9; }
/* 六种风格的缩略渐变（与 JS 模板一一对应） */
.cz-tpl[data-t="0"] .sw { background: linear-gradient(160deg, #FCFBF9, #F1EDE4); }
.cz-tpl[data-t="1"] .sw { background: linear-gradient(160deg, #2E1A47, #B1468A 60%, #FF9E64); }
.cz-tpl[data-t="2"] .sw { background: linear-gradient(160deg, #0B1026, #1D2B64 70%, #3E5C9A); }
.cz-tpl[data-t="3"] .sw { background: linear-gradient(160deg, #FFF5F8, #FCE7F3 60%, #F5D0FE); }
.cz-tpl[data-t="4"] .sw { background: linear-gradient(160deg, #0C2B23, #14532D 70%, #2F7A4F); }
.cz-tpl[data-t="5"] .sw { background: linear-gradient(160deg, #F5EFE0, #EBDFC2); }

/* chips */
.cz-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cz-chip {
  appearance: none; cursor: pointer;
  border: 1.5px solid var(--cz-line);
  background: #fff; color: var(--cz-dim);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px;
  transition: all .2s ease;
}
.cz-chip:hover { border-color: var(--cz-a); color: var(--cz-ink); }
.cz-chip.on { background: var(--cz-a); border-color: var(--cz-a); color: #fff; }

/* 按钮 */
.cz-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cz-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--cz-line); background: #fff;
  color: var(--cz-ink); font-family: inherit; font-size: 13.5px; font-weight: 800;
  padding: 11px 18px; border-radius: 999px;
  transition: all .2s ease;
}
.cz-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cz-btn:hover { border-color: var(--cz-a); color: #6D28D9; }
.cz-btn.primary {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 24px -10px rgba(124, 58, 237, .6);
}
.cz-btn.primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(124, 58, 237, .7); }
.cz-btn.ghost { background: transparent; }
.cz-btn.ok { background: #10b981; border-color: #10b981; color: #fff; }

/* ---- 预览 ---- */
.cz-stage-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cz-stage {
  width: 100%; max-width: 460px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(61, 22, 105, .45);
  background: #fff;
}
.cz-stage canvas { display: block; width: 100%; height: auto; }
.cz-note { font-size: 12px; color: var(--cz-dim); letter-spacing: .1em; }

.back-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 40px 20px 70px; }
.btn-ghost {
  display: inline-block;
  border: 1.5px solid var(--cz-line); border-radius: 999px;
  color: var(--cz-dim); text-decoration: none;
  padding: 10px 22px; font-size: 14px; font-weight: 700;
  transition: all .25s ease;
}
.btn-ghost:hover { color: #6D28D9; border-color: var(--cz-a); }

/* 跳转链接（本页自己的，避开 style.css 依赖） */
.cards-page .skip-link {
  position: fixed; left: -9999px; top: 10px; z-index: 100;
  background: var(--cz-a); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.cards-page .skip-link:focus { left: 12px; }

@media (max-width: 640px) {
  .cz-hero { padding-top: 80px; }
  .cz-lede br { display: none; }
  .cz-wrap { padding: 8px 16px 20px; }
  .cz-row { grid-template-columns: 1fr; }
  .cz-btn span { display: none; }
}

/* iOS Safari：输入控件字号 ≥16px，避免聚焦时页面自动放大 */
@media(max-width:620px){input,textarea{font-size:16px}}