:root { --azul-claro: #27b7f5; --azul: #128fd4; --azul-forte: #0875bb; --texto: #102436; --texto-suave: #718497; --borda: #dbe6ee; font-family: Inter, "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { position: relative; display: flex; min-height: 100vh; margin: 0; padding: 32px 20px; overflow-x: hidden; align-items: center; justify-content: center; color: var(--texto); background: radial-gradient(circle at 12% 18%, rgba(104, 211, 255, .55), transparent 31rem), radial-gradient(circle at 88% 84%, rgba(32, 151, 215, .36), transparent 34rem), linear-gradient(135deg, #1598dc 0%, #0d72b2 48%, #0a3d60 100%); isolation: isolate; }
body::before, body::after { position: fixed; z-index: -1; border-radius: 50%; content: ""; pointer-events: none; }
body::before { top: -230px; right: -170px; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.09); box-shadow: inset 0 0 90px rgba(255,255,255,.08); }
body::after { bottom: -280px; left: -190px; width: 560px; height: 560px; border: 60px solid rgba(255,255,255,.035); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.background-grid { position: fixed; z-index: -1; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 70%, transparent); pointer-events: none; }
.login-card { position: relative; width: min(440px, 100%); padding: 38px; border: 1px solid rgba(255,255,255,.75); border-radius: 26px; background: rgba(255,255,255,.96); box-shadow: 0 32px 80px rgba(2,34,57,.28), 0 3px 10px rgba(2,34,57,.08); backdrop-filter: blur(18px); }
.signup-card { width: min(480px, 100%); }
.login-card::before { position: absolute; top: 0; left: 50%; width: 58%; height: 3px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, transparent, var(--azul-claro), transparent); content: ""; transform: translateX(-50%); }
.brand { margin-bottom: 18px; color: #0875bb; font-size: 39px; font-weight: 800; letter-spacing: -.05em; text-align: center; }
.eyebrow { margin: 0 0 8px; color: var(--azul-forte); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 32px); line-height: 1.15; letter-spacing: -.035em; text-align: center; }
.subtitle { margin: 0 0 30px; color: var(--texto-suave); font-size: 14px; line-height: 1.5; text-align: center; }
form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { color: #2b4354; font-size: 13px; font-weight: 700; }
.input-wrap { position: relative; display: block; }
.field-icon { position: absolute; top: 50%; left: 16px; width: 19px; height: 19px; color: #8ba0b2; pointer-events: none; transform: translateY(-50%); }
.input-wrap input { width: 100%; height: 52px; padding: 0 48px; border: 1px solid var(--borda); border-radius: 12px; outline: none; color: var(--texto); background: #fff; font: inherit; font-size: 15px; }
.input-wrap input::placeholder { color: #a3b0bd; }
.input-wrap:focus-within input { border-color: var(--azul); background: #fbfdff; box-shadow: 0 0 0 4px rgba(18,143,212,.13); }
.input-wrap:focus-within .field-icon { color: var(--azul-forte); }
.password-toggle { position: absolute; top: 50%; right: 10px; display: grid; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; place-items: center; color: #879bab; background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--azul-forte); background: #eaf7fd; outline: none; }
.password-toggle svg { width: 19px; height: 19px; }
.submit-button { display: flex; width: 100%; height: 52px; margin-top: 4px; padding: 0 20px; border: 0; border-radius: 12px; align-items: center; justify-content: center; gap: 9px; color: #fff; background: linear-gradient(135deg, var(--azul-claro), var(--azul-forte)); box-shadow: 0 14px 28px rgba(8,117,187,.3); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.submit-button:hover { filter: brightness(1.04); box-shadow: 0 17px 32px rgba(8,117,187,.38); transform: translateY(-2px); }
.submit-button svg { width: 18px; height: 18px; }
.footer { margin: 24px 0 0; color: var(--texto-suave); font-size: 13px; text-align: center; }
.footer a { color: var(--azul-forte); font-weight: 700; }
.alert { margin-bottom: 18px; padding: 12px; border-radius: 10px; background: #fff0f0; color: #9a2525; font-size: 14px; }
@media (max-width: 480px) { body { padding: 18px 14px; align-items: flex-start; } .login-card { margin: auto 0; padding: 28px 22px; border-radius: 20px; } .subtitle { margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }