/* ============================================================
   用户端登录弹窗 & 右上角登录态 样式
   说明：所有弹窗样式都限定在 .api-login-overlay 内，避免与
   页面其它 .form-control / .btn-* 等类名冲突。
   ============================================================ */

/* 登录弹窗遮罩（在当前页面内生成，不跳转新页面） */
.api-login-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}
.api-login-overlay.show { display: flex; }

.api-login-overlay .login-card {
    width: 400px;
    max-height: 94vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    padding: 22px 30px 14px;
    position: relative;
}
.api-login-overlay .login-close {
    position: absolute;
    top: 14px; right: 16px;
    font-size: 20px;
    line-height: 1;
    color: #bbb;
    cursor: pointer;
    border: none;
    background: none;
}
.api-login-overlay .login-close:hover { color: #999; }

.api-login-overlay .login-header { text-align: center; margin-bottom: 14px; }
.api-login-overlay .login-header h2 { font-size: 22px; color: #1D2129; font-weight: 600; margin: 0 0 6px; }
.api-login-overlay .login-header p { font-size: 13px; color: #86909C; margin: 0; }

/* 登录按钮下方的免费注册链接 */
.api-login-overlay .btn-link-register {
    width: 100%;
    margin-top: 14px;
    padding: 8px;
    background: none;
    border: none;
    font-size: 14px;
    color: var(--brand);
    cursor: pointer;
    text-align: center;
    transition: color .2s;
}
.api-login-overlay .btn-link-register:hover { color: var(--brand-hover); text-decoration: underline; }

.api-login-overlay .form-group { margin-bottom: 9px; }
.api-login-overlay .form-group label {
    font-size: 14px; color: #333; font-weight: 500; margin-bottom: 4px; display: block;
}
.api-login-overlay .form-control {
    width: 100%;
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #E5E6EB;
    box-sizing: border-box;
    transition: border-color .2s;
}
.api-login-overlay .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(91, 108, 249, .12);
    outline: none;
}
.api-login-overlay .captcha-row { display: flex; gap: 10px; align-items: center; }
.api-login-overlay .captcha-row .form-control { flex: 1; }
.api-login-overlay .captcha-row img {
    height: 46px; width: 140px; border-radius: 8px; cursor: pointer; border: 1px solid #E5E6EB;
}
.api-login-overlay .btn-login {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(91, 108, 249, .22);
    transition: transform .2s, box-shadow .2s, background .2s;
    margin-top: 14px;
    cursor: pointer;
}
.api-login-overlay .btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(91, 108, 249, .32); }
.api-login-overlay .btn-login:disabled { background: #B9BEF7; box-shadow: none; cursor: not-allowed; }
.api-login-overlay .btn-reset {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #E5E6EB;
    border-radius: var(--radius-sm);
    color: #4E5969;
    margin-top: 8px;
    transition: all .2s;
    cursor: pointer;
}
.api-login-overlay .btn-reset:hover { border-color: var(--brand); color: var(--brand); }
/* 注册按钮吸底：表单较长需滚动时，注册/返回按钮始终固定在弹窗底部可见，
   避免用户填完信息才发现要下拉才能看到“注册”按钮 */
.api-login-overlay .reg-actions {
    position: sticky;
    bottom: 0;               /* 吸在弹窗内容区底部，滚动时注册按钮始终可见 */
    z-index: 5;
    margin: 12px -30px 0;    /* 左右铺满卡片内边距，背景遮住滚动内容 */
    padding: 12px 30px 22px;
    background: #fff;
    border-top: 1px solid #F2F3F5;
    box-shadow: 0 -6px 14px rgba(255, 255, 255, .95); /* 与上方滚动内容柔和分隔 */
}
.api-login-overlay .reg-actions .btn-login { margin-top: 0; }
.api-login-overlay .reg-actions .btn-reset { margin-top: 8px; }
/* 密码 + 确认密码 并排，减少一行高度，使注册表单尽量一屏展示 */
.api-login-overlay .form-row { display: flex; gap: 12px; }
.api-login-overlay .form-row .form-group { flex: 1; min-width: 0; margin-bottom: 9px; }
/* 注册按钮上方提示：注册即自动登录 */
.api-login-overlay .reg-tip {
    font-size: 12px; color: #86909C; text-align: center; margin: 0 0 10px; line-height: 1.5;
}
.api-login-overlay .reg-tip strong { color: #00B42A; }
.api-login-overlay .alert-msg {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: none;
}
.api-login-overlay .alert-msg.error { display: block; background: #FFEBE8; border: 1px solid #FFB4AB; color: #F53F3F; }
.api-login-overlay .alert-msg.success { display: block; background: #E8FFEA; border: 1px solid #AFF0B5; color: #00B42A; }

/* 右上角用户区 · 高级胶囊徽章 */
.top-nav .user-info { gap: 10px; }

/* 基础胶囊 */
.ubadge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    transition: all .18s ease;
}
/* 游客 / 登录 胶囊：浅品牌渐变底 */
.ubadge.guest {
    background: linear-gradient(135deg, var(--brand-lighter) 0%, var(--brand-light) 100%);
    color: var(--brand);
    border: 1px solid rgba(91,108,249,.18);
    box-shadow: 0 1px 2px rgba(91,108,249,.08);
}
.ubadge.guest:hover {
    background: linear-gradient(135deg, var(--brand-light) 0%, #dfe3ff 100%);
    color: var(--brand-active);
    box-shadow: 0 3px 10px rgba(91,108,249,.18);
}
/* 已登录胶囊：白底细边 + 轻阴影 */
.ubadge.user {
    background: #fff;
    color: var(--text-1);
    border: 1px solid var(--divider);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ubadge.user:hover {
    border-color: var(--brand);
    box-shadow: 0 3px 12px rgba(91,108,249,.12);
}
/* 头像圆点（首字母 / 图标） */
.ub-dot {
    width: 21px; height: 21px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
    flex-shrink: 0;
    letter-spacing: 0;
}
.ub-ico { font-size: 13px; line-height: 1; }
.ub-name { letter-spacing: .01em; }
.ub-out {
    margin-left: 1px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-3);
    background: var(--bg-hover-strong);
    text-decoration: none;
    transition: all .15s ease;
}
.ub-out:hover { color: #fff; background: var(--brand); }

/* 旧类兼容（其它页面裸用时的兜底） */
.api-login-link { color: var(--brand); text-decoration: none; cursor: pointer; }
.api-login-link:hover { color: var(--brand-hover); }
.api-uname { font-size: 14px; color: var(--text-1); }
.api-logout-link { color: var(--text-3); text-decoration: none; font-size: 13px; }
.api-logout-link:hover { color: var(--brand); }

/* ============================================================
   移动端适配（≤768px）：登录/注册弹窗在窄屏占满、留白收敛
   ============================================================ */
@media (max-width: 768px) {
    .api-login-overlay .login-card {
        width: auto;
        max-width: calc(100vw - 20px);
        max-height: 92vh;
        padding: 18px 18px 10px;
    }
    /* 注册按钮吸底区左右铺满，跟随卡片内边距变化 */
    .api-login-overlay .reg-actions {
        margin: 12px -18px 0;
        padding: 12px 18px 16px;
    }
    .api-login-overlay .login-header h2 { font-size: 20px; }
    .api-login-overlay .form-control { font-size: 16px; padding: 11px 12px; }  /* 16px 避免 iOS 聚焦缩放 */
    .api-login-overlay .btn-login { padding: 12px; font-size: 16px; }
    .api-login-overlay .captcha-row img { height: 48px; width: 120px; }
    /* 密码并排改为纵向，避免窄屏过挤 */
    .api-login-overlay .form-row { flex-direction: column; gap: 0; }
}

/* ============================================================
   滑块（拉动滑动条）验证码 样式
   作用域限定在 .slider-captcha，避免与页面其它元素冲突
   ============================================================ */
.slider-captcha { user-select: none; -webkit-user-select: none; }
.slider-captcha .sc-track {
    position: relative;
    height: 44px;
    background: #f2f3f5;
    border: 1px solid #E5E6EB;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}
.slider-captcha .sc-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 44px;
    background: #E2E5FF;
    border-right: 1px solid #B9BEF7;
}
.slider-captcha .sc-text {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #86909C;
    pointer-events: none;
}
.slider-captcha .sc-knob {
    position: absolute;
    left: 0; top: 0;
    width: 44px; height: 44px;
    background: #fff;
    border: 1px solid #E5E6EB;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    color: var(--brand);
    font-size: 18px; font-weight: 700;
    z-index: 2;
    touch-action: none;
    box-sizing: border-box;
}
.slider-captcha .sc-knob:active { cursor: grabbing; }
.slider-captcha .sc-knob .sc-arrow { line-height: 1; transform: translateY(-1px); }
.slider-captcha.sc-success .sc-track { background: #E8FFEA; border-color: #B7EB8F; }
.slider-captcha.sc-success .sc-fill { background: #95DE64; border-right-color: #52C41A; }
.slider-captcha.sc-success .sc-knob { background: #52C41A; color: #fff; border-color: #52C41A; }
.slider-captcha.sc-success .sc-text { color: #389E0D; }
.slider-captcha.sc-fail .sc-track { background: #FFF1F0; border-color: #FFCCC7; }
.slider-captcha.sc-fail .sc-text { color: #F5222D; }
.slider-captcha.sc-loading .sc-knob { cursor: default; }