/**
 * 首页专属样式
 * 包含：首页布局、Loading 层、头像容器、交互按钮、弹窗组件、隐私协议
 *
 * 当前页面引用情况：
 * - index.html
 */

/* 环境识别与 Loading 解耦 */
.is-not-wechat-env #loading-screen,
.skip-loading #loading-screen {
    display: none;
}
.is-not-wechat-env #app,
.skip-loading #app {
    display: block;
}

/* 布局控制 */
.background-layer {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    margin: 0 auto;
}

/* 首页应用容器 (状态0/1专用) */
#app {
    width: 100vw;
    min-height: 100vh;
    overflow: visible;
    position: relative;
}

/* 首页背景图
 * 背景图是2倍切图(828x1932)，实际显示尺寸按414x966计算
 * 保持比例撑满屏幕，固定不随页面滚动，超出部分截断
 */
.main-bg {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 小屏幕手机（高度小于896px）背景图居中对齐 */
@media screen and (max-height: 896px) {
    .main-bg {
        object-position: center;
        object-fit: cover;
    }
}

/* ============================================
   非微信环境专用样式
   ============================================ */

/* 注：背景图对齐方式统一使用默认居中，删除非微信环境特殊处理 */
/* .is-not-wechat-env .main-bg { object-position: center bottom; } */

/* 非微信环境：隐藏微信环境专用元素 */
.is-not-wechat-env .wechat-only {
    display: none !important;
}

/* 非微信环境 - 二维码卡片 */
.is-not-wechat-env .qrcode-card {
    width: 45.9vw; /* 190px / 414px */
    height: 53.4vw; /* 221px / 414px */
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 95%, #FFF23E 100%);
    box-shadow: 0px 0px 10px rgba(184, 129, 0, 0.5);
    border-radius: 2.42vw; /* 10px / 414px */
    box-sizing: border-box;
    position: relative;
    /* 间距40px在按钮上方，由 flex 布局控制 */
    margin-bottom: 9.66vw;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 二维码容器 */
.is-not-wechat-env .qrcode-wrapper {
    position: absolute;
    left: 50%;
    top: 9.05%;
    transform: translateX(-50%);
    width: 36.23vw; /* 150px / 414px */
    height: 36.23vw;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-not-wechat-env .qrcode-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 二维码底部 */
.is-not-wechat-env .qrcode-footer {
    position: absolute;
    top: 83.71%;
    bottom: 9.05%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.42vw;
}

.is-not-wechat-env .qrcode-wechat-icon {
    height: 3.86vw; /* 微信图标 16px */
    width: auto;
    object-fit: contain;
}

.is-not-wechat-env .qrcode-text {
    font-size: 3.86vw; /* 16px / 414px */
    line-height: 3.86vw;
    color: #222222;
    font-weight: 400;
}

/* 非微信环境 - 内容容器上移，保持按钮在可见区域 */
.is-not-wechat-env #app .content-overlay {
    bottom: 7.25vw; /* 距底部30px，因为没有隐私协议 */
    flex-direction: column-reverse; /* 从下到上排列：隐私协议->按钮->二维码卡片 */
    gap: 0; /* 移除默认 gap，二维码卡片用 margin-bottom 控制间距 */
}

/* 非微信环境 - 二维码卡片在按钮上方 */
.is-not-wechat-env #app .qrcode-card {
    order: 2; /* 排在按钮后面，且在支付宝卡片上面 */
}

.is-not-wechat-env .analysis-btn-img {
    display: none; /* 隐藏图片按钮 */
}

/* 非微信环境按钮 - CSS实现 （复制链接并打开微信）*/
.is-not-wechat-env .wechat-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 14.49vw;
    padding: 0 7.25vw; /* 左右 30px 自适应 */
    background: linear-gradient(180deg, #FFFFFF 0%, #54FF9A 100%);
    border: none;
    border-radius: 24.15vw;
    color: #222;
    font-size: 4.35vw;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, opacity 0.2s ease;
    white-space: nowrap; /* 防止文字换行 */
}

.is-not-wechat-env .wechat-open-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* 历史记录按钮 */
.history-record {
    position: absolute;
    top: 3.62vw;
    left: 0;
    width: 26.81vw; /* 111px / 414px */
    height: 8.7vw; /* 36px / 414px */
    background: rgba(218, 255, 115, 0.5);
    border-radius: 0 50px 50px 0;
    display: flex;
    align-items: center;
    z-index: 100;
    cursor: pointer;
}

/* 首页上方图片 - 宽度88px(414屏幕)，自适应 */
.index-top-img {
    position: fixed;
    top: 9.66vw;
    right: 7.25vw;
    width: 21.26vw;
    max-width: 21.26vw; /* 88px / 414px */
    height: auto;
    z-index: 100;
    display: block;
}

/* 客服按钮 - 位于图片下方20px，右对齐 */
.service-btn {
    position: fixed;
    top: calc(40px + 36.23vw + 20px);
    right: 7.97vw;
    width: 10.14vw;
    height: 10.14vw;
    cursor: pointer;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

.service-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.service-btn-img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================
   分成数据查看按钮
   位置：客服按钮下方，间距20px(4.83vw)
   仅针对有权限的用户展示
   ============================================ */
.revenue-btn {
    position: fixed;
    top: calc(40px + 36.23vw + 20px + 10.14vw + 4.83vw);
    right: 7.97vw;
    width: 10.14vw;
    height: 10.14vw;
    background: #7C4C00;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.revenue-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.revenue-btn-icon {
    width: 4.83vw;
    height: 4.83vw;
    display: block;
}

.history-icon {
    width: 2.9vw;
    height: 2.9vw; /* 12px / 414px */
    margin-left: 3.62vw /* 原: 15px */;
}

.history-text {
    margin-left: 1.21vw /* 原: 5px */;
    font-size: 3.86vw;
    line-height: 3.86vw;
    color: #3C643A;
}

/* 头像+发光层容器 - 位于内容容器上方40px(9.66vw) */
#app .avatar-perspective-container {
    position: fixed;
    left: 50%;
    bottom: calc(11.16vh + 7.25vw + 16.9vw + 9.66vw); /* 隐私底部100px + 间距30px + 按钮70px + 间距40px */
    transform: translateX(-50%);
    width: 45.9vw;
    height: 45.9vw;
    max-width: 45.89vw; /* 保持正方形比例，190px / 414px */
    max-height: 45.89vw; /* 190px / 414px */
    z-index: 5;
}

/* 双按钮模式 - 头像位置上移（多了一个按钮和间距） */
#app.has-check-analyzed-btn .avatar-perspective-container {
    bottom: calc(6.70vh + 7.25vw + 16.9vw + 4.83vw + 16.9vw + 9.66vw); /* 隐私底部60px + 间距30px + 按钮70px + 间距20px + 按钮70px + 间距40px */
}

/* 头像后发光效果 - 正圆形，填满容器 */
.avatar-perspective-container .avatar-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFB8B 50%, #FFF961 100%);
    filter: blur(14.6809px);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

/* 头像图片 - 方形带10px圆角，居中在发光层上 */
.avatar-img {
    position: absolute;
    width: 52.6%;
    height: 52.6%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    display: block;
    border-radius: 2.42vw;
    z-index: 1;
}

/* 新标志 - 位于头像右上角 */
#app .new-badge {
    position: fixed;
    left: calc(50% + 12.075vw - 3.25vw);
    bottom: calc(11.16vh + 7.25vw + 16.9vw + 9.66vw + 22.95vw + 12.075vw - 3.25vw);
    width: 6.28vw;
    max-width: 26px;
    height: auto;
    z-index: 150;
    pointer-events: none;
}

/* 双按钮模式 - 新标志位置上移 */
#app.has-check-analyzed-btn .new-badge {
    bottom: calc(6.70vh + 7.25vw + 16.9vw + 4.83vw + 16.9vw + 9.66vw + 22.95vw + 12.075vw - 3.25vw);
}



/* ============================================
   首页按钮布局（从下到上）- Flex 自适应布局
   1. 隐私协议 - 底部
   2. 查看已分析头像按钮 - 隐私协议上方 20px
   3. 付费分析按钮 - 查看按钮上方 30px
   4. 头像 - 付费按钮上方 60px
   ============================================ */

/* 内容容器 - 固定在底部，使用 Flex 纵向排列 */
#app .content-overlay {
    position: fixed;
    bottom: 11.16vh; /* 单按钮模式距底部100px */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column; /* 从上到下排列 */
    align-items: center;
    z-index: 200;
}

/* 双按钮模式 - 内容容器距底部60px */
#app.has-check-analyzed-btn .content-overlay {
    bottom: 6.70vh; /* 60px / 896px */
}

/* 按钮 - 下方间距30px（与隐私协议的间距） */
#app .analysis-btn-wrapper {
    margin-bottom: 7.25vw; /* 按钮与隐私协议间距30px */
}

/* 双按钮模式 - 付费按钮与查看按钮间距20px */
#app.has-check-analyzed-btn .analysis-btn-wrapper {
    margin-bottom: 4.83vw; /* 与查看按钮间距20px */
}

/* 隐私协议 - 在按钮下方，使用 order 排在最后 */
/* 覆盖 common.css 中的 position: fixed */
#app .privacy-container {
    position: static; /* 移除 fixed 定位，使用 Flex 布局 */
    left: auto;
    transform: none;
    display: flex;
    align-items: center;
    order: 1; /* 在 Flex 容器中排在最后 */
    opacity: 0.5; /* 未勾选时透明度50% */
}

/* 勾选后透明度100% */
#app .privacy-container.checked {
    opacity: 1;
}

/* 按钮基础样式 - 移除 fixed 定位，使用 Flex 自适应 */
#app .analysis-btn-wrapper,
#app .check-analyzed-btn-wrapper {
    position: static; /* 移除 fixed 定位 */
    left: auto;
    transform: none;
    height: 16.9vw;
    max-height: 16.91vw; /* 70px / 414px */
    width: auto;
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

/* 查看已分析头像按钮 - 默认隐藏，但保留与隐私协议的间距 */
#app .check-analyzed-btn-wrapper {
    display: none;
    margin-bottom: 7.25vw; /* 与隐私协议间距30px */
}

#app .check-analyzed-btn-wrapper.show {
    display: block;
}

/* 双按钮模式 - 查看按钮显示，保持与隐私协议间距30px */
#app.has-check-analyzed-btn .check-analyzed-btn-wrapper {
    display: block;
    margin-bottom: 7.25vw; /* 查看按钮与隐私协议间距30px */
}

.check-analyzed-btn-img,
.analysis-btn-img {
    height: 100%;
    width: auto;              /* 宽自适应 */
    object-fit: contain;
    display: block;
}

.analysis-btn-img {
    filter: drop-shadow(0px 0px 20px rgba(65, 0, 162, 0.2));
}

.is-new-avatar .analysis-btn-img {
    filter: drop-shadow(0px 0px 20px rgba(65, 0, 162, 0.4));
}

.analysis-btn-wrapper:active,
.check-analyzed-btn-wrapper:active {
    transform: translateX(-50%) scale(0.95);
}

.privacy-checkbox {
    width: 2.9vw;
    height: 2.9vw; /* 12px / 414px */
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

/* 未勾选状态 - CSS绘制白色圆环 */
.privacy-checkbox::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border: 0.24vw solid #FFF; /* 白色圆环 */
    border-radius: 50%;
    box-sizing: border-box;
}

/* 勾选状态 - 绿色填充圆 */
.privacy-checkbox.checked::before {
    background-color: #54FF9A;
    border: none;
}

/* 勾选图标 - 叠加在圆上方 */
.check-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
}

.privacy-checkbox.checked .check-icon {
    display: block;
}

.privacy-text {
    margin-left: 1.21vw /* 原: 5px */;
    font-size: 2.9vw;
    color: #FFF; /* 隐私协议文字颜色：白色 */
    white-space: nowrap;
}

/* 勾选后的文本颜色 - 保持白色 */
.privacy-container.checked .privacy-text {
    color: #FFF;
}

.protocol-link {
    color: #BDFF87; /* 协议链接颜色：浅绿色 */
    font-weight: 500;
    text-decoration: none;
}

/* 隐私协议弹窗内容 */
#privacy-modal .modal-content {
    align-self: flex-end;
    width: 85.5%;
    height: 27.48vh;
    margin-bottom: 9vh;
    background-color: #fff;
    border-radius: 4.83vw;
    border: 3px solid #96FFC9;
    box-shadow: 0 0 10px rgba(150, 255, 201, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0;
}

.modal-title-img {
    height: 18.5%;
    margin-top: calc(27.48vh * 0.1712);
    width: auto;
}

.modal-body-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.38vw;
    color: #222;
    text-align: center;
    padding: 0 4.83vw /* 原: 0 20px */;
    font-weight: 400;
}

.modal-link {
    color: #00A05D;
    font-weight: 500;
    text-decoration: none;
}

.modal-btn {
    width: 88.7%;
    height: 12.08vw; /* 50px / 414px */
    margin-bottom: 4.83vw /* 原: 20px */;
    background-color: #000;
    color: #54ff9a;
    font-size: 3.86vw;
    font-weight: 500;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   初始隐藏元素
   ============================================ */

#wechat-hint {
    color: #fff;
    font-size: 2.9vw;
    margin-top: 2.42vw /* 原: 10px */;
    text-align: center;
    opacity: 0.8;
}

/* ============================================
   JS 显示控制类
   ============================================ */
#app.show-block,
#loading-screen.show-block,
#history-entry.show-block,
#new-badge.show-block,
#wechat-hint.show-block,
.modal-overlay.show-block,
.toast-container.show-block {
    display: block !important;
}

#app.show-flex,
#loading-screen.show-flex,
#history-entry.show-flex,
#new-badge.show-flex,
#wechat-hint.show-flex,
.modal-overlay.show-flex,
.toast-container.show-flex,
.privacy-container.show-flex {
    display: flex !important;
}


/* ============================================
   支付宝支付状态卡片样式
   ============================================ */
.alipay-status-card {
    width: 80.68vw; /* 334px / 414px */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 30.39%);
    box-shadow: 0px 0px 30px rgba(184, 129, 0, 0.5), inset 0px 0px 20px #FFFFFF;
    border-radius: 7.25vw; /* 30px / 414px */
    padding: 7.25vw; /* 30px / 414px */
    box-sizing: border-box;
    z-index: 160;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.83vw; /* 20px / 414px */
    margin-bottom: 9.66vw; /* 与按钮间距40px */
}

.is-not-wechat-env #app .alipay-status-card {
    order: 1; /* 排在按钮后面，在二维码卡片下面 */
}

.alipay-status-text {
    font-size: 3.86vw; /* 16px / 414px */
    line-height: 5.8vw; /* 24px / 414px */
    color: #7F624D;
    text-align: center;
    width: 100%;
}

.alipay-status-btn {
    width: 100%;
    height: 14.49vw; /* 60px / 414px */
    border-radius: 12.08vw; /* 50px / 414px */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.42vw; /* 10px / 414px */
    font-size: 4.83vw; /* 20px / 414px */
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.alipay-status-btn--primary {
    background: #009FE8;
    color: #FFFFFF;
}

.alipay-status-btn--wechat {
    background: #00BB4F;
    color: #FFFFFF;
}

.alipay-status-icon {
    height: 4.83vw; /* 20px / 414px */
    width: auto;
    object-fit: contain;
}

.alipay-status-btn--wechat .alipay-status-icon {
    height: 4.83vw; /* 20px / 414px */
    width: auto;
    object-fit: contain;
}

/* 支付宝回调 - 微信按钮图标变白色 */
.alipay-status-btn--wechat .alipay-status-icon-white {
    filter: brightness(0) grayscale(100%) invert(1);
}

.alipay-status-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* 支付宝图标切图 */
.alipay-icon-img {
    width: 4.83vw;
    height: 4.83vw;
    object-fit: contain;
    display: block;
}

/* 微信图标变白色（支付宝回调页使用） */
.alipay-status-icon--white {
    filter: brightness(0) grayscale(100%) invert(1);
}

/* 显示支付宝状态卡片时，隐藏下面的绿色按钮 */
.is-not-wechat-env .alipay-status-card:not(.hidden) ~ .analysis-btn-wrapper {
    display: none;
}

/* ============================================
   分成数据弹窗
   样式复用已分析头像弹窗面板结构
   ============================================ */
.revenue-sheet {
    width: 85.51vw;
    max-width: 85.51vw;
    max-height: calc(100vh - 19.32vw);
    background: #FFFFFF;
    border-radius: 9.66vw;
    border: 3px solid transparent;
    background: linear-gradient(#FFF, #FFF) padding-box,
                linear-gradient(180deg, #54FF9A 0%, #222222 100%) border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 4.83vw 0;
    box-sizing: border-box;
    position: fixed;
    bottom: 14.49vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    height: auto;
}

/* 弹窗标题 */
.revenue-header {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 7.25vw auto 0 auto;
}

.revenue-title {
    font-weight: 600;
    font-size: 4.83vw;
    line-height: 5.8vw;
    color: #222222;
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
}

.revenue-title-line {
    width: 100%;
    height: 0.72vw;
    min-height: 3px;
    border-radius: 0.48vw;
    margin-top: 1.21vw;
    background-color: #54FF9A;
}

/* 弹窗内容区 */
.revenue-body {
    padding: 4.83vw 4.83vw 0;
    display: flex;
    flex-direction: column;
}

/* 邀请用户行 - 双模块并排 */
.revenue-row--users {
    display: flex;
    gap: 4.83vw;
}

.revenue-user-block {
    flex: 1;
    background: rgba(248, 236, 255, 0.5);
    border-radius: 1.93vw;
    padding: 6.04vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.revenue-user-icon {
    width: 5.8vw;
    height: 5.8vw;
    display: block;
}

/* 数字统计（邀请数量/收入金额） */
.revenue-count {
    margin-top: 2.42vw;
    font-family: 'DIN Alternate', 'DIN Alternate Bold', sans-serif;
    font-weight: 700;
    font-size: 7.25vw;
    line-height: 7.25vw;
    color: #444444;
    text-align: center;
}

/* 文本标签 */
.revenue-label {
    margin-top: 2.42vw;
    font-family: -apple-system, 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 3.38vw;
    line-height: 3.38vw;
    color: #444444;
    text-align: center;
}

/* 付费总收入行 */
.revenue-row--income {
    margin-top: 4.83vw;
    background: #F0FDFF;
    border-radius: 1.93vw;
    padding: 6.04vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 分成比例行 */
.revenue-row--share {
    margin-top: 4.83vw;
    background: rgba(255, 254, 220, 0.5);
    border-radius: 1.93vw;
    padding: 6.04vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.revenue-row-icon {
    width: 5.31vw;
    height: 5.8vw;
    display: block;
}

/* 底部操作按钮 */
.revenue-action-btn {
    width: calc(100% - 9.66vw);
    height: 12.08vw;
    margin: 4.83vw auto 0;
    border: none;
    border-radius: 6.04vw;
    font-weight: 500;
    font-size: 3.86vw;
    cursor: pointer;
    flex-shrink: 0;
    font-family: system-ui, -apple-system, sans-serif;
}

/* 可点击状态 */
.revenue-action-btn--active {
    background: #54FF9A;
    color: #000000;
}

/* 不可点击状态 */
.revenue-action-btn--disabled {
    background: #EEEEEE;
    color: #888888;
    cursor: not-allowed;
}

/* ============================================
   已分析头像半弹窗样式
   ============================================
   注意：已分析头像弹窗样式统一使用 analyzed-avatar.css
   本文件中已删除重复定义，避免样式冲突
   ============================================ */