/* ==================================================
 * 九遥多功能插件 - 前台聚合登录与子比原生样式适配
 * ================================================== */

/* 社交登录按钮规范：纯图标圆钮，适配子比 32px 圆形体系 */
.social-login-item.jiuyao-qq {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto !important;
    height: 32px !important;
    min-width: 32px;
    padding: 0 12px !important;
    border: 0;
    border-radius: 50px;
    margin: 3px 5px;
    background: #121517;
    color: #fff !important;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s ease;
    box-sizing: border-box;
    gap: 5px;
    white-space: nowrap;
}

.social-login-item.jiuyao-qq:hover {
    opacity: .92;
    transform: translateY(-1px);
    background: #050607;
    color: #fff !important;
}

.social-login-item.jiuyao-qq i {
    font-size: 16px;
    color: #fff !important;
    line-height: 1;
}

.social-login-item.jiuyao-qq .jiuyao-qq-btn-text {
    color: #fff !important;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.social_loginbar {
    text-align: left;
}

.jiuyao-qq-social-block {
    width: 100%;
    margin-top: 18px;
    text-align: left;
}

.jiuyao-qq-social-block .social-separator {
    margin: 16px 0 10px;
}

.jiuyao-qq-social-block .social_loginbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
}

.jiuyao-qq-social-compact {
    margin-top: 20px;
}

.jiuyao-qq-social-compact .social-separator {
    margin-top: 0;
}

#u_sign #sign-in > .jiuyao-qq-social-block,
#u_sign #tab-sign-in > .jiuyao-qq-social-block {
    padding: 0 20px 18px;
    box-sizing: border-box;
}

/* 模态框样式：完全采用子比原生变量与纯净布局 */
#jiuyao_login_modal .modal-body {
    padding: 24px 20px;
    text-align: left;
}

#jiuyao_login_modal .jiuyao-tab-navs {
    margin-bottom: 20px;
    justify-content: flex-start;
}

#jiuyao_login_modal .jiuyao-qrcode-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 170px;
}

#jiuyao_login_modal .jiuyao-qrcode-box {
    width: 170px;
    height: 170px;
    padding: 6px;
    background: #fff;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#jiuyao_login_modal .jiuyao-qrcode-box canvas,
#jiuyao_login_modal .jiuyao-qrcode-box img {
    display: block;
    margin: 0 auto;
}


/* 扫码相关按钮统一暗黑色，沿用主题 but + b-black 变量体系 */
.but.b-black {
    --this-color: #fff;
    --this-bg: #121517;
    --this-border: #121517;
}

.but.b-black:hover,
.but.b-black:focus {
    opacity: 1;
    color: #fff;
    --this-bg: #050607;
    --this-border: #050607;
}

.but.hollow.b-black {
    --this-color: #121517;
    --this-bg: #121517;
    --this-border: #121517;
    background: transparent;
}

.but.hollow.b-black:hover,
.but.hollow.b-black:focus {
    color: #fff;
    background: #121517;
}

/* “我的服务 → 扫码授权”独立页面 */
.jiuyao-qr-login-tab {
    text-align: left;
}

.jiuyao-qr-login-tab .box-body {
    padding: 24px 30px;
}

.jiuyao-qr-login-row {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
}

.jiuyao-qr-login-row .type-logo {
    min-width: 138px;
}

.jiuyao-qr-login-row > .muted-2-color {
    flex: 1;
    min-width: 0;
}

.jiuyao-qr-login-row > .flex:last-child {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .jiuyao-qr-login-tab .box-body {
        padding: 20px 16px;
    }

    .jiuyao-qr-login-row {
        flex-wrap: wrap;
    }

    .jiuyao-qr-login-row .type-logo,
    .jiuyao-qr-login-row > .muted-2-color,
    .jiuyao-qr-login-row > .flex:last-child {
        width: 100%;
        min-width: 0;
    }

    .jiuyao-qr-login-row > .flex:last-child {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* 机器人登录验证码独立页与绑定页样式 */
.jiuyao-qq-page {
    max-width: 460px;
    margin: 20px auto;
    padding: 0;
    overflow: hidden;
}

.jiuyao-qq-page .box-body {
    padding: 28px 30px;
}

.jiuyao-qq-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 14px;
    object-fit: cover;
}

.jiuyao-qq-code {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    color: #3492ff;
    background: rgba(52, 146, 255, .08);
    font-family: "Courier New", Courier, monospace;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 8px;
    line-height: 1.2;
    text-indent: 8px;
}

.jiuyao-qq-cmd {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.jiuyao-qq-cmd code {
    padding: 0;
    color: #3492ff;
    background: transparent;
    font-weight: 700;
}

.jiuyao-qq-status {
    min-height: 22px;
    color: var(--muted-color, #909399);
    font-size: 14px;
}

.jiuyao-qq-status .jiuyao-status-success {
    color: #46b450;
    font-weight: 600;
}

.jiuyao-qq-status .jiuyao-status-expired {
    color: #dc3232;
}

.jiuyao-qq-status .spot-loader {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #3492ff;
    vertical-align: middle;
    animation: jiuyaoQQBlink 1s infinite ease-in-out;
}

.jiuyao-qq-page .muted-box .flex + .flex {
    margin-top: 8px;
}

.jiuyao-qq-page .muted-box .flex span:first-child {
    color: var(--muted-color, #909399);
}

.jiuyao-qq-bind-box .muted-box {
    gap: 12px;
}

.jiuyao-qq-bind-box .type-logo {
    min-width: 112px;
}

.jiuyao-qq-bind-box .social-login-item.jiuyao-qq {
    margin-left: 0;
}

.jiuyao-qq-bind-desc {
    flex: 1;
    min-width: 0;
    text-align: center;
}

@keyframes jiuyaoQQBlink {
    0%, 100% {
        opacity: .3;
        transform: scale(.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@media (max-width: 480px) {
    .jiuyao-qq-page {
        margin: 12px 0;
    }

    .jiuyao-qq-page .box-body {
        padding: 24px 18px;
    }

    .jiuyao-qq-code {
        padding: 11px 16px;
        font-size: 28px;
        letter-spacing: 6px;
        text-indent: 6px;
    }

    .jiuyao-qq-cmd {
        padding: 8px 12px;
        font-size: 13px;
        word-break: break-all;
    }

    #u_sign #sign-in > .jiuyao-qq-social-block,
    #u_sign #tab-sign-in > .jiuyao-qq-social-block {
        padding: 0 12px 14px;
    }

    .user-center-content .jiuyao-qq-social-block {
        margin-top: 16px;
    }

    .jiuyao-qq-bind-box .muted-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
        padding: 13px 14px;
    }

    .jiuyao-qq-bind-box .type-logo {
        min-width: 0;
    }

    .jiuyao-qq-bind-desc {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
    }

    .jiuyao-qq-bind-box .shrink0 {
        grid-column: 2;
        grid-row: 1;
    }
}

.dark-theme .jiuyao-qq-code,
body.dark-theme .jiuyao-qq-code {
    background: rgba(52, 146, 255, .15);
}


/* 验证码登录与 QQ 机器人绑定页：统一卡片式排版 */
.jiuyao-qq-page{max-width:620px;margin:24px auto;}
.jiuyao-qq-page .jiuyao-qq-panel{padding:28px 30px;text-align:left;}
.jiuyao-qq-page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;text-align:left;}
.jiuyao-qq-page .jiuyao-qq-logo{flex:0 0 52px;width:52px;height:52px;margin:0;border-radius:14px;}
.jiuyao-qq-page-copy{flex:1;min-width:0;}
.jiuyao-qq-page-copy .title-h-left{margin-bottom:4px;}
.jiuyao-qq-code-card,.jiuyao-qq-guide-card{padding:18px;border:1px solid var(--main-border,#e7e7e7);border-radius:10px;background:var(--muted-bg-color,#f7f8fa);margin-bottom:16px;}
.jiuyao-qq-field-label{margin-bottom:9px;color:var(--muted-color,#8a8f99);font-size:12px;font-weight:600;}
.jiuyao-qq-page .jiuyao-qq-code{display:block;padding:0;color:#121517;background:transparent;font-family:"Courier New",Courier,monospace;font-size:34px;font-weight:700;letter-spacing:8px;line-height:1.25;}
.jiuyao-qq-expire-line{margin-top:7px;}
.jiuyao-qq-command-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--main-border,#e3e5e8);}
.jiuyao-qq-command-line:last-of-type{border-bottom:0;}
.jiuyao-qq-command-line span{color:var(--muted-color,#8a8f99);font-size:12px;}
.jiuyao-qq-command-line code{padding:3px 8px;border-radius:6px;color:#fff;background:#121517;font-size:13px;font-weight:700;}
.jiuyao-qq-guide-tip{margin-top:9px;line-height:1.7;}
.jiuyao-qq-current-bind{display:flex;align-items:center;gap:11px;padding:14px 16px;text-align:left;}
.jiuyao-qq-current-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:#121517;color:#fff;font-size:17px;}
.jiuyao-qq-current-copy{min-width:0;}
.jiuyao-qq-login-tip{padding:12px 14px;border-radius:9px;background:var(--muted-bg-color,#f7f8fa);color:var(--muted-color,#8a8f99);font-size:13px;text-align:left;}
.jiuyao-qq-page .jiuyao-qq-status{text-align:left;line-height:1.7;}
@media(max-width:640px){.jiuyao-qq-page{margin:12px 0;}.jiuyao-qq-page .jiuyao-qq-panel{padding:22px 18px;}.jiuyao-qq-page-head{gap:11px;}.jiuyao-qq-page .jiuyao-qq-logo{flex-basis:46px;width:46px;height:46px;border-radius:12px;}.jiuyao-qq-page .jiuyao-qq-code{font-size:28px;letter-spacing:6px;}.jiuyao-qq-command-line{align-items:flex-start;flex-direction:column;gap:6px;}}


/* v2.0.7：精致简约的 QQ 机器人绑定页 */
.jiuyao-qq-page{max-width:600px;margin:0 auto;}
.jiuyao-qq-page .jiuyao-qq-panel{padding:32px;box-shadow:0 14px 40px rgba(18,21,23,.055);}
.jiuyao-qq-page-head{align-items:center;gap:16px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--main-border,#ececec);}
.jiuyao-qq-page .jiuyao-qq-logo{flex:0 0 50px;width:50px;height:50px;border:1px solid var(--main-border,#ececec);box-shadow:0 5px 16px rgba(18,21,23,.045);}
.jiuyao-qq-page-copy .title-h-left b{font-size:20px;letter-spacing:.2px;}
.jiuyao-qq-page-copy>.muted-2-color{max-width:500px;line-height:1.75;}
.jiuyao-qq-code-card{position:relative;overflow:hidden;padding:24px;border:1px solid var(--main-border,#e7e7e7);border-radius:14px;background:linear-gradient(135deg,var(--main-bg-color,#fff) 0%,var(--muted-bg-color,#f7f8fa) 100%);box-shadow:0 10px 30px rgba(18,21,23,.045);}
.jiuyao-qq-code-card::before{position:absolute;top:0;left:0;width:100%;height:3px;background:#121517;content:"";}
.jiuyao-qq-page .jiuyao-qq-field-label{margin-bottom:12px;letter-spacing:.4px;text-transform:uppercase;}
.jiuyao-qq-page .jiuyao-qq-code{font-size:38px;letter-spacing:10px;color:#121517;}
.jiuyao-qq-expire-line{margin-top:10px;}
.jiuyao-qq-current-bind{padding:13px 15px;border:1px solid var(--main-border,#ececec);border-radius:12px;background:var(--main-bg-color,#fff);}
.jiuyao-qq-guide-tip{margin-bottom:16px;padding-left:12px;border-left:3px solid #121517;line-height:1.75;}
.jiuyao-qq-page .jiuyao-qq-status{margin-bottom:18px!important;padding:12px 14px;border-radius:10px;background:var(--muted-bg-color,#f7f8fa);font-size:13px;}
.jiuyao-qq-page .jiuyao-qq-refresh{min-width:132px;}
@media(max-width:640px){.jiuyao-qq-page{margin:12px 0;}.jiuyao-qq-page .jiuyao-qq-panel{padding:22px 18px;}.jiuyao-qq-page-head{align-items:flex-start;}.jiuyao-qq-page-copy .title-h-left b{font-size:18px;}.jiuyao-qq-code-card{padding:20px 16px;}.jiuyao-qq-page .jiuyao-qq-code{font-size:30px;letter-spacing:7px;}.jiuyao-qq-page .jiuyao-qq-refresh{width:100%;}}

.jiuyao-qq-page .jiuyao-qq-code{font-size:26px;letter-spacing:6px;line-height:1.35;}
@media(max-width:640px){.jiuyao-qq-page .jiuyao-qq-code{font-size:22px;letter-spacing:4px;}}

/* v2.0.10：绑定/换绑页面主内容与隐私设置组合布局 */
.jiuyao-qq-page{max-width:680px;}
.jiuyao-qq-bind-main-content{max-width:560px;margin:0 auto;}
.jiuyao-bind-privacy-section{margin-top:32px;padding-top:32px;border-top:1px solid var(--main-border,#ececec);}
.jiuyao-bind-privacy-section .jiuyao-privacy-container{padding:0;}


/* v2.0.11：绑定 / 换绑与登录页科技风 */
.jiuyao-qq-page.jiuyao-tech-page{max-width:1000px;margin:32px auto;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;}
.jiuyao-tech-topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px;border-radius:18px 18px 0 0;background:linear-gradient(135deg,#0f172a 0%,#162033 70%,#1e293b 100%);color:#fff;}
.jiuyao-tech-brand{display:flex;align-items:center;gap:15px;min-width:0;}
.jiuyao-tech-logo{width:52px;height:52px;flex:0 0 52px;border:1px solid rgba(255,255,255,.18);border-radius:15px;object-fit:cover;}
.jiuyao-tech-brand h2{margin:2px 0 5px;color:#fff;font-size:23px;font-weight:700;letter-spacing:.2px;}
.jiuyao-tech-brand p{margin:0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.6;}
.jiuyao-tech-eyebrow{color:#8ab4ff;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;}
.jiuyao-tech-status{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:600;}
.jiuyao-tech-status i{width:6px;height:6px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.13);}
.jiuyao-tech-status.is-success i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.14);}
.jiuyao-tech-status.is-warning i{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.14);}
.jiuyao-tech-grid{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.35fr);gap:20px;align-items:start;margin-top:20px;}
.jiuyao-tech-grid.no-aside{grid-template-columns:minmax(0,600px);justify-content:center;}
.jiuyao-tech-card{padding:26px;border:1px solid rgba(15,23,42,.09);border-radius:18px;background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.06);}
.jiuyao-tech-login-page .jiuyao-tech-card{max-width:600px;margin:20px auto 0;}
.jiuyao-tech-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid rgba(15,23,42,.08);}
.jiuyao-tech-card-head h3{margin:0 0 5px;color:#0f172a;font-size:17px;}
.jiuyao-tech-card-head p{margin:0;color:#64748b;font-size:12px;line-height:1.6;}
.jiuyao-tech-step{padding:4px 9px;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:700;letter-spacing:.8px;}
.jiuyao-tech-status-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;padding:13px 15px;border:1px solid rgba(15,23,42,.08);border-radius:12px;background:#f8fafc;color:#475569;font-size:12px;}
.jiuyao-tech-pill{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;}
.jiuyao-tech-pill.is-success{background:rgba(34,197,94,.1);color:#15803d;}
.jiuyao-tech-pill.is-warning{background:rgba(245,158,11,.12);color:#b45309;}
.jiuyao-tech-code-panel{position:relative;overflow:hidden;padding:22px;border-radius:16px;background:linear-gradient(145deg,#0f172a 0%,#182235 100%);color:#fff;}
.jiuyao-tech-code-panel::before{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#60a5fa,#22d3ee,transparent);content:"";}
.jiuyao-tech-code-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;color:rgba(255,255,255,.58);font-size:11px;letter-spacing:.4px;}
.jiuyao-tech-code-meta b{color:#fff;font-weight:600;}
.jiuyao-tech-code-panel .jiuyao-qq-code{margin:18px 0 14px;color:#fff;font-size:26px;font-weight:700;letter-spacing:6px;line-height:1.3;}
.jiuyao-tech-guide{color:rgba(255,255,255,.68);font-size:12px;line-height:1.7;}
.jiuyao-tech-code-panel .jiuyao-qq-status{min-height:22px;margin:14px 0;color:rgba(255,255,255,.68);font-size:12px;}
.jiuyao-tech-code-panel .spot-loader{background:#60a5fa;}
.jiuyao-tech-code-panel .jiuyao-qq-refresh{background:#fff!important;color:#0f172a!important;border-color:#fff!important;}
.jiuyao-tech-code-panel .jiuyao-qq-refresh:hover{background:#e2e8f0!important;border-color:#e2e8f0!important;}
.jiuyao-tech-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;}
.jiuyao-tech-empty{max-width:520px;margin:0 auto;padding:26px 0;text-align:left;}
.jiuyao-tech-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:16px;border-radius:15px;background:#0f172a;color:#fff;font-size:20px;}
.jiuyao-tech-empty h3{margin:0 0 8px;color:#0f172a;font-size:18px;}
.jiuyao-tech-empty p{margin:0 0 20px;color:#64748b;font-size:13px;line-height:1.7;}
.jiuyao-tech-note{display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:12px;background:#f8fafc;color:#64748b;font-size:12px;}
.jiuyao-tech-account-row{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:#f8fafc;}
.jiuyao-tech-account-copy{display:flex;min-width:0;flex:1;flex-direction:column;}
.jiuyao-tech-account-copy strong{color:#0f172a;font-size:14px;}
.jiuyao-tech-account-copy span{margin-top:2px;color:#64748b;font-size:11px;}
.jiuyao-tech-logo-icon{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:20px;}
@media(max-width:860px){.jiuyao-tech-grid{grid-template-columns:1fr;}.jiuyao-tech-grid.no-aside{grid-template-columns:1fr;}}
@media(max-width:640px){.jiuyao-qq-page.jiuyao-tech-page{margin:12px 0;}.jiuyao-tech-topbar{align-items:flex-start;flex-direction:column;padding:22px 18px;border-radius:14px 14px 0 0;}.jiuyao-tech-brand h2{font-size:20px;}.jiuyao-tech-logo{width:46px;height:46px;flex-basis:46px;border-radius:13px;}.jiuyao-tech-card{padding:20px 16px;border-radius:14px;}.jiuyao-tech-code-panel{padding:18px 15px;}.jiuyao-tech-code-panel .jiuyao-qq-code{font-size:22px;letter-spacing:4px;}.jiuyao-tech-actions .but{flex:1 1 100%;text-align:center;}}