.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(72, 118, 255, .35), transparent 34rem),
    radial-gradient(circle at 90% 85%, rgba(67, 217, 173, .25), transparent 30rem),
    #07101f;
}

.login-card {
  width: min(680px, 100%);
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--line);
  border-radius: 36px;
  background: rgba(8, 16, 31, .82);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
  backdrop-filter: blur(20px);
}

.login-brand { margin-bottom: 2.2rem; display: flex; align-items: center; gap: 1rem; }
.login-brand > div:last-child { display: grid; gap: .15rem; }
.login-brand strong { font-size: 1.05rem; }
.login-brand small { color: var(--muted); }

.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: #06101f;
  font-weight: 950;
  letter-spacing: -.05em;
}

h1 { margin: 0; max-width: 12ch; font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: .92; letter-spacing: -.065em; }
.intro { max-width: 52ch; margin: 1.5rem 0 2rem; color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.demo-warning { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid rgba(255, 180, 84, .35); border-radius: 14px; color: #ffd8a3; background: rgba(255, 180, 84, .09); }
.persona-grid { display: grid; gap: .8rem; }
.persona-grid form { margin: 0; }
.persona { width: 100%; padding: 1rem 1.15rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: rgba(255, 255, 255, .05); cursor: pointer; text-align: left; transition: .18s ease; }
.persona:focus-visible { border-color: var(--blue); transform: translateY(-2px); background: rgba(106, 168, 255, .12); }
.persona:active { transform: scale(.99); background: rgba(106, 168, 255, .16); }
.persona span { color: var(--muted); font-size: .82rem; text-align: right; }
.primary-button { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: .85rem; padding: 1rem 1.35rem; border: 0; border-radius: 16px; color: #06101f; background: var(--green); font: inherit; font-weight: 850; text-decoration: none; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.primary-button:active { transform: scale(.985); }
.microsoft-button { width: 100%; color: #fff; background: #2563eb; box-shadow: 0 14px 34px rgba(37, 99, 235, .28); }
.microsoft-button.busy { pointer-events: none; filter: saturate(.55); }
.microsoft-mark { width: 22px; height: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.microsoft-mark i { display: block; background: #fff; }
.login-assurances { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.login-assurances span { min-height: 34px; padding: .45rem .7rem; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; color: #d6dced; background: rgba(255,255,255,.04); font-size: .78rem; }
.login-status { min-height: 1.5rem; margin: 1rem 0 0; color: var(--green); font-weight: 750; }
.fine-print { margin: 1.5rem 0 0; color: #7f8aa4; font-size: .8rem; }

@media (hover: hover) and (pointer: fine) {
  .persona:hover { border-color: var(--blue); transform: translateY(-2px); background: rgba(106, 168, 255, .12); }
  .primary-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
}

@media (max-width: 540px) {
  .login-page { padding: 0; }
  .login-card { min-height: 100vh; min-height: 100dvh; padding: max(1.35rem, env(safe-area-inset-top)) max(1.15rem, env(safe-area-inset-right)) max(1.35rem, env(safe-area-inset-bottom)) max(1.15rem, env(safe-area-inset-left)); border-radius: 0; }
  .login-brand { margin-bottom: 1.35rem; }
  h1 { font-size: clamp(2.5rem, 14vw, 4.4rem); }
  .intro { margin: 1.1rem 0 1.4rem; font-size: 1rem; }
  .persona { min-height: 68px; }
  .persona { align-items: flex-start; flex-direction: column; }
  .persona span { text-align: left; }
  .primary-button { width: 100%; justify-content: center; }
}