/* Authentication screens (login, change password) */
body.auth { min-height: 100vh; }
.auth-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-showcase {
  position: relative; overflow: hidden; padding: 40px 48px; display: flex; flex-direction: column; gap: 32px;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(700px 400px at 90% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 65%),
    radial-gradient(600px 360px at 0% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 65%),
    var(--surface);
}
.auth-showcase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
}
.auth-showcase > * { position: relative; z-index: 1; }
.showcase-copy { margin-top: auto; max-width: 520px; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.showcase-copy h1 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.showcase-copy p { margin-top: 14px; color: var(--text-2); font-size: 15px; max-width: 460px; }
.showcase-panel { display: grid; gap: 10px; max-width: 420px; }
.showcase-row {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--border); backdrop-filter: blur(6px);
}
.showcase-row div { display: flex; flex-direction: column; }
.showcase-row small { color: var(--muted); font-size: 12.5px; }
.showcase-foot { color: var(--faint); font-size: 12.5px; }

.auth-main { position: relative; display: grid; place-items: center; padding: 32px 20px; }
.auth-single .auth-main { min-height: 100vh; }
.auth-theme { position: absolute; top: 20px; right: 20px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card-brand { display: none; margin-bottom: 20px; }
.auth-single .auth-card-brand { display: block; }
.auth-card h2 { font-family: var(--font-display); font-size: 26px; margin-bottom: 6px; }
.auth-card > p { margin-bottom: 26px; }
.auth-card .btn-lg { margin-top: 6px; }
.input-password .input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 34px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: var(--radius-sm); }
.pw-toggle:hover { color: var(--text); }
.pw-toggle .icon { position: static; transform: none; }
.auth-help { display: flex; gap: 10px; margin-top: 24px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.auth-help .icon { color: var(--info); flex: none; margin-top: 1px; }
.auth-alt { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }