.app-loading {
  display: grid;
  min-height: 100vh;
  place-items: center;
  color: var(--muted);
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  background: var(--bg);
}

.brand-pane {
  background:
    linear-gradient(160deg, rgba(var(--accent-rgb), 0.22), transparent 48%),
    var(--brand-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px;
}

.brand-mark {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--panel-strong);
  color: var(--brand-bg);
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 22px;
}

.brand-pane h1 {
  margin: 0 0 12px;
  font-size: 36px;
  line-height: 1.3;
}

.brand-pane p {
  margin: 0;
  color: #dbeafe;
  font-size: 16px;
}

.auth-pane {
  display: grid;
  place-items: center;
  padding: 28px;
}

.auth-card,
.surface {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px var(--shadow);
  backdrop-filter: blur(20px);
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.22s ease;
}

.auth-card {
  width: min(440px, 100%);
  padding: 28px;
  animation: panelIn 0.45s ease both;
}

.auth-card h2,
.panel-title {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--ink);
}

.auth-card p,
.panel-subtitle {
  margin: 0 0 22px;
  color: var(--muted);
}