/* Onomeo 学习之旅 · 纵向章节 + 章内 S 型小路径
   ① 期：3 章 × 6 关；章按顺序解锁，章内可乱跳；点关 = 切主题 + 跳 flashcards。
   类前缀 .lj-（lingualab journey），不和 style.css 旧 .journey-* 冲突。 */

.lj-page {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 96px;
  font-family: 'Nunito', 'Noto Sans SC', system-ui, sans-serif;
}

/* —— 页头 —— */
.lj-head {
  text-align: center;
  margin-bottom: 28px;
}
.lj-title {
  font: 800 28px 'Fredoka', 'Nunito', sans-serif;
  color: #1f2940;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.lj-sub {
  font: 500 14px 'Nunito', sans-serif;
  color: #7a8499;
  margin: 0;
}

/* —— 章节卡片 —— */
.lj-chapter {
  position: relative;
  background: #fff8ee;
  border-radius: 24px;
  padding: 22px 20px 36px;
  margin-bottom: 24px;
}

.lj-chapter-head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
  margin-bottom: 28px;
}
.lj-chapter-tag {
  grid-column: 1; grid-row: 1;
  font: 700 13px 'Nunito', sans-serif;
  color: var(--ch-color);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lj-chapter-name {
  grid-column: 1; grid-row: 2;
  font: 700 22px 'Fredoka', 'Nunito', sans-serif;
  color: #1f2940;
  margin: 0;
  letter-spacing: -0.01em;
}
.lj-chapter-desc {
  grid-column: 1; grid-row: 3;
  font: 500 13px 'Nunito', sans-serif;
  color: #7a8499;
  margin: 0;
}
.lj-chapter-prog {
  grid-column: 2; grid-row: 1;
  align-self: start;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--ch-color) 14%, white 86%);
  color: var(--ch-color-dark);
  border-radius: 999px;
  font: 700 13px 'Fredoka', 'Nunito', monospace;
  white-space: nowrap;
}

/* —— S 型关卡路径 —— */
.lj-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.lj-lesson {
  position: relative;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.lj-lesson:focus-visible .lj-lesson-btn {
  outline: 3px solid var(--ch-color);
  outline-offset: 4px;
}

/* —— 章节头：可点击切换折叠 —— */
.lj-chapter-head {
  cursor: pointer;
  user-select: none;
}
.lj-chapter-head:focus-visible {
  outline: 3px solid var(--ch-color);
  outline-offset: 4px;
  border-radius: 12px;
}
.lj-chapter-toggle {
  grid-column: 2; grid-row: 3;
  justify-self: end;
  align-self: end;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ch-color) 14%, white 86%);
  color: var(--ch-color-dark);
  transition: transform 0.25s ease, background 0.2s ease;
}
.lj-chapter-head:hover .lj-chapter-toggle {
  background: color-mix(in srgb, var(--ch-color) 24%, white 76%);
}
.lj-chapter.is-collapsed .lj-chapter-toggle {
  transform: rotate(-90deg);  /* ▼ 旋转成 ◀ */
}

/* 折叠：隐藏关卡列表 + 卡片紧凑 */
.lj-chapter.is-collapsed .lj-lessons,
.lj-chapter.is-collapsed .lj-constellation,
.lj-chapter.is-collapsed .lj-chapter-locked-banner {
  display: none;
}
.lj-chapter.is-collapsed {
  padding-bottom: 22px;
}

/* 锁章 banner（展开时显示，告诉用户先完成上一章） */
.lj-chapter-locked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 4px 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ch-color) 12%, white 88%);
  color: var(--ch-color-dark);
  font: 600 14px 'Nunito', 'Noto Sans SC', sans-serif;
  line-height: 1.35;
}
.lj-chapter-locked-banner svg { flex-shrink: 0; }
[data-theme="luxe"] .lj-chapter-locked-banner {
  background: rgba(201,168,76,.10);
  color: var(--lx-ink-dim, #A89060);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.22);
}

/* 星图容器（绝对定位 + SVG 装饰层） */
.lj-constellation {
  position: relative;
  margin: 16px auto 0;
  max-width: 400px;
  width: 100%;
}
.lj-constellation-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lj-bg-star { fill: rgba(255, 233, 168, 0.85); }
.lj-link {
  stroke: rgba(201, 168, 76, 0.55);
  stroke-width: 1.8;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
/* 关卡按钮：绝对定位，translate -50% 中心对齐 */
.lj-lesson.lj-star {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  outline: none;
}
/* 章末复习关强制居中（覆盖 left%，仅 translateX 调整不够） */
/* 竖排下章末复习居中；横版（data-layout="h"）尊重 inline left 不强占 50% */
.lj-constellation[data-layout="v"] .lj-lesson.lj-star[data-type="review"],
.lj-constellation:not([data-layout]) .lj-lesson.lj-star[data-type="review"] {
  left: 50% !important;
}
/* 光晕：hover/current/done 显示，模拟"星辰发光" */
.lj-star-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ch-color) 0%, transparent 65%);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.6s ease;
  z-index: 0;
}
.lj-lesson:hover:not(.is-locked) .lj-star-halo {
  opacity: 0.45;
}
.lj-lesson.is-done .lj-star-halo { opacity: 0.25; }
.lj-lesson.is-current .lj-star-halo {
  opacity: 0.6;
  animation: lj-halo-pulse 2.2s ease-out infinite;
}
@keyframes lj-halo-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.45; }
  50%      { transform: scale(1.45); opacity: 0.75; }
}
/* Luxe 主题：连线 + 光晕换金色 */
[data-theme="luxe"] .lj-bg-star { fill: rgba(255, 233, 168, 0.7); }
[data-theme="luxe"] .lj-link {
  stroke: rgba(201, 168, 76, 0.45);
  stroke-dasharray: 4 8;
}
[data-theme="luxe"] .lj-star-halo {
  background: radial-gradient(circle, var(--lx-gold-1, #FFE9A8) 0%, transparent 65%);
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="2"] .lj-star-halo,
[data-theme="luxe"] .lj-chapter[data-chapter-index="3"] .lj-star-halo {
  background: radial-gradient(circle, #d99a6a 0%, transparent 65%);
}

/* 关卡按钮 */
.lj-lesson-btn {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ch-color);
  color: white;
  box-shadow: 0 6px 0 0 var(--ch-color-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lj-lesson:hover:not(.is-locked) .lj-lesson-btn {
  transform: translateY(-1px);
}
.lj-lesson:active:not(.is-locked) .lj-lesson-btn {
  transform: translateY(4px);
  box-shadow: 0 2px 0 0 var(--ch-color-dark);
}

.lj-lesson-num {
  font: 700 28px 'Fredoka', 'Nunito', sans-serif;
  color: white;
  display: block;
  line-height: 1;
}
.lj-icon-check,
.lj-icon-lock,
.lj-icon-star {
  position: absolute;
  width: 34px;
  height: 34px;
  color: white;
  display: none;
}

/* —— 状态：未解锁 —— */
.lj-lesson.is-locked {
  cursor: not-allowed;
}
.lj-lesson.is-locked .lj-lesson-btn {
  background: #d4d7dc;
  box-shadow: 0 6px 0 0 #a8acb5;
}
.lj-lesson.is-locked .lj-lesson-num { display: none; }
.lj-lesson.is-locked .lj-icon-lock { display: block; }
.lj-lesson.is-locked .lj-lesson-label { color: #b0b6c2; }

/* —— 状态：可点击（默认 num 显示） —— */
.lj-lesson.is-available .lj-lesson-num { display: block; }

/* —— 状态：当前可玩（脉冲提示） —— */
.lj-lesson.is-current::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, 0);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--ch-color);
  animation: lj-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes lj-pulse {
  0%   { transform: translate(-50%, 0) scale(1);    opacity: 0.9; }
  100% { transform: translate(-50%, 0) scale(1.45); opacity: 0; }
}

/* —— 状态：已完成 —— */
.lj-lesson.is-done .lj-lesson-num { display: none; }
.lj-lesson.is-done .lj-icon-check { display: block; }
.lj-lesson.is-done .lj-lesson-btn {
  background: var(--ch-color-dark);
}

/* —— 章末复习关：金色 + 星星 —— */
.lj-lesson[data-type="review"] .lj-lesson-btn {
  background: #ffc800;
  box-shadow: 0 6px 0 0 #d4a700;
}
.lj-lesson[data-type="review"].is-available .lj-lesson-num,
.lj-lesson[data-type="review"].is-current .lj-lesson-num {
  display: none;
}
.lj-lesson[data-type="review"].is-available .lj-icon-star,
.lj-lesson[data-type="review"].is-current .lj-icon-star {
  display: block;
}
.lj-lesson[data-type="review"].is-done .lj-icon-star { display: none; }
.lj-lesson[data-type="review"].is-done .lj-lesson-btn {
  background: #d4a700;
}

/* —— 关卡标签 —— */
.lj-lesson-label {
  margin-top: 10px;
  font: 600 13px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #4a5266;
  text-align: center;
  max-width: 100px;
  line-height: 1.3;
}

/* —— 页脚 —— */
.lj-foot {
  text-align: center;
  margin-top: 24px;
}
.lj-back {
  display: inline-block;
  font: 600 14px 'Nunito', sans-serif;
  color: #7a8499;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.lj-back:hover { color: #4648d4; background: rgba(70, 72, 212, 0.08); }

/* —— 移动端 —— */
@media (max-width: 480px) {
  .lj-page { padding: 16px 12px 96px; }
  .lj-chapter { padding: 20px 14px 30px; border-radius: 20px; }
  .lj-chapter-name { font-size: 20px; }
  /* 移动端缩短 S 形振幅（72→56） */
  .lj-lesson {
    transform: translateX(calc(sin(var(--lj-pos, 0) * 45deg) * 56px));
  }
  .lj-lesson[data-type="review"] { transform: translateX(0); }
}

/* ============================================
   Luxe（葡京金箔）主题完整适配
   token 来自 css/luxe.css :root
   底色 #05030B / 卡片 #130F1E / 金 #C9A84C / 米色文字 #F0E4C4 / Lora 衬线
   ============================================ */

/* —— Journey 主页 —— */
[data-theme="luxe"] .lj-title {
  color: var(--lx-gold-1, #FFE9A8);
  font-family: var(--lx-serif, 'Lora', 'Noto Serif SC', serif);
  letter-spacing: 0.02em;
}
[data-theme="luxe"] .lj-sub {
  color: var(--lx-ink-dim, #A89060);
  font-family: var(--lx-serif, 'Lora', serif);
  font-style: italic;
}
/* 毛玻璃章卡：半透 + 背后模糊 + 金箔细描边 + 顶部高光 */
[data-theme="luxe"] .lj-chapter {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 40%, rgba(0, 0, 0, 0.08) 100%),
    rgba(28, 18, 60, 0.42);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 48px rgba(0, 0, 0, 0.35);
  border: none;
}

/* journey 页专属：body 底色 + 几团淡彩光晕给 backdrop-filter 当素材 */
[data-theme="luxe"] body.lj-journey-body {
  background: #06061a !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(180, 80, 200, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 40%, rgba(80, 120, 220, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 90%, rgba(200, 150, 80, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 90% 10%, rgba(220, 100, 140, 0.12) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
}
[data-theme="luxe"] .lj-chapter-name {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', 'Noto Serif SC', serif);
  letter-spacing: 0.01em;
}
[data-theme="luxe"] .lj-chapter-desc {
  color: var(--lx-ink-dim, #A89060);
  font-style: italic;
}
[data-theme="luxe"] .lj-chapter-prog {
  background: rgba(201,168,76,.15);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.30);
}
[data-theme="luxe"] .lj-chapter-toggle {
  background: rgba(201,168,76,.15);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.30);
}
[data-theme="luxe"] .lj-chapter-head:hover .lj-chapter-toggle {
  background: rgba(201,168,76,.28);
}
[data-theme="luxe"] .lj-lesson-label {
  color: var(--lx-ink-dim, #A89060);
}
[data-theme="luxe"] .lj-lesson.is-locked .lj-lesson-label {
  color: #5a4f3a;
}
[data-theme="luxe"] .lj-lesson.is-locked .lj-lesson-btn {
  background: #2a2520;
  box-shadow: 0 6px 0 0 #16120e;
}

/* —— Luxe: 关卡按钮按章节难度分金色阶 —— */
[data-theme="luxe"] .lj-lesson-num,
[data-theme="luxe"] .lj-icon-check,
[data-theme="luxe"] .lj-icon-star {
  color: #1a1208;
}
[data-theme="luxe"] .lj-lesson.is-locked .lj-icon-lock {
  color: var(--lx-ink-dim, #A89060);
}
/* luxe 下 keyframe 动画被全局关掉，原本会脉冲扩散的硬边圆环会变成一圈
   静止的亮黄描边，跟柔和暗金的关卡格格不入 —— 换成一层柔和的金色光晕。 */
[data-theme="luxe"] .lj-lesson.is-current::before {
  border: 0;
  top: -10px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(228, 209, 149, 0.5) 0%, transparent 68%);
}

/* 章 1 · 入门 ★：柔和暖金（降饱和，避免霓虹黄刺眼） */
[data-theme="luxe"] .lj-chapter[data-chapter-index="0"] .lj-lesson-btn {
  background: linear-gradient(180deg, #D8C074, #BFA350);
  box-shadow: 0 6px 0 0 #937A36;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="0"] .lj-lesson.is-done .lj-lesson-btn {
  background: #A88E44;
  box-shadow: 0 6px 0 0 #766128;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="0"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, #E4D195, #D8C074);
  box-shadow: 0 6px 0 0 #BFA350,
              0 0 18px rgba(191, 163, 80, 0.35);
}

/* 章 2 · 场景 ★★：柔和暗金（比章 1 深一档） */
[data-theme="luxe"] .lj-chapter[data-chapter-index="1"] .lj-lesson-btn {
  background: linear-gradient(180deg, #BFA350, #A2873E);
  box-shadow: 0 6px 0 0 #766128;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="1"] .lj-lesson.is-done .lj-lesson-btn {
  background: #7E6A30;
  box-shadow: 0 6px 0 0 #544524;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="1"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, #D8C074, #A2873E);
  box-shadow: 0 6px 0 0 #766128,
              0 0 18px rgba(191, 163, 80, 0.35);
}

/* 章 3 · 进阶 ★★★：暗金红铜 */
[data-theme="luxe"] .lj-chapter[data-chapter-index="2"] .lj-lesson-btn {
  background: linear-gradient(180deg, var(--lx-gold-3, #C9A84C), #7a4a14);
  box-shadow: 0 6px 0 0 #4a2c0a;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="2"] .lj-lesson.is-done .lj-lesson-btn {
  background: #4a2c0a;
  box-shadow: 0 6px 0 0 #2a1a05;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="2"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, var(--lx-gold-2, #E8C96B), #7a4a14);
  box-shadow: 0 6px 0 0 #4a2c0a,
              0 0 22px rgba(255, 107, 0, 0.45);
}

/* 章 4 · 探索 ★★★★：古铜 */
[data-theme="luxe"] .lj-chapter[data-chapter-index="3"] .lj-lesson-btn {
  background: linear-gradient(180deg, #c08654, #6a3818);
  box-shadow: 0 6px 0 0 #3a1d08;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="3"] .lj-lesson.is-done .lj-lesson-btn {
  background: #5a3018;
  box-shadow: 0 6px 0 0 #2a1608;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="3"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, #d99a6a, #6a3818);
  box-shadow: 0 6px 0 0 #3a1d08,
              0 0 22px rgba(216, 138, 74, 0.5);
}

/* 章 5 · 挑战 ★★★★★：青铜墨绿 */
[data-theme="luxe"] .lj-chapter[data-chapter-index="4"] .lj-lesson-btn {
  background: linear-gradient(180deg, #8aa074, #3a4a30);
  box-shadow: 0 6px 0 0 #1f2818;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="4"] .lj-lesson.is-done .lj-lesson-btn {
  background: #2f3d24;
  box-shadow: 0 6px 0 0 #1a2014;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="4"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, #a8c08a, #3a4a30);
  box-shadow: 0 6px 0 0 #1f2818,
              0 0 22px rgba(138, 160, 116, 0.5);
}

/* 章 6 · 精通：玫瑰金 */
[data-theme="luxe"] .lj-chapter[data-chapter-index="5"] .lj-lesson-btn {
  background: linear-gradient(180deg, #e3a7a3, #8a4a4a);
  box-shadow: 0 6px 0 0 #4a2828;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="5"] .lj-lesson.is-done .lj-lesson-btn {
  background: #6a3838;
  box-shadow: 0 6px 0 0 #2a1818;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="5"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, #f0c0ba, #8a4a4a);
  box-shadow: 0 6px 0 0 #4a2828,
              0 0 22px rgba(227, 167, 163, 0.5);
}

/* 章 7 · 冲刺：紫金 */
[data-theme="luxe"] .lj-chapter[data-chapter-index="6"] .lj-lesson-btn {
  background: linear-gradient(180deg, #b8a3c7, #5c4a80);
  box-shadow: 0 6px 0 0 #2c2048;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="6"] .lj-lesson.is-done .lj-lesson-btn {
  background: #44366a;
  box-shadow: 0 6px 0 0 #1f1838;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="6"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, #d4c4e0, #5c4a80);
  box-shadow: 0 6px 0 0 #2c2048,
              0 0 22px rgba(184, 163, 199, 0.5);
}

/* 章 8 · 征服：白金（最难，象牙银白） */
[data-theme="luxe"] .lj-chapter[data-chapter-index="7"] .lj-lesson-btn {
  background: linear-gradient(180deg, #e8e3d2, #8a8270);
  box-shadow: 0 6px 0 0 #4a4438;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="7"] .lj-lesson.is-done .lj-lesson-btn {
  background: #6a6452;
  box-shadow: 0 6px 0 0 #2a2820;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="7"] .lj-lesson[data-type="review"] .lj-lesson-btn {
  background: linear-gradient(180deg, #f5f0e0, #8a8270);
  box-shadow: 0 6px 0 0 #4a4438,
              0 0 22px rgba(232, 227, 210, 0.6);
}

/* Luxe: 章节 tag 8 档色 + ★ 星级 */
[data-theme="luxe"] .lj-chapter[data-chapter-index="0"] .lj-chapter-tag { color: var(--lx-gold-1, #FFE9A8); }
[data-theme="luxe"] .lj-chapter[data-chapter-index="1"] .lj-chapter-tag { color: var(--lx-gold-2, #E8C96B); }
[data-theme="luxe"] .lj-chapter[data-chapter-index="2"] .lj-chapter-tag { color: #d4884a; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="3"] .lj-chapter-tag { color: #d99a6a; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="4"] .lj-chapter-tag { color: #a8c08a; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="5"] .lj-chapter-tag { color: #f0c0ba; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="6"] .lj-chapter-tag { color: #d4c4e0; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="7"] .lj-chapter-tag { color: #f5f0e0; }
[data-theme="luxe"] .lj-chapter .lj-chapter-tag::after {
  margin-left: 4px;
  letter-spacing: 0.1em;
}
[data-theme="luxe"] .lj-chapter[data-chapter-index="0"] .lj-chapter-tag::after { content: ' ★'; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="1"] .lj-chapter-tag::after { content: ' ★★'; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="2"] .lj-chapter-tag::after { content: ' ★★★'; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="3"] .lj-chapter-tag::after { content: ' ★★★★'; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="4"] .lj-chapter-tag::after { content: ' ★★★★★'; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="5"] .lj-chapter-tag::after { content: ' ★★★★★★'; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="6"] .lj-chapter-tag::after { content: ' ★★★★★★★'; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="7"] .lj-chapter-tag::after { content: ' ★★★★★★★★'; }

/* Luxe: 进度药丸文字色按章节深浅 */
[data-theme="luxe"] .lj-chapter[data-chapter-index="0"] .lj-chapter-prog { color: var(--lx-gold-1, #FFE9A8); }
[data-theme="luxe"] .lj-chapter[data-chapter-index="1"] .lj-chapter-prog { color: var(--lx-gold-2, #E8C96B); }
[data-theme="luxe"] .lj-chapter[data-chapter-index="2"] .lj-chapter-prog { color: #d4884a; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="3"] .lj-chapter-prog { color: #d99a6a; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="4"] .lj-chapter-prog { color: #a8c08a; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="5"] .lj-chapter-prog { color: #f0c0ba; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="6"] .lj-chapter-prog { color: #d4c4e0; }
[data-theme="luxe"] .lj-chapter[data-chapter-index="7"] .lj-chapter-prog { color: #f5f0e0; }

/* Luxe: 锁住关 一律深棕（覆盖章节难度色 + review 金色） */
[data-theme="luxe"] .lj-chapter .lj-lesson.is-locked .lj-lesson-btn,
[data-theme="luxe"] .lj-chapter .lj-lesson.is-locked[data-type="review"] .lj-lesson-btn {
  background: #2a2520;
  box-shadow: 0 6px 0 0 #16120e;
}
[data-theme="luxe"] .lj-back {
  color: var(--lx-ink-dim, #A89060);
}
[data-theme="luxe"] .lj-back:hover {
  color: var(--lx-gold-1, #FFE9A8);
  background: rgba(201,168,76,.08);
}

/* —— Lesson Runner —— */
[data-theme="luxe"] body.lj-runner-body { background: var(--lx-bg-deep, #05030B) !important; }
[data-theme="luxe"] .lj-runner-page { background: transparent; }
[data-theme="luxe"] .lj-runner-topbar {
  background: rgba(5, 3, 11, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="luxe"] .lj-runner-back {
  background: rgba(201,168,76,.10);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px var(--lx-border, rgba(201,168,76,.28));
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-runner-prog {
  background: rgba(201,168,76,.15);
}
[data-theme="luxe"] .lj-runner-prog-fill {
  background: linear-gradient(90deg, var(--lx-gold-3, #C9A84C), var(--lx-gold-1, #FFE9A8));
}
[data-theme="luxe"] .lj-runner-prog-text {
  color: var(--lx-gold-1, #FFE9A8);
  font-family: var(--lx-mono, 'JetBrains Mono', monospace);
}
[data-theme="luxe"] .lj-runner-next {
  background: linear-gradient(180deg, var(--lx-gold-2, #E8C96B), var(--lx-gold-3, #C9A84C));
  color: #1a1208;
  box-shadow: 0 4px 0 0 var(--lx-gold-4, #8B6914);
  font-family: var(--lx-serif, 'Lora', serif);
  font-weight: 700;
}
[data-theme="luxe"] .lj-runner-next:active:not(:disabled) {
  box-shadow: 0 2px 0 0 var(--lx-gold-4, #8B6914);
}
[data-theme="luxe"] .lj-runner-next:disabled {
  background: #2a2520;
  color: #5a5040;
  box-shadow: 0 4px 0 0 #16120e;
}

/* —— Step: 通用容器 —— */
[data-theme="luxe"] .lj-step-word,
[data-theme="luxe"] .lj-step-summary,
[data-theme="luxe"] .lj-step-choice,
[data-theme="luxe"] .lj-step-stub {
  background: linear-gradient(180deg, var(--lx-bg-surface, #130F1E), var(--lx-bg-card, #0D0A17));
  box-shadow: inset 0 0 0 1px var(--lx-border, rgba(201,168,76,.28));
}

/* —— Step: word card —— */
[data-theme="luxe"] .lj-word-main {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-word-ipa {
  color: var(--lx-ink-dim, #A89060);
  font-style: italic;
}
[data-theme="luxe"] .lj-word-def {
  color: var(--lx-gold-1, #FFE9A8);
  font-family: var(--lx-serif, 'Lora', 'Noto Serif SC', serif);
}
[data-theme="luxe"] .lj-word-tts {
  background: rgba(201,168,76,.12);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: 0 3px 0 0 rgba(201,168,76,.30);
}
[data-theme="luxe"] .lj-word-tts:active {
  box-shadow: 0 1px 0 0 rgba(201,168,76,.30);
}
[data-theme="luxe"] .lj-word-ex {
  background: rgba(201,168,76,.05);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.12);
}
[data-theme="luxe"] .lj-word-ex-en {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-word-ex-cn {
  color: var(--lx-ink-dim, #A89060);
}

/* —— Step: listenChoice / wordChoice —— */
[data-theme="luxe"] .lj-listen-play {
  background: linear-gradient(180deg, var(--lx-gold-2, #E8C96B), var(--lx-gold-3, #C9A84C));
  color: #1a1208;
  box-shadow: 0 6px 0 0 var(--lx-gold-4, #8B6914);
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-listen-play:active {
  box-shadow: 0 2px 0 0 var(--lx-gold-4, #8B6914);
}
[data-theme="luxe"] .lj-choice-main {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-choice-sub {
  color: var(--lx-ink-dim, #A89060);
  font-style: italic;
}
[data-theme="luxe"] .lj-choice-prompt {
  color: var(--lx-ink-dim, #A89060);
}
[data-theme="luxe"] .lj-choice-opt {
  background: rgba(201,168,76,.06);
  box-shadow: inset 0 0 0 1px var(--lx-border, rgba(201,168,76,.28)),
              0 2px 0 0 rgba(201,168,76,.20);
}
[data-theme="luxe"] .lj-choice-opt:hover {
  background: rgba(201,168,76,.12);
}
[data-theme="luxe"] .lj-choice-opt-w {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-choice-opt-def {
  color: var(--lx-ink, #F0E4C4);
}
[data-theme="luxe"] .lj-step-listen .lj-choice-opt-def {
  color: var(--lx-ink-dim, #A89060);
}
[data-theme="luxe"] .lj-choice-opt.is-correct {
  background: rgba(88, 204, 2, 0.15);
  box-shadow: inset 0 0 0 1px rgba(88, 204, 2, 0.6),
              0 2px 0 0 rgba(88, 204, 2, 0.7);
}
[data-theme="luxe"] .lj-choice-opt.is-correct .lj-choice-opt-w,
[data-theme="luxe"] .lj-choice-opt.is-correct .lj-choice-opt-def {
  color: #b3e858;
}
[data-theme="luxe"] .lj-choice-opt.is-wrong {
  background: rgba(255, 75, 75, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 75, 75, 0.6),
              0 2px 0 0 rgba(255, 75, 75, 0.7);
}
[data-theme="luxe"] .lj-choice-opt.is-wrong .lj-choice-opt-w,
[data-theme="luxe"] .lj-choice-opt.is-wrong .lj-choice-opt-def {
  color: #ff9090;
}

/* —— Step: summary —— */
[data-theme="luxe"] .lj-summary-medal {
  background: linear-gradient(180deg, var(--lx-gold-1, #FFE9A8), var(--lx-gold-3, #C9A84C));
  color: #1a1208;
  box-shadow: 0 4px 0 0 var(--lx-gold-4, #8B6914),
              0 0 24px var(--lx-gold-glow, rgba(201,168,76,.55));
}
[data-theme="luxe"] .lj-summary-title {
  color: var(--lx-gold-1, #FFE9A8);
  font-family: var(--lx-serif, 'Lora', 'Noto Serif SC', serif);
}
[data-theme="luxe"] .lj-summary-sub {
  color: var(--lx-ink-dim, #A89060);
  font-style: italic;
}
[data-theme="luxe"] .lj-summary-words li {
  background: rgba(201,168,76,.06);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.15);
}
[data-theme="luxe"] .lj-summary-words li b {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-summary-words li span {
  color: var(--lx-ink-dim, #A89060);
}
[data-theme="luxe"] .lj-summary-stats[data-tier="high"] {
  background: rgba(88, 204, 2, 0.15);
  color: #b3e858;
  box-shadow: inset 0 0 0 1px rgba(88, 204, 2, 0.4);
}
[data-theme="luxe"] .lj-summary-stats[data-tier="mid"] {
  background: rgba(201, 168, 76, 0.18);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.45);
}
[data-theme="luxe"] .lj-summary-stats[data-tier="low"] {
  background: rgba(255, 75, 75, 0.15);
  color: #ff9090;
  box-shadow: inset 0 0 0 1px rgba(255, 75, 75, 0.4);
}

/* —— Step: stub —— */
[data-theme="luxe"] .lj-step-stub {
  color: var(--lx-ink-dim, #A89060);
}

/* ============================================
   ② 期：Lesson Runner（#/lesson/<chId>/<lsId>）
   全屏式练习流程页。类前缀 .lj-runner-（容器） + .lj-step-（每个 step）
   + .lj-word-（词卡内部）+ .lj-summary-（总结页）。
   ============================================ */

body.lj-runner-body { background: #fff8ee; }

.lj-runner-page {
  min-height: calc(100vh - 0px);
  background: #fff8ee;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito', 'Noto Sans SC', system-ui, sans-serif;
}

.lj-runner-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #fff8ee;
  position: sticky;
  top: 0;
  z-index: 10;
}
.lj-runner-back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: white;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: #777;
  font: 700 22px 'Fredoka', 'Nunito', sans-serif;
  box-shadow: 0 2px 0 0 #e5e5e5;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.lj-runner-back:hover { transform: translateY(-1px); }
.lj-runner-back:active { transform: translateY(2px); box-shadow: 0 0 0 0 #e5e5e5; }
.lj-runner-prog {
  flex: 1;
  height: 14px;
  background: #ece7dc;
  border-radius: 999px;
  overflow: hidden;
}
.lj-runner-prog-fill {
  width: 0%;
  height: 100%;
  background: #58cc02;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.lj-runner-prog-text {
  font: 700 14px 'Fredoka', 'Nunito', sans-serif;
  color: #777;
  min-width: 40px;
  text-align: right;
}
/* 关卡 topbar 内嵌的语速调速器（慢/中/快），复用 .theme-seg 视觉但紧凑一档
   只在本步真有蓝色喇叭时露出（听音题/打字题/朗读题/词卡入场）；选择题/填空题/配对题不显示 */
.lj-runner-ratebar { flex: 0 0 auto; display: none; align-items: center; }
.lj-runner-page:has(.lj-listen-play, .lj-typing-spk, .lj-word-tts, .lj-speak-original) .lj-runner-ratebar {
  display: flex;
}
.lj-runner-topbar .theme-seg { width: auto; gap: 4px; padding: 3px; }
.lj-runner-topbar .theme-seg-btn { padding: 5px 10px; font-size: 12.5px; min-width: 0; }

.lj-runner-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.lj-runner-foot {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  background: transparent;
  border-top: 2px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.lj-runner-foot[data-feedback="correct"] {
  background: linear-gradient(180deg, rgba(88,204,2,0.16), rgba(88,204,2,0.04));
  border-top-color: rgba(88,204,2,0.45);
}
.lj-runner-foot[data-feedback="wrong"] {
  background: linear-gradient(180deg, rgba(255,75,75,0.16), rgba(255,75,75,0.04));
  border-top-color: rgba(255,75,75,0.45);
}
.lj-feedback-icon {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lj-feedback-icon svg { display: none; }
.lj-runner-foot[data-feedback="correct"] .lj-feedback-icon {
  display: flex;
  background: #58cc02;
  color: white;
  animation: lj-fb-pop 0.45s cubic-bezier(.34,1.55,.5,1) both;
}
.lj-runner-foot[data-feedback="correct"] .lj-feedback-check { display: block; }
.lj-runner-foot[data-feedback="wrong"] .lj-feedback-icon {
  display: flex;
  background: #ff4b4b;
  color: white;
  animation: lj-fb-pop 0.45s cubic-bezier(.34,1.55,.5,1) both;
}
.lj-runner-foot[data-feedback="wrong"] .lj-feedback-cross { display: block; }
@keyframes lj-fb-pop {
  0% { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.lj-feedback-text {
  flex: 1;
  font: 700 17px 'Nunito', 'Noto Sans SC', sans-serif;
  line-height: 1.35;
  min-height: 22px;
}
.lj-runner-foot[data-feedback="correct"] .lj-feedback-text { color: #2ea500; }
.lj-runner-foot[data-feedback="wrong"]   .lj-feedback-text { color: #d63a3a; }
.lj-runner-foot[data-feedback=""] .lj-feedback-text { display: none; }
.lj-feedback-ans { font-weight: 800; letter-spacing: 0.03em; }
.lj-runner-foot[data-feedback]:not([data-feedback=""]) .lj-feedback-text {
  animation: lj-fb-slide 0.36s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lj-fb-slide {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Luxe feedback */
[data-theme="luxe"] .lj-runner-foot[data-feedback="correct"] {
  background: linear-gradient(180deg, rgba(184,224,122,0.16), rgba(184,224,122,0.04));
  border-top-color: rgba(184,224,122,0.45);
}
[data-theme="luxe"] .lj-runner-foot[data-feedback="wrong"] {
  background: linear-gradient(180deg, rgba(255,139,139,0.16), rgba(255,139,139,0.04));
  border-top-color: rgba(255,139,139,0.45);
}
[data-theme="luxe"] .lj-runner-foot[data-feedback="correct"] .lj-feedback-icon {
  background: linear-gradient(180deg, var(--lx-gold-1, #FFE9A8), #b8e07a);
  color: #1a2818;
}
[data-theme="luxe"] .lj-runner-foot[data-feedback="correct"] .lj-feedback-text { color: #b8e07a; }
[data-theme="luxe"] .lj-runner-foot[data-feedback="wrong"]   .lj-feedback-text { color: #ff8b8b; }

/* 题切换淡入：stage 加 .lj-stage-enter 时其子元素 fade-in + 微上滑 */
.lj-runner-stage.lj-stage-enter > * {
  animation: lj-stage-fade 0.36s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lj-stage-fade {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 进度条脉冲（答对/错时短暂闪一下） */
.lj-runner-prog-fill {
  transition: width 0.35s cubic-bezier(.2,.7,.3,1), background 0.3s ease, box-shadow 0.3s ease;
}
.lj-runner-prog-fill.lj-prog-pulse-correct {
  animation: lj-prog-pulse-correct 0.55s ease-out;
}
@keyframes lj-prog-pulse-correct {
  0%   { box-shadow: 0 0 0 0 rgba(88,204,2,0.6); }
  60%  { box-shadow: 0 0 0 8px rgba(88,204,2,0); }
  100% { box-shadow: 0 0 0 0 rgba(88,204,2,0); }
}
.lj-runner-prog-fill.lj-prog-pulse-wrong {
  animation: lj-prog-pulse-wrong 0.55s ease-out;
}
@keyframes lj-prog-pulse-wrong {
  0%   { box-shadow: 0 0 0 0 rgba(255,75,75,0.6); }
  60%  { box-shadow: 0 0 0 8px rgba(255,75,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,75,75,0); }
}

/* 答对/答错的运动动画走 JS WAAPI（[[js/state.js quizLeap/quizDrop]]）——
   答对：下蹲蓄力 → 腾空 → 落地回弹；答错：抖一下 → 加速坠落 → 砸地塌斜。
   CSS 这里不再用 keyframes 抢 transform，否则会跟 WAAPI 互相覆盖。 */
.lj-runner-next {
  background: #58cc02;
  color: white;
  border: none;
  border-radius: 16px;
  padding: 14px 48px;
  font: 700 16px 'Fredoka', 'Nunito', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 0 #4ba902;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  letter-spacing: 0.02em;
}
.lj-runner-next:hover:not(:disabled) { transform: translateY(-1px); }
.lj-runner-next:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 0 #4ba902; }
.lj-runner-next:disabled {
  background: #d4d7dc;
  box-shadow: 0 4px 0 0 #a8acb5;
  cursor: not-allowed;
}

/* ── Step: word card ── */
.lj-step-word {
  background: white;
  border-radius: 22px;
  padding: 36px 32px;
  width: 100%;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 2px 0 0 #e5e5e5;
  box-sizing: border-box;
}
.lj-word-main {
  font: 700 42px 'Fredoka', 'Nunito', sans-serif;
  color: #3c3c3c;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  word-break: break-word;
}
.lj-word-ipa {
  font: 500 16px 'Nunito', sans-serif;
  color: #999;
  margin-bottom: 16px;
}
.lj-word-tts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ddf4ff;
  color: #1cb0f6;
  border: none;
  border-radius: 999px;
  font: 700 14px 'Nunito', sans-serif;
  cursor: pointer;
  margin-bottom: 24px;
  box-shadow: 0 3px 0 0 #b8e0f0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lj-word-tts:hover { transform: translateY(-1px); }
.lj-word-tts:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #b8e0f0; }
.lj-word-def {
  font: 700 22px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #3c3c3c;
  margin-bottom: 20px;
}
.lj-word-ex {
  background: #fff8ee;
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
}
.lj-word-ex-en {
  font: 600 15px 'Nunito', sans-serif;
  color: #3c3c3c;
  margin: 0 0 4px;
  line-height: 1.4;
}
.lj-word-ex-cn {
  font: 500 14px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #777;
  margin: 0;
  line-height: 1.4;
}

/* ── Step: summary（总结页） ── */
.lj-step-summary {
  background: white;
  border-radius: 22px;
  padding: 40px 32px;
  width: 100%;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 2px 0 0 #e5e5e5;
  box-sizing: border-box;
}
.lj-summary-medal {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: #ffc800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 0 0 #dba800;
}
.lj-summary-title {
  font: 700 26px 'Fredoka', 'Nunito', sans-serif;
  color: #3c3c3c;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lj-summary-sub {
  font: 500 14px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #777;
  margin: 0 0 24px;
}
.lj-summary-words {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lj-summary-words li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff8ee;
  border-radius: 14px;
}
.lj-summary-words li b {
  font: 700 16px 'Fredoka', 'Nunito', sans-serif;
  color: #3c3c3c;
}
.lj-summary-words li span {
  font: 500 14px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #777;
}

/* ── 进度环结算（方案 2）：环 + 中央分数 + 两列词表，入场全用 transition + JS 触发 ── */
.lj-sum-ringwrap { position: relative; width: 150px; height: 150px; margin: 6px auto 0; }
.lj-sum-ringwrap svg { transform: rotate(-90deg); }
.lj-sum-ring-bg { fill: none; stroke: #ece2d0; stroke-width: 13; }
.lj-sum-ring-fg { fill: none; stroke: #58cc02; stroke-width: 13; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1) .15s; }
.lj-sum-ringcenter { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.lj-sum-ringnum { font: 900 34px 'Nunito', sans-serif; color: #3c3c3c; line-height: 1; }
.lj-sum-ringlabel { font-size: 13px; color: #8a8278; margin-top: 2px; }
.lj-sum-ring.is-perfect .lj-sum-ring-fg { stroke: #ffc800; }
.lj-sum-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.lj-sum-ring .lj-summary-title,
.lj-sum-ring .lj-summary-sub { opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease; }
.lj-sum-ring.lj-sum-go .lj-summary-title { opacity: 1; transform: none; transition-delay: .35s; }
.lj-sum-ring.lj-sum-go .lj-summary-sub { opacity: 1; transform: none; transition-delay: .45s; }
.lj-sum-grid li { opacity: 0; transform: scale(.85);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1); }
.lj-sum-ring.lj-sum-go .lj-sum-grid li { opacity: 1; transform: none;
  transition-delay: calc(.6s + var(--i) * .07s); }
[data-theme="luxe"] .lj-sum-ring-bg { stroke: rgba(201,168,76,.2); }
[data-theme="luxe"] .lj-sum-ring-fg { stroke: var(--lx-gold, #C9A84C); }
[data-theme="luxe"] .lj-sum-ring.is-perfect .lj-sum-ring-fg { stroke: var(--lx-gold-1, #FFE9A8); }
[data-theme="luxe"] .lj-sum-ringnum { color: var(--lx-ink, #F0E4C4); }
[data-theme="luxe"] .lj-sum-ringlabel { color: var(--lx-ink-dim, #A89060); }

/* ── Step: stub（占位） ── */
.lj-step-stub {
  background: #fff;
  border-radius: 16px;
  padding: 40px 28px;
  color: #999;
  text-align: center;
  font: 500 14px 'Nunito', 'Noto Sans SC', sans-serif;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 2px 0 0 #e5e5e5;
  box-sizing: border-box;
}

/* ── Step: listenChoice / wordChoice 共享容器 ── */
.lj-step-choice {
  background: white;
  border-radius: 22px;
  padding: 32px 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 2px 0 0 #e5e5e5;
  box-sizing: border-box;
  text-align: center;
}

/* listenChoice 大播放按钮 */
.lj-listen-play {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #1cb0f6;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 0 0 #1899d6;
  margin: 8px auto 20px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  font: 700 14px 'Nunito', sans-serif;
  letter-spacing: 0.04em;
}
.lj-listen-play:hover { transform: translateY(-1px); }
.lj-listen-play:active { transform: translateY(4px); box-shadow: 0 2px 0 0 #1899d6; }
.lj-listen-play svg { display: block; }

/* listenChoice 均衡器条：喇叭下方一排小竖条，高度由 JS（WAAPI）逐帧驱动跳动 */
.lj-listen-eq {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  height: 30px;
  margin: -8px auto 16px;
}
.lj-listen-eq i {
  display: block;
  width: 5px;
  height: 7px;
  border-radius: 99px;
  background: #1cb0f6;          /* 卡通：天蓝，呼应播放按钮 */
}
[data-theme="luxe"] .lj-listen-eq i {
  background: var(--lx-gold, #F5C518);   /* 金箔：品牌黄 */
}

/* wordChoice 大字英文 */
.lj-choice-main {
  font: 700 36px 'Fredoka', 'Nunito', sans-serif;
  color: #3c3c3c;
  margin: 12px 0 4px;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.lj-choice-sub {
  font: 500 15px 'Nunito', sans-serif;
  color: #999;
  margin: 0 0 20px;
}

.lj-choice-prompt {
  font: 500 14px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #777;
  margin: 8px 0 16px;
}

.lj-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lj-choice-opt {
  position: relative; /* quizDrop 答错时塞的 .fcx-qz-crack SVG 裂纹靠 absolute+inset:0 定位，父级必须 non-static */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  background: #fff8ee;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.15s ease;
  text-align: center;
  box-shadow: 0 4px 0 0 #ece2d0; /* Duolingo 风 4px 实色厚底（同 .fcx-qz-opt） */
  min-height: 56px;
  justify-content: center;
}
.lj-choice-opt:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #fff4dc;
  box-shadow: 0 6px 0 0 #ece2d0; /* hover 抬起：阴影增厚 */
}
.lj-choice-opt:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #ece2d0; /* 按下：阴影压扁（不要砍光，保留压痕） */
}
.lj-choice-opt-w {
  font: 700 16px 'Fredoka', 'Nunito', sans-serif;
  color: #3c3c3c;
}
.lj-choice-opt-def {
  font: 600 15px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #555;
}
/* listenChoice：只看到英文 + 浅释义 */
.lj-step-listen .lj-choice-opt-def {
  font-size: 12.5px;
  color: #999;
  font-weight: 500;
}
/* listenChoice 视觉强调英文（用户在"听音"） */
.lj-step-listen .lj-choice-opt-w {
  font-size: 18px;
}

/* —— 选项状态：选对（绿） —— */
.lj-choice-opt.is-correct {
  background: #d7f7c2;
  box-shadow: 0 4px 0 0 #58cc02, 0 8px 22px -10px rgba(88,204,2,.55); /* 厚底 + 光晕（同 .fcx-qz-opt.is-correct） */
  color: #2a6a01;
}
.lj-choice-opt.is-correct .lj-choice-opt-w,
.lj-choice-opt.is-correct .lj-choice-opt-def {
  color: #2a6a01;
}

/* —— 选项状态：选错（红，抖动由 WAAPI quizDrop 接管） —— */
.lj-choice-opt.is-wrong {
  background: #ffd6d6;
  box-shadow: 0 4px 0 0 #ff4b4b; /* 红色 4px 厚底，跟绿对齐 */
}
.lj-choice-opt.is-wrong .lj-choice-opt-w,
.lj-choice-opt.is-wrong .lj-choice-opt-def {
  color: #a02828;
}

/* —— 选项状态：选中待检查（蓝，Duolingo 式：先选中、再点「检查」才判分） —— */
.lj-choice-opt.is-selected {
  background: #e5f6ff;
  box-shadow: inset 0 0 0 2px #1cb0f6, 0 4px 0 0 #84d4f7;
}
.lj-choice-opt.is-selected .lj-choice-opt-w,
.lj-choice-opt.is-selected .lj-choice-opt-def {
  color: #0e7bb0;
}
[data-theme="luxe"] .lj-choice-opt.is-selected {
  background: rgba(201,168,76,.18);
  box-shadow: inset 0 0 0 2px var(--lx-gold, #C9A84C),
              0 2px 0 0 rgba(201,168,76,.5);
}
[data-theme="luxe"] .lj-choice-opt.is-selected .lj-choice-opt-w,
[data-theme="luxe"] .lj-choice-opt.is-selected .lj-choice-opt-def {
  color: var(--lx-gold-1, #FFE9A8);
}

/* —— 已答过：未选中的暗下来 —— */
.lj-step-choice[data-answer="correct"] .lj-choice-opt:not(.is-correct),
.lj-step-choice[data-answer="wrong"] .lj-choice-opt:not(.is-correct):not(.is-wrong) {
  pointer-events: none;
  opacity: 0.45;
}

/* —— 选项进场：果冻错峰弹入（「弹性瀑布」，2026-05-29）——
   bindChoice 里先给容器加 .lj-anim 标记隐藏初始态 → 强制 reflow 提交 → 再加 .lj-play 触发过渡。
   全程用 transition（不用 @keyframes），所以 luxe 全局关 keyframes 时也照样弹；
   只动 opacity / transform / transition，不碰 background / box-shadow，
   不会和卡通米色卡、luxe 深灰卡的配色规则打架。
   兜底：万一 JS 没加 .lj-anim，选项保持默认可见，绝不会卡成隐形。 */
.lj-step-choice.lj-anim .lj-choice-opt {
  opacity: 0;
  transform: translateY(24px) scale(.86);
  transition: none; /* 关键：隐藏态必须瞬间建立。否则基础 .lj-choice-opt 的 transform .12s 过渡会把"瞬移到下方"抹平，导致只剩淡入、没了"弹起" */
}
.lj-step-choice.lj-anim.lj-play .lj-choice-opt {
  opacity: 1;
  transform: none;
  transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.7, .5, 1);
}
.lj-step-choice.lj-anim.lj-play .lj-choice-opt:nth-child(1) { transition-delay: .06s; }
.lj-step-choice.lj-anim.lj-play .lj-choice-opt:nth-child(2) { transition-delay: .15s; }
.lj-step-choice.lj-anim.lj-play .lj-choice-opt:nth-child(3) { transition-delay: .24s; }
.lj-step-choice.lj-anim.lj-play .lj-choice-opt:nth-child(4) { transition-delay: .33s; }
@media (prefers-reduced-motion: reduce) {
  .lj-step-choice.lj-anim .lj-choice-opt { opacity: 1; transform: none; }
  .lj-step-choice.lj-anim.lj-play .lj-choice-opt { transition: none; }
}

/* summary 正确率行 */
.lj-summary-stats {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: -12px auto 18px;
  padding: 8px 18px;
  border-radius: 14px;
  text-align: center;
  font: 500 14px 'Nunito', 'Noto Sans SC', sans-serif;
}
.lj-summary-stats-num {
  font: 700 16px 'Fredoka', 'Nunito', sans-serif;
}
.lj-summary-stats-num b { font-weight: 800; font-size: 20px; }
.lj-summary-stats-text {
  font-size: 13px;
  opacity: 0.8;
}
/* 正确率分档配色 */
.lj-summary-stats[data-tier="high"] { background: #d7f7c2; color: #2a6a01; }
.lj-summary-stats[data-tier="mid"]  { background: #fff2c2; color: #8a6500; }
.lj-summary-stats[data-tier="low"]  { background: #ffd6d6; color: #a02828; }

/* step 切换淡入动画 */
.lj-runner-stage > * {
  animation: lj-step-in 0.32s cubic-bezier(0.22, 0.94, 0.36, 1) both;
}
@keyframes lj-step-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Runner 进入时隐藏全局侧栏（沿用 flashcards 的 lxfc-mode 思路简化版） ── */
body.lj-runner-body .sidebar,
body.lj-runner-body .aside-right,
body.lj-runner-body .aside-toggle,
body.lj-runner-body .mobile-tabbar,
body.lj-runner-body .mobile-header,
body.lj-runner-body .main-footer { display: none !important; }
body.lj-runner-body .app { display: block; }
body.lj-runner-body .main { padding: 0; }

/* ── 填空题：句子带空格 + 4 选 1 单词按钮 ── */
.lj-step-fill { text-align: center; }
.lj-fill-sentence {
  font: 600 24px 'Nunito', 'Noto Sans SC', sans-serif;
  margin: 24px auto;
  line-height: 1.6;
  color: #1f2940;
  max-width: 560px;
}
.lj-fill-blank {
  display: inline-block;
  min-width: 100px;
  padding: 2px 10px;
  background: rgba(255, 200, 0, 0.18);
  border-bottom: 3px solid #ffc800;
  margin: 0 4px;
  letter-spacing: 0.06em;
  transition: background 0.25s ease, color 0.25s ease, border-bottom-color 0.25s ease;
}
.lj-fill-blank.is-filled-correct {
  background: rgba(88, 204, 2, 0.18);
  border-bottom-color: #58cc02;
  color: #58cc02;
}
.lj-fill-blank.is-filled-wrong {
  background: rgba(255, 75, 75, 0.18);
  border-bottom-color: #ff4b4b;
  color: #ff4b4b;
}
.lj-fill-hint {
  color: #7a8499;
  font-size: 15px;
  margin: 8px auto 24px;
  max-width: 520px;
}
.lj-choice-opt-wordonly {
  font: 700 18px 'Nunito', sans-serif;
  letter-spacing: 0.02em;
}

/* ── 拼词块：中文 → 英文，词块点击移到答案区 ── */
.lj-step-tiles { text-align: center; max-width: 640px; margin: 0 auto; }
.lj-tiles-prompt {
  font: 700 22px 'Nunito', 'Noto Sans SC', sans-serif;
  margin: 24px auto 32px;
  color: #1f2940;
  line-height: 1.5;
}
.lj-tiles-answer {
  min-height: 72px;
  margin: 0 auto 28px;
  padding: 12px;
  border-bottom: 2px dashed #c0c4cc;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-content: flex-start;
}
.lj-tiles-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.lj-tile {
  position: relative; /* quizDrop 的 .fcx-qz-crack 裂纹 SVG 用 absolute+inset:0，父级需 non-static */
  font: 700 17px 'Nunito', sans-serif;
  padding: 10px 16px;
  border-radius: 10px;
  background: white;
  color: #2a3240;
  border: 0;
  box-shadow: 0 4px 0 0 #d0d4dc; /* 4px 厚底，与 .fcx-qz-opt 一致 */
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  user-select: none;
}
.lj-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 #d0d4dc;
}
.lj-tile:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #d0d4dc;
}
.lj-tile:disabled { cursor: default; opacity: 0.7; box-shadow: 0 2px 0 0 #d0d4dc; }
/* 字块移动到答案区 / 退回 bank 时，弹一下 */
.lj-tile.lj-tile-placed {
  animation: lj-tile-place 0.32s cubic-bezier(.34,1.55,.5,1) both;
}
@keyframes lj-tile-place {
  0%   { transform: scale(0.65); opacity: 0.3; }
  55%  { transform: scale(1.10); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.lj-tile.is-wrong {
  background: #ffd6d6;
  color: #d63a3a;
  box-shadow: 0 4px 0 0 #d63a3a;
}
.lj-tiles-correct-text {
  margin-top: 18px;
  font: 600 15px 'Nunito', sans-serif;
  color: #d63a3a;
}

/* ── Luxe 主题：填空 ── */
[data-theme="luxe"] .lj-fill-sentence { color: var(--lx-ink, #F0E4C4); }
[data-theme="luxe"] .lj-fill-blank {
  background: rgba(201,168,76,.12);
  border-bottom-color: var(--lx-gold-1, #FFE9A8);
}
[data-theme="luxe"] .lj-fill-blank.is-filled-correct {
  background: rgba(184, 224, 122, 0.18);
  border-bottom-color: #b8e07a;
  color: #b8e07a;
}
[data-theme="luxe"] .lj-fill-blank.is-filled-wrong {
  background: rgba(255, 139, 139, 0.18);
  border-bottom-color: #ff8b8b;
  color: #ff8b8b;
}
[data-theme="luxe"] .lj-fill-hint { color: var(--lx-ink-dim, #A89060); }

/* 中文字块（英拼中）：单字稍窄一些 */
.lj-tile-cn {
  font-family: 'Nunito', 'Noto Sans SC', sans-serif;
  font-size: 19px;
  min-width: 44px;
  padding: 10px 14px;
}
.lj-tiles-prompt-en {
  font-family: 'Fredoka', 'Nunito', sans-serif;
}

/* ── 朗读题：原音按钮 + 麦克风 + 反馈文字 ── */
.lj-step-speak { text-align: center; max-width: 540px; margin: 0 auto; }
.lj-speak-prompt {
  font: 700 14px 'Nunito', sans-serif;
  color: #9a9288;
  letter-spacing: .04em;
  margin: 0 auto 14px;
  text-transform: none;
}
.lj-speak-sentence {
  font: 700 26px 'Nunito', sans-serif;
  margin: 24px auto 8px;
  color: #1f2940;
  line-height: 1.4;
}
.lj-speak-hint {
  color: #7a8499;
  font-size: 15px;
  margin: 0 auto 20px;
}
.lj-speak-original {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 12px;
  background: #ddf4ff;
  color: #1cb0f6;
  font: 700 14px 'Nunito', sans-serif;
  cursor: pointer;
  margin-bottom: 18px;
  box-shadow: 0 3px 0 0 #b8e0f0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lj-speak-original:hover { transform: translateY(-1px); }
.lj-speak-original:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #b8e0f0; }
.lj-speak-mic {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 0;
  background: #1cb0f6;
  color: white;
  font: 700 17px 'Nunito', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 0 #1899d6;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  margin-top: 8px;
}
.lj-speak-mic:hover:not(:disabled) { transform: translateY(-1px); }
.lj-speak-mic:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 0 #1899d6; }
.lj-speak-mic.listening {
  background: #ff4b4b;
  box-shadow: 0 4px 0 0 #d63a3a;
  animation: lj-mic-pulse 1.2s ease-in-out infinite;
}
.lj-speak-mic:disabled { cursor: default; opacity: 0.7; }
@keyframes lj-mic-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.lj-speak-feedback {
  margin-top: 22px;
  font: 600 15px 'Nunito', sans-serif;
  min-height: 22px;
  line-height: 1.5;
}
.lj-speak-feedback[data-tier="high"] { color: #58cc02; }
.lj-speak-feedback[data-tier="mid"]  { color: #ff9600; }
.lj-speak-feedback[data-tier="low"]  { color: #ff4b4b; }

/* Luxe: 朗读 */
[data-theme="luxe"] .lj-speak-sentence {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', 'Noto Serif SC', serif);
}
[data-theme="luxe"] .lj-speak-hint { color: var(--lx-ink-dim, #A89060); }
[data-theme="luxe"] .lj-speak-original {
  background: rgba(201,168,76,.12);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.30);
}
[data-theme="luxe"] .lj-speak-original:hover { background: rgba(201,168,76,.22); }
[data-theme="luxe"] .lj-speak-mic {
  background: linear-gradient(180deg, var(--lx-gold-1, #FFE9A8), var(--lx-gold-2, #E8C96B));
  color: #1a1208;
  box-shadow: 0 4px 0 0 var(--lx-gold-3, #C9A84C);
}
[data-theme="luxe"] .lj-speak-mic.listening {
  background: linear-gradient(180deg, #ff8b8b, #ff4b4b);
  color: white;
  box-shadow: 0 4px 0 0 #d63a3a;
}
[data-theme="luxe"] .lj-speak-feedback[data-tier="high"] { color: #b8e07a; }
[data-theme="luxe"] .lj-speak-feedback[data-tier="mid"]  { color: var(--lx-gold-1, #FFE9A8); }
[data-theme="luxe"] .lj-speak-feedback[data-tier="low"]  { color: #ff8b8b; }

/* ── Luxe 主题：拼词块 ── */
[data-theme="luxe"] .lj-tiles-prompt {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', 'Noto Serif SC', serif);
}
[data-theme="luxe"] .lj-tiles-answer {
  border-bottom-color: rgba(201,168,76,.35);
}
[data-theme="luxe"] .lj-tile {
  background: rgba(201,168,76,.10);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.35), 0 3px 0 0 rgba(139, 105, 20, .45);
}
[data-theme="luxe"] .lj-tile:hover:not(:disabled) {
  background: rgba(201,168,76,.18);
}
[data-theme="luxe"] .lj-tile.is-wrong {
  background: rgba(255, 75, 75, 0.18);
  color: #ff8b8b;
  box-shadow: inset 0 0 0 1px rgba(255,75,75,.45), 0 3px 0 0 rgba(150, 30, 30, .5);
}
[data-theme="luxe"] .lj-tiles-correct-text { color: #ff8b8b; }

/* ── 配对题：左右两列点击配对 ── */
.lj-step-match { text-align: center; max-width: 580px; margin: 0 auto; }
.lj-match-prompt {
  font: 600 16px 'Nunito', 'Noto Sans SC', sans-serif;
  color: #7a8499;
  margin: 16px auto 24px;
}
.lj-match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 48px; /* 列间距拉宽（22→48），左右明显分开 */
}
.lj-match-col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 每对之间的纵向呼吸（10→16） */
}
.lj-match-item {
  position: relative; /* quizDrop 的裂纹 SVG 需要 non-static 父级 */
  box-sizing: border-box;
  height: 56px;                 /* 固定高度（不是 min-height），左右两列彻底对齐 */
  padding: 0 18px;              /* 上下 padding 改 0，靠 flex 把文字居中 */
  border-radius: 12px;
  background: white;
  color: #2a3240;
  font: 700 17px/1 'Nunito', 'Noto Sans SC', sans-serif; /* 行高强制 1，消掉中英文 normal 行高差 */
  cursor: pointer;
  box-shadow: 0 4px 0 0 #d0d4dc; /* 4px 厚底，跟 .fcx-qz-opt 对齐 */
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.25s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lj-match-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 #d0d4dc;
}
.lj-match-item:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #d0d4dc;
}
.lj-match-item.is-selected {
  background: #1cb0f6;
  color: white;
  box-shadow: 0 4px 0 0 #1899d6;
}
.lj-match-item.is-matched {
  opacity: 0.4;
  pointer-events: none;
  background: #58cc02;
  color: white;
  box-shadow: 0 4px 0 0 #4ba902;
}
.lj-match-item.is-wrong {
  background: #ff4b4b;
  color: white;
  box-shadow: 0 4px 0 0 #d63a3a;
  animation: lj-match-shake 0.3s ease;
}
@keyframes lj-match-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
/* Luxe 配对 */
[data-theme="luxe"] .lj-match-prompt { color: var(--lx-ink-dim, #A89060); }
[data-theme="luxe"] .lj-match-item {
  background: rgba(201,168,76,.10);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.30), 0 3px 0 0 rgba(139, 105, 20, .45);
}
[data-theme="luxe"] .lj-match-item.is-selected {
  background: linear-gradient(180deg, var(--lx-gold-1, #FFE9A8), var(--lx-gold-2, #E8C96B));
  color: #1a1208;
  box-shadow: 0 3px 0 0 var(--lx-gold-3, #C9A84C);
}
[data-theme="luxe"] .lj-match-item.is-matched {
  background: rgba(184, 224, 122, 0.18);
  color: #b8e07a;
  box-shadow: inset 0 0 0 1px rgba(184,224,122,.4);
}
[data-theme="luxe"] .lj-match-item.is-wrong {
  background: rgba(255,75,75,.25);
  color: #ff8b8b;
  box-shadow: inset 0 0 0 1px rgba(255,75,75,.45), 0 3px 0 0 rgba(150, 30, 30, .5);
}

/* ─────────── 配对题 V2 ── 双列 + 中间画曲线连接 ─────────── */
.lj-match-v2 { width: 100%; max-width: 600px; margin: 0 auto; }
.lj-match-v2-canvas {
  position: relative;
  min-height: 280px;
}
.lj-match-v2-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.lj-match-v2-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 100px;
  position: relative;
  z-index: 2;
}
.lj-match-v2-col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─────────── 配对题 V4 ── 磁吸自由：10 张卡 2×5 整齐格子里轻微漂浮 ─────────── */
/* 出 V4 时整个舞台破开 640px 限制，让得下左右两栏 */
.lj-runner-stage:has(.lj-match-v4) { max-width: 1000px; }
.lj-match-v4 { width: 100%; max-width: 960px; margin: 0 auto; }
.lj-match-v4-shell {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: start;
}
.lj-match-v4-arena {
  position: relative;
  height: 420px;
  border-radius: 20px;
  background: radial-gradient(circle at 30% 30%, #fff, #fff4e0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  overflow: hidden;
}
.lj-match-v4-side {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 0 0 #d0d4dc, 0 4px 12px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100px;
}
.lj-match-v4-title {
  font-size: 14px;
  color: #7a8499;
  font-weight: 800;
  white-space: nowrap;
}
.lj-match-v4-done {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 32px;
}
.lj-match-v4-done-item {
  background: #58cc02;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 0 #4ba902;
  animation: lj-match-v4-done-settle .4s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lj-match-v4-done-item small {
  font-size: 12px;
  opacity: .9;
  font-weight: 700;
}
/* 窄屏（手机/小平板）退回上下布局 */
@media (max-width: 760px) {
  .lj-runner-stage:has(.lj-match-v4) { max-width: 640px; }
  .lj-match-v4-shell { grid-template-columns: 1fr; gap: 14px; }
  .lj-match-v4-side { min-height: 60px; }
  .lj-match-v4-done { flex-direction: row; flex-wrap: wrap; }
}
@keyframes lj-match-v4-done-settle {
  0% { transform: scale(.55); opacity: .4; }
  55% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.lj-match-v4-card {
  position: absolute;
  background: #fff;
  color: #2a3240;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 0 #d0d4dc, 0 4px 12px rgba(0,0,0,.05);
  transition: transform .55s cubic-bezier(.6,-.1,.4,1.3), opacity .35s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  animation: lj-match-v4-float 4s ease-in-out infinite alternate;
  min-width: 80px;
  text-align: center;
  user-select: none;
}
.lj-match-v4-card.is-picked {
  background: #1cb0f6;
  color: #fff;
  box-shadow: 0 3px 0 #0f8bcc, 0 8px 20px rgba(28,176,246,.35);
  animation: lj-match-v4-float-picked 1.6s ease-in-out infinite alternate;
}
.lj-match-v4-card.is-wrong {
  animation: lj-match-v4-recoil .4s ease;
  background: #ff4b4b;
  color: #fff;
  box-shadow: 0 3px 0 #cc2929;
}
@keyframes lj-match-v4-float {
  from { transform: translateY(-4px); }
  to { transform: translateY(4px); }
}
@keyframes lj-match-v4-float-picked {
  from { transform: translateY(-6px) scale(1.04); }
  to { transform: translateY(2px) scale(1.04); }
}
@keyframes lj-match-v4-recoil {
  0% { transform: translate(0,0); }
  35% { transform: translate(var(--rx), var(--ry)); }
  100% { transform: translate(0,0); }
}
.lj-match-v4-card.lj-match-v4-enter {
  animation: lj-match-v4-card-enter .55s cubic-bezier(.34,1.56,.64,1) backwards !important;
  z-index: 6;
}
@keyframes lj-match-v4-card-enter {
  0% { opacity: 0; transform: translateY(-44px) scale(.82) rotate(-4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.lj-match-v4-card.lj-match-v4-attracting {
  animation: lj-match-v4-attract .32s ease-out !important;
  z-index: 10;
}
@keyframes lj-match-v4-attract {
  0% { box-shadow: 0 3px 0 #0f8bcc, 0 0 0 0 rgba(28,176,246,.7); }
  100% { box-shadow: 0 3px 0 #0f8bcc, 0 0 0 28px rgba(28,176,246,0); }
}
/* V4 特效层（屏幕坐标定位，跨组件层级） */
.lj-match-v4-ring {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1000;
  box-sizing: border-box;
}
.lj-match-v4-flash {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  background: #fff;
  width: 14px;
  height: 14px;
  z-index: 1001;
  box-shadow: 0 0 30px 12px rgba(255,255,255,.65);
}
.lj-match-v4-ghost {
  position: fixed;
  border-radius: 12px;
  background: #1cb0f6;
  opacity: .3;
  z-index: 5;
  pointer-events: none;
  animation: lj-match-v4-ghost-fade .56s ease-out forwards;
}
@keyframes lj-match-v4-ghost-fade {
  from { opacity: .3; transform: scale(1); }
  to { opacity: 0; transform: scale(.78); }
}
.lj-match-v4-flying-token {
  position: fixed;
  background: #58cc02;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 18px rgba(88,204,2,.4), 0 2px 0 #4ba902;
  z-index: 1000;
  pointer-events: none;
  min-width: 120px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lj-match-v4-flying-token small {
  font-size: 12px;
  opacity: .9;
  font-weight: 700;
}

/* Luxe 主题下 V4 适配（@keyframes 在 luxe 下全局关，所以漂浮 / 入场 / 蓄势都不会播，但核心交互仍在） */
[data-theme="luxe"] .lj-match-v4-arena {
  background: radial-gradient(circle at 30% 30%, rgba(255,233,168,.06), rgba(0,0,0,.04));
}
[data-theme="luxe"] .lj-match-v4-card {
  background: rgba(201,168,76,.10);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.30), 0 3px 0 0 rgba(139, 105, 20, .45);
}
[data-theme="luxe"] .lj-match-v4-card.is-picked {
  background: linear-gradient(180deg, var(--lx-gold-1, #FFE9A8), var(--lx-gold-2, #E8C96B));
  color: #1a1208;
  box-shadow: 0 3px 0 0 var(--lx-gold-3, #C9A84C);
}
[data-theme="luxe"] .lj-match-v4-done-item,
[data-theme="luxe"] .lj-match-v4-flying-token {
  background: rgba(184, 224, 122, 0.22);
  color: #b8e07a;
  box-shadow: inset 0 0 0 1px rgba(184,224,122,.4);
}
[data-theme="luxe"] .lj-match-v4-title {
  color: var(--lx-ink-dim, #A89060);
}

/* ── 打字题：对话气泡风（方案 3） ── */
.lj-step-typing { max-width: 560px; margin: 0 auto; }
.lj-typing-bubble .lj-typing-q { display: flex; align-items: flex-start; gap: 14px; }
.lj-typing-ava {
  width: 46px; height: 46px; border-radius: 16px; flex: 0 0 auto;
  background: linear-gradient(150deg, #1cb0f6, #1899d6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 20px 'Fredoka', 'Nunito', sans-serif;
  box-shadow: 0 4px 0 rgba(20,120,180,.4);
}
.lj-typing-msg {
  background: #fff; border-radius: 6px 18px 18px 18px;
  padding: 14px 22px; box-shadow: 0 6px 18px -10px rgba(120,90,30,.4);
}
.lj-typing-lead { font: 700 13px 'Nunito', sans-serif; color: #9a9288; margin: 0 0 4px; }
.lj-typing-cn { font: 900 30px 'Noto Sans SC', 'Nunito', sans-serif; color: #2b2b2b; margin: 0; line-height: 1.2; }
.lj-typing-answer { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-left: 60px; }
.lj-typing-spk {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; border: 0; cursor: pointer;
  background: #1cb0f6; color: #fff; box-shadow: 0 4px 0 #1899d6;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, box-shadow .12s;
}
.lj-typing-spk:active { transform: translateY(3px); box-shadow: 0 1px 0 #1899d6; }
.lj-typing-bubble .lj-typing-input { flex: 1; max-width: none; margin: 0; }
.lj-typing-bubble .lj-typing-hint { padding-left: 60px; text-align: left; }
.lj-typing-bubble .lj-typing-correct-text { padding-left: 60px; text-align: left; }
.lj-typing-prompt {
  font: 700 22px 'Nunito', 'Noto Sans SC', sans-serif;
  margin: 24px auto 20px;
  color: #1f2940;
  line-height: 1.5;
}
.lj-typing-input {
  width: 100%;
  max-width: 480px;
  padding: 14px 18px;
  border-radius: 14px;
  background: white;
  color: #2a3240;
  border: 0;
  font: 600 18px 'Nunito', sans-serif;
  box-shadow: inset 0 0 0 2px #d0d4dc;
  outline: none;
  resize: none;
  transition: box-shadow 0.2s ease;
}
.lj-typing-input:focus { box-shadow: inset 0 0 0 2px #1cb0f6; }
.lj-typing-input:disabled { opacity: 0.7; cursor: default; }
.lj-step-typing.lj-typing-correct .lj-typing-input { box-shadow: inset 0 0 0 2px #58cc02; color: #58cc02; }
.lj-step-typing.lj-typing-wrong .lj-typing-input { box-shadow: inset 0 0 0 2px #ff4b4b; color: #ff4b4b; }

/* ── 听写题：复用 typing 气泡骨架 + 听音/看中文小按钮 ── */
.lj-step-dictation { max-width: 560px; margin: 0 auto; }
.lj-dict-ava {
  background: #f5c518;
  box-shadow: 0 4px 0 #c9a01a;
  color: #1a1208;
}
.lj-dict-ava svg { width: 22px; height: 22px; display: block; }
.lj-dict-controls {
  display: flex;
  gap: 10px;
  margin: 10px 0 0;
  flex-wrap: wrap;
}
.lj-dict-replay, .lj-dict-peek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 14px;
  background: #f6efce;
  color: #6b6022;
  cursor: pointer;
  font: 600 13px 'Nunito', sans-serif;
  transition: background .15s ease;
}
.lj-dict-replay:hover, .lj-dict-peek:hover { background: #ecdfa3; }
.lj-dict-replay svg, .lj-dict-peek svg { display: block; flex: 0 0 auto; }
.lj-dict-peek.is-peeked { opacity: .55; cursor: default; }
.lj-dict-cn {
  margin: 12px 0 0;
  font: 500 15px 'Noto Sans SC', sans-serif;
  color: #6b6857;
  line-height: 1.5;
}
.lj-step-dictation.lj-typing-correct .lj-typing-input { box-shadow: inset 0 0 0 2px #58cc02; color: #58cc02; }
.lj-step-dictation.lj-typing-wrong .lj-typing-input { box-shadow: inset 0 0 0 2px #ff4b4b; color: #ff4b4b; }
.lj-typing-hint {
  color: #7a8499;
  font-size: 13px;
  margin: 10px auto 0;
}
.lj-typing-correct-text {
  margin-top: 18px;
  font: 600 15px 'Nunito', sans-serif;
  color: #d63a3a;
}
/* "我觉得这也对，让 AI 判一下" 申诉按钮：仅在答错后冒出 */
.lj-typing-appeal {
  margin: 14px auto 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: #fff; color: #1cb0f6;
  font: 700 14px 'Nunito', sans-serif;
  border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 2px #b9e3f7, 0 2px 0 #d9eef9;
  cursor: pointer;
  transition: transform .12s ease;
}
.lj-typing-appeal:hover { transform: translateY(-1px); }
.lj-typing-appeal:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px #b9e3f7; }
.lj-typing-appeal:disabled { cursor: default; opacity: .65; }
.lj-typing-appeal-note {
  margin: 10px auto 0;
  font: 600 13px 'Nunito', sans-serif;
  color: #5b6b85;
}
.lj-typing-appeal-note.is-pass { color: #2c8f00; }
.lj-typing-appeal-note.is-fail { color: #d63a3a; }
/* Luxe 打字 */
[data-theme="luxe"] .lj-typing-prompt {
  color: var(--lx-ink, #F0E4C4);
  font-family: var(--lx-serif, 'Lora', serif);
}
[data-theme="luxe"] .lj-typing-input {
  background: rgba(13, 10, 23, 0.6);
  color: var(--lx-ink, #F0E4C4);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.35);
}
[data-theme="luxe"] .lj-typing-input:focus { box-shadow: inset 0 0 0 2px var(--lx-gold-1, #FFE9A8); }
[data-theme="luxe"] .lj-step-typing.lj-typing-correct .lj-typing-input {
  box-shadow: inset 0 0 0 2px #b8e07a;
  color: #b8e07a;
}
[data-theme="luxe"] .lj-step-typing.lj-typing-wrong .lj-typing-input {
  box-shadow: inset 0 0 0 2px #ff8b8b;
  color: #ff8b8b;
}
[data-theme="luxe"] .lj-typing-hint { color: var(--lx-ink-dim, #A89060); }
[data-theme="luxe"] .lj-typing-correct-text { color: #ff8b8b; }
[data-theme="luxe"] .lj-typing-appeal {
  background: rgba(13,10,23,.55);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.55), 0 2px 0 rgba(0,0,0,.4);
}
[data-theme="luxe"] .lj-typing-appeal-note { color: var(--lx-ink-dim, #A89060); }
[data-theme="luxe"] .lj-typing-appeal-note.is-pass { color: #b8e07a; }
[data-theme="luxe"] .lj-typing-appeal-note.is-fail { color: #ff8b8b; }
/* Luxe 打字气泡：金箔伙伴方块 + 暗底气泡 */
[data-theme="luxe"] .lj-typing-ava {
  background: linear-gradient(150deg, var(--lx-gold-1, #FFE9A8), var(--lx-gold-3, #C9A84C));
  color: #1a1208; box-shadow: 0 4px 0 rgba(160,130,60,.5);
}
[data-theme="luxe"] .lj-typing-msg {
  background: rgba(13,10,23,.6); box-shadow: inset 0 0 0 1px rgba(201,168,76,.3);
}
[data-theme="luxe"] .lj-typing-lead { color: var(--lx-ink-dim, #A89060); }
[data-theme="luxe"] .lj-typing-cn { color: var(--lx-ink, #F0E4C4); font-family: var(--lx-serif, 'Lora', serif); }
[data-theme="luxe"] .lj-typing-spk {
  background: var(--lx-gold, #C9A84C); color: #1a1208; box-shadow: 0 4px 0 rgba(160,130,60,.6);
}

/* ── Summary 撒花：满分时 24 颗纸屑从中心向外飞 ── */
.lj-step-summary { position: relative; }
.lj-summary-confetti {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
}
.lj-summary-confetti i {
  position: absolute;
  width: 10px;
  height: 14px;
  top: -7px; left: -5px;
  border-radius: 2px;
  --angle: calc(var(--i) * 15deg);
  --dist: 180px;
  background: hsl(calc(var(--i) * 36), 80%, 60%);
  animation: lj-confetti-fly 1.4s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i) * 0.02s);
  transform-origin: center;
}
@keyframes lj-confetti-fly {
  0%   { transform: rotate(0deg) translateY(0) rotate(0); opacity: 1; }
  100% { transform: rotate(var(--angle)) translateY(var(--dist)) rotate(720deg); opacity: 0; }
}
.lj-step-summary.is-perfect .lj-summary-title {
  background: linear-gradient(90deg, #ff9600, #ffc800, #58cc02, #1cb0f6, #ce82ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 32px;
}
[data-theme="luxe"] .lj-step-summary.is-perfect .lj-summary-title {
  background: linear-gradient(90deg, var(--lx-gold-1), #f0c0ba, var(--lx-gold-2), #b8a3c7, var(--lx-gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lj-summary-streak {
  margin: 12px auto 0;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font: 700 14px 'Nunito', sans-serif;
  background: linear-gradient(180deg, #ffc800, #ff9600);
  color: #1a1208;
  letter-spacing: 0.05em;
}
[data-theme="luxe"] .lj-summary-streak {
  background: rgba(201, 168, 76, 0.18);
  color: var(--lx-gold-1, #FFE9A8);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.4);
}

/* 错题重练 progress 文本 */
.lj-runner-prog-text { transition: color 0.2s ease; }

/* ── 移动端 ── */
@media (max-width: 480px) {
  .lj-runner-topbar { padding: 12px 14px; }
  .lj-runner-stage { padding: 16px 14px; }
  .lj-step-word { padding: 28px 22px; border-radius: 20px; }
  .lj-word-main { font-size: 36px; }
  .lj-word-def { font-size: 20px; }
  .lj-step-summary { padding: 32px 22px; }
  .lj-fill-sentence { font-size: 19px; }
  .lj-tiles-prompt { font-size: 18px; }
  .lj-tile { font-size: 15px; padding: 8px 12px; }
}

/* ─── 电脑端横版布局 ─── */
.lj-page[data-layout="h"] {
  max-width: 1320px;
  padding: 24px 24px 96px;
}
.lj-constellation[data-layout="h"] {
  max-width: none !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
}
/* 横版下移动端那条覆盖振幅的 transform 不能再生效 */
.lj-page[data-layout="h"] .lj-lesson {
  transform: translate(-50%, -50%);
}

/* ════════════════════════════════════════════════════════════════
   ≤480px 真手机：章节卡呼吸感保留 + 收纵向虚胖 + toggle 弱化
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 章节卡：上下 padding 收一档（22/36 → 18/24），左右轻收（20→16）
     卡间距 24→18。整体一屏多看 1 个卡，但字号/呼吸/间距比例保持 */
  .lj-chapter {
    padding: 18px 16px 24px;
    margin-bottom: 18px;
    border-radius: 18px;
  }
  /* 标题区到关卡区的间距 28→18（虚胖最大来源） */
  .lj-chapter-head { margin-bottom: 18px; }

  /* toggle 弱化：36px 圆形带底色 → 28px 透明背景仅留线性图标
     它本来只是「折叠按钮」、不是主 CTA，不该这么抢戏 */
  .lj-chapter-toggle {
    width: 28px;
    height: 28px;
    background: transparent;
    color: var(--np-ink-mid, #888);
    opacity: 0.7;
  }
  .lj-chapter-head:hover .lj-chapter-toggle {
    background: transparent;
    opacity: 1;
  }
  /* luxe 主题下的弱化（避免色差让按钮在暗底上更显眼） */
  [data-theme="luxe"] .lj-chapter-toggle {
    color: var(--lx-ink-dim, #A89060);
  }

  /* 关卡 label 宽度放宽，让西语等长词不被切（如 "Repaso de fin de capítulo"）*/
  .lj-lesson-label {
    max-width: 120px;
    font-size: 12.5px;
    line-height: 1.25;
  }
}

/* ════════════════════════════════════════════════════════════════
   Summary 卡片内：再来一遍（次按钮）/ 回到学习之旅（主按钮）
   主按钮复用 .lj-runner-next 样式 + .lj-summary-cta 修内边距
   ════════════════════════════════════════════════════════════════ */
.lj-summary-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.lj-sum-again {
  background: #fff;
  color: #777;
  border: none;
  border-radius: 16px;
  padding: 14px 28px;
  font: 700 15px 'Fredoka', 'Nunito', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 0 #e5e5e5;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  letter-spacing: 0.02em;
}
.lj-sum-again:hover { transform: translateY(-1px); }
.lj-sum-again:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #e5e5e5; }
.lj-summary-cta { padding: 14px 28px; }

[data-theme="luxe"] .lj-sum-again {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
  box-shadow: none;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
[data-theme="luxe"] .lj-sum-again:active {
  transform: translateY(1px);
  box-shadow: none;
}