.login-scene { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-width: 0; }
.login-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.login-overlay { position: absolute; inset: 0; background: #000; opacity: var(--login-overlay, .4); z-index: -1; }
.login-scene [hidden] { display: none; }
.login-scene[data-position=left] { justify-content: flex-start; }
.login-scene[data-position=right] { justify-content: flex-end; }
.login-branding-header { text-align: center; }
.login-branding-header .auth-brand-logo { object-position: center; margin: 0 auto 16px; }
.login-branding-header h1 { margin-bottom: 16px; }
.login-branding-header .login-slogan { font-size: 13px; margin-bottom: 22px; }
.branding-login-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; }
.branding-login-settings, .branding-login-preview { min-width: 0; display: grid; align-content: start; gap: 22px; }
.branding-login-settings h4 { font-size: 14px; margin: 0 0 10px; }
.branding-workspace .branding-login-upload .branding-upload { min-height: 170px; gap: 10px; }
.branding-upload .branding-upload-icon { width: 24px; height: 24px; }
.branding-file-button { padding: 10px 20px; background: #eef2ff; border: 1px solid #e2e8ff; border-radius: 6px; font-size: 12px; }
.branding-overlay-control { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.branding-overlay-control input[type=range] { padding: 0; accent-color: var(--lkw-primary, #2563eb); min-width: 0; }
.branding-overlay-control output { flex: 0 0 65px; padding: 8px; background: #f5f7fd; text-align: center; border-radius: 6px; font-size: 12px; font-weight: 600; }
.branding-position { padding: 0; border: 0; margin: 0; min-width: 0; }
.branding-position legend { margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.branding-position > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.branding-workspace .branding-position label { position: relative; place-items: center; padding: 15px 8px; gap: 10px; border: 1px solid #dbe2f3; border-radius: 6px; font-size: 12px; cursor: pointer; }
.branding-position img { width: 22px; height: 22px; }
.branding-workspace .branding-position input[type=radio] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.branding-position label:has(:checked) { border-color: #2563eb; background: #eef4ff; }
.branding-position label:focus-within { outline: 2px solid #2563eb; outline-offset: 2px; }
.login-preview-scene { min-height: 500px; padding: 30px; background: #edf2fa; border: 1px solid #dfe5f2; border-radius: 6px; overflow: hidden; }
.login-preview-card { width: min(100%, 300px); padding: 28px 24px; border-radius: 8px; }
.login-preview-card h1 { font-size: 26px; }
.login-preview-card .auth-brand-logo { width: 200px; height: 60px; }
.login-preview-form { display: grid; gap: 12px; font-size: 11px; }
.login-preview-form > div { border: 1px solid #dfe5f2; border-radius: 6px; padding: 10px; color: #6b7280; }
.login-preview-form .btn { margin-top: 8px; border-radius: 6px; }
@media (max-width: 1180px) { .branding-login-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .auth-page.login-scene { justify-content: center; padding: 20px; } .login-preview-scene { padding: 16px; min-height: 420px; } .login-preview-card { padding: 24px 16px; } }