/* =========================================================
   弹窗 / 下拉框 柔和美化修复版
   目标：醒目、舒服、不要红色
   ========================================================= */

:root {
    --pop-bg: #ffffff;
    --pop-bg-soft: #f8fafc;
    --pop-text: #1f2937;
    --pop-sub: #6b7280;
    --pop-border: #dbe3f0;
    --pop-accent: #6d5dfc;
    --pop-accent-2: #8b5cf6;
    --pop-accent-soft: #eef2ff;
    --pop-hover: #f5f7ff;
    --pop-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
}

/* 遮罩柔和一点，但仍然明显 */
.layui-layer-shade,
.modal-backdrop,
.mask,
.popup-mask,
.dialog-mask,
.el-overlay,
.v-modal {
    background: rgba(15, 23, 42, 0.32) !important;
    opacity: 1 !important;
}

/* 弹窗主体 */
.layui-layer,
.layui-layer-page,
.layui-layer-dialog,
.modal,
.dialog,
.popup,
.el-dialog,
.package-popup,
.vip-popup,
.pay-popup,
.recharge-popup {
    background: var(--pop-bg) !important;
    color: var(--pop-text) !important;
    border: 1px solid #dde5f3 !important;
    border-radius: 18px !important;
    box-shadow: var(--pop-shadow) !important;
    overflow: hidden !important;
}

/* 弹窗标题 */
.layui-layer-title,
.modal-title,
.dialog-title,
.popup-title,
.el-dialog__title,
.el-dialog__header {
    background: #ffffff !important;
    color: var(--pop-accent) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-bottom: 1px solid #eef2f7 !important;
    min-height: 56px !important;
    line-height: 56px !important;
    padding: 0 18px !important;
}

/* 弹窗内容 */
.layui-layer-content,
.modal-content,
.dialog-content,
.popup-content,
.el-dialog__body {
    background: #ffffff !important;
    color: var(--pop-text) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding: 22px !important;
}

/* 强制让弹窗内部文字舒服 */
.layui-layer *,
.modal *,
.dialog *,
.popup *,
.el-dialog * {
    color: var(--pop-text) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* 标题内部保持紫色 */
.layui-layer-title *,
.modal-title *,
.dialog-title *,
.popup-title *,
.el-dialog__title *,
.el-dialog__header * {
    color: var(--pop-accent) !important;
}

/* 关闭按钮 */
.layui-layer-setwin a,
.layui-layer-close,
.close,
.close-btn,
.el-dialog__close {
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    text-align: center !important;
}

/* 标签文字 */
.layui-form-label,
label,
.form-label {
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* 输入框 */
input,
textarea,
select,
.layui-input,
.layui-textarea,
.el-input__inner,
input[type="text"],
input[type="password"],
input[type="number"] {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 2px solid #d9e2f2 !important;
    border-radius: 14px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

input:focus,
textarea:focus,
select:focus,
.layui-input:focus,
.layui-textarea:focus,
.el-input__inner:focus {
    border-color: var(--pop-accent) !important;
    box-shadow: 0 0 0 4px rgba(109, 93, 252, 0.12) !important;
    outline: none !important;
}

/* 占位文字 */
input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* 下拉框显示区域 */
.layui-form-select .layui-input,
.layui-select-title input,
select {
    background: #ffffff !important;
    color: #374151 !important;
    border: 2px solid #d9e2f2 !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
}

/* 下拉箭头 */
.layui-form-select .layui-edge {
    border-top-color: #6366f1 !important;
}

/* 下拉列表 */
.layui-form-select dl,
select option,
.dropdown-menu,
.el-select-dropdown,
.xm-select-parent,
.xm-select-panel {
    background: #ffffff !important;
    border: 1px solid #dde5f3 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
}

/* 下拉列表标题/提示 */
.layui-form-select dl dt,
.dropdown-header,
.el-select-dropdown__item.is-disabled {
    background: #f8fafc !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

/* 下拉选项 */
.layui-form-select dl dd,
.dropdown-item,
.el-select-dropdown__item,
.xm-option {
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    min-height: 40px !important;
    line-height: 40px !important;
    padding: 0 14px !important;
}

/* 悬停项 */
.layui-form-select dl dd:hover,
.dropdown-item:hover,
.el-select-dropdown__item.hover,
.xm-option:hover {
    background: #f5f7ff !important;
    color: #4f46e5 !important;
}

/* 当前选中项 */
.layui-form-select dl dd.layui-this,
.layui-form-select dl dd.layui-select-tips,
.dropdown-item.active,
.el-select-dropdown__item.selected,
.xm-option.selected {
    background: #eef2ff !important;
    color: #4338ca !important;
    font-weight: 800 !important;
}

/* 套餐 / 卡片 */
.package,
.plan,
.package-item,
.plan-item,
.vip-item,
.price-item,
.pay-item,
.card,
.box,
.item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
    color: #1f2937 !important;
}

/* 价格用紫蓝，不要红色 */
.price,
.money,
.amount,
.num,
.package-price,
.plan-price {
    color: #4f46e5 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* 套餐说明 */
.desc,
.description,
.sub-title,
.subtitle,
.tips,
.tip,
.help {
    color: #64748b !important;
    font-weight: 500 !important;
}

/* 按钮：柔和紫蓝渐变 */
button,
.btn,
.button,
.layui-btn,
.login-btn,
.submit-btn,
[type="button"],
[type="submit"] {
    background: linear-gradient(135deg, #6d5dfc, #7c3aed) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(109, 93, 252, 0.22) !important;
    font-weight: 700 !important;
    min-height: 42px !important;
    padding: 0 20px !important;
}

button *,
.btn *,
.button *,
.layui-btn *,
.login-btn *,
.submit-btn * {
    color: #ffffff !important;
}

/* 次按钮 */
.cancel,
.btn-cancel,
.layui-layer-btn1,
.button-secondary {
    background: #ffffff !important;
    color: #4f46e5 !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: none !important;
}

/* 不要再用红色强调 */
.red,
.danger,
.error,
.fail,
.expire,
.expired,
.time-left,
.countdown {
    color: #4f46e5 !important;
    font-weight: 700 !important;
}

/* 轻提示改橙色，不刺眼 */
.warning,
.orange,
.alert {
    color: #d97706 !important;
    font-weight: 700 !important;
}

/* 成功用绿色 */
.green,
.success,
.ok {
    color: #059669 !important;
    font-weight: 700 !important;
}

/* 弹窗底部区域 */
.layui-layer-btn,
.modal-footer,
.dialog-footer,
.popup-footer,
.el-dialog__footer {
    background: #f8fafc !important;
    border-top: 1px solid #eef2f7 !important;
    padding: 14px 20px !important;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .layui-layer,
    .modal,
    .dialog,
    .popup,
    .el-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 16px !important;
    }

    .layui-layer-title,
    .modal-title,
    .dialog-title,
    .popup-title,
    .el-dialog__title,
    .el-dialog__header {
        font-size: 18px !important;
    }

    .layui-layer-content,
    .modal-content,
    .dialog-content,
    .popup-content,
    .el-dialog__body {
        padding: 16px !important;
    }
}