/* 桌面端：子页面统一导航仅移动端显示（is-sub 判断已随 body class 注入） */
@media (min-width: 901px) {
  body.is-sub .sub-nav { display: none !important; }
  body.is-sub .container { padding: 0; }
}

/* =========================================================
   星小灵 Starryling · 移动端适配 mobile.css
   ---------------------------------------------------------
   约定：
   1. 断点：≤900px 应用页移动布局；≤860px 学习页移动布局。
   2. 所有选择器统一带 `html` 前缀提升特异性 (0,1,1)，
      以压过页面内联 <style>（head 与 body 内）和 JS 运行时
      注入样式中的同语义规则（它们都是 (0,1,0)）。
   3. 桌面（>900px）完全不受影响：所有规则都在媒体查询内。
   ========================================================= */

/* ============ 0. 全局基础（≤900px） ============ */
@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  html * { -webkit-tap-highlight-color: transparent; }
  html body { touch-action: manipulation; overscroll-behavior-y: contain; }

  html .trancy-body { height: 100dvh; }
  html .trancy-page { padding: 0; }
  html .trancy-page .page { border-radius: 0; }
  /* 通用内容区：底部为底部导航让位 */
  html .wrap { padding-bottom: 112px; }
  html .container { scrollbar-width: none; }
  /* ===== 子页面（is-sub）：无底部菜单 + 统一顶部导航 ===== */
  html body.is-sub nav.m-nav { display: none !important; }
  html body.is-sub .trancy-header { display: none !important; }
  /* 统一导航栏：返回 + 大标题（iOS 风格，sticky 顶部） */
  html body.is-sub .sub-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
    gap: 10px; padding: 14px 2px 12px; background: var(--bg-0); }
  html body.is-sub .sub-back { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-left: -6px; padding: 0; border: none; background: none; color: var(--anker);
    cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
  html body.is-sub .sub-back:active { transform: scale(.9); }
  html body.is-sub .sub-back svg { width: 22px; height: 22px; }
  html body.is-sub .sub-nav-t { font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--text-100); }
  /* 子页面容器：16px 边距、底部留白无需给 tab 让位（减到 40px） */
  html body.is-sub .container { padding: 0 16px 40px; }
  html body.is-sub .container .wrap { padding-left: 0; padding-right: 0; padding-bottom: 24px; }
  /* 子页面内重复的页内标题（sub-nav 已有大标题）：移动端隐藏 */
  html body.is-sub .pg-head { display: none; }
  html body.is-sub .pg-head.pg-fixed { display: flex; }
  /* 系列页：sub-nav 已提供返回和标题，页内只留操作按钮（重命名/删除） */
  html body.is-sub .pl-wrap .pg-head { display: flex; margin: 4px 0 0; padding: 0; }
  html body.is-sub .pl-wrap .pg-head .pg-title { display: none; }
  html body.is-sub .pl-wrap .pg-back { display: none; }
  html body.is-sub .pl-wrap .pg-head .pg-actions { margin-left: auto; }
  /* 学习计划（onboard）：全屏流程页，隐藏统一导航，用页面自己的样式 */
  html body.is-sub.onboard-page .sub-nav { display: none; }
}

/* =========================================================
   移动设计系统（iOS 级视觉语言，≤900px 覆盖桌面 token）
   ---------------------------------------------------------
   字体：SF Pro / PingFang SC（-apple-system），彻底弃用圆体
   字号阶梯：主标题 20 / hero 18 / 区块 15 / 正文 14 / 辅助 12-12.5
   圆角：大卡 20 / 中卡 14-16 / 控件 12 / 标签胶囊 100
   触控：所有可点元素 ≥44px，统一 0.97 按压反馈
   ========================================================= */
@media (max-width: 900px) {
  /* 1. 字体栈：iOS 系统字体（英文 SF Pro + 中文苹方），数字等宽对齐 */
  html,
  html body,
  html button,
  html input,
  html select,
  html textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
      "Helvetica Neue", "Microsoft YaHei", sans-serif !important;
    font-variant-numeric: tabular-nums;
  }
  html .trancy-header { font-family: inherit; }
  /* 2. 标题字号体系（页面主标题 20 / hero 18 / 区块 15） */
  html .pg-head .pg-title, html .wb-title, html .ob-title, html .pl-title,
  html .page-title .title {
    font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.3px !important;
  }
  html .hh-title { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; }
  html .hh-series-title, html .wb-sec, html .pg-head .pg-title .pg-actions { font-size: 15px; font-weight: 600; letter-spacing: -0.1px; }
  /* 3. 通用按压反馈：卡片/行/按钮 active 轻微缩放，代替桌面 hover */
  html .trancy-header nav > a:active,
  html .material-card:active, html .hh-s:active, html .m-card:active,
  html .wb-item:active, html .pl-item:active, html .chan-card:active,
  html .material-item:active, html .series-card:active,
  html .yt-card:active, html .card:active { transform: scale(.97); }
  html .hh-addbtn:active, html .btn:active, html .card-btn:active { transform: scale(.96); }
  html .btn, html .card-btn { transition: transform .12s ease, filter .12s ease; }
  /* 4. 主按钮：48pt 触控 + 14px 圆角（iOS 填充按钮语言） */
  html .btn { min-height: 48px; border-radius: 14px; font-weight: 600; }
  html .btn.btn-sm { min-height: 38px; border-radius: 12px; }
  /* 5. 输入框：12px 圆角 + 专注态轻阴影 */
  html input[type=text], html input[type=password], html input[type=email],
  html input.search, html .auth-card input, html .pay-card input,
  html .search-input-row input { border-radius: 12px !important; min-height: 44px; }
}

/* ============ 1. 底部 Tab 导航（移动端 3 Tab：发现 / 学习 / 我的） ============ */
@media (max-width: 900px) {
  html .trancy-header,
  html html[data-nav=collapsed] .trancy-header {
    position: fixed; inset: auto 0 0 0; width: 100%; height: auto;
    flex-direction: row; align-items: stretch;
    /* iOS tab bar：近实心半透明 + 顶部 hairline + 上投影（不用 backdrop-filter，
       避免劫持 fixed 后代的 containing block） */
    background: rgba(26,23,18,.92);
    border-top: .5px solid rgba(255,255,255,.09);
    box-shadow: 0 -10px 36px rgba(0,0,0,.38);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 120; flex-shrink: 0;
  }
  html .trancy-header .brand-row { display: none; }
  /* 桌面导航隐藏，移动导航（m-nav）成为底部栏 */
  html .trancy-header nav:not(.m-nav),
  html html[data-nav=collapsed] .trancy-header nav:not(.m-nav) { display: none; }
  html .trancy-header nav.m-nav,
  html html[data-nav=collapsed] .trancy-header nav.m-nav {
    display: flex; flex: 1; flex-direction: row; padding: 6px 6px 4px; gap: 2px; margin: 0; overflow: visible;
  }
  html .trancy-header nav.m-nav > a,
  html html[data-nav=collapsed] .trancy-header nav.m-nav > a {
    flex: 1; height: 54px; flex-direction: column; justify-content: center; gap: 3px;
    padding: 0; border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  html .trancy-header nav.m-nav > a .btn-icon svg { width: 22px; height: 22px; }
  html .trancy-header nav.m-nav > a .nav-label { display: block; font-size: 10px; font-weight: 600; line-height: 1; }
  /* 选中态：品牌琥珀色（iOS tint），未选中保持中性灰 */
  html .trancy-header nav.m-nav > a.active { color: var(--anker, #ffc862); }
  html .trancy-header nav.m-nav > a.active .btn-icon,
  html .trancy-header nav.m-nav > a.active .nav-label { color: var(--anker, #ffc862); }
  html .trancy-header nav.m-nav > a.active .btn-icon svg { stroke-width: 2.2; }
  html .trancy-header nav.m-nav > a:not(.active) { color: var(--text-50); }
  /* 账户入口：移动端收进「我的」Tab，右上角不再悬浮 */
  /* 兜底：旧版页面（header 里还没有 m-nav 结构）时，把桌面 nav 显示为底部栏，
     避免「旧 HTML + 新 CSS」组合下底部一片空白；新页面走上方 m-nav 规则 */
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) { display: flex; flex: 1; flex-direction: row; padding: 6px 6px 4px; gap: 2px; margin: 0; overflow: visible; }
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) > a { flex: 1; height: 54px; flex-direction: column; justify-content: center; gap: 3px; padding: 0; border-radius: 12px; }
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) > a .btn-icon svg { width: 22px; height: 22px; }
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) > a .nav-label { display: block; font-size: 10px; font-weight: 600; line-height: 1; }
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) > a.active { color: var(--anker, #ffc862); }
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) > a.active .btn-icon,
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) > a.active .nav-label { color: var(--anker, #ffc862); }
  html .trancy-header:not(:has(nav.m-nav)) nav:not(.m-nav) > a:not(.active) { color: var(--text-50); }
}

/* ============ 2. 顶部栏压缩 + 标题统一（≤900px） ============ */
@media (max-width: 900px) {
  html .topapp-bar { height: 56px; padding: 0 12px; gap: 8px; }
  html .lg-search-bar { min-width: 0; flex: 1; max-width: none; height: 38px; }
  html .search-bar-shortcut { display: none; }
  html .pg-head { padding: 4px 0 14px; gap: 10px; }
  /* 标题体系已由设计系统统一（20/18/15px），此处仅做排布 */
  html .pg-head .pg-title, html .wb-title, html .ob-title, html .pl-title { line-height: 1.25; }
  /* 资料库顶部：标题 + 子 tab 一行 */
  html .topapp-bar .chan-tabs { margin-right: 0; max-width: 100%; }
}

/* ============ 3. 弹层移动化（≤900px） ============ */
@media (max-width: 900px) {
  /* 添加弹窗 → 底部抽屉 */
  html .add-modal { align-items: flex-end; padding-top: 0; }
  html .add-modal .add-box { width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; max-height: 88dvh; overflow-y: auto; }
  html .add-modal .add-body { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  /* 加号菜单：iOS 分组列表（行距 8px、16px 圆角、琥珀图标、箭头） */
  html .add-menu { padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); }
  html .add-menu .addc-row { margin-top: 8px; padding: 15px 16px; border-radius: 16px;
    background: var(--bg-1); border: 1px solid var(--border-06); font-size: 14.5px; font-weight: 600;
    transition: transform .12s ease, background .12s ease; }
  html .add-menu .addc-row:active { transform: scale(.98); background: var(--bg-2); }
  html .add-menu .addc-row .addc-t { gap: 11px; }
  html .add-menu .addc-row .addc-t svg { width: 19px; height: 19px; }
  html .add-menu .addc-row .addc-n { font-size: 11.5px; }
  html .add-body .add-back { min-height: 36px; margin-bottom: 10px; font-size: 13px; }
  /* 搜索浮层 → 全屏 */
  html .search-overlay { padding-top: 0; align-items: stretch; }
  html .search-overlay .search-box { width: 100%; max-width: 100%; border-radius: 0; border: 0; height: 100dvh; box-shadow: none; }
  html .search-overlay .search-input-row { padding: 16px 14px; }
  html .search-overlay .search-input-row input { font-size: 16px; }
  /* UP 弹窗 → 底部抽屉 */
  html .upc-mask { align-items: flex-end; }
  html .upc-card { width: 100%; max-height: 84dvh; border-radius: 18px 18px 0 0; }
  /* 账户菜单 → 顶部下拉（右上角头像触发） */
  html .avm { left: 10px; right: 10px; width: auto; top: calc(58px + env(safe-area-inset-top)); bottom: auto; }
  /* 设置抽屉 → 全宽 */
  html .set-drawer { width: 100%; }
}

/* ============ 4. 首页（≤900px） ============ */
@media (max-width: 900px) {
  /* 移动端：去大框、去仪表盘，只留标题 + 推荐封面 */
  html .home-wrap, html .home-left-wrapper { padding: 0 16px calc(100px + env(safe-area-inset-bottom)); }
  html .home-hero { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
  html .home-hero::before { display: none; }
  /* iOS Large Title 标题栏：纯文字大标题 + 右侧操作，不挤 */
  html .home-hero .hh-head { display: flex; align-items: center; gap: 12px; padding: 32px 0 16px; }
  html .home-hero .hh-ico { display: none; }
  html .home-hero .hh-title {
    font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.5px !important;
    line-height: 1.15 !important; color: var(--text-100) !important;
  }
  html .home-hero .hh-lvl { gap: 10px; padding-top: 0; }
  html .hh-addbtn { width: 40px; height: 40px; border-radius: 14px; font-size: 18px; font-weight: 600; }
  html .hh-search { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    padding: 0; border: 1px solid var(--border-06); background: var(--bg-2); color: var(--text-60);
    border-radius: 14px; cursor: pointer; font-family: inherit; transition: all .15s; }
  html .hh-search:active { transform: scale(.94); color: var(--anker); }
  html .hh-search svg { width: 17px; height: 17px; }
  html .hh-relvl { display: none; }
  /* 隐藏仪表盘 / 分隔线 / 继续学 / 更多链接（PC 保留，移动端只留推荐） */
  html .hh-goal, html .hh-div, html #hhSeries, html .hh-more { display: none !important; }
  /* 推荐：2 列视频封面网格（去掉「推荐系列·按顺序学」区块标题，直接封面墙） */
  html #hhRecoSeries { margin-top: 8px; }
  html #hhRecoSeries .hh-series-head { display: none; }
  html #hhRecoSeries .hh-series-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  html #hhRecoSeries .hh-s { width: 100%; border-radius: 16px; }
  html #hhRecoSeries .hh-s .hh-s-thumb { border-radius: 12px; }
  html #hhRecoSeries .hh-s .hh-s-tx { padding: 10px 2px 4px; }
  html #hhRecoSeries .hh-s .hh-s-t { font-size: 13px; font-weight: 600; line-height: 1.4; }
  html #hhRecoSeries .hh-s .hh-s-c { font-size: 11px; margin-top: 4px; }
}

/* ============ 5. 资料库 / 系列页（≤900px） ============ */
@media (max-width: 900px) {
  html .materials-container { scrollbar-width: none; }
  /* 资料库是主 Tab：iOS Large Title 大标题 + 右侧操作，第二行分段控件
     （桌面是一行塞 title+tabs+plus+search，移动端拆两行，不再挤） */
  html .topapp-bar { flex-wrap: wrap; height: auto; padding: 32px 16px 10px; gap: 10px 12px; }
  html .topapp-bar .page-title { order: 1; margin-right: auto; padding: 0; }
  html .topapp-bar .page-title .title {
    font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
  }
  /* 顶部操作按钮：统一 40px 图标按钮（iOS 触控 ≥44 但 40 视觉更轻） */
  html .topapp-bar .topbar-actions { order: 2; display: flex; align-items: center; gap: 8px; }
  html .topapp-bar .btn-plus {
    width: 40px; height: 40px; min-height: 0; padding: 0; font-size: 18px; font-weight: 600;
    border-radius: 14px; margin: 0; border: 1px solid var(--border-08); background: var(--bg-2);
    color: var(--text-70); transition: transform .12s ease, color .15s ease, border-color .15s ease;
  }
  html .topapp-bar .btn-plus:active { transform: scale(.94); color: var(--anker); border-color: rgba(255,200,98,.4); }
  /* 搜索：移动端收敛为图标按钮（点开全屏搜索），不再占一整条 */
  html .topapp-bar .search-bar {
    width: 40px; height: 40px; min-width: 0; padding: 0; border-radius: 14px;
    justify-content: center; background: var(--bg-2); border: 1px solid var(--border-08);
    transition: transform .12s ease, color .15s ease, border-color .15s ease;
  }
  html .topapp-bar .search-bar:active { transform: scale(.94); color: var(--anker); border-color: rgba(255,200,98,.4); }
  html .topapp-bar .search-bar .search-bar-text,
  html .topapp-bar .search-bar .search-bar-shortcut { display: none; }
  html .topapp-bar .search-bar .search-bar-icon { color: var(--text-60); }
  html .topapp-bar .search-bar .search-bar-icon svg { width: 17px; height: 17px; }
  /* 分段控件：独立一行全宽，胶囊选中态 + 过渡 */
  html .topapp-bar .chan-tabs { order: 3; width: 100%; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; height: 40px; gap: 4px; }
  html .chan-tabs .chan-tab {
    flex: none; padding: 0 16px; min-height: 38px; display: inline-flex; align-items: center;
    border-radius: 12px; border: 0; background: transparent; color: var(--text-60);
    font-weight: 600; transition: background .15s ease, color .15s ease;
  }
  /* 分段控件选中态：琥珀文字 + 柔和琥珀底（iOS segmented 语言） */
  html .chan-tabs .chan-tab.on { background: rgba(255,200,98,.16) !important; color: var(--anker, #ffc862) !important; }
  html .chan-tabs .chan-tab .tab-cnt { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 5px; opacity: .8; }
  /* 「我的课程」页内区块：标题与 tab 重复去掉，保留「＋ 添加列表」按钮 */
  html body.is-main #mineActions { display: flex; padding: 2px 0 4px; }
  html body.is-main #mineActions .pg-title { display: none; }
  html body.is-main #mineActions .pg-actions { margin-left: 0; }
  html body.is-main #mineActions .pg-actions .btn {
    min-height: 0; height: 40px; padding: 0 18px; border-radius: 100px; font-weight: 600;
    border: 1px solid var(--border-08); background: var(--bg-2); color: var(--text-80);
  }
  /* 频道页子 tab（收藏/推荐）与添加按钮：功能控件，不被标题隐藏规则波及 */
  html body.is-main #chActions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 2px 0 4px; }
  html body.is-main #chActions .chan-tabs { height: 36px; }
  html body.is-main #chActions .chan-tab { min-height: 34px; padding: 0 14px; border-radius: 10px; }
  html body.is-main #chActions .pg-actions .btn { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 12px; margin: 0; }
  /* 资料库内容区（主 Tab）：16px 边距 + 底部为 tab 栏让位 */
  html .chan-wrap { padding: 4px 16px calc(100px + env(safe-area-inset-bottom)) !important; }
  /* 系列卡片：2 列封面网格（修复 grid 列被长文本撑爆：minmax(0,1fr)） */
  html .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 4px; }
  html .material-item { border-radius: 16px; transition: transform .12s ease; }
  html .material-thumbnail { border-radius: 14px; }
  html .material-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
  html .material-channel-name { font-size: 11.5px; color: var(--text-50); font-weight: 500; margin-top: 2px; }
  /* 「已收录 N 集」在封面已有集数徽标时冗余：移动端隐藏 */
  html .mat-cnt { display: none; }
  html .material-thumbnail .material-duration {
    font-size: 10.5px; font-weight: 700; padding: 2.5px 8px; border-radius: 100px;
    background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  html .material-thumbnail .series-ctag {
    font-size: 10px; font-weight: 800; padding: 2.5px 8px; border-radius: 100px;
    background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  html .material-thumbnail .series-prog { height: 3px; }
  html .material-thumbnail .series-prog i { border-radius: 0 2px 2px 0; }
  /* 频道卡片：2 列（修复长频道名撑爆列宽） */
  html .chan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: 4px; }
  html .chan-card { min-width: 0; border-radius: 16px; padding: 14px 10px 12px; }
  html .chan-card .chan-card-name { min-width: 0; font-size: 13px; }
  html .chan-card .chan-card-meta { min-width: 0; font-size: 10px; }
  html .chan-card .chan-card-btn { height: 32px; font-size: 12px; }
  html .view-pane { min-height: auto; }
  /* 系列页 */
  html .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; margin-top: 12px; }
  html .pl-head { padding: 4px 0 10px; }
  html .pl-sub { font-size: 12.5px; }
  html .pl-desc { font-size: 12.5px; line-height: 1.7; }
  html .pl-prog { height: 7px; }
}

/* ============ 6. 词汇库（≤900px） ============ */
@media (max-width: 900px) {
  html .wb-title { margin-bottom: 12px; }
  html .wb-stats { gap: 8px; margin-bottom: 14px; }
  html .wb-stat { border-radius: 16px; padding: 14px 10px; }
  html .wb-stat b { font-size: 18px; }
  html .wb-sc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  html .wb-item { padding: 14px; border-radius: 16px; }
  html .wb-item-line1 b { font-size: 14px; }
  html .chips { gap: 6px; margin-bottom: 12px; }
  html .chip { min-height: 32px; }
  html .wb-search { margin-bottom: 12px; }
}

/* ============ 7. 背单词（≤900px） ============ */
@media (max-width: 900px) {
  html .rv-app { padding: 0 12px calc(76px + env(safe-area-inset-bottom)); }
  html .rv-topbar { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  html .rv-main .flip-inner { min-height: 46vh; }
  html .rv-btnrow { margin-top: 16px; gap: 8px; }
  html .rv-btnrow .card-btn { padding: 16px 0; font-size: 15px; border-radius: 16px; }
  html .rv-foot { padding-top: 10px; }
}

/* ============ 8. 语伴（≤900px） ============ */
@media (max-width: 900px) {
  html #voiceBox { height: calc(100dvh - 175px); min-height: 440px; border-radius: 14px; }
}

/* ============ 9. 定级测试（≤900px） ============ */
@media (max-width: 900px) {
  html .card { padding: 18px 16px; }
  html .card-btn { min-height: 48px; padding: 13px 0; }
  html .lvbar .lb { width: 34px; }
}

/* ============ 10. Onboarding / 订阅（≤900px） ============ */
@media (max-width: 900px) {
  html .ob-wrap { padding: 12px 12px 96px; }
  html .ob-card { padding: 20px 16px; border-radius: 18px; }
  html .ob-foot { flex-direction: column; }
  html .ob-foot .btn { width: 100%; }
  html .ob-steps { margin: 16px 0 4px; }
  html .sub-hero { padding: 20px 18px; border-radius: 16px; }
  html .sub-hero-name { font-size: 19px; }
  html .sub-orders { border-radius: 12px; }
  html .sub-orders-head { padding: 12px 14px; }
}

/* ============ 11. 登录 / 收银台（≤900px） ============ */
@media (max-width: 900px) {
  html .auth-wrap, html .pay-wrap { padding: 24px 16px; }
  html .auth-card, html .pay-card { width: 100%; max-width: 100%; }
  html .auth-card input, html .pay-card input, html .btn-main { font-size: 16px; min-height: 48px; }
}

/* =========================================================
   学习页移动端（≤860px）：
   视频置顶 16:9 → 字幕全宽（原右侧栏变主内容）→ 底部控制条
   ========================================================= */
@media (max-width: 860px) {
  html .page-practice-content { flex-direction: column; padding: 0; gap: 0; overflow: hidden; overflow: clip; }
  html .page-practice { overflow: hidden; overflow: clip; }
  /* 视频区固定 16:9 置顶 */
  html .practice-main { flex: none; width: 100%; min-height: 0; border-radius: 0; border: 0; }
  html .practice-material { flex: none; min-height: 0; }
  html .practice-video { flex: none; height: auto; min-height: 0; padding: 0; aspect-ratio: 16 / 9; width: 100%; }
  html .practice-video-inner { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
  html .practice-video-inner iframe { border-radius: 0; }
  html .practice-video-inner .pv-cover { border-radius: 0; }
  /* 覆盖页面内联的 display:none，字幕侧栏成为主内容 */
  html .practice-sidebar { display: flex !important; position: relative; transform: none; margin: 0;
    min-width: 0; min-height: 0; width: 100%; max-width: 100%; flex: 1; border-top: 1px solid var(--border-06); }
  html .practice-sidebar-resize { display: none; }
  html .practice-sidebar-head { position: absolute; right: 10px; top: 6px; z-index: 5; padding: 0;
    border: 0; background: transparent; gap: 0; }   /* 不独占一行：重点词隐藏，译文按钮悬浮右上角 */
  html .ps-progress { display: none; }              /* 移动端重点词进度条不显示 */
  html .ps-side-btn { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--bg-2); border-color: var(--border-10); }
  html .practice-sidebar-content { padding: 44px 14px 110px; overflow-y: auto; scrollbar-width: none; }
  /* 字幕句子行高 ≥44px（触屏） */
  html .practice-sidebar-content .st, html .practice-sidebar-content .s { min-height: 44px; }
  /* 控制条：流内贴视频正下方（不再悬浮底部）——进度条 → 主控行 → 字幕控制行 垂直排开，
     底部 Tab 栏（观看/跟读 + 词卡/总结/聊天）单独 fixed */
  html .practice-controls { position: relative; z-index: auto; padding: 0 16px 4px;
    background: none; border: 0; }
  html .progress-bar-wrapper { height: 20px; }
  html .progress-bar { height: 4px; }
  html .progress-bar:hover { height: 4px; }
  html .ctrl-btn { width: 44px; height: 44px; }
  /* 顶部导航压缩 */
  html .page-navbar { padding: 10px 12px; gap: 10px; }
  html .page-navbar-left { gap: 8px; }
  html .page-back-btn, html .btn-practice-icon { width: 36px; height: 36px; }
  html .btn-practice-icon-group { gap: 4px; }
  html .page-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  html .btn-practice-icon-group .ep-pick { font-size: 13px; padding: 7px 12px; }
  /* 选集抽屉 → 底部抽屉 */
  html .ep-drawer { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 75dvh;
    border-left: 0; border-top: 1px solid var(--border-10);
    border-radius: 18px 18px 0 0; transform: translateY(102%);
    box-shadow: 0 -24px 80px rgba(0,0,0,.5); }
  html .ep-drawer.open { transform: translateY(0); }
  /* 视频内字幕覆盖层适配全宽视频 */
  html .practice-subtitle { padding-left: 4%; padding-right: 4%; }
  html .practice-subtitle .original-text { font-size: clamp(15px, 4.2vw, 21px); }
  html .practice-subtitle .translated-text { font-size: clamp(12px, 3.4vw, 16px); }
  /* ===== 移动端播放页简化 =====
     顶栏：只留 返回+标题 / 选集(系列时)+收藏；上一集/下一集、加入列表、
     全屏（iPhone 无 requestFullscreen 支持）、侧栏开关（移动端字幕常驻）一律收起 */
  html .page-navbar .btn-practice-icon-group > a,
  html .page-navbar #addCourseBtn,
  html .page-navbar #fsBtn,
  html .page-navbar #sideBtn { display: none !important; }
  html .btn-practice-icon-group { gap: 8px; }
  html .page-title { max-width: 62vw; }
  /* 音量：移动端走系统硬件键，仅保留图标按钮（点击切换静音，滑杆隐藏） */
  html .volume-control { display: flex; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.05); align-items: center; justify-content: center; }
  html .volume-control .vol-ic { position: static; transform: none; }
  html .volume-slider { display: none !important; }
  html .volume-control.muted { color: var(--red); }
  /* ===== 视频下方控制区（一行式）：进度条(+时间) 一行，播放+设置 一行 =====
     主控行：上句·播放·下句（左）+ 速度·音量·字幕·位置（右）——所有控制功能同一行；
     上一句/下一句 icon-only（font-size:0 防文字换行）；时间贴进度条右端 */
  html .controller-wrapper { flex-direction: row; align-items: center; gap: 6px; margin-top: 0; }
  /* 播放组（左）：HTML 顺序 播放/上句/下句 → 重排 上句/播放/下句 */
  html .controller-left { flex: none; width: auto; justify-content: flex-start; gap: 8px; }
  html .controller-left > :nth-child(2) { order: 1; }
  html .controller-left > :nth-child(1) { order: 2; }
  html .controller-left > :nth-child(3) { order: 3; }
  html .ctrl-btn.ctrl-btn-play { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.08); padding: 0; font-size: 0; }
  html .ctrl-btn.ctrl-btn-play svg { width: 21px; height: 21px; }
  html .ctrl-btn.sentence-nav { width: 40px; height: 40px; border-radius: 50%; padding: 0; background: rgba(255,255,255,.05); font-size: 0; line-height: 0; white-space: nowrap; overflow: hidden; }
  html .ctrl-btn.sentence-nav svg { width: 17px; height: 17px; }
  /* 时间贴进度条右端 */
  html .progress-bar-wrapper { height: 22px; position: relative; padding-right: 62px; }
  html .ctrl-btn.time-stamp { position: absolute; right: 16px; top: 4px; width: auto; padding: 0; font-size: 11.5px; line-height: 14px; height: 14px; }
  /* 设置组（右）：速度·音量·字幕·位置 */
  html .controller-right { flex: 1; width: auto; min-width: 0; }
  html #roamCtrl { width: auto; justify-content: flex-end; gap: 8px; }
  html .ctrl-right-btn { width: 38px; height: 38px; border-radius: 50%; }
  html .ctrl-right-btn.speed-badge { width: auto; padding: 0 13px; border-radius: 19px; font-weight: 700; font-size: 12.5px; height: 38px; }
  /* 跟读控件（跟读模式占满一行居中） */
  html .shadow-ctrl { order: 4; width: 100%; justify-content: center; padding: 0 6px; flex-wrap: wrap; gap: 8px; }
  html .shadow-ctrl .sc-btn { padding: 8px 16px; font-size: 12.5px; border-radius: 20px; height: 40px; }
  html .shadow-ctrl .sc-prog { display: none; }   /* 进度已在顶部状态行显示 */
  /* ===== 底部 Tab 栏（fixed 最底）：观看|跟读 居左 · 词卡/总结/聊天 居右 ===== */
  html .practice-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.9) 36%, rgba(10,10,12,.98) 100%);
    border-top: 1px solid var(--border-06); }
  html .mode-seg2 { height: 44px; border-radius: 22px; padding: 3px; }
  html .mode-seg2-item { height: 36px; border-radius: 18px; padding: 0 15px; font-size: 13px; }
  html .tool-group { background: transparent; height: auto; padding: 0; gap: 6px; }   /* 词卡/总结/聊天贴最右 */
  html .tool-group .tool-btn { height: 44px; padding: 0 14px; border-radius: 22px; font-size: 13px; }
  /* 字幕设置菜单：盖在固定底部控制条（z 90）之上，菜单变长后内部滚动 */
  html .sub-len-menu { z-index: 120; max-height: calc(100dvh - 190px); overflow-y: auto; scrollbar-width: none; }
  html .sub-len-menu::-webkit-scrollbar { display: none; }
  /* 词卡 / 总结：全屏沉浸式浮层（z 85 位于底部控制条 90 之下，工具组的 ×/词卡/总结/聊天 仍可点；内容底部让位） */
  html .practice-video-inner .pv-cover {
    position: fixed; inset: 0; z-index: 85; border-radius: 0;
    background: linear-gradient(180deg, #1a1a1a 0%, #0c0c0c 100%);
  }
  html .practice-video-inner .pv-cover { padding: 28px 24px 130px; overflow-y: auto; }
  html .tool-panel { padding: 0 20px 140px; }
  html .fc-flip-inner { min-height: 300px; }
  html .fc-face { padding: 24px 22px; }
  html .fc-word-sm { font-size: 32px; }
  html .fc-scene { font-size: 16px; }
}

/* ============ 13. 学习中心 / 我的（移动端新 Tab 页面） ============ */
@media (max-width: 900px) {
  /* 与首页 hero 同宽：左右 12px 留白，不再全宽贴边 */
  html .lc-wrap, html .pr-wrap { padding: 0 16px calc(100px + env(safe-area-inset-bottom)); }
  /* 统一页面标题栏：iOS Large Title（推荐/学习中心/我的 三页同构）
     大标题 32px/800，顶部 32px 留白（避开状态栏），下方 16px 进内容 */
  html .lc-head { padding: 32px 0 16px; }
  html .lc-head .hh-head { padding: 0; }
  html .lc-head .hh-ico { display: none; }
  html .lc-head .hh-title {
    font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.5px !important;
    line-height: 1.15 !important; color: var(--text-100) !important;
  }
  /* 学习中心：区块标题 */
  html .lc-sec { display: flex; align-items: center; margin: 24px 0 12px; }
  html .lc-sec > span { font-size: 15px; font-weight: 600; letter-spacing: -.1px; color: var(--text-80); }
  html .lc-sec::after { content: ""; flex: 1; height: 1px; background: var(--border-06); margin-left: 12px; }
  /* 旅程面板：等级徽章 + A1→C2 等级条 + ETA + 每日投入（移动端紧凑版） */
  html .lc-progress { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
    margin: 18px 0 2px; background: var(--bg-1); border: 1px solid var(--border-06); }
  html .lc-progress .lc-p-lv-badge { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }
  html .lc-progress .lc-p-lv-label { font-size: 10.5px; }
  html .lc-progress .lc-p-cur { font-size: 13.5px; }
  html .lc-progress .lc-p-gap { font-size: 11.5px; }
  html .lj-ladder { margin: 0 0 8px; }
  html .lj-node { font-size: 10px; width: 18px; }
  html .lj-seg { height: 5px; }
  html .lj-eta { font-size: 12px; margin-top: 8px; }
  html .lj-minbtn { font-size: 11.5px; padding: 2px 6px; }
  html .lj-minpop { left: 30px; flex-wrap: wrap; max-width: 220px; }
  html .lj-min { height: 26px; min-width: 36px; font-size: 11px; }
  /* 继续学：横滑视频卡（最近 + 推荐） */
  html .lc-track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  html .lc-track::-webkit-scrollbar { display: none; }
  html .lc-v { flex: none; width: 148px; text-decoration: none; color: inherit; }
  html .lc-v-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
  html .lc-v-thumb img { width: 100%; height: 100%; object-fit: cover; }
  html .lc-v-thumb em { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: 10px; font-weight: 800;
    padding: 3px 8px; border-radius: 100px; background: rgba(0,0,0,.68); color: var(--anker); line-height: 1.5; }
  html .lc-v-tx { padding: 8px 2px 0; }
  html .lc-v-tx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; font-weight: 600; color: var(--text-90); line-height: 1.4; }
  html .lc-v-tx small { display: block; font-size: 11px; color: var(--text-50); font-weight: 500; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html .lc-v-empty { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
    background: var(--bg-1); border: 1px solid var(--border-06); }
  html .lc-v-empty .lc-v-thumb { flex: none; width: 64px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--text-40); }
  html .lc-v-empty .lc-v-tx { padding: 0; flex: 1; }
  /* 功能入口：2 列卡片（资料库 / AI 语伴 / 词汇 / 背单词 / 定级测试） */
  html .lc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  html .lc-main { display: block; }
  html .lc-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
    background: var(--bg-1); border: 1px solid var(--border-06); text-decoration: none; color: inherit; transition: transform .12s ease; }
  html .lc-card:active { transform: scale(.97); }
  html .lc-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,200,98,.14); color: var(--anker); }
  html .lc-ico svg { width: 18px; height: 18px; }
  html .lc-ico-b { background: rgba(50,227,251,.14); color: var(--teal, #32e3fb); }
  html .lc-tx { min-width: 0; flex: 1; }
  html .lc-tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text-90); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html .lc-tx small { display: block; font-size: 11px; color: var(--text-50); font-weight: 500; margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html .lc-go { flex: none; display: inline-flex; color: var(--text-40); }
  html .lc-go svg { width: 13px; height: 13px; }
  /* 首页推荐：简单列表 */
  html .hp-sec { display: flex; align-items: center; gap: 8px; margin: 18px 2px 12px;
    font-size: 15px; font-weight: 600; letter-spacing: -.1px; color: var(--text-80); }
  html .hp-sec::after { content: ""; flex: 1; height: 1px; background: var(--border-06); margin-left: 10px; }
  html .hp-list { display: flex; flex-direction: column; gap: 10px; }
  html .hp-item { display: flex; align-items: center; gap: 13px; padding: 10px 10px; border-radius: 18px;
    background: var(--bg-1); border: 1px solid var(--border-06); text-decoration: none; color: inherit; transition: transform .12s ease; }
  html .hp-item:active { transform: scale(.97); }
  html .hp-thumb { flex: none; width: 112px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--bg-2); position: relative; }
  html .hp-thumb img { width: 100%; height: 100%; object-fit: cover; }
  html .hp-thumb em { position: absolute; top: 5px; left: 5px; font-style: normal; font-size: 9.5px; font-weight: 800;
    padding: 2px 6px; border-radius: 100px; background: rgba(0,0,0,.62); color: var(--anker); line-height: 1.5; }
  html .hp-tx { min-width: 0; flex: 1; }
  html .hp-tx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; font-weight: 700; color: var(--text-90); line-height: 1.4; }
  html .hp-tx small { display: block; font-size: 11px; color: var(--text-50); font-weight: 500; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html .hp-go { flex: none; display: inline-flex; color: var(--text-40); font-size: 17px; font-weight: 600; }
  html .hp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px;
    color: var(--text-50); font-size: 13.5px; font-weight: 600; text-align: center; }
  html .hp-empty small { font-size: 12px; color: var(--text-40); font-weight: 500; }
  /* 我的：统一卡片（用户卡 / 统计 / 会员 / 设置列表） */
  html .pr-card { background: var(--bg-1); border: 1px solid var(--border-06); border-radius: 16px; margin-bottom: 12px; overflow: hidden; }
  html .pr-user { display: flex; align-items: center; gap: 14px; padding: 16px; }
  html .pr-ava { flex: none; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: var(--anker-text); background: linear-gradient(135deg,#ffc862,#ff9d2e); }
  html .pr-info { min-width: 0; flex: 1; }
  html .pr-name { font-size: 17px; font-weight: 700; color: var(--text-100); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html .pr-mail { font-size: 12px; color: var(--text-50); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html .pr-badges { display: flex; gap: 8px; margin-top: 7px; align-items: center; }
  html .pr-pill { font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 100px; background: var(--bg-2); color: var(--text-60); }
  html .pr-pill.pro { background: linear-gradient(135deg,#ffc862,#ffb02e); color: var(--anker-text); }
  /* 会员卡：整卡可点（升级 / 查看订阅） */
  html .pr-member { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: transform .12s ease; }
  html .pr-member:active { transform: scale(.98); }
  html .pr-m-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,200,98,.14); color: var(--anker); }
  html .pr-m-ico svg { width: 19px; height: 19px; }
  html .pr-m-tx { min-width: 0; flex: 1; }
  html .pr-m-tx b { display: block; font-size: 15px; font-weight: 700; color: var(--text-90); }
  html .pr-m-tx small { display: block; font-size: 11.5px; color: var(--text-50); margin-top: 2px; line-height: 1.45; }
  html .pr-m-cta { flex: none; font-size: 12px; font-weight: 800; color: var(--anker-text);
    background: linear-gradient(135deg,#ffc862,#ff9d2e); padding: 8px 14px; border-radius: 100px; white-space: nowrap; }
  html .pr-m-cta.pro { color: var(--text-60); background: var(--bg-2); }
  /* 设置列表 */
  html .pr-list { padding: 4px 16px; }
  html .pr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--border-05); font-size: 14px; font-weight: 600; color: var(--text-80); cursor: pointer; }
  html .pr-row:last-child { border-bottom: 0; }
  html .pr-row:active { opacity: .7; }
  html .pr-row svg { color: var(--text-50); vertical-align: -2px; }
  html .pr-arrow { display: inline-flex; color: var(--text-40); }
  html .pr-arrow svg { width: 14px; height: 14px; }
  html .pr-logout-row { justify-content: center; color: #ff9d9d; font-weight: 700; }
}






/* =========================================================
   浅色模式（设置 → 外观 → 白天，data-theme="light"）
   设计语言：芒果冰淇淋 —— 内容纯白、卡片芒果奶昔色、点缀琥珀；
   文字统一暖黑，按 WCAG 可读性标准加深（正文 ≥4.5:1，辅助 ≥3:1），
   无边框分层；tab 选中 = 芒果渐变实色。全宽度生效。
   ========================================================= */
:root[data-theme="light"]{
  /* 表面：白底 + 芒果奶昔卡片 + 芒果浅色控件 + 芒果 hover */
  --bg-0:#FFFFFF; --bg-1:#FFF7E6; --bg-2:#FFEBC9; --bg-3:rgba(255,244,224,.92); --bg-4:#FFDFA6;
  /* 文字：暖黑（巧克力配芒果）阶梯，全部 ≥3:1 */
  --text-100:rgba(26,20,10,1); --text-90:rgba(26,20,10,.92); --text-80:rgba(26,20,10,.84);
  --text-70:rgba(26,20,10,.75); --text-60:rgba(26,20,10,.67); --text-50:rgba(26,20,10,.58);
  --text-40:rgba(26,20,10,.48); --text-30:rgba(26,20,10,.38);
  /* 无边框 */
  --border-20:transparent; --border-15:transparent; --border-10:transparent;
  --border-08:transparent; --border-06:transparent; --border-05:transparent; --border-04:transparent;
  --card-bg:linear-gradient(#FFF7E6 0%, #FFF7E6 100%);
  --header-bg:#FFF7E6; --header-bg-anchor:#FFEBC9;
  /* 状态色浅色底 */
  --d-red-bg:#FBEBEA; --d-red-border:transparent;
  --d-orange-bg:#FDF1E2; --d-orange-border:transparent;
  --d-purple-bg:#F0EAFB; --d-purple-border:transparent;
  --d-green-bg:#EBF6EA; --d-green-border:transparent;
  --shadow-lg:0 8px 40px rgba(0,0,0,.10);
  /* 应用页另一套令牌 */
  --bg:#FFFFFF; --bg2:#FFF7E6; --bg3:#FFEBC9; --bg4:#FFDFA6;
  --card:linear-gradient(#FFF7E6 0%, #FFF7E6 100%);
  --ink:rgba(26,20,10,.95); --muted:rgba(26,20,10,.66); --dim:rgba(26,20,10,.5);
  --line:transparent; --line2:transparent; --line-soft:transparent;
  --shadow:0 1px 2px rgba(0,0,0,.05);
}
:root[data-theme="light"] body{background:#FFFFFF}
/* 学习页：主内容区白，侧栏/面板/词卡 = 芒果奶昔色 */
:root[data-theme="light"] .practice-sidebar{background:#FFF7E6}
:root[data-theme="light"] .tool-panel{background:linear-gradient(180deg,#FFFFFF 0%,#FFF2DA 100%)}
:root[data-theme="light"] .tool-head{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,0))}
:root[data-theme="light"] .practice-material>.mode-bar{background:rgba(255,252,242,.96);border-color:transparent;box-shadow:0 8px 24px rgba(0,0,0,.12)}
:root[data-theme="light"] .practice-video-inner .pv-cover{background:linear-gradient(180deg,#FFFFFF 0%,#FFEED0 100%)}
:root[data-theme="light"] .fc-front{background:linear-gradient(170deg,#FFFFFF 0%,#FFF7E6 55%,#FFF0D4 100%);border-color:transparent;box-shadow:0 24px 60px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.95)}
:root[data-theme="light"] .fc-back{background:linear-gradient(165deg,rgba(255,200,98,.20),rgba(255,200,98,.05) 60%),linear-gradient(170deg,#FFFFFF,#FFF4DE);border-color:transparent;box-shadow:0 24px 60px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.95)}
:root[data-theme="light"] .fc-ex{background:rgba(255,200,98,.10)}
:root[data-theme="light"] .summary-item{background:rgba(255,200,98,.08);border-color:transparent}
:root[data-theme="light"] .summary-stats .st{background:linear-gradient(170deg,rgba(255,200,98,.12),rgba(255,200,98,.04));border-color:transparent}
:root[data-theme="light"] .fc-bar{background:rgba(255,200,98,.25)}
:root[data-theme="light"] .tool-tabs{background:rgba(255,200,98,.16)}
:root[data-theme="light"] .tool-panel-close{background:rgba(255,200,98,.16)}
:root[data-theme="light"] .practice-sidebar-content::-webkit-scrollbar-thumb{background:rgba(255,200,98,.40)}
/* 进度条 / 等级阶梯轨道：浅色下必须可见（原来复用透明 border token 全隐身） */
:root[data-theme="light"] .progress-bar{background:rgba(255,200,98,.25)}
:root[data-theme="light"] .lj-seg{background:rgba(255,200,98,.22)}
/* tab 选中 = 芒果渐变实色（未选中文字走加深后的暖黑） */
:root[data-theme="light"] .tool-group .tool-btn.on{background:linear-gradient(135deg,#ffc862,#ff9d2e);color:var(--anker-text,#1e1e1e);box-shadow:0 2px 8px rgba(255,200,98,.35)}
:root[data-theme="light"] .trancy-header nav:not(.m-nav) > a.active,
:root[data-theme="light"] .trancy-header nav:not(.m-nav) > a.active:hover{background:linear-gradient(135deg,#ffc862,#ff9d2e);color:var(--anker-text,#1e1e1e);box-shadow:0 2px 8px rgba(255,200,98,.35)}
:root[data-theme="light"] .trancy-header nav:not(.m-nav) > a.active .btn-icon,
:root[data-theme="light"] .trancy-header nav:not(.m-nav) > a.active .nav-label{color:var(--anker-text,#1e1e1e)}
:root[data-theme="light"] .filter-tab .item-tag.active{background:linear-gradient(135deg,#ffc862,#ff9d2e);color:var(--anker-text,#1e1e1e);border-color:transparent}
:root[data-theme="light"] .filter-tab .item-tag.active i,
:root[data-theme="light"] .filter-tab .item-tag.active span{color:var(--anker-text,#1e1e1e)}
:root[data-theme="light"] .chan-tab.on{background:linear-gradient(135deg,#ffc862,#ff9d2e);color:var(--anker-text,#1e1e1e)}
:root[data-theme="light"] .chan-tab.on .tab-cnt{color:var(--anker-text,#1e1e1e);background:rgba(0,0,0,.14)}
:root[data-theme="light"] .chan-tab.on:hover{color:var(--anker-text,#1e1e1e)}
/* 侧栏字幕区（右侧转写列表）：当前句高亮在浅色下必须可读 —— 原琥珀字+琥珀淡底=看不清，
   改白底 + 深芒果字 + 琥珀左侧条；译文按钮用芒果淡色底露出 */
:root[data-theme="light"] .item-readable.active{background:#FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,.06)}
:root[data-theme="light"] .item-readable.active .original-text{color:#8A5A00}
:root[data-theme="light"] .item-readable.active .translated-text{color:rgba(26,20,10,.84)}
:root[data-theme="light"] .item-readable.active .meta-action-time{color:#8A5A00;background:rgba(255,200,98,.22)}
:root[data-theme="light"] .item-readable.active::before{background:linear-gradient(180deg,#ffc862,#ff9d2e)}
:root[data-theme="light"] .item-readable.shadow-cur{background:#FFEED4;border-color:transparent}
:root[data-theme="light"] .ps-side-btn{background:rgba(255,200,98,.14)}
/* 点词弹窗（.tip）：浅色下必须醒目可读 —— 原近白底+透明边+软阴影在浅底上直接糊掉，
   改芒果奶油渐变底 + 可见芒果描边 + 暖阴影 + 深芒果标题 */
:root[data-theme="light"] .tip{
  background:linear-gradient(180deg,#FFF8EA 0%,#FFEFD0 100%);
  border:1px solid rgba(255,170,60,.45);
  box-shadow:0 14px 44px rgba(140,90,10,.20),0 2px 8px rgba(140,90,10,.10);
}
:root[data-theme="light"] .tip .t-word{color:#7C4F00}
:root[data-theme="light"] .tip .t-zh{color:rgba(26,20,10,.92)}
:root[data-theme="light"] .tip .t-en{color:rgba(26,20,10,.72)}
:root[data-theme="light"] .tip .t-ex{color:rgba(26,20,10,.72)}
:root[data-theme="light"] .tip .t-tag{color:rgba(26,20,10,.67)}
:root[data-theme="light"] .tip .t-speak{border-color:rgba(255,170,60,.45);color:rgba(26,20,10,.67)}
:root[data-theme="light"] .tip .b-undo,
:root[data-theme="light"] .tip .b-clear{background:rgba(255,200,98,.25);color:#7C4F00!important}
/* 词表状态色：浅色底加深 */
:root[data-theme="light"] .t-state-green{color:#2E9E47}
:root[data-theme="light"] .t-state-orange{color:#C5841D}
:root[data-theme="light"] .t-state-red{color:#E04A47}
/* 「我的」退出登录：浅色底用深红 */
:root[data-theme="light"] .pr-logout-row{color:#D64541}
:root[data-theme="light"] .pr-logout-row:hover{color:#C93A37}
/* 学习页移动端（≤860px）浅色表面 */
@media (max-width: 860px) {
  :root[data-theme="light"] .tool-panel{background:linear-gradient(180deg,#FFFFFF 0%,#FFF2DA 100%);background-color:#FFFCF4}
  :root[data-theme="light"] .tool-head{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%)}
  :root[data-theme="light"] .practice-tabbar{background:linear-gradient(180deg,rgba(255,247,230,0) 0%,rgba(255,247,230,.92) 36%,rgba(255,247,230,.98) 100%);border-top-color:transparent}
  :root[data-theme="light"] .practice-video-inner .pv-cover{background:linear-gradient(180deg,#FFFFFF 0%,#FFEED0 100%)}
  :root[data-theme="light"] .ctrl-btn.ctrl-btn-play{background:rgba(255,200,98,.16)}
  :root[data-theme="light"] .ctrl-btn.sentence-nav{background:rgba(255,200,98,.12)}
  :root[data-theme="light"] .volume-control{background:rgba(255,200,98,.12)}
}

/* ============ 观看/跟读 + 工具组：移动端从控制条拉到底部固定栏 ============
   （HTML 里它们已在控制条内，PC 同一行；这里固定定位回移动底部栏，
    空 .practice-tabbar 只当渐变底条，z-91 盖在底条 z-90 之上） */
@media (max-width: 860px) {
  html .controller-right .mode-seg2,
  html .controller-right #toolGroup { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 91; }
  html .controller-right .mode-seg2 { left: 16px; }
  html .controller-right #toolGroup { right: 16px; }
}