.auth-brand { position: relative; overflow: hidden; min-height: 100vh; padding: clamp(32px, 6vw, 72px); color: var(--ui-color-on-primary); background: var(--ui-auth-background); }
.auth-brand::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--ui-color-on-primary-decoration) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(to bottom, var(--ui-color-mask), transparent 80%); }
.auth-brand-content { position: relative; z-index: 1; max-width: 440px; }
.auth-logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ui-color-on-primary-soft); border: 1px solid var(--ui-color-on-primary-border); margin-bottom: 36px; font-size: 24px; }
.auth-brand h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
.auth-brand p { color: var(--ui-color-on-primary-muted); line-height: 1.75; }
.auth-point { display: flex; gap: 10px; align-items: center; color: var(--ui-color-on-primary-text); font-size: 14px; }
.auth-point span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-color-on-primary-soft); }
.auth-panel { min-height: 100vh; }
.auth-card { width: min(100%, var(--ui-auth-width)); }
@media (max-width: 991.98px) {
  .auth-brand { min-height: auto; padding: 36px 24px; }
  .auth-panel { min-height: auto; padding: 32px 20px 48px; }
}
.admin-login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--ui-space-4); }
.admin-login-card { width: min(100%, var(--ui-auth-width)); border-color: var(--ui-color-border); box-shadow: var(--ui-shadow-md); }
.admin-login-mark { width: var(--ui-space-12); height: var(--ui-space-12); display: grid; place-items: center; border-radius: var(--ui-radius-md); background: var(--ui-color-primary); color: var(--ui-color-on-primary); font-size: 1.5rem; }