/* ===========================================================================
   原子类补丁（本站模板用到的 Tailwind 类，线上 entry.css 里没有）

   base.css 是线上 entry.css 的原样拷贝，而线上播放页用的是 DPlayer，
   它的抽屉/进度条/移动端导航等结构由组件自己的 scoped chunk 承担，
   所以这些原子类从未进过 entry.css。本地用 Tailwind 类复刻了同样的结构，
   缺一条就是「类名写了但没有任何样式」——静默失效，最难查。

   按 Tailwind 语义逐条补齐，命名与线上保持一致；不要在这里加自定义类。
   =========================================================================== */

/* --- 宽度 / 尺寸 --- */
.w-0 { width: 0px; }                                   /* 进度条填充初值 */
.w-\[72\%\] { width: 72%; }                            /* 移动端抽屉宽度 */
.max-w-\[58\.4rem\] { max-width: 58.4rem; }            /* 移动端抽屉上限 */
.h-\[6\.2rem\] { height: 6.2rem; }                      /* 桌面端顶栏 / 播放页抽屉头 */

/* --- 间距 --- */
.-mt-\[1\.2rem\] { margin-top: -1.2rem; }
.px-\[4\.1rem\] { padding-left: 4.1rem; padding-right: 4.1rem; }   /* 播放页桌面端顶栏 */
.py-\[12rem\] { padding-top: 12rem; padding-bottom: 12rem; }       /* 404 / 空状态容器 */

/* --- 字体 / 颜色 --- */
.text-\[1\.9rem\] { font-size: 1.9rem; }
.text-\[4\.8rem\] { font-size: 4.8rem; }
.text-\[\#e93535\] { color: #e93535; }                 /* 表单校验错误提示 */
.text-\[\#ffffff99\] { color: #ffffff99; }             /* 播放器「/ 总时长」 */

/* --- 层叠 --- */
.z-\[7\] { z-index: 7; }                               /* 播放失败兜底层 */
.z-\[12\] { z-index: 12; }                             /* 会员锁遮罩：必须高于 z-10 大按钮 / z-[5] 点按层，否则「立即开通会员」点不动 */
.z-\[100\] { z-index: 100; }                           /* 移动端抽屉 */
.z-\[200\] { z-index: 200; }                           /* 登录 / 注册弹窗 */

/* --- 尺寸 / 圆角（播放页返回按钮等）--- */
.h-\[7\.6rem\] { height: 7.6rem; }
.w-\[7\.6rem\] { width: 7.6rem; }
.rounded-\[1\.9rem\] { border-radius: 1.9rem; }
.h-\[1\.4rem\] { height: 1.4rem; }                     /* 播放页抽屉剧集皇冠角标 */
.max-w-\[52rem\] { max-width: 52rem; }                 /* 收银台订单卡片宽度上限 */

/* --- 可见性 --- */
/* 视觉隐藏但保留可访问性。必须显式 border:0：预检的
   *,:before,:after{border:0 solid #e5e7eb} 配合 .border 会给这个被裁剪的
   input 描出 1px 浅灰边，在浅色卡片上仍然看得见。 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 边框 / 交互色 --- */
.border-\[\#2b2b35\] { border-color: #2b2b35; }         /* 未选中的套餐 / 支付方式卡片 */
.hover\:bg-\[\#ffffff1a\]:hover { background-color: #ffffff1a; }   /* 桌面端返回按钮悬停 */
.active\:bg-\[\#3a3b42\]:active { background-color: #3a3b42; }     /* 移动端返回按钮按下 */

/* --- 提示条配色 --- */
.bg-\[\#1f3a26\] { background-color: #1f3a26; }        /* 充值页「支付已完成」 */
.text-\[\#6ee07a\] { color: #6ee07a; }
.bg-\[\#3a1f1f\] { background-color: #3a1f1f; }        /* 收银台「支付通道未配置」 */
.text-\[\#ff8a8a\] { color: #ff8a8a; }
.bg-\[\#2b2412\] { background-color: #2b2412; }        /* 待支付提示（黄） */
.text-\[\#e8c96a\] { color: #e8c96a; }

/* --- 间距（充值页 VIP 状态卡 / 会员身份胶囊）--- */
.py-\[2\.4rem\] { padding-top: 2.4rem; padding-bottom: 2.4rem; }

/* --- 栅格 --- */
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* --- 过渡 / 位移 ---
   顺序要紧：duration-* 必须排在 transition-* 之后，两者同权重，靠后者覆盖。 */
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}
.duration-200 { transition-duration: 200ms; }
.duration-250 { transition-duration: 250ms; }
/* 与 base.css 里 -translate-x-1/2 同款写法：写 --tw-translate-x，
   再由 transform 属性消费它（全局 reset 已在 scoped.css 里给出各 --tw-* 初值）。 */
.translate-x-full {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (width>=960px) {
    /* 桌面端视频按 contain 完整显示（线上 DPlayer 默认值），移动端保持 object-cover 铺满 */
    .desktop\:\!object-contain { object-fit: contain !important; }
    .desktop\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    /* 桌面端专属：必须放在断点块里 —— 写在外面会连移动端一起覆盖 */
    .desktop\:w-\[20rem\] { width: 20rem; }            /* 充值页「立即支付」按钮 */
    .desktop\:w-\[1\.2rem\] { width: 1.2rem; }         /* 详情页剧集皇冠的桌面端宽度 */
    .desktop\:pt-\[8rem\] { padding-top: 8rem; }       /* 收银台顶部留白 */
    .desktop\:py-\[0\.3rem\] { padding-top: 0.3rem; padding-bottom: 0.3rem; }  /* 充值页会员身份胶囊 */
}