/* ============================================================
   易酷图 YiKuTu - style.css
   深色创意风格 · 玻璃拟态 · 区块画布编辑器 · 全端自适应
   ============================================================ */

:root {
  --bg: #0b0d17;
  --bg-2: #0f1324;
  --panel: rgba(255, 255, 255, .045);
  --panel-2: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #e7e9f2;
  --muted: #9aa3c0;
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --accent-2-ink: #22d3ee;
  --pink: #f472b6;
  --grad: linear-gradient(120deg, #8b5cf6, #22d3ee 55%, #f472b6);
  --radius: 16px;
  --radius-card: 16px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
  --ruler-bg: rgba(19, 22, 33, .98);
  --ring: rgba(139, 92, 246, .22);
}

/* ---- R105 浅色主题：覆盖 token ---- */
[data-theme="light"] {
  --bg: #f4f5fb;
  --bg-2: #ffffff;
  --panel: rgba(20, 22, 50, .04);
  --panel-2: rgba(20, 22, 50, .07);
  --line: rgba(20, 22, 50, .09);
  --line-2: rgba(20, 22, 50, .16);
  --text: #1a1d2e;
  --muted: #5d6484;
  --accent: #7c3aed;
  --accent-2: #06b6d4;
  --accent-2-ink: #0b6076;
  --pink: #db2777;
  --grad: linear-gradient(120deg, #7c3aed, #06b6d4 55%, #db2777);
  --shadow: 0 10px 30px rgba(30, 20, 70, .10);
  --ruler-bg: rgba(255, 255, 255, .98);
  --ring: rgba(124, 58, 237, .2);
}
/* 浅色下导航条半透明背景需更亮 */
[data-theme="light"] .site-header { background: rgba(255, 255, 255, .78); }
/* 浅色下背景光斑降饱和、降透明度 */
[data-theme="light"] .blob { opacity: .22; filter: blur(110px); }
/* 浅色下网格线从白色微透改为深色微透 */
[data-theme="light"] .grid-fx {
  background-image:
    linear-gradient(rgba(20, 22, 50, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 50, .045) 1px, transparent 1px);
}
/* 浅色下文本选择高亮 */
[data-theme="light"] ::selection { background: rgba(124, 58, 237, .25); color: #1a1d2e; }
/* R184 浅色主题对比度修正: 快捷键徽章与按钮激活态加深 */
[data-theme="light"] .help-row kbd { color: #0e7490; background: rgba(14, 116, 144, .08); border-color: rgba(14, 116, 144, .35); }
[data-theme="light"] .tool-btn.on { color: #b45309; }
/* 主题切换按钮 */
.theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 7px 12px; font-size: 14px; cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  line-height: 1;
}
.theme-btn:hover { background: var(--panel-2); border-color: var(--accent-2); transform: translateY(-1px); }
.theme-btn:active { transform: scale(.95); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(139, 92, 246, .45); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 7px; }

/* ---------- 背景光效 ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.blob-a { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(139, 92, 246, .55), transparent 65%); }
.blob-b { width: 460px; height: 460px; right: -120px; top: 22%; background: radial-gradient(circle, rgba(34, 211, 238, .4), transparent 65%); animation-delay: -6s; }
.blob-c { width: 560px; height: 560px; left: 28%; bottom: -220px; background: radial-gradient(circle, rgba(244, 114, 182, .35), transparent 65%); animation-delay: -12s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(46px, 30px) scale(1.12); }
}
.grid-fx {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 30%, transparent 75%);
}

/* R194 — 屏幕阅读器/SEO 专用文本：视觉隐藏但仍可被读屏与搜索引擎读取 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 12px clamp(16px, 4vw, 44px);
  background: rgba(11, 13, 23, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad);
  box-shadow: 0 4px 18px rgba(139, 92, 246, .5);
}
.brand-mark.sm { width: 26px; height: 26px; border-radius: 8px; }
.brand-name { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav { display: flex; gap: 20px; margin-left: 8px; }
.site-nav a { color: var(--muted); font-size: 14.5px; transition: color .2s; }
.site-nav a:hover { color: var(--text); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lang-btn:hover { background: var(--panel-2); border-color: var(--accent-2); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 12px;
  padding: 10px 18px; font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 22px rgba(124, 58, 237, .4);
  border: none;
  background-clip: padding-box;
  transform: translateZ(0);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(124, 58, 237, .55); transform: translateY(-1px) translateZ(0); }
.btn-ghost {
  background: var(--panel); color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--panel-2); border-color: var(--accent); }
.btn-ghost.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-sm { padding: 7px 15px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { padding: 14px 30px; font-size: 16px; border-radius: 14px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: clamp(48px, 8vw, 96px) 20px 30px; max-width: 900px; margin: 0 auto; }
.hero-badge {
  display: inline-block; font-size: 13px; color: var(--accent-2-ink);
  border: 1px solid rgba(34, 211, 238, .4);
  background: rgba(34, 211, 238, .08);
  padding: 6px 16px; border-radius: 999px; margin-bottom: 22px;
  animation: badgePulse 3.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
  50% { box-shadow: 0 0 0 6px rgba(34, 211, 238, .10); }
}
.hero-title { font-size: clamp(32px, 6vw, 58px); line-height: 1.18; margin: 0 0 18px; font-weight: 900; letter-spacing: .5px; }
.hero-title span { display: block; }
.grad-text {
  background: var(--grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% 0; } }
.hero-sub { color: var(--muted); font-size: clamp(14.5px, 2vw, 17px); line-height: 1.7; max-width: 680px; margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 38px; }
.hero-stats { display: flex; justify-content: center; gap: clamp(18px, 5vw, 54px); flex-wrap: wrap; }
.stat b { display: block; font-size: 26px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font-size: 13px; color: var(--muted); }

/* ---------- 通用标题 ---------- */
.sec-title {
  text-align: center; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800;
  margin: 0 auto 12px; max-width: 900px;
}
.sec-sub { text-align: center; color: var(--muted); margin: 0 auto 34px; max-width: 620px; font-size: 15px; }

/* ============================================================
   编辑器工作台
   ============================================================ */
.editor { max-width: none; margin: 0; padding: 12px; min-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.editor .sec-title { display: none; }

/* 编辑器页：全视口自适应布局，禁止整页滚动，内容在各自面板内滚动 */
html[data-page="editor"],
html[data-page="editor"] body { height: 100%; }
html[data-page="editor"] body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html[data-page="editor"] .site-header { flex: none; }
html[data-page="editor"] main { flex: 1; min-height: 0; display: flex; }
html[data-page="editor"] .editor { flex: 1; min-height: 0; width: 100%; padding: 12px 12px 0; }
/* R234b: 编辑器页脚仅保留极简版权行（状态条式，常驻视口底部） */
html[data-page="editor"] .site-footer.editor-foot {
  display: flex; flex: none; align-items: center; justify-content: center;
  margin-top: 0; /* 覆盖全局 .site-footer 的 86px 顶距，避免编辑器画布与页脚之间出现大片空白 */
  padding: 5px 16px; border-top: 1px solid var(--line);
  background: var(--bg-2);
}
html[data-page="editor"] .site-footer.editor-foot .foot-copy { color: var(--muted); } /* 字号继承 .foot-copy 12.5px，与首页一致 */

.editor-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px;
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* ---- 侧面板通用 ---- */
.side-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: static;
  max-height: none;
  min-height: 0;
  min-width: 250px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.panel-tabs {
  display: flex; gap: 4px; padding: 8px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.panel-tabs button {
  flex: 1 1 0; min-width: 0; background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 7px 4px; border-radius: 10px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-tabs button:hover { color: var(--text); background: var(--panel); }
.panel-tabs button.on {
  color: var(--text); background: var(--panel-2);
  border-color: var(--line-2);
}
.panel-body { overflow-y: auto; padding: 12px; flex: 1; min-height: 0; }

/* ---- 模块添加网格 ---- */
.add-search {
  width: 100%; margin-bottom: 10px; padding: 9px 12px;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 12px; color: var(--text); font-size: 13px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.add-search::placeholder { color: var(--muted); }
/* R188 模块/模板分类切换行（复用 .deco-sem 样式） */
.add-cats { margin-bottom: 10px; }
.add-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 12px 4px 10px;
  color: var(--text); cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.add-item:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(139, 92, 246, .25);
}
.add-item:active { transform: scale(.97); }
.add-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 38px; font-size: 20px; line-height: 1;
  background: linear-gradient(160deg, rgba(124, 58, 237, .16), rgba(14, 165, 233, .08));
  border: 1px solid rgba(124, 58, 237, .22);
  border-radius: 12px;
  transition: box-shadow .2s;
}
.add-item:hover .add-ico { box-shadow: 0 3px 10px rgba(124, 58, 237, .28); }
.add-name { font-size: 12px; color: var(--muted); }
/* 最近使用模块区：分隔标题 + 细分隔线 + 淡强调描边提示 */
.add-sec-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.add-sec-row .add-sec { flex: 1; }
/* R217: 最近使用清空按钮 */
.recent-clear {
  appearance: none; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px; cursor: pointer; flex: none;
  transition: color .15s, border-color .15s, background .15s;
}
.recent-clear:hover { color: var(--text); border-color: var(--accent-2); background: var(--panel-2); }
.recent-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.add-sec {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; color: var(--muted);
  letter-spacing: .06em; margin: 6px 0 2px;
}
.add-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.add-sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 4px 0 2px; }
.add-item.recent { border-color: rgba(124, 58, 237, .42); }
.add-item.recent:hover { border-color: var(--accent); }
.add-item:hover .add-name { color: var(--text); }

/* ---- 装饰面板（彩色 emoji / 单色图标 / 几何形状） ---- */
.deco-cats { display: flex; gap: 6px; margin-bottom: 12px; }
.deco-cat {
  flex: 1 1 0; min-width: 0; background: var(--bg-2); border: 1.5px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 600;
  padding: 8px 4px; border-radius: 12px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deco-cat:hover { color: var(--text); }
.deco-cat.on {
  color: var(--text); border-color: var(--accent);
  background: linear-gradient(120deg, rgba(124, 58, 237, .2), rgba(14, 165, 233, .12));
  box-shadow: 0 2px 10px rgba(124, 58, 237, .16);
}
.deco-search-row { margin: -4px 0 10px; }
.deco-search {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.deco-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.deco-no-result {
  color: var(--muted); font-size: 13px; text-align: center;
  padding: 28px 10px; border: 1.5px dashed var(--line-2); border-radius: 12px;
}
.deco-scroll { display: flex; flex-direction: column; gap: 10px; }
.deco-sec { font-size: 12px; font-weight: 700; color: var(--muted); margin: 2px 0; }
.deco-sec:not(.deco-sec-fold) { display: flex; align-items: center; gap: 8px; letter-spacing: .04em; }
.deco-sec:not(.deco-sec-fold)::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.deco-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.deco-rec-grid { margin-bottom: 8px; }
.deco-cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 12px; cursor: pointer; padding: 0; overflow: hidden;
  transition: border-color .2s, transform .15s, box-shadow .2s, background .2s;
}
.deco-cell:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(139, 92, 246, .22); background: rgba(124, 58, 237, .07); }
.deco-cell:active { transform: scale(.97); }
.deco-emoji { font-size: 24px; line-height: 1; }
.deco-cv { width: 100%; height: 100%; display: block; }
.deco-text-grid { grid-template-columns: repeat(2, 1fr); }
.deco-text-cell {
  aspect-ratio: auto; min-height: 56px; padding: 8px 12px;
  font-size: 14px; line-height: 1.25; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 12px;
}
.deco-text-cell.pill { border-color: transparent; box-shadow: 0 5px 16px rgba(124, 58, 237, .2); }

/* ---- R104 装饰面板：emoji 分类折叠 + 图标/形状语义筛选 ---- */
.deco-cat-sec { display: flex; flex-direction: column; gap: 6px; }
.deco-sec-fold {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin: 0; padding: 5px 3px; cursor: pointer;
  background: none; border: none; border-radius: 8px;
  font: inherit; color: inherit; text-align: left;
}
.deco-sec-fold:hover { color: var(--text); background: var(--panel); }
.deco-chev { font-size: 10px; color: var(--muted); transition: transform .2s; }
.deco-cat-sec.collapsed .deco-chev { transform: rotate(-90deg); }
.deco-cat-sec.collapsed .deco-grid { display: none; }
/* R194: 模块/模板分类 chip 要求一行 3 个，改为 3 列网格 */
.deco-sem { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.add-cats.deco-sem { display: grid; grid-template-columns: repeat(3, 1fr); grid-column: 1 / -1; }
.add-cats .deco-sem-chip { width: 100%; text-align: center; padding: 5px 4px; min-width: 0; }
.deco-sem-chip {
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.deco-sem-chip:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.deco-sem-chip.on { background: linear-gradient(120deg, var(--accent), #0ea5e9); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(124, 58, 237, .28); }

/* ---- 属性面板里的装饰选择器 ---- */
.deco-pick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.deco-pick-cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 10px; cursor: pointer; padding: 0; overflow: hidden;
  transition: border-color .2s, background .2s;
}
.deco-pick-cell:hover { border-color: var(--accent); }
.deco-pick-cell:active { transform: scale(.94); }
.deco-pick-cv { width: 100%; height: 100%; display: block; }
.deco-pick-cell.on { border-color: var(--accent); background: var(--panel-2); box-shadow: 0 0 0 2px rgba(124, 58, 237, .25); }
.deco-pick-cell.deco-emoji { font-size: 18px; }

/* ============================================================
   R198 — 统一弹窗系统（覆盖 alert/confirm/prompt/emoji/help）
   ============================================================ */
/* ---- 遮罩层 ---- */
.yk-overlay,
.emoji-pick-overlay,
.help-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(5, 7, 15, .62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: yk-fade-in .18s ease-out;
}
@keyframes yk-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 弹窗面板 ---- */
.yk-modal,
.emoji-pick-panel,
.help-card {
  width: min(460px, 92vw);
  max-height: 82vh; overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex; flex-direction: column;
  animation: yk-scale-in .18s ease-out;
}
@keyframes yk-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* ---- 弹窗头部 ---- */
.yk-modal-head,
.emoji-pick-head,
.help-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.yk-modal-head b,
.emoji-pick-head b,
.help-head b {
  font-size: 16px; font-weight: 700; color: var(--text);
}
.yk-modal-head button,
.emoji-pick-head button,
.help-head button {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- 弹窗正文 ---- */
.yk-modal-body { color: var(--text); font-size: 14.5px; line-height: 1.65; }
.yk-modal-body p { margin: 0 0 16px; }
.yk-modal-body p:last-child { margin-bottom: 0; }

/* ---- 输入框 ---- */
.yk-modal-input {
  width: 100%; padding: 10px 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 10px;
  font-size: 14px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.yk-modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ---- 按钮区 ---- */
.yk-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.yk-modal-actions .btn { min-width: 86px; justify-content: center; }

/* ---- 表情选择器弹窗（图标/表情输入字段的选表情按钮） ---- */
.emoji-pick-row { display: flex; align-items: center; gap: 6px; }
.emoji-pick-row input { flex: 1; min-width: 0; }
.emoji-pick-btn {
  flex: 0 0 auto; min-width: 52px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 10px;
  cursor: pointer; font-size: 11px; line-height: 1; padding: 0 6px;
  transition: border-color .2s, background .2s;
}
.emoji-pick-btn .tib-ico { font-size: 15px; }
.emoji-pick-btn .tib-lab { white-space: nowrap; }
.emoji-pick-btn:hover { border-color: var(--accent); background: var(--panel-2); }
.emoji-pick-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  /* R193: 滚动容器 + aspect-ratio 单元格时，Chromium 会把 auto 行压成 ~10px 导致整片重叠，
     必须显式声明行高，否则 271 个表情挤在一起无法点选 */
  grid-auto-rows: min-content;
  overflow-y: auto; padding-right: 2px; overscroll-behavior: contain;
}
.emoji-pick-grid .deco-cell { aspect-ratio: 1 / 1; font-size: 20px; }
/* R195 分类栏 + 分页条 */
.emoji-pick-cats {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 9px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
.emoji-pick-cats::-webkit-scrollbar { height: 5px; }
.emoji-pick-cats .deco-sem-chip { flex: 0 0 auto; white-space: nowrap; padding: 5px 11px; }
.emoji-pick-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.pick-pg-btn { min-width: 36px; height: 30px; padding: 0 8px; font-size: 17px; line-height: 1; }
.pick-pg-btn:disabled { opacity: .34; cursor: not-allowed; }
.pick-pg-txt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .emoji-pick-grid { grid-template-columns: repeat(6, 1fr); }
  .emoji-pick-grid .deco-cell { font-size: 19px; }
}

/* ---- 模板网格 ---- */
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpl-item {
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 7px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.tpl-item:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(139, 92, 246, .25);
}
.tpl-item canvas { width: 100%; height: auto; border-radius: 8px; display: block; background: var(--bg-2); border: 1px solid var(--line); }
.tpl-name { font-size: 12px; color: var(--muted); }
.tpl-item:hover .tpl-name { color: var(--text); }
.tpl-item { position: relative; }
.tpl-del {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; line-height: 18px; text-align: center;
  border-radius: 7px; background: var(--panel-2); color: var(--text);
  font-size: 11px; cursor: pointer; border: 0; opacity: 0;
  transition: opacity .18s;
}
.tpl-item:hover .tpl-del { opacity: 1; }
.tpl-del:hover { background: #ef4444; }
.tpl-sec {
  grid-column: 1 / -1; font-size: 11px; font-weight: 800;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  margin: 6px 0 2px;
}
/* R242: 最近使用模板分段头：标题左、清空按钮右 */
.tpl-sec:has(.recent-clear) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-sec:has(.recent-clear) .recent-clear { text-transform: none; letter-spacing: .04em; }
.tpl-save { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.tpl-save-btn {
  width: 100%; padding: 9px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(120deg, rgba(124, 58, 237, .18), rgba(14, 165, 233, .16));
  border: 1.5px solid var(--accent); color: var(--text);
  font-size: 13px; font-weight: 700; transition: transform .15s, box-shadow .2s;
}
.tpl-save-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(139, 92, 246, .25); }
.tpl-name-inp {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--accent); background: var(--bg); color: var(--text);
  font-size: 12.5px; outline: none;
}
.tpl-name-ok, .tpl-name-cancel {
  flex: none; width: 32px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--bg-2); color: var(--text);
  font-size: 14px;
}
.tpl-name-ok { border-color: var(--accent); color: var(--accent); }

/* ---- 预览区 ---- */
.preview-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 4px 10px; flex-wrap: wrap;
}
.tool-group { display: flex; align-items: center; gap: 6px; }
.tool-btn {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 10px;
  min-width: 34px; height: 34px; padding: 0 8px;
  font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .2s, background .2s;
}
.tool-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--panel-2); }
.tool-btn:disabled { opacity: .35; cursor: default; }
.tool-btn.on { border-color: #f59e0b; background: rgba(245, 158, 11, .16); color: #fbbf24; }
.tool-txt { font-size: 12.5px; }
.size-label { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 缩放标签点击后的内联输入框 */
#zoomLabel { cursor: pointer; }
#zoomLabel:hover { color: var(--text); }
.zoom-input {
  width: 58px; padding: 2px 5px; font-size: 12.5px; font-family: inherit;
  font-variant-numeric: tabular-nums; text-align: center;
  background: var(--bg-2); border: 1px solid var(--accent);
  border-radius: 7px; color: var(--text); outline: none;
}

.preview-wrap {
  overflow: auto;
  background:
    radial-gradient(ellipse at center, rgba(139, 92, 246, .08), transparent 70%),
    repeating-conic-gradient(rgba(255, 255, 255, .03) 0% 25%, transparent 0% 50%) 0 0 / 26px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  min-height: 0;
  max-height: none;
  flex: 1;
  display: flex; justify-content: center; align-items: center;
}
.preview-stage { position: relative; flex: none; margin: auto; --ruler: 22px; }
#mainCanvas {
  display: block;
  position: absolute;
  left: var(--ruler); top: var(--ruler);
  border-radius: 8px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.inline-box { position: absolute; left: var(--ruler); top: var(--ruler); right: auto; bottom: auto; pointer-events: none; }
.ruler { position: absolute; display: block; background: var(--ruler-bg, rgba(19,22,33,.98)); touch-action: none; user-select: none; -webkit-user-select: none; }
.ruler-top { top: 0; left: var(--ruler); right: 0; height: var(--ruler); border-bottom: 1px solid var(--line); cursor: crosshair; }
.ruler-left { top: var(--ruler); left: 0; bottom: 0; width: var(--ruler); border-right: 1px solid var(--line); cursor: crosshair; }
.ruler-corner { position: absolute; top: 0; left: 0; width: var(--ruler); height: var(--ruler); background: var(--ruler-bg, rgba(19,22,33,.98)); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.previewing .ruler, body.previewing .ruler-corner { display: none; }
.inline-ta {
  position: absolute; pointer-events: auto;
  background: rgba(255, 255, 255, .96);
  color: #111;
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 4px 8px;
  font-family: inherit; font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  resize: none; overflow: hidden;
  z-index: 20;
}
.sel {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 9px 10px; font-size: 14px; cursor: pointer;
}

/* ---- 属性面板 ---- */
.inspector { display: flex; flex-direction: column; gap: 12px; }
.ins-hint {
  color: var(--muted); font-size: 13px; text-align: center;
  padding: 34px 10px; border: 1.5px dashed var(--line-2); border-radius: 12px;
}
.ins-head {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px;
  position: sticky; top: 0; z-index: 2;
}
.ins-head b { font-size: 14.5px; }
.ins-ico { font-size: 17px; }
.ins-acts { margin-left: auto; display: flex; gap: 5px; }
.ins-grp {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.grp-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
  padding: 2px 0 4px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  background: none; border-top: none; border-left: none; border-right: none;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-family: inherit;
  transition: color .2s;
}
.grp-h:hover { color: var(--accent-2); }
.grp-chev { font-size: 10px; transition: transform .22s ease; }
.ins-grp.collapsed .grp-chev { transform: rotate(-90deg); }
.ins-grp.collapsed > .ins-row, .ins-grp.collapsed > .fld,
.ins-grp.collapsed > .align-grid, .ins-grp.collapsed > .rot-wrap,
.ins-grp.collapsed > .ins-row-group { display: none; }
.ins-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.ins-lab { font-size: 12.5px; color: var(--muted); flex: none; }
.rot-slider { flex: 1; min-width: 70px; accent-color: var(--accent); }
.rot-val { min-width: 40px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fx-chip {
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.fx-chip:hover { border-color: var(--accent); color: var(--accent); }
.fx-chip:active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* R285: 当前生效的预设要能一眼看出 —— 此前点了预设没有任何视觉反馈,
   用户无法确认"现在是哪一套"。放在 :active 之后才能盖住按下态, 保证高亮稳定。 */
.fx-chip.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.fx-chip.on:hover { filter: brightness(1.08); }
.fx-label { width: 100%; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.fx-chip-wrap { display: inline-flex; align-items: center; }
.fx-chip.save { border-style: dashed; }
.fx-chip.save:hover { border-color: var(--accent); color: var(--accent); }
.fx-del { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 1px; line-height: 1; }
.fx-del:hover { color: #ef4444; }

/* 模块配色方案（inspector） */
.scheme-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.scheme-chip {
  width: 30px; height: 30px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: transform .12s, border-color .12s, box-shadow .12s;
  position: relative; outline: none; padding: 0;
}
.scheme-chip:hover { transform: translateY(-2px) scale(1.06); }
.scheme-chip.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(124,58,237,.35); }

/* 背景预设（画布面板） */
.bg-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 6px; }
.bg-preset {
  height: 34px; border-radius: 10px; cursor: pointer; border: 2px solid var(--line);
  position: relative; overflow: hidden; outline: none; padding: 0;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.bg-preset:hover { transform: translateY(-2px); }
.bg-preset.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 2px 10px rgba(124,58,237,.3); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-left: auto; }
.seg-btn {
  background: var(--bg-2); color: var(--muted);
  border: 0; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
  transition: color .2s, background .2s;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.on { color: #fff; background: linear-gradient(120deg, rgba(124, 58, 237, .6), rgba(14, 165, 233, .5)); }
.mini-btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  min-width: 28px; height: 28px; padding: 0 6px;
  font-size: 13px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.mini-btn:hover { border-color: var(--accent); background: rgba(139, 92, 246, .18); }
.ins-reset {
  width: 100%; margin-top: 10px; padding-top: 12px; font-weight: 600;
  border-top: 1px dashed var(--line-2);
  background: transparent; color: var(--muted);
  border-left: none; border-right: none; border-bottom: none; border-radius: 0;
  height: 34px; font-size: 13px; cursor: pointer;
  transition: color .2s;
}
.ins-reset:hover { color: #ef4444; background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .4); }

.style-row { display: flex; flex-wrap: wrap; gap: 6px; }
.style-btn {
  background: var(--bg-2); color: var(--muted);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.style-btn:hover { color: var(--text); border-color: var(--line-2); }
.style-btn.on {
  color: #fff; border-color: var(--accent);
  background: linear-gradient(120deg, rgba(124, 58, 237, .55), rgba(14, 165, 233, .45));
}

.pos-row { display: flex; gap: 8px; }
.num-field {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 10px;
}
.num-field span { font-size: 12px; color: var(--muted); font-weight: 700; }
.num-field input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 13.5px; padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
/* R241: num-field 数字输入聚焦环（与 .fld input:focus 对齐） */
.num-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.fld { display: flex; flex-direction: column; gap: 5px; }
.fld-lab { font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.fld-lab b { color: var(--accent-2-ink); font-variant-numeric: tabular-nums; }
.fld-hint { font-size: 11px; line-height: 1.5; color: var(--muted); opacity: 0.85; padding: 0 2px; }
.fld input[type="text"], .fld input[type="number"], .fld textarea, .fld select {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 10px;
  padding: 8px 11px; font-size: 13.5px; width: 100%;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.fld textarea { resize: vertical; min-height: 56px; }
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.fld input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  cursor: pointer;
}
.fld input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer;
}
.fld input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer;
}
.rot-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.rot-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
}
.fld-toggle { flex-direction: row; align-items: center; justify-content: space-between; }
.col-inp {
  width: 64px; height: 36px; padding: 3px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px;
}
.col-inp::-webkit-color-swatch-wrapper { padding: 2px; }
.col-inp::-webkit-color-swatch { border: none; border-radius: 7px; }
.col-inp::-moz-color-swatch { border: none; border-radius: 7px; }

/* 最近使用颜色条（跟随颜色输入出现，localStorage 持久化） */
.recent-mount { min-height: 0; }
.recent-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 7px; padding: 6px 9px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px;
}
.recent-dot {
  position: relative; width: 20px; height: 20px; padding: 0; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid rgba(128, 128, 128, .45);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.recent-dot::before { content: ""; position: absolute; inset: -9px; }
.recent-dot:hover { transform: scale(1.25); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); z-index: 1; }
.recent-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recent-dot.on { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--accent); }
@media (pointer: coarse) {
  .recent-dot { width: 26px; height: 26px; }
}

.sel-mini {
  flex: 1; height: 36px; padding: 0 10px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: 13px;
}
.sel-mini:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cv-row .col-inp { width: 46px; flex: 0 0 46px; }

.img-row { display: flex; gap: 8px; flex-wrap: wrap; }

.list-ed { display: flex; flex-direction: column; gap: 8px; }
.list-card {
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 9px;
  display: flex; flex-direction: column; gap: 7px;
}
.list-card-top { display: flex; align-items: center; }
.list-no {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--grad); color: #fff;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.list-tools { margin-left: auto; display: flex; gap: 4px; }
.list-fld { display: flex; align-items: center; gap: 7px; }
.list-fld span { font-size: 11.5px; color: var(--muted); width: 34px; flex: none; }
.list-fld input {
  flex: 1; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px;
  padding: 6px 9px; font-size: 13px;
}
.list-fld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.str-row { display: flex; gap: 6px; align-items: center; }
.str-row input {
  flex: 1; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px;
  padding: 6px 9px; font-size: 13px;
}
.str-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.list-add { align-self: flex-start; }

/* ---- 图层面板 ---- */
.layer-list { display: flex; flex-direction: column; gap: 7px; }
.layer-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 7px 9px;
  transition: border-color .2s, background .2s;
}
.layer-row:hover { border-color: var(--line-2); background: var(--panel-2); }
.layer-row.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.layer-info {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; cursor: pointer; overflow: hidden;
}
.layer-thumb {
  width: 38px; height: 28px; flex: 0 0 auto;
  border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); display: block;
}
.layer-row.hidden .layer-thumb { opacity: .8; }
.layer-info i { font-style: normal; font-size: 14px; }
.layer-info em {
  font-style: normal; color: var(--muted); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-rename {
  width: 110px; font-size: 12.5px; padding: 2px 6px; border-radius: 7px;
  border: 1px solid var(--accent); background: var(--bg); color: var(--text);
  outline: none;
}
.layer-tools {
  display: flex; gap: 3px; flex: 1 1 100%;
  justify-content: flex-end; align-items: center;
}
.layer-tools .mini-btn { min-width: 24px; height: 26px; padding: 0 4px; font-size: 12px; }
.layer-grip {
  flex: none; cursor: grab; color: var(--muted); font-size: 13px;
  padding: 0 2px; user-select: none; line-height: 1;
}
.layer-grip:hover { color: var(--text); }
.layer-grip:active { cursor: grabbing; }
.layer-row.dragging { opacity: .4; }
.layer-row.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.layer-row.drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* ---- 画布面板 ---- */
.cv-sec { margin-bottom: 16px; }
.cv-lab { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.cv-row { display: flex; align-items: center; justify-content: space-between; }
.cv-row .cv-lab { margin: 0; }
.snap-row { margin-top: 12px; }
.snap-row > span { font-size: 13px; font-weight: 600; color: var(--text); }
.snap-row + .fld { margin-top: 10px; }
.guide-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cv-export { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.exp-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.exp-btns .btn { width: 100%; justify-content: center; }
.cv-export .exp-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin-top: 8px; cursor: pointer; }
.cv-export .exp-opt input { cursor: pointer; }
.cv-export .exp-opt.exp-pad { justify-content: space-between; }
.cv-export .exp-opt.exp-pad input { width: 64px; }
.exp-scale { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--text); }
.exp-scale .sel-mini { width: 80px; }
.exp-size-hint { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-empty { color: var(--muted); font-size: 12px; margin-top: 6px; }
.guide-row { display: flex; align-items: center; gap: 6px; }
.guide-row + .guide-row { margin-top: 7px; }
.guide-row.on .g-pos { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.guide-row.on .g-ic { color: var(--accent); }
.guide-row .g-ic { width: 16px; text-align: center; color: var(--muted); flex: none; }
.guide-row .g-pos { flex: 1; min-width: 0; width: 100%; }
.guide-row .g-pos, .num-field input { font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.guide-row .g-del { flex: none; width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 13px; }
.ratio-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ratio-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 10px 6px; cursor: pointer;
  color: var(--text); transition: border-color .2s, transform .15s;
}
.ratio-btn:hover { transform: translateY(-2px); border-color: var(--line-2); }
.ratio-btn.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ratio-btn b { font-size: 12.5px; }
.ratio-btn i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.ratio-shape { display: block; background: var(--grad); border-radius: 3px; opacity: .85; }
.ratio-shape.sr34 { width: 22px; height: 29px; }
.ratio-shape.sr916 { width: 16px; height: 29px; }
.ratio-shape.sr11 { width: 26px; height: 26px; }
.ratio-shape.sr43 { width: 32px; height: 24px; }
.custom-size { display: flex; gap: 8px; grid-column: 1 / -1; margin-top: 8px; }

.theme-box { display: flex; flex-wrap: wrap; gap: 11px; padding: 2px; }
.theme-dot {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--line-2); cursor: pointer;
  transition: transform .15s, box-shadow .2s, border-color .2s;
  padding: 0; position: relative;
}
.theme-dot:hover { transform: scale(1.08); }
.theme-dot.on {
  border-color: #fff;
  box-shadow: 0 0 0 2.5px var(--accent), 0 4px 14px rgba(139, 92, 246, .5);
  transform: scale(1.06);
}
.theme-dot i {
  position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bg);
}
.theme-dot.rnd {
  background: var(--panel-2); border-style: dashed;
  font-size: 19px; display: inline-flex; align-items: center; justify-content: center;
}
.theme-dot.rnd:hover { border-color: var(--accent); transform: scale(1.08) rotate(-8deg); }
.font-sel { width: 100%; }

/* ---- 开关 ---- */
.tgl { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line-2); position: relative; cursor: pointer;
  transition: background .2s, border-color .2s; flex: none; }
.tgl::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.tgl:checked { background: linear-gradient(120deg, #7c3aed, #0891b2); border-color: transparent; }
.tgl:checked::before { transform: translateX(20px); background: #fff; }

/* ---------- 三步说明 ---------- */
.howto { max-width: 1180px; margin: 76px auto 0; padding: 0 20px; }
.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.how-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 24px 26px; text-align: center;
  transition: transform .2s, border-color .2s;
}
.how-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.how-num {
  position: absolute; top: 14px; left: 18px;
  font-size: 40px; font-weight: 900; opacity: .16;
}
.how-ico { font-size: 38px; margin-bottom: 12px; }
.how-card h3 { margin: 0 0 8px; font-size: 17px; }
.how-card p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- 功能特性 ---------- */
.features { max-width: 1180px; margin: 76px auto 0; padding: 0 20px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.feat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .5);
  box-shadow: 0 10px 30px rgba(139, 92, 246, .18);
}
.feat-ico { font-size: 26px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; }
.feat-card h3 { margin: 0 0 8px; font-size: 16.5px; }
.feat-card p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- 作品类型画廊 ---------- */
.showcase { max-width: 1180px; margin: 76px auto 0; padding: 0 20px; }
.show-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.show-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 10px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.show-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .5);
  box-shadow: 0 10px 30px rgba(139, 92, 246, .18);
}
.show-ico { font-size: 26px; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; transition: transform .2s, border-color .2s, background .2s; }
.show-card:nth-child(6n+1) .show-ico { background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(124, 58, 237, .06)); border-color: rgba(124, 58, 237, .35); }
.show-card:nth-child(6n+2) .show-ico { background: linear-gradient(135deg, rgba(14, 165, 233, .22), rgba(14, 165, 233, .06)); border-color: rgba(14, 165, 233, .35); }
.show-card:nth-child(6n+3) .show-ico { background: linear-gradient(135deg, rgba(236, 72, 153, .22), rgba(236, 72, 153, .06)); border-color: rgba(236, 72, 153, .35); }
.show-card:nth-child(6n+4) .show-ico { background: linear-gradient(135deg, rgba(245, 158, 11, .22), rgba(245, 158, 11, .06)); border-color: rgba(245, 158, 11, .35); }
.show-card:nth-child(6n+5) .show-ico { background: linear-gradient(135deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .06)); border-color: rgba(16, 185, 129, .35); }
.show-card:nth-child(6n+6) .show-ico { background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(99, 102, 241, .06)); border-color: rgba(99, 102, 241, .35); }

.show-card b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.show-card .show-desc { font-size: 12px; line-height: 1.65; color: var(--muted); margin-top: 8px; text-align: left; }
/* R207: 首页画廊分类入口卡（链接 + 描述行） */
a.show-card { text-decoration: none; cursor: pointer; }
.show-card.show-cat { padding: 20px 12px; }
.show-card.show-cat i {
  font-style: normal; font-size: 12px; line-height: 1.45; white-space: nowrap;
  color: var(--muted, #5a6478); text-align: center; max-width: none;
}
.show-card.show-cat:hover b { color: var(--accent, #7c3aed); }
@media (max-width: 640px) {
  .show-card.show-cat i { white-space: normal; }
  .show-grid { grid-template-columns: repeat(2, 1fr); }
  .show-card.show-cat i { max-width: none; }
}
.features, .showcase, .faq { position: relative; }
.features::before, .showcase::before, .faq::before {
  content: ''; position: absolute; top: -40px; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
}
.show-card:hover .show-ico { transform: translateY(-2px); border-color: var(--accent); }

/* ---------- 统一输入框 ---------- */
.inp {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 10px;
  padding: 8px 11px; font-size: 13.5px; width: 100%;
  font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 76px auto 0; padding: 0 20px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 0 20px;
  transition: border-color .2s;
}
.faq-item[open] { border-color: rgba(139, 92, 246, .5); }
.faq-item summary {
  cursor: pointer; font-weight: 700; font-size: 15px;
  padding: 16px 0; list-style: none; position: relative; padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); color: var(--accent-2); font-size: 20px;
  transition: transform .25s ease, color .2s;
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--accent);
}
.faq-item p { margin: 0 0 16px; color: var(--muted); font-size: 14px; animation: faqIn .28s ease; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 页脚 ---------- */
.site-footer {
  margin-top: 86px; padding: 40px 20px 46px;
  border-top: 1px solid var(--line);
  text-align: center; color: var(--muted);
}
.foot-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.foot-brand b { color: var(--text); font-size: 16px; }
.foot-nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 4px 0 14px; }
.foot-nav a { color: var(--muted); font-size: 13px; text-decoration: none; transition: color .2s; }
.foot-nav a:hover { color: var(--accent); }
.foot-tag { font-size: 13px; padding-left: 12px; border-left: 1px solid var(--line-2); }
.foot-privacy { font-size: 12.5px; margin: 0 0 8px; }
.foot-copy { font-size: 12.5px; margin: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 99;
  transform: translate(-50%, 20px);
  background: rgba(20, 24, 44, .95);
  border: 1px solid var(--line-2);
  color: #eef1f7;
  padding: 12px 26px; border-radius: 999px;
  font-size: 14px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- v2: 对齐行 / 激活态小按钮 ---------- */
.align-row { display: flex; gap: 6px; }
.align-row .mini-btn { flex: 1; min-height: 34px; height: auto; padding: 4px 2px; font-size: 10.5px; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; }
.align-center { width: 100%; margin-top: 6px; min-height: 34px; height: auto; padding: 4px 2px; font-size: 10.5px; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; }
.mini-btn.on { border-color: #f59e0b; background: rgba(245, 158, 11, .18); }
.layer-row.locked { opacity: .62; }
.layer-row.locked.on { opacity: 1; }
.layer-row.hidden { opacity: .45; }
.layer-row.hidden .layer-info em,
.layer-row.hidden .layer-info { text-decoration: line-through; }
.layer-row.sel { background: rgba(99, 102, 241, .14); }
.layer-row.sel:not(.on) { border-color: rgba(99, 102, 241, .5); }
.layer-row.grouped .layer-info { padding-left: 2px; }
.layer-row.grouped .grp-badge { color: var(--accent); font-style: normal; font-size: 12px; }
.layer-row.grouped.on { border-left: 3px solid var(--accent); }
.mini-btn.disabled, .mini-btn:disabled { opacity: .38; pointer-events: none; filter: grayscale(.6); }
/* R194: 多选对齐按钮改用文字标签，7 个按钮排成 3+3+1 */
.align-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.align-grid .mini-btn { flex: 0 0 calc((100% - 12px) / 3); min-width: 0; min-height: 34px; height: auto; padding: 4px 2px; font-size: 10.5px; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; }
.align-grid .mini-btn:nth-child(7) { flex: 0 0 100%; }
.dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.dist-grid .mini-btn { min-height: 34px; height: auto; padding: 4px 2px; font-size: 10.5px; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; }
/* R197: 编组/样式操作按钮改用图标+文字，两列等宽 */
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.act-grid .mini-btn { min-height: 34px; height: auto; padding: 4px 6px; font-size: 11px; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.txt-icon-btn .tib-ico { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.txt-icon-btn .tib-lab { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-hint-inline { color: var(--muted); font-size: 12px; line-height: 1.5; padding: 4px 2px 8px; }

/* ---------- v2: 自定义配色 ---------- */
.cust-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.cust-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 9px;
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.cust-item input[type="color"] {
  width: 34px; height: 26px; padding: 0; border: none; border-radius: 7px;
  background: transparent; cursor: pointer;
}
.cust-item input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cust-item input[type="color"]::-webkit-color-swatch { border-radius: 5px; border: 1px solid var(--line-2); }
.wm-input {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 10px;
  padding: 8px 11px; font-size: 13.5px; width: 100%;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.wm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ---------- v2: 快捷键帮助 ---------- */
.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px;
  font-size: 13.5px; color: var(--text);
  transition: border-color .2s, background .2s;
}
.help-row:hover { border-color: var(--accent); background: var(--panel-2); }
.help-row kbd {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px; color: var(--accent-2-ink);
  background: rgba(34, 211, 238, .08);
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 7px; padding: 3px 9px;
  white-space: nowrap;
}

/* ---------- v2: 预览模式 ---------- */
.exit-preview {
  position: fixed; top: 16px; right: 18px; z-index: 110;
  box-shadow: 0 8px 26px rgba(124, 58, 237, .5);
}
body.previewing .site-header,
body.previewing .hero,
body.previewing .howto,
body.previewing .features,
body.previewing .faq,
body.previewing .site-footer,
body.previewing .lp,
body.previewing .rp,
body.previewing .bg-fx { display: none; }
body.previewing .editor { max-width: none; margin-top: 8px; }
body.previewing .editor-grid { grid-template-columns: minmax(0, 1fr); }
body.previewing .preview-wrap {
  max-height: none; min-height: 72vh;
}
body.previewing #mainCanvas { box-shadow: 0 20px 70px rgba(0, 0, 0, .6); }

/* ---------- v2: 画布比例补充 (16:9 / 4:5 / 2:3) ---------- */
.ratio-shape.sr169 { width: 43px; height: 24px; }
.ratio-shape.sr45 { width: 22px; height: 27px; }
.ratio-shape.sr23 { width: 21px; height: 32px; }
.ratio-shape.sr219 { width: 48px; height: 21px; }

/* ---------- v2: 透明背景导出开关 ---------- */
.exp-opt {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 11px;
  font-size: 13px; color: var(--text); cursor: pointer;
  user-select: none; transition: border-color .2s, background .2s;
}
.exp-opt:hover { border-color: var(--line-2); }
.exp-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.opt-chk { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.opt-num { width: 58px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 13px; padding: 2px 6px; }
.opt-num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.opt-num:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- v2: 属性面板分隔与逐模块配色/背景行 ---------- */
.ins-div { height: 1px; background: var(--line); margin: 4px 0; }
.ins-flex { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.ins-flex .fld-lab { margin: 0; }
.clr-inp {
  width: 36px; height: 28px; padding: 0; border: none; border-radius: 7px;
  background: transparent; cursor: pointer; flex: 0 0 auto;
}
.clr-inp::-webkit-color-swatch-wrapper { padding: 2px; }
.clr-inp::-webkit-color-swatch { border-radius: 5px; border: 1px solid var(--line-2); }
.grad-arrow { color: var(--muted); font-size: 14px; flex: 0 0 auto; line-height: 1; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1280px) {
  .editor-grid { grid-template-columns: 220px minmax(0, 1fr) 300px; }
  .side-panel { min-width: 220px; }
}
/* iOS Safari: 输入控件字号 <16px 聚焦时自动放大页面, 移动端统一覆盖 */
@media (max-width: 900px) {
  input[type="text"], input[type="number"], input[type="search"], input[type="url"], input[type="email"],
  input[type="password"], select, textarea { font-size: 16px !important; }
  /* 触控目标 ≥40px (Apple 建议 44px, 40px 为布局折中) */
  .tool-btn { min-width: 42px; height: 42px; }
  .mini-btn { min-width: 40px; height: 40px; padding: 0 8px; }
  .layer-tools .mini-btn { min-width: 40px; height: 40px; padding: 0 6px; }
  .btn-sm { padding: 9px 16px; }
  .layer-row { padding-top: 10px; padding-bottom: 10px; }
  .deco-sem-chip { padding: 8px 13px; font-size: 12.5px; }
  .deco-cat { padding: 10px 4px; }
}
@media (max-width: 1024px) {
  html[data-page="editor"] body { height: auto; overflow-x: hidden; overflow-y: auto; }
  html[data-page="editor"] main { display: block; }
  html[data-page="editor"] .editor { flex: none; min-height: calc(100vh - 60px); }
  .editor-grid { grid-template-columns: 1fr; }
  .preview-panel { order: -1; }
  .side-panel { position: static; max-height: none; min-width: 0; }
  .panel-body { max-height: 420px; }
  /* R250: 平板竖屏下提升 preview-wrap 最小高度，让 3:4 画布有足够可视区域 */
  .preview-wrap { max-height: none; min-height: 480px; align-items: flex-start; }
  .add-grid { grid-template-columns: repeat(4, 1fr); }
  .tpl-grid { grid-template-columns: repeat(4, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .howto-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .show-grid { grid-template-columns: repeat(3, 1fr); }
  .deco-grid { grid-template-columns: repeat(8, 1fr); }
  .deco-pick { grid-template-columns: repeat(12, 1fr); }
}
@media (max-width: 640px) {
  .blob { display: none; }
  .site-nav { display: none; }
  .site-header { gap: 12px; }
  .header-actions .lang-btn { padding: 7px 10px; font-size: 13px; }
  .hero-title span { display: block; }
  .hero { padding-top: 40px; }
  .hero-stats { gap: 20px; }
  .stat b { font-size: 21px; }
  .add-grid { grid-template-columns: repeat(3, 1fr); }
  .tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: 1fr; }
  .preview-wrap { min-height: 240px; padding: 8px; }
  .tool-txt { display: none; }
  /* R193: 工具按钮组本身不换行会被 body overflow-x:hidden 裁掉（导出/预览/帮助按钮在手机上不可见不可点） */
  .tool-group { flex-wrap: wrap; row-gap: 6px; column-gap: 6px; }
  .show-grid { grid-template-columns: repeat(3, 1fr); }
  .deco-grid { grid-template-columns: repeat(6, 1fr); }
  .deco-pick { grid-template-columns: repeat(10, 1fr); }
  .deco-cats { gap: 4px; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 30px; }
  .stat b { font-size: 18px; }
  .hero-sub { font-size: 14px; }
  .header-actions .theme-btn span:last-child,
  .header-actions .lang-btn span:last-child { display: none; }
  .header-actions .theme-btn,
  .header-actions .lang-btn { padding: 7px 9px; }
  .add-grid { grid-template-columns: repeat(2, 1fr); }
  .tpl-grid { grid-template-columns: 1fr; }
  .show-grid { grid-template-columns: repeat(2, 1fr); }
  .deco-grid { grid-template-columns: repeat(4, 1fr); }
  .deco-pick { grid-template-columns: repeat(8, 1fr); }
  .preview-toolbar { flex-wrap: wrap; row-gap: 6px; }
  .feat-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 右键上下文菜单 ---------- */
.ctx-menu {
  position: fixed; z-index: 9999; min-width: 196px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
  font-size: 13.5px; user-select: none;
}
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; color: var(--text);
  font: inherit; text-align: left; line-height: 1;
}
.ctx-item:hover { background: var(--panel-2); }
.ctx-item.disabled { opacity: .38; cursor: default; pointer-events: none; }
.ctx-item.danger { color: #e5484d; }
.ctx-item.danger:hover { background: rgba(229, 72, 77, .12); }
.ctx-ic { width: 18px; text-align: center; font-size: 15px; flex: none; }
.ctx-lb { flex: 1; white-space: nowrap; }
.ctx-key {
  font-size: 11px; color: var(--muted); background: var(--panel-2);
  padding: 2px 6px; border-radius: 5px; flex: none;
}
.ctx-sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* ---------- 触屏设备: 关闭 hover 位移/阴影动效 (避免点按后卡片浮着/图标放大粘滞) ---------- */
@media (hover: none) {
  .btn-primary:hover, .btn-ghost:hover, .tool-btn:hover, .mini-btn:hover,
  .add-item:hover, .deco-cell:hover, .deco-sem-chip:hover, .tpl-item:hover,
  .tpl-save-btn:hover, .ratio-btn:hover, .theme-dot:hover, .theme-dot.rnd:hover,
  .how-card:hover, .feat-card:hover, .show-card:hover, .show-card:hover .show-ico,
  .recent-dot:hover, .add-item:hover .add-ico {
    transform: none !important;
    box-shadow: none !important;
  }
  .deco-cell:hover { background: var(--bg-2) !important; }
}

/* ============================================================
   R209: 站点文档页（tutorial/faq/about/terms/privacy）
   ============================================================ */
.doc-main { max-width: 860px; margin: 40px auto 60px; padding: 0 20px; }
.doc-title { font-size: 32px; font-weight: 800; color: var(--text); margin: 10px 0 6px; }
.doc-sub { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 26px; }
.doc-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 16px);
  padding: 20px 22px; margin: 0 0 14px;
}
.doc-h2 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.doc-p { color: var(--text); opacity: .88; font-size: 14.5px; line-height: 1.75; margin: 0; }
.doc-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
  /* R213: 白字对比度需 >=4.5 (WCAG AA)；--accent 深色主题为 #8b5cf6 (4.23 不达标)，固定 #7c3aed (5.7) */
  background: #7c3aed; color: #fff; font-size: 14px; font-weight: 600;
  transition: filter .2s, transform .2s;
}
.doc-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* R216: 长文档页返回顶部按钮 */
.back-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-size: 17px; line-height: 1; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .2s, border-color .2s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.back-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-faq { display: flex; flex-direction: column; gap: 10px; }
.doc-mail {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 11px 18px; border-radius: 12px; cursor: pointer; font-size: 14.5px;
  background: var(--panel-2, rgba(124, 58, 237, .08)); color: var(--accent, #7c3aed);
  border: 1px dashed var(--accent, #7c3aed); font-family: inherit; font-weight: 600;
  transition: background .2s, transform .15s;
}
.doc-mail:hover { background: rgba(124, 58, 237, .16); transform: translateY(-1px); }
.doc-mail:active { transform: scale(.98); }
.doc-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.doc-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 16px);
  background: #171a2b; color: #eef1f7; font-size: 14px; font-weight: 600;
  padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(139, 92, 246, .5);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 90;
}
.doc-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  .doc-title { font-size: 26px; }
  .doc-card { padding: 16px; }
}

/* R219: 关于页数据亮点数字卡 */
.doc-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.doc-stat { flex: 1; min-width: 120px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 14px 10px; text-align: center; }
.doc-stat b { display: block; font-size: 24px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.doc-stat span { font-size: 12.5px; color: var(--muted); }

/* R225: 打印适配 — 深色主题下浅色文字打印到白纸不可见，浮动元素不入纸 */
@media print {
  .back-top, .header-actions, .site-header .lang-btn, .site-header .theme-btn { display: none !important; }
  body, main, .doc-card, .faq-item { background: #fff !important; }
  body { color: #111 !important; }
  .doc-title, .doc-h2, .doc-p, summary, .foot-brand b, .foot-nav a, .foot-copy, .doc-stat span { color: #111 !important; }
  .doc-stat span, .doc-p { opacity: 1 !important; }
  .doc-stat b { -webkit-text-fill-color: #4c1d95 !important; color: #4c1d95 !important; }
  .doc-card, .faq-item, .doc-stat { border-color: #ccc !important; box-shadow: none !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 10px; color: #555; }
  .site-footer { margin-top: 20px !important; }
}
/* R230: 导航当前页标记 */
.site-nav a[aria-current="page"], .nav-links a[aria-current="page"] { color: var(--accent, #7c3aed); font-weight: 700; }

/* ============================================================
   R235c 全站视觉美化层（增量覆盖，不改既有规则）
   渐变边框卡片 · 悬停辉光 · 按压反馈 · 玻璃顶栏 · 氛围光
   ============================================================ */

/* ---- 1. 顶栏玻璃拟态升级（含编辑器页） ---- */
.site-header {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 28px rgba(0, 0, 0, .16);
}
[data-theme="light"] .site-header { box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 8px 24px rgba(30, 20, 70, .07); }

/* ---- 2. 卡片：渐变描边 + 悬停辉光（画廊卡 / 文档卡 / 特色卡 / 模块卡） ---- */
.show-card, .doc-card, .feat-card, .add-item, .tpl-item, .deco-cell {
  border-color: transparent;
  background:
    linear-gradient(#141728, #141728) padding-box,
    linear-gradient(145deg, rgba(139, 92, 246, .30), rgba(34, 211, 238, .14) 45%, rgba(244, 114, 182, .22)) border-box;
}
[data-theme="light"] .show-card, [data-theme="light"] .doc-card, [data-theme="light"] .feat-card, [data-theme="light"] .add-item, [data-theme="light"] .tpl-item, [data-theme="light"] .deco-cell {
  background:
    linear-gradient(#f0f1f8, #f0f1f8) padding-box,
    linear-gradient(145deg, rgba(124, 58, 237, .26), rgba(6, 182, 212, .13) 45%, rgba(219, 39, 119, .18)) border-box;
}
.show-card:hover, .feat-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 36px rgba(139, 92, 246, .26), 0 0 0 1px rgba(139, 92, 246, .28) inset;
}
[data-theme="light"] .show-card:hover, [data-theme="light"] .feat-card:hover {
  box-shadow: 0 14px 32px rgba(124, 58, 237, .18), 0 0 0 1px rgba(124, 58, 237, .26) inset;
}
.doc-card { transition: box-shadow .25s, transform .25s; }
.doc-card:hover { box-shadow: 0 8px 26px rgba(139, 92, 246, .12); }

/* ---- 3. 按压反馈 ---- */
.show-card:active, .add-item:active, .feat-card:active, .btn:active, .btn-primary:active { transform: scale(.98); }
/* R241: 补齐 chip/分组头的按压反馈（触屏 hover 常驻失效场景依赖 :active） */
.deco-cat:active, .deco-sem-chip:active, .seg-btn:active, .mini-btn:active, .style-btn:active, .grp-h:active { transform: scale(.96); }

/* ---- 4. 主按钮：渐变流动 ---- */
.btn-primary { background-size: 150% 150%; transition: transform .15s, box-shadow .2s, background-position .5s; }
.btn-primary:hover { background-position: 90% 50%; }

/* ---- 5. 表单 hover 统一 accent 描边 ---- */
.inp:hover, .add-search:hover, .deco-search:hover, .yk-modal-input:hover, .sel-mini:hover {
  border-color: rgba(139, 92, 246, .45);
}
[data-theme="light"] .inp:hover, [data-theme="light"] .add-search:hover, [data-theme="light"] .deco-search:hover, [data-theme="light"] .yk-modal-input:hover, [data-theme="light"] .sel-mini:hover {
  border-color: rgba(124, 58, 237, .42);
}

/* ---- 6. 区块标题：渐变装饰短条 ---- */
.sec-title { position: relative; padding-bottom: 14px; }
.sec-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #22d3ee 55%, #f472b6);
  opacity: .85;
}
[data-theme="light"] .sec-title::after { background: linear-gradient(90deg, #7c3aed, #06b6d4 55%, #db2777); }

/* ---- 7. 页面顶部氛围光晕（站点页；编辑器画布区不加） ---- */
body:not([data-page="editor"])::before {
  content: ''; position: fixed; top: -160px; left: 50%; transform: translateX(-50%);
  width: 860px; height: 460px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, .13), transparent 65%);
}
[data-theme="light"] body:not([data-page="editor"])::before {
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, .09), transparent 65%);
}

/* ---- 8. 站点页脚:顶部渐变分隔线 ---- */
.site-footer:not(.editor-foot) { position: relative; }
.site-footer:not(.editor-foot)::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .5), rgba(34, 211, 238, .5), transparent);
}
[data-theme="light"] .site-footer:not(.editor-foot)::before { background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .45), rgba(6, 182, 212, .45), transparent); }

/* ---- 9. 入场淡入（尊重动画偏好，仅站点页内容区） ---- */
@media (prefers-reduced-motion: no-preference) {
  .doc-card, .show-card, .feat-card { animation: r235c-fadein .45s ease both; }
  .show-card:nth-child(2), .feat-card:nth-child(2) { animation-delay: .05s; }
  .show-card:nth-child(3), .feat-card:nth-child(3) { animation-delay: .1s; }
  .show-card:nth-child(4) { animation-delay: .15s; }
  .show-card:nth-child(5) { animation-delay: .2s; }
  .show-card:nth-child(6) { animation-delay: .25s; }
  @keyframes r235c-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---- 10. 打印：隐藏新增装饰层 ---- */
@media print {
  body::before { display: none !important; }
  .show-card, .doc-card, .feat-card { animation: none !important; background: #fff !important; border-color: #ccc !important; box-shadow: none !important; }
  .sec-title::after, .site-footer:not(.editor-foot)::before { display: none !important; }
}

/* ============================================================
   R236 深度美化层（第二轮：细节交互与首屏焦点）
   ============================================================ */

/* ---- 1. Hero 徽章：品牌三色渐变描边（与卡片体系统一） ---- */
.hero-badge {
  border-color: transparent;
  background:
    linear-gradient(#141728, #141728) padding-box,
    linear-gradient(120deg, rgba(139, 92, 246, .55), rgba(34, 211, 238, .5) 50%, rgba(244, 114, 182, .5)) border-box;
  box-shadow: 0 4px 20px rgba(139, 92, 246, .18);
}
[data-theme="light"] .hero-badge {
  background:
    linear-gradient(#f0f1f8, #f0f1f8) padding-box,
    linear-gradient(120deg, rgba(124, 58, 237, .5), rgba(6, 182, 212, .45) 50%, rgba(219, 39, 119, .45)) border-box;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .12);
}

/* ---- 2. FAQ 手风琴：悬停标题点亮 + 箭头随动 ---- */
.faq-item { transition: border-color .2s, box-shadow .2s; }
.faq-item summary { transition: color .2s, padding-left .2s; }
.faq-item summary:hover { color: var(--accent); padding-left: 6px; }
[data-theme="light"] .faq-item summary:hover { color: var(--accent); }

/* ---- 3. 返回顶部：品牌渐变底 + 辉光 ---- */
.back-top {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(135deg, rgba(139, 92, 246, .55), rgba(34, 211, 238, .45)) border-box;
  box-shadow: 0 4px 16px rgba(139, 92, 246, .22);
}
.back-top:hover { box-shadow: 0 6px 22px rgba(139, 92, 246, .4); }
[data-theme="light"] .back-top {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(124, 58, 237, .5), rgba(6, 182, 212, .45)) border-box;
}

/* ---- 4. 头部语言/主题胶囊按钮：悬停点亮 ---- */
.lang-btn, .theme-btn {
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.lang-btn:hover, .theme-btn:hover {
  border-color: rgba(139, 92, 246, .55);
  background: rgba(139, 92, 246, .1);
  box-shadow: 0 4px 14px rgba(139, 92, 246, .18);
}
[data-theme="light"] .lang-btn:hover, [data-theme="light"] .theme-btn:hover {
  border-color: rgba(124, 58, 237, .5);
  background: rgba(124, 58, 237, .07);
}

/* ---- 5. 文档页按钮（doc-btn）与更多工具按钮（btn-ghost）辉光 ---- */
.doc-btn, .btn-ghost { transition: transform .15s, box-shadow .2s, border-color .2s; }
.doc-btn:hover, .btn-ghost:hover { box-shadow: 0 8px 22px rgba(139, 92, 246, .22); }
[data-theme="light"] .doc-btn:hover, [data-theme="light"] .btn-ghost:hover { box-shadow: 0 8px 20px rgba(124, 58, 237, .15); }

/* ---- 6. 编辑器工具条按钮：悬停描边点亮 ---- */
.tool-btn { transition: border-color .18s, background .18s, transform .12s; }
.tool-btn:hover { border-color: rgba(139, 92, 246, .5); }
.tool-btn:active { transform: scale(.94); }

/* ---- 7. 分类芯片（seg-btn / mini-btn）悬停描边 ---- */
.seg-btn, .mini-btn { transition: border-color .18s, background .18s, color .18s; }
.seg-btn:not(.on):hover, .mini-btn:not(.on):hover { border-color: rgba(139, 92, 246, .45); color: var(--text); }

/* ---- 8. 数字统计强调：悬停轻微放大 ---- */
.stat b { transition: transform .2s; }
.stat:hover b { transform: translateY(-2px); }

/* ---- 9. 打印隔离补充 ---- */
@media print {
  .hero-badge, .back-top { box-shadow: none !important; }
  .lang-btn, .theme-btn { display: none !important; }
}

/* ============================================================
   R237 深度美化第三层（导航动效 · 文档标题 · 细节收口）
   ============================================================ */

/* ---- 1. 顶部导航：悬停渐变下划线滑入 ---- */
.site-nav a {
  position: relative; padding-bottom: 3px;
  background-image: linear-gradient(90deg, #8b5cf6, #22d3ee 55%, #f472b6);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: color .2s, background-size .25s ease;
}
.site-nav a:hover { color: var(--text); background-size: 100% 2px; }
.site-nav a[aria-current="page"] { background-size: 100% 2px; }
[data-theme="light"] .site-nav a { background-image: linear-gradient(90deg, #7c3aed, #06b6d4 55%, #db2777); }

/* ---- 2. 文档页大标题：与首页区块标题同款渐变装饰条 ---- */
.doc-title { position: relative; padding-bottom: 12px; }
.doc-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #22d3ee 55%, #f472b6);
}
[data-theme="light"] .doc-title::after { background: linear-gradient(90deg, #7c3aed, #06b6d4 55%, #db2777); }

/* ---- 3. Hero 大标题第二行：品牌渐变微光流动 ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero .grad-text { background-size: 200% 100%; animation: r237-shine 6s linear infinite; }
  @keyframes r237-shine { to { background-position: 200% 0; } }
}

/* ---- 4. 首页 Badge 与 hero 间距节奏微调 ---- */
.hero-stats { margin-top: 34px; }

/* ---- 5. 编辑器：side-panel 分组标题字距 ---- */
.side-panel .fld-lab span { letter-spacing: .02em; }

/* ---- 6. 模块卡片 hover 图标微旋转（趣味反馈） ---- */
.add-item:hover .add-ico { transform: rotate(-4deg) scale(1.06); }
.add-ico { transition: transform .2s; }

/* ---- 7. 表格/图层行悬停（inspector 列表） ---- */
.layer-row:hover { background: rgba(139, 92, 246, .08); }

/* ---- 8. 打印隔离补充 ---- */
@media print {
  .doc-title::after { display: none !important; }
  .site-nav a { background-image: none !important; }
}

/* ============================================================
   R238 深度美化第四层（主题切换柔化 · 画布空状态 · 数字卡）
   ============================================================ */

/* ---- 1. 主题切换柔化：背景色过渡而非瞬间跳变 ---- */
body, .site-header, .site-footer, .doc-card, .show-card, .feat-card, .add-item, .tpl-item {
  transition-property: background-color, background, border-color, box-shadow, transform;
  transition-duration: .3s;
}

/* ---- 2. 模板卡缩略图悬停微缩放 ---- */
.tpl-item canvas { transition: transform .25s ease; }
.tpl-item:hover canvas { transform: scale(1.02); }

/* ---- 3. About 数字卡：渐变描边卡化 ---- */
.doc-stat {
  border: 1px solid transparent;
  background:
    linear-gradient(#141728, #141728) padding-box,
    linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(34, 211, 238, .25)) border-box;
  transition: transform .2s, box-shadow .2s;
}
.doc-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, .2); }
[data-theme="light"] .doc-stat {
  background:
    linear-gradient(#f0f1f8, #f0f1f8) padding-box,
    linear-gradient(135deg, rgba(124, 58, 237, .3), rgba(6, 182, 212, .22)) border-box;
}

/* ---- 4. 打印隔离补充 ---- */
@media print {
  .doc-stat { background: #fff !important; border-color: #ccc !important; }
  .tpl-item canvas { transform: none !important; }
}

/* ============================================================
   R239 深度美化第五层（卡片体系收口：FAQ 条目 + 三步卡）
   ============================================================ */

/* ---- 1. FAQ 条目纳入渐变描边卡片体系 ---- */
.faq-item {
  border-color: transparent;
  background:
    linear-gradient(#141728, #141728) padding-box,
    linear-gradient(145deg, rgba(139, 92, 246, .24), rgba(34, 211, 238, .12) 50%, rgba(244, 114, 182, .16)) border-box;
}
.faq-item[open] {
  background:
    linear-gradient(#141728, #141728) padding-box,
    linear-gradient(145deg, rgba(139, 92, 246, .45), rgba(34, 211, 238, .3) 50%, rgba(244, 114, 182, .32)) border-box;
}
[data-theme="light"] .faq-item {
  background:
    linear-gradient(#f0f1f8, #f0f1f8) padding-box,
    linear-gradient(145deg, rgba(124, 58, 237, .22), rgba(6, 182, 212, .12) 50%, rgba(219, 39, 119, .15)) border-box;
}
[data-theme="light"] .faq-item[open] {
  background:
    linear-gradient(#f0f1f8, #f0f1f8) padding-box,
    linear-gradient(145deg, rgba(124, 58, 237, .42), rgba(6, 182, 212, .28) 50%, rgba(219, 39, 119, .3)) border-box;
}

/* ---- 2. 首页三步卡（how-card）纳入渐变描边体系 ---- */
.how-card {
  border-color: transparent;
  background:
    linear-gradient(#141728, #141728) padding-box,
    linear-gradient(145deg, rgba(139, 92, 246, .3), rgba(34, 211, 238, .14) 45%, rgba(244, 114, 182, .22)) border-box;
}
.how-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(139, 92, 246, .26);
}
[data-theme="light"] .how-card {
  background:
    linear-gradient(#f0f1f8, #f0f1f8) padding-box,
    linear-gradient(145deg, rgba(124, 58, 237, .26), rgba(6, 182, 212, .13) 45%, rgba(219, 39, 119, .18)) border-box;
}
[data-theme="light"] .how-card:hover { box-shadow: 0 14px 32px rgba(124, 58, 237, .18); }

/* ---- 3. 打印隔离补充 ---- */
@media print {
  .faq-item, .how-card { background: #fff !important; border-color: #ccc !important; box-shadow: none !important; }
}

/* ============================================================
   R240 深度美化第六层（弹窗 · 通知 · 属性分组）
   ============================================================ */

/* ---- 1. 弹窗/表情面板/帮助卡：品牌渐变描边 ---- */
.yk-modal, .emoji-pick-panel, .help-card {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(145deg, rgba(139, 92, 246, .45), rgba(34, 211, 238, .3) 50%, rgba(244, 114, 182, .3)) border-box;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(139, 92, 246, .12);
}
[data-theme="light"] .yk-modal, [data-theme="light"] .emoji-pick-panel, [data-theme="light"] .help-card {
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(145deg, rgba(124, 58, 237, .4), rgba(6, 182, 212, .28) 50%, rgba(219, 39, 119, .26)) border-box;
  box-shadow: 0 18px 44px rgba(30, 20, 70, .22);
}

/* ---- 2. Toast 通知：渐变描边 + 顶部辉光 ---- */
.toast {
  border-color: transparent;
  background:
    linear-gradient(rgba(20, 24, 44, .96), rgba(20, 24, 44, .96)) padding-box,
    linear-gradient(120deg, rgba(139, 92, 246, .6), rgba(34, 211, 238, .5)) border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 24px rgba(139, 92, 246, .18);
}
[data-theme="light"] .toast {
  background:
    linear-gradient(rgba(255, 255, 255, .97), rgba(255, 255, 255, .97)) padding-box,
    linear-gradient(120deg, rgba(124, 58, 237, .5), rgba(6, 182, 212, .45)) border-box;
  box-shadow: 0 10px 26px rgba(30, 20, 70, .2);
}

/* ---- 3. 属性面板分组：标题行悬停 + 分组底色分层 ---- */
.ins-grp { border-radius: 10px; }
.grp-h { transition: color .18s, background .18s; border-radius: 8px; }
.grp-h:hover { color: var(--text); background: rgba(139, 92, 246, .08); }
[data-theme="light"] .grp-h:hover { background: rgba(124, 58, 237, .06); }

/* ---- 4. 属性面板数值输入聚焦环（与全局 --ring 一致） ---- */
.ins-flex input:focus, .fld input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ======================================================================
   R286 美化叠加层：色板类按钮键盘焦点可见 + 内联输入聚焦环
   根因：.scheme-chip / .bg-preset 写死 outline:none 却没有任何替代焦点样式，
        键盘 Tab 经过这 24 个纯色块按钮时零视觉指示（WCAG 2.4.7 失败）。
   ====================================================================== */
.scheme-chip:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), 0 1px 3px rgba(0, 0, 0, .12);
  transform: translateY(-2px) scale(1.06);
}
.scheme-chip.on:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--ring);
}
.bg-preset:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
  transform: translateY(-2px);
}
.bg-preset.on:focus-visible {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--ring);
}
/* 内联重命名 / 缩放输入：已有 accent 描边，补聚焦环让激活态更明确 */
.tpl-name-inp:focus, .zoom-input:focus, .layer-rename:focus {
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---- R300 全站卡片图片/图标视觉统一 ----
   统一首页 show-card / feat-card / how-card 的图标容器，以及模板缩略图的
   圆角/阴影/悬浮语言。增量 overlay：保留既有布局与配色逻辑，叠加一致的
   容器半径、深度阴影、悬浮提升。 */
.show-ico, .feat-ico, .how-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; font-size: 26px; line-height: 1;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .2s ease, border-color .2s, background .2s, box-shadow .2s;
}
.how-ico {
  margin-bottom: 14px;
  background: var(--panel-2); border: 1px solid var(--line);
}

/* ---- R309 polish：图标容器美化（vivid gradient + 彩色 ambient glow + 内部顶光） ----
   保留 6n+X 主题色梯度（紫/青/粉/橙/绿/靛），叠加更立体的渐变与发光。 */
.show-card:nth-child(6n+1) .show-ico,
.feat-card:nth-child(6n+1) .feat-ico,
.how-card:nth-child(6n+1) .how-ico {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(124, 58, 237, .42) 0%, rgba(124, 58, 237, .24) 50%, rgba(124, 58, 237, .08) 100%);
  border-color: rgba(124, 58, 237, .48);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, .12),
    0 6px 20px -4px rgba(124, 58, 237, .38),
    0 2px 6px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.show-card:nth-child(6n+2) .show-ico,
.feat-card:nth-child(6n+2) .feat-ico,
.how-card:nth-child(6n+2) .how-ico {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(14, 165, 233, .42) 0%, rgba(14, 165, 233, .24) 50%, rgba(14, 165, 233, .08) 100%);
  border-color: rgba(14, 165, 233, .48);
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, .12),
    0 6px 20px -4px rgba(14, 165, 233, .38),
    0 2px 6px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.show-card:nth-child(6n+3) .show-ico,
.feat-card:nth-child(6n+3) .feat-ico,
.how-card:nth-child(6n+3) .how-ico {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(236, 72, 153, .42) 0%, rgba(236, 72, 153, .24) 50%, rgba(236, 72, 153, .08) 100%);
  border-color: rgba(236, 72, 153, .48);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, .12),
    0 6px 20px -4px rgba(236, 72, 153, .38),
    0 2px 6px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.show-card:nth-child(6n+4) .show-ico,
.feat-card:nth-child(6n+4) .feat-ico,
.how-card:nth-child(6n+4) .how-ico {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(245, 158, 11, .42) 0%, rgba(245, 158, 11, .24) 50%, rgba(245, 158, 11, .08) 100%);
  border-color: rgba(245, 158, 11, .48);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, .12),
    0 6px 20px -4px rgba(245, 158, 11, .38),
    0 2px 6px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.show-card:nth-child(6n+5) .show-ico,
.feat-card:nth-child(6n+5) .feat-ico,
.how-card:nth-child(6n+5) .how-ico {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(16, 185, 129, .42) 0%, rgba(16, 185, 129, .24) 50%, rgba(16, 185, 129, .08) 100%);
  border-color: rgba(16, 185, 129, .48);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, .12),
    0 6px 20px -4px rgba(16, 185, 129, .38),
    0 2px 6px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.show-card:nth-child(6n+6) .show-ico,
.feat-card:nth-child(6n+6) .feat-ico,
.how-card:nth-child(6n+6) .how-ico {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(99, 102, 241, .42) 0%, rgba(99, 102, 241, .24) 50%, rgba(99, 102, 241, .08) 100%);
  border-color: rgba(99, 102, 241, .48);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, .12),
    0 6px 20px -4px rgba(99, 102, 241, .38),
    0 2px 6px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* 统一三类卡片图标的悬浮提升（R309 加强：彩色 brand 辉光） */
.show-card:hover .show-ico,
.feat-card:hover .feat-ico,
.how-card:hover .how-ico {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, .18),
    0 12px 28px -6px rgba(124, 58, 237, .48),
    0 4px 10px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  border-color: var(--accent);
}

/* 模板缩略图：圆角/阴影与图标容器对齐 */
.tpl-item canvas {
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.tpl-item:hover canvas {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

/* ---- R301 静态页（faq/tutorial/about/terms/privacy）doc-title 文本居中 ----
   原本 .doc-title 默认 text-align:start（左），但其 ::after 渐变条已用 left:50% 居中，
   标题与渐变条左右错位、视觉不对称；统一改为 text-align:center，让标题与渐变条对齐。*/
.doc-title { text-align: center; }

/* ---- R303/R309 全站卡片图标统一为线性 SVG（R309 用规范 Lucide 风线条重绘全部 21 卡位，合并此前重复块）----
   SVG stroke=currentColor, 深色/浅色主题均自动适配文本色; 容器渐变/圆角/阴影保持 R300/R303 不变。 */
:root {
  --svg-puzzle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%209h18M9%203v18%27%2F%3E%3C%2Fsvg%3E");
  --svg-cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2020h9%27%2F%3E%3Cpath%20d%3D%27M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4Z%27%2F%3E%3C%2Fsvg%3E");
  --svg-download: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%2F%3E%3Cpath%20d%3D%27M5%2021h14%27%2F%3E%3C%2Fsvg%3E");
  --svg-blocks: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E");
  --svg-pen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17%203a2.83%202.83%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5Z%27%2F%3E%3C%2Fsvg%3E");
  --svg-palette: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%202.5%202.5%200%200%200%202.5-2.5c0-.6-.2-1.2-.7-1.6-.4-.5-.7-1-.7-1.6A2.5%202.5%200%200%201%2015.5%2014H17a5%205%200%200%200%205-5c0-4.4-4-8-10-8z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%2711%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2711%27%20r%3D%271%27%2F%3E%3C%2Fsvg%3E");
  --svg-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%2710.5%27%20r%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M21%2016l-5-5-4%204-3-3-5%205%27%2F%3E%3C%2Fsvg%3E");
  --svg-upload: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021V9%27%2F%3E%3Cpath%20d%3D%27M7%2014l5-5%205%205%27%2F%3E%3Cpath%20d%3D%27M5%203h14%27%2F%3E%3C%2Fsvg%3E");
  --svg-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v6c0%205-3.5%208-7%209-3.5-1-7-4-7-9V6z%27%2F%3E%3Cpath%20d%3D%27M9%2012l2%202%204-4%27%2F%3E%3C%2Fsvg%3E");
  --svg-text: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207V4h16v3%27%2F%3E%3Cpath%20d%3D%27M9%2020h6%27%2F%3E%3Cpath%20d%3D%27M12%204v16%27%2F%3E%3C%2Fsvg%3E");
  --svg-barchart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203v18h18%27%2F%3E%3Cpath%20d%3D%27M8%2017V9%27%2F%3E%3Cpath%20d%3D%27M13%2017V5%27%2F%3E%3Cpath%20d%3D%27M18%2017v-4%27%2F%3E%3C%2Fsvg%3E");
  --svg-flow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%275%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2719%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M8.6%2013.5l6.8%204M15.4%206.5l-6.8%204%27%2F%3E%3C%2Fsvg%3E");
  --svg-briefcase: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%208V6a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%27%2F%3E%3Cpath%20d%3D%27M3%2013h18%27%2F%3E%3C%2Fsvg%3E");
  --svg-brush: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18.5%202.5a2.12%202.12%200%200%201%203%203L10%2017l-4%201%201-4z%27%2F%3E%3Cpath%20d%3D%27M14%206l3%203%27%2F%3E%3Cpath%20d%3D%27M3%2021l6-6%27%2F%3E%3C%2Fsvg%3E");
  --svg-layers: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l9%205-9%205-9-5z%27%2F%3E%3Cpath%20d%3D%27M3%2013l9%205%209-5%27%2F%3E%3C%2Fsvg%3E");
  --svg-smartphone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%277%27%20y%3D%273%27%20width%3D%2710%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M11%2018h2%27%2F%3E%3C%2Fsvg%3E");
  --svg-trending: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2017l6-6%204%204%208-8%27%2F%3E%3Cpath%20d%3D%27M17%207h4v4%27%2F%3E%3C%2Fsvg%3E");
  --svg-cart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203h2l2.4%2012.4a1%201%200%200%200%201%20.8h8.8a1%201%200%200%200%201-.8L21%207H6%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2720%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2720%27%20r%3D%271%27%2F%3E%3C%2Fsvg%3E");
  --svg-grad: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%209l10-5%2010%205-10%205z%27%2F%3E%3Cpath%20d%3D%27M6%2011v5l6%203%206-3v-5%27%2F%3E%3Cpath%20d%3D%27M22%209v6%27%2F%3E%3C%2Fsvg%3E");
  --svg-tag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207v5l9%209%205-5-9-9z%27%2F%3E%3Cpath%20d%3D%27M7%207h.01%27%2F%3E%3C%2Fsvg%3E");
  --svg-sparkles: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l1.8%204.8L18%209l-4.2%201.2L12%2015l-1.8-4.8L6%209l4.2-1.2z%27%2F%3E%3Cpath%20d%3D%27M19%2014l.9%202.4L22%2017l-2.1.6L19%2020l-.9-2.4L16%2017l2.1-.6z%27%2F%3E%3C%2Fsvg%3E");
}
.show-ico, .feat-ico, .how-ico { font-size: 0 !important; color: transparent; }
.show-ico::before, .feat-ico::before, .how-ico::before {
  content: ''; display: block; width: 28px; height: 28px;
  background: var(--svg-ico, none) center/contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
/* how-card 3 steps */
.how-card:nth-child(1) .how-ico { --svg-ico: var(--svg-puzzle); }
.how-card:nth-child(2) .how-ico { --svg-ico: var(--svg-cursor); }
.how-card:nth-child(3) .how-ico { --svg-ico: var(--svg-download); }
/* feat-card 6 features */
.feat-card:nth-child(1) .feat-ico { --svg-ico: var(--svg-blocks); }
.feat-card:nth-child(2) .feat-ico { --svg-ico: var(--svg-pen); }
.feat-card:nth-child(3) .feat-ico { --svg-ico: var(--svg-palette); }
.feat-card:nth-child(4) .feat-ico { --svg-ico: var(--svg-image); }
.feat-card:nth-child(5) .feat-ico { --svg-ico: var(--svg-upload); }
.feat-card:nth-child(6) .feat-ico { --svg-ico: var(--svg-shield); }
/* show-card 12 categories */
.show-card:nth-child(1) .show-ico { --svg-ico: var(--svg-text); }
.show-card:nth-child(2) .show-ico { --svg-ico: var(--svg-barchart); }
.show-card:nth-child(3) .show-ico { --svg-ico: var(--svg-flow); }
.show-card:nth-child(4) .show-ico { --svg-ico: var(--svg-briefcase); }
.show-card:nth-child(5) .show-ico { --svg-ico: var(--svg-brush); }
.show-card:nth-child(6) .show-ico { --svg-ico: var(--svg-layers); }
.show-card:nth-child(7) .show-ico { --svg-ico: var(--svg-smartphone); }
.show-card:nth-child(8) .show-ico { --svg-ico: var(--svg-trending); }
.show-card:nth-child(9) .show-ico { --svg-ico: var(--svg-cart); }
.show-card:nth-child(10) .show-ico { --svg-ico: var(--svg-grad); }
.show-card:nth-child(11) .show-ico { --svg-ico: var(--svg-tag); }
.show-card:nth-child(12) .show-ico { --svg-ico: var(--svg-sparkles); }
/* R308: 防采集克隆(不影响用户体验) —— 仅禁用图片/画布被拖拽另存为, 不禁用右键/文本选择/弹窗, 用户零感知; 整站克隆防护由部署层 _headers 的 frame-ancestors none 负责 */
img, canvas { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; }