/* ════════════════════════════════════════════════════════════════
   story.css — 小剧情页「书页式单栏」布局（设计系统第 6 页）
   复用 flashcards.css 的 fcx- 骨架（.fcx-page/.fcx-head/.fcx-card/
   .fcx-chip/.fcx-head-btn）+ --fcx-* 变量。
   小剧情是「读一段小故事，再一句一句把词填回去」——自己一套：
   书架（章节卡墙）+ 一张居中书页（故事跟着答案一句一句长出来）。
   类名全 fcx-st- 前缀，避开 luxe.css 的 -card/-chip/-tag/-title/-num
   等危险子串。
   ════════════════════════════════════════════════════════════════ */

.fcx-st-loading {
  padding: 70px 0; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--fcx-muted);
}

/* ═══ 1. 书架（章节列表） ═══ */
.fcx-st-lead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 16px 0 18px;
}
.fcx-st-lead-tx {
  font-size: 13.5px; font-weight: 600; color: var(--fcx-muted);
  line-height: 1.6; max-width: 560px;
}
.fcx-st-lead-prog {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fcx-soft); border-radius: 999px; padding: 8px 15px;
  font-size: 12.5px; font-weight: 800; color: var(--fcx-muted); white-space: nowrap;
}
.fcx-st-lead-prog svg { width: 15px; height: 15px; color: var(--fcx-orange); }
html[data-theme="luxe"] .fcx-st-lead-prog svg { color: var(--fcx-mint); }
.fcx-st-lead-prog b { font-family: var(--fcx-serif); font-size: 15px; color: var(--fcx-mint-d); }
html[data-theme="luxe"] .fcx-st-lead-prog b { color: var(--fcx-mint); }

.fcx-st-shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 14px; padding-bottom: 38px;
}

/* 章节卡 */
.fcx-st-ch {
  position: relative; cursor: pointer;
  background: var(--fcx-panel); border-radius: 20px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 16px 34px -24px rgba(67,61,53,.4);
  transition: transform .15s, box-shadow .15s;
}
.fcx-st-ch:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(67,61,53,.5); }
html[data-theme="luxe"] .fcx-st-ch {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 16px 38px -26px rgba(0,0,0,.9);
}
html[data-theme="luxe"] .fcx-st-ch:hover {
  box-shadow: inset 0 0 0 1px rgba(245,197,24,.3), 0 22px 46px -22px rgba(0,0,0,.95);
}
.fcx-st-ch.is-locked { cursor: not-allowed; opacity: .58; }
.fcx-st-ch.is-locked:hover { transform: none; }

.fcx-st-ch-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fcx-st-ch-no {
  font-family: var(--fcx-serif); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; color: var(--fcx-faint);
}
.fcx-st-ch-st { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.fcx-st-ch-st.is-done { background: rgba(88,204,2,.16); color: var(--fcx-mint-d); }
html[data-theme="luxe"] .fcx-st-ch-st.is-done { background: rgba(245,197,24,.16); color: var(--fcx-mint); }
.fcx-st-ch-st.is-doing { background: rgba(255,176,32,.18); color: var(--fcx-amber-d); }
html[data-theme="luxe"] .fcx-st-ch-st.is-doing { background: rgba(224,184,120,.18); color: var(--fcx-amber); }
.fcx-st-ch-st.is-new { background: rgba(28,176,246,.14); color: var(--fcx-sky); }
html[data-theme="luxe"] .fcx-st-ch-st.is-new { background: rgba(245,197,24,.1); color: var(--fcx-mint); }
.fcx-st-ch-st.is-locked { background: var(--fcx-soft); color: var(--fcx-faint); }
.fcx-st-ch-st.is-plus { background: #ffb020; color: #5a3d00; }
html[data-theme="luxe"] .fcx-st-ch-st.is-plus { background: var(--fcx-mint); color: #1a1505; }

.fcx-st-ch-ic {
  width: 42px; height: 42px; border-radius: 13px; margin-top: 2px;
  background: rgba(255,150,0,.13); color: var(--fcx-orange);
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="luxe"] .fcx-st-ch-ic { background: rgba(245,197,24,.13); color: var(--fcx-mint); }
.fcx-st-ch-ic svg { width: 22px; height: 22px; }
.fcx-st-ch.is-locked .fcx-st-ch-ic { background: var(--fcx-soft); color: var(--fcx-faint); }

.fcx-st-ch-h { font-family: var(--fcx-serif); font-size: 17px; font-weight: 600; color: var(--fcx-ink); }
.fcx-st-ch-sub {
  font-size: 13px; font-weight: 500; color: var(--fcx-muted); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 41px;
}
.fcx-st-ch-meta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px;
  padding-top: 11px; border-top: 1px dashed var(--fcx-line);
  font-size: 11.5px; font-weight: 700; color: var(--fcx-muted);
}
.fcx-st-ch-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fcx-st-ch-meta svg { width: 13px; height: 13px; }
.fcx-st-ch-bar { height: 6px; background: var(--fcx-line); border-radius: 999px; overflow: hidden; }
.fcx-st-ch-bar i {
  display: block; height: 100%; background: var(--fcx-mint); border-radius: 999px;
  transition: width .5s cubic-bezier(.3,.8,.3,1);
}

/* ═══ 2. 学一章：章节进度条 ═══ */
.fcx-st-prog {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 900px; margin: 16px auto 0;
}
.fcx-st-prog-label { font-size: 12.5px; font-weight: 800; color: var(--fcx-muted); white-space: nowrap; }
.fcx-st-prog-track { flex: 1; height: 9px; background: var(--fcx-line); border-radius: 999px; overflow: hidden; }
.fcx-st-prog-track i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--fcx-mint); transition: width .6s cubic-bezier(.3,.8,.3,1);
}
.fcx-st-prog-pct {
  font-family: var(--fcx-serif); font-size: 14px; font-weight: 600;
  color: var(--fcx-mint-d); min-width: 42px; text-align: right;
}
html[data-theme="luxe"] .fcx-st-prog-pct { color: var(--fcx-mint); }

/* ═══ 3. 书页：故事跟着答案一句一句长出来 ═══ */
.fcx-st-page { width: 100%; max-width: 900px; margin: 0 auto; padding: 20px 0 42px; }

/* 书页卡（是 .fcx-card，但不可点、文字可选） */
.fcx-st-paper {
  cursor: default; user-select: text; touch-action: auto;
  padding: 42px 60px 36px;
}
.fcx-st-paper-kick {
  font-family: var(--fcx-serif); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; color: var(--fcx-faint); text-align: center;
}
.fcx-st-paper-h {
  font-family: var(--fcx-serif); font-size: 25px; font-weight: 600;
  color: var(--fcx-ink); text-align: center; margin: 7px 0 9px; line-height: 1.3;
}
.fcx-st-paper-meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--fcx-muted);
  padding-bottom: 18px; border-bottom: 1px dashed var(--fcx-line);
}
.fcx-st-paper-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fcx-st-paper-meta svg { width: 14px; height: 14px; }

/* 当前阶段提示语 */
.fcx-st-cue { text-align: center; margin: 18px 0 4px; }
.fcx-st-cue-h { font-family: var(--fcx-serif); font-size: 15.5px; font-weight: 600; color: var(--fcx-ink); }
.fcx-st-cue-sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--fcx-muted); margin-top: 3px; }

/* 故事正文（已读区，会一段段长出来） */
.fcx-st-flow {
  font-size: 18px; line-height: 1.95; font-weight: 500;
  color: var(--fcx-ink); margin: 14px 0 0; min-height: 26px;
}
.fcx-st-frag { display: inline; }
.fcx-st-frag-fresh { animation: fcx-st-fade .55s ease-out both; }

/* 故事里的目标词（可点开看翻译） */
.fcx-st-word {
  cursor: pointer; position: relative; font-weight: 600; color: var(--fcx-ink);
  border-radius: 3px; padding: 0 2px;
  background: linear-gradient(180deg, transparent 62%, rgba(255,150,0,.28) 62%);
  transition: background .15s;
}
.fcx-st-word:hover { background: linear-gradient(180deg, transparent 50%, rgba(255,150,0,.42) 50%); }
html[data-theme="luxe"] .fcx-st-word { background: linear-gradient(180deg, transparent 62%, rgba(245,197,24,.26) 62%); }
html[data-theme="luxe"] .fcx-st-word:hover { background: linear-gradient(180deg, transparent 50%, rgba(245,197,24,.42) 50%); }
/* 已填回 / 已复习过的词 */
.fcx-st-word.is-seen {
  color: var(--fcx-mint-d); font-weight: 700;
  background: linear-gradient(180deg, transparent 62%, rgba(88,204,2,.26) 62%);
}
html[data-theme="luxe"] .fcx-st-word.is-seen {
  color: var(--fcx-mint);
  background: linear-gradient(180deg, transparent 62%, rgba(245,197,24,.2) 62%);
}
/* recall「该复习了」的热词：再补一道天蓝下划线 */
.fcx-st-word.hot { box-shadow: inset 0 -2px 0 var(--fcx-sky); }
html[data-theme="luxe"] .fcx-st-word.hot { box-shadow: inset 0 -2px 0 var(--fcx-mint); }

/* 词义浮层 */
.fcx-st-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--fcx-panel); color: var(--fcx-ink);
  padding: 8px 13px; border-radius: 10px;
  font-family: var(--fcx-sans); font-size: 13px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(67,61,53,.45);
  opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity .18s, transform .18s;
}
html[data-theme="luxe"] .fcx-st-tip {
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
}
.fcx-st-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--fcx-panel);
}
.fcx-st-tip .fcx-st-ipa { color: var(--fcx-muted); font-weight: 500; margin-right: 6px; }
.fcx-st-tip .fcx-st-pos { color: var(--fcx-purple); font-style: italic; margin-right: 6px; }
html[data-theme="luxe"] .fcx-st-tip .fcx-st-pos { color: var(--fcx-mint); }
.fcx-st-word.show-tip .fcx-st-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ 4. 当前填空（嵌在书页末尾） ═══ */
.fcx-st-now {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px dashed var(--fcx-line);
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.fcx-st-now:empty { display: none; }
.fcx-st-now.is-on { opacity: 1; transform: none; }
.fcx-st-now-line {
  font-size: 18px; line-height: 1.95; font-weight: 500;
  color: var(--fcx-ink); margin: 0 0 18px;
}
.fcx-st-blank {
  display: inline-block; min-width: 84px; padding: 0 8px;
  border-bottom: 2px dashed var(--fcx-orange); text-align: center;
  font-family: var(--fcx-serif); font-weight: 600; color: var(--fcx-orange);
}
.fcx-st-blank.is-filled { border-bottom-style: solid; border-bottom-color: var(--fcx-mint); color: var(--fcx-mint-d); }
html[data-theme="luxe"] .fcx-st-blank.is-filled { color: var(--fcx-mint); }

.fcx-st-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fcx-st-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: none; cursor: pointer; border-radius: 14px; text-align: left;
  background: var(--fcx-soft); padding: 13px 15px;
  font-family: var(--fcx-sans); transition: background .14s, transform .1s;
}
.fcx-st-opt:hover:not(:disabled) { transform: translateY(-1px); }
.fcx-st-opt:disabled { cursor: default; }
.fcx-st-opt-k {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: var(--fcx-panel); color: var(--fcx-muted);
  font-family: var(--fcx-serif); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.fcx-st-opt-tx { font-size: 15px; font-weight: 700; color: var(--fcx-ink); }
.fcx-st-opt.is-ok { background: rgba(88,204,2,.16); }
.fcx-st-opt.is-ok .fcx-st-opt-k { background: var(--fcx-mint); color: #fff; }
.fcx-st-opt.is-ok .fcx-st-opt-tx { color: var(--fcx-mint-d); }
html[data-theme="luxe"] .fcx-st-opt.is-ok .fcx-st-opt-k { color: #1a1610; }
html[data-theme="luxe"] .fcx-st-opt.is-ok .fcx-st-opt-tx { color: var(--fcx-mint); }
.fcx-st-opt.is-no { background: rgba(255,93,108,.14); }
.fcx-st-opt.is-no .fcx-st-opt-k { background: var(--fcx-coral-d); color: #fff; }
.fcx-st-opt.is-no .fcx-st-opt-tx { color: var(--fcx-coral-d); }

.fcx-st-fb {
  display: none; margin-top: 14px;
  font-size: 13.5px; font-weight: 600; padding: 11px 15px; border-radius: 13px;
  background: rgba(88,204,2,.14); color: var(--fcx-mint-d);
}
.fcx-st-fb.is-on { display: block; animation: fcx-st-slide .3s ease-out; }
.fcx-st-fb.is-bad { background: rgba(255,93,108,.14); color: var(--fcx-coral-d); }
html[data-theme="luxe"] .fcx-st-fb { background: rgba(245,197,24,.14); color: var(--fcx-mint); }
html[data-theme="luxe"] .fcx-st-fb.is-bad { background: rgba(255,93,108,.16); color: var(--fcx-coral); }

/* ═══ 5. 阶段一脚注：提示 + 开始填空 ═══ */
.fcx-st-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 24px; padding-top: 20px;
  border-top: 1px dashed var(--fcx-line);
}
.fcx-st-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--fcx-muted); line-height: 1.5;
}
.fcx-st-hint svg { width: 16px; height: 16px; color: var(--fcx-orange); flex-shrink: 0; }
html[data-theme="luxe"] .fcx-st-hint svg { color: var(--fcx-mint); }

.fcx-st-go {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer; border-radius: 13px; white-space: nowrap;
  background: var(--fcx-mint); color: #fff;
  font-family: var(--fcx-serif); font-size: 15px; font-weight: 600;
  padding: 12px 24px; box-shadow: 0 4px 0 var(--fcx-mint-d);
  transition: transform .12s, filter .12s;
}
html[data-theme="luxe"] .fcx-st-go { color: #1a1610; }
.fcx-st-go:hover { filter: brightness(1.04); transform: translateY(-1px); }
.fcx-st-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--fcx-mint-d); }
.fcx-st-go svg { width: 17px; height: 17px; }

/* ═══ 6. 通关卡 ═══ */
.fcx-st-clear {
  display: none; margin-top: 18px;
  cursor: default; flex-direction: column; align-items: center; text-align: center;
  padding: 38px 44px 34px;
}
.fcx-st-clear.is-on { display: flex; }
.fcx-st-ribbon {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  background: rgba(255,176,32,.16); color: var(--fcx-amber-d);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
html[data-theme="luxe"] .fcx-st-ribbon { background: rgba(245,197,24,.14); color: var(--fcx-mint); }
.fcx-st-clear-h { font-family: var(--fcx-serif); font-size: 22px; font-weight: 600; color: var(--fcx-ink); margin: 0 0 6px; }
.fcx-st-clear-sub { font-size: 13.5px; font-weight: 600; color: var(--fcx-muted); line-height: 1.65; max-width: 330px; margin: 0 0 22px; }

.fcx-st-recap { width: 100%; max-width: 460px; margin-bottom: 22px; }
.fcx-st-recap-h {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: var(--fcx-faint); text-align: center; margin-bottom: 11px;
}
.fcx-st-recap-list { display: flex; flex-direction: column; gap: 6px; }
.fcx-st-recap-item {
  display: grid; grid-template-columns: 116px 30px 1fr;
  align-items: baseline; gap: 10px; text-align: left;
  padding: 9px 14px; background: var(--fcx-soft); border-radius: 11px;
}
.fcx-st-recap-w { font-family: var(--fcx-serif); font-weight: 600; font-size: 15px; color: var(--fcx-mint-d); word-break: break-word; }
html[data-theme="luxe"] .fcx-st-recap-w { color: var(--fcx-mint); }
.fcx-st-recap-pos { font-size: 12px; font-style: italic; color: var(--fcx-faint); }
.fcx-st-recap-cn { font-size: 13px; color: var(--fcx-muted); }

.fcx-st-reward {
  width: 100%; max-width: 460px; margin-bottom: 22px; text-align: left;
  background: rgba(255,150,0,.09); border-radius: 16px; padding: 14px 18px;
}
html[data-theme="luxe"] .fcx-st-reward { background: rgba(245,197,24,.08); }
.fcx-st-reward-eye { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--fcx-amber-d); margin-bottom: 4px; }
html[data-theme="luxe"] .fcx-st-reward-eye { color: var(--fcx-mint); }
.fcx-st-reward-h { font-size: 14.5px; font-weight: 700; color: var(--fcx-ink); }

/* ═══ 7. 动效（仅 cartoon 生效，luxe 全局掐 @keyframes，与 flashcards.css 同） ═══ */
@keyframes fcx-st-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fcx-st-slide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fcx-st-pop { 0%,100% { transform: scale(1); } 40% { transform: scale(1.03); } }
@keyframes fcx-st-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.fcx-st-opt.is-ok { animation: fcx-st-pop .4s cubic-bezier(.2,.7,.2,1); }
.fcx-st-opt.is-no { animation: fcx-st-shake .4s; }

/* ═══ 8. 窄屏 ═══ */
@media (max-width: 760px) {
  .fcx-st-paper { padding: 30px 26px 28px; }
  .fcx-st-flow, .fcx-st-now-line { font-size: 16.5px; }
  .fcx-st-opts { grid-template-columns: 1fr; }
  .fcx-st-foot { flex-direction: column; align-items: stretch; }
  .fcx-st-go { justify-content: center; }
  .fcx-st-clear { padding: 30px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .fcx-st-frag-fresh, .fcx-st-opt.is-ok, .fcx-st-opt.is-no, .fcx-st-fb.is-on { animation: none; }
  .fcx-st-now, .fcx-st-prog-track i, .fcx-st-ch-bar i { transition-duration: .01ms; }
}

/* ════════════════════════════════════════════════════════════════════════
   章节明信片墙 · 2026-05-27 批 3 收编（postcards 范式落地到 #/story）
   .fcx-st-ch.is-postcard 启用横版明信片视觉
   ════════════════════════════════════════════════════════════════════════ */
.fcx-st-shelf:has(.is-postcard) {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px 24px;
}
.fcx-st-ch.is-postcard {
  /* 重写卡片底色 + 形状（去圆角变明信片直角，加纸感阴影） */
  aspect-ratio: 3 / 2;
  background: #fdfaf2;
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: block;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 2px 4px rgba(0,0,0,.06),
    0 18px 30px -16px rgba(0,0,0,.18);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
/* 手贴墙感：依次微旋转 */
.fcx-st-ch.is-postcard:nth-child(9n+1) { transform: rotate(-1.6deg); }
.fcx-st-ch.is-postcard:nth-child(9n+2) { transform: rotate(.9deg); }
.fcx-st-ch.is-postcard:nth-child(9n+3) { transform: rotate(-.4deg); }
.fcx-st-ch.is-postcard:nth-child(9n+4) { transform: rotate(1.4deg); }
.fcx-st-ch.is-postcard:nth-child(9n+5) { transform: rotate(-1.2deg); }
.fcx-st-ch.is-postcard:nth-child(9n+6) { transform: rotate(.6deg); }
.fcx-st-ch.is-postcard:nth-child(9n+7) { transform: rotate(-.9deg); }
.fcx-st-ch.is-postcard:nth-child(9n+8) { transform: rotate(1.1deg); }
.fcx-st-ch.is-postcard:nth-child(9n+9) { transform: rotate(-1.4deg); }
.fcx-st-ch.is-postcard:hover {
  transform: rotate(0) scale(1.04);
  box-shadow:
    0 4px 8px rgba(0,0,0,.1),
    0 32px 48px -20px rgba(0,0,0,.28);
  z-index: 5;
}
.fcx-st-ch.is-postcard.is-locked { cursor: not-allowed; opacity: .68; }
.fcx-st-ch.is-postcard.is-locked:hover { transform: rotate(0) scale(1); }

/* 左 60% 彩色"风景"区 + 大字母 */
.fcx-st-ch.is-postcard .fcx-pc-img {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 60%;
  display: flex; align-items: center; justify-content: center;
}
.fcx-st-ch.is-postcard .fcx-pc-letter {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  font-size: 72px; color: rgba(255,255,255,.92);
  letter-spacing: -.02em;
}
/* 9 种章节配色 */
.fcx-st-ch.is-postcard.c1 .fcx-pc-img { background: linear-gradient(150deg, #c97d60 0%, #6a3a1f 100%); }
.fcx-st-ch.is-postcard.c2 .fcx-pc-img { background: linear-gradient(150deg, #4a6a8a 0%, #1f3a52 100%); }
.fcx-st-ch.is-postcard.c3 .fcx-pc-img { background: linear-gradient(150deg, #2a3a4c 0%, #0f1a26 100%); }
.fcx-st-ch.is-postcard.c4 .fcx-pc-img { background: linear-gradient(150deg, #6a4a3a 0%, #3a2418 100%); }
.fcx-st-ch.is-postcard.c5 .fcx-pc-img { background: linear-gradient(150deg, #8a7a52 0%, #4a3a18 100%); }
.fcx-st-ch.is-postcard.c6 .fcx-pc-img { background: linear-gradient(150deg, #5a8a6a 0%, #2a4a3a 100%); }
.fcx-st-ch.is-postcard.c7 .fcx-pc-img { background: linear-gradient(150deg, #8a5a8a 0%, #4a2a52 100%); }
.fcx-st-ch.is-postcard.c8 .fcx-pc-img { background: linear-gradient(150deg, #c8a060 0%, #6a4a1f 100%); }
.fcx-st-ch.is-postcard.c9 .fcx-pc-img { background: linear-gradient(150deg, #8a3a3a 0%, #4a1818 100%); }
.fcx-st-ch.is-postcard.locked .fcx-pc-img {
  background: repeating-linear-gradient(45deg, #e0d8c4 0 12px, #d4cab2 12px 13px);
}
.fcx-st-ch.is-postcard.locked .fcx-pc-letter { color: rgba(74,58,42,.42); }

/* 右 40% 文字 + 邮票 */
.fcx-st-ch.is-postcard .fcx-pc-side {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  padding: 12px 14px 12px 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  background: #fdfaf2;
}
.fcx-st-ch.is-postcard .fcx-pc-stamp {
  align-self: flex-end;
  width: 36px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  font-size: 12px; color: #b8423a;
  background:
    radial-gradient(circle at 30% 30%, rgba(184,66,58,.12) 0 10px, transparent 11px),
    #fdfaf2;
  box-shadow: inset 0 0 0 1px rgba(184,66,58,.36);
}
.fcx-st-ch.is-postcard .fcx-pc-text {
  margin-top: 4px;
}
.fcx-st-ch.is-postcard .fcx-pc-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: #8a7a62;
  margin: 0 0 4px;
}
.fcx-st-ch.is-postcard .fcx-pc-name {
  font-family: 'Fraunces', 'Noto Serif SC', serif;
  font-style: italic; font-weight: 500;
  font-size: 15px; line-height: 1.2;
  color: #1a1410;
  margin: 0 0 6px;
  letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fcx-st-ch.is-postcard .fcx-pc-quote {
  font-family: 'Newsreader', serif;
  font-style: italic; font-weight: 400;
  font-size: 12.5px; line-height: 1.4;
  color: #4a3a2a;
  margin: 0;
  border-left: 2px solid #4ba902;
  padding-left: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fcx-st-ch.is-postcard .fcx-pc-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #8a7a62;
}
.fcx-st-ch.is-postcard .fcx-pc-status {
  font-weight: 600;
}
.fcx-st-ch.is-postcard .fcx-pc-status.is-done    { color: #4ba902; }
.fcx-st-ch.is-postcard .fcx-pc-status.is-doing   { color: #c97d20; }
.fcx-st-ch.is-postcard .fcx-pc-status.is-new     { color: #1cb0f6; }
.fcx-st-ch.is-postcard .fcx-pc-status.is-locked  { color: #8a7a62; }
.fcx-st-ch.is-postcard .fcx-pc-status.is-plus    { color: #c97d20; }
.fcx-st-ch.is-postcard .fcx-pc-date {
  color: #8a7a62; opacity: .8;
}

/* luxe 主题：明信片自己保留暖米色（物品感），但通配杀手会吃掉字色，要反杀 */
html[data-theme="luxe"] .fcx-st-ch.is-postcard { background: #fdfaf2; }
html[data-theme="luxe"] .fcx-st-ch.is-postcard .fcx-pc-side { background: #fdfaf2; }
html[data-theme="luxe"] .fcx-st-ch.is-postcard .fcx-pc-name {
  color: #1a1410 !important; -webkit-text-fill-color: #1a1410 !important;
}
html[data-theme="luxe"] .fcx-st-ch.is-postcard .fcx-pc-no,
html[data-theme="luxe"] .fcx-st-ch.is-postcard .fcx-pc-quote,
html[data-theme="luxe"] .fcx-st-ch.is-postcard .fcx-pc-date,
html[data-theme="luxe"] .fcx-st-ch.is-postcard .fcx-pc-foot {
  color: #4a3a2a !important; -webkit-text-fill-color: #4a3a2a !important;
}

@media (prefers-reduced-motion: reduce) {
  .fcx-st-ch.is-postcard { transition: none; }
}