* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f3f4f6;
}

/* --px = 1 设计稿 px（设计稿宽 375）。全部尺寸用 calc(N * var(--px))，
   移动端等于纯 vw 布局；PC 覆盖 --px 即整体等比缩成居中窄列 */
.mobile {
    --px: calc(100vw / 375);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #f3f4f6;
}

/* PC：手机比例窄列居中，两侧黑底。--px 封顶 1.2px（列宽最大 450px）；
   矮窗口由 0.1232vh 主导（列宽=46.2vh，46.2/100 = 390/844 手机宽高比） */
body.is-pc {
    background-color: #000;
}

body.is-pc .mobile {
    --px: min(1.2px, 0.1232vh);
    width: calc(375 * var(--px));
    margin: 0 auto;
}

/* PC 底栏（downloadQR）比移动端下载栏高，滚动区多留白 */
body.is-pc .page-scroll {
    padding-bottom: calc(140 * var(--px));
}

/* ============ 顶栏：粉色渐变底 + logo + 三个入口按钮 ============ */
.header {
    flex: none;
    height: calc(56 * var(--px));
    padding: 0 calc(10 * var(--px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffe9e3;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    position: relative;
    z-index: 5;
}

.header .logo {
    height: calc(30 * var(--px));
    width: auto;
    object-fit: contain;
}

.contact {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--px));
}

.nav-btn {
    width: calc(36 * var(--px));
    height: auto;
    cursor: pointer;
}

.nav-btn:active {
    opacity: 0.8;
}

/* ============ 滚动区：视频 + 推荐标题 + 卡片流 ============ */
.page-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: calc(105 * var(--px));
}

.page-scroll::-webkit-scrollbar {
    display: none;
}

/* ============ 视频区 ============ */
.video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.video-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 暂停蒙版：让中央播放键从画面里跳出来 */
.video-wrap.is-paused::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(44 * var(--px));
    height: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 calc(6 * var(--px)) rgba(0, 0, 0, 0.5));
    display: none;
    pointer-events: none;
    z-index: 2;
}

.video-sound {
    position: absolute;
    right: calc(10 * var(--px));
    bottom: calc(12 * var(--px));
    width: calc(34 * var(--px));
    height: auto;
    cursor: pointer;
    z-index: 2;
}

.video-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(3 * var(--px));
    background: rgba(255, 255, 255, 0.25);
    z-index: 2;
}

.video-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: rgba(235, 51, 0, 0.5);
    transition: width 0.25s linear;
}

/* ============ 精日推荐标题 ============ */
.tuijian-title {
    display: block;
    width: calc(72 * var(--px));
    height: auto;
    margin: calc(12 * var(--px)) 0 calc(8 * var(--px)) calc(10 * var(--px));
}

/* ============ 双列错位卡片流 ============ */
.feed {
    display: flex;
    align-items: flex-start;
    gap: calc(5 * var(--px));
    padding: 0 calc(5 * var(--px));
}

.feed-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--px));
}

.feed-card {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(6 * var(--px));
}

/* ============ 底部固定下载栏 ============ */
.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.dl-bar {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* PC：downloadQR 底图，动态二维码叠在图中红框内的白区上
   （位置用像素扫描测得：红框 39.22%/10.58% 起 20.55%x59.85%，下面取红框内沿） */
.pc-dl-bar {
    position: relative;
}

.pc-dl-bg {
    display: block;
    width: 100%;
    height: auto;
}

.pc-qr-box {
    position: absolute;
    left: 39.85%;
    top: 12.4%;
    width: 19.3%;
    height: 56.2%;
    background: #fff;
    padding: calc(4 * var(--px));
}

#qrcode,
#qrcode canvas,
#qrcode img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}