body.auth-pending .app-shell,
body.auth-signed-out .app-shell,
body.auth-denied .app-shell { display: none; }

body.authenticated .auth-screen { display: none; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(145deg, oklch(.97 .015 155), #fff 55%, oklch(.96 .025 80));
}

.auth-card {
  width: min(100%, 430px);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: 0 24px 70px rgb(28 45 37 / 12%);
}

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brand img { width: 52px; height: 52px; object-fit: contain; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: 22px; }
.auth-brand small, .auth-copy, .auth-note { color: var(--muted); }
.auth-card h1 { margin: 0 0 8px; font-size: 26px; }
.auth-copy { margin: 0 0 24px; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; font-weight: 600; }
.auth-field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.auth-field input:focus { outline: 3px solid oklch(.84 .09 155 / .45); border-color: var(--success); }
.auth-submit { width: 100%; justify-content: center; min-height: 44px; }
.auth-message { min-height: 22px; margin: 0; color: var(--danger); font-size: 14px; }
.auth-message.is-info { color: var(--muted); }
.auth-denied-actions { display: none; }
body.auth-denied .auth-form { display: none; }
body.auth-denied .auth-denied-actions { display: block; }
.auth-user { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

@media (max-width: 520px) {
  .auth-screen { padding: 16px; }
  .auth-card { padding: 24px; border-radius: 16px; }
}