/* =========================================================================
 * cards.css — 卡片渲染层
 * 设计基准宽度 1080px（真实导出像素）。所有尺寸按 1080 设计，预览用 scale 缩放。
 * ========================================================================= */

.xcard {
  position: relative;
  width: var(--W, 1080px);
  height: var(--H, 1440px);
  background: var(--bg);
  color: var(--text);
  font-family: var(--fBody);
  overflow: hidden;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;

  --fit: 1;
  --fs-title: calc(74px * var(--tScale, 1) * var(--fit));
  --fs-title-xl: calc(104px * var(--tScale, 1) * var(--fit));
  --fs-sub: calc(32px * var(--tScale, 1) * var(--fit));
  --fs-body: calc(33px * var(--bScale, 1) * var(--fit));
  --fs-foot: 25px;
  --gap: calc(var(--pad) * .34);

  /* 自动排版：段间距 / 首行缩进（可被排版预设覆盖） */
  --paraGap: .78;
  --indent: 0;
}
.xcard *, .xcard *::before, .xcard *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- 背景层 ---------- */
.xc-bg, .xc-pattern, .xc-deco {
  position: absolute; inset: 0; pointer-events: none;
}
.xc-bg { background: var(--bgFill); }
.xc-pattern { opacity: var(--patOpacity, .1); background-repeat: repeat; }

/* ---------- 内容容器 ---------- */
.xc-inner {
  position: relative; z-index: 3;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
}
.lay { width: 100%; height: 100%; display: flex; flex-direction: column; padding: var(--pad); }

/* ---------- 通用文字 ---------- */
.xc-title {
  font-family: var(--fTitle);
  font-weight: var(--tWeight, 700);
  font-size: var(--fs-title);
  line-height: 1.28;
  letter-spacing: calc(var(--ls, 0) * 1px);
  color: var(--text);
  text-align: var(--align);
  word-break: break-word;
}
.xc-title-xl { font-size: var(--fs-title-xl); line-height: 1.18; }
.xc-sub {
  margin-top: calc(var(--gap) * .5);
  font-size: var(--fs-sub);
  color: var(--sub);
  line-height: 1.6;
  letter-spacing: calc(var(--ls, 0) * .6px);
  text-align: var(--align);
  font-weight: 400;
}
.xc-text {
  margin-top: var(--gap);
  font-size: var(--fs-body);
  line-height: var(--lh, 1.9);
  letter-spacing: calc(var(--ls, 0) * .5px);
  color: var(--text);
  text-align: var(--align);
}
.xc-text-sm { font-size: calc(var(--fs-body) * .88); }
.xc-p + .xc-p, .xc-list + .xc-p, .xc-p + .xc-list, .xc-list + .xc-list { margin-top: calc(var(--paraGap, .78) * 1em); }
/* 首行缩进：书刊 / 正式文稿风格 */
.xc-p { text-indent: calc(var(--indent, 0) * 1em); }
.xc-h {
  font-family: var(--fTitle); font-weight: 700;
  font-size: calc(var(--fs-body) * 1.22);
  margin: .9em 0 .3em; color: var(--text);
}
.xc-h::before {
  content: ''; display: inline-block;
  width: .34em; height: .34em; margin-right: .46em;
  border-radius: 50%; background: var(--accent); vertical-align: middle;
}
.xc-em { font-style: normal; font-weight: 800; color: var(--accent); }
.xc-mark {
  font-style: normal; font-weight: 600; color: var(--text);
  background: linear-gradient(transparent 58%, var(--accentSoft) 58%);
  padding: 0 .1em;
}
.xc-ul { font-style: normal; border-bottom: 2px solid var(--accent); padding-bottom: .06em; }
.xc-ph { color: var(--sub); opacity: .7; }

.xc-list { list-style: none; }
.xc-list li {
  position: relative; display: flex; gap: .6em;
  align-items: flex-start; text-align: left;
}
.xc-list li + li { margin-top: .5em; }
.xc-li-tx { flex: 1; }
.xc-ul-list { }
.xc-ul .xc-li-dot, .xc-list.xc-ul .xc-li-dot {
  flex: none; width: .42em; height: .42em; margin-top: .72em;
  border-radius: 50%; background: var(--accent);
}
.xc-ol { counter-reset: xcol; }
.xc-ol li { counter-increment: xcol; }
.xc-ol .xc-li-dot {
  flex: none; width: 1.5em; height: 1.5em; margin-top: .2em;
  border-radius: .4em; background: var(--accent);
  color: var(--bg); font-size: .72em; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.xc-ol .xc-li-dot::before { content: counter(xcol); }
.xc-quote {
  border-left: 5px solid var(--accent);
  padding: .2em 0 .2em 1em; margin: .7em 0;
  color: var(--sub); text-align: left;
}

/* 徽章 / 页码 / 标签 */
.xc-badge {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--fTitle);
  font-size: 25px; font-weight: 700; letter-spacing: 2px;
  padding: 12px 24px; margin-bottom: calc(var(--gap) * .7);
  color: var(--badgeText); background: var(--badgeBg);
  border: 2px solid var(--badgeBorder);
  border-radius: calc(var(--radius) * .5 + 4px);
}
.lay[data-align='center'] .xc-badge, .xcard[data-align='center'] .xc-badge { align-self: center; }
.xc-index { font-family: var(--fTitle); font-size: 40px; color: var(--accent); font-weight: 800; }
.xc-tags {
  margin-top: auto; padding-top: var(--gap);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: var(--justify);
}
.xc-tag {
  font-size: var(--fs-foot); color: var(--accent);
  padding: 9px 20px; border-radius: 999px;
  background: var(--tagBg); border: 1.5px solid var(--tagBorder);
}

/* ---------- 页脚 ---------- */
.xc-foot {
  position: absolute; z-index: 4; left: var(--pad); right: var(--pad);
  bottom: calc(var(--pad) * .46);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-foot); color: var(--sub); letter-spacing: .5px;
}
.xc-foot-l { display: flex; align-items: center; gap: 14px; }
.xc-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; font-family: var(--fTitle);
}
.xc-logo { display: flex; align-items: center; gap: 8px; opacity: .85; }
.xc-logo i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); display: block; }

/* 有页脚时给正文留出底部空间 */
.xcard.has-foot .lay { padding-bottom: calc(var(--pad) + 46px); }
.xcard.has-foot .lay-photo-full { padding-bottom: 0; }
.xcard.has-foot .lay-photo-full .pf-body { padding-bottom: calc(var(--pad) + 46px); }
.xcard.has-foot .lay-split { padding-bottom: 0; }
.xcard.has-foot .lay-split .sp-body { padding-bottom: calc(var(--pad) + 46px); }
.xcard[data-layout='photo-full'] .xc-foot,
.xcard[data-layout='photo-mask'] .xc-foot { color: var(--onImageSub); }
.xcard[data-layout='photo-full'] .xc-avatar,
.xcard[data-layout='photo-mask'] .xc-avatar { color: #0b0b0b; }

/* =========================================================================
 * 版式
 * ========================================================================= */

/* 1 · 全屏压图 */
.lay-photo-full { padding: 0; position: relative; }
.lay-photo-full .pf-media { position: absolute; inset: 0; }
.pf-img { width: 100%; height: 100%; object-fit: cover; filter: var(--imgFilter); display: block; }
.pf-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--scrimStrong) 0%, var(--scrimMid) 42%, var(--scrimNone) 72%);
}
.lay-photo-full .pf-body {
  position: relative; margin-top: auto; z-index: 2;
  padding: var(--pad); width: 100%;
  display: flex; flex-direction: column; align-items: var(--items);
}
.lay-photo-full .xc-title, .lay-photo-full .xc-sub, .lay-photo-full .xc-text { color: var(--onImage); }
.lay-photo-full .xc-sub { color: var(--onImageSub); }
.lay-photo-full .xc-tags { margin-top: calc(var(--gap) * .8); }

/* 2 · 虚化居中 */
.lay-photo-mask { padding: var(--pad); position: relative; align-items: center; justify-content: center; }
.pm-bg { position: absolute; inset: -60px; }
.pm-blur { width: 100%; height: 100%; object-fit: cover; filter: var(--imgFilter) blur(26px) saturate(1.1); display: block; }
.pm-scrim { position: absolute; inset: 0; background: var(--maskFill); }
.pm-center {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.lay-photo-mask .xc-title, .lay-photo-mask .xc-text { color: var(--onImage); text-align: center; }
.lay-photo-mask .xc-sub { color: var(--onImageSub); text-align: center; }
.pm-rule { width: 96px; height: 3px; background: var(--accent); margin: calc(var(--gap) * .8) 0; }
.lay-photo-mask .xc-tags { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; justify-content: center; }

/* 3 · 上图下文 */
.lay-photo-top { padding: var(--pad); gap: var(--gap); }
.pt-media {
  width: 100%; height: 46%; flex: none;
  border-radius: var(--imgRadius); overflow: hidden;
  box-shadow: var(--elev);
}
.pt-img { width: 100%; height: 100%; object-fit: cover; filter: var(--imgFilter); display: block; }
.pt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: var(--items); }
.pt-body .xc-text { overflow: hidden; }

/* 4 · 卡中卡 */
.lay-photo-frame { padding: var(--pad); align-items: var(--items); }
.pfr-card {
  width: 100%; padding: 26px 26px 30px;
  background: var(--surface); border-radius: calc(var(--imgRadius) + 16px);
  box-shadow: var(--elev); border: 1.5px solid var(--line);
}
.pfr-media { width: 100%; aspect-ratio: 4/3; border-radius: var(--imgRadius); overflow: hidden; }
.pfr-img { width: 100%; height: 100%; object-fit: cover; filter: var(--imgFilter); display: block; }
.pfr-body { margin-top: var(--gap); width: 100%; display: flex; flex-direction: column; align-items: var(--items); flex: 1; min-height: 0; }

/* 5 · 纯文字大标题 */
.lay-type-hero { padding: var(--pad); }
.th-top { display: flex; align-items: center; justify-content: space-between; }
.th-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: var(--items); min-height: 0; }
.th-rule { width: 120px; height: 4px; background: var(--accent); margin: calc(var(--gap) * .9) 0 0; }

/* 6 · 左右分栏 */
.lay-split { padding: 0; flex-direction: row; }
.sp-media { width: 44%; flex: none; height: 100%; }
.sp-img { width: 100%; height: 100%; object-fit: cover; filter: var(--imgFilter); display: block; }
.sp-body {
  flex: 1; min-width: 0; padding: var(--pad) calc(var(--pad) * .78);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.lay-split .xc-title { font-size: calc(var(--fs-title) * .8); text-align: left; }
.lay-split .xc-text, .lay-split .xc-sub { text-align: left; }

/* 7 · 序号清单 */
.lay-list { padding: var(--pad); }
.ls-head { display: flex; gap: 26px; align-items: flex-start; }
.ls-no {
  font-family: var(--fTitle); font-weight: 900;
  font-size: calc(var(--fs-title) * 1.1); line-height: .92;
  color: var(--accent); flex: none; letter-spacing: -2px;
}
.ls-hd { flex: 1; min-width: 0; }
.lay-list .xc-title { text-align: left; font-size: calc(var(--fs-title) * .74); }
.lay-list .xc-sub, .lay-list .xc-text { text-align: left; }
.ls-media {
  margin-top: var(--gap); width: 100%; height: 34%;
  border-radius: var(--imgRadius); overflow: hidden; box-shadow: var(--elev);
}
.ls-img { width: 100%; height: 100%; object-fit: cover; filter: var(--imgFilter); display: block; }

/* 8 · 引言金句 */
.lay-quote { padding: var(--pad); justify-content: center; }
.qt-mark {
  font-family: var(--fTitle); font-size: 200px; line-height: .7;
  color: var(--accent); opacity: .55; margin-bottom: 10px;
}
.qt-main { display: flex; flex-direction: column; align-items: var(--items); }
.lay-quote .xc-title { font-size: calc(var(--fs-title) * .92); }
.qt-foot { margin-top: calc(var(--gap) * 1.2); display: flex; align-items: center; gap: 18px; }
.qt-line { width: 70px; height: 2px; background: var(--accent); display: block; }
.qt-by { font-size: var(--fs-sub); color: var(--sub); }

/* 9 · 结尾互动 */
.lay-cta { padding: var(--pad); justify-content: center; align-items: var(--items); }
.cta-main { width: 100%; display: flex; flex-direction: column; align-items: var(--items); }
.cta-acts { margin-top: calc(var(--gap) * 1.1); display: flex; gap: 18px; flex-wrap: wrap; justify-content: var(--justify); }
.cta-pill {
  font-size: calc(var(--fs-body) * .84); font-weight: 700;
  padding: 16px 34px; border-radius: 999px;
  color: var(--accent); border: 2.5px solid var(--accent); background: var(--tagBg);
}

/* 无图兜底：主题渐变（用于全屏/分栏等出血位置） */
.xc-img-bleed {
  width: 100%; height: 100%;
  background:
    radial-gradient(70% 55% at 22% 18%, var(--accentSoft) 0%, transparent 62%),
    radial-gradient(60% 50% at 84% 82%, var(--accent2Soft) 0%, transparent 60%),
    linear-gradient(155deg, var(--bg2) 0%, var(--bg) 62%);
}

/* 空图占位 */
.xc-img-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); color: var(--sub);
  font-size: 30px; letter-spacing: 2px;
  border: 3px dashed var(--line);
}

/* =========================================================================
 * 装饰元素
 * ========================================================================= */
.d-corner {
  position: absolute; width: 62px; height: 62px;
  border: 3px solid var(--accent); opacity: .9;
}
.d-tl { top: 34px; left: 34px; border-right: 0; border-bottom: 0; }
.d-tr { top: 34px; right: 34px; border-left: 0; border-bottom: 0; }
.d-bl { bottom: 34px; left: 34px; border-right: 0; border-top: 0; }
.d-br { bottom: 34px; right: 34px; border-left: 0; border-top: 0; }

.d-scan {
  position: absolute; inset: 0; opacity: .16;
  background: repeating-linear-gradient(0deg, var(--accent) 0px, var(--accent) 1px, transparent 1px, transparent 5px);
}
.d-orb { position: absolute; border-radius: 50%; }
.d-orb-a { width: 620px; height: 620px; top: -240px; right: -200px; background: radial-gradient(circle, var(--accentSoft) 0%, transparent 68%); }
.d-orb-b { width: 520px; height: 520px; bottom: -200px; left: -180px; background: radial-gradient(circle, var(--accent2Soft) 0%, transparent 68%); }

.d-hair { position: absolute; left: var(--pad); right: var(--pad); height: 1.5px; background: var(--line); }
.d-hair-t { top: calc(var(--pad) * .58); }
.d-hair-b { bottom: calc(var(--pad) * .58); }

.d-frame { position: absolute; inset: calc(var(--pad) * .42); border: 1.5px solid var(--line); }
.d-roundframe { position: absolute; inset: calc(var(--pad) * .4); border: 3px solid var(--accentSoft); border-radius: calc(var(--radius) + 18px); }
.d-goldrule {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--pad) * .34); width: 140px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.d-rule-t { position: absolute; top: calc(var(--pad) * .5); left: var(--pad); right: var(--pad); height: 5px; background: var(--text); }
.d-rule-b { position: absolute; bottom: calc(var(--pad) * .5); left: var(--pad); right: var(--pad); height: 2px; background: var(--text); }

.d-tape {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-2.5deg);
  width: 250px; height: 62px; background: var(--accentSoft);
  border-left: 2px dashed rgba(255,255,255,.5); border-right: 2px dashed rgba(255,255,255,.5);
}
.d-stamp {
  position: absolute; top: 52px; right: 52px; transform: rotate(9deg);
  font-family: var(--fTitle); font-size: 24px; letter-spacing: 3px;
  color: var(--accent2); border: 3px double var(--accent2);
  padding: 10px 18px; border-radius: 6px; opacity: .8;
}
.d-sticker { position: absolute; border-radius: 50%; }
.d-s1 { width: 150px; height: 150px; top: 8%; right: -46px; background: var(--accentSoft); }
.d-s2 { width: 96px; height: 96px; bottom: 16%; left: -34px; background: var(--accent2Soft); }
.d-chrome {
  position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
}
.d-star { position: absolute; color: var(--accent2); font-size: 46px; opacity: .8; }
.d-star-a { top: 12%; left: 8%; }
.d-star-b { bottom: 18%; right: 10%; font-size: 34px; color: var(--accent); }
.d-blocktag {
  position: absolute; top: 0; left: var(--pad);
  background: var(--accent); color: #fff;
  font-family: var(--fTitle); font-size: 22px; font-weight: 800; letter-spacing: 3px;
  padding: 14px 20px 10px;
}

/* 页码样式 */
.d-idx {
  position: absolute; right: var(--pad); top: calc(var(--pad) * .5);
  font-family: var(--fTitle); color: var(--accent);
  display: flex; align-items: baseline; gap: 3px;
}
.d-idx i { font-style: normal; opacity: .5; font-size: .6em; }
.d-idx-serifIndex { font-size: 42px; font-weight: 600; letter-spacing: 1px; }
.d-idx-techIndex {
  font-size: 24px; font-family: var(--fBody); letter-spacing: 3px;
  border: 1.5px solid var(--line); padding: 8px 16px; border-radius: 3px;
}
.d-idx-dotIndex { font-size: 28px; letter-spacing: 4px; color: var(--sub); }
.d-idx-bigIndex { font-size: 96px; font-weight: 900; line-height: .8; letter-spacing: -4px; top: calc(var(--pad) * .34); }
.d-idx-bubbleIndex {
  font-size: 26px; font-weight: 800; background: var(--accent); color: #fff;
  padding: 12px 20px; border-radius: 999px;
}
.d-idx-bubbleIndex i { color: #fff; }
.d-idx-leafIndex { font-size: 30px; font-weight: 600; }
.d-idx-handIndex { font-size: 36px; font-weight: 700; transform: rotate(-4deg); }

/* 主题微调 */
.xcard[data-theme='magazine'] .xc-title { text-transform: none; }
.xcard[data-theme='magazine'] .pfr-card { box-shadow: 16px 16px 0 var(--accent); }
.xcard[data-theme='cyber'] .xc-title { text-shadow: 0 0 34px var(--accentSoft); }
.xcard[data-theme='y2k'] .xc-title {
  background: linear-gradient(180deg, #fff 18%, var(--accent2) 52%, var(--accent) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xcard[data-theme='journal'] .pfr-card { transform: rotate(-1.2deg); }

/* =========================================================================
 * 编辑模式 — 卡片元素级可视化编辑
 * ========================================================================= */
.xcard.edit-mode { cursor: default; user-select: none; }
.xcard.edit-mode .lay { user-select: text; }

/* 可拖拽元素包裹器（缩放以左上角为原点，保证拖拽坐标稳定） */
.xcard.edit-mode .xc-el {
  position: relative;
  transform-origin: top left;
  cursor: grab;
  outline: 1.5px dashed transparent;
  outline-offset: 4px;
  transition: outline-color .15s, box-shadow .15s;
  border-radius: 4px;
}
.xcard.edit-mode .xc-el:hover { outline-color: var(--accent); }
.xcard.edit-mode .xc-el.selected {
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(128,128,128,.10);
}
.xcard.edit-mode .xc-el.dragging {
  cursor: grabbing;
  outline: 2px solid var(--accent);
  box-shadow: 0 10px 36px rgba(0,0,0,.28), 0 0 0 2px var(--accent);
  z-index: 50;
  opacity: .94;
}
.xcard.edit-mode .xc-el.editing {
  outline: 2px solid var(--accent);
  cursor: text;
}
/* 双击内联编辑：可写 */
.xcard.edit-mode .xc-el.editing [data-el-label] { display: none !important; }
.xcard.edit-mode .xc-el.editing > *:last-child { outline: none; }

/* 元素类型标签（默认隐藏，悬停/选中/拖拽时显示；非编辑态彻底不出现，避免污染预览与导出） */
.xcard .xc-el > [data-el-label] {
  display: none;
  position: absolute; top: -24px; left: 4px; z-index: 60;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 4px;
  background: var(--accent); color: #fff; white-space: nowrap;
  pointer-events: none; line-height: 1.5;
}
.xcard.edit-mode .xc-el:hover > [data-el-label],
.xcard.edit-mode .xc-el.selected > [data-el-label],
.xcard.edit-mode .xc-el.dragging > [data-el-label] { display: block; }

/* 网格参考线（悬停卡片时淡入，便于对齐） */
.xcard.edit-mode::after {
  content: ''; position: absolute; inset: 0; z-index: 45; pointer-events: none;
  background-image:
    linear-gradient(rgba(128,128,128,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,128,128,.07) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0; transition: opacity .25s;
}
.xcard.edit-mode:hover::after { opacity: 1; }

/* 拖拽坐标提示 */
.xc-drag-hint {
  position: fixed; z-index: 9999;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px; padding: 3px 7px; border-radius: 4px;
  background: rgba(0,0,0,.78); color: #fff; pointer-events: none; white-space: nowrap;
}

/* =========================================================================
 * 高级模块 · 模板组件层 / 插入组件 / 动画
 * ========================================================================= */

/* 组件层：覆盖在内容之上，默认不拦截指针（仅组件自身可交互） */
.xc-adv-layer {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
}

/* 组件包裹器：以卡片中心为原点，由 --tf 变量定位（与语义元素共用同一变换体系） */
.xcard .xc-el.xc-comp {
  position: absolute; left: 50%; top: 50%;
  pointer-events: auto;
  transform-origin: center;
  z-index: 6;
}
.xcard .xc-el.xc-comp .xc-comp-in { display: flex; align-items: center; justify-content: center; }

/* 多选高亮（区别于当前选中） */
.xcard.edit-mode .xc-el.multi-sel {
  outline: 2px solid var(--acc2);
  box-shadow: 0 0 0 4px rgba(78, 225, 255, .16);
}

/* ---------- 组件内部样式（随卡片主题变量） ---------- */
.xcard .xc-btn {
  font-family: var(--fTitle); font-weight: 800; font-size: 36px; letter-spacing: .5px;
  padding: 22px 58px; border: 0; border-radius: 999px;
  color: #fff; background: var(--accent); cursor: inherit; white-space: nowrap;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
}
.xcard .xc-divider {
  width: 470px; height: 0;
  border-top: 4px solid var(--accent); border-radius: 4px;
}
.xcard .xc-ico {
  font-size: 176px; line-height: 1; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.xcard .xc-tag {
  font-family: var(--fTitle); font-weight: 700; font-size: 32px;
  padding: 15px 40px; border-radius: 999px; white-space: nowrap;
  color: var(--accent); border: 2.5px solid var(--accent); background: transparent;
}
.xcard .xc-shape {
  width: 210px; height: 210px; background: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}
.xcard .xc-shape-circle { border-radius: 50%; }
.xcard .xc-shape-square { border-radius: 30px; }
.xcard .xc-imgbox {
  width: 380px; height: 380px; border-radius: 20px;
  background-size: cover; background-position: center;
  background-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
}
.xcard .xc-txt {
  font-family: var(--fTitle); font-weight: 700; font-size: 40px; line-height: 1.3;
  color: #222; white-space: pre-wrap; max-width: 760px; text-align: center;
}

/* ---------- 动画预设 ----------
 * 关键帧在元素自身 --tf 变换基础上叠加（平移/缩放/淡入），
 * 因此不会破坏「居中定位 + 拖拽偏移 + 缩放」的基准变换。 */
.xc-el.anim-fade, .xc-el.anim-up, .xc-el.anim-down,
.xc-el.anim-zoom, .xc-el.anim-left, .xc-el.anim-pulse {
  animation-duration: var(--anim-dur, .6s);
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: both;
}
.xc-el.anim-fade  { animation-name: xanim-fade; }
.xc-el.anim-up    { animation-name: xanim-up; }
.xc-el.anim-down  { animation-name: xanim-down; }
.xc-el.anim-zoom  { animation-name: xanim-zoom; }
.xc-el.anim-left  { animation-name: xanim-left; }
.xc-el.anim-pulse { animation-name: xanim-pulse; }

@keyframes xanim-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes xanim-up    { from { opacity: 0; transform: var(--tf) translateY(44px); }   to { opacity: 1; transform: var(--tf) translateY(0); } }
@keyframes xanim-down  { from { opacity: 0; transform: var(--tf) translateY(-44px); }  to { opacity: 1; transform: var(--tf) translateY(0); } }
@keyframes xanim-zoom  { from { opacity: 0; transform: var(--tf) scale(.6); }           to { opacity: 1; transform: var(--tf) scale(1); } }
@keyframes xanim-left  { from { opacity: 0; transform: var(--tf) translateX(-54px); }  to { opacity: 1; transform: var(--tf) translateX(0); } }
@keyframes xanim-pulse { 0%, 100% { transform: var(--tf); } 50% { transform: var(--tf) scale(1.06); } }

/* ---------- 编辑态：选中描边 + 角点缩放手柄 ---------- */
.xcard.edit-mode .xc-el:not(.xc-comp) { position: relative; }
.xcard.edit-mode .xc-el.selected {
  outline: 2px solid var(--accent); outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255, 59, 92, .16);
}
.xcard.edit-mode .xc-el.dragging {
  outline-color: #4EE1FF; box-shadow: 0 0 0 5px rgba(78, 225, 255, .22);
  cursor: grabbing;
}
.xcard.edit-mode .xc-el { cursor: grab; }
.ed-rh {
  position: absolute; width: 14px; height: 14px; z-index: 50;
  background: #fff; border: 2px solid var(--accent); border-radius: 50%;
  pointer-events: auto; cursor: nwse-resize; box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.ed-rh-ne { right: 0; top: 0; cursor: nesw-resize; }
.ed-rh-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.ed-rh-se { right: 0; bottom: 0; }
.xcard.edit-mode .xc-el.xc-comp.selected { outline-offset: 0; }