:root {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #082451;
  background: #eef3f8;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body { min-height: 100dvh; background: #eef3f8; }

.auth-surface {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}

.auth-card {
  width: min(100%, 430px);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 34px 28px;
  border: 1px solid #d7e0eb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(8 36 81 / 10%);
  text-align: center;
}

.auth-brand {
  min-width: 92px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #001743;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
}

.auth-card h1 { margin: 4px 0 0; font-size: clamp(32px, 9vw, 52px); line-height: 1; }
.auth-copy { margin: 0; font-size: 17px; line-height: 1.45; }
.auth-detail { margin: 0; color: #52677f; font-size: 13px; line-height: 1.4; }
.auth-retry { min-height: 44px; padding: 10px 18px; border: 1px solid #b8c4d5; border-radius: 999px; background: #fff; color: #082451; font: inherit; font-weight: 700; }
.auth-retry:active { transform: translateY(1px); }
.auth-access-request { color: #294d82; font-size: 14px; font-weight: 700; text-decoration: none; }
.auth-access-request:hover { text-decoration: underline; }

[data-state="failed"] .auth-card { border-color: #e4b4b8; }
[data-state="failed"] .auth-copy { color: #8d2630; }

#rtm-app-root[hidden], .auth-surface[hidden] { display: none !important; }