/* ════════════════════════════════════════════════════════════════
   feed.css — 极简卡片流「刷一刷」（一屏一卡 · 滚轮翻页 · 翻卡过场）
   结构/布局规则两个主题通用；
   配色拆两套：luxe = 暗底金字沉浸；cartoon = 奶油亮底卡通。
   ════════════════════════════════════════════════════════════════ */

/* ═══ 1. 沉浸模式：隐藏 sidebar / aside / footer，main 占满 viewport ═══
   仅当 body 上有 .feed-immersive class 时生效（由 initFeed 加上） */
body.feed-immersive .sidebar { display: none !important; }
body.feed-immersive .aside-right,
body.feed-immersive #aside-toggle { display: none !important; }
body.feed-immersive footer,
body.feed-immersive .footer,
body.feed-immersive .mobile-tabbar { display: none !important; }
body.feed-immersive .app {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: none !important;
}
body.feed-immersive .main {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  grid-area: unset !important;
}
body.feed-immersive .view { padding: 0 !important; }

/* 「刷一刷」顶层元素不吃 #view 的入场动画 lx-view-enter——
   该动画用 fill-mode:both 把 transform/opacity 钉死成终态，
   会盖掉抽屉的 translateX(100%) 和蒙层的 opacity:0，导致抽屉关不上。
   （luxe 主题不受影响：luxe.css 全局关掉了 @keyframes。） */
#view > .feed-root,
#view > .feed-menu-btn,
#view > .feed-drawer-mask,
#view > .feed-drawer { animation: none !important; }

/* ═══ 2. 浮动菜单按钮 + 抽屉（结构） ═══ */
body.feed-immersive .feed-menu-btn {
  position: fixed;
  top: 24px; left: 28px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  z-index: 10000;
  transition: background .15s, transform .15s;
}
body.feed-immersive .feed-menu-btn:hover { transform: scale(1.06); }
body.feed-immersive .feed-menu-btn svg { width: 18px; height: 18px; }

.feed-drawer-mask {
  position: fixed; inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
  z-index: 9998;
}
.feed-drawer-mask.show { opacity: 1; pointer-events: auto; }
.feed-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 320px; max-width: 86vw; height: 100vh;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  padding: 80px 32px 32px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 4px;
}
.feed-drawer.show { transform: translateX(0); }
.feed-drawer a {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: .02em;
  transition: color .15s, padding-left .15s;
}
.feed-drawer a:hover { padding-left: 8px; }
.feed-drawer-section {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 24px 0 6px;
}
.feed-drawer-section:first-child { margin-top: 0; }

/* ═══ 3. 卡片牌组：一屏一卡，滚轮翻页（结构） ═══ */
.feed-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.feed-session-hud {
  position: fixed;
  top: 24px;
  left: 28px;
  z-index: 10000;
  width: min(240px, calc(100vw - 96px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.feed-session-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.feed-session-kicker {
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 700;
}
.feed-session-copy strong {
  font-size: 15px;
  font-weight: 800;
}
.feed-session-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}
.feed-session-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .28s ease;
}
/* 整条 track 纵向堆叠所有 stage，靠 translateY 上移露出当前张 */
.feed-track {
  will-change: transform;
  transition: transform .58s cubic-bezier(.5, .03, .15, 1);
}
.feed-stage {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  box-sizing: border-box;
}
.feed-stage-hero .feed-greet {
  max-width: 640px;
  width: 100%;
}
/* 开场页底部翻卡提示 */
.feed-scroll-cue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  font-size: 13px;
  letter-spacing: .04em;
}
.feed-scroll-cue svg { width: 18px; height: 18px; }

/* 开场问候（结构） */
.feed-greet {
  padding: 28px 0 36px;
  margin-bottom: 4px;
}
.feed-greet-meta {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .35em;
  font-weight: 600;
  margin-bottom: 28px;
  transition: opacity .15s ease;
}
.feed-greet-meta:hover { opacity: .72; }
.feed-greet-title {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 24px;
}
.feed-greet-sub {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  max-width: 480px;
}

/* 开场页模式选择 —— 两个大方块，并排 */
.feed-mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  max-width: 520px;
}
.feed-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 22px 20px;
  border: 0;
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background .18s ease, transform .18s ease;
}
.feed-mode-card:hover { background: rgba(255, 255, 255, .07); transform: translateY(-2px); }
.feed-mode-card:active { transform: translateY(0); }
.feed-mode-ic {
  width: 24px;
  height: 24px;
  opacity: .85;
}
.feed-mode-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.feed-mode-sub {
  font-size: 13px;
  line-height: 1.5;
  opacity: .65;
}
html[data-theme="luxe"] .feed-mode-card {
  background: rgba(245, 197, 24, .06);
  color: rgba(255, 255, 255, .92);
}
html[data-theme="luxe"] .feed-mode-card:hover { background: rgba(245, 197, 24, .12); }
html[data-theme="luxe"] .feed-mode-ic { color: #f5c518; opacity: 1; }
html[data-theme="luxe"] .feed-mode-title { color: rgba(255, 255, 255, .96); }
html[data-theme="luxe"] .feed-mode-sub { color: rgba(255, 255, 255, .55); }
html[data-theme="cartoon"] .feed-mode-card {
  background: #fff;
  color: #2b2b2b;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .06);
}
html[data-theme="cartoon"] .feed-mode-card:hover { box-shadow: 0 6px 0 0 rgba(0, 0, 0, .08); }
html[data-theme="cartoon"] .feed-mode-ic { color: #58cc02; opacity: 1; }
html[data-theme="cartoon"] .feed-mode-title { color: #2b2b2b; }
html[data-theme="cartoon"] .feed-mode-sub { color: #6f6857; }

/* 窄屏：两个按钮纵向叠 */
@media (max-width: 520px) {
  .feed-mode-picker { grid-template-columns: 1fr; max-width: 380px; }
}

/* 卡片基底：一张居中卡，非当前张缩小压暗 → 切换时放大提亮（翻卡过场） */
.feed-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 84dvh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 38px 40px;
  box-sizing: border-box;
  opacity: .3;
  transform: scale(.9);
  transition: opacity .5s cubic-bezier(.33, 1, .68, 1),
              transform .5s cubic-bezier(.33, 1, .68, 1);
}
.feed-stage.is-current .feed-card {
  opacity: 1;
  transform: scale(1);
}
.feed-card.liked::after {
  content: "♡";
  position: absolute;
  top: 22px; right: 26px;
  font-size: 28px;
  animation: fc-like-pop .4s cubic-bezier(.34, 1.56, .64, 1);
  animation-name: fc-like-pop !important;
}
@keyframes fc-like-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 卡片内文字层级（结构：字号 / 间距 / 行高） */
.feed-card .fc-meta {
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.feed-card .fc-word {
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0;
}
.feed-card .fc-pron {
  font-size: 18px;
  display: flex; align-items: center; gap: 12px;
  letter-spacing: .02em;
}
.feed-card .fc-pos {
  font-size: 14px;
  font-style: italic;
}
.feed-card .fc-def {
  font-size: 22px;
  line-height: 1.6;
  margin: 4px 0 0;
  font-weight: 400;
}
.feed-card .fc-ex {
  font-size: 19px;
  line-height: 1.7;
  font-style: italic;
  margin: 8px 0 0;
}
.feed-card .fc-phrase {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0;
}
.feed-card .fc-meaning {
  font-size: 22px;
  margin: 4px 0 0;
}
.feed-card .fc-prose {
  font-size: 22px;
  line-height: 1.75;
  margin: 0;
}
.feed-card .fc-cta {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: .02em;
  transition: opacity .15s;
}
.feed-card .fc-cta:hover { opacity: .8; }
.feed-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.feed-card-actions button,
.feed-summary-actions a,
.feed-summary-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, background .15s, color .15s, box-shadow .15s;
}
.feed-card-actions button:hover,
.feed-summary-actions a:hover,
.feed-summary-actions button:hover { transform: translateY(-1px); }
.feed-card-actions button:active,
.feed-summary-actions a:active,
.feed-summary-actions button:active { transform: translateY(0) scale(.98); }
.feed-summary-card {
  width: min(680px, 100%);
  border-radius: 18px;
  padding: 40px;
  box-sizing: border-box;
}
.feed-summary-card h2 {
  margin: 0 0 12px;
  font-size: 42px;
  line-height: 1.1;
}
.feed-summary-card p {
  margin: 0;
  font-size: 20px;
  line-height: 1.7;
}
.feed-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 28px 0;
}
.feed-summary-grid span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  border-radius: 14px;
  padding: 14px 12px;
  font-size: 13px;
  text-align: center;
}
.feed-summary-grid b {
  font-size: 28px;
  line-height: 1;
}
.feed-summary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 卡片里的 <w> 单词：可点 + hot 微脉冲（结构） */
.feed-card w {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  padding: 0 1px;
}
.feed-card w.hot {
  border-radius: 2px;
  padding: 0 3px;
}
.feed-card w.self {
  font-weight: 600;
}

/* 加载点点（结构） */
.feed-loader {
  display: none;
  justify-content: center;
  gap: 8px;
  padding: 60px 0;
}
.feed-loader.show { display: flex; }
.feed-loader span {
  width: 8px; height: 8px; border-radius: 50%;
  animation: feed-dot 1.4s ease-in-out infinite;
  animation-name: feed-dot !important;
}
.feed-loader span:nth-child(2) { animation-delay: .15s; }
.feed-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes feed-dot {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* 点词浮窗（结构） */
.feed-tooltip {
  position: absolute;
  max-width: 300px;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 9999;
}
.feed-tooltip.show { opacity: 1; }
.feed-tooltip .ft-w b {
  font-size: 17px;
  font-weight: 600;
}
.feed-tooltip .ft-pos {
  font-size: 12px;
  margin-left: 8px;
  font-style: italic;
  opacity: .55;
}
.feed-tooltip .ft-ipa {
  font-size: 13px;
  margin: 4px 0 6px;
  opacity: .65;
}
.feed-tooltip .ft-def { margin: 4px 0; }
.feed-tooltip .ft-ex {
  font-style: italic;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  opacity: .55;
}

/* ════════════════════════════════════════════════════════════════
   4. LUXE 配色 — 暗底金字沉浸
   ════════════════════════════════════════════════════════════════ */
html[data-theme="luxe"] body.feed-immersive .feed-menu-btn {
  background: rgba(22, 22, 22, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 197, 24, .25);
  color: var(--lx-gold, #F5C518);
}
html[data-theme="luxe"] body.feed-immersive .feed-menu-btn:hover {
  background: rgba(245, 197, 24, .14);
}
html[data-theme="luxe"] .feed-drawer-mask { background: rgba(0, 0, 0, .55); }
html[data-theme="luxe"] .feed-drawer {
  background: #0A0A0A;
  border-left: 1px solid rgba(245, 197, 24, .15);
  font-family: "Inter", "Noto Sans SC", system-ui, sans-serif;
}
html[data-theme="luxe"] .feed-drawer a {
  color: #ECECEC;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
html[data-theme="luxe"] .feed-drawer a:hover { color: var(--lx-gold, #F5C518); }
html[data-theme="luxe"] .feed-drawer-section {
  color: rgba(255, 255, 255, .35);
  font-family: "Space Grotesk", sans-serif;
}
html[data-theme="luxe"] .feed-root {
  background: #0a0a0a;
  font-family: "Inter", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  color: #ECECEC;
}
html[data-theme="luxe"] .feed-session-hud { color: rgba(245, 197, 24, .86); }
html[data-theme="luxe"] .feed-session-bar { background: rgba(255, 255, 255, .10); }
html[data-theme="luxe"] .feed-session-bar i { background: var(--lx-gold, #F5C518); }
html[data-theme="luxe"] .feed-scroll-cue { color: rgba(245, 197, 24, .6); }
html[data-theme="luxe"] .feed-greet-meta {
  color: rgba(245, 197, 24, .65);
  font-family: "Space Grotesk", "Inter", sans-serif;
}
html[data-theme="luxe"] .feed-greet-title {
  font-family: "Space Grotesk", "Inter", "Noto Sans SC", sans-serif;
  color: #ECECEC;
}
html[data-theme="luxe"] .feed-greet-sub { color: rgba(255, 255, 255, .5); }
html[data-theme="luxe"] .feed-card { background: #1c1c1c; }
html[data-theme="luxe"] .feed-summary-card {
  background: #1c1c1c;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
}
html[data-theme="luxe"] .feed-summary-card h2 { color: #ECECEC; }
html[data-theme="luxe"] .feed-summary-card p { color: rgba(255, 255, 255, .62); }
html[data-theme="luxe"] .feed-summary-grid span {
  background: rgba(245, 197, 24, .08);
  color: rgba(255, 255, 255, .66);
}
html[data-theme="luxe"] .feed-summary-grid b { color: var(--lx-gold, #F5C518); }
html[data-theme="luxe"] .feed-card-actions button,
html[data-theme="luxe"] .feed-summary-actions a,
html[data-theme="luxe"] .feed-summary-actions button {
  background: rgba(245, 197, 24, .10);
  color: var(--lx-gold, #F5C518);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, .22);
}
html[data-theme="luxe"] .feed-card-actions button.is-on,
html[data-theme="luxe"] .feed-card-actions button:hover,
html[data-theme="luxe"] .feed-summary-actions a:hover,
html[data-theme="luxe"] .feed-summary-actions button:hover {
  background: rgba(245, 197, 24, .20);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, .44);
}
html[data-theme="luxe"] .feed-card.liked::after { color: var(--lx-gold, #F5C518); }
html[data-theme="luxe"] .feed-card .fc-meta {
  color: rgba(255, 255, 255, .35);
  font-family: "Space Grotesk", "Inter", sans-serif;
}
html[data-theme="luxe"] .feed-card .fc-word {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: #ECECEC;
}
html[data-theme="luxe"] .fc-recall .fc-word { color: var(--lx-gold, #F5C518); }
html[data-theme="luxe"] .feed-card .fc-pron {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: rgba(255, 255, 255, .5);
}
html[data-theme="luxe"] .feed-card .fc-pos { color: rgba(245, 197, 24, .7); }
html[data-theme="luxe"] .feed-card .fc-def {
  color: #D4D4D4;
  font-family: "Inter", "Noto Sans SC", sans-serif;
}
html[data-theme="luxe"] .feed-card .fc-ex { color: rgba(255, 255, 255, .55); }
html[data-theme="luxe"] .feed-card .fc-phrase {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: #ECECEC;
}
html[data-theme="luxe"] .feed-card .fc-meaning {
  color: #D4D4D4;
  font-family: "Inter", "Noto Sans SC", sans-serif;
}
html[data-theme="luxe"] .feed-card .fc-prose {
  color: #D4D4D4;
  font-family: "Inter", "Noto Sans SC", sans-serif;
}
html[data-theme="luxe"] .feed-card .fc-cta { color: var(--lx-gold, #F5C518); }
html[data-theme="luxe"] .feed-card w:hover {
  color: var(--lx-gold, #F5C518);
  border-bottom-color: rgba(245, 197, 24, .45);
}
html[data-theme="luxe"] .feed-card w.hot {
  color: var(--lx-gold, #F5C518) !important;
  border-bottom: 1.5px solid var(--lx-gold, #F5C518);
  background: rgba(245, 197, 24, .06);
  animation: feed-hot-pulse 2.4s ease-in-out infinite;
  animation-name: feed-hot-pulse !important;
}
html[data-theme="luxe"] .feed-card w.self {
  color: var(--lx-gold, #F5C518);
  border-bottom: 1px dashed rgba(245, 197, 24, .55);
}
@keyframes feed-hot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
  50%      { box-shadow: 0 0 10px 2px rgba(245, 197, 24, .22); }
}
html[data-theme="luxe"] .feed-loader span { background: rgba(245, 197, 24, .45); }
html[data-theme="luxe"] .feed-tooltip {
  background: #161616;
  border: 1px solid rgba(245, 197, 24, .25);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55);
  color: #ECECEC;
  font-family: "Inter", "Noto Sans SC", sans-serif;
}
html[data-theme="luxe"] .feed-tooltip .ft-w b {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: var(--lx-gold, #F5C518);
}
html[data-theme="luxe"] .feed-tooltip .ft-def { color: #ECECEC; }

/* ════════════════════════════════════════════════════════════════
   5. CARTOON 配色 — 奶油亮底卡通（薄荷绿/天蓝/橙/紫）
   ════════════════════════════════════════════════════════════════ */
html[data-theme="cartoon"] body.feed-immersive .feed-menu-btn {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(60, 50, 30, .14);
  color: #3c3c3c;
}
html[data-theme="cartoon"] body.feed-immersive .feed-menu-btn:hover {
  background: #fff4e0;
}
html[data-theme="cartoon"] .feed-drawer-mask { background: rgba(45, 35, 20, .26); }
html[data-theme="cartoon"] .feed-drawer {
  background: #fffdf8;
  box-shadow: -10px 0 36px rgba(60, 50, 30, .16);
  font-family: var(--font-body);
}
html[data-theme="cartoon"] .feed-drawer a {
  color: #4b4b4b;
  border-bottom: 1px solid rgba(60, 50, 30, .07);
  font-weight: 600;
}
html[data-theme="cartoon"] .feed-drawer a:hover { color: #1cb0f6; }
html[data-theme="cartoon"] .feed-drawer-section {
  color: #b0a48f;
  font-family: var(--font-display);
  font-weight: 600;
}
html[data-theme="cartoon"] .feed-root {
  background: #fff8ee;
  font-family: var(--font-body);
  color: #4b4b4b;
}
html[data-theme="cartoon"] .feed-session-hud { color: #3c3c3c; }
html[data-theme="cartoon"] .feed-session-bar { background: rgba(60, 50, 30, .12); }
html[data-theme="cartoon"] .feed-session-bar i { background: #58cc02; }
html[data-theme="cartoon"] .feed-scroll-cue { color: #b3a892; }
html[data-theme="cartoon"] .feed-greet-meta {
  color: #1cb0f6;
  font-family: var(--font-display);
}
html[data-theme="cartoon"] .feed-greet-title {
  font-family: var(--font-display);
  color: #3c3c3c;
}
html[data-theme="cartoon"] .feed-greet-sub { color: #8a8276; }
html[data-theme="cartoon"] .feed-card {
  background: #ffffff;
  box-shadow: 0 10px 34px rgba(60, 50, 30, .12);
}
html[data-theme="cartoon"] .feed-summary-card {
  background: #ffffff;
  box-shadow: 0 10px 34px rgba(60, 50, 30, .12);
}
html[data-theme="cartoon"] .feed-summary-card h2 { color: #3c3c3c; }
html[data-theme="cartoon"] .feed-summary-card p { color: #8a8276; }
html[data-theme="cartoon"] .feed-summary-grid span {
  background: #fff4e0;
  color: #8a8276;
}
html[data-theme="cartoon"] .feed-summary-grid b { color: #ff9600; }
html[data-theme="cartoon"] .feed-card-actions button,
html[data-theme="cartoon"] .feed-summary-actions a,
html[data-theme="cartoon"] .feed-summary-actions button {
  background: #e8f5ff;
  color: #1399e0;
}
html[data-theme="cartoon"] .feed-card-actions button.is-on,
html[data-theme="cartoon"] .feed-card-actions button:hover,
html[data-theme="cartoon"] .feed-summary-actions a:hover,
html[data-theme="cartoon"] .feed-summary-actions button:hover {
  background: #d7f7c2;
  color: #4ba902;
}
html[data-theme="cartoon"] .feed-card.liked::after { color: #ff5a8a; }
html[data-theme="cartoon"] .feed-card .fc-meta {
  color: #b0a48f;
  font-family: var(--font-display);
}
html[data-theme="cartoon"] .feed-card .fc-word {
  font-family: var(--font-display);
  color: #3c3c3c;
}
html[data-theme="cartoon"] .fc-recall .fc-word { color: #1cb0f6; }
html[data-theme="cartoon"] .feed-card .fc-pron {
  font-family: var(--font-display);
  color: #9b9384;
}
html[data-theme="cartoon"] .feed-card .fc-pos { color: #ff9600; }
html[data-theme="cartoon"] .feed-card .fc-def {
  color: #4b4b4b;
  font-family: var(--font-body);
}
html[data-theme="cartoon"] .feed-card .fc-ex { color: #8a8276; }
html[data-theme="cartoon"] .feed-card .fc-phrase {
  font-family: var(--font-display);
  color: #3c3c3c;
}
html[data-theme="cartoon"] .feed-card .fc-meaning {
  color: #4b4b4b;
  font-family: var(--font-body);
}
html[data-theme="cartoon"] .feed-card .fc-prose {
  color: #4b4b4b;
  font-family: var(--font-body);
}
html[data-theme="cartoon"] .feed-card .fc-cta {
  color: #1cb0f6;
  font-weight: 700;
  font-family: var(--font-display);
}
html[data-theme="cartoon"] .feed-card w:hover {
  color: #1cb0f6;
  border-bottom-color: rgba(28, 176, 246, .45);
}
html[data-theme="cartoon"] .feed-card w.hot {
  color: #ff9600 !important;
  border-bottom: 1.5px solid #ff9600;
  background: rgba(255, 150, 0, .1);
  animation: feed-hot-pulse-c 2.4s ease-in-out infinite;
  animation-name: feed-hot-pulse-c !important;
}
html[data-theme="cartoon"] .feed-card w.self {
  color: #1cb0f6;
  border-bottom: 1px dashed rgba(28, 176, 246, .55);
}
@keyframes feed-hot-pulse-c {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 150, 0, 0); }
  50%      { box-shadow: 0 0 10px 2px rgba(255, 150, 0, .28); }
}
html[data-theme="cartoon"] .feed-loader span { background: rgba(28, 176, 246, .5); }
html[data-theme="cartoon"] .feed-tooltip {
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(60, 50, 30, .2);
  color: #4b4b4b;
  font-family: var(--font-body);
}
html[data-theme="cartoon"] .feed-tooltip .ft-w b {
  font-family: var(--font-display);
  color: #1cb0f6;
}
html[data-theme="cartoon"] .feed-tooltip .ft-def { color: #3c3c3c; }

/* ════════════════════════════════════════════════════════════════
   7. 一键翻译 · 磨砂揭幕（点按钮：英文蒙雾上浮，中文从背后清晰升起）
   ════════════════════════════════════════════════════════════════ */
.fc-tr { display: flex; flex-direction: column; align-items: flex-start; }
.fc-tr-stack { display: grid; width: 100%; }
/* 英文 / 中文叠在同一格里，盒高取较高的一方 */
.fc-tr-stack > * { grid-area: 1 / 1; margin: 0; }

.fc-tr-en {
  transition: filter .5s cubic-bezier(.4, 0, .2, 1),
              opacity .5s cubic-bezier(.4, 0, .2, 1),
              transform .5s cubic-bezier(.4, 0, .2, 1);
}
.fc-tr-cn {
  font-size: 20px;
  line-height: 1.78;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  pointer-events: none;
  transition: filter .58s cubic-bezier(.33, 1, .68, 1) .07s,
              opacity .5s ease .07s,
              transform .58s cubic-bezier(.33, 1, .68, 1) .07s;
}
/* 揭幕态：英文蒙雾、淡出、轻轻上浮；中文清晰升起到前面 */
.fc-tr[data-tr="on"] .fc-tr-en {
  filter: blur(7px);
  opacity: .2;
  transform: translateY(-8px) scale(.985);
  pointer-events: none;
}
.fc-tr[data-tr="on"] .fc-tr-cn {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
}

.fc-tr-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
  padding: 7px 14px 7px 11px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s, transform .12s, box-shadow .16s;
}
.fc-tr-btn:hover { transform: translateY(-1px); }
.fc-tr-btn:active { transform: translateY(0) scale(.97); }
.fc-tr-ic {
  width: 15px; height: 15px;
  transition: transform .45s cubic-bezier(.33, 1, .68, 1);
}
.fc-tr[data-tr="on"] .fc-tr-ic { transform: rotate(180deg); }

html[data-theme="luxe"] .fc-tr-cn {
  color: #F3F3F3;
  font-family: "Inter", "Noto Sans SC", sans-serif;
}
html[data-theme="luxe"] .fc-tr-btn {
  background: rgba(245, 197, 24, .12);
  color: var(--lx-gold, #F5C518);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, .3);
}
html[data-theme="luxe"] .fc-tr-btn:hover {
  background: rgba(245, 197, 24, .2);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, .55);
}

html[data-theme="cartoon"] .fc-tr-cn {
  color: #2f2f2f;
  font-family: var(--font-body);
  font-weight: 500;
}
html[data-theme="cartoon"] .fc-tr-btn {
  background: #e8f5ff;
  color: #1399e0;
}
html[data-theme="cartoon"] .fc-tr-btn:hover { background: #d4ecff; }

/* ════════════════════════════════════════════════════════════════
   ≤480px 真手机：
   ① 滚轮/方向键提示在手机无效，隐藏
   ② feed 浮动菜单按钮跟 mobile-header 汉堡视觉冲突，下移到 header 之下
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .feed-scroll-cue { display: none; }

  body.feed-immersive .feed-menu-btn {
    top: calc(56px + 12px);
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ════════════════════════════════════════════════════════════════
   8. 移动端字号自适应（结构，两主题通用）
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .feed-session-hud {
    top: 12px;
    left: 16px;
    width: min(184px, calc(100vw - 80px));
  }
  .feed-stage { padding: 56px 16px; }
  .feed-greet { padding: 0; }
  .feed-greet-title { font-size: 32px; }
  .feed-greet-sub { font-size: 14px; }
  .feed-card { padding: 26px 22px; gap: 12px; }
  .feed-card .fc-word { font-size: 52px; }
  .feed-card .fc-phrase { font-size: 36px; }
  .feed-card .fc-def,
  .feed-card .fc-meaning,
  .feed-card .fc-prose { font-size: 19px; }
  .feed-card .fc-ex { font-size: 17px; }
  .fc-tr-cn { font-size: 17px; }
  .feed-card-actions { gap: 6px; }
  .feed-card-actions button,
  .feed-summary-actions a,
  .feed-summary-actions button {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 12.5px;
  }
  .feed-summary-card { padding: 28px 22px; }
  .feed-summary-card h2 { font-size: 30px; }
  .feed-summary-card p { font-size: 17px; }
  .feed-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 减少动态效果：关掉翻卡过渡，直接跳 */
@media (prefers-reduced-motion: reduce) {
  .feed-track,
  .feed-card,
  .fc-tr-en,
  .fc-tr-cn,
  .fc-tr-ic { transition: none !important; }
}