/**
 * ============================================================================
 * common.css - 弹窗与交互组件样式
 * ============================================================================
 * 
 * 【文件说明】
 * 本文件包含弹窗、Toast、支付、分享等交互组件样式。
 * 需要在 global.css 之后引入。
 * 
 * 【引用页面】（共9个）
 * ┌─────────────────────┬────────────────────────────────────────────┐
 * │ 页面                 │ 使用的主要功能                               │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ index.html          │ 支付弹窗、邀请弹窗、隐私协议弹窗、Toast、    │
 * │ (首页/运势分析)      │ 主按钮、隐私协议容器                         │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ result.html         │ 邀请弹窗、支付弹窗、客服弹窗、Toast、        │
 * │ (分析结果页)         │ 邀请图预览弹窗                               │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ history-analysis.html│ 同 result.html                              │
 * │ (历史分析结果)       │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ history.html        │ 基础弹窗系统                                 │
 * │ (历史记录页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ upload.html         │ 客服弹窗                                     │
 * │ (头像上传页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ gender.html         │ 客服弹窗                                     │
 * │ (性别选择页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ error.html          │ 客服弹窗                                     │
 * │ (错误页)             │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ transport-plan.html │ 基础弹窗系统                                 │
 * │ (转运方案页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ transport-result.html│ 礼券获取弹窗、礼券选择弹窗、小红书弹窗、    │
 * │ (转运结果页)         │ 邀请弹窗、支付弹窗、Toast、展开按钮          │
 * └─────────────────────┴────────────────────────────────────────────┘
 * 
 * 【目录】
 * 一、弹窗遮罩系统（基础）
 * 二、支付弹窗
 * 三、隐私协议弹窗
 * 四、邀请好友弹窗
 * 五、邀请图预览弹窗
 * 六、Toast 提示
 * 七、礼券系统（选择/获取）
 * 八、小红书弹窗
 * 九、页面交互组件
 * 十、通用交互效果
 * 
 * 自适应核心逻辑: 基准尺寸 414px * 808px
 * ============================================================================
 */


/* ============================================================================
   一、弹窗遮罩系统（基础）
   说明：所有弹窗的遮罩层，半透明黑色背景
   使用页面：所有带弹窗的页面（index/result/history-analysis/upload/gender/error/transport-plan/transport-result）
   
   注：.modal-overlay 基础样式已在 global.css 中定义
   ============================================================================ */


/* ============================================================================
   二、支付弹窗
   说明：支付金额展示、支付方式选择、支付提交
   使用页面：index.html(#pay-modal), result.html(#pay-unlock-modal), 
            history-analysis.html(#pay-unlock-modal), transport-result.html(#pay-unlock-modal)
   ============================================================================ */

/* 支付弹窗专属容器 - 控制弹窗垂直位置和布局 */
.pay-modal-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 60px;
}

/* 支付背景包装 - 支付弹窗背景图容器 */
.pay-bg-wrapper {
    position: relative;
    width: 76.09vw; /* 315px / 414px = 76.09% */
    max-width: 315px;
    pointer-events: auto;
}

/* 支付弹窗背景图片 */
.pay-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 支付金额行 - 金额数字拆分显示容器 */
.pay-amount-row {
    position: absolute;
    top: 12.17%;
    left: 54.59%;
    height: 6.52%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 0;
    line-height: 0;
    font-size: 0;
    z-index: 10;
}

/* 金额下方标签文本 */
.pay-amount-label {
    position: absolute;
    top: calc(12.17% + 6.52% + 10px);
    left: 54.59%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #222222;
    line-height: 14px;
    white-space: nowrap;
    z-index: 10;
}

/* 数字图片 - 单个金额数字 */
.num-img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

/* 支付方式选项 - 微信/支付宝选项基础样式
 * 宽拉伸对齐弹窗宽，高自适应；上边距为支付弹窗背景高度的百分比
 */
.pay-method-item {
    position: absolute;
    left: 0;
    width: 100%;
    cursor: pointer;
    z-index: 10;
}

/* 支付方式图标：宽拉伸对齐容器宽，高自适应 */
.pay-method-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 微信支付选项定位 - 上边距支付弹窗 32.6% */
#method-wechat,
#unlock-wechat,
.pay-wechat-pos {
    top: 32.6%;
}

/* 支付宝支付选项定位 - 上边距支付弹窗 41.3% */
#method-alipay,
#unlock-alipay,
.pay-alipay-pos {
    top: 41.3%;
}

/* 支付提交按钮 - 绿色提交按钮 */
.pay-submit-btn {
    position: absolute;
    top: 50.22%;
    left: 54.59%;
    transform: translateX(-50%);
    width: 55.56%; /* 175px / 315px = 55.56% */
    max-width: 175px;
    height: 34px;
    background-color: #56fd99;
    border-radius: 20px;
    border: none;
    font-size: 3.38vw;
    font-weight: 500; /* medium */
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(86, 253, 153, 0.3);
    z-index: 10;
}

/* 已支付刷新结果状态 - 浅蓝色 */
.pay-submit-btn.paid-status {
    background-color: #90F4FF;
    box-shadow: 0 4px 10px rgba(144, 244, 255, 0.3);
}

/* 付费解锁弹窗标题 - 用于 result/history-analysis/transport-result 页的解锁弹窗 */
.unlock-modal-title {
    position: absolute;
    top: 20.87%; /* 弹窗背景高度的 20.87% */
    left: 54.59%; /* 以屏幕 54.59% 处为中心 */
    transform: translateX(-50%);
    font-size: 3.38vw;
    color: #222222;
    font-weight: 400; /* regular */
    white-space: nowrap;
    z-index: 10;
}

/* 支付关闭按钮容器 - 弹窗底部关闭按钮 */
.pay-close-btn-wrapper {
    position: absolute;
    top: calc(100% + 15px) !important; /* 修正：与上方内容间距 15px */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    z-index: 10;
    display: none !important; /* 隐藏支付关闭按钮 */
}

/* 支付关闭按钮图标 */
.pay-close-img {
    width: 10.87vw; /* 修正：屏幕宽度的 10.87% */
    height: auto; /* 高度自适应 */
}

/* ============================================================================
   三、隐私协议弹窗
   说明：用户隐私协议确认弹窗
   使用页面：index.html(#privacy-modal)
   ============================================================================ */

/* 隐私协议弹窗内容区 */
#privacy-modal .modal-content {
    align-self: flex-end; /* 协议弹窗靠底对齐 */
    width: 85.5%;
    height: 27.48vh;
    margin-bottom: 9vh; /* 下边距 9% 屏幕高度 */
    background-color: #fff;
    border-radius: 20px;
    border: 3px solid #96FFC9; /* 内描边 3px */
    box-shadow: 0 0 10px rgba(150, 255, 201, 0.5); /* 外投影 #96FFC9 50% */
    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); /* 弹窗高度 27.48vh 的 17.12% */
    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 20px;
    font-weight: 400; /* regular */
}

/* 弹窗链接 - 绿色链接文字 */
.modal-link {
    color: #00A05D;
    font-weight: 500; /* medium */
    text-decoration: none;
}

/* 弹窗底部按钮 - 黑色背景绿色文字 */
.modal-btn {
    width: 88.7%; /* 弹窗宽度的 88.7% */
    height: 50px;
    margin-bottom: 20px; /* 弹窗下边距 20px */
    background-color: #000;
    color: #54ff9a;
    font-size: 3.86vw;
    font-weight: 500; /* medium */
    border-radius: 25px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================================
   四、邀请好友弹窗
   说明：邀请好友分享弹窗，包含保存图片和分享按钮
   使用页面：index.html(#invite-modal), result.html(#invite-modal), 
            history-analysis.html(#invite-modal), transport-result.html(#invite-modal)
   ============================================================================ */

/* 邀请弹窗容器 - 邀请好友弹窗外层容器 */
.invite-modal-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 邀请弹窗背景包装 */
.invite-bg-wrapper {
    position: relative;
    width: 100vw;
    pointer-events: auto;
}

/* 邀请弹窗背景图片 */
.invite-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 邀请按钮行 - 邀请弹窗内按钮组容器 */
.invite-btn-row {
    position: absolute;
    top: 51.96%;
    left: 54.59%;
    transform: translateX(-50%);
    width: 45.51%;
    height: 34px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

/* 邀请子按钮 - 基础按钮样式（保存图片、分享好友等） */
.invite-sub-btn {
    flex: 1;
    height: 34px;
    border-radius: 5px;
    font-size: 3.38vw;
    font-weight: 500; /* medium */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    font-size: 3.38vw;
    border: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.invite-sub-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* 白色按钮 - 用于邀请弹窗 */
.btn-white {
    background-color: #FFFFFF;
    color: #222222;
}

/* 绿色按钮 - 用于邀请弹窗 */
.btn-green {
    background-color: #54FF9A;
    color: #222222;
}

/* 红色按钮 - 用于邀请弹窗 */
.btn-red {
    background-color: #ff4545;
    color: #FFFFFF;
}

/* 邀请按钮保存中状态 - 带旋转loading */
.invite-sub-btn.saving {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
    position: relative;
}

.invite-sub-btn.saving::after {
    content: "";
    margin-left: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(34, 34, 34, 0.25);
    border-top-color: rgba(34, 34, 34, 0.8);
    animation: invite-saving-spin 0.7s linear infinite;
}

/* 保存中旋转动画 */
@keyframes invite-saving-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================================
   五、邀请图预览弹窗
   说明：邀请图生成后的预览弹窗，支持长按保存
   使用页面：result.html(#invite-image-modal), history-analysis.html(#invite-image-modal),
            transport-result.html(#invite-image-modal)
   ============================================================================ */

/* 邀请图预见弹窗 - z-index最高，50%黑色半透明遮罩 */
#invite-image-modal {
    z-index: 3000; /* 确保在所有弹窗最上层 */
    background-color: rgba(0, 0, 0, 0.5) !important; /* 50%黑色半透明 */
}

/* 邀请图预览容器 */
.invite-image-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* 邀请图提示文字 - "长按保存图片"提示 */
.invite-image-tip {
    position: relative;
    z-index: 10;
    background-color: rgba(85, 254, 154, 0.9);
    color: #222222;
    font-size: 3.86vw;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 25px;
    margin-bottom: 20px;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(85, 254, 154, 0.3);
}

/* 邀请图预览图片 - 可长按保存 */
.invite-image-preview {
    max-height: 80vh; /* 背景图高度的80% */
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-touch-callout: default;
    /* 确保图片可以长按保存 */
    -webkit-user-drag: none;
    touch-action: manipulation;
    /* 确保等比例缩放和居中 */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* 邀请图关闭按钮 */
.invite-image-close-btn {
    position: relative;
    margin-top: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
}

.invite-image-close-btn img {
    width: 24px;
    height: 24px;
}


/* ============================================================================
   六、Toast 提示
   说明：全局消息提示，成功绿色/失败白色
   使用页面：index.html(#toast), result.html(#toast), 
            history-analysis.html(#toast), transport-result.html(#toast)
   ============================================================================ */

/* Toast容器 - 固定在顶部，圆角胶囊样式 */
.toast-container {
    position: fixed;
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 20px;
    background-color: #55fe91; /* 成功状态颜色 */
    border-radius: 100px; /* 圆角 100 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* 防止文字换行 */
}

/* Toast失败状态 - 白色背景 */
.toast-container.fail {
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Toast图标 */
.toast-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

/* Toast文字 */
#toast-text {
    font-size: 3.86vw;
    line-height: 3.86vw;
    color: #222222;
    font-weight: 400; /* Regular */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ============================================================================
   七、礼券系统
   说明：礼券选择弹窗和礼券获取弹窗相关样式
   使用页面：transport-result.html
   ============================================================================ */

/* -----------------------------------------------------------
   8.1 礼券选择弹窗 - 选择使用哪张礼券
   使用：transport-result.html (#coupon-select-modal)
   ----------------------------------------------------------- */

/* 礼券选择弹窗容器 */
.coupon-select-container {
    position: fixed;
    bottom: 17.2vh; /* 需求 343: 下间距 17.2% */
    left: 50%;
    transform: translateX(-50%);
    width: 85.51vw; /* 需求 343: 弹窗宽固定为 85.51% 屏幕宽 */
    min-height: 224px;
    max-height: calc(100vh - 30px);
    background: #FFFFFF;
    border-radius: 40px; /* 统一圆角 */
    border: 3px solid #FFF79A; /* 需求 342: stroke-width: 3px; stroke: #FFF79A */
    box-shadow: 0 0 10px rgba(255, 230, 150, 0.50); /* 需求 342: drop-shadow */
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
    z-index: 2001;
}

/* 礼券选择弹窗标题区 */
.coupon-select-header {
    width: 100%;
    padding-top: 30px;
    flex-shrink: 0;
}

/* 礼券选择弹窗标题图片 */
.coupon-select-title-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 礼券选择弹窗内容区 - 可滚动 */
.coupon-select-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px 0 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 礼券选择弹窗底部 */
.coupon-select-footer {
    width: 100%;
    padding: 0 0 20px 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

/* 礼券确认按钮 - 黑色背景绿色文字 */
.coupon-confirm-btn {
    width: 75.84vw;
    height: 48px;
    background: #000000;
    border-radius: 100px;
    border: none;
    color: #54FF9A;
    font-size: 3.86vw;
    font-weight: 600; /* semibold */
    cursor: pointer;
}

/* 礼券条目 - 基础样式 */
.coupon-item {
    width: 75.84vw;
    height: 48px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
}

/* 礼券条目 - 未选择状态 */
.coupon-item.unselected {
    border: 2px solid #eeeeee;
}

.coupon-item.unselected .coupon-item-title {
    font-size: 4.35vw;
    font-weight: 400; /* regular */
    color: rgba(34, 34, 34, 0.5);
    margin-left: 20px;
}

.coupon-item.unselected .coupon-item-tag {
    font-size: 2.9vw;
    color: #888888;
    background: #EEEEEE;
    padding: 4px;
    border-radius: 4px;
    margin-left: 10px;
}

/* 礼券条目 - 已选择状态（黄色背景） */
.coupon-item.selected {
    background: #FFF79A;
    border: none;
}

.coupon-item.selected .coupon-item-title {
    font-size: 4.35vw;
    font-weight: 500; /* medium */
    color: #222222;
    margin-left: 20px;
}

.coupon-item.selected .coupon-item-tag {
    font-size: 2.9vw;
    color: #222222;
    background: #FFE232;
    padding: 4px;
    border-radius: 4px;
    margin-left: 10px;
}

/* 礼券条目左侧内容区 */
.coupon-item-left {
    display: flex;
    align-items: center;
}

/* 礼券选择图标 */
.coupon-select-icon {
    width: 20px;
    height: 20px;
    margin-right: 14px;
}

/* 礼券弹窗上滑动画 */
@keyframes slideUp {
    from { transform: translate(-50%, 100%); }
    to { transform: translate(-50%, 0); }
}

/* -----------------------------------------------------------
   8.2 礼券获取弹窗 - 获取新礼券
   使用：transport-result.html (#get-coupon-modal)
   ----------------------------------------------------------- */

/* 礼券获取弹窗容器 */
.coupon-modal-container {
    width: 85.51vw;
    height: calc(85.51vw * (224 / 354)); /* 按比例或直接固定高度 */
    height: 27.72vh;
    position: fixed;
    bottom: 17.2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
}

/* 礼券获取弹窗背景 */
.coupon-modal-bg {
    width: 100%;
    height: 100%;
    background: #FFF;
    border: 3px solid #FFF79A;
    border-radius: 40px; /* 匹配设计稿圆角 */
    filter: drop-shadow(0 0 10px rgba(255, 230, 150, 0.50));
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* 礼券获取弹窗标题图片 */
.coupon-modal-title-img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 13.39%;
    left: 0;
}

/* 礼券行 - 基础样式 */
.coupon-row {
    width: 88.7%;
    height: 21.42%;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7px 0 20px;
    box-sizing: border-box;
}

/* 惊喜礼券行（黄色背景） */
.coupon-row-yellow {
    background: #FFF79A;
    top: 39.29%;
}

/* 至尊礼券行（黑色背景） */
.coupon-row-black {
    background: #000000;
    top: 69.64%;
}

/* 礼券左侧内容区 */
.coupon-left {
    display: flex;
    align-items: center;
}

/* 礼券名称 */
.coupon-name {
    font-size: 4.35vw;
    line-height: 4.35vw;
    color: #222222;
    font-weight: 500;
}

/* 至尊礼券名称（绿色） */
.coupon-name.supreme {
    color: #54FF9A;
}

/* 礼券标签 */
.coupon-tag {
    font-size: 2.9vw;
    line-height: 2.9vw;
    color: #222222;
    padding: 4px;
    background: #FFe232;
    border-radius: 2px;
    margin-left: 10px;
    white-space: nowrap;
}

/* 至尊礼券标签（白色半透明） */
.coupon-tag.supreme {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.2);
}

/* 获取按钮 */
.coupon-get-btn {
    padding: 10px 15px;
    font-size: 3.38vw;
    line-height: 3.38vw;
    color: #222222;
    background: #FFFFFF;
    border-radius: 100px;
    border: none;
    cursor: pointer;
}

/* 至尊礼券获取按钮（绿色） */
.coupon-get-btn.supreme {
    background: #54FF9A;
}


/* ============================================================================
   八、小红书弹窗
   说明：小红书关注任务弹窗，包含上传截图区域
   使用页面：transport-result.html (#xhs-modal)
   ============================================================================ */

/* 小红书上传区域 - 截图上传框 */
.xhs-upload-area {
    position: absolute;
    width: 52.65%;
    height: 21.52%;
    top: 66.08%;
    right: 19.08%;
    background: #f7f2e8;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 小红书上传盒子 */
.xhs-upload-box {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 小红书上传占位图 */
.xhs-upload-placeholder {
    width: 100%;
    height: auto; /* 需求 326: 与背景等宽，高度自适应实现上下居中 */
}

/* 小红书上传状态遮罩 - 上传中/上传成功状态 */
.xhs-upload-status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* 小红书状态图片 */
.xhs-status-img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 需求 329: 拉伸填充区域 */
}

/* 小红书弹窗按钮位置调整 */
#xhs-modal .invite-btn-row {
    bottom: auto;
    top: 51%;
}


/* ============================================================================
   九、页面交互组件
   说明：首页和结果页的各种交互按钮和提示组件
   ============================================================================ */

/* -----------------------------------------------------------
   11.2 主按钮包装器
   使用：index.html (#main-action-btn) - "立即分析"主按钮
   ----------------------------------------------------------- */

/* 主分析按钮包装器 - 固定在页面底部 */
.analysis-btn-wrapper {
    position: fixed;
    bottom: calc(79px + 17px + 20px); /* 隐私协议bottom 79px + 隐私协议高度17px + 间距20px */
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 59.67vw;  /* 移动端：相对于视口宽度 */
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
    z-index: 200;
}

/* 主分析按钮图片 */
.analysis-btn-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 0px 20px rgba(65, 0, 162, 0.2));
}

/* -----------------------------------------------------------
   11.3 隐私协议容器
   使用：index.html - 底部隐私协议勾选区域
   ----------------------------------------------------------- */

/* 隐私协议容器 - 固定在页面最底部 */
.privacy-container {
    position: fixed;
    bottom: calc(20px + 44px + 15px); /* 按钮底部20px + 按钮高度44px + 间距15px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 200;
    margin-top: 0;
}

/* 隐私协议勾选框 */
.privacy-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 勾选图标 */
.check-icon {
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* 隐私协议文字 */
.privacy-text {
    margin-left: 5px;
    font-size: 2.9vw;
    color: #fff;
    white-space: nowrap;
}

/* 协议链接 - 绿色高亮 */
.protocol-link {
    color: #D7FFA6;
    font-weight: 500; /* medium */
    text-decoration: none;
}

/* -----------------------------------------------------------
   11.4 提交按钮通用样式
   使用：各表单页面的提交按钮
   ----------------------------------------------------------- */

/* 提交按钮基础样式 */
.submit-btn {
    position: relative;
    width: 48.3%;
    aspect-ratio: 200 / 50;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

/* 提交按钮禁用状态 */
.submit-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 提交按钮背景图 */
.btn-submit-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 提交按钮文字 */
.submit-text {
    position: relative;
    z-index: 2;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 3.86vw;
    line-height: 3.86vw;
    color: #97461A;
}


/* ============================================================================
   十、通用交互效果
   说明：按钮点击缩放等全局交互效果
   ============================================================================ */

/* 通用按钮点击缩放效果 - 统一按钮点击反馈 */
.info-btn:active,
.unpaid-btn:active,
.unlock-btn:active,
.submit-btn:active,
.gender-submit-btn:active,
.analysis-btn-wrapper:active,
.invite-sub-btn:active,
.coupon-confirm-btn:active,
.coupon-get-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}