/*
  Cloud Shift - Auth pages styling
  app.css already defines the full kr-login shell/card/field/button system
  using the shared design tokens. This file only adds the few things that
  are genuinely specific to the auth pages: the page background treatment,
  the brand mark, and the MFA QR/secret layout.
*/

body.kr-login {
  background:
    radial-gradient(1100px 560px at 15% 10%, rgba(27,79,143,.09), transparent 60%),
    radial-gradient(900px 500px at 90% 85%, rgba(184,128,46,.08), transparent 55%),
    var(--bg);
}

.kr-login-bg { display:none; }

.kr-login-brand-mark {
  display: inline-flex;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
  align-items: center;
  justify-content: center;
  flex: none;
}
.kr-login-brand-mark span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
}
.kr-login-brand-mark span:nth-child(2) { background: rgba(255,255,255,.55); }

.kr-login-brand-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border);
  flex: none;
}

.kr-login-brand-name { min-width: 0; }
.kr-login-brand > img:not([class]) {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex: none;
}
.kr-login-brand-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.kr-login-brand-sub { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

/* MFA setup: QR code + manual-secret layout */
.kr-mfa-grid { display:grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px){ .kr-mfa-grid{ grid-template-columns: 1.1fr .9fr; align-items: start; } }
.kr-mfa-qr {
  display:flex; justify-content:center; align-items:center;
  padding: 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface-alt);
}
.kr-mfa-qr img { max-width: 240px; width: 100%; height:auto; }

/* Autofill text-color fix (some browsers force a yellow/white background) */
.kr-login-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  transition: background-color 9999s ease-in-out 0s;
}