/* ==========================================================================
   朝夕说 · Liquid Glass（参照 iOS 26）全局视觉层
   --------------------------------------------------------------------------
   原则（照 Apple 的做法分层）：
   • 「功能层」浮在内容之上：底部 Tab 栏、顶部滚动边缘、圆形图标按钮、弹窗/面板
     —— 用真玻璃（backdrop-filter 模糊 + 提饱和 + 高光边）。
   • 「内容层」卡片：半透明白 + 顶部镜面高光 + 柔和投影，不做逐卡模糊——
     底下是平滑的环境渐变，模糊看不出差别，却会让低端安卓 WebView 滚动掉帧。
   • 胶囊形按钮 / 同心圆角（外 28 → 内 20 → 图标 14）/ 按压时轻微缩放回弹。
   • 系统字体优先（SF Pro / 苹方），大标题加粗收紧字距。
   • prefers-reduced-transparency 与不支持 backdrop-filter 时回退为不透明。
   本文件最后加载（index.html 在 zx-redesign.css 之后），只覆盖视觉属性，不改布局逻辑。
   ========================================================================== */

:root {
  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", system-ui, "Microsoft YaHei", sans-serif;
  --lg-ink: #0b0d0c;
  --lg-ink-2: rgba(60, 60, 67, .72);
  --lg-ink-3: rgba(60, 60, 67, .48);
  --lg-tint: #28b14c;            /* 系统绿，比 #34c759 深一档，白底上对比更够 */
  --lg-tint-2: #34c759;
  --lg-tint-soft: rgba(52, 199, 89, .14);
  --lg-bg: #eef1f4;

  /* 材质 */
  --lg-fill: rgba(255, 255, 255, .62);
  --lg-fill-strong: rgba(255, 255, 255, .78);
  --lg-fill-thin: rgba(255, 255, 255, .42);
  --lg-blur: blur(22px) saturate(185%);
  --lg-blur-strong: blur(30px) saturate(200%);
  /* 高光边：上沿亮、四周一圈细白、下沿微亮 —— 模拟玻璃折射边缘 */
  --lg-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .28);
  --lg-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 30px -8px rgba(16, 24, 40, .14);
  --lg-shadow-float: 0 2px 6px rgba(16, 24, 40, .08), 0 18px 44px -10px rgba(16, 24, 40, .28);
  --lg-hairline: rgba(255, 255, 255, .6);

  --lg-r-xl: 28px;
  --lg-r-lg: 22px;
  --lg-r-md: 16px;
  --lg-spring: cubic-bezier(.2, .9, .25, 1.15);
}

/* ── 环境底色：几团低饱和的柔光，给玻璃「折射」的东西 ───────────────────── */
html body {
  font-family: var(--lg-font) !important;
  -webkit-font-smoothing: antialiased;
  background-color: var(--lg-bg) !important;
  background-image:
    radial-gradient(60vmax 50vmax at 8% -6%, rgba(126, 214, 168, .38), transparent 62%),
    radial-gradient(55vmax 45vmax at 104% 12%, rgba(140, 186, 255, .34), transparent 60%),
    radial-gradient(60vmax 55vmax at 92% 104%, rgba(255, 196, 150, .28), transparent 62%),
    radial-gradient(50vmax 45vmax at -6% 88%, rgba(196, 170, 255, .26), transparent 60%) !important;
  background-attachment: fixed !important;
}
/* 主 Tab 页的外壳不再铺自己的底色，让环境光透出来 */
html body[data-vocpilot-route] .home-shell.zx-home,
html body[data-vocpilot-route="home"],
html body[data-vocpilot-route="practice"],
html body[data-vocpilot-route="me"],
html body[data-vocpilot-route="scenes"],
html body[data-vocpilot-route="podcast"],
html body[data-vocpilot-route="course-preview"] { background-color: transparent; }
html body[data-vocpilot-route] #app > main,
html body[data-vocpilot-route] .zx-home,
html body[data-vocpilot-route] .me4-home,
html body[data-vocpilot-route] [class*="-shell"]:not(.lx-shell):not(.study-shell):not(.study-listen-shell) {
  background-color: transparent !important;
}

/* 顶部滚动边缘：内容滚到状态栏下方时变成一条渐隐的玻璃，而不是硬切 */
html body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; z-index: 900; pointer-events: none;
  height: calc(env(safe-area-inset-top, 0px) + 18px);
  background: linear-gradient(to bottom, rgba(238, 241, 244, .72), rgba(238, 241, 244, 0));
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

/* ── 底部 Tab 栏：真·透明的 Liquid Glass 胶囊 + 滑动的选中透镜 ───────────────
   • 材质很薄：白只有 16–30%，背景内容透过来只做轻微模糊 + 提饱和（像一块透镜，而不是磨砂板）。
   • 厚度靠「光」表现：上沿镜面高光、四周细亮边、内发光；::before 是斜向的镜面反光，
     ::after 是一圈渐变亮边（玻璃边缘折射出的光）。
   • 选中态是一块更亮的小玻璃（.mnav-lens），在 Tab 之间弹簧滑动。
   • Chromium 内核（安卓 WebView / Chrome）额外加真实折射：liquid-glass.js 生成位移贴图，
     html.lg-refract 时 backdrop-filter 先走 SVG 位移滤镜，边缘把背后的内容「弯」进来。 */
@media (max-width: 1023px) {
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav {
    left: 14px !important; right: 14px !important; width: auto !important;
    bottom: calc(max(env(safe-area-inset-bottom, 0px), 10px) + 2px) !important;
    height: 64px !important; padding: 5px !important;
    border: 0 !important; border-radius: 32px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16)) !important;
    -webkit-backdrop-filter: blur(9px) saturate(190%) brightness(1.05); backdrop-filter: blur(9px) saturate(190%) brightness(1.05);
    box-shadow:
      inset 0 1px .5px rgba(255, 255, 255, .95),
      inset 0 -1px 1px rgba(255, 255, 255, .5),
      inset 1px 0 1px rgba(255, 255, 255, .32),
      inset -1px 0 1px rgba(255, 255, 255, .32),
      inset 0 0 16px rgba(255, 255, 255, .24),
      0 12px 32px -10px rgba(16, 24, 40, .26),
      0 2px 6px rgba(16, 24, 40, .07) !important;
    display: flex !important; align-items: stretch !important; gap: 2px !important;
    isolation: isolate;
    transition: transform .45s var(--lg-spring), height .35s ease, left .35s ease, right .35s ease;
  }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background:
      linear-gradient(112deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 18%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .18) 100%);
    mix-blend-mode: soft-light;
  }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    padding: 1.2px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .18) 32%, rgba(255, 255, 255, .06) 58%, rgba(255, 255, 255, .7) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  html body #vocpilot-mobile-bottom-nav .mnav-lens {
    /* styles.css 给底栏里所有 span 定了 27×27 —— 透镜要撑满按钮高度 */
    display: block !important; height: auto !important; min-height: 0 !important; border: 0 !important; line-height: normal !important;
    position: absolute; top: 5px; bottom: 5px; left: 0; z-index: 0; width: 0;
    border-radius: 27px; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34));
    -webkit-backdrop-filter: blur(2px) saturate(230%) brightness(1.08); backdrop-filter: blur(2px) saturate(230%) brightness(1.08);
    box-shadow: inset 0 1px .5px #fff, inset 0 -1px 1px rgba(255, 255, 255, .55), inset 0 0 12px rgba(255, 255, 255, .4),
      0 6px 16px -8px rgba(16, 24, 40, .3), 0 1px 3px rgba(16, 24, 40, .08);
    transition: transform .55s var(--lg-spring), width .35s ease, opacity .2s ease;
  }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button {
    position: relative; z-index: 1;
    flex: 1 1 0 !important; min-width: 0 !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important;
    border-radius: 27px !important; background: transparent !important;
    color: rgba(28, 32, 36, .74) !important;
    transition: color .2s ease, transform .35s var(--lg-spring);
  }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button:active { transform: scale(.9); }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button .mnav-ic {
    width: 26px !important; height: 24px !important; background: transparent !important; border-radius: 0 !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .7));
  }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button .mnav-ic svg { width: 24px; height: 24px; }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav em {
    font-size: 10.5px !important; font-weight: 650 !important; letter-spacing: 0 !important; font-style: normal;
    text-shadow: 0 0 6px rgba(255, 255, 255, .85), 0 0 2px rgba(255, 255, 255, .9);
  }
  /* 选中：底色由滑动透镜提供，按钮本身只换颜色 */
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button.is-active,
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button[aria-current="page"] {
    background: transparent !important; box-shadow: none !important;
    color: var(--lg-tint) !important;
  }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav:not(:has(.mnav-lens)) button.is-active { background: rgba(255, 255, 255, .6) !important; }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button.is-active em { color: var(--lg-tint) !important; }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button.is-active .mnav-ic { background: transparent !important; color: var(--lg-tint) !important; }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button.is-active .mnav-fill { fill: currentColor; }
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button.is-active .mnav-cut,
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav button.is-active .mnav-cut-line { fill: #fff !important; stroke: #fff !important; }

  /* 真实折射（仅 Chromium，liquid-glass.js 打开）：位移滤镜 + 少量模糊 */
  html.lg-refract body #vocpilot-mobile-bottom-nav.mobile-bottom-nav {
    -webkit-backdrop-filter: url(#lg-refract-nav) blur(4px) saturate(190%) brightness(1.05);
    backdrop-filter: url(#lg-refract-nav) blur(4px) saturate(190%) brightness(1.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)) !important;
  }

  /* 2026-10-16：取消「下滑收窄」——底栏变窄时选中透镜跟不上，滚动时透镜错位（用户反馈）。底栏保持固定尺寸。 */
}

/* 桌面顶栏：玻璃条 */
@media (min-width: 1024px) {
  html body #vocpilot-desktop-top-nav {
    background: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7), 0 6px 24px -12px rgba(16, 24, 40, .2) !important;
  }
  html body #vocpilot-desktop-top-nav .dnav-tabs button { border-radius: 999px !important; }
  html body #vocpilot-desktop-top-nav .dnav-tabs button.is-active,
  html body #vocpilot-desktop-top-nav .dnav-tabs button[aria-current="page"] {
    background: rgba(255, 255, 255, .85) !important; color: var(--lg-tint) !important;
    box-shadow: inset 0 1px 0 #fff, 0 2px 8px -2px rgba(16, 24, 40, .16) !important;
  }
}

/* ── 内容卡片：半透明白 + 镜面高光（主 Tab 页） ─────────────────────────── */
html body .zx-hero, html body .zx-tile, html body .zx-review, html body .zx-card,
html body .me4-member:not(.premium), html body .me4-ledger, html body .me4-row-card, html body .me4-list,
html body .vy-book-card, html body .vy-course-stat, html body .sl-card, html body .sl-recommended,
html body .pod3-card, html body .wb-card, html body .er-card, html body .sheet-card {
  background: var(--lg-fill) !important;
  border: 0 !important;
  box-shadow: var(--lg-rim), var(--lg-shadow) !important;
}
html body .zx-hero, html body .vy-book-card, html body .me4-ledger, html body .me4-list { border-radius: var(--lg-r-xl) !important; }
html body .zx-tile, html body .zx-review, html body .zx-card, html body .me4-row-card,
html body .vy-course-stat, html body .sl-card, html body .sl-recommended { border-radius: var(--lg-r-lg) !important; }
/* 今日任务 / 继续学习这类「主卡」更亮一档 */
html body .vy-course-task, html body .vy-course-hero {
  background: var(--lg-fill-strong) !important; border: 0 !important;
  border-radius: var(--lg-r-xl) !important; box-shadow: var(--lg-rim), var(--lg-shadow) !important;
}
/* 深色会员条保持深色，但换成烟熏玻璃 */
html body .me4-member.premium {
  background: linear-gradient(160deg, rgba(28, 34, 30, .92), rgba(18, 22, 20, .86)) !important;
  border: 0 !important; border-radius: var(--lg-r-lg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .06), var(--lg-shadow) !important;
}
/* 卡内图标块：同心圆角，浅色玻璃底 */
html body .zx-card-ic, html body .zx-review-ic, html body .zx-hero-ic, html body .zx-tile-ic {
  border-radius: 14px !important;
}
/* 场景卡：照片与卡片同心圆角，标题区是叠在照片下沿的玻璃 */
html body .sl-card { overflow: hidden !important; }
html body .sl-card img { border-radius: 0 !important; }

/* 按压反馈：轻微缩小 + 回弹 */
html body .zx-hero, html body .zx-tile, html body .zx-review, html body .zx-card, html body .me4-row-card,
html body .vy-book-card, html body .sl-card, html body .sl-recommended, html body .pod3-card {
  transition: transform .45s var(--lg-spring), box-shadow .3s ease, background .3s ease !important;
  -webkit-tap-highlight-color: transparent;
}
html body .zx-hero:active, html body .zx-tile:active, html body .zx-review:active, html body .zx-card:active, html body .me4-row-card:active,
html body .vy-book-card:active, html body .sl-card:active, html body .sl-recommended:active, html body .pod3-card:active {
  transform: scale(.975);
  background: var(--lg-fill-strong) !important;
}

/* ── 圆形玻璃图标按钮（顶部操作、返回） ───────────────────────────────── */
html body .zx-ic, html body .icon-back-btn, html body .study-back-btn, html body .exp-back,
html body .me4-icon-btn, html body .lx-close, html body .sl-back, html body .vy-back, html body .wb-dict-fs-back {
  width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important;
  display: inline-grid !important; place-items: center !important;
  border: 0 !important; border-radius: 50% !important;
  background: var(--lg-fill-thin) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-rim), 0 4px 14px -6px rgba(16, 24, 40, .22) !important;
  color: var(--lg-ink) !important;
  transition: transform .35s var(--lg-spring), background .2s ease !important;
}
html body .zx-ic:active, html body .icon-back-btn:active, html body .study-back-btn:active, html body .exp-back:active,
html body .lx-close:active, html body .sl-back:active, html body .vy-back:active { transform: scale(.9); background: var(--lg-fill-strong) !important; }

/* ── 按钮：胶囊 + 着色玻璃 ─────────────────────────────────────────────── */
html body .btn-primary, html body .vy-course-task-cta, html body .zx-login, html body .vp-modal-ok,
html body .sl-cta, html body .lx-primary, html body .me4-cta {
  border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(64, 214, 106, .96), rgba(40, 177, 76, .96)) !important;
  color: #fff !important; font-weight: 650 !important; letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 8px 22px -8px rgba(40, 177, 76, .65) !important;
  transition: transform .35s var(--lg-spring), filter .2s ease, box-shadow .2s ease !important;
}
html body .btn-primary:active, html body .vy-course-task-cta:active, html body .zx-login:active, html body .vp-modal-ok:active,
html body .sl-cta:active, html body .lx-primary:active, html body .me4-cta:active { transform: scale(.96); filter: brightness(1.04); }
html body .btn-primary:disabled { filter: saturate(.4) brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) !important; }

/* 次级按钮：透明玻璃胶囊 */
html body .btn-ghost, html body .btn-secondary, html body .vp-modal-cancel, html body .vy-course-retake, html body .vy-series-toggle {
  border: 0 !important; border-radius: 999px !important;
  background: var(--lg-fill) !important; color: var(--lg-ink) !important;
  box-shadow: var(--lg-rim), 0 2px 8px -4px rgba(16, 24, 40, .18) !important;
}
/* 背单词「没听出来 / 想不起来」这类文字按钮保持轻量，不套胶囊 */
html body .study-listen-card .btn-dontknow { background: transparent !important; box-shadow: none !important; }

/* ── 分段控件 / 胶囊筛选：玻璃轨道 + 白色透镜 ───────────────────────────── */
html body .seg-toggle, html body .sl-entry-modes, html body .sl-pills {
  border: 0 !important; border-radius: 999px !important;
  background: rgba(118, 118, 128, .12) !important;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06) !important;
  padding: 3px !important;
}
html body .seg-toggle button, html body .sl-entry-modes button, html body .sl-pill {
  border-radius: 999px !important; border: 0 !important; background: transparent !important;
  transition: background .3s ease, color .2s ease, box-shadow .3s ease !important;
}
html body .seg-toggle button.active, html body .sl-entry-modes button.is-active, html body .sl-entry-modes button[aria-pressed="true"],
html body .sl-pill.is-active {
  background: #fff !important; color: var(--lg-ink) !important;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .06), 0 3px 10px -2px rgba(16, 24, 40, .16), inset 0 0 0 .5px rgba(16, 24, 40, .04) !important;
}
html body .sl-pill.is-active svg { color: var(--lg-tint); }
html body .pod3-filter-chip { border: 0 !important; border-radius: 999px !important; background: var(--lg-fill) !important; box-shadow: var(--lg-rim) !important; }
html body .pod3-filter-chip.is-active, html body .pod3-filter-chip[aria-pressed="true"] { background: var(--lg-ink) !important; color: #fff !important; box-shadow: none !important; }

/* ── 输入框 ────────────────────────────────────────────────────────────── */
html body input[type="text"], html body input[type="search"], html body input[type="email"], html body input[type="password"],
html body input[type="tel"], html body textarea, html body select {
  border-radius: var(--lg-r-md);
}
html body .spell-input, html body .vp-modal-input, html body .lx-input, html body .search-input {
  background: var(--lg-fill-strong) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08), inset 0 1px 2px rgba(16, 24, 40, .06) !important;
}
html body .spell-input:focus, html body .vp-modal-input:focus, html body .lx-input:focus, html body .search-input:focus {
  box-shadow: inset 0 0 0 1.5px var(--lg-tint-2), 0 0 0 4px rgba(52, 199, 89, .16) !important;
}

/* ── 弹窗 / 面板：大圆角玻璃 ─────────────────────────────────────────── */
html body .vp-modal-wrap { background: rgba(10, 14, 12, .28) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html body .vp-modal, html body .sheet-card, html body .wb-dict-fs, html body .lg-sheet {
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
  border: 0 !important; border-radius: 30px !important;
  box-shadow: var(--lg-rim), 0 30px 80px -20px rgba(16, 24, 40, .45) !important;
}

/* ── 字体层级：页面大标题收紧字距 ───────────────────────────────────────── */
html body .zx-hello h1, html body .sl-title, html body .me4-name, html body .vy-page-title, html body .pod3-title {
  letter-spacing: -.022em !important;
}

/* ── 可访问性与兼容回退 ────────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav, html body #vocpilot-desktop-top-nav,
  html body .vp-modal, html body .sheet-card, html body .wb-dict-fs, html body .lg-sheet,
  html body .zx-ic, html body .icon-back-btn, html body .study-back-btn, html body .exp-back, html body .lx-close {
    background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html body { background-image: none !important; }
  html body::before { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body #vocpilot-mobile-bottom-nav.mobile-bottom-nav, html body #vocpilot-desktop-top-nav { background: rgba(255, 255, 255, .94) !important; }
  html body .vp-modal, html body .sheet-card, html body .wb-dict-fs { background: #fff !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body * { transition-duration: .01ms !important; }
}

/* 场景对话的样式在进入页面时才注入（晚于本文件），这里提高特异性压过去 */
html body .sl-pills .sl-pill.is-active,
html body .sl-pills .sl-pill.is-active span,
html body .sl-pills .sl-pill.is-active small { color: var(--lg-ink) !important; }
html body .sl-pills .sl-pill.is-active svg { color: var(--lg-tint) !important; }
html body .sl-pills .sl-pill.is-active { background: #fff !important; box-shadow: 0 1px 1px rgba(16, 24, 40, .06), 0 3px 10px -2px rgba(16, 24, 40, .16) !important; }

/* ── 全屏学习页（词汇 / 句型 / 习语 / 复习，src/lexi.css）────────────────── */
html body .lx-shell { --lx-bg: transparent; background: transparent !important; }
html body .lx-shell .lx-icon-btn {
  width: 44px !important; height: 44px !important; border-radius: 50% !important;
  background: var(--lg-fill-thin) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-rim), 0 4px 14px -6px rgba(16, 24, 40, .22) !important;
}
html body .lx-shell .lx-progress { background: rgba(118, 118, 128, .14) !important; border-radius: 999px !important; }
html body .lx-shell .lx-option, html body .lx-shell .lx-chip {
  background: var(--lg-fill) !important; border: 0 !important; border-radius: 20px !important;
  box-shadow: var(--lg-rim), var(--lg-shadow) !important;
  transition: transform .4s var(--lg-spring), background .25s ease, box-shadow .25s ease !important;
}
html body .lx-shell .lx-chip { border-radius: 999px !important; }
html body .lx-shell .lx-option:active, html body .lx-shell .lx-chip:active { transform: scale(.975); background: var(--lg-fill-strong) !important; }
html body .lx-shell .lx-option.is-right { background: rgba(214, 245, 223, .9) !important; box-shadow: inset 0 0 0 1.5px rgba(40, 177, 76, .55), var(--lg-shadow) !important; }
html body .lx-shell .lx-option.is-wrong { background: rgba(255, 228, 226, .9) !important; box-shadow: inset 0 0 0 1.5px rgba(224, 72, 77, .5), var(--lg-shadow) !important; }
html body .lx-shell .lx-say, html body .lx-shell .lx-play {
  background: rgba(52, 199, 89, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .5) !important;
}
html body .lx-shell .lx-mic {
  background: linear-gradient(180deg, rgba(64, 214, 106, .97), rgba(40, 177, 76, .97)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 28px -8px rgba(40, 177, 76, .7) !important;
}
/* 开麦：外圈绿光随音量变宽（--lx-level 由 lexi-coach.js 写入，0–1）。 */
html body .lx-shell .lx-mic.is-on {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 calc(6px + var(--lx-level, 0) * 14px) rgba(52, 199, 89, .2), 0 12px 28px -8px rgba(40, 177, 76, .7) !important;
  transition: box-shadow .12s linear;
}
html body .lx-shell .lx-mic.is-busy { background: rgba(118, 118, 128, .14) !important; color: rgba(60, 60, 67, .55) !important; box-shadow: none !important; }
/* 底部结果面板：玻璃上滑面板 */
html body .lx-shell .lx-sheet {
  background: rgba(255, 255, 255, .74) !important;
  -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
  border: 0 !important; border-radius: 30px 30px 0 0 !important;
  box-shadow: inset 0 1px 0 #fff, 0 -12px 40px -16px rgba(16, 24, 40, .3) !important;
}
html body .lx-shell .lx-sheet.is-right { background: rgba(232, 250, 237, .82) !important; }
html body .lx-shell .lx-sheet.is-wrong { background: rgba(255, 238, 236, .84) !important; }

/* ── 背单词（src/study.js）：同一套材质 ──────────────────────────────── */
html body .study-shell { background: transparent !important; }
html body .study-listen-card .choice-opt {
  background: var(--lg-fill) !important; border: 0 !important; border-radius: 20px !important;
  box-shadow: var(--lg-rim), var(--lg-shadow) !important;
}
html body .study-listen-card .choice-opt.right { background: rgba(214, 245, 223, .9) !important; box-shadow: inset 0 0 0 1.5px rgba(40, 177, 76, .55), var(--lg-shadow) !important; }
html body .study-listen-card .choice-opt.wrong { background: rgba(255, 228, 226, .9) !important; box-shadow: inset 0 0 0 1.5px rgba(224, 72, 77, .5), var(--lg-shadow) !important; }
html body .study-listen-card .btn-listen {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 30px -10px rgba(40, 177, 76, .7) !important;
}
html body .study-listen-card .spell-form > .btn-primary { border-radius: 999px !important; }

/* Compact course selector; long capability lists live in the course itself. */
.vy-course-home .vy-book-card{padding:20px!important;gap:18px!important;border-radius:22px!important;align-items:center}
.vy-course-home .vy-book-left{width:76px;flex:0 0 76px}
.vy-course-home .vy-book-left .vy-cover{width:76px!important;height:108px!important;border-radius:12px!important}
.vy-course-home .vy-book-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vy-course-home .vy-book-title{font-size:23px!important;line-height:1.2;margin:0!important}
.vy-course-home .vy-book-lvl{font-size:12px!important;white-space:nowrap;padding:5px 9px;border-radius:8px;background:#f0f4f0;color:#53645a}
.vy-course-home .vy-book-summary{margin:10px 0!important;font-size:13px!important;line-height:1.55;color:#68716a;font-weight:400}
.vy-course-home .vy-book-lock{display:inline-block;margin:0 0 8px;font-size:11px;background:none!important;padding:0!important;color:#89938c}
.vy-course-home .vy-book-progress{margin-top:12px!important}
.vy-course-home .vy-book-progress span{font-size:11px!important}
.vy-course-home .vy-book-progress>div{height:4px!important}

.vy-course-cover{height:120px;width:82px;border-radius:14px;box-sizing:border-box;padding:13px 9px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,var(--cover-tint),#fafcf9);color:var(--cover-ink);border:1px solid #ffffffb3}
.vy-course-cover span{font-size:10px;line-height:1.4}.vy-course-cover strong{font-size:18px;line-height:1.4}.vy-course-cover i{font-size:10px;font-style:normal;opacity:.7}
.vy-book-heading{flex-wrap:wrap;gap:6px!important}.vy-book-title{font-size:19px!important;line-height:1.4!important}


/* ── 英文听力：整页纯白（2026-10-16 用户要求）。环境光渐变与各层纸色在这个路由一律关掉。 ── */
html body[data-vocpilot-route="podcast"] { background: #fff !important; background-image: none !important; }
html body[data-vocpilot-route="podcast"]::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
html body[data-vocpilot-route="podcast"] .podcast-page-shell,
html body[data-vocpilot-route="podcast"] #podcast-shorts-pane,
html body[data-vocpilot-route="podcast"] .podcast-home-tabs-v2,
html body[data-vocpilot-route="podcast"] .pod3,
html body[data-vocpilot-route="podcast"] .pod3-transcript-mode,
html body[data-vocpilot-route="podcast"] .blink-home,
html body[data-vocpilot-route="podcast"] .dialogue-listening,
html body[data-vocpilot-route="podcast"] #blink-player-root {
  --studio-paper: #fff; --pod3-bg: #fff; --dl-paper: #fff;
  background: #fff !important; background-image: none !important;
}
/* 白底上的白卡片靠一圈极淡的描边分开，而不是阴影堆叠 */
html body[data-vocpilot-route="podcast"] .lh-today { box-shadow: 0 0 0 1px #f0f0f2, 0 8px 24px -18px rgba(0, 0, 0, .25) !important; }
html body[data-vocpilot-route="podcast"] .pod3 .lh-start { background: #34C759 !important; border-radius: 999px !important; }
html body[data-vocpilot-route="podcast"] .pod3 .pod3-filter-chip.is-active { background: #34C759 !important; border-color: #34C759 !important; color: #fff !important; box-shadow: none !important; }