/* gates.css — sign-in and access-restricted screens. */

.gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, var(--accent-light), transparent 70%),
    var(--bg);
}
.gate-card {
  width: 100%; max-width: 400px; padding: 44px 36px; text-align: center;
  animation: scaleIn 0.35s var(--spring) both;
}
.gate-logo {
  width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 22px; overflow: hidden;
  background: linear-gradient(150deg, #4ade80, var(--accent) 55%, #147a3f);
  box-shadow: 0 10px 30px rgba(31, 157, 85, 0.30);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.gate-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-logo svg { width: 30px; height: 30px; }
.gate-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.14; }
.gate-sub { font-size: 15px; color: var(--label-2); margin: 10px 0 28px; }
.gate-foot { font-size: 12px; color: var(--label-3); margin-top: 16px; }
.gate-actions { display: flex; flex-direction: column; gap: 8px; }

.gate-panel {
  text-align: left; margin: 0 0 24px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 9px; font-size: 13px;
}
.gate-row { display: flex; justify-content: space-between; gap: 12px; }
.gate-row span:first-child { color: var(--label-3); }
.gate-row span:last-child { color: var(--label-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-full); background: var(--red-light); color: var(--red); }
.gate-logo { position: relative; }
.gate-logo img { position: absolute; inset: 0; }
.gate-logo--lock { background: linear-gradient(150deg, #ff8a80, var(--red) 60%, #a1000f); box-shadow: 0 10px 30px rgba(215, 0, 21, 0.25); }