.dense-ui .auth-layout.fixed { background-color: transparent; }
.has-custom-login-background :is(.dense-ui,.portal-minimal) .auth-layout {
  background: linear-gradient(45deg, rgb(0 0 0 / 80%), rgb(0 0 0 / 0%)), var(--login-background-image) !important;
  background-size: cover !important; background-position: center !important;
  background-repeat: no-repeat !important; max-width: none; min-height: 100dvh;
}
.has-custom-login-background :is(.dense-ui,.portal-minimal) .auth-story {
  background: #fff0; color: #ffffff; border: 0;
  border-radius: 12px; padding: 36px; min-height: 440px;
}
.has-custom-login-background :is(.dense-ui,.portal-minimal) .auth-story :is(h2,p,.auth-story-brand,.auth-story-footer,.auth-story-services) { color: #ffffff; }
.has-custom-login-background :is(.dense-ui,.portal-minimal) .auth-story .auth-story-services :is(span,iconify-icon) { color: #ffffff; }
.has-custom-login-background :is(.dense-ui,.portal-minimal) .auth-story::after { display: none; }
.has-custom-login-background :is(.dense-ui,.portal-minimal) .auth-card { background: #ffffff; }
.login-background-settings { padding: 28px; border: 1px solid var(--ui-line); border-radius: 12px; background: #ffffff; }
.login-background-settings h3 { font-size: 22px; font-weight: 600; }
.login-background-settings p { font-size: 13px; color: var(--ui-secondary); margin-top: 8px; }
.login-background-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-block: 24px; }
.login-background-grid h4 { font-weight: 600; margin-bottom: 12px; }
.login-background-preview { height: 180px; border: 1px solid var(--ui-line); border-radius: 8px; overflow: hidden; background: #f7f6f3; display: grid; place-items: center; position: relative; margin-bottom: 16px; }
.login-background-preview > img { width: 100%; height: 100%; object-fit: cover; }
.login-background-preview > span { color: var(--ui-secondary); font-size: 12px; }
.login-background-grid label { display: block; font-size: 12px; font-weight: 500; margin-block: 12px 6px; }
.login-background-grid input[type="url"] { width: 100%; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 6px; font-size: 13px; }
.login-background-grid input[type="file"] { width: 100%; font-size: 12px; }
.login-background-grid button { font-size: 12px; color: #880422; margin-top: 12px; min-height: 36px; }
.login-background-feedback { font-size: 13px; margin-block: 12px; }
.login-background-feedback[data-error="true"] { color: #9f2f2d; }
@media (max-width: 767px) {
  .has-custom-login-background :is(.dense-ui,.portal-minimal) .auth-story { min-height: auto; padding: 24px; }
  .login-background-grid { grid-template-columns: minmax(0,1fr); }
  .login-background-settings { padding: 20px; }
}