/* pages/account.css — Views/Account/*.cshtml, Views/OAuth/Login.cshtml
 * .login-box is the account-flow variant of the shared .oauth-login-box card
 * (components.css); the SSO/Bluesky styles here are specific to Login.cshtml. */

.login-box {
    max-width: 380px;
    margin: var(--sp-7) auto;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.sso-section, .bluesky-section { margin-bottom: var(--sp-3); }
.btn-sso {
    display: block;
    text-align: center;
    padding: .7rem var(--sp-4);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}
.btn-authentik { background: #fd4b2d; color: #fff; text-decoration: none; }
.btn-authentik:hover { background: #e03e22; }
.btn-bluesky { background: #0085ff; color: #fff; list-style: none; }
.btn-bluesky:hover { background: #0070d9; }
.not-configured { color: var(--text-muted); text-align: center; font-size: var(--fs-sm); }

details.bluesky-section summary { margin-bottom: 0; }
details.bluesky-section[open] summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.handle-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: .6rem;
    background: var(--info-bg);
    border: 1px solid #0085ff;
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.handle-form input { padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .95rem; }
.handle-form button { padding: .45rem .8rem; background: #0085ff; color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; font-family: var(--font-body); }
.handle-hint { font-size: var(--fs-sm); color: var(--text-muted); margin: .25rem 0 0; padding: 0 .6rem; }

.divider { text-align: center; margin: var(--sp-4) 0; color: var(--text-muted); position: relative; font-size: var(--fs-sm); }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 44%; height: 1px; background: var(--border); }
.divider::before { left: 0; }
.divider::after { right: 0; }

.form-check { display: flex; align-items: center; gap: var(--sp-2); }