/* ============================================================
   乙给简评档案 v4 · Bento 拼贴手帐
   #preview 固定 1080px；屏幕端 transform:scale；导出抓同一 DOM
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --accent: #d4567f;
  --text: #4a2c3a;
}

body {
  font-family: var(--font);
  background: linear-gradient(135deg, #fdeef4 0%, #f6f0ff 50%, #eaf2ff 100%);
  color: var(--text);
  min-height: 100vh;
  /* 中文整词不断行，英文长词才断 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1,h2,h3 { font-weight: 900; line-height: 1.3; }
input, textarea, button, select { font-family: inherit; }
select { width: 100%; padding: 7px 10px; border: 1px solid #ffd9e6; border-radius: 10px; background: #fffafc; font-size: 13px; outline: none; }
.hidden { display: none !important; }

/* ========== 顶栏 ========== */
.topbar { text-align: center; padding: 16px 16px 8px; max-width: 1500px; margin: 0 auto; }
.topbar h1 {
  font-size: 24px; letter-spacing: 1px;
  background: linear-gradient(90deg, #d4567f, #9b6dd6, #4a90d9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.topbar-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; position: relative; flex-wrap: wrap; }
.subtitle { font-size: 13px; color: #b08a96; }
.draft-actions { display: flex; gap: 8px; }
@media (min-width: 900px) { .draft-actions { position: absolute; right: 0; top: 0; } }

.btn-ghost { padding: 6px 14px; background: #fff; color: #d4567f; border: 1px solid #ffc6d6; border-radius: 16px; cursor: pointer; font-size: 12px; transition: all .15s; }
.btn-ghost:hover { background: #fff0f6; transform: translateY(-1px); }
.btn-ghost.btn-block { width: 100%; margin-top: 10px; }

.workspace { display: flex; gap: 16px; padding: 12px 16px 24px; max-width: 1500px; margin: 0 auto; align-items: flex-start; }

/* ========== 左侧面板 ========== */
.panel-left { width: 430px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 4px; }
.panel-left::-webkit-scrollbar { width: 8px; }
.panel-left::-webkit-scrollbar-thumb { background: #f3c6d8; border-radius: 4px; }

.card { background: #fff; border: 1px solid #ffe0ea; border-radius: 16px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(212,86,127,.07); }
.card h2 { font-size: 15px; margin-bottom: 10px; color: #d4567f; }
.field { margin-bottom: 10px; } .field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 12px; color: #b08a96; margin-bottom: 4px; }
input[type="text"], textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #ffe0ea; border-radius: 10px;
  font-size: 13px; outline: none; background: #fffafc; color: var(--text);
  word-break: keep-all; overflow-wrap: break-word;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,86,127,.1); }
textarea { resize: vertical; }
.hint { font-size: 11px; color: #c08aa0; margin-top: 6px; line-height: 1.6; }
.row { display: flex; gap: 10px; } .row .col { flex: 1; }
.bg-choice, .radio-choice { font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.radio-row { display: flex; gap: 20px; flex-wrap: wrap; }

.search-results { list-style: none; max-height: 240px; overflow-y: auto; border: 1px solid #ffe0ea; border-radius: 10px; margin-top: 8px; display: none; background: #fff; }
.search-results.show { display: block; }
.search-results li { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #ffeef3; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.search-results li:hover { background: #fff5f9; }
.search-results li:last-child { border-bottom: none; }
.search-results .thumb { width: 30px; height: 38px; object-fit: cover; border-radius: 4px; background: #ffeef3; }
.search-results .sr-title { font-weight: 600; }
.search-results .sr-cn-badge { font-size: 10px; color: #fff; background: #d4567f; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.search-results .meta { font-size: 11px; color: #c08aa0; margin-top: 1px; }

/* 评级按钮 */
.rating-list { display: flex; flex-wrap: wrap; gap: 7px; }
.rating-opt { padding: 7px 13px; border-radius: 14px; border: 1.5px solid #f0d4df; background: #fffafc; cursor: pointer; font-size: 13px; font-weight: 700; color: #9a6a7c; transition: all .15s; }
.rating-opt:hover { transform: translateY(-1px); }
.rating-opt.active { color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.rating-opt.wide { font-size: 11.5px; font-weight: 600; padding: 7px 10px; }
.rating-opt[data-grade="C"].active     { background: linear-gradient(135deg,#9e9e9e,#757575); }
.rating-opt[data-grade="B"].active, .rating-opt[data-grade="B+"].active { background: linear-gradient(135deg,#5c9fd6,#3a7cb8); }
.rating-opt[data-grade="A"].active, .rating-opt[data-grade="A+"].active { background: linear-gradient(135deg,#b06ae0,#8a44c8); }
.rating-opt[data-grade="S"].active, .rating-opt[data-grade="S+"].active { background: linear-gradient(135deg,#f5c542,#e8961e); color: #fffdf0; }
.rating-opt[data-grade="rec-meh"].active { background: linear-gradient(135deg,#3fb8af,#2a9d94); }
.rating-opt[data-grade="guilty"].active  { background: linear-gradient(135deg,#e86a92,#d4436f); }

/* 头像 */
.dialog-maker { display: flex; gap: 12px; align-items: flex-start; }
.avatar-maker { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avatar-preview { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--accent); background: #fff0f5; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-btn { font-size: 11px; padding: 4px 10px; background: var(--accent); color: #fff; border-radius: 12px; cursor: pointer; white-space: nowrap; }

/* 维度编辑区 */
.dim-count { font-size: 12px; color: #c08aa0; font-weight: normal; }
.dim-warning { font-size: 12px; color: #e05a7a; margin-bottom: 8px; display: none; }
.dim-warning.show { display: block; }
.dim-tip { font-size: 11px; color: #c7a0b0; margin-bottom: 8px; line-height: 1.5; }
.dim-header { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: #fff5f9; border-radius: 8px; cursor: pointer; }
.dim-header input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.dim-name { flex: 1; font-size: 13px; white-space: nowrap; }
.dim-major-score { font-size: 11px; color: #d4567f; font-weight: 700; min-width: 34px; text-align: right; }
.dim-reset, .sub-reset { background: none; border: none; cursor: pointer; color: #d9a8ba; font-size: 13px; padding: 0 2px; line-height: 1; }
.dim-reset:hover, .sub-reset:hover { color: #e05a7a; }
.dim-del { background: none; border: none; color: #e05a7a; cursor: pointer; font-size: 14px; }
.sub-items-box { display: none; padding: 8px 10px 8px 30px; gap: 8px 14px; flex-wrap: wrap; }
.dim-item.checked .sub-items-box { display: flex; }
.sub-item { font-size: 12px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.sub-item.sub-major { width: 100%; }
.star { cursor: pointer; color: #f0d0dc; font-size: 16px; line-height: 1; user-select: none; }
.star.on { color: #f5a623; }
.manual-tag { font-size: 9px; background: #b06ae0; color: #fff; border-radius: 4px; padding: 1px 4px; }
.custom-dim { display: flex; gap: 6px; margin-top: 10px; }
.custom-dim input { flex: 1; }
.btn-small { padding: 6px 12px; background: var(--accent); color: #fff; border: none; border-radius: 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }

/* ========== 右侧预览容器 ========== */
.panel-right { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: 12px; }
.preview-wrap { width: 560px; max-width: calc(100vw - 480px); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(80,50,60,.22); background: #f2ead9; }

#preview {
  width: 1080px; position: relative; overflow: hidden;
  transform-origin: top left;
  padding: 44px 40px 36px;
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 背景层 ---------- */
.ly-bg { position: absolute; inset: 0; z-index: 0; background: var(--paper); }
/* 纸张颗粒：真 DOM 层 */
.ly-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--paper-grain);
}

/* ---------- 拼贴装饰层 ---------- */
.ly-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dc { position: absolute; border-radius: 6px; background: var(--dc-color); box-shadow: 0 2px 10px rgba(80,60,40,.12); }
.dc-1 { width: 210px; height: 150px; left: -60px; top: 130px; transform: rotate(-12deg); }
.dc-2 { width: 170px; height: 170px; right: -50px; top: 60px;  transform: rotate(14deg); border-radius: 50%; }
.dc-3 { width: 240px; height: 120px; left: 60%; bottom: 120px; transform: rotate(6deg); }
.dc-4 { width: 130px; height: 130px; left: -30px; bottom: 200px; transform: rotate(-18deg); border-radius: 50%; }
.dc-circle { display: none; }

.paper-patch { position: absolute; border-radius: 8px; box-shadow: 0 3px 12px rgba(80,60,40,.1); opacity: .8; }
.patch-grid { width: 220px; height: 150px; right: 40px; top: 42%; transform: rotate(8deg); background-image: var(--grid-texture); background-color: var(--patch-bg); }
.patch-dots { width: 180px; height: 150px; left: 30px; bottom: 40px; transform: rotate(-9deg); background-image: var(--dots-texture); background-color: var(--patch-bg2); }

.tape {
  position: absolute; width: 110px; height: 30px;
  background: var(--tape-color);
  box-shadow: 0 2px 6px rgba(80,60,40,.15);
}
.tape-1 { top: 26px; left: 44%; transform: rotate(-4deg); }
.tape-2 { bottom: 70px; right: 8%; transform: rotate(6deg); }

.glyph { position: absolute; color: var(--glyph-color); font-weight: 900; }
.glyph-1 { top: 90px;  left: 36%; font-size: 26px; transform: rotate(-14deg); }
.glyph-2 { top: 300px; right: 6%; font-size: 20px; transform: rotate(20deg); }
.glyph-3 { bottom: 260px; right: 30%; font-size: 18px; transform: rotate(10deg); }
.glyph-4 { bottom: 90px; left: 40%; font-size: 22px; transform: rotate(-8deg); }

/* 主题装饰横条（真 DOM SVG，按主题只显示一组，绝不叠加） */
.meander { position: absolute; left: 0; right: 0; width: 100%; height: 34px; color: var(--meander-color); display: none; }
.meander { top: 10px; }
.meander-b { top: auto; bottom: 10px; }
.theme-china .meander { display: block; opacity: .32; }

.orn-strip {
  position: absolute; left: 0; right: 0; width: 100%; height: 28px;
  display: none; color: var(--orn-color, transparent);
}
.orn-top { top: 8px; }
.orn-bot { top: auto; bottom: 8px; }
.theme-gothic .gothic-strip { display: block; opacity: .55; }
.theme-tech .tech-strip { display: block; opacity: .65; }

/* ---------- 外围细边框 ---------- */
.ly-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ly-frame.off { display: none; }
.ly-frame .frame-edge { position: absolute; background: var(--frame-color); border-radius: 4px; }
.ly-frame .frame-top    { left: 16px; right: 16px; top: 16px;    height: 6px; }
.ly-frame .frame-bottom { left: 16px; right: 16px; bottom: 16px; height: 6px; }
.ly-frame .frame-left   { top: 16px; bottom: 16px; left: 16px;  width: 6px; }
.ly-frame .frame-right  { top: 16px; bottom: 16px; right: 16px; width: 6px; }

/* ---------- 内容层 ---------- */
.ly-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 26px; }

/* ① 顶部 hero：拍立得 + 标题 + 印章（视觉重心，封面与标题加大） */
.pv-hero { display: flex; align-items: center; gap: 42px; }

.polaroid {
  position: relative; flex-shrink: 0;
  width: 290px; background: #fff;
  padding: 15px 15px 0; border-radius: 4px;
  box-shadow: 0 12px 28px var(--sh-cover, rgba(70,50,50,.25));
  transform: rotate(-2.5deg);
}
.tape-polaroid {
  position: absolute; top: -14px; left: 50%; margin-left: -60px;
  width: 120px; height: 32px; background: var(--tape-color);
  transform: rotate(-3deg); box-shadow: 0 2px 6px rgba(80,60,40,.18);
}
.polaroid-photo {
  position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 2px; overflow: hidden;
  background: #f1ebe2;
}
.polaroid-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid-empty {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #b9a89a; font-size: 34px; background: #f4eee6;
}
.polaroid-empty small { font-size: 11px; color: #b3a294; white-space: nowrap; padding: 0 8px; }
.polaroid.no-cover .polaroid-photo img { display: none; }
.polaroid.no-cover .polaroid-empty { display: flex; }
.polaroid figcaption {
  text-align: center; font-size: 15px; color: #8a7a68; padding: 13px 4px 15px;
  font-family: var(--hand, "Comic Sans MS", "PingFang SC", cursive);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hero-text { flex: 1; min-width: 0; padding-top: 10px; }
.hero-kicker {
  display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: 2px;
  color: var(--kicker-color); background: var(--kicker-bg);
  padding: 6px 18px; border-radius: 4px; transform: rotate(-1deg);
  box-shadow: 0 2px 6px rgba(80,60,40,.12);
}
.hero-title {
  font-size: 74px; line-height: 1.18; font-weight: 900; color: var(--ink);
  margin: 18px 0 14px; letter-spacing: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.theme-china .hero-title { font-family: var(--serif); }
.hero-meta { font-size: 19px; color: var(--meta-color); line-height: 2; }
.hero-sub { font-size: 17px; color: var(--meta-color); margin-top: 8px; line-height: 1.8; }

/* 印章（导出兼容：纯色描边/实底/普通阴影，不用 inset shadow 与混合模式） */
.stamp {
  position: relative;
  flex-shrink: 0; width: 128px; height: 128px; border-radius: 50%;
  border: 5px solid var(--stamp-color);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transform: rotate(-10deg);
  color: var(--stamp-color);
  background: var(--stamp-bg);
  box-shadow: 0 5px 14px var(--sh-stamp, rgba(40,20,30,.22));
  align-self: flex-start; margin-top: 6px;
}
.stamp .st-ring {
  position: absolute; width: 112px; height: 112px; border-radius: 50%;
  border: 1.5px solid var(--stamp-color); opacity: .7;
}
.stamp .st-in { position: relative; z-index: 1; line-height: 1.1; }
.stamp .st-grade { display: block; font-size: 52px; font-weight: 900; font-family: var(--serif); }
.stamp .st-sub { display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-top: 2px; }
.stamp.stamp-wide {
  width: 148px; height: 148px; border-radius: 14px;
}
.stamp.stamp-wide .st-ring { border-radius: 8px; width: 130px; height: 130px; }
.stamp.stamp-wide .st-in { font-size: 19px; font-weight: 900; line-height: 1.45; font-family: var(--serif); padding: 0 10px; }
.stamp.stamp-wide .st-in small { display: block; font-size: 15px; }

/* ② 中部 bento：雷达卡纸 + 便签墙（中段整体收窄收紧，空间让给头部） */
.pv-board { display: flex; align-items: stretch; gap: 20px; }

.radar-card {
  position: relative; flex-shrink: 0; width: 300px;
  background: var(--card-paper); border-radius: 14px;
  box-shadow: 0 8px 22px var(--sh-card, rgba(70,50,50,.16));
  padding: 28px 10px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-.6deg);
}
.mini-sticker {
  position: absolute; top: -12px; left: 20px;
  background: var(--sticker-bg); color: var(--sticker-color);
  font-size: 12.5px; font-weight: 800; letter-spacing: 2px;
  padding: 4px 13px; border-radius: 4px; transform: rotate(-2deg);
  box-shadow: 0 3px 8px rgba(80,60,40,.15);
}
.radar-inner { width: 280px; height: 280px; }
.radar-inner canvas { width: 100%; height: 100%; display: block; }

.sticky-grid {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; align-content: start;
}
.sticky-note {
  position: relative;
  background: var(--note-color, #fff4c2);
  border-radius: 6px 6px 10px 10px;
  padding: 9px 12px 8px;
  box-shadow: 0 6px 14px var(--sh-sticky, rgba(90,70,50,.18));
  transform: rotate(var(--tilt, .6deg));
}
.sn-tape {
  position: absolute; top: -7px; left: 50%; margin-left: -23px;
  width: 46px; height: 15px; background: var(--tape-color); opacity: .85;
  transform: rotate(var(--tape-tilt, -2deg)); border-radius: 2px;
}
.sn-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 14.5px; font-weight: 800; color: var(--ink);
  border-bottom: 1.5px dashed var(--hairline); padding-bottom: 4px; margin-bottom: 5px;
}
.sn-title .sn-total { font-size: 12.5px; color: var(--sn-star); white-space: nowrap; letter-spacing: 1px; }
.sn-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--sub-color); padding: 2px 0; line-height: 1.5;
}
.sn-row .sn-stars { white-space: nowrap; letter-spacing: 1px; color: var(--sn-star); font-size: 12px; }
.sn-row.sn-empty { opacity: .5; }
.sn-manual { font-size: 10px; background: #8a44c8; color: #fff; border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }

/* 便签 7 色轮换（主题变量覆盖） */
.sticky-note:nth-child(7n+1) { --note-color: var(--sn1); --tilt: -.7deg; --tape-tilt: -3deg; }
.sticky-note:nth-child(7n+2) { --note-color: var(--sn2); --tilt: .8deg;  --tape-tilt: 2deg; }
.sticky-note:nth-child(7n+3) { --note-color: var(--sn3); --tilt: -.5deg; --tape-tilt: -2deg; }
.sticky-note:nth-child(7n+4) { --note-color: var(--sn4); --tilt: .6deg;  --tape-tilt: 3deg; }
.sticky-note:nth-child(7n+5) { --note-color: var(--sn5); --tilt: -.8deg; --tape-tilt: -2deg; }
.sticky-note:nth-child(7n+6) { --note-color: var(--sn6); --tilt: .5deg;  --tape-tilt: 2deg; }
.sticky-note:nth-child(7n+7) { --note-color: var(--sn7); --tilt: -.6deg; --tape-tilt: -3deg; }

/* ③ 底部语录卡 */
.pv-note {
  position: relative;
  background: var(--note-bg);
  border: 2.5px dashed var(--note-edge);
  border-radius: 16px;
  padding: 20px 26px 22px;
  box-shadow: 0 8px 22px var(--sh-quote, rgba(70,50,50,.14));
  transform: rotate(.25deg);
}
.note-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.note-avatar {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(80,60,40,.2); background: #fff;
}
.note-avatar img { width: 100%; height: 100%; object-fit: cover; }
.note-name {
  background: var(--tape-color); color: var(--ink);
  font-size: 15px; font-weight: 800; padding: 5px 18px; border-radius: 4px;
  transform: rotate(-1.5deg); box-shadow: 0 2px 6px rgba(80,60,40,.12);
}
.note-body {
  font-size: 18px; line-height: 1.85; color: var(--ink);
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word;
}
.note-tail { position: absolute; left: 34px; bottom: -26px; width: 42px; height: 34px; filter: drop-shadow(0 3px 3px rgba(70,50,50,.1)); }

.pv-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; letter-spacing: 3px; color: var(--meta-color);
  padding: 14px 10px 0; border-top: 1.5px dashed var(--hairline); margin-top: 6px;
}

/* ④ 作品档案卡：小标签 / 档案格 */
.pv-archive {
  background: var(--card-paper);
  border-radius: 14px;
  padding: 18px 22px 20px;
  box-shadow: 0 8px 22px var(--sh-card, rgba(70,50,50,.13));
}
.arc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.arc-title {
  font-size: 15px; font-weight: 800; letter-spacing: 3px;
  color: var(--kicker-color); background: var(--kicker-bg);
  padding: 5px 16px; border-radius: 4px;
  transform: rotate(-1deg);
  box-shadow: 0 2px 6px rgba(80,60,40,.12);
}
.arc-line { flex: 1; border-top: 1.5px dashed var(--meta-color); opacity: .4; }
.arc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
}
.arc-chip {
  min-width: 0; background: var(--note-bg);
  border: 1px solid var(--dc-color);
  border-left: 4px solid var(--radar-main);
  border-radius: 8px; padding: 9px 14px 10px;
}
.arc-chip .arc-k {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--meta-color); margin-bottom: 3px;
}
.arc-chip .arc-v {
  display: block; font-size: 16.5px; font-weight: 800; color: var(--ink);
  line-height: 1.45;
}

/* ============================================================
   主题一：童话风（奶白 · 莫兰迪糖果色 · 星星）
   ============================================================ */
.theme-fairytale {
  --paper: #faf4ea;
  --ink: #5a4a52;
  --meta-color: #a48f9b;
  --card-paper: #fffdf8;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%238a7080' fill-opacity='0.05'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M22 0H0v22' fill='none' stroke='%23b8c9d9' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='2.6' fill='%23e89bb4' fill-opacity='0.6'/%3E%3C/svg%3E");
  --patch-bg: #f2f6fb; --patch-bg2: #fff4f8;
  --dc-color: #f6d9e2;
  --tape-color: rgba(255, 235, 170, .72);
  --glyph-color: #f0b849;
  --meander-color: transparent;
  --frame-color: rgba(225, 170, 190, .7);
  --kicker-bg: #ffe9f1; --kicker-color: #d4567f;
  --sticker-bg: #a8d3f0; --sticker-color: #fff;
  --radar-main: #e06a92;
  --stamp-color: #e05a7a; --stamp-bg: #fff6ef;
  --note-bg: #fffdf8; --note-edge: #f3c6d8; --sub-color: #9c8691; --sn-star: #e8961e;
  --hairline: rgba(120, 90, 105, .22);
  --sn1: #ffe3ec; --sn2: #fff2c9; --sn3: #dff0fb; --sn4: #e2f5e4; --sn5: #f6e6fb; --sn6: #ffe9d6; --sn7: #fbeef4;
}

/* ============================================================
   主题二：中华风（纯白底 · 朱红点染 · 竹/熊猫/祥云/窗棂克制点缀）
   ============================================================ */
.theme-china {
  --paper: #ffffff;
  --ink: #332c28;
  --meta-color: #9c8f84;
  --card-paper: #fffdf9;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%238a6a52' fill-opacity='0.035'%3E%3Ccircle cx='14' cy='10' r='1.2'/%3E%3Ccircle cx='52' cy='34' r='1'/%3E%3Ccircle cx='96' cy='16' r='1.3'/%3E%3Ccircle cx='128' cy='48' r='1'/%3E%3Ccircle cx='30' cy='72' r='1.1'/%3E%3Ccircle cx='78' cy='88' r='1.2'/%3E%3Ccircle cx='118' cy='76' r='0.9'/%3E%3Ccircle cx='12' cy='122' r='1.2'/%3E%3Ccircle cx='60' cy='130' r='1'/%3E%3Ccircle cx='104' cy='118' r='1.1'/%3E%3Ccircle cx='132' cy='132' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23c0392b' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%23c0392b' fill-opacity='0.25'/%3E%3C/svg%3E");
  --patch-bg: #fbf6f1; --patch-bg2: #f4f8f3;
  --dc-color: rgba(192, 57, 43, .05);
  --tape-color: rgba(192, 57, 43, .2);
  --glyph-color: #c0392b;
  --meander-color: #c0392b;
  --frame-color: rgba(192, 57, 43, .5);
  --kicker-bg: #b03a30; --kicker-color: #fff8f3;
  --sticker-bg: #4e7a55; --sticker-color: #fbfaf4;
  --radar-main: #c0392b;
  --stamp-color: #b03a30; --stamp-bg: #fff8f4;
  --note-bg: #fffdf9; --note-edge: #d59d92; --sub-color: #8a7b6f; --sn-star: #c0392b;
  --hairline: rgba(160, 60, 50, .18);
  --sh-cover: rgba(140, 60, 50, .15);
  --sh-card: rgba(150, 70, 55, .11);
  --sh-sticky: rgba(160, 80, 60, .12);
  --sh-quote: rgba(150, 70, 55, .11);
  --sh-stamp: rgba(160, 50, 45, .2);
  --sn1: #fdf2ef; --sn2: #fbf7f1; --sn3: #f2f7f2; --sn4: #fdfaf3; --sn5: #f6f1ec; --sn6: #fef7f4; --sn7: #f4f7f4;
}
.theme-china .polaroid { border: 1px solid rgba(192, 57, 43, .22); }

/* 中华风专属：竹/熊猫/祥云/窗棂（真 DOM 几何拼贴，仅边缘点缀，默认隐藏；
   全部显式 left/top + 实尺寸，规避 html2canvas 对 right/SVG 的渲染不稳） */
.cn-deco { position: absolute; display: none; pointer-events: none; z-index: 1; }
.theme-china .cn-deco { display: block; }

/* 竹：圆角茎 + 节 + 旋转针状叶（几何抽象） */
.cn-bamboo { left: 6px; top: 462px; width: 64px; height: 300px; }
.bm-stalk { position: absolute; left: 16px; top: 0; width: 12px; height: 300px; border-radius: 6px; background: #6f9a63; }
.bm-node { position: absolute; left: 14px; width: 16px; height: 4px; border-radius: 2px; background: #557f4d; }
.bm-n1 { top: 62px; } .bm-n2 { top: 136px; } .bm-n3 { top: 210px; }
.bm-leaf {
  position: absolute; width: 5px; border-radius: 3px;
  background: #7cab6e; transform-origin: bottom center;
}
.bm-l1 { left: 13px; top: 10px; height: 30px; transform: rotate(-40deg); }
.bm-l2 { left: 15px; top: 64px; height: 28px; transform: rotate(-32deg); }
.bm-l3 { left: 13px; top: 138px; height: 30px; transform: rotate(-38deg); }
.bm-l4 { left: 15px; top: 212px; height: 28px; transform: rotate(-32deg); }
.bm-l5 { left: 26px; top: 56px; height: 26px; transform: rotate(34deg); background: #6a9a5f; opacity: .85; }

/* 熊猫：黑白圆形几何 */
.cn-panda { left: 988px; top: 226px; width: 84px; height: 72px; }
.pd-ear { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #2e2a28; }
.pd-ear-l { left: 8px; top: 2px; } .pd-ear-r { left: 54px; top: 2px; }
.pd-head { position: absolute; left: 16px; top: 14px; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1.5px solid #d8d2c8; }
.pd-patch { position: absolute; width: 13px; height: 17px; border-radius: 50%; background: #2e2a28; }
.pd-patch-l { left: 24px; top: 30px; transform: rotate(-18deg); }
.pd-patch-r { left: 47px; top: 30px; transform: rotate(18deg); }
.pd-eye { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.pd-eye-l { left: 29px; top: 36px; } .pd-eye-r { left: 52px; top: 36px; }
.pd-nose { position: absolute; left: 38px; top: 49px; width: 8px; height: 6px; border-radius: 50%; background: #2e2a28; }

/* 祥云：朱红单线描边圆凸 + 纸色底座遮住内接缝 */
.cn-cloud { left: 982px; top: 188px; width: 88px; height: 34px; }
.cl-bump { position: absolute; border: 2px solid #c0392b; border-radius: 50%; background: transparent; }
.cl-bump-l { left: 0; top: 11px; width: 22px; height: 22px; }
.cl-bump-m { left: 22px; top: 2px; width: 30px; height: 30px; }
.cl-bump-r { left: 48px; top: 13px; width: 19px; height: 19px; }
.cl-base {
  position: absolute; left: 1px; bottom: 2px; width: 78px; height: 15px;
  background: var(--paper);
  border-left: 2px solid #c0392b; border-right: 2px solid #c0392b;
  border-bottom: 2px solid #c0392b; border-radius: 0 0 16px 14px;
}

/* 窗棂：红色方框 + 十字格 */
.cn-lattice { left: 1024px; top: 308px; width: 42px; height: 42px; border: 2px solid #c0392b; background: transparent; opacity: .6; }
.cn-lattice span { position: absolute; background: #c0392b; }
.lt-v1 { left: 13px; top: 2px; width: 1.5px; height: 38px; }
.lt-v2 { left: 26px; top: 2px; width: 1.5px; height: 38px; }
.lt-h1 { left: 2px; top: 13px; width: 38px; height: 1.5px; }
.lt-h2 { left: 2px; top: 26px; width: 38px; height: 1.5px; }

/* ============================================================
   主题三：美拉德（燕麦暖米底 · 焦糖/深棕/咖色/卡其/暖杏）
   ============================================================ */
.theme-vintage {
  --paper: #f1e6d3;
  --ink: #43301f;
  --meta-color: #94765a;
  --card-paper: #fbf4e7;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%235b3a1c' fill-opacity='0.06'%3E%3Ccircle cx='10' cy='12' r='1.2'/%3E%3Ccircle cx='44' cy='28' r='1'/%3E%3Ccircle cx='84' cy='10' r='1.3'/%3E%3Ccircle cx='122' cy='36' r='1.1'/%3E%3Ccircle cx='24' cy='62' r='1'/%3E%3Ccircle cx='66' cy='76' r='1.2'/%3E%3Ccircle cx='108' cy='64' r='0.9'/%3E%3Ccircle cx='14' cy='110' r='1.2'/%3E%3Ccircle cx='52' cy='124' r='1.1'/%3E%3Ccircle cx='96' cy='106' r='1.3'/%3E%3Ccircle cx='130' cy='126' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 8h26M0 18h26' fill='none' stroke='%238a5a30' stroke-opacity='0.3' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%239a5f2c' fill-opacity='0.42'/%3E%3C/svg%3E");
  --patch-bg: #ebdcc3; --patch-bg2: #e6d6bc;
  --dc-color: rgba(150, 95, 45, .15);
  --tape-color: rgba(176, 116, 60, .4);
  --glyph-color: #a5682f;
  --meander-color: transparent;
  --frame-color: rgba(110, 70, 35, .5);
  --kicker-bg: #6f4423; --kicker-color: #f8ecd8;
  --sticker-bg: #b0743c; --sticker-color: #fdf5e8;
  --radar-main: #a8612c;
  --stamp-color: #8a4e26; --stamp-bg: #f7ecda;
  --note-bg: #fbf4e7; --note-edge: #b48a5e; --sub-color: #84664a; --sn-star: #b06a2c;
  --hairline: rgba(110, 70, 35, .25);
  --sh-cover: rgba(90, 55, 25, .28);
  --sh-card: rgba(105, 70, 40, .18);
  --sh-sticky: rgba(120, 80, 45, .2);
  --sh-quote: rgba(105, 70, 40, .16);
  --sh-stamp: rgba(120, 60, 25, .25);
  --sn1: #f3e3cb; --sn2: #ecd9bb; --sn3: #e7dcc7; --sn4: #ddcfb4; --sn5: #f5e7d2; --sn6: #e9d6c2; --sn7: #f0e4d3;
}
.theme-vintage .polaroid { background: #fdf8ef; }

/* ============================================================
   主题四：暗黑哥特风（暗紫夜色 · 蕾丝尖拱 · 月光）
   ============================================================ */
.theme-gothic {
  --paper: #191421;
  --ink: #e2d7f0;
  --meta-color: #9789b4;
  --card-paper: #261e34;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23d9c2f0' fill-opacity='0.05'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23b69ce0' stroke-opacity='0.16' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.4' fill='%23b86fc9' fill-opacity='0.5'/%3E%3C/svg%3E");
  --patch-bg: #2e2542; --patch-bg2: #35243f;
  --dc-color: rgba(150, 90, 190, .17);
  --tape-color: rgba(168, 110, 200, .34);
  --glyph-color: #b06cc9;
  --meander-color: transparent;
  --orn-color: #9a57ad;
  --frame-color: rgba(160, 100, 200, .6);
  --kicker-bg: #3a2550; --kicker-color: #e6cdf7;
  --sticker-bg: #8a4fa8; --sticker-color: #f5ebff;
  --radar-main: #b06ad9;
  --stamp-color: #e0558c; --stamp-bg: #2e2242;
  --note-bg: #251d33; --note-edge: #7c52a0; --sub-color: #a194be; --sn-star: #e0a44d;
  --hairline: rgba(205, 185, 238, .22);
  --sn1: #2d2542; --sn2: #36243f; --sn3: #262d44; --sn4: #332238; --sn5: #2a2f47; --sn6: #3a2545; --sn7: #292b40;
}
.theme-gothic .hero-title { font-family: var(--serif); }
.theme-gothic .polaroid { background: #f5eff8; }
.theme-gothic .note-tail { filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }

/* ============================================================
   主题五：简约科技风（冷灰 · 蓝图网格 · 直线电路）
   ============================================================ */
.theme-tech {
  --paper: #edf1f7;
  --ink: #22303f;
  --meta-color: #6c7d92;
  --card-paper: #ffffff;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%2335567e' fill-opacity='0.05'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%233a6ea8' stroke-opacity='0.22' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.4' fill='%232f86cf' fill-opacity='0.4'/%3E%3C/svg%3E");
  --patch-bg: #e1ebf7; --patch-bg2: #dbe6f4;
  --dc-color: rgba(46, 120, 200, .11);
  --tape-color: rgba(60, 140, 205, .26);
  --glyph-color: #2f8fd0;
  --meander-color: transparent;
  --orn-color: #3f86c8;
  --frame-color: rgba(60, 120, 190, .55);
  --kicker-bg: #dfeafb; --kicker-color: #1d5db3;
  --sticker-bg: #2f8fd0; --sticker-color: #ffffff;
  --radar-main: #2b7fd6;
  --stamp-color: #2f6fed; --stamp-bg: #eaf2fe;
  --note-bg: #ffffff; --note-edge: #9cc2ea; --sub-color: #64748a; --sn-star: #2f8fd0;
  --hairline: rgba(40, 90, 150, .2);
  --sn1: #e3eefb; --sn2: #e7f0fa; --sn3: #dfe9f6; --sn4: #e5f1f8; --sn5: #e9eef9; --sn6: #dce8f5; --sn7: #e4ecf9;
}
/* 科技风：去手作感——直角、去旋转、实线 */
.theme-tech .hero-kicker { transform: none; border-radius: 2px; }
.theme-tech .polaroid { transform: none; border-radius: 2px; }
.theme-tech .tape-polaroid { transform: none; border-radius: 1px; }
.theme-tech .tape-1, .theme-tech .tape-2 { transform: none; border-radius: 1px; }
.theme-tech .radar-card { transform: none; border-radius: 6px; }
.theme-tech .mini-sticker { transform: none; border-radius: 2px; }
.theme-tech .sticky-note { transform: none; border-radius: 3px; }
.theme-tech .sn-tape { border-radius: 1px; }
.theme-tech .pv-note { transform: none; border-radius: 6px; border-style: solid; }
.theme-tech .note-name { transform: none; }
.theme-tech .dc { border-radius: 2px; box-shadow: none; }
.theme-tech .pv-archive { border-radius: 6px; }
.theme-tech .arc-title { transform: none; border-radius: 2px; }
.theme-tech .arc-chip { border-radius: 3px; }
.theme-tech .stamp { transform: rotate(-8deg); }

/* ============================================================
   主题六：甜美可爱风（粉色 · 爱心圆点 · 蝴蝶结）
   ============================================================ */
.theme-sweet {
  --paper: #fff2f8;
  --ink: #6d3752;
  --meta-color: #bf7e9c;
  --card-paper: #fffafc;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23f062a0' fill-opacity='0.055'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M22 0H0v22' fill='none' stroke='%23f49ac6' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='3.2' fill='%23ff5fa2' fill-opacity='0.42'/%3E%3C/svg%3E");
  --patch-bg: #ffe2ef; --patch-bg2: #fff4fa;
  --dc-color: rgba(255, 120, 175, .2);
  --tape-color: rgba(255, 175, 205, .78);
  --glyph-color: #ff5fa2;
  --meander-color: transparent;
  --frame-color: rgba(255, 110, 170, .55);
  --kicker-bg: #ffd9e9; --kicker-color: #e24488;
  --sticker-bg: #ff8fb8; --sticker-color: #ffffff;
  --radar-main: #f2559a;
  --stamp-color: #ef4d93; --stamp-bg: #fff7fb;
  --note-bg: #fffafc; --note-edge: #ffb3d1; --sub-color: #a06f88; --sn-star: #ff7eb0;
  --hairline: rgba(190, 90, 135, .25);
  --bow-color: #ff86b6; --bow-knot: #f0468e;
  --sn1: #ffe3f0; --sn2: #fff2d9; --sn3: #ffdcec; --sn4: #ffeaf5; --sn5: #fff6e0; --sn6: #fcd3e6; --sn7: #fdeff7;
}
/* 蝴蝶结（真 DOM 三瓣，仅甜美风显示；放在标题上方居中留白处，避开印章） */
.bow { position: absolute; top: 62px; left: 51%; width: 58px; height: 32px; display: none; z-index: 1; }
.bow span { position: absolute; display: block; }
.bow-l { left: 0; top: 2px; width: 26px; height: 28px; background: var(--bow-color); border-radius: 70% 40% 60% 40%; transform: rotate(10deg); box-shadow: 0 2px 5px rgba(200,80,130,.25); }
.bow-r { right: 0; top: 2px; width: 26px; height: 28px; background: var(--bow-color); border-radius: 40% 70% 40% 60%; transform: rotate(-10deg); box-shadow: 0 2px 5px rgba(200,80,130,.25); }
.bow-k { left: 50%; top: 10px; margin-left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bow-knot); z-index: 2; }
.theme-sweet .bow { display: block; }

/* ============================================================
   主题七：清新休闲风（抹茶绿 · 米白 · 花草）
   ============================================================ */
.theme-fresh {
  --paper: #edf4e0;
  --ink: #3d4a2c;
  --meta-color: #7e8c63;
  --card-paper: #fbfdf4;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%235d8a34' fill-opacity='0.06'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%238fb067' stroke-opacity='0.42' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.9' fill='%236b9c3f' fill-opacity='0.4'/%3E%3C/svg%3E");
  --patch-bg: #ddecc4; --patch-bg2: #ecf5da;
  --dc-color: rgba(104, 150, 72, .2);
  --tape-color: rgba(150, 185, 95, .55);
  --glyph-color: #6b9c3f;
  --meander-color: transparent;
  --frame-color: rgba(105, 145, 65, .55);
  --kicker-bg: #d8e9be; --kicker-color: #4a7023;
  --sticker-bg: #7ba84b; --sticker-color: #ffffff;
  --radar-main: #5d9038;
  --stamp-color: #4f8a36; --stamp-bg: #f6fbe9;
  --note-bg: #fbfdf4; --note-edge: #a4c678; --sub-color: #6c7b52; --sn-star: #7ba03a;
  --hairline: rgba(90, 115, 55, .25);
  --sn1: #e6f2d1; --sn2: #f4f9e4; --sn3: #d9eab9; --sn4: #eff6dc; --sn5: #e0eecb; --sn6: #f2f7e0; --sn7: #e9f3d6;
}

/* ============================================================
   主题八：治愈奶油风（奶黄 · 暖阳云朵 · 软糯色块）
   ============================================================ */
.theme-cream {
  --paper: #fdf2cf;
  --ink: #6e5426;
  --meta-color: #ab8f52;
  --card-paper: #fffdf3;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23d89018' fill-opacity='0.06'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23d9ae56' stroke-opacity='0.4' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.9' fill='%23efaa22' fill-opacity='0.42'/%3E%3C/svg%3E");
  --patch-bg: #fce6ae; --patch-bg2: #fff4d2;
  --dc-color: rgba(238, 184, 80, .25);
  --tape-color: rgba(245, 198, 105, .62);
  --glyph-color: #ef9e22;
  --meander-color: transparent;
  --frame-color: rgba(222, 165, 60, .55);
  --kicker-bg: #ffe8a8; --kicker-color: #a86a10;
  --sticker-bg: #f4b13c; --sticker-color: #ffffff;
  --radar-main: #e89b1e;
  --stamp-color: #dd8a12; --stamp-bg: #fff8e8;
  --note-bg: #fffdf3; --note-edge: #e9c474; --sub-color: #94763f; --sn-star: #ef9418;
  --hairline: rgba(150, 105, 40, .25);
  --sn1: #fdecbb; --sn2: #fff4d4; --sn3: #f9e3ac; --sn4: #fff0c8; --sn5: #fbe7b0; --sn6: #fdeec4; --sn7: #f7e0a8;
}

/* ============================================================
   主题九~十一：极简黑 / 极简白 / 极简灰（纯色块 · 无旋转 · 无柔影）
   ============================================================ */
.theme-mono-black {
  --paper: #151515;
  --ink: #f1f1f1;
  --meta-color: #949494;
  --card-paper: #242424;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23ffffff' fill-opacity='0.045'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/svg%3E");
  --patch-bg: #2b2b2b; --patch-bg2: #202020;
  --dc-color: rgba(255, 255, 255, .09);
  --tape-color: rgba(255, 255, 255, .22);
  --glyph-color: #d2d2d2;
  --meander-color: transparent;
  --frame-color: rgba(255, 255, 255, .5);
  --kicker-bg: #f0f0f0; --kicker-color: #161616;
  --sticker-bg: #ededed; --sticker-color: #161616;
  --radar-main: #ececec;
  --stamp-color: #f4f4f4; --stamp-bg: #2b2b2b;
  --note-bg: #232323; --note-edge: #6a6a6a; --sub-color: #ababab; --sn-star: #ececec;
  --hairline: rgba(255, 255, 255, .24);
  --sn1: #2b2b2b; --sn2: #333333; --sn3: #262626; --sn4: #3a3a3a; --sn5: #2f2f2f; --sn6: #383838; --sn7: #292929;
}
.theme-mono-black .polaroid { background: #f3f3f3; }

.theme-mono-white {
  --paper: #ffffff;
  --ink: #181818;
  --meta-color: #8c8c8c;
  --card-paper: #f6f6f6;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23000000' fill-opacity='0.045'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23000000' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%23000000' fill-opacity='0.3'/%3E%3C/svg%3E");
  --patch-bg: #ededed; --patch-bg2: #f3f3f3;
  --dc-color: rgba(0, 0, 0, .07);
  --tape-color: rgba(0, 0, 0, .16);
  --glyph-color: #3a3a3a;
  --meander-color: transparent;
  --frame-color: rgba(0, 0, 0, .45);
  --kicker-bg: #181818; --kicker-color: #ffffff;
  --sticker-bg: #181818; --sticker-color: #ffffff;
  --radar-main: #181818;
  --stamp-color: #181818; --stamp-bg: #ffffff;
  --note-bg: #f6f6f6; --note-edge: #b8b8b8; --sub-color: #757575; --sn-star: #181818;
  --hairline: rgba(0, 0, 0, .25);
  --sn1: #f1f1f1; --sn2: #e8e8e8; --sn3: #fafafa; --sn4: #e3e3e3; --sn5: #ededed; --sn6: #e6e6e6; --sn7: #f4f4f4;
}
.theme-mono-white .polaroid { border: 1px solid rgba(0,0,0,.28); }

.theme-mono-gray {
  --paper: #979da5;
  --ink: #20242a;
  --meta-color: #3f444b;
  --card-paper: #d6d9de;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%231c1f24' fill-opacity='0.08'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%231c1f24' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%231c1f24' fill-opacity='0.42'/%3E%3C/svg%3E");
  --patch-bg: #b6bbc3; --patch-bg2: #c8ccd2;
  --dc-color: rgba(20, 20, 20, .14);
  --tape-color: rgba(255, 255, 255, .42);
  --glyph-color: #2c3036;
  --meander-color: transparent;
  --frame-color: rgba(25, 25, 25, .45);
  --kicker-bg: #2c3036; --kicker-color: #eef0f2;
  --sticker-bg: #eceef0; --sticker-color: #222428;
  --radar-main: #2c3036;
  --stamp-color: #23262b; --stamp-bg: #d2d6db;
  --note-bg: #d6d9de; --note-edge: #6e747c; --sub-color: #52575e; --sn-star: #1e2126;
  --hairline: rgba(25, 25, 25, .25);
  --sn1: #e7e9ec; --sn2: #c2c7ce; --sn3: #d0d4da; --sn4: #bac0c8; --sn5: #dbdfe3; --sn6: #cbd0d7; --sn7: #e0e3e7;
}
.theme-mono-gray .polaroid { background: #f0f1f3; }

/* 极简三主题统一处理：去手作感、纯色块、直角、实线、硬边 */
.theme-mono-black .hero-kicker,
.theme-mono-white .hero-kicker,
.theme-mono-gray .hero-kicker,
.theme-mono-black .polaroid,
.theme-mono-white .polaroid,
.theme-mono-gray .polaroid,
.theme-mono-black .tape-polaroid,
.theme-mono-white .tape-polaroid,
.theme-mono-gray .tape-polaroid,
.theme-mono-black .tape-1,
.theme-mono-white .tape-1,
.theme-mono-gray .tape-1,
.theme-mono-black .tape-2,
.theme-mono-white .tape-2,
.theme-mono-gray .tape-2,
.theme-mono-black .radar-card,
.theme-mono-white .radar-card,
.theme-mono-gray .radar-card,
.theme-mono-black .mini-sticker,
.theme-mono-white .mini-sticker,
.theme-mono-gray .mini-sticker,
.theme-mono-black .sticky-note,
.theme-mono-white .sticky-note,
.theme-mono-gray .sticky-note,
.theme-mono-black .sn-tape,
.theme-mono-white .sn-tape,
.theme-mono-gray .sn-tape,
.theme-mono-black .pv-note,
.theme-mono-white .pv-note,
.theme-mono-gray .pv-note,
.theme-mono-black .note-name,
.theme-mono-white .note-name,
.theme-mono-gray .note-name,
.theme-mono-black .arc-title,
.theme-mono-white .arc-title,
.theme-mono-gray .arc-title,
.theme-mono-black .arc-chip,
.theme-mono-white .arc-chip,
.theme-mono-gray .arc-chip,
.theme-mono-black .stamp,
.theme-mono-white .stamp,
.theme-mono-gray .stamp { transform: none; }

.theme-mono-black .hero-kicker,
.theme-mono-white .hero-kicker,
.theme-mono-gray .hero-kicker,
.theme-mono-black .mini-sticker,
.theme-mono-white .mini-sticker,
.theme-mono-gray .mini-sticker,
.theme-mono-black .arc-title,
.theme-mono-white .arc-title,
.theme-mono-gray .arc-title { border-radius: 2px; }
.theme-mono-black .polaroid,
.theme-mono-white .polaroid,
.theme-mono-gray .polaroid { border-radius: 2px; }
.theme-mono-black .radar-card,
.theme-mono-white .radar-card,
.theme-mono-gray .radar-card,
.theme-mono-black .pv-archive,
.theme-mono-white .pv-archive,
.theme-mono-gray .pv-archive { border-radius: 4px; }
.theme-mono-black .sticky-note,
.theme-mono-white .sticky-note,
.theme-mono-gray .sticky-note,
.theme-mono-black .arc-chip,
.theme-mono-white .arc-chip,
.theme-mono-gray .arc-chip { border-radius: 2px; }
.theme-mono-black .pv-note,
.theme-mono-white .pv-note,
.theme-mono-gray .pv-note { border-radius: 3px; border-style: solid; }
.theme-mono-black .sn-title,
.theme-mono-white .sn-title,
.theme-mono-gray .sn-title { border-bottom-style: solid; }
.theme-mono-black .pv-foot,
.theme-mono-white .pv-foot,
.theme-mono-gray .pv-foot { border-top-style: solid; }

.theme-mono-black .dc,
.theme-mono-white .dc,
.theme-mono-gray .dc { border-radius: 2px; box-shadow: none; }
.theme-mono-black .polaroid,
.theme-mono-white .polaroid,
.theme-mono-gray .polaroid,
.theme-mono-black .tape-polaroid,
.theme-mono-white .tape-polaroid,
.theme-mono-gray .tape-polaroid,
.theme-mono-black .tape-1,
.theme-mono-white .tape-1,
.theme-mono-gray .tape-1,
.theme-mono-black .tape-2,
.theme-mono-white .tape-2,
.theme-mono-gray .tape-2,
.theme-mono-black .radar-card,
.theme-mono-white .radar-card,
.theme-mono-gray .radar-card,
.theme-mono-black .mini-sticker,
.theme-mono-white .mini-sticker,
.theme-mono-gray .mini-sticker,
.theme-mono-black .sticky-note,
.theme-mono-white .sticky-note,
.theme-mono-gray .sticky-note,
.theme-mono-black .pv-note,
.theme-mono-white .pv-note,
.theme-mono-gray .pv-note,
.theme-mono-black .note-name,
.theme-mono-white .note-name,
.theme-mono-gray .note-name,
.theme-mono-black .pv-archive,
.theme-mono-white .pv-archive,
.theme-mono-gray .pv-archive,
.theme-mono-black .arc-title,
.theme-mono-white .arc-title,
.theme-mono-gray .arc-title,
.theme-mono-black .stamp,
.theme-mono-white .stamp,
.theme-mono-gray .stamp { box-shadow: none; }
.theme-mono-black .sn-tape,
.theme-mono-white .sn-tape,
.theme-mono-gray .sn-tape { opacity: 1; }
.theme-mono-black .note-tail,
.theme-mono-white .note-tail,
.theme-mono-gray .note-tail { filter: none; }
/* 极简主题姓名牌：胶带半透明底对比不足，改成实色块 */
.theme-mono-black .note-name { background: #f0f0f0; color: #161616; }
.theme-mono-white .note-name { background: #181818; color: #ffffff; }
.theme-mono-gray .note-name { background: #2c3036; color: #eef0f2; }

/* ============================================================
   主题十二：黑粉地雷风（纯黑暗底 · 霓虹粉 · 十字架/爱心线条）
   ============================================================ */
.theme-mine {
  --paper: #0e0e13;
  --ink: #f5e8f1;
  --meta-color: #ad859e;
  --card-paper: #1d1822;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23ff2e92' fill-opacity='0.05'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23ff2e92' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%23ff2e92' fill-opacity='0.35'/%3E%3C/svg%3E");
  --patch-bg: #251b29; --patch-bg2: #201726;
  --dc-color: rgba(255, 46, 146, .14);
  --tape-color: rgba(255, 90, 170, .3);
  --glyph-color: #ff2e92;
  --meander-color: transparent;
  --orn-color: #ff2e92;
  --frame-color: rgba(255, 60, 160, .5);
  --kicker-bg: #2c1626; --kicker-color: #ff5fa8;
  --sticker-bg: #ff2e92; --sticker-color: #ffffff;
  --radar-main: #ff2e92;
  --stamp-color: #ff2e92; --stamp-bg: #1c1018;
  --note-bg: #1d1622; --note-edge: #93336a; --sub-color: #ab879f; --sn-star: #ff5fa8;
  --hairline: rgba(255, 120, 190, .22);
  --sh-cover: rgba(255, 36, 130, .32);
  --sh-card: rgba(255, 36, 130, .26);
  --sh-sticky: rgba(255, 80, 160, .24);
  --sh-quote: rgba(255, 36, 130, .28);
  --sh-stamp: rgba(255, 36, 130, .38);
  --sn1: #281c2b; --sn2: #2b1824; --sn3: #231c2b; --sn4: #2f1824; --sn5: #201b29; --sn6: #321b2b; --sn7: #261b29;
}
.theme-mine .polaroid { background: #f5ecf3; border: 1px solid rgba(255, 46, 146, .45); }
.theme-mine .hero-kicker { border: 1px solid rgba(255, 46, 146, .55); }
.theme-mine .note-tail { filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.theme-mine .mine-strip { display: block; opacity: .5; }

/* ============================================================
   主题十三：水色医疗系（纯白 · 淡水蓝 · 轻柔清透空气感）
   ============================================================ */
.theme-medical {
  --paper: #ffffff;
  --ink: #2b4a5e;
  --meta-color: #7fa5bb;
  --card-paper: #fafdff;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%234699c8' fill-opacity='0.04'%3E%3Ccircle cx='12' cy='14' r='1.1'/%3E%3Ccircle cx='48' cy='30' r='0.9'/%3E%3Ccircle cx='90' cy='12' r='1.2'/%3E%3Ccircle cx='126' cy='40' r='1'/%3E%3Ccircle cx='26' cy='66' r='1'/%3E%3Ccircle cx='70' cy='80' r='1.2'/%3E%3Ccircle cx='112' cy='70' r='0.9'/%3E%3Ccircle cx='16' cy='116' r='1.1'/%3E%3Ccircle cx='56' cy='128' r='1'/%3E%3Ccircle cx='100' cy='110' r='1.2'/%3E%3Ccircle cx='132' cy='130' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%235bb8dd' stroke-opacity='0.14' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%234fb2db' fill-opacity='0.3'/%3E%3C/svg%3E");
  --patch-bg: #edf7fd; --patch-bg2: #f2faff;
  --dc-color: rgba(110, 190, 230, .12);
  --tape-color: rgba(150, 215, 242, .6);
  --glyph-color: #46abd4;
  --meander-color: transparent;
  --orn-color: #5bb8dd;
  --frame-color: rgba(90, 175, 215, .45);
  --kicker-bg: #e2f3fc; --kicker-color: #1f87b8;
  --sticker-bg: #7fc8e8; --sticker-color: #ffffff;
  --radar-main: #3fa8d4;
  --stamp-color: #35a0cd; --stamp-bg: #f0f9ff;
  --note-bg: #fbfdff; --note-edge: #a8d6ec; --sub-color: #6c94ab; --sn-star: #46abd4;
  --hairline: rgba(80, 150, 190, .18);
  --sh-cover: rgba(90, 165, 215, .25);
  --sh-card: rgba(90, 165, 215, .18);
  --sh-sticky: rgba(90, 165, 215, .16);
  --sh-quote: rgba(90, 165, 215, .2);
  --sh-stamp: rgba(90, 165, 215, .28);
  --sn1: #eef8fd; --sn2: #f4fafe; --sn3: #e9f4fb; --sn4: #f0f9ff; --sn5: #e8f5fc; --sn6: #f2faff; --sn7: #ebf7fd;
}
.theme-medical .polaroid { border: 1px solid rgba(110, 190, 230, .4); }
.theme-medical .medical-strip { display: block; opacity: .42; }

/* ============================================================
   主题十四：和风（生成纸米白 · 朱红点染 · 墨线
   樱瓣 / 障子格 / 青海波 / 朱印，克制留白如水墨）
   ============================================================ */
.theme-jp {
  --paper: #faf7ef;
  --ink: #2c2823;
  --meta-color: #948b7d;
  --card-paper: #fffdf7;
  /* 障子纸格：30px 极浅细格 + 120px 稍重「组子」线，淡到近乎纯白留白 */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%2374706a' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M30 0V120M60 0V120M90 0V120M0 30H120M0 60H120M0 90H120'/%3E%3C/g%3E%3Cg fill='none' stroke='%23625c53' stroke-opacity='0.1' stroke-width='1.6'%3E%3Cpath d='M0 0H120M0 0V120'/%3E%3C/g%3E%3C/svg%3E");
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%2374706a' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
  --dots-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='%238a807a' fill-opacity='0.14'/%3E%3C/svg%3E");
  --patch-bg: #f3efe5; --patch-bg2: #f6f2e9;
  --dc-color: rgba(60, 50, 40, .04);
  --tape-color: rgba(193, 59, 46, .16);
  --glyph-color: #c13b2e;
  --meander-color: transparent;
  --orn-color: #3a342c;
  --frame-color: rgba(70, 58, 45, .38);
  --kicker-bg: #c13b2e; --kicker-color: #fff8f0;
  --sticker-bg: #c13b2e; --sticker-color: #fff8f0;
  --radar-main: #c13b2e;
  --stamp-color: #c13b2e; --stamp-bg: #fff9f2;
  --note-bg: #fffdf7; --note-edge: #d9ccb8; --sub-color: #8a8072; --sn-star: #c13b2e;
  --hairline: rgba(70, 58, 45, .2);
  --sh-cover: rgba(90, 70, 50, .12);
  --sh-card: rgba(90, 70, 50, .08);
  --sh-sticky: rgba(120, 80, 60, .1);
  --sh-quote: rgba(90, 70, 50, .08);
  --sh-stamp: rgba(170, 50, 40, .18);
  --sn1: #f6f1e6; --sn2: #fdf0f2; --sn3: #eef3ee; --sn4: #fbf5e8; --sn5: #eef0f4; --sn6: #f4efe7; --sn7: #f7efe9;
}

/* 清雅留白：收起通用拼贴色块/胶带/符号，只保留和风自己的几笔 */
.theme-jp .dc,
.theme-jp .paper-patch,
.theme-jp .tape,
.theme-jp .glyph,
.theme-jp .bow { display: none; }
.theme-jp .hero-title { font-family: var(--serif); letter-spacing: 6px; }
.theme-jp .polaroid {
  transform: rotate(0);
  border: 1px solid rgba(70, 58, 45, .28);
  box-shadow: 0 8px 20px rgba(90, 70, 50, .14);
}
.theme-jp .polaroid figcaption { color: #6f665a; letter-spacing: 1px; }
.theme-jp .tape-polaroid { opacity: .7; }
.theme-jp .hero-kicker { border-radius: 2px; box-shadow: none; letter-spacing: 4px; }

/* 和风专属装饰：全部为静态 DOM，默认隐藏、仅 .theme-jp 显示。
   主题切换只换 class，节点从不 append/克隆，故疯狂连点也只有一套。 */
.jp-deco { position: absolute; display: none; pointer-events: none; z-index: 1; }
.theme-jp .jp-deco { display: block; }
.theme-jp .jp-hanko { display: flex; }

/* 樱瓣：纯 CSS 卵圆 + 柔粉径向渐变，仅四角零星数片 */
.jp-petal {
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 36% 28%, #fad7e0 0%, #f3b7c8 55%, #e99fb2 100%);
  box-shadow: inset -2px -3px 5px rgba(205, 115, 142, .32);
  opacity: .95;
}
.jp-p1 { left: 14px; top: 62px; width: 20px; height: 20px; transform: rotate(26deg); }
.jp-p2 { left: 20px; top: 24px; width: 16px; height: 16px; transform: rotate(-16deg); }
.jp-p3 { left: 12px; top: 112px; width: 15px; height: 15px; transform: rotate(54deg); }
.jp-p4 { left: 1028px; top: 278px; width: 15px; height: 15px; transform: rotate(40deg); }
/* 补充几片更小更淡的零星樱瓣（边缘点缀，不喧宾夺主） */
.jp-p5 { left: 1054px; top: 42px; width: 12px; height: 12px; transform: rotate(-22deg); opacity: .68; }
.jp-p6 { left: 6px; top: 196px; width: 13px; height: 13px; transform: rotate(18deg); opacity: .62; }
.jp-p7 { left: 1044px; top: 460px; width: 11px; height: 11px; transform: rotate(50deg); opacity: .58; }

/* 青海波：两排错位重复圆弧边纹；顶部墨色、底部朱色，都压得极淡 */
.jp-wave { height: 26px; color: var(--orn-color); }
.jp-wave.orn-top { top: 12px; }
.theme-jp .jp-wave.orn-top { display: block; opacity: .28; }
.theme-jp .jp-wave.orn-bot { display: block; color: #c13b2e; opacity: .22; }

/* 朱肉落款印：hero 区右下留白落款一方（避开右上圆形评级印），红底白字 */
.jp-hanko {
  left: 968px; top: 214px; width: 50px; height: 50px; border-radius: 6px;
  background: #c13b2e; color: #fdf5ec;
  align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 28px; font-weight: 900; line-height: 1;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2.5px rgba(253, 245, 236, .88), inset 0 0 9px rgba(90, 10, 5, .32), 0 3px 7px rgba(150, 50, 35, .26);
  opacity: .95;
}

/* ========== 底部操作条 ========== */
.bottom-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-primary { padding: 12px 30px; background: linear-gradient(135deg,#f0729c,#d4567f); color: #fff; border: none; border-radius: 24px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 14px rgba(212,86,127,.38); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); }
.btn-primary:disabled { background: #d9c4cd; cursor: not-allowed; box-shadow: none; }

/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(40,20,35,.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal.hidden { display: none; }
.modal-content { background: #fff; border-radius: 18px; padding: 22px; max-width: 92vw; max-height: 92vh; overflow: auto; text-align: center; }
.modal-content h2 { color: #d4567f; margin-bottom: 14px; }
.modal-content img { max-width: 100%; max-height: 72vh; border-radius: 10px; }
.modal-actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn-primary { text-decoration: none; display: inline-block; }
.modal-actions .btn-small { padding: 8px 18px; background: #fff; color: #d4567f; border: 1px solid #ffc6d6; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 600; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px); background: rgba(60,30,48,.92); color: #fff; font-size: 13px; padding: 10px 22px; border-radius: 20px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========== 响应式 ========== */
/* 保险：任何宽度下都不允许页面级横向滚动（预览自身的缩放占位由 .preview-wrap 裁剪） */
html, body { max-width: 100%; overflow-x: hidden; }

/* 平板/窄桌面：左右分栏改为上下堆叠 */
@media (max-width: 900px) {
  .workspace { flex-direction: column; padding: 10px 14px 28px; gap: 18px; }
  .panel-left { width: 100%; max-height: none; overflow: visible; padding-right: 0; }
  .panel-right { position: static; width: 100%; }
  .preview-wrap { width: 100%; max-width: 100%; }
  .topbar-row .draft-actions { position: static; }
}

/* 手机：字号、间距、触控尺寸全面优化（#preview 内部是 1080 等比缩放稿，不在此改动） */
@media (max-width: 600px) {
  .topbar { padding: 14px 12px 6px; }
  .topbar h1 { font-size: 19px; letter-spacing: .5px; }
  .topbar-row { gap: 8px; margin-top: 6px; }
  .subtitle { font-size: 12px; }
  .btn-ghost { padding: 9px 14px; font-size: 12.5px; min-height: 38px; }

  .card { padding: 13px 14px; border-radius: 14px; }
  .card h2 { font-size: 15px; }
  .field { margin-bottom: 12px; }
  .field label { font-size: 12.5px; margin-bottom: 5px; }
  /* 输入框字号 ≥16px：避免 iPhone 聚焦时自动放大页面 */
  input[type="text"], textarea, select {
    font-size: 16px; padding: 10px 12px; border-radius: 10px;
  }
  .hint { font-size: 12px; line-height: 1.7; }
  .radio-row { gap: 14px; }
  .bg-choice, .radio-choice { font-size: 14px; gap: 6px; }
  .row { gap: 8px; }

  .search-results { max-height: 200px; }
  .search-results li { padding: 11px 12px; font-size: 13.5px; }
  .search-results .thumb { width: 34px; height: 44px; }

  .rating-list { gap: 8px; }
  .rating-opt { min-height: 40px; padding: 9px 15px; font-size: 13.5px; }
  .rating-opt.wide { min-height: 40px; padding: 9px 12px; font-size: 12.5px; }

  .dim-header { padding: 11px 10px; gap: 10px; }
  .dim-header input[type="checkbox"] { width: 20px; height: 20px; }
  .dim-name { font-size: 14px; }
  .dim-major-score { font-size: 12px; min-width: 40px; }
  .sub-items-box { padding-left: 34px; gap: 10px 16px; }
  .sub-item { font-size: 13px; gap: 7px; }
  .star { font-size: 24px; padding: 2px; }  /* 加大星星热区 */
  .dim-reset, .sub-reset { font-size: 15px; padding: 4px; }
  .dim-del { font-size: 17px; padding: 4px; }
  .custom-dim { gap: 8px; margin-top: 12px; }
  .custom-dim .btn-small { min-height: 42px; padding: 8px 16px; font-size: 13px; }
  .btn-small { min-height: 40px; padding: 9px 14px; font-size: 13px; }

  .dialog-maker { gap: 10px; }
  .avatar-preview { width: 58px; height: 58px; }
  .upload-btn { font-size: 12px; padding: 9px 13px; min-height: 38px; }

  .panel-right { gap: 14px; }
  .preview-wrap { border-radius: 14px; }

  /* 主操作：整行大按钮，手指轻松点 */
  .bottom-bar { flex-direction: column; gap: 8px; width: 100%; }
  .btn-primary { width: 100%; min-height: 50px; padding: 14px 24px; font-size: 16px; border-radius: 26px; }
  .bottom-bar .hint { text-align: center; }

  /* 结果弹窗：近乎全屏，下载/关闭按钮上下整行 */
  .modal { padding: 12px; }
  .modal-content { width: 100%; max-width: 100%; max-height: 94vh; padding: 16px 14px; border-radius: 16px; }
  .modal-content img { max-height: 64vh; }
  .modal-actions { flex-direction: column; gap: 10px; }
  .modal-actions a, .modal-actions button { width: 100%; min-height: 46px; text-align: center; }

  .toast { max-width: 88vw; text-align: center; font-size: 13px; padding: 11px 18px; }
}