/* ==================== 广告位展示CSS ==================== */

/* 1. 整体行高压缩 */
.xzvip-row-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #e5e5e5;
    border-radius: 4px; /* 参考图圆角较小 */
    margin-bottom: 8px; /* 间距调小 */
    overflow: hidden;
    background: #fff;
    height: 38px; /* 强制统一高度 */
}

/* 2. 左侧色块宽度和文字 */
.xzvip-label-box {
    width: 60px; /* 稍微窄一点更秀气 */
    background: #f1f3f5;
    color: #666;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e5e5e5;
    flex-shrink: 0;
}

/* 3. 右侧输入框撑满逻辑 */
.xzvip-input-box {
    flex: 1;
    display: flex;
    background: #fff;
}

.xzvip-inner-input {
    flex: 1; /* 关键：让输入框自动撑满剩余空间 */
    border: none !important;
    padding: 0 12px; /* 取消上下内边距，靠容器高度撑起 */
    font-size: 13px;
    outline: none;
    height: 100%;
    background: transparent !important;
}

/* 4. 颜色选择器特有样式 */
.color-stretch {
    position: relative;
    display: flex;
    align-items: center;
}

.color-text-field {
    text-transform: uppercase; /* 自动大写颜色代码，显高级 */
}

.picker-container {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px dashed #eee; /* 给选择器加个若有若无的分隔 */
}

.xzvip-real-picker {
    width: 24px;
    height: 20px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
}

/* Apple 风格的附注文字 */
.xzvip-ios-footnote {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px 0px 0px; /* 顶部紧贴上方的输入框 */
    color: #8e8e93; /* 默认灰色 */
    font-size: 11px; /* 极细小字 */
    line-height: 1.4;
    transition: color 0.3s;
}

/* 其中的重要提醒部分可以加深颜色 */
.xzvip-ios-footnote span {
    flex: 1;
}

/* 当用户聚焦在输入框时，可以给这个提示加点亮色（可选交互） */
.xzvip-row-group:focus-within + .xzvip-ios-footnote {
    color: #ff3b30; /* 聚焦时变红，提醒效果更好 */
}

/* 图标微调 */
.xzvip-ios-footnote i {
    margin-top: 2px;
    font-size: 12px;
}
/* 广告位核心样式 */
.xzvip-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 12px;
    box-sizing: border-box;
}

/* 广告位项目 - 高度改为28px */
.xzvip-item {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 5px;
    font-size: 13px;
    font-weight: normal !important;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
}

/* hover时颜色变浅，放大效果保留 */
.xzvip-item:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.xzvip-item.user-bought {
    cursor: pointer;
}

.xzvip-item.not-clickable {
    cursor: default;
}

.xzvip-item.not-clickable:hover {
    transform: none;
    filter: none;
}

.xzvip-item div, .xzvip-item a {
    font-weight: 500;
    text-align: center;
    padding: 0 8px;
    font-size: 13px !important;
}

.xzvip-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 已购买的广告位也添加hover效果 */
.xzvip-item.user-bought:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* ==================== 广告位弹窗美化 CSS ==================== */
/* 紧凑版设计 - 配色与签到统一 */

/* 购买弹窗主容器 */
.xzvip-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}

.xzvip-modal-content {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* 弹窗头部 - 高度增大，去掉小图标 */
.xzvip-modal-header {
    background: linear-gradient(135deg, #FFEFBA 0%, #FFD700 100%);
    color: #5d4037;
    padding: 25px 24px 20px 24px; /* 上边距增大 */
    display: flex;
    flex-direction: column;
    border-radius: 16px 16px 0 0;
    position: relative;
    overflow: hidden;
    min-height: 100px; /* 高度增大 */
}

.xzvip-modal-header::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
}

/* 标题行 */
.xzvip-modal-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.xzvip-modal-title {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.2px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 去掉标题前的小图标 */
.xzvip-modal-title::before {
    content: none; /* 去掉小图标 */
}

.xzvip-close-modal {
    background: none;
    backdrop-filter: blur(5px);
    border: none;
    color: #5d4037;
    font-size: 22px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.xzvip-close-modal:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

.xzvip-close-modal:focus,
.xzvip-close-modal:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 积分信息行 */
.xzvip-credits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px; /* 稍微增加一点间距 */
    position: relative;
    z-index: 2;
}

.xzvip-my-credits {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5d4037;
    background: rgba(255, 251, 230, 0.8);
    padding: 5px 10px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    height: 30px;
    line-height: 1;
}

.xzvip-my-credits-value {
    font-weight: 700;
    color: #d35400;
    font-size: 12px;
}

/* 积分充值按钮 */
.xzvip-credits-link {
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    color: #888 !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    height: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xzvip-credits-link:hover {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    color: #d35400 !important;
    transform: translateY(-1px);
}

/* 弹窗主体 */
.xzvip-modal-body {
    padding: 18px 24px;
    max-height: calc(80vh - 118px); /* 调整高度 */
    overflow-y: auto;
    background: #fff;
}

/* 价格信息容器 - 改为极简风格 */
.xzvip-price-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #f8f8f8; /* 改为极淡的灰色 */
    border-radius: 12px;
    padding: 12px 0 5px 0px;
    margin-bottom: 20px;
    border: 1px solid #efefef;
}

.xzvip-price-item-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 在中间两个项之间加一条极细的分割线 */
.xzvip-price-item-compact:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #e5e5e5;
}

/* 标签：更细、颜色更淡 */
.xzvip-price-label-compact {
    font-size: 11px;
    color: #86868b; /* Apple 辅助文字颜色 */
    margin-bottom: 2px;
    font-weight: 400;
}

/* 数值：更有力度 */
.xzvip-price-value-compact {
    font-weight: 600;
    color: #5d4037; /* 主文字颜色 */
}

/* 总价突出显示 */
.total-num {
    color: #ff4800; /* Apple 橙色，醒目但不刺眼 */
    font-size: 17px;
    font-weight: 600;
}

/* 给“总计”加一个微弱的呼吸感 */
.xzvip-price-item-compact.highlight {
    /* 可以在这里给总价项加一点特殊背景，比如极淡的橙色，不加也很干净 */
}

/* 表单组 */
.xzvip-form-group {
    margin-bottom: 10px; /* 从 16px 缩减 */
}

.xzvip-form-label {
    display: block;
    padding: 0px 0px 5px 0px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #333;
    font-weight: 600;
    line-height: 1.2;
}

.xzvip-form-label.required::after {
    content: '*';
    color: #e74c3c;
    margin-left: 3px;
}

.xzvip-form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    box-sizing: border-box;
    height: 30px;
    transition: all 0.2s ease;
    background: white;
    line-height: 1.2;
}

.xzvip-form-control:focus {
    border-color: #FDB931;
    outline: none;
    box-shadow: 0 0 0 2px rgba(253, 185, 49, 0.1);
}

/* 时长选项 */
.xzvip-duration-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.xzvip-duration-option {
    flex: 1;
    min-width: 60px;
    padding: 7px 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
    background: white;
    font-weight: 500;
}

.xzvip-duration-option.active {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%) !important;
    border: none !important; /* 渐变色下不需要边框，更显精致 */
    color: #ffffff !important;
    font-weight: 700 !important;
    /* Apple 风格的彩色柔和阴影：使用同色系淡阴影，不显脏 */
    box-shadow: 0 4px 12px rgba(86, 171, 47, 0.35) !important;
    transform: translateY(-1px) scale(1.02) !important; /* 选中有轻微浮起感 */
}

.xzvip-duration-option:hover:not(.active) {
    background: #ffffff !important;
    border-color: #a8e063 !important; /* Hover 时边缘变绿 */
    color: #56ab2f !important;
}

/* 颜色选择器 - 修复黑色边框 */
.xzvip-color-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.xzvip-color-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    font-family: 'Monaco', 'Consolas', monospace;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.xzvip-color-picker {
    width: 36px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    background: none;
    transition: all 0.2s ease;
    overflow: hidden; /* 防止溢出 */
}

/* 修复颜色选择器的黑色边框问题 */
.xzvip-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none; /* 去掉边框 */
    border-radius: 6px; /* 内部圆角 */
}

.xzvip-color-picker::-webkit-color-swatch {
    border: none; /* 去掉边框 */
    border-radius: 6px; /* 内部圆角 */
}

.xzvip-color-picker::-moz-color-swatch-wrapper {
    padding: 0;
    border: none;
    border-radius: 6px;
}

.xzvip-color-picker::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}

/* 帮助文字 */
.xzvip-help-text {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    line-height: 1.3;
    padding-left: 3px;
}

/* 提交按钮 - 缩小居中版 */
.xzvip-submit-btn {
    width: 100%;               /* 1. 缩小宽度，建议 50%-70% 之间 */
    display: block;           /* 2. 必须设为块级元素才能用 margin auto 居中 */
    margin: 20px 0px 10px 0px;       /* 3. auto 实现左右居中，20px 是上间距 */
    padding: 10px 0;
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    color: #5d4037;
    border: none;
    border-radius: 20px;      /* 4. 宽度缩小后，圆角调大一点（20px）会更好看 */
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    height: 40px;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
    line-height: 1;
}

.xzvip-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 185, 49, 0.25);
}

.xzvip-submit-btn:disabled {
    background: #c0c4cc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==================== 成功弹窗 (Apple 极简重构版) ==================== */
.success-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45); 
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}

.success-modal-content {
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 420px; /* 保持 420px 宽度 */
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
    position: relative;
    animation: applePop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.15);
}

/* 头部重塑：纯白大图标区 */
.success-modal-header {
    background: #fff !important;
    padding: 45px 30px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border: none !important;
    min-height: auto !important; /* 去掉原本的最小高度限制 */
}

.success-modal-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    color: #1d1d1f !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    width: 100%;
    line-height: 1.2 !important;
}

/* 将标题内的勾选符号 <i> 变成生机勃勃的绿色大圆圈 */
.success-modal-title i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #f2f9f1 !important; /* 极浅的绿晕 */
    color: #52c41a !important;    /* 见山绿/成功绿 */
    border-radius: 50%;
    font-size: 32px !important;
    font-style: normal;
    margin: 0 auto !important;
}

/* 右上角关闭按钮：同步失败弹窗的精致样式 */
.success-modal-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 28px !important;
    height: 28px !important;
    background: #f5f5f7 !important;
    color: #86868b !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
}

.success-modal-close:hover {
    background: #e8e8ed !important;
    color: #1d1d1f !important;
}

/* 内容区排版 */
.success-modal-body {
    padding: 10px 40px 30px !important;
    text-align: center !important;
}

.success-info {
    font-size: 15px !important;
    color: #86868b !important;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* 按钮布局：保持横向 Apple 药丸风格 */
.success-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px;
}

.success-actions .btn {
    flex: 1;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.2s;
    min-width: auto !important; /* 覆盖旧样式 */
}

/* 主要按钮：深空灰 */
.success-actions .btn-success {
    background: #1d1d1f !important;
    color: #fff !important;
}

/* 次要按钮：浅灰背景 */
.success-actions .btn-default {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
}

.success-actions .btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ==================== 失败弹窗 (Apple 极简重构版) ==================== */
.error-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45); 
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.error-modal-content {
    background: #fff;
    border-radius: 24px;
    width: 95%;
    max-width: 420px; /* 宽度调宽，更稳重 */
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
    position: relative;
    animation: applePop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.15);
}

@keyframes applePop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* 头部重塑：纯白大图标区 */
.error-modal-header {
    background: #fff !important;
    padding: 45px 30px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border: none !important;
}

.error-modal-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    color: #1d1d1f !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    width: 100%;
}

/* 图标修饰 */
.error-modal-title i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #fff2f0 !important;
    color: #ff3b30 !important;
    border-radius: 50%;
    font-size: 32px !important;
    font-style: normal;
    margin: 0 auto !important;
}

/* 右上角关闭按钮：样式化 */
.error-modal-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 28px !important;
    height: 28px !important;
    background: #f5f5f7 !important;
    color: #86868b !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.error-modal-close:hover {
    background: #e8e8ed !important;
    color: #1d1d1f !important;
}

/* 内容区：极简排版 */
.error-modal-body {
    padding: 10px 40px 30px !important;
    text-align: center !important;
}

/* 优化去掉标题后的文字排版 */
.error-info {
    font-size: 15px !important;
    color: #1d1d1f !important; /* 调深一点，提高可读性 */
    line-height: 1.6 !important;
    text-align: center !important;
    padding: 0 10px !important;
    margin-bottom: 30px !important;
}

/* 积分详情卡片：改为更淡的颜色，呼应 Apple 风格 */
.error-credits-details {
    background: #fbfbfd !important;
    border: 1px solid #f2f2f7 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

.error-credits-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: #1d1d1f;
}

.error-credits-row.diff {
    border-top: 1px solid #f2f2f7;
    margin-top: 10px;
    padding-top: 10px;
}

.error-credits-row.diff .error-credits-value {
    color: #ff3b30 !important; /* 差额用醒目红 */
    font-weight: 700;
}

.error-tip {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 25px;
}

.error-tip a {
    color: #0071e3 !important; /* Apple 蓝色链接 */
    text-decoration: none;
    font-weight: 600;
}

/* 按钮布局 */
.error-actions {
    display: flex !important;
    flex-direction: row !important; /* 横向排列 */
    justify-content: center !important;
    gap: 12px;
}

.error-actions .btn {
    flex: 1;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.2s;
}

.error-actions .btn-primary, .error-actions .btn-success {
    background: #1d1d1f !important;
    color: #fff !important;
}

.error-actions .btn-default {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
}

.error-actions .btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* 隐藏特定的多余按钮 */
#errorModal .error-actions .btn-primary {
    display: none !important;
}


/* ==================== 登录提示弹窗 (Apple 极简重构版) ==================== */
.login-tip-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45); 
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}

.login-tip-content {
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 420px; /* 统一宽度为 420px */
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
    position: relative;
    animation: applePop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.15);
}

/* 头部重塑：纯白且居中 */
.login-tip-header {
    background: #fff !important;
    padding: 45px 30px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border: none !important;
    min-height: auto !important;
}

.login-tip-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    color: #1d1d1f !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    width: 100%;
}

/* 将标题内的钥匙 <i> 变成柔和的金色大圆圈 */
.login-tip-title i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #fff9e6 !important; /* 极浅的金黄背景 */
    color: #fdb931 !important;    /* 见山黄 */
    border-radius: 50%;
    font-size: 28px !important;
    font-style: normal;
    margin: 0 auto !important;
}

/* 右上角关闭按钮：同步一致 */
.login-tip-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 28px !important;
    height: 28px !important;
    background: #f5f5f7 !important;
    color: #86868b !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
}

.login-tip-close:hover {
    background: #e8e8ed !important;
    color: #1d1d1f !important;
}

/* 内容区排版 */
.login-tip-body {
    padding: 10px 40px 35px !important;
    text-align: center !important;
}

.login-tip-body p {
    font-size: 15px !important;
    color: #86868b !important;
    line-height: 1.6;
    margin-bottom: 30px !important;
}

/* 按钮：Apple 药丸黑金版 */
.login-tip-btn {
    width: 100%;
    max-width: 200px; /* 登录按钮不需要占满，居中更精致 */
    height: 44px !important;
    background: #1d1d1f !important; /* 统一使用深空灰作为主色 */
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    line-height: 44px !important;
    padding: 0 !important;
}

.login-tip-btn:hover {
    background: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

.login-tip-btn:active {
    transform: scale(0.97) !important;
}

/* ==================== 响应式设计 (Apple 风格适配版) ==================== */
@media (max-width: 768px) {
    /* 1. 核心修改：将宽度放大，占满屏幕，增加高度上限 */
    .xzvip-modal-content,
    .success-modal-content,
    .error-modal-content,
    .login-tip-content {
        max-width: 96% !important; /* 从 90% 改为 96%，左右只留极窄的边距 */
        max-height: 90vh !important; /* 高度上限拉高到屏幕的 90%，防止表单挤压 */
        border-radius: 16px !important; /* 手机端圆角稍微收敛到 16px，内部空间更大 */
    }
    
    /* 2. 头部间距微调：确保大图标在手机上不顶格 */
    .success-modal-header,
    .error-modal-header,
    .login-tip-header {
        padding: 35px 20px 10px 20px !important;
        min-height: auto !important; 
    }
    
    /* 弹窗头部 - 高度增大，去掉小图标 */
.xzvip-modal-header {
    background: linear-gradient(135deg, #FFEFBA 0%, #FFD700 100%);
    color: #5d4037;
    padding: 25px 14px 20px 14px; /* 上边距增大 */
    display: flex;
    flex-direction: column;
    border-radius: 16px 16px 0 0;
    position: relative;
    overflow: hidden;
    min-height: 100px; /* 高度增大 */
}

    /* 3. 内容区边距优化：左右内边距缩小（从 20px 降到 15px），给输入框留出更多横向空间 */
    .xzvip-modal-body,
    .success-modal-body,
    .error-modal-body,
    .login-tip-body {
        padding: 10px 15px 25px 15px !important; 
    }
    
    /* 4. 价格区域适配：防止挤压 */
    .xzvip-price-row {
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .xzvip-price-label-compact {
        font-size: 11px !important;
    }
    
    .xzvip-price-value-compact {
        font-size: 14px !important;
    }

    /* 5. 新增：让购买表单里的行高稍微拉大一点，手机上更好点按 */
    .xzvip-row-group {
        height: 42px !important; /* 从原本的 38px 拉高，手指更容易点到输入框 */
    }
    .xzvip-inner-input {
        font-size: 14px !important; /* 手机端输入框字体稍微放大，防止看瞎眼 */
    }
}

@media (max-width: 480px) {
    /* 1. 针对超小屏幕（窄屏手机）的优化 */
    .xzvip-price-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        padding: 8px 6px !important;
    }
    
    /* 2. 标题字号：防止折行 */
    .xzvip-modal-title,
    .success-modal-title,
    .error-modal-title,
    .login-tip-title {
        font-size: 18px !important;
    }

    /* 3. 图标稍微缩小一点点，适配窄屏 */
    .success-modal-title i,
    .error-modal-title i,
    .login-tip-title i {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }

    /* 4. 按钮横向改为纵向：手机端纵向点击更方便 */
    .success-actions, .error-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .success-actions .btn, .error-actions .btn {
        width: 100% !important;
        height: 40px !important;
    }
}