@font-face {
  font-family: "HeiTiLocal";
  src: url("./fonts/黑体.ttf") format("truetype");
}
@font-face {
  font-family: "KaiTiLocal";
  src: url("./fonts/楷体.ttf") format("truetype");
}

/* ===== 基础 ===== */
:root{
  --stage:#eef1f4;
  --panel:#ffffff;
  --border:#e8edf2;
  --text:#111;
  --muted:#8a8f98;

  /* 背景渐变（浅色） */
  --stage-grad-top:#f2f5f8;
  --stage-grad-bottom:#eef1f4;
  --stage-spot: rgba(0,0,0,.05);

  /* 工具箱 Pro 玻璃按钮 */
  --glass-bg: rgba(255,255,255,.78);
  --glass-border: rgba(15,23,42,.10);
  --glass-shadow: 0 10px 24px rgba(0,0,0,.10);

  --box-bg:#ffffff;
  --input-bg:#ffffff;

  --card-bg:#ffffff;
  --card-fg:#111;
  --card-w:520px;
  --card-r:28px;

  --fs:22px;
  --font: ui-serif, "Songti SC","STSong","SimSun", serif;
  --seal:#b40000;
}

/* 深色主题：仅改全局 UI，不影响卡片生成逻辑（卡片背景仍由用户选择） */
html[data-theme="dark"]{
  --stage:#0b1220;
  --panel:#0e172a;
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.55);

  --stage-grad-top:#0b1220;
  --stage-grad-bottom:#070b12;
  --stage-spot: rgba(255,255,255,.06);

  --glass-bg: rgba(15,23,42,.72);
  --glass-border: rgba(255,255,255,.12);
  --glass-shadow: 0 10px 24px rgba(0,0,0,.30);

  --box-bg: rgba(255,255,255,.04);
  --input-bg: rgba(255,255,255,.06);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
  background:var(--stage);
  color:var(--text);
}

/* ===== 布局（类似你图：预览左 + 右侧面板） ===== */
.app{display:flex; min-height:100vh;}
.stage{position:relative; flex:1; overflow:hidden;}
.stage-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 18%, var(--stage-spot), transparent 50%),
    radial-gradient(circle at 70% 55%, var(--stage-spot), transparent 55%),
    linear-gradient(180deg,var(--stage-grad-top),var(--stage-grad-bottom));
}
.preview-area{
  position:relative;
  height:100%;
  display:flex;
  /* 预览区：略靠上（用户要求），仍保持水平居中 */
  align-items:flex-start;
  justify-content:center;
  padding:72px 48px 48px;
}

/* 右上角操作按钮组（返回首页 + 深浅色切换） */
.top-actions{
  position:absolute;
  top:16px;
  right:16px;
  z-index:20;
  display:flex;
  gap:10px;
  align-items:center;
}
.top-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  cursor:pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.top-btn:hover{
  transform: translateY(-1px);
}
.top-btn:active{
  transform: translateY(0);
}
.top-btn.icon{
  width:36px;
  padding:0;
  justify-content:center;
}
.top-ico{
  font-size:14px;
  line-height:1;
}

/* ===== 中英文切换（仅跳转目录，不做翻译） ===== */
.lang-switch{
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lang-btn{
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  color:var(--text);
  text-decoration:none;
  opacity:.75;
  user-select:none;
}
.lang-btn:hover{opacity:1;}
.lang-btn.active{
  opacity:1;
  background: rgba(17,24,39,.92);
  color:#fff;
}
html[data-theme="dark"] .lang-btn.active{
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
}

/* 让卡片容器可伸缩：避免手机端被裁剪（不影响宽度滑杆功能） */
.card-wrap{padding:0; width:100%; display:flex; justify-content:center; margin-top:8px;}

/* ===== 卡片方向切换（新增功能：横版/竖版），不影响其它功能 ===== */
.card.is-vertical{
  width:360px;
  max-width:100%;
  min-height:560px;
  padding:26px 22px 22px;
}
.card.is-vertical .quote-block{
  /* 竖版：仅让正文竖排，容器保持正常布局，避免竖排时引号/定位错乱 */
  margin-top:18px;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.card.is-vertical .excerpt{
  /* 中文竖排：从右往左排版（更符合传统阅读习惯） */
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height:1.8;
  color:var(--card-fg);
  /* 竖排时避免卡片过宽导致文字贴边 */
  padding:10px 6px 0;
  max-height:420px;
}
.card.is-vertical .quote-block::before{
  left:6px;
  top:-6px;
}
.card.is-vertical .quote-block::after{
  right:10px;
  top:auto;
  bottom:18px;
}
.card.is-vertical .meta{
  position:absolute;
  left:22px;
  bottom:22px;
  margin-top:0;
}
.card.is-vertical .seal-fixed{
  right:22px;
  bottom:22px;
}
.panel{
  width:360px;
  background:var(--panel);
  border-left:1px solid var(--border);
  padding:16px 16px 22px;
  overflow:auto;
}
.panel-head{display:flex; align-items:center; gap:10px; padding:6px 4px 14px;}
.brand{font-weight:700; font-size:14px; display:flex; gap:8px; align-items:center;}
.brand::before{content:"📖";}

/* ===== 卡片（圆角 + 阴影） ===== */
.card{
  width:var(--card-w);
  max-width:100%;
  min-height:360px;
  background:var(--card-bg);
  color:var(--card-fg);
  border-radius:var(--card-r);
  box-shadow:0 26px 60px rgba(0,0,0,.12);
  position:relative;
  padding:28px 28px 24px;
  font-family:var(--font);
}
.card-top{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(0,0,0,.42);
}
.card[theme="dark"] .card-top{color:rgba(255,255,255,.55)}
.date,.tag{letter-spacing:.2px}

/* ===== 引号（修复：像你图那样的位置与大小） ===== */
.quote-block{
  position:relative;
  margin-top:28px;
  padding:12px 28px 0 28px;
}
.quote-block::before{
  content:"“";
  position:absolute;
  left:10px;
  top:-6px;
  font-size:42px;
  color:rgba(0,0,0,.10);
  font-family:var(--font);
  line-height:1;
}
.quote-block::after{
  content:"”";
  position:absolute;
  right:18px;
  top:120px; /* 让右引号在段落中间偏右（接近截图） */
  font-size:42px;
  color:rgba(0,0,0,.10);
  font-family:var(--font);
  line-height:1;
}
.card[data-align="center"] .quote-block::after{ right:24px; }
.card[data-align="right"] .quote-block::after{ right:16px; }

.excerpt{
  font-size:var(--fs);
  line-height:1.9;
  white-space:pre-wrap;
  word-break:break-word;
}

/* 对齐 */
.card[data-align="left"] .excerpt{ text-align:left; }
.card[data-align="center"] .excerpt{ text-align:center; }

.card[data-align="right"] .excerpt{ text-align:right; }

/* ===== Meta（左下） ===== */
.meta{
  margin-top:36px;
  font-size:13px;
  color:rgba(0,0,0,.62);
}
.divider{width:30px;height:1px;background:rgba(0,0,0,.22); margin-bottom:10px;}
.meta-line{margin-top:6px;}
.card[theme="dark"] .meta{color:rgba(255,255,255,.72)}
.card[theme="dark"] .divider{background:rgba(255,255,255,.22)}
.card[theme="dark"] .quote-block::before,
.card[theme="dark"] .quote-block::after{color:rgba(255,255,255,.14)}

/* ===== 印章（独立右下，不与作者书名混在一起） ===== */
.seal-fixed{
  position:absolute;
  right:34px;
  bottom:26px;
  transform:rotate(-10deg);
}
.seal-svg{width:70px;height:70px;}
.seal-border{fill:none;stroke:var(--seal);stroke-width:4}
.seal-text{fill:var(--seal);font-weight:700;font-family: "KaiTi","FangSong", var(--font);}
.rough{filter:blur(.45px) contrast(1.08); opacity:.92}

/* ===== 面板 UI ===== */
.box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:10px 0;
  background:var(--box-bg);
}
.box-title{font-size:12px; color:#5f6670; margin-bottom:8px;}
.sub-title{margin-top:10px; font-size:12px; color:#5f6670;}
html[data-theme="dark"] .box-title,
html[data-theme="dark"] .sub-title{color:rgba(255,255,255,.65)}
textarea,input{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 10px;
  font-size:13px;
  outline:none;
  background:var(--input-bg);
  color:var(--text);
}
textarea:focus,input:focus{box-shadow:0 0 0 3px rgba(42,74,128,.12); border-color:rgba(42,74,128,.5)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.row{display:flex; gap:10px; flex-wrap:wrap;}

.btn{
  border:1px solid var(--border);
  background:var(--input-bg);
  border-radius:12px;
  padding:9px 10px;
  font-size:12px;
  cursor:pointer;
}
.btn:hover{border-color:rgba(42,74,128,.35)}
.btn.active{border-color:rgba(42,74,128,.45); box-shadow:0 0 0 3px rgba(42,74,128,.10)}
.btn.primary{
  width:100%;
  margin-top:10px;
  background:#2a4a80;
  color:#fff;
  border-color:rgba(42,74,128,.45);
}
.btn.secondary{
  width:100%;
  margin-top:8px;
  background:rgba(42,74,128,.08);
  color:var(--text);
  border-color:rgba(42,74,128,.20);
}
.btn.secondary:hover{border-color:rgba(42,74,128,.35)}

/* Toast 提示（复制/分享） */
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  color:var(--text);
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:9999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}
.seg{flex:1}
.chip{flex:1}
.export{flex:1}

.muted{color:var(--muted); font-size:12px}
.hint{margin-top:8px; color:#8a8f98; font-size:12px; line-height:1.4}

.swatches,.colors{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.swatch,.color{
  width:22px;height:22px;border-radius:8px;
  border:1px solid var(--border);
  background:var(--c);
  cursor:pointer;
}
.swatch{border-radius:7px}
.swatch.active,.color.active{outline:2px solid rgba(42,74,128,.35); outline-offset:2px}

/* 响应式 */
@media (max-width: 980px){
  .app{flex-direction:column;}
  .panel{width:100%; border-left:none; border-top:1px solid var(--border);}
  .preview-area{padding:64px 18px 18px; justify-content:center; align-items:flex-start;}
  .card-wrap{justify-content:center;}
}

@media (max-width: 768px){
  .preview-area{padding:56px 14px 14px; justify-content:center; align-items:flex-start;}
  .card{width:100%;}
}


/* ===== 补丁：印章不倾斜（仅此一处，不改 UI/功能） ===== */
.seal-fixed{
  transform: none !important;
}


/* ===== 新增印章样式（不改其它 UI） ===== */
.seal-border-inner{
  stroke-width:3;
  opacity:.92;
}
.seal-border-poly{
  stroke-linejoin:round;
}
.inked{
  stroke-width:5;
  filter: blur(.35px) contrast(1.12);
  opacity:.95;
}


/* ===== 正文字体专用（最终稳定版） ===== */
/* 只作用于书摘正文，不影响布局 / SVG / UI */
.card .quote-text,
.card .quote-text p,
.card .quote-text span {
  font-family: var(--font);
}



/* ===== 底部说明（更美观的排版 + FAQ） ===== */
.seo-wrap{
  position:relative;
  padding:64px 0 80px;
  border-top:1px solid var(--border);
  background:
    radial-gradient(circle at 12% 18%, rgba(42,74,128,.10), transparent 55%),
    radial-gradient(circle at 88% 35%, rgba(180,0,0,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.02));
}
html[data-theme="dark"] .seo-wrap{
  background:
    radial-gradient(circle at 12% 18%, rgba(96,165,250,.12), transparent 55%),
    radial-gradient(circle at 88% 35%, rgba(244,63,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
}

.seo-inner{
  max-width:1020px;
  margin:0 auto;
  padding:0 20px;
}

.seo-head{
  text-align:center;
  margin-bottom:22px;
}
.seo-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  font-size:12px;
  color:var(--muted);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.seo-head h2{
  margin:14px 0 10px;
  font-size:26px;
  letter-spacing:.2px;
}
.seo-desc{
  margin:0 auto;
  max-width:760px;
  line-height:1.7;
  color:var(--muted);
  font-size:14px;
}

.seo-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.seo-features{
  grid-template-columns:repeat(3, 1fr);
}
.seo-two{
  grid-template-columns:1.15fr .85fr;
  margin-top:14px;
}

.seo-card{
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  border-radius:20px;
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
html[data-theme="dark"] .seo-card{
  box-shadow:0 18px 44px rgba(0,0,0,.25);
}
.seo-card:hover{
  transform:translateY(-1px);
  border-color:rgba(42,74,128,.28);
}

.seo-ico{
  font-size:20px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.55);
}
html[data-theme="dark"] .seo-ico{
  background:rgba(255,255,255,.08);
}

.seo-card h3{
  margin:10px 0 6px;
  font-size:15px;
}
.seo-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:13px;
}

/* 使用方法 */
.seo-steps h3,
.seo-tips h3,
.seo-faq h3{
  margin-top:0;
}

.steps-list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.steps-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--text);
  line-height:1.6;
  font-size:13px;
}
.step-num{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:#2a4a80;
  background:rgba(42,74,128,.12);
  border:1px solid rgba(42,74,128,.18);
}
html[data-theme="dark"] .step-num{
  color:rgba(255,255,255,.92);
  background:rgba(96,165,250,.18);
  border-color:rgba(96,165,250,.26);
}

/* 小技巧 */
.tips-list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.7;
  font-size:13px;
}
.tips-list li{
  margin:6px 0;
}

/* FAQ */
.seo-faq{
  margin-top:14px;
}
.seo-faq details{
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.55);
  margin:10px 0 0;
}
html[data-theme="dark"] .seo-faq details{
  background:rgba(255,255,255,.05);
}
.seo-faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.seo-faq summary::-webkit-details-marker{display:none;}
.seo-faq summary::after{
  content:"＋";
  font-weight:800;
  color:var(--muted);
}
.seo-faq details[open] summary::after{
  content:"－";
}
.seo-faq details p{
  margin:10px 2px 2px;
  color:var(--muted);
}

/* 页脚提示 */
.seo-footnote{
  margin-top:16px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

@media (max-width: 980px){
  .seo-features{grid-template-columns:1fr;}
  .seo-two{grid-template-columns:1fr;}
  .seo-head h2{font-size:22px;}
  .seo-wrap{padding:46px 0 60px;}
}