.auth-page { min-height: 100vh; background: var(--color-sidebar); }
.auth-shell { position: relative; width: min(100% - 32px, 440px); min-height: 100vh; min-height: 100svh; margin: 0 auto; }
.auth-brand { position: absolute; z-index: 1; bottom: calc(100% + 18px); left: 50%; display: flex; justify-content: center; transform: translateX(-50%); }
.auth-brand img { display: block; width: 170px; height: auto; object-fit: contain; }
.auth-content { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); }
.auth-card { border-color: var(--color-sidebar-border); background: #1a1512; color: var(--color-text-inverse); padding: 28px; }
.auth-card__header { margin-bottom: 24px; }
.auth-card__header h1 { font-size: var(--font-2xl); line-height: var(--line-2xl); }
.auth-card__header p { margin-top: 6px; color: #b7b1aa; }
.auth-card__header--login, .auth-card__header--accent { text-align: center; }
.auth-card__header--login h1, .auth-card__header--accent h1 { color: var(--color-accent); }
.auth-card form { display: grid; gap: 16px; }
.auth-card .form-field { color: #b7b1aa; }
.auth-page .form-field, .auth-page .field-error, .auth-page .password-field button { font-size: var(--font-sm); line-height: var(--line-sm); }
.auth-card .form-field input { border-color: #3a332f; background: var(--color-sidebar); color: var(--color-text-inverse); }
.auth-card .form-field input.is-invalid { border-color: var(--color-danger); }
.auth-remember { display: inline-flex; width: fit-content; align-items: center; gap: 9px; color: #b7b1aa; font-size: var(--font-sm); line-height: var(--line-sm); cursor: pointer; }
.auth-card__link { display: block; margin-top: 20px; color: #b7b1aa; text-align: center; }
.auth-card__link:hover { color: var(--color-text-inverse); }
.auth-card .button--secondary { border-color: var(--color-sidebar-border); background: var(--color-sidebar); color: var(--color-text-inverse); }
.central-company-loading, .auth-card-loading { display: grid; min-height: 96px; place-items: center; }

[data-portal-theme="remcrm"] .auth-page { background: var(--color-app-bg); }
[data-portal-brand="remcrm"] .auth-brand img { width: 240px; }
[data-portal-theme="remcrm"] .auth-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-primary);
}
[data-portal-theme="remcrm"] .auth-card__header--login h1,
[data-portal-theme="remcrm"] .auth-card__header--accent h1 { color: var(--color-text-primary); }
[data-portal-theme="remcrm"] .auth-card__header p,
[data-portal-theme="remcrm"] .auth-card .form-field,
[data-portal-theme="remcrm"] .auth-remember,
[data-portal-theme="remcrm"] .auth-card__link,
[data-portal-theme="remcrm"] .auth-page .password-field button { color: var(--color-text-secondary); }
[data-portal-theme="remcrm"] .auth-card .form-field input {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
[data-portal-theme="remcrm"] .auth-card .form-field input:focus { border-color: var(--color-accent); }
[data-portal-theme="remcrm"] .auth-card .form-field input.is-invalid { border-color: var(--color-danger); }
[data-portal-theme="remcrm"] .auth-card .button--secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .auth-card .button--secondary:hover { background: var(--color-sidebar-hover); }
  [data-portal-theme="remcrm"] .auth-card__link:hover { color: var(--color-text-primary); }
  [data-portal-theme="remcrm"] .auth-card .button--secondary:hover { background: var(--color-surface-hover); }
}

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