* {
    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 {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--pd-stage-bg, #05080f);
}

body {
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    box-sizing: border-box;
}

body.btnText {
    background-color: var(--pd-stage-bg, #05080f);
}

:root {
    --pd-font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --pd-stage-bg: #05080f;
    --pc-h-pad: clamp(32px, 4vw, 64px);
}

.desktop {
    font-family: var(--pd-font-zh);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
    color: #fff;
    overflow: hidden;
    background: var(--pd-stage-bg, #05080f);
    box-sizing: border-box;
}

/* 全屏氛围底图 */
.desktop>.pd-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}

/* 覆盖层：顶栏 + 主舞台 */
.pd-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    min-height: 0;
    pointer-events: none;
}

.pd-overlay .pd-top,
.pd-overlay .contact .btn,
.pd-overlay .pd-qr-block,
.pd-overlay .pd-qr-canvas {
    pointer-events: auto;
}

/* —— 顶栏：Logo + 三个按钮 —— */
.pd-top {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 72px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pc-h-pad) 12px;
    box-sizing: border-box;
    z-index: 10;
}

.pd-logo-wrap {
    line-height: 0;
}

.pd-top .pd-logo {
    display: block;
    height: clamp(44px, 4.6vw, 64px);
    width: auto;
    max-width: 30vw;
    object-fit: contain;
    object-position: left center;
}

.pd-top .contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.2vw, 18px);
    flex-wrap: wrap;
}

.pd-top .contact .btn {
    height: clamp(38px, 3.4vw, 52px);
    width: auto;
    max-width: 12vw;
    min-width: 0;
    object-fit: contain;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.pd-top .contact .btn:hover {
    filter: brightness(1.08);
}

/* —— 主舞台：左文案区 + 右侧人物 —— */
.pd-stage {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* 右侧主视觉人物：贴底升起，居右 */
.pd-renwu {
    position: absolute;
    right: clamp(24px, 6vw, 160px);
    bottom: 0;
    height: min(92%, 96vh);
    width: auto;
    max-width: 52vw;
    object-fit: contain;
    object-position: bottom center;
    z-index: 1;
    pointer-events: none;
    -webkit-filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.35));
}

/* 左侧文案列：标题在上，二维码区吸底 */
.pd-left {
    position: relative;
    z-index: 3;
    height: 100%;
    width: min(52vw, 760px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: min(2vh, 20px) var(--pc-h-pad) max(20px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.pd-title-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(46vh, 460px);
    height: auto;
    object-fit: contain;
    object-position: left top;
    flex-shrink: 0;
    margin-top: clamp(24px, 7vh, 72px);
    margin-left: clamp(16px, 3vw, 56px);
}

/* 左下：提示药丸 + 二维码 + 文案 */
.pd-qr-block {
    flex: 0 0 auto;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    max-width: 100%;
}

/* tip 整图：竖排「用手机扫一扫」+ 药丸 + 说明文字，整块完整显示 */
.pd-tip-wrap {
    flex: 0 1 auto;
    min-width: 0;
    line-height: 0;
}

.pd-tip-img {
    display: block;
    width: auto;
    height: clamp(110px, 13vw, 168px);
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.pd-qr-canvas {
    flex: 0 0 auto;
    line-height: 0;
    padding: clamp(6px, 0.7vw, 11px);
    background: #fff;
    border-radius: 10px;
    border: 4px solid #57c5ff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.pd-qr-canvas .qrcode-host img {
    display: block !important;
    vertical-align: top;
    max-width: 100%;
    height: auto;
}

#qrcode canvas,
.pd-qr-canvas #qrcode canvas {
    display: none !important;
}

#qrcode img {
    visibility: visible !important;
}

@media (max-width: 1280px) {
    .pd-left {
        width: min(56vw, 640px);
    }

    .pd-renwu {
        right: clamp(12px, 3vw, 60px);
        max-width: 48vw;
    }
}

@media (max-height: 760px) {
    .pd-title-img {
        max-height: 40vh;
    }
}

@media (max-height: 620px) {
    .pd-title-img {
        max-height: 34vh;
    }

    .pd-top {
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 6px;
    }

    .pd-renwu {
        height: 88%;
    }
}