/* 登录/注册 · 白底蓝调 */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: linear-gradient(160deg, #eaf1ff 0%, #f5f7fb 55%, #eef3ff 100%);
    position: relative;
    overflow: hidden;
}

.auth-wrapper::before,
.auth-wrapper::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(8px);
    opacity: .5;
}
.auth-wrapper::before { background: #6ea8ff; left: -110px; top: -110px; }
.auth-wrapper::after { background: #2b6cff; right: -110px; bottom: -110px; animation-delay: -8s; }

.auth-card {
    width: 100%;
    max-width: 440px;
    border-radius: 18px;
    padding: 28px;
    border: 1px solid #e6eaf2;
    color: #1f2733;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(31, 45, 70, .12);
    position: relative;
    z-index: 1;
}

.brand-badge .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #9cc0ff, #2b6cff);
    box-shadow: 0 0 12px #2b6cff;
}

.auth-title {
    color: #1b4fd8;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 4px 0 8px;
    text-align: center;
}

.auth-subtitle { color: #5a6577; margin-bottom: 18px; }

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    background-color: #ffffff;
    border: 1px solid #d8deea;
    color: #1f2733;
}

.form-floating > label { color: #8a93a6; }

.form-control:focus {
    border-color: #2b6cff;
    box-shadow: 0 0 0 .25rem rgba(43, 108, 255, .18);
    background-color: #ffffff;
    color: #1f2733;
}

.btn-gradient {
    --g1: #2b6cff;
    --g2: #1b4fd8;
    background-image: linear-gradient(135deg, var(--g1), var(--g2));
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(43, 108, 255, .28);
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-gradient:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(43, 108, 255, .34);
}

.btn-ghost {
    border-radius: 12px;
    border: 1px dashed #c2cddd;
    color: #2b6cff;
    background: transparent;
}
.btn-ghost:hover { color: #1b4fd8; border-color: #2b6cff; }

.form-check-input {
    background-color: #ffffff;
    border: 1px solid #c2cddd;
}
.form-check-input:checked { background-color: #2b6cff; border-color: #2b6cff; }

.divider {
    position: relative;
    text-align: center;
    margin: 18px 0;
    color: #97a1b3;
}
.divider::before,
.divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.45), rgba(148,163,184,0));
}
.divider::before { left: 0; }
.divider::after { right: 0; }

.text-link { color: #2b6cff; text-decoration: none; }
.text-link:hover { color: #1b4fd8; text-decoration: underline; }

.input-icon-end { position: relative; }
.input-icon-end .toggle-pass {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    cursor: pointer; opacity: .8;
}

@media (max-width: 576px) {
    .auth-card { padding: 22px; }
}

.brand-header { margin-bottom: 2rem; text-align: center; }
.brand-logo {
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.brand-icon {
    width: 64px; height: 64px; border-radius: 12px;
    box-shadow: 0 4px 16px rgba(43, 108, 255, .3);
    transition: transform .3s ease, box-shadow .3s ease;
}
.brand-icon:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(43, 108, 255, .4); }

.form-check {
    padding: 0; margin: 0; color: #5a6577;
    display: flex; align-items: center; gap: 4px;
}
.form-check input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; border: 2px solid rgba(43,108,255,.4);
    border-radius: 4px; background: #fff; cursor: pointer;
    position: relative; transition: all .2s ease; box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.form-check input[type="checkbox"]:hover { border-color: rgba(43,108,255,.6); box-shadow: 0 2px 8px rgba(43,108,255,.18); }
.form-check input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #2b6cff, #1b4fd8); border-color: #2b6cff; box-shadow: 0 2px 8px rgba(43,108,255,.3);
}
.form-check input[type="checkbox"]:checked::after {
    content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font-size: 12px; font-weight: bold; line-height: 1;
}
.form-check label { cursor: pointer; user-select: none; font-size: .9rem; font-weight: 500; transition: color .2s ease; }
.form-check label:hover { color: #2b6cff; }

.image-code, .prompt-image-code {
    border: 1px solid rgba(31,45,70,.12); border-radius: 10px; margin-left: -15px;
    cursor: pointer; height: 48px; background: #fff; padding: 2px 6px;
}

a { text-decoration: none; }

/* 通行密钥登录：次要操作 */
.btn-passkey {
    --bs-btn-color: #2b3550;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #c2cddd;
    --bs-btn-hover-color: #1b4fd8;
    --bs-btn-hover-bg: #f0f5ff;
    --bs-btn-hover-border-color: #2b6cff;
    --bs-btn-active-color: #1b4fd8;
    --bs-btn-active-bg: #e6eeff;
    --bs-btn-active-border-color: #2b6cff;
    --bs-btn-disabled-color: #5a6577;
    --bs-btn-disabled-bg: #ffffff;
    --bs-btn-disabled-border-color: #c2cddd;
    --bs-btn-disabled-opacity: .75;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(43,108,255,.2);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 8px 16px; border-radius: 12px; font-size: 15px; font-weight: 600;
    letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.btn-passkey:hover { box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(43,108,255,.12); transform: translateY(-1px); }
.btn-passkey:active { transform: none; }
.btn-passkey__badge {
    width: 28px; height: 28px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; background-image: linear-gradient(135deg, #2b6cff, #1b4fd8);
    box-shadow: 0 3px 10px rgba(43,108,255,.3); transition: box-shadow .2s ease;
}
.btn-passkey:hover .btn-passkey__badge { box-shadow: 0 4px 14px rgba(43,108,255,.42); }
.btn-passkey__icon { width: 17px; height: 17px; }
.btn-passkey.is-busy .btn-passkey__badge { animation: passkey-pulse 1s ease-in-out infinite; }
@keyframes passkey-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .btn-passkey, .btn-passkey:hover { transition: none; transform: none; }
    .btn-passkey.is-busy .btn-passkey__badge { animation: none; }
}