@charset "UTF-8";

/* ============================================================
   主题变量
   ============================================================ */
.blue-theme {
    --primary-bg: linear-gradient(135deg, #1a2a6c, #2c3e50);
    --header-bg: rgba(0, 40, 104, .8);
    --logo-bg: linear-gradient(135deg, #1677ff, #00a8ff);
}

.dark-theme {
    --primary-bg: linear-gradient(135deg, #393E4D 0%, #2D3140 100%);
    --header-bg: rgba(34, 37, 49, .8);
    --logo-bg: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.green-theme {
    --primary-bg: linear-gradient(135deg, #1a2a4a, #0d1b2f);
    --header-bg: rgba(20, 41, 74, .8);
    --logo-bg: linear-gradient(135deg, #00c853, #64dd17);
}

/* ============================================================
   基础重置（合并）
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Microsoft YaHei", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    border: none;
}

a {
    color: #51b7ec;
    text-decoration: none;
}

a:hover {
    color: #1797db;
    text-decoration: underline;
}

.text_hide {
    line-height: 500px;
    overflow: hidden;
}

/* ============================================================
   整体布局：全屏居中
   ============================================================ */
.app-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--primary-bg);
}

/* ============================================================
   兑换卡片
   ============================================================ */
.card {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .3);
}

/* ---------- 卡片头部 ---------- */
.card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--header-bg);
    color: #fff;
    text-align: center;
}

.card-header .logo {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--logo-bg);
    border-radius: 50%;
    overflow: hidden;
}

.card-header .logo svg {
    width: 30px;
    height: 30px;
}

.card-header h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 12px 0 6px;
}

.card-header .subtitle {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 14px;
    opacity: .85;
}

.card-header .subtitle img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

/* ---------- 卡片主体 ---------- */
.card-body {
    width: 100%;
    padding: 10px 0 0;
}

.form {
    width: 100%;
}

.form-item {
    width: 80%;
    margin: 15px auto;
}

.form-control {
    width: 100%;
    display: flex;
    gap: 10px;
}

/* 操作按钮行：撑满高度，避免按钮被压扁 */
.form-control--actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.form-control--actions .btn {
    flex: 1 1 0;
}

/* ---------- 输入框（带左侧图标） ---------- */
.input-wrapper {
    position: relative;
    width: 100%;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #a8abb2;
    pointer-events: none;
    transition: color .2s;
}

.input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    font-size: 14px;
    color: #303133;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.input:hover {
    border-color: #c0c4cc;
}

.input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 3px rgba(64, 158, 255, .15);
}

.input::placeholder {
    color: #a8abb2;
}

.input-wrapper:focus-within .input-icon {
    color: #409eff;
}

/* ---------- 按钮 ---------- */
.btn {
    flex: 1;
    height: 46px;
    min-height: 46px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.btn:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background: #ecf5ff;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    color: #fff;
    background: #409eff;
    border-color: #409eff;
}

.btn-primary:hover {
    background: #79bbff;
    border-color: #79bbff;
    color: #fff;
}

/* ---------- 兑换规则 ---------- */
.cdkey-rule {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
    font-size: 14px;
    color: #666;
}

.cdkey-rule-title {
    margin-bottom: 10px;
    font-weight: 600;
    color: #303133;
}

.rule-txt {
    font-size: 13px;
    color: #979797;
    line-height: 1.6;
}

.rule-txt .txt {
    margin: 5px 0;
}

/* ============================================================
   登录方式选择弹窗
   ============================================================ */
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.login-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.login-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.login-modal__dialog {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    overflow: hidden;
    transform: translateY(20px) scale(.96);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.login-modal.is-open .login-modal__dialog {
    transform: translateY(0) scale(1);
}

.login-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.login-modal__header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #303133;
}

.login-modal__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #909399;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: .15s;
}

.login-modal__close:hover {
    background: #f5f7fa;
    color: #409eff;
}

.login-modal__body {
    padding: 20px;
}

.login-modal__tip {
    margin: 0 0 16px;
    font-size: 13px;
    color: #909399;
    text-align: center;
}

.login-modal__tip1 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: bold;
    color: #f71707;
    text-align: center;
}

/* 两种登录方式 */
.login-way-list {
    display: flex;
    gap: 12px;
}

.login-way-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 10px;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s;
    font-family: inherit;
}

.login-way-item:hover {
    border-color: #409eff;
    background: #ecf5ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(64, 158, 255, .15);
}

.login-way-item:active {
    transform: translateY(0);
}

.login-way-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
}

.login-way-icon--qq {
    background: linear-gradient(135deg, #12b7f5, #0099d6);
}

.login-way-icon--wechat {
    background: linear-gradient(135deg, #2dc100, #1a9e00);
}

.login-way-name {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
}

/* ============================================================
   QQ 授权登录页
   ============================================================ */
.lay_top {
    height: 48px;
    background: #51b7ec;
    overflow: hidden;
}

.lay_top_inner {
    max-width: 688px;
    margin: 0 auto;
    min-width: 305px;
    position: relative;
}

.lay_top .logo {
    float: left;
    width: 109px;
    height: 42px;
    margin: 3px 0 0 40px;
    background-size: cover;
    background-repeat: no-repeat;
    /* 如有 logo 图片：background-image: url(/app/static/img/qq-logo.png); */
}

.lat_top_other {
    float: right;
    margin: 15px 47px 0 0;
    color: #cfe1ea;
    font-size: 12px;
}

.lat_top_other a {
    color: #fff;
}

.lat_top_other a:hover {
    color: #c4e6f9;
}

.lat_top_other span,
.lat_top_other a {
    display: inline-block;
}

.lat_top_other .line {
    color: #b5b5b5;
    padding: 0 3px;
}

/* 主区域：左右两栏 */
#combine_page {
    max-width: 688px;
    margin: 5px auto 0;
    overflow: hidden;
}

.combine_page_children {
    float: left;
}

/* 左：扫码登录 */
.page_login {
    width: 433px;
}

.lay_login_form {
    margin: 15px 0 0 30px;
    color: #a0a0a0;
}

.qlogin {
    display: block;
}

#ptlogin_iframe {
    width: 370px;
    height: 322px;
    position: relative;
}

#ptlogin_iframe .title {
    color: #333;
    font-size: 20px;
    margin-bottom: 16px;
    text-align: center;
}

.qlogin_tips {
    color: #666;
    font-size: 16px;
    text-align: center;
    margin-bottom: 36px;
    line-height: 1.5;
}

.qlogin_tips .link_tips {
    color: #1e6fff;
}

.qlogin_list {
    text-align: center;
}

.qlogin_list #qrimg {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border: 1px solid #d3d3d3;
}

.bottom {
    margin-top: 30px;
    text-align: right;
    font-size: 12px;
}

.bottom .link {
    color: #666;
}

.bottom .dotted {
    color: #bfbfbf;
    margin: 0 5px;
}

/* 右：授权范围 */
.page_accredit {
    width: 227px;
    font-size: 13px;
}

.lay_main {
    margin: 22px 0 0;
}

.accredit_info {
    margin-top: 12px;
}

.accredit_info_op li {
    height: 31px;
    display: flex;
    align-items: center;
}

.accredit_info_op .checkbox {
    width: 13px;
    height: 13px;
    margin: 0 5px 0 0;
}

.accredit_info_op .oauth_item_title {
    cursor: pointer;
    color: #666;
}

.accredit_info_op .select_all_li {
    border-top: 1px dotted #e2e2e2;
    border-bottom: 1px dotted #e2e2e2;
}

.oauth_tips_div {
    margin-top: 30px;
}

.oauth_tips {
    font-size: 12px;
    color: #999;
}

.oauth_tips a {
    color: #51b7ec;
}

/* ============================================================
   微信扫码登录卡片
   ============================================================ */
.wx-login-card {
    display: none;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 28px 24px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    text-align: center;
    box-sizing: border-box;
}

.wx-login-card .wx-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2dc100, #1a9e00);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 6px 16px rgba(45, 193, 0, .35);
}

/* 若用图片图标替代 fa-weixin：
.wx-login-card .wx-icon img { width: 30px; height: 30px; }
*/

.wx-login-card .wx-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    line-height: 1.4;
}

.wx-login-card .wx-subtitle {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.6;
    color: #909399;
}

.wx-login-card .qrcode-wrap {
    width: 200px;
    height: 200px;
    margin: 0 auto 14px;
    padding: 8px;
    border: 1px solid #ebeef5;
    border-radius: 12px;
    background: #fafafa;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wx-login-card .qrcode-wrap #qrimg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wx-login-card .tip-text {
    font-size: 13px;
    line-height: 1.6;
    color: #606266;
    margin-bottom: 16px;
}

.wx-login-card .divider {
    height: 1px;
    margin: 0 auto 14px;
    background: #f0f0f0;
}

.wx-login-card .policy {
    font-size: 11px;
    line-height: 1.6;
    color: #a8abb2;
}

.qq-login-page {
    display: none;
}


/* ============================================================
   响应式（合并为两个断点）
   ============================================================ */

/* 平板 / 小屏：QQ 授权页两栏改为上下堆叠 */
@media (max-width: 700px) {
    #combine_page {
        width: auto;
        padding: 0 15px;
    }

    .combine_page_children {
        float: none;
        width: 100% !important;
    }

    .lay_login_form {
        margin: 15px auto;
    }

    #ptlogin_iframe {
        width: 100%;
    }

    .page_accredit {
        margin-top: 20px;
    }
}

/* 手机：兑换卡片、弹窗、微信卡片统一缩小 */
@media (max-width: 480px) {

    /* 兑换卡片 */
    .form-item {
        width: 88%;
    }

    .card-header h1 {
        font-size: 20px;
    }

    .form-control--actions {
        flex-direction: column;
    }

    .form-control--actions .btn {
        width: 100%;
    }

    /* 登录方式弹窗 */
    .login-modal__dialog {
        max-width: 88%;
    }

    .login-modal__body {
        padding: 16px;
    }

    .login-way-item {
        padding: 16px 8px;
    }

    .login-way-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

    /* 微信卡片 */
    .wx-login-card {
        padding: 22px 18px 16px;
        border-radius: 14px;
    }

    .wx-login-card .wx-icon {
        width: 48px;
        height: 48px;
        font-size: 26px;
    }

    .wx-login-card .wx-title {
        font-size: 16px;
    }

    .wx-login-card .qrcode-wrap {
        width: 180px;
        height: 180px;
    }
}

/* ============================================================
   确认登录账号弹窗
   ============================================================ */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    /* 比登录方式弹窗更高，避免被盖 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.confirm-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* 遮罩 */
.confirm-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* 对话框 */
.confirm-modal__dialog {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    overflow: hidden;
    transform: translateY(20px) scale(.96);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.confirm-modal.is-open .confirm-modal__dialog {
    transform: translateY(0) scale(1);
}

/* 头部 */
.confirm-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.confirm-modal__header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #303133;
}

.confirm-modal__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #909399;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: .15s;
}

.confirm-modal__close:hover {
    background: #f5f7fa;
    color: #409eff;
}

/* 内容 */
.confirm-modal__body {
    padding: 20px;
}

.confirm-modal__tip {
    margin: 0 0 16px;
    font-size: 13px;
    color: #909399;
    text-align: center;
}

/* 账号卡片 */
.account-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f7f9fc;
    border-radius: 12px;
    margin-bottom: 20px;
}

.account-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #e4e7ed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.account-info {
    flex: 1;
    min-width: 0;
}

.account-name {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-id {
    font-size: 13px;
    color: #909399;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 操作按钮 */
.confirm-actions {
    display: flex;
    gap: 12px;
}

.confirm-actions .btn {
    flex: 1;
    gap: 6px;
}

/* 错误按钮：红色系 */
.confirm-actions .btn-default[data-confirm="wrong"] {
    color: #f56c6c;
    border-color: #fde2e2;
    background: #fef0f0;
}

.confirm-actions .btn-default[data-confirm="wrong"]:hover {
    color: #fff;
    border-color: #f56c6c;
    background: #f56c6c;
}

/* 移动端 */
@media (max-width: 480px) {
    .confirm-modal__dialog {
        max-width: 88%;
    }

    .confirm-modal__body {
        padding: 16px;
    }

    .account-avatar {
        width: 48px;
        height: 48px;
    }

    .account-name {
        font-size: 15px;
    }

    .confirm-actions {
        flex-direction: column;
    }
}

/* ============================================================
   兑换结果页
   ============================================================ */
.result-container {
    min-height: 100vh;
    padding: 20px;
    background: var(--primary-bg);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    display: none;
}

.redeem-success {
    width: 100%;
    max-width: 800px;
    min-height: 80vh;
    padding: 10px;
    text-align: center;
    background: var(--header-bg);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    box-sizing: border-box;
}

/* ---------- 头部 ---------- */
.result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    color: #fff;
}

.result-header .logo {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--logo-bg);
    border-radius: 50%;
    overflow: hidden;
}

.result-header .logo svg {
    width: 30px;
    height: 30px;
}

.result-header h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 10px 0 5px;
}

.result-header .subtitle {
    margin: 0;
    font-size: 14px;
    opacity: .8;
}

/* ---------- 信息卡片 ---------- */
.info-card {
    margin-bottom: 20px;
    padding: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    border-radius: 8px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.info-item .label {
    flex: 0 0 72px;
    text-align: left;
    font-size: 11px;
    opacity: .8;
}

.info-item .value {
    flex: 1;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    word-break: break-all;
}

.info-item .value--highlight {
    color: #409eff;
}

/* 分割线 */
.info-card .divider {
    height: 1px;
    margin: 12px 0;
    background: rgba(255, 255, 255, .12);
}

/* 充值状态标签 */
.status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: #909399;
    border-radius: 4px;
    white-space: nowrap;
}

.status-tag.is-success {
    background: #67c23a;
}

.status-tag.is-warning {
    background: #e6a23c;
}

.status-tag.is-danger {
    background: #f56c6c;
}

.status-tag.is-info {
    background: #909399;
}

/* ---------- 提示文字 ---------- */
.result-tip {
    color: #aaa;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 20px;
}

/* ---------- 操作按钮 ---------- */
.action-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20%;
}

.action-area .btn {
    flex: none;
    width: 100%;
    padding: 12px 40px;
    height: 46px;
    font-size: 16px;
    letter-spacing: 1px;
}

/* 圆角按钮 */
.btn-round {
    border-radius: 20px;
}

/* 成功色按钮 */
.btn-success {
    color: #fff;
    background: #67c23a;
    border-color: #67c23a;
}

.btn-success:hover {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff;
}

/* ---------- 移动端 ---------- */
@media (max-width: 480px) {
    .redeem-success {
        min-height: auto;
        padding: 10px 6px;
    }

    .info-item .label {
        flex-basis: 64px;
    }

    .action-area {
        padding: 0 8%;
    }

    .action-area .btn {
        font-size: 15px;
        padding: 10px 20px;
    }
}