/* ============================================================================
   LOGIN (/auth/login) — wallpaper em video + dois campos simples (user / password)
   Componentes do kit (.ui-input, .ui-btn). Cores so por tokens (--ui-*).
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.auth-page { background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); overflow: hidden; }

/* wallpaper: o video cobre a tela; o logo CW3 fica no centro, o formulario desce para a base */
.auth-bg { position: fixed; inset: 0; overflow: hidden; background: var(--ui-bg); }
.auth-bg video {
  position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: center 42%;
  will-change: transform, filter;
  /* fundo do login: ofuscado e mais escuro (o card de vidro fica por cima) */
  filter: blur(9px) brightness(.5) saturate(1.15); transition: filter 1.1s ease;
}
/* intro: video limpo, em tela cheia, sem card */
html.is-intro .auth-bg video { inset: -2%; width: 104%; height: 104%; filter: none; }
html.is-intro .auth-shade { opacity: .3; }
html.is-intro .auth-card { visibility: hidden; }
.auth-skip { display: none; }
html.is-intro .auth-skip {
  display: inline-flex; position: fixed; z-index: 3; right: 18px; bottom: max(18px, env(safe-area-inset-bottom, 0px));
  height: 28px; align-items: center; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--ui-brand-night) 70%, transparent); color: var(--ui-muted); backdrop-filter: blur(8px);
  font: 800 10px/1 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; transition: color .15s, border-color .15s;
}
html.is-intro .auth-skip:hover { color: var(--ui-text); border-color: var(--ui-brand-soft); }
/* escurece bordas e a base (leitura do formulario) sem esconder o logo */
.auth-shade {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, var(--ui-bg) 120%),
    linear-gradient(180deg, transparent 55%, var(--ui-brand-night) 100%);
  opacity: .9; transition: opacity 1.1s ease;
}

.auth-stage { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; }

.auth-card {
  width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; padding: 18px;
  /* vidro: translucido + blur forte do video atras + filete de luz no topo */
  background: linear-gradient(160deg, color-mix(in srgb, var(--ui-brand-deep) 38%, transparent), color-mix(in srgb, var(--ui-brand-night) 52%, transparent));
  border-radius: var(--ui-radius-lg);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px var(--ui-line-strong), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label { font: 800 10px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ui-muted); }
.auth-card .ui-input { --ui-h: 40px; font-size: 13px; }

.auth-card .ui-btn--lg { margin-top: 4px; }

/* ip do acesso: pequeno, colado nos campos */
.auth-ip { text-align: center; font: 500 9.5px/1 var(--ui-font); letter-spacing: .06em; color: var(--ui-dim); }
.auth-ip span { color: var(--ui-muted); }

.auth-alert {
  padding: 9px 11px; border-radius: var(--ui-radius); background: var(--ui-bad-wash); border: 1px solid var(--ui-bad);
  color: var(--ui-bad); font: 600 11px/1.35 var(--ui-font);
}

@media (max-height: 460px) { .auth-stage { align-items: flex-start; padding-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .auth-bg video { transform: none !important; transition: none; } }