/* ===== 诗笺 · 诗歌排版工具 样式 ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #ece7df;
  color: #2b2622;
  -webkit-font-smoothing: antialiased;
}

/* ---- 顶栏 ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: #fbf8f2;
  border-bottom: 1px solid #e3dccd; position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: #2b2622; color: #f3ead6; border-radius: 10px;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; font-size: 26px; line-height: 1;
}
.brand-text h1 { margin: 0; font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; font-size: 26px; letter-spacing: 4px; }
.brand-text p { margin: 2px 0 0; font-size: 12px; color: #8a8073; }
.topbar-actions { display: flex; gap: 10px; }
.primary-btn {
  background: #2b2622; color: #f3ead6; border: none; padding: 10px 16px;
  border-radius: 9px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.primary-btn:hover { background: #423a32; }
.ghost-btn {
  background: transparent; color: #5a5147; border: 1px solid #d8cfbd;
  padding: 10px 14px; border-radius: 9px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.ghost-btn:hover { background: #f1ece1; }

/* ---- 工作区 ---- */
.workspace { display: grid; grid-template-columns: 380px 1fr; gap: 0; min-height: calc(100vh - 71px); }
.panel { padding: 22px; }
.controls { background: #fbf8f2; border-right: 1px solid #e3dccd; overflow-y: auto; max-height: calc(100vh - 71px); }
.preview { background: #e6e0d6; display: flex; flex-direction: column; }

.field { margin-bottom: 18px; }
.field > label,
.field.row2 > div > label { display: block; font-size: 13px; color: #6b6155; margin-bottom: 6px; font-weight: 500; }
.field .hint { color: #b08a3e; font-size: 12px; font-weight: 400; }
.field .hint.pickable { cursor: pointer; border-bottom: 1px dashed #b08a3e; }
.field .hint.pickable:hover { color: #8c6a26; }
.field.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field.row2 > div { min-width: 0; }
input[type=text], textarea {
  width: 100%; border: 1px solid #ddd4c2; border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; background: #fff; color: #2b2622;
}
textarea { resize: vertical; line-height: 1.7; }
input:focus, textarea:focus { outline: none; border-color: #b08a3e; }
input[type=range] { width: 100%; accent-color: #b08a3e; }

.toggles { display: flex; gap: 18px; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #5a5147; }

/* ---- 风格选择 ---- */
.style-groups { display: flex; flex-direction: column; gap: 14px; }
.style-group-title { font-size: 12px; color: #9a8f7e; letter-spacing: 1px; margin: 2px 0 6px; }
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-chip {
  border: 1.5px solid #e0d8c6; background: #fff; border-radius: 9px;
  padding: 9px 6px; font-size: 12.5px; cursor: pointer; text-align: center;
  color: #4a4239; transition: all .15s; line-height: 1.3;
}
.style-chip:hover { border-color: #b08a3e; }
.style-chip.active { border-color: #2b2622; background: #2b2622; color: #f3ead6; }
.style-chip .sw { display: block; height: 6px; border-radius: 3px; margin-bottom: 6px; }

/* ---- 预览区 ---- */
.preview { align-items: center; }
.preview-scroll {
  flex: 1; width: 100%; overflow: auto; display: flex; justify-content: center;
  align-items: flex-start; padding: 34px 20px;
}
#stage { display: flex; justify-content: center; flex: 0 0 auto; }
.preview-tip { font-size: 12px; color: #8a8073; text-align: center; padding: 8px 0 14px; }

/* =========================================================
   诗歌卡基础 (.pc) + CSS 变量
   ========================================================= */
.pc {
  --card-bg: #fbf6ec;
  --ink: #2f2a24;
  --muted: #8a8073;
  --accent: #b08a3e;
  --line: #e0d6c2;
  --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --radius: 14px;
  --pad: 42px;
  --fs: 18px;
  position: relative;
  background: var(--card-bg);
  color: var(--ink);
  width: 480px;
  padding: var(--pad);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(40,30,20,.18);
  overflow: hidden;
}
.pc-inner { position: relative; z-index: 2; }
.pc-tag {
  display: none;
  font-family: var(--sfont); font-size: 12px; letter-spacing: 3px;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 20px;
  padding: 3px 12px; margin: 0 auto 18px; width: fit-content;
}
.pc-title {
  font-family: var(--tfont); font-weight: 700; color: var(--ink);
  text-align: center; margin: 0 0 22px; line-height: 1.3;
  font-size: calc(var(--fs) * 1.7);
}
.pc-body { display: flex; flex-direction: column; gap: 16px; }
.stanza {
  font-family: var(--bfont); font-size: var(--fs); line-height: 2;
  text-align: center; color: var(--ink); margin: 0; white-space: pre-wrap;
}
.pc-meta {
  margin-top: 26px; display: flex; justify-content: flex-end; gap: 14px;
  font-family: var(--sfont); font-size: 13px; color: var(--muted);
}
.pc-seal {
  position: absolute; left: 28px; bottom: 26px; z-index: 3;
  width: 52px; height: 52px; border: 2.5px solid #a8312a; border-radius: 4px;
  color: #a8312a; font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; font-size: 22px;
  display: grid; place-items: center; line-height: 1; background: rgba(168,49,42,.04);
}
.pc-watermark {
  position: absolute; right: 14px; bottom: 10px; z-index: 4;
  font-size: 11px; color: var(--muted); opacity: .7; font-family: var(--sfont);
}
.pc-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* =========================================================
   布局：l-card（横向卡片，多数风格共用）
   ========================================================= */
.l-card .pc-inner { display: flex; flex-direction: column; align-items: center; }
.l-card .pc-body { align-items: center; }

/* =========================================================
   布局：l-vertical（竖排：手写海报 / 古籍竖排）
   ========================================================= */
/* 宽度随列数自适应：长诗竖排不再被 overflow:hidden 裁掉 */
.l-vertical { width: auto; min-width: 520px; max-width: 1100px; flex: 0 0 auto; }
.l-vertical .pc-inner {
  display: block; position: relative;
  height: auto; min-height: 560px;
}
.l-vertical .pc-title {
  position: absolute; top: 0;
  /* 贴卡片最右边缘：抵消 .pc 的右侧 padding */
  right: calc(-1 * var(--pad) + 4px);
  writing-mode: vertical-rl; text-orientation: upright;
  margin: 0; text-align: start;
  font-size: calc(var(--fs) * 2.1); letter-spacing: 6px;
  z-index: 3;
}
.l-vertical .pc-body { display: flex; flex-direction: row-reverse; gap: 22px; align-items: flex-start; }
.l-vertical .stanza {
  writing-mode: vertical-rl; text-orientation: upright;
  text-align: start; line-height: 1.9; letter-spacing: 2px;
}
.l-vertical .pc-meta {
  position: absolute; left: 28px; top: 28px; z-index: 3;
  writing-mode: vertical-rl; text-orientation: upright;
  margin: 0; letter-spacing: 4px; font-size: 13px;
}

/* =========================================================
   布局：l-scroll（长卷目录）
   ========================================================= */
.l-scroll { width: 460px; }
.l-scroll .pc-body { align-items: stretch; gap: 22px; }
.l-scroll .stanza { text-align: left; position: relative; padding-left: 40px; }
.l-scroll .stanza::before {
  counter-increment: stz; content: counter(stz, decimal-leading-zero);
  position: absolute; left: 0; top: 4px; font-family: var(--sfont);
  font-size: 13px; color: var(--accent); opacity: .55; letter-spacing: 0;
}
.l-scroll .pc-body { counter-reset: stz; }

/* =========================================================
   布局：l-poster（图文编辑 / 丝网印）
   ========================================================= */
.l-poster .pc-title { font-size: calc(var(--fs) * 2.4); letter-spacing: 4px; }
.l-poster .pc-body { align-items: center; }

/* =========================================================
   布局：l-collage（手账拼贴）
   ========================================================= */
.l-collage { width: 500px; }
.l-collage .pc-inner { display: flex; flex-direction: column; align-items: center; }
.l-collage .stanza:nth-child(odd) { transform: rotate(-1.2deg); }
.l-collage .stanza:nth-child(even) { transform: rotate(1deg); }
.l-collage .pc-deco::before, .l-collage .pc-deco::after {
  content: ""; position: absolute; width: 120px; height: 30px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 8px, rgba(230,210,180,.5) 8px 16px);
  border: 1px solid rgba(0,0,0,.06); opacity: .8;
}
.l-collage .pc-deco::before { top: 18px; left: -18px; transform: rotate(-32deg); }
.l-collage .pc-deco::after { bottom: 60px; right: -16px; transform: rotate(28deg); }

/* =========================================================
   风格 01 · 手写诗展 (A)  — vertical + brush
   ========================================================= */
.s-brush {
  --card-bg: #f4ecda; --ink: #36302a; --muted: #8a7d6a; --accent: #a8312a;
  --line: #e4d8bf; --tfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; --bfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --sfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; --radius: 8px; --pad: 46px;
}
.s-brush .pc-deco::after {
  content: ""; position: absolute; top: 40px; right: 46px; width: 84px; height: 84px;
  border-radius: 50%; background: radial-gradient(circle at 38% 38%, #f7e9c8 0 38%, #efe0bb 39% 60%, transparent 62%);
  opacity: .6;
}

/* =========================================================
   风格 02 · 古籍竖排 (B)
   ========================================================= */
.s-classical {
  --card-bg: #efe6d2; --ink: #3a3026; --muted: #8c7c63; --accent: #9a5b3a;
  --line: #d8c8a8; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --radius: 4px; --pad: 50px;
}
.s-classical .pc-deco {
  background-image: repeating-linear-gradient(to left, transparent 0 46px, rgba(120,90,50,.10) 46px 47px);
}

/* =========================================================
   风格 03 · 极简诗卡 (C)
   ========================================================= */
.s-card {
  --card-bg: #f7f3ea; --ink: #34302a; --muted: #9a9082; --accent: #c08a3e;
  --line: #e6ddcb; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 16px; --pad: 46px;
}
.s-card .pc-title { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.s-card .pc-body { margin-top: 8px; }

/* =========================================================
   风格 04 · 手账拼贴 (D)
   ========================================================= */
.s-journal {
  --card-bg: #fff7ef; --ink: #4a4138; --muted: #a08c78; --accent: #e08aa0;
  --line: #f0dcc8; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 18px; --pad: 40px;
}
.s-journal .pc-title { color: #e0708a; }

/* =========================================================
   风格 05 · 杂志编辑 (E)
   ========================================================= */
.s-magazine {
  --card-bg: #fbf6ec; --ink: #2f2a24; --muted: #8a8073; --accent: #b08a3e;
  --line: #e0d6c2; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 14px; --pad: 46px;
}
.s-magazine .pc-tag { display: block; }
.s-magazine .pc-body { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }

/* =========================================================
   风格 06 · 长卷目录 (F)
   ========================================================= */
.s-scroll {
  --card-bg: #f6efe0; --ink: #3a342b; --muted: #91866f; --accent: #b08a3e;
  --line: #e2d8c0; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 6px; --pad: 44px;
}

/* =========================================================
   风格 07 · 图文编辑 (G) — poster
   ========================================================= */
.s-imagetext {
  --card-bg: #f3efe6; --ink: #2f2a24; --muted: #8a8073; --accent: #c2632f;
  --line: #e2d8c0; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 10px; --pad: 48px;
}
/* 标题下加一条强调线，替代原来像占位块的橙色色块 */
.s-imagetext .pc-title { border-bottom: 2px solid var(--accent); padding-bottom: 8px; }

/* =========================================================
   通用卡片 · 暖色 warm
   ========================================================= */
.s-warm {
  --card-bg: #fff3e2; --ink: #4a3b2e; --muted: #a98a6c; --accent: #d98a3d;
  --line: #f0dcc2; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 18px; --pad: 46px;
}

/* 清新 fresh */
.s-fresh {
  --card-bg: #eef6f2; --ink: #2f4a42; --muted: #6f9588; --accent: #3fae8e;
  --line: #d6e8e0; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 18px; --pad: 46px;
}

/* 马卡龙 macaron */
.s-macaron {
  --card-bg: #fdeef4; --ink: #5a4a55; --muted: #b08aa0; --accent: #e87aa6;
  --line: #f6d8e6; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 22px; --pad: 44px;
}

/* 复古 retro */
.s-retro {
  --card-bg: #efe3cb; --ink: #4a3a28; --muted: #9a8260; --accent: #9c5a2c;
  --line: #ddcaa6; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 6px; --pad: 46px;
  filter: sepia(.12);
}

/* 极简 minimal */
.s-minimal {
  --card-bg: #ffffff; --ink: #2b2b2b; --muted: #b0b0b0; --accent: #888;
  --line: #eaeaea; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 4px; --pad: 52px;
}
.s-minimal { box-shadow: 0 4px 24px rgba(0,0,0,.08); }

/* 粗体 bold */
.s-bold {
  --card-bg: #fffbe9; --ink: #16130c; --muted: #6b6450; --accent: #e23b2e;
  --line: #1a1710; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 8px; --pad: 46px;
}
.s-bold .pc-title { font-weight: 900; letter-spacing: 1px; }
.s-bold .stanza { font-weight: 700; }

/* 可爱 cute */
.s-cute {
  --card-bg: #fff0f5; --ink: #574a52; --muted: #b094a6; --accent: #ff8fb3;
  --line: #ffd9e8; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 26px; --pad: 44px;
}

/* 黑板 chalkboard */
.s-chalkboard {
  --card-bg: #2c3138; --ink: #f3efe6; --muted: #b9c2c8; --accent: #ffd76a;
  --line: #4a525c; --tfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; --bfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --sfont: "Kaiti SC", "STKaiti", "KaiTi", serif; --radius: 10px; --pad: 46px;
}
.s-chalkboard .pc-title { color: #ffd76a; }
.s-chalkboard .pc-deco::before {
  content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255,255,255,.18); border-radius: 6px;
}

/* Notion */
.s-notion {
  --card-bg: #ffffff; --ink: #37352f; --muted: #9b9a97; --accent: #2f80ed;
  --line: #ededec; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 4px; --pad: 50px;
}
.s-notion .pc-title { font-weight: 700; }

/* 速写笔记 sketch */
.s-sketch {
  --card-bg: #fdf6e9; --ink: #3a352c; --muted: #9a8e76; --accent: #d98a3d;
  --line: #e3d4b4; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 10px; --pad: 46px;
  border: 2px solid #3a352c;
}
.s-sketch .pc-body { border: 1.5px solid #3a352c; border-radius: 8px; padding: 18px 16px; }

/* 学习笔记 study */
.s-study {
  --card-bg: #fffdf5; --ink: #244a8c; --muted: #b04a4a; --accent: #d4a017;
  --line: #cfe0f5; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 4px; --pad: 48px;
}
.s-study .pc-deco {
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, #cfe0f5 33px 34px);
}

/* 丝网印 screen-print — poster */
.s-screenprint {
  --card-bg: #f4ede0; --ink: #1f1b16; --muted: #7a6f5a; --accent: #d8332a;
  --line: #1f1b16; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 4px; --pad: 48px;
}
.s-screenprint .pc-title { font-weight: 900; text-transform: none; }
.s-screenprint .pc-deco::before {
  content: ""; position: absolute; right: 8%; top: 16%; width: 120px; height: 120px;
  border-radius: 50%; background: radial-gradient(circle, #d8332a 0 60%, transparent 62%); opacity: .9;
}

/* =========================================================
   布局：l-seal（题款印章：横排，标题竖排居右 + 印章）
   ========================================================= */
.l-seal { width: auto; min-width: 470px; max-width: 780px; flex: 0 0 auto; }
.l-seal .pc-inner {
  display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 30px;
}
.l-seal .pc-title {
  writing-mode: vertical-rl; text-orientation: upright; margin: 0;
  font-size: calc(var(--fs) * 2.2); letter-spacing: 8px; text-align: start;
  flex: 0 0 auto; padding-left: 20px; border-left: 1px solid var(--line);
}
.l-seal .pc-body { align-items: flex-start; }
.l-seal .stanza { text-align: start; line-height: 2.1; }
.l-seal .pc-meta { justify-content: flex-start; }

/* =========================================================
   新增风格 · 诗集分卷 collection
   ========================================================= */
.s-collection {
  --card-bg: #f3ecdb; --ink: #34291c; --muted: #8a7a5c; --accent: #9c7b3e;
  --line: #d9caa6; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 4px; --pad: 52px;
  border: 1px solid #cdb98e;
}
.s-collection .pc-deco::before {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(156,123,62,.35); pointer-events: none;
}
.s-collection .pc-title { font-weight: 700; letter-spacing: 6px; }
.s-collection .pc-body {
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  padding: 22px 0; margin-top: 4px;
}
.s-collection .pc-body::before,
.s-collection .pc-body::after {
  content: "❧"; display: block; text-align: center; color: var(--accent);
  opacity: .5; font-size: 18px; margin: 2px 0;
}

/* =========================================================
   新增风格 · 题款印章 seal
   ========================================================= */
.s-seal {
  --card-bg: #f6efe1; --ink: #2f2a24; --muted: #8a8073; --accent: #a8312a;
  --line: #e0d6c2; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 6px; --pad: 46px;
}
.s-seal .pc-seal { /* 印章移到左下角，避开右上竖排标题 */
  left: 28px; right: auto; top: auto; bottom: 26px;
}

/* =========================================================
   新增风格 · 复古打字 typewriter
   ========================================================= */
.s-typewriter {
  --card-bg: #f7f3e8; --ink: #2b2620; --muted: #8a8068; --accent: #6b5a3e;
  --line: #cfc6ad; --tfont: "Courier New", "Menlo", "Consolas", "PingFang SC", monospace;
  --bfont: "Courier New", "Menlo", "Consolas", "PingFang SC", monospace;
  --sfont: "Courier New", "Menlo", "Consolas", "PingFang SC", monospace; --radius: 2px; --pad: 46px;
}
.s-typewriter .pc-deco {
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(120,105,70,.18) 31px 32px);
}
.s-typewriter .pc-title { font-weight: 700; letter-spacing: 0; text-align: left; border-bottom: 2px dashed var(--line); padding-bottom: 10px; }
.s-typewriter .pc-body { align-items: flex-start; gap: 14px; }
.s-typewriter .stanza { text-align: left; line-height: 32px; letter-spacing: .4px; }

/* =========================================================
   新增风格 · 暖橙夜话 ambernight
   ========================================================= */
.s-ambernight {
  --card-bg: #2a1810; --ink: #ffe9cf; --muted: #d6a574; --accent: #ff9d4d;
  --line: #5a3a24; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 12px; --pad: 48px;
}
.s-ambernight .pc-deco {
  background: radial-gradient(circle at 50% 120%, rgba(255,150,60,.35), transparent 60%);
}
.s-ambernight .pc-title { color: #ffb866; text-shadow: 0 0 18px rgba(255,140,60,.4); }
.s-ambernight .pc-meta, .s-ambernight .pc-watermark { color: #d6a574; }

/* =========================================================
   新增风格 · 手写展签 exhibition
   ========================================================= */
.s-exhibition {
  --card-bg: #fbf6ee; --ink: #2f2a24; --muted: #8a8073; --accent: #b08a3e;
  --line: #e0d6c2; --tfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; --bfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 14px; --pad: 46px;
  border: 1.5px solid var(--line);
}
.s-exhibition .pc-tag { display: inline-block; }
.s-exhibition .pc-title { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.s-exhibition .pc-deco::before {
  content: "展"; position: absolute; top: 14px; right: 16px; width: 30px; height: 30px;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  font-family: var(--sfont); font-size: 15px; border-radius: 4px; opacity: .85;
}

/* =========================================================
   新增风格 · 手账商品 product
   ========================================================= */
.s-product {
  --card-bg: #f3e7cf; --ink: #4a3b28; --muted: #9a8260; --accent: #c08a3e;
  --line: #d8c2a0; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 10px; --pad: 46px;
}
.s-product .pc-deco::before {
  content: ""; position: absolute; inset: 16px; border: 2px solid var(--accent);
  border-radius: 6px; opacity: .5;
}
.s-product .pc-title { color: #9a5b2c; }
.s-product .pc-meta { color: #9a8260; }

/* =========================================================
   新增风格 · 古籍注音 fancient（竖排 + 经折装栏线 + 印章）
   ========================================================= */
.s-fancient {
  --card-bg: #efe6d2; --ink: #3a3026; --muted: #8c7c63; --accent: #9a5b3a;
  --line: #d8c8a8; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --sfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --radius: 4px; --pad: 46px;
}
.s-fancient .pc-deco {
  background-image: repeating-linear-gradient(to left, transparent 0 46px, rgba(120,90,50,.12) 46px 47px);
}

/* =========================================================
   新增风格 · 信封信纸 envelope
   ========================================================= */
.s-envelope {
  --card-bg: #f7f1e6; --ink: #3a342b; --muted: #9a8e76; --accent: #b07a4a;
  --line: #e2d6c0; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 6px; --pad: 48px;
}
.s-envelope .pc-deco::before {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0;
  border-left: 240px solid transparent; border-right: 240px solid transparent;
  border-top: 88px solid rgba(176,122,74,.14);
}

/* =========================================================
   新增风格 · 城市分点 urban
   ========================================================= */
.s-urban {
  --card-bg: #f4f5f7; --ink: #23262b; --muted: #6b7280; --accent: #2f80ed;
  --line: #d9dde3; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 10px; --pad: 46px;
}
.s-urban .pc-title { text-align: left; font-weight: 900; letter-spacing: 1px; }
.s-urban .pc-body { align-items: stretch; gap: 14px; }
.s-urban .stanza { text-align: left; padding-left: 16px; border-left: 3px solid var(--accent); line-height: 1.9; }
.s-urban .pc-meta { justify-content: flex-start; }

/* =========================================================
   新增风格 · 撕纸双语 tornbilingual（便签 + 胶带）
   ========================================================= */
.s-tornbilingual {
  --card-bg: #fbfaf5; --ink: #2b2b2b; --muted: #8a8a8a; --accent: #c0392b;
  --line: #e2e2da; --tfont: "Songti SC", "STSong", "SimSun", "宋体", serif; --bfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 4px; --pad: 48px;
  border: 1px dashed var(--line);
}
.s-tornbilingual .pc-deco::after {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 92px; height: 26px; background: rgba(192,57,43,.22);
  border: 1px dashed rgba(192,57,43,.4);
}
.s-tornbilingual .pc-title { font-weight: 700; }
.s-tornbilingual .stanza:nth-child(odd) { transform: rotate(-1.2deg); }
.s-tornbilingual .stanza:nth-child(even) { transform: rotate(1deg); }

/* =========================================================
   新增风格 · 手账大字 bigjournal
   ========================================================= */
.s-bigjournal {
  --card-bg: #fff7ef; --ink: #4a4138; --muted: #a08c78; --accent: #e08aa0;
  --line: #f0dcc8; --tfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --bfont: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --sfont: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; --radius: 18px; --pad: 46px;
}
.s-bigjournal .pc-title { font-size: calc(var(--fs) * 2.6); color: #e0708a; }
.s-bigjournal .stanza { font-size: calc(var(--fs) * 1.5); line-height: 1.7; }

/* ---- 响应式 ---- */
@media (max-width: 860px) {
  .workspace { grid-template-columns: 1fr; }
  .controls { max-height: none; border-right: none; border-bottom: 1px solid #e3dccd; }
  .preview-scroll { padding: 20px 10px; }
  .pc { width: 100% !important; max-width: 480px; }
}