.login-page { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: #f3f6fb; }
.login-card { width: min(100%, 440px); padding: 36px; border: 1px solid #dfe6ef; border-radius: 16px; background: white; box-shadow: 0 16px 50px #2033510a; }
.login-card .brand { margin-bottom: 36px; color: #172a42; }
.login-card h1 { font-size: 26px; margin-bottom: 10px; }
.login-intro, .login-help { color: #66758b; font-size: 13px; line-height: 1.6; }
.login-intro { margin-bottom: 28px; }
.login-help { margin: 26px 0 0; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.auth-form input { width: 100%; min-width: 0; padding: 12px; border: 1px solid #ccd6e4; border-radius: 7px; font: inherit; }
.auth-form small { color: #66758b; }
.password-field { display: grid; gap: 8px; }
.password-input { position: relative; }
.password-input input { padding-right: 48px; }
.password-toggle { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 42px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #66758b; }
.password-toggle:hover { background: #edf2fa; color: #3566dc; }
.password-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .eye-slash { display: none; }
.password-toggle[aria-pressed=true] .eye-slash { display: block; }
.auth-form .button, .gitlab-button { min-height: 44px; justify-content: center; text-align: center; text-decoration: none; }
.auth-divider { display: flex; align-items: center; gap: 14px; color: #738198; font-size: 12px; margin: 22px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid #e1e7ef; }
.gitlab-button { display: flex; width: 100%; }
.auth-error { color: #b73535; font-size: 13px; line-height: 1.5; margin: 0; }
.account-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.account-bar .text-button { margin: 0; }
#users-dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #dfe6ef; border-radius: 12px; padding: 26px; color: #172a42; }
#users-dialog::backdrop { background: #14243880; }
#users-dialog .section-heading { align-items: center; }
#users-dialog .auth-form { margin-top: 20px; }
#users-message { margin: 16px 0; font-size: 13px; }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #e1e7ef; font-size: 13px; }
.user-row span { overflow-wrap: anywhere; min-width: 0; }
.user-row small { display: block; color: #66758b; margin-top: 4px; }
.user-row button { flex-shrink: 0; }
@media (max-width: 600px) { .login-card { padding: 26px; } .topbar { height: auto; min-height: 70px; gap: 12px; flex-wrap: wrap; padding: 16px; } .account-bar { gap: 12px; } }