/* ==========================================================
   TEEMEE 添蜜 · 二期高级美化 · 组件样式模块 tm-fx.css v2.0
   依赖 tokens.css。整块接入：旧的同名按钮/开关/弹幕样式整块删除后再引入。
   规则：只动画 transform / opacity；box-shadow、filter 永远静态。
   ========================================================== */

/* ---------- 1. 按钮 ---------- */
.tm-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;border-radius:var(--tm-r-pill);border:1px solid transparent;
  font:inherit;font-size:14px;font-weight:700;white-space:nowrap;color:var(--tm-text-1);cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transform:translate3d(0,0,0) scale(1);
  transition:transform var(--tm-d-slow) var(--tm-ease-spring),background-color var(--tm-d-fast) var(--tm-ease-standard),color var(--tm-d-fast) var(--tm-ease-standard),opacity var(--tm-d-fast) var(--tm-ease-standard)}
.tm-btn--sm{height:30px;padding:0 12px;font-size:12px}
.tm-btn--lg{height:44px;padding:0 22px;font-size:15px}
.tm-btn svg{width:1.1em;height:1.1em;flex:none}
/* 光晕层：伪元素自带更大的静态阴影，只改 opacity */
.tm-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity var(--tm-d-base) var(--tm-ease-standard)}
/* 主按钮：玫红纯色 + 顶部内高光 + G1 常亮，悬停 G2 */
.tm-btn--primary{background:var(--tm-rose-500);box-shadow:var(--tm-shadow-inset),var(--tm-glow-rose-1)}
.tm-btn--primary::after{box-shadow:var(--tm-glow-rose-2)}
/* 会员/金币：蜂蜜金 */
.tm-btn--honey{background:var(--tm-honey-400);color:var(--tm-on-honey);box-shadow:var(--tm-shadow-inset),var(--tm-glow-honey-1)}
.tm-btn--honey::after{box-shadow:var(--tm-glow-honey-2)}
/* 次按钮：= v010 胶囊（7% 米色底 + 12% 白描边），无光晕 */
.tm-btn--ghost{background:rgba(243,226,189,.07);border-color:rgba(255,255,255,.12)}
.tm-btn--ghost::after{background:rgba(255,255,255,.06)}
/* G3 主角按钮（每屏 ≤1 个）：常亮 G2 + 呼吸层 G3 */
.tm-btn--hero.tm-btn--primary{box-shadow:var(--tm-shadow-inset),var(--tm-glow-rose-2)}
.tm-btn--hero.tm-btn--primary::after{box-shadow:var(--tm-glow-rose-3)}
.tm-btn--hero.tm-btn--honey{box-shadow:var(--tm-shadow-inset),var(--tm-glow-honey-2)}
.tm-btn--hero.tm-btn--honey::after{box-shadow:var(--tm-glow-honey-3)}
.tm-btn--hero::after{animation:tm-breath var(--tm-d-breath) var(--tm-ease-standard) infinite alternate}
.tm-btn--hero.is-offscreen::after{animation-play-state:paused}
@keyframes tm-breath{from{opacity:.15}to{opacity:.9}}
/* 扫光（只给 VIP 按钮）：纯色半透明窄条，只动 transform + opacity，不用渐变：按钮内放 <span class="tm-sh"></span>，裁切只在这个子层做，不裁外光晕 */
.tm-sh{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.tm-sh::before{content:"";position:absolute;top:0;bottom:0;left:0;
  width:18%;background:rgba(255,255,255,.42);opacity:0;transform:translateX(-160%) skewX(-18deg);
  animation:tm-shine 5s var(--tm-ease-standard) 1.2s infinite}
@keyframes tm-shine{0%,70%{transform:translateX(-160%) skewX(-18deg);opacity:0}76%{opacity:1}94%{opacity:1}100%{transform:translateX(620%) skewX(-18deg);opacity:0}}
.is-offscreen .tm-sh::before{animation-play-state:paused}

@media (hover:hover) and (pointer:fine){
  .tm-btn:hover{transform:translate3d(0,var(--tm-lift),0) scale(var(--tm-hover-scale))}
  .tm-btn:hover::after{opacity:1}
}
/* 按下：80ms 快速下沉；松手由上面的 spring 过渡弹回（约 6% 过冲） */
.tm-btn:active,.tm-btn.is-pressed{transform:translate3d(0,0,0) scale(var(--tm-press-scale));
  transition:transform var(--tm-d-instant) var(--tm-ease-press),background-color var(--tm-d-fast)}
.tm-btn--primary:active,.tm-btn--primary.is-pressed{background:var(--tm-rose-600)}
.tm-btn--honey:active,.tm-btn--honey.is-pressed{background:var(--tm-honey-500)}
.tm-btn:focus-visible{outline:2px solid var(--tm-honey-300);outline-offset:3px}
.tm-btn:disabled,.tm-btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
.tm-btn:disabled::after,.tm-btn[aria-disabled="true"]::after,.tm-btn:disabled .tm-sh{display:none}
.tm-btn.is-loading{pointer-events:none;color:transparent}
.tm-btn.is-loading .tm-sh,.tm-btn.is-loading svg{visibility:hidden}
.tm-btn.is-loading::before{content:"";position:absolute;width:16px;height:16px;left:50%;top:50%;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:tm-spin .8s linear infinite;background:none}
.tm-btn--honey.is-loading::before,.tm-btn--vip.is-loading::before{border-color:rgba(42,26,0,.3);border-top-color:var(--tm-on-honey)}
@keyframes tm-spin{to{transform:rotate(360deg)}}
.tm-btn.is-selected{background:var(--tm-rose-500);border-color:var(--tm-rose-500)}
/* ---------- 1b. VIP 与底部渐隐（定稿方案 B，对齐 v010 §13） ---------- */
/* VIP：html.is-grad 已移除，VIP 不用渐变。「开通VIP」按钮和 VIP 徽章 = 纯金 #FFC83D + 扫光 .tm-sh；字 #2A1A00；按下 #F2C64F */
.tm-btn--vip{background:var(--tm-honey-400);color:var(--tm-on-honey);box-shadow:var(--tm-shadow-inset),var(--tm-glow-honey-1)}
.tm-btn--vip::after{box-shadow:var(--tm-glow-honey-2)}
.tm-btn--vip.tm-btn--hero{box-shadow:var(--tm-shadow-inset),var(--tm-glow-honey-2)}
.tm-btn--vip.tm-btn--hero::after{box-shadow:var(--tm-glow-honey-3)}
.tm-btn--vip:active,.tm-btn--vip.is-pressed{background:var(--tm-vip-press)}
.tm-vip-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border-radius:9px;background:var(--tm-honey-400);color:var(--tm-on-honey);font-size:11px;font-weight:800;line-height:1;white-space:nowrap}
/* 底部渐隐（全站唯一允许的渐变）：开关 html.fx-fade，默认开；透明 → #0F0A14，≤ 底部 40%，不加模糊。
   .tm-fade = 封面 / 轮播底部（封面图经 --tm-cover 传入）；.tm-fade-bar = 播放器底部操作区（关闭时回退纯色压暗条） */
.tm-fade{background-image:var(--tm-fade-img),var(--tm-cover,none);background-size:100% 100%,cover;background-position:center;background-repeat:no-repeat}
.tm-fade-bar{background-color:rgba(10,6,16,.6)}
html.fx-fade .tm-fade-bar{background-color:transparent;background-image:var(--tm-fade-bar-img)}

/* 合并框 VIP | 金币（v010 §8） */
.tm-duo{display:inline-flex;align-items:center;height:32px;border-radius:var(--tm-r-pill);background:rgba(243,226,189,.07);border:1px solid var(--tm-line-honey);font-size:13px;font-weight:600;color:#fff}
.tm-duo>*{display:inline-flex;align-items:center;gap:5px;height:100%;padding:0 12px;cursor:pointer;transition:background-color var(--tm-d-fast)}
.tm-duo>*:hover{background:rgba(246,211,138,.08)}
.tm-duo i{width:1px;height:14px;padding:0;background:rgba(255,255,255,.2)}

/* 视觉轻弹（iOS 无震动时的替代）：只 transform */
.tm-bump{animation:tm-bump var(--tm-d-slow) var(--tm-ease-spring)}
@keyframes tm-bump{0%{transform:scale(1)}35%{transform:scale(.92)}100%{transform:scale(1)}}

/* ---------- 2. 卡片（PC 悬停上浮，阴影层 opacity 渐显） ---------- */
.tm-card{position:relative;border-radius:var(--tm-r-md);transition:transform var(--tm-d-base) var(--tm-ease-out)}
.tm-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--tm-shadow-3),0 0 0 1px var(--tm-line-honey);opacity:0;pointer-events:none;transition:opacity var(--tm-d-base) var(--tm-ease-standard)}
@media (hover:hover) and (pointer:fine){.tm-card:hover{transform:translate3d(0,-4px,0) scale(1.03)}.tm-card:hover::after{opacity:1}}
.tm-card:active{transform:scale(.98);transition-duration:var(--tm-d-instant)}

/* ---------- 3. 开关 Switch ---------- */
.tm-switch{position:relative;display:inline-block;width:44px;height:26px;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tm-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tm-switch span{position:absolute;inset:0;border-radius:13px;background:var(--tm-surface-3);border:1px solid var(--tm-line-2);transition:background-color var(--tm-d-base) var(--tm-ease-standard)}
.tm-switch span::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--tm-shadow-1);transition:transform var(--tm-d-base) var(--tm-ease-spring)}
.tm-switch input:checked+span{background:var(--tm-rose-500);border-color:var(--tm-rose-500)}
.tm-switch input:checked+span::after{transform:translateX(18px)}
.tm-switch input:active+span::after{transform:scale(.9)}
.tm-switch input:checked:active+span::after{transform:translateX(18px) scale(.9)}
.tm-switch input:focus-visible+span{outline:2px solid var(--tm-honey-300);outline-offset:2px}
.tm-switch input:disabled+span{opacity:.38}

/* ---------- 4. 分段选择 Segmented（弹幕区域/速度/字号） ---------- */
.tm-seg{display:flex;padding:3px;gap:2px;border-radius:var(--tm-r-pill);background:var(--tm-surface-1);border:1px solid var(--tm-line)}
.tm-seg button{flex:1;height:30px;border:0;border-radius:var(--tm-r-pill);background:transparent;color:var(--tm-text-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--tm-d-fast),color var(--tm-d-fast),transform var(--tm-d-slow) var(--tm-ease-spring)}
.tm-seg button:active{transform:scale(.94);transition-duration:var(--tm-d-instant)}
.tm-seg button[aria-pressed="true"]{background:var(--tm-rose-500);color:#fff;box-shadow:var(--tm-glow-rose-1)}

/* ---------- 5. 滑杆（透明度） ---------- */
.tm-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--tm-surface-3);outline:none;accent-color:var(--tm-rose-500)}
.tm-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--tm-rose-500);box-shadow:var(--tm-shadow-1)}
.tm-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--tm-rose-500)}

/* ---------- 6. 面板 / 底部弹层 ---------- */
.tm-sheet{position:absolute;z-index:var(--tm-z-sheet);background:rgba(24,17,32,.96);border:1px solid var(--tm-line-2);box-shadow:var(--tm-shadow-3);
  opacity:0;pointer-events:none;transition:opacity var(--tm-d-slow) var(--tm-ease-standard),transform var(--tm-d-sheet) var(--tm-ease-out)}
.tm-sheet.is-open{opacity:1;pointer-events:auto;transform:none}
.tm-sheet--bottom{left:0;right:0;bottom:0;border-radius:var(--tm-r-xl) var(--tm-r-xl) 0 0;transform:translateY(24px);padding:8px 16px calc(16px + env(safe-area-inset-bottom))}
.tm-sheet--pop{border-radius:var(--tm-r-lg);transform:translateY(8px) scale(.96);padding:14px 16px}
/* 毛玻璃只在 full 档且支持时启用；面积 ≤ 视口 30%，半径 ≤ 20px */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html[data-fx="full"] .tm-glass{background:rgba(24,17,32,.72);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
}
.tm-sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--tm-line-2);margin:4px auto 12px}
.tm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.tm-row-l{font-size:14px;color:var(--tm-text-1)}
.tm-row-s{font-size:11px;color:var(--tm-text-3);margin-top:2px}
.tm-sec-t{font-size:12px;color:var(--tm-text-3);margin:10px 0 6px}

/* ---------- 7. 提示 Toast / 倍速胶囊 ---------- */
.tm-toast{position:absolute;left:50%;z-index:var(--tm-z-toast);transform:translate(-50%,8px);opacity:0;pointer-events:none;
  padding:8px 14px;border-radius:var(--tm-r-pill);background:rgba(15,10,20,.88);border:1px solid var(--tm-line-2);font-size:13px;color:#fff;white-space:nowrap;
  transition:opacity var(--tm-d-base) var(--tm-ease-standard),transform var(--tm-d-slow) var(--tm-ease-out)}
.tm-toast.is-on{opacity:1;transform:translate(-50%,0)}
.tm-speed{position:absolute;left:50%;top:14%;z-index:var(--tm-z-toast);display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border-radius:var(--tm-r-pill);background:rgba(15,10,20,.78);border:1px solid var(--tm-line-honey);color:var(--tm-honey-300);font-size:14px;font-weight:800;letter-spacing:.5px;
  opacity:0;transform:translate(-50%,-6px) scale(.96);pointer-events:none;transition:opacity var(--tm-d-fast) var(--tm-ease-standard),transform var(--tm-d-slow) var(--tm-ease-spring)}
.tm-speed.is-on{opacity:1;transform:translate(-50%,0) scale(1)}
.tm-speed b{display:inline-flex;gap:1px}
.tm-speed b i{display:block;width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent currentColor;animation:tm-chev 900ms linear infinite}
.tm-speed b i:nth-child(2){animation-delay:150ms}
@keyframes tm-chev{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- 8. 播放器手势层 ---------- */
.tm-stage{position:relative;overflow:hidden;background:var(--tm-bg-0);
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:none} /* 沉浸刷剧页：手势全部自己处理；嵌在可滚动列表里的播放器改为 pan-y */
.tm-stage img,.tm-stage video,.tm-stage canvas{-webkit-user-drag:none;pointer-events:none}
.tm-heart{position:absolute;width:84px;height:84px;margin:-42px 0 0 -42px;pointer-events:none;color:var(--tm-rose-500);z-index:var(--tm-z-toast);animation:tm-heart 700ms var(--tm-ease-out) forwards}
@keyframes tm-heart{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}55%{transform:scale(1)}100%{transform:translateY(-40px) scale(1.1);opacity:0}}

/* ---------- 9. 弹幕层 ---------- */
.tm-dm{position:absolute;left:0;right:0;top:0;z-index:var(--tm-z-danmaku);overflow:hidden;pointer-events:none;contain:strict;
  --dm-fs:16px;--dm-lh:1.55;opacity:var(--dm-op,.8);transition:opacity var(--tm-d-base) var(--tm-ease-standard)}
.tm-dm[data-area="full"]{bottom:15%}  /* 全屏档也给底部字幕留 15%（侦察_互动特效 §一「防挡字幕」） */
.tm-dm[data-area="half"]{height:50%}
.tm-dm[data-area="top"]{height:28%}  /* 仅顶部 ≈ 上沿 28%，不只一行 */
.tm-dm.is-off{opacity:0}
.tm-dm-item{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:auto;cursor:pointer;
  font-size:var(--dm-fs);line-height:var(--dm-lh);font-weight:700;color:#fff;padding:0 4px;
  text-shadow:0 0 1px #000,0 1px 1px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.6)}
.tm-dm-item.is-self{border:1px solid var(--tm-honey-300);border-radius:var(--tm-r-pill);padding:0 8px}
.tm-dm-item.is-vip{color:var(--tm-honey-300)}
html[data-fx="lite"] .tm-dm-item{text-shadow:0 1px 1px #000}

/* ---------- 10. 底栏轻弹（H5 tabbar） ---------- */
.tm-tab{transition:color var(--tm-d-fast)}
.tm-tab svg{transition:transform var(--tm-d-slow) var(--tm-ease-spring)}
.tm-tab:active svg{transform:scale(.86);transition-duration:var(--tm-d-instant)}
.tm-tab.is-on svg{transform:translateY(-1px) scale(1.06)}

/* ---------- 11. 会员 / 解锁弹层（侦察_短剧App 元素2/3/12；侦察_海外 Top15-4） ---------- */
.tm-pay-head{display:flex;align-items:center;gap:14px;height:44px;font-size:13px;color:var(--tm-text-2);border-bottom:1px solid var(--tm-line);margin-bottom:12px}
.tm-pay-head b{color:var(--tm-honey-400);font-weight:800}
.tm-plans{display:flex;flex-direction:column;gap:10px}
.tm-plan{position:relative;display:block;width:100%;text-align:left;border:0;cursor:pointer;border-radius:var(--tm-r-lg);overflow:hidden;
  background:var(--tm-cream-100);color:var(--tm-on-cream);box-shadow:0 0 0 1px rgba(246,211,138,.5);
  transition:transform var(--tm-d-slow) var(--tm-ease-spring)}
.tm-plan::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--tm-honey-400),var(--tm-glow-honey-2);opacity:0;transition:opacity var(--tm-d-base) var(--tm-ease-standard)}
.tm-plan[aria-checked="true"]::after{opacity:1}
.tm-plan:active{transform:scale(.98);transition-duration:var(--tm-d-instant)}
.tm-plan-in{padding:12px 14px 10px}
.tm-plan-n{font-size:14px;font-weight:700}
.tm-plan-p{font-size:22px;font-weight:900;margin-top:2px}
.tm-plan-p s{font-size:12px;font-weight:500;opacity:.55;margin-left:6px}
.tm-plan-d{font-size:11px;opacity:.7;margin-top:2px}
.tm-plan-f{display:flex;gap:14px;padding:6px 14px;background:var(--tm-cream-300);font-size:11px;font-weight:600}
.tm-off{position:absolute;right:0;top:0;height:20px;padding:0 8px;border-radius:0 var(--tm-r-lg) 0 8px;background:var(--tm-rose-500);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center}
.tm-coins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm-coin{position:relative;border:1px solid var(--tm-line-2);border-radius:var(--tm-r-md);background:var(--tm-surface-2);padding:12px 6px 0;text-align:center;cursor:pointer;overflow:hidden;transition:transform var(--tm-d-slow) var(--tm-ease-spring),border-color var(--tm-d-fast)}
.tm-coin b{display:block;font-size:16px;font-weight:800;color:var(--tm-honey-300)}
.tm-coin span{display:block;margin-top:8px;height:28px;line-height:28px;background:rgba(255,255,255,.05);font-size:12px;color:var(--tm-text-2)}
.tm-coin em{position:absolute;right:0;top:0;padding:0 6px;height:18px;line-height:18px;border-radius:0 0 0 8px;background:var(--tm-rose-500);color:#fff;font-size:10px;font-style:normal;font-weight:800}
.tm-coin[aria-checked="true"]{border-color:var(--tm-honey-400)}
.tm-coin:active{transform:scale(.96);transition-duration:var(--tm-d-instant)}
.tm-legal{font-size:11px;color:var(--tm-text-3);line-height:16px;margin-top:8px}
/* 选集格小锁（侦察_短剧App 元素2，侦察截图形态，自绘图标） */
.tm-lock{position:absolute;right:3px;top:3px;width:12px;height:12px;color:var(--tm-honey-400)}
/* PC 悬停预览层（侦察_短剧App 元素4；只改 opacity，不放大到 1.4，不自动播视频） */
.tm-pv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px;background:rgba(10,6,16,.78);opacity:0;transition:opacity var(--tm-d-base) var(--tm-ease-standard);pointer-events:none}
@media (hover:hover) and (pointer:fine){.tm-card:hover .tm-pv{opacity:1;pointer-events:auto}}
.tm-pv p{font-size:11px;line-height:16px;color:var(--tm-text-body);font-weight:400;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 12. 降级 ---------- */
@media (prefers-reduced-motion:reduce){
  .tm-btn--hero::after{animation:none;opacity:.6}
  .tm-sh::before,.tm-speed b i,.tm-bump,.tm-heart{animation:none}
  .tm-heart{opacity:0}
}
html[data-fx="off"] .tm-btn--hero::after{animation:none;opacity:.6}
html[data-fx="off"] .tm-sh::before,html[data-fx="off"] .tm-speed b i,html[data-fx="off"] .tm-bump{animation:none}
html[data-fx="off"] .tm-heart{display:none}
html[data-fx="lite"] .tm-btn--hero::after{animation:none;opacity:.7}
html[data-fx="lite"] .tm-sh{display:none}