/* ============================================================
   心意邮局 · 纸感工作台皮肤（浅色覆盖层）
   与 100 件小事同族：米黄纸 + 衬线字 + 单一胭脂强调色
   只覆盖视觉，不动结构与交互逻辑。保留 cinematic.css 备用。
   ============================================================ */

/* —— 1. 令牌 —— */
:root{
  --pg-0:#f6f1e6;        /* 页面底 */
  --pg-card:#fffdf8;     /* 卡片面 */
  --pg-2:#fbf7ee;        /* 抬起面 */
  --pg-3:#fffdf8;        /* 输入底 */
  --pg-line:#e7dfcd;
  --pg-line-2:#d9cdb4;
  --pg-ink:#35302a;
  --pg-t2:#73695a;
  --pg-t3:#a49a87;

  --pg-accent:#a6442e;               /* 胭脂 */
  --pg-accent-hover:#b6543c;
  --pg-accent-soft:rgba(166,68,46,.07);
  --pg-accent-line:rgba(166,68,46,.38);

  --fs-1:11px; --fs-2:12.5px; --fs-3:14px; --fs-4:17px; --fs-5:21px; --fs-6:27px; --fs-7:36px;
  --sp-1:12px; --sp-2:24px; --sp-3:48px;
}

/* 变量接管 */
body.pg{
  --ink:var(--pg-ink);
  --muted:var(--pg-t2);
  --green:var(--pg-accent);
  --green-dark:var(--pg-accent-hover);
  --cream:var(--pg-0);
  --line:var(--pg-line);
  --serif:'Noto Serif SC','STZhongsong','Songti SC',serif;

  background:
    radial-gradient(120% 70% at 50% -10%, #fffdf6 0%, rgba(255,253,246,0) 55%),
    radial-gradient(90% 55% at 100% 112%, #efe5cf 0%, rgba(239,229,207,0) 60%),
    var(--pg-0);
  color:var(--pg-ink);
  font-size:var(--fs-3);
  min-height:100vh;
}

/* —— 2. 全局节律 —— */
body.pg h1,body.pg h2,body.pg h3{letter-spacing:.5px}
body.pg a,body.pg button,body.pg input,body.pg textarea,body.pg select{
  transition:color .18s,border-color .18s,background-color .18s,transform .18s;
}
body.pg button:focus-visible,
body.pg a:focus-visible,
body.pg input:focus-visible,
body.pg textarea:focus-visible,
body.pg select:focus-visible{
  outline:2px solid var(--pg-accent);
  outline-offset:3px;
  border-radius:6px;
}

/* —— 3. 头部 —— */
body.pg .header{
  border-bottom:1px solid var(--pg-line);
  background:rgba(246,241,230,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:40;
}
body.pg .brand{font-family:var(--serif);color:var(--pg-ink);font-weight:600}
body.pg .brand-icon{
  background:var(--pg-accent);
  border:1px solid rgba(166,68,46,.5);
  color:#fff6ec;
  box-shadow:0 4px 12px rgba(166,68,46,.22);
}
body.pg .brand small{color:var(--pg-t3);letter-spacing:2px}
body.pg .header nav{font-size:var(--fs-2)}
body.pg .header nav a,body.pg .header nav button{white-space:nowrap}
body.pg .header nav .active{color:var(--pg-accent)}
body.pg .header nav .active:after{background:var(--pg-accent)}
body.pg .header nav button{color:var(--pg-t2)}
body.pg .header nav button:hover{color:var(--pg-ink)}
body.pg .header-note{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .status-dot{background:var(--pg-accent);box-shadow:0 0 0 3px var(--pg-accent-soft)}

/* —— 4. 场景画廊 —— */
body.pg .scene-gallery{
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(166,68,46,.045) 0%, transparent 60%),
    transparent;
  padding-top:var(--sp-3);
}
body.pg .gallery-eyebrow{color:var(--pg-t3);letter-spacing:5px;font-size:var(--fs-1)}
body.pg .gallery-title{
  font-family:var(--serif);color:var(--pg-ink);
  font-size:clamp(30px,4.4vw,var(--fs-7));line-height:1.2;letter-spacing:.5px;
  font-weight:600;
}
body.pg .gallery-title em{
  color:var(--pg-accent);font-style:normal;
  border-bottom:1px solid var(--pg-accent-line);padding-bottom:2px;
}
body.pg .scene-hint{color:var(--pg-t3);font-size:var(--fs-1);letter-spacing:3px}
body.pg .scene-card{
  border-color:#fffdf8;
  box-shadow:0 20px 50px rgba(107,84,40,.28),0 2px 8px rgba(107,84,40,.12);
}
body.pg .scene-card:hover,body.pg .scene-card.facing{border-color:var(--pg-accent)}
body.pg .scene-label{color:#fff8ee}

/* —— 5. 工坊外壳 —— */
body.pg .workshop{
  background:var(--pg-card);
  border:1px solid var(--pg-line);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(120,90,40,.12),inset 0 1px 0 rgba(255,255,255,.8);
}
body.pg .workshop-top{border-bottom:1px solid var(--pg-line);min-height:72px;background:var(--pg-2)}
body.pg .workshop-top h2{font-family:var(--serif);font-size:var(--fs-4);font-weight:600;color:var(--pg-ink)}
body.pg .tiny-star{color:var(--pg-accent)}
body.pg .version{
  background:var(--pg-accent-soft);border:1px solid var(--pg-accent-line);
  color:var(--pg-accent);font-size:var(--fs-1);border-radius:999px;padding:4px 10px;letter-spacing:.5px;
}
body.pg .version.paid{background:rgba(166,68,46,.14);color:var(--pg-accent);border-color:var(--pg-accent)}
body.pg .steps{color:var(--pg-t3);font-size:var(--fs-1);letter-spacing:.5px}
body.pg .steps b{border-color:var(--pg-line-2);color:var(--pg-t2);background:transparent}
body.pg .steps .current{color:var(--pg-accent)}
body.pg .steps .current b{background:var(--pg-accent);border-color:var(--pg-accent);color:#fff6ec;font-weight:700}
body.pg .steps>span.done{color:var(--pg-t2)}
body.pg .steps>span.done b{background:rgba(166,68,46,.1);border-color:var(--pg-accent-line);color:var(--pg-accent)}
body.pg .steps i{background:var(--pg-line-2)}

/* —— 6. 三栏面板 —— */
body.pg .theme-panel,
body.pg .editor-panel,
body.pg .preview-panel{background:transparent}
body.pg .theme-panel{border-right:1px solid var(--pg-line);background:var(--pg-2)}
body.pg .editor-panel{border-right:1px solid var(--pg-line)}
body.pg .panel-heading h3{color:var(--pg-t3);font-size:var(--fs-1);letter-spacing:2px}
body.pg .panel-heading h3 span{color:var(--pg-ink);font-size:var(--fs-3);letter-spacing:.5px}
body.pg .panel-heading small{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .editor-heading>span{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .editor-heading i{background:var(--pg-accent)}
body.pg .editor-heading h3 .step-badge{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--pg-accent);color:#fff6ec;font-size:var(--fs-1);font-weight:800;margin-right:6px;
}

/* 主题卡 */
body.pg .theme-card{
  background:var(--pg-card);
  border:1px solid var(--pg-line);
  border-radius:10px;
}
body.pg .theme-card:hover{
  transform:translateY(-2px);
  border-color:var(--pg-accent-line);
  background:#fffef9;
}
body.pg .theme-card.chosen{
  border-color:var(--pg-accent);
  background:linear-gradient(180deg,rgba(166,68,46,.08),rgba(166,68,46,.02));
  box-shadow:0 0 0 1px rgba(166,68,46,.24),0 10px 24px rgba(120,90,40,.1);
}
body.pg .theme-card .theme-label{color:var(--pg-ink);font-size:var(--fs-2)}
body.pg .theme-card .theme-desc{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .theme-check{background:var(--pg-accent);color:#fff6ec;font-weight:800}
body.pg .thumb{border-radius:7px;border:1px solid rgba(107,84,40,.15)}

body.pg .little-note{
  background:#f6ead4;
  border:1px solid #e6d3a8;
  color:var(--pg-t2);border-radius:4px;
}
body.pg .little-note p{color:#7a6a4e;font-size:var(--fs-2);line-height:1.9}
body.pg .little-note p span{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .little-note>svg{color:var(--pg-accent)}
body.pg .note-heart{color:var(--pg-accent)}

/* 场景胶囊 */
body.pg .scene-chip{
  background:var(--pg-accent-soft);border:1px solid rgba(166,68,46,.2);
  border-radius:999px;color:var(--pg-t2);font-size:var(--fs-1);
}
body.pg .scene-chip b{color:var(--pg-accent)}
body.pg .scene-chip button{color:var(--pg-accent);font-size:var(--fs-1)}
body.pg .scene-chip-thumb{border-radius:50%;overflow:hidden}

/* —— 7. 表单 —— */
body.pg .field-row label,
body.pg .field,
body.pg .label-line{color:var(--pg-t2);font-size:var(--fs-2)}
body.pg .required{color:var(--pg-accent)}
body.pg .optional{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .field-row input,
body.pg .field>input,
body.pg .select-wrapper select,
body.pg .textarea-wrap textarea{
  background:var(--pg-3);
  border:1px solid var(--pg-line-2);
  color:var(--pg-ink);
  border-radius:8px;
  font-size:var(--fs-3);
}
body.pg .field-row input,body.pg .field>input,body.pg .select-wrapper select{height:42px}
body.pg .field-row input::placeholder,
body.pg .field>input::placeholder,
body.pg .textarea-wrap textarea::placeholder{color:#c4b9a4}
body.pg input:focus,body.pg textarea:focus,body.pg select:focus{
  border-color:var(--pg-accent)!important;
  box-shadow:0 0 0 3px rgba(166,68,46,.1)!important;
}
body.pg .textarea-wrap textarea{
  line-height:1.9;
  background:
    repeating-linear-gradient(transparent,transparent 24.4px,#f2ead7 24.4px,#f2ead7 25.2px),
    var(--pg-3);
}
body.pg #char-count{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .field-hint{color:var(--pg-t3);font-size:var(--fs-1);line-height:1.8}
body.pg #photo-count{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .upload-tile{
  background:rgba(255,253,248,.6);
  border:1px dashed var(--pg-line-2);
  color:var(--pg-t3);font-size:var(--fs-1);
}
body.pg .upload-tile:hover{border-color:var(--pg-accent-line);color:var(--pg-accent)}
body.pg .photo-tile button{background:var(--pg-accent);color:#fff6ec}
body.pg .inspire{color:var(--pg-accent);font-size:var(--fs-1)}
body.pg .privacy-inline{color:var(--pg-t3);font-size:var(--fs-1)}

/* —— 8. 预览区 —— */
body.pg .preview-panel{background:#f3eddd;border-left:1px solid var(--pg-line)}
body.pg .preview-heading h3{color:var(--pg-t2);font-size:var(--fs-2)}
body.pg .preview-heading h3>span:last-child{color:var(--pg-t3)}
body.pg .live-dot{background:var(--pg-accent);box-shadow:0 0 0 3px var(--pg-accent-soft)}
body.pg .view-controls button{color:var(--pg-t3)}
body.pg .view-controls button:hover{color:var(--pg-accent)}
body.pg .view-controls button.selected{background:rgba(166,68,46,.12);color:var(--pg-accent)}
body.pg .view-controls>span{background:var(--pg-line-2)}
body.pg .preview-stage{
  background-image:radial-gradient(rgba(140,110,60,.14) .7px,transparent .7px);
  background-size:16px 16px;
}
body.pg .phone-frame{
  border-color:#332d26;
  box-shadow:0 26px 60px rgba(90,70,35,.28),0 2px 8px rgba(90,70,35,.16);
}
body.pg .phone-bar{background:#332d26;color:#cfc4ad}
body.pg .phone-camera{background:#332d26}
body.pg .phone-frame iframe{background:#fbf7ee}
body.pg .stage-caption{color:var(--pg-t3);font-size:var(--fs-1);letter-spacing:2px}
body.pg .preview-footer{border-top:1px solid var(--pg-line);color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .preview-footer button{color:var(--pg-accent);font-size:var(--fs-1)}
body.pg .preview-decoration{color:rgba(166,68,46,.3)}
body.pg .preview-side-note{color:var(--pg-t3)}
body.pg .stage-words{color:rgba(110,88,60,.07)}
body.pg .stage-floats span{color:#a08a6d}

/* —— 9. 按钮 —— */
body.pg .primary{
  background:var(--pg-accent);
  border:1px solid var(--pg-accent);
  color:#fff6ec;
  font-weight:700;
  border-radius:10px;
  box-shadow:0 8px 22px rgba(166,68,46,.22);
}
body.pg .primary:hover{background:var(--pg-accent-hover);border-color:var(--pg-accent-hover);transform:translateY(-1px)}
body.pg .primary:disabled{background:rgba(166,68,46,.16);color:rgba(166,68,46,.5);box-shadow:none;border-color:transparent}
body.pg .secondary{
  background:rgba(255,253,248,.7);
  border:1px solid var(--pg-line-2);
  color:var(--pg-t2);
  border-radius:10px;
}
body.pg .secondary:hover{background:#fffdf8;color:var(--pg-ink);border-color:var(--pg-accent-line)}

/* —— 10. 底栏 / 页脚 —— */
body.pg .workshop-bottom{border-top:1px solid var(--pg-line);background:var(--pg-2)}
body.pg .ready-note>svg{color:var(--pg-accent)}
body.pg .ready-note strong{color:var(--pg-ink);font-size:var(--fs-2);letter-spacing:.5px}
body.pg .ready-note div>span{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .under-workshop{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg footer{border-top:1px solid var(--pg-line);color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .footer-brand{color:var(--pg-t2)}
body.pg footer button{color:var(--pg-t3)}
body.pg footer button:hover{color:var(--pg-accent)}

/* —— 11. 弹窗：纸卡 —— */
body.pg dialog{
  background:var(--pg-card);
  border:1px solid var(--pg-line-2);
  color:var(--pg-ink);
  border-radius:20px;
  box-shadow:0 40px 100px rgba(90,70,35,.28);
}
body.pg dialog::backdrop{background:rgba(53,48,42,.44);backdrop-filter:blur(8px)}
body.pg .dialog-close{color:var(--pg-t3)}
body.pg .dialog-close:hover{color:var(--pg-accent)}
body.pg .dialog-symbol{color:var(--pg-accent)}
body.pg .dialog-content h2{font-family:var(--serif);color:var(--pg-ink);font-size:var(--fs-5);line-height:1.5}
body.pg .dialog-content p{color:var(--pg-t2);font-size:var(--fs-2);line-height:2}
body.pg .dialog-content p strong{color:var(--pg-accent);font-weight:600}
body.pg .export-warning{
  background:#f6ead4;
  border:1px solid #e6d3a8;
  color:#7a6a4e;font-size:var(--fs-1);
}
body.pg .export-warning svg{color:var(--pg-accent)}
body.pg .consent{color:var(--pg-t2);font-size:var(--fs-2)}
body.pg .consent input{accent-color:var(--pg-accent)}
body.pg .dialog-content>small{color:var(--pg-t3);font-size:var(--fs-1)}
body.pg .plan-list span{color:var(--pg-t2);font-size:var(--fs-1)}
body.pg .plan-list b{color:var(--pg-accent)}
body.pg #license-code{
  background:var(--pg-3);border:1px solid var(--pg-line-2);color:var(--pg-ink);
  font-size:var(--fs-3);letter-spacing:2px;border-radius:8px;padding:10px 12px;height:auto;
}
body.pg #fullscreen-dialog{background:var(--pg-0);border-color:var(--pg-line)}
body.pg .fullscreen-close{background:rgba(255,253,248,.92);border:1px solid var(--pg-line-2);color:var(--pg-t2)}
body.pg .fullscreen-close:hover{color:var(--pg-accent);border-color:var(--pg-accent-line)}

/* —— 12. Toast —— */
body.pg #toast{
  background:#3a342c;
  border:1px solid rgba(166,68,46,.55);
  color:#f6f1e6;
  font-size:var(--fs-2);
  box-shadow:0 18px 44px rgba(60,45,20,.3);
}

/* —— 13. 移动端 —— */
@media(max-width:780px){
  body.pg .workshop{border-radius:16px}
  body.pg .scene-gallery{padding-top:var(--sp-2)}
  body.pg .gallery-title{font-size:clamp(27px,7vw,34px)}
  body.pg .theme-card{flex:0 0 122px;background:var(--pg-card)}
  body.pg .theme-card .theme-label{font-size:var(--fs-2)}
  body.pg .field-hint{font-size:var(--fs-1)}
}

/* —— 14. 修复：旧版 hero 的 em 残留 —— */
body.pg .gallery-title em{
  position:static!important;
  display:inline-block;
  margin-left:8px;
  font-size:inherit;
  vertical-align:baseline;
  animation:none!important;
  transform:none!important;
  color:var(--pg-accent);
  border-bottom:1px solid var(--pg-accent-line);
}