/*
  Estilos compatíveis com shadcn/ui para página de login estática
  - Tokens de design em CSS variables
  - Componentes: card, input, button, switch, divider
  - Acessibilidade: foco visível, contraste AA, prefers-reduced-motion
  - Performance: transform/opacity, will-change, sem layout thrash
*/

:root {
  /* Mapeia para tokens do design-system (dashboard) com ênfase neon verde/preto */
  --bg: var(--neon-black, var(--neutral-950, #020617));
  --panel: var(--neon-black, #0a0a0a);
  --card: var(--bg-card, rgba(20, 20, 20, 0.85));
  --border: rgba(255,255,255,.08);
  --muted: var(--neutral-400, #8ea1b7);
  --text: var(--neutral-50, #e6edf3);
  --primary: var(--primary-500, var(--neon-green, #39ff14));
  --primary-foreground: var(--neon-black, var(--neutral-900, #0b1020));
  --ring: var(--neon-green, #39ff14);
  --error: var(--danger-500, #e94e4e);
  --success: var(--success-500, #17b26a);

  /* efeitos */
  --shadow-sm: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.3));
  --shadow-md: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.35));
  --radius: var(--radius-3xl, 16px);
}

/* Layout base */
body { font-family: "Sora", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg-primary, var(--bg)); min-height: 100vh; margin: 0; }
/* Remove padding-top global herdado de components.css só nesta página */
body.login-page { padding-top: 0 !important; }

.ui-layout { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 100vh; position: relative; }
.ui-layout .ui-panel { display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, rgba(14,17,26,.8), rgba(14,17,26,.9)); position: relative; }

/* Imersão com parallax (painel esquerdo) */
.ui-immersive { position: relative; overflow: hidden; }
.ui-immersive::after { content: ""; position: absolute; inset: 24px; border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 40px 80px rgba(8,12,20,.6); pointer-events: none; }
.brand { position: absolute; display: flex; flex-direction: column; gap: 12px; z-index: 5; }
.brand.center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(13,17,23,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; backdrop-filter: blur(6px); }
.logo-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: radial-gradient(100% 100% at 0% 0%, #fff 0%, #baffb0 40%, var(--neon-green, #39ff14) 100%); color: #0b1020; font-weight: 700; box-shadow: var(--shadow-sm), 0 0 12px var(--neon-glow, rgba(57,255,20,.35)); }
.logo-text { font-weight: 600; color: var(--text); letter-spacing: .2px; }
.help { color: var(--muted); font-size: .9rem; }

/* Ponte/Seam animada entre o painel colorido e o formulário (evita linha reta) */
.seam { position: absolute; top: 0; bottom: 0; right: -1px; width: 56px; pointer-events: none; background:
  radial-gradient(24px 60px at 12px 20%, rgba(57,255,20,.25) 0%, transparent 60%),
  radial-gradient(24px 60px at 36px 40%, rgba(57,255,20,.18) 0%, transparent 60%),
  linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 35%, rgba(57,255,20,.28) 50%, rgba(255,255,255,.06) 65%, transparent 100%);
  filter: blur(8px);
  animation: seamFlow 9s ease-in-out infinite;
}
.seam::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(57,255,20,.22) 0%, rgba(57,255,20,0) 20%, rgba(57,255,20,.14) 50%, rgba(57,255,20,0) 80%, rgba(57,255,20,.22) 100%);
  opacity: .6; mix-blend-mode: screen; animation: seamPulse 12s ease-in-out infinite;
}

/* Glow suave do lado esquerdo do card para mesclar com a seam */
.ui-layout .ui-panel::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 64px; pointer-events: none; background:
  radial-gradient(48px 160px at 32px 40%, rgba(57,255,20,.18) 0%, transparent 65%),
  radial-gradient(48px 220px at 12px 70%, rgba(57,255,20,.12) 0%, transparent 70%);
  filter: blur(10px); animation: panelGlow 14s ease-in-out infinite;
}

@keyframes seamFlow { 0%,100% { transform: translateY(0); opacity:.9 } 50% { transform: translateY(-6px); opacity:.7 } }
@keyframes seamPulse { 0%,100% { opacity:.4 } 50% { opacity:.8 } }
@keyframes panelGlow { 0%,100% { transform: translateY(0); opacity:.7 } 50% { transform: translateY(8px); opacity:.9 } }

.parallax-layer { position: absolute; inset: 0; }
.layer-bg { background: var(--bg-primary, radial-gradient(1200px 800px at 20% 10%, #0a0a0a 0%, #111111 40%, #151515 100%)); }
.layer-gradient { background: radial-gradient(900px 700px at 60% 50%, rgba(57,255,20,.30) 0%, rgba(57,255,20,.18) 35%, rgba(10,10,10,0) 65%), radial-gradient(800px 600px at 80% 20%, rgba(57,255,20,.22) 0%, rgba(57,255,20,.12) 35%, rgba(10,10,10,0) 65%); mix-blend-mode: screen; filter: blur(10px); }
.layer-shapes { background: radial-gradient(500px 400px at 55% 45%, rgba(57,255,20,.08), rgba(57,255,20,0) 60%); mask-image: none; }

/* Card e conteúdo */
.ui-card { width: 100%; max-width: 480px; background: var(--bg-card, var(--card)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md), 0 0 24px var(--neon-glow, transparent); padding: 28px; display: grid; gap: 18px; }
.ui-title { font-size: 1.5rem; font-weight: 700; letter-spacing: .2px; }
.ui-helper { color: var(--muted); font-size: .9rem; }

.ui-field { display: grid; gap: 8px; }
.ui-label { font-weight: 600; font-size: .95rem; color: #cbd3dc; }
.ui-input-group { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; background: rgba(10,10,10,.9); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.ui-input-group:focus-within { border-color: var(--ring); box-shadow: 0 0 0 4px var(--neon-glow, rgba(57,255,20,.25)); }
.ui-icon { width: 20px; height: 20px; color: #9bb0c7; }
.ui-input { appearance: none; border: none; outline: none; background: transparent; color: var(--text); font-size: 1rem; padding: 6px 2px; }
.ui-input::placeholder { color: #6b7d92; }
.ui-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: #0c0c0c; color: #9bb0c7; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.ui-icon-btn:hover { transform: translateZ(0) scale(1.03); }
.ui-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(146,181,255,.25); }

.ui-error { min-height: 20px; color: var(--error); font-size: .9rem; }

.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.ui-link:hover { text-decoration: underline; }

/* Switch */
.ui-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ui-switch input { appearance: none; width: 40px; height: 22px; background: #0c1320; border: 1px solid var(--border); border-radius: 20px; position: relative; outline: none; transition: background .18s ease, border-color .18s ease; }
.ui-switch .switch-thumb { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #9bb0c7; transform: translate(2px, 2px); transition: transform .18s ease, background .18s ease; }
.ui-switch input:checked { background: rgba(57,255,20,.22); border-color: var(--primary); }
.ui-switch input:checked + .switch-thumb { background: var(--primary); transform: translate(20px, 2px); }
.switch-label { color: #cbd3dc; font-size: .95rem; }

/* Botões */
.ui-button { --btn-bg: var(--primary); --btn-fg: #0b1020; --btn-border: rgba(57,255,20,.35); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; letter-spacing: .2px; cursor: pointer; transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; overflow: hidden; }
.ui-button:hover { transform: translateZ(0) scale(1.02); filter: saturate(1.05); }
.ui-button:active { transform: scale(.98); }
.ui-button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--neon-glow, rgba(57,255,20,.35)); }
.ui-button[disabled] { opacity: .7; cursor: not-allowed; }
.ui-button[data-variant="primary"] { --btn-bg: var(--primary); --btn-fg: var(--primary-foreground); }

/* Ripple microinteraction */
.ui-button .ripple { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: rgba(255,255,255,.6); width: 10px; height: 10px; animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { opacity: .35; width: 10px; height: 10px; } to { opacity: 0; width: 360px; height: 360px; } }

/* Divider */
.ui-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: #99a9c0; opacity: .8; }
.ui-divider::before, .ui-divider::after { content: ""; height: 1px; background: var(--border); }

/* OAuth */
.oauth-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ui-button.oauth { --btn-bg: #0c1320; --btn-fg: #cbd3dc; --btn-border: var(--border); }
.ui-button.oauth.apple { --btn-bg: #0c1320; }
.ui-button.oauth.google { --btn-bg: #0c1320; }
.oauth-icon { font-weight: 900; }

/* Status */
.status { min-height: 24px; font-size: .95rem; }
.status.error { color: var(--error); }
.status.success { color: var(--success); }

/* Responsividade */
@media (max-width: 980px) {
  .ui-layout { grid-template-columns: 1fr; }
  .ui-immersive { height: 240px; }
  .ui-panel { padding-top: 12px; }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .seam, .seam::before, .ui-layout .ui-panel::before { animation: none; }
  .ui-button, .ui-icon-btn { transition: none; }
  .ui-input-group:focus-within { box-shadow: none; }
}

/* Performance hints */
.parallax-layer { will-change: transform; }
.ui-button, .ui-icon-btn { will-change: transform; }