/* The sign-in screens (js/app.js screen(), 2026-10-26): Alp and Wazzani's photo behind a dark shade, a glass card in
   the middle (ref "modern stunning sign in"), the team's photos under it. Always dark, whatever the CRM theme. */
.gate--glass { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 40px 16px; overflow-x: hidden; background: #121212; color: #fff; }
.gate__bg { position: absolute; inset: 0; z-index: -1; }
.gate__bg picture, .gate__photo { display: block; width: 100%; height: 100%; }
.gate__photo { object-fit: cover; object-position: 50% 22%; filter: saturate(1.05); transform: scale(1.04); }
.gate__bg::after { content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(18, 18, 18, 0.55), rgba(18, 18, 18, 0.88) 70%),
    linear-gradient(180deg, rgba(18, 18, 18, 0.35) 0%, rgba(18, 18, 18, 0.7) 55%, #121212 100%); }

.gate--glass .gate__card { position: relative; width: min(384px, 100%); padding: 32px; border: 0; border-radius: 28px; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(18, 18, 18, 0.72)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #fff; }
.gate__logo { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #e11d2e, #ff7a59); color: #fff; font: 800 18px/1 var(--f-body); letter-spacing: -0.02em; box-shadow: 0 10px 26px -8px rgba(225, 29, 46, 0.8); }
.gate__eyebrow { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.gate--glass .gate__title { margin: 6px 0 22px; font: 600 24px/1.2 var(--f-body); letter-spacing: -0.02em; color: #fff; text-align: center; }
.gate--glass .gate__line { color: rgba(255, 255, 255, 0.78); justify-content: center; text-align: center; }
.gate--glass .gate__line.muted { color: rgba(255, 255, 255, 0.55); }
.gate--glass .gate__line b { color: #fff; }
.gate--glass .gate__form { width: 100%; margin-top: 0; gap: 12px; }
.gate__input { width: 100%; padding: 12px 20px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 400 14px/1.4 var(--f-body);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.15s, background 0.15s; }
.gate__input::placeholder { color: rgba(255, 255, 255, 0.62); }
.gate__input:hover { background: rgba(255, 255, 255, 0.13); }
.gate__input:focus { outline: none; background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45); }
.gate__input[aria-invalid="true"] { box-shadow: 0 0 0 2px #ff6b6b; }
.gate--glass .gate__error { margin: 0; color: #ff8a8a; font-size: 13.5px; font-weight: 500; text-align: left; }
.gate__rule { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.gate__btn { width: 100%; padding: 12px 20px; border: 0; border-radius: 999px; cursor: pointer; font: 600 14px/1.4 var(--f-body); color: #fff;
  background: linear-gradient(135deg, #e11d2e, #f0394a 55%, #ff7a59); box-shadow: 0 12px 28px -12px rgba(225, 29, 46, 0.9); transition: filter 0.15s, transform 0.15s; }
.gate__btn:hover { filter: brightness(1.08); }
.gate__btn:active { transform: translateY(1px); }
.gate__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gate__btn:disabled { cursor: progress; filter: saturate(0.6) brightness(0.9); }
.gate--glass .gate__hint { margin: 14px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); text-align: center; }
.gate--glass .btn { width: 100%; margin-top: 16px; border-radius: 999px; }
.gate--glass .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: none; }
.gate--glass .notice--error { background: rgba(255, 107, 107, 0.14); color: #ffb3b3; }
.gate--glass .spinner { border-color: rgba(255, 255, 255, 0.25); border-top-color: #fff; }

.gate__team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.gate__team p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
.gate__team b { color: #fff; font-weight: 600; }
.gate__faces { display: flex; }
.gate__face { width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px #181824; }
.gate__face:first-child { margin-left: 0; }

@media (prefers-reduced-motion: no-preference) {
  .gate--glass .gate__card { animation: gate-in 0.5s var(--ease) both; }
  .gate__team { animation: gate-in 0.5s 0.12s var(--ease) both; }
}
@keyframes gate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .gate--glass { justify-content: flex-end; padding-bottom: 32px; }
  .gate__photo { object-position: 50% 12%; }
  .gate--glass .gate__card { padding: 26px 22px; }
}