/* Tela de entrada padrão (src/login-screen.js): mesmo desenho do componente de referência, tema escuro, fonte Geist auto-hospedada.
   A versão 8 bits fica em login-8bit.css. */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/geist-sans-latin-300.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/geist-sans-latin-400.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/geist-sans-latin-500.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/geist-sans-latin-600.woff2) format('woff2')}
/* Cores do tema escuro da referência (shadcn): fundo, texto, cinza, borda, primário e violeta. */
.sx-login,.sx-load{--sx-bg:#0a0a0a;--sx-fg:#fafafa;--sx-muted:#a3a3a3;--sx-border:#262626;--sx-primary:#fafafa;--sx-primary-fg:#171717;--sx-secondary:#262626;--sx-violet:#a78bfa;--sx-violet-strong:#8b5cf6}
.sx-login{position:fixed;inset:0;z-index:10000;overflow:auto;background:var(--sx-bg);color:var(--sx-fg);font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color-scheme:dark}
.sx-login *{box-sizing:border-box}
.sx-login [hidden]{display:none!important}
.sx-page{display:flex;flex-direction:column;width:100%;min-height:100dvh}
@media (min-width:768px){.sx-page{flex-direction:row;height:100dvh}}
/* Coluna do formulário: flex-1, centralizada, p-8; conteúdo max-w-md com gap-6. */
.sx-left{position:relative;flex:1;display:flex;padding:32px;min-height:100dvh}
@media (min-width:768px){.sx-left{min-height:0;overflow-y:auto}}
/* margin:auto centraliza quando cabe e deixa rolar quando a tela é baixa */
.sx-col{width:100%;max-width:448px;margin:auto}
.sx-stack{display:flex;flex-direction:column;gap:24px}
.sx-sound{position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--sx-muted);cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}
.sx-sound:hover{color:var(--sx-fg);background:var(--sx-secondary)}
.sx-sound svg{width:18px;height:18px}
.sx-title{margin:0;font-size:36px;line-height:1.25;font-weight:600}
.sx-title span{font-weight:300;letter-spacing:-.05em;color:var(--sx-fg)}
@media (min-width:768px){.sx-title{font-size:48px;line-height:1}}
.sx-muted{margin:0;color:var(--sx-muted);font-size:16px;line-height:1.5}
.sx-hello{color:var(--sx-fg)}
.sx-form{display:flex;flex-direction:column;gap:20px;margin:0}
.sx-label{font-size:14px;line-height:20px;font-weight:500;color:var(--sx-muted)}
.sx-label small{font-size:12px;font-weight:400;color:#737373;margin-left:6px}
/* "GlassInputWrapper": vidro com borda sutil; no foco a borda e o fundo puxam pro violeta. */
.sx-glass{border:1px solid var(--sx-border);border-radius:16px;background:rgba(250,250,250,.05);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color .15s,background-color .15s}
.sx-glass:focus-within{border-color:rgba(167,139,250,.7);background:rgba(139,92,246,.1)}
.sx-rel{position:relative}
.sx-input{display:block;width:100%;padding:16px;border:0;border-radius:16px;background:transparent;color:var(--sx-fg);font:inherit;font-size:14px;line-height:20px;outline:none}
.sx-input::placeholder{color:#737373}
.sx-input-pad{padding-right:48px}
.sx-eye{position:absolute;top:0;bottom:0;right:12px;display:flex;align-items:center;padding:0;border:0;background:none;color:var(--sx-muted);cursor:pointer;transition:color .2s}
.sx-eye:hover{color:var(--sx-fg)}
.sx-eye svg{width:20px;height:20px}
.sx-at{display:flex;align-items:center}
.sx-at i{padding-left:16px;font-style:normal;color:var(--sx-violet);font-size:14px}
.sx-at .sx-input{padding-left:4px}
.sx-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:20px}
.sx-check{display:flex;align-items:center;gap:12px;cursor:pointer;color:rgba(250,250,250,.9)}
/* Caixinha customizada da referência. */
.sx-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:2px solid var(--sx-border);border-radius:6px;background:transparent;position:relative;cursor:pointer;transition:all .2s ease;flex:none}
.sx-checkbox:checked{background:var(--sx-primary);border-color:var(--sx-primary)}
.sx-checkbox:checked:after{content:'✔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--sx-bg);font-size:12px;font-weight:700}
.sx-violet{color:var(--sx-violet);text-decoration:none;transition:color .2s}
.sx-violet:hover{text-decoration:underline}
.sx-linkbtn{padding:0;border:0;background:none;font:inherit;cursor:pointer}
.sx-primary{width:100%;padding:16px;border:0;border-radius:16px;background:var(--sx-primary);color:var(--sx-primary-fg);font:inherit;font-size:16px;line-height:24px;font-weight:500;cursor:pointer;transition:background-color .2s}
.sx-primary:hover{background:rgba(250,250,250,.9)}
.sx-primary:disabled{cursor:not-allowed}
/* Login por e-mail ainda sem servidor: campos visíveis, mas apagados e desligados ("em breve"). */
/* (a opacidade vai nos filhos e na cor: o próprio elemento animado tem a opacidade controlada pela animação) */
.sx-email.is-soon .sx-glass,.sx-email.is-soon .sx-row>*{opacity:.45}
.sx-email.is-soon .sx-primary,.sx-email.is-soon .sx-primary:hover{background:rgba(250,250,250,.4);color:rgba(23,23,23,.75)}
.sx-email.is-soon .sx-check{cursor:not-allowed}
.sx-soon{margin:-8px 0 0;font-size:13px;line-height:18px;color:var(--sx-muted);text-align:center}
.sx-soon:before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:var(--sx-violet)}
[aria-disabled=true].sx-violet{opacity:.75}
.sx-or{position:relative;display:flex;align-items:center;justify-content:center;min-height:20px}
.sx-or-line{width:100%;border-top:1px solid var(--sx-border)}
.sx-or-text{position:absolute;padding:0 16px;background:var(--sx-bg);color:var(--sx-muted);font-size:14px;line-height:20px}
/* Moldura do botão oficial do Google: mesma borda arredondada do botão da referência. */
.sx-google{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:8px;border:1px solid var(--sx-border);border-radius:16px;background:#131314;overflow:hidden;transition:border-color .2s}
.sx-google:hover{border-color:#3a3a3a}
.sx-google-host{display:flex;justify-content:center;min-height:40px;width:100%}
.sx-foot,.sx-guest{margin:0;text-align:center;font-size:14px;line-height:20px;color:var(--sx-muted)}
.sx-guest{margin-top:-12px;font-size:13px}
.sx-status{margin:-8px 0 0;min-height:20px;font-size:13px;line-height:18px;color:#fbbf24;text-align:center}
.sx-status:empty{display:none}
/* Painel da direita: inset 16px, rounded-3xl, cidade em pixel art preenchendo tudo. */
.sx-right{display:none;position:relative;flex:1;padding:16px}
@media (min-width:768px){.sx-right{display:block}}
.sx-hero{position:absolute;inset:16px;border-radius:24px;overflow:hidden;background:#22204d}
.sx-city{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;image-rendering:pixelated;image-rendering:crisp-edges}
.sx-cards{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:flex;justify-content:center;gap:16px;width:100%;padding:0 32px}
.sx-card-slot{display:flex;flex:0 1 256px;min-width:0}
.sx-card-slot.s1,.sx-card-slot.s2{display:none}
@media (min-width:1280px){.sx-card-slot.s1{display:flex}}
@media (min-width:1536px){.sx-card-slot.s2{display:flex}}
/* "TestimonialCard": vidro escuro, borda branca a 10%, p-5, w-64. */
.sx-card{display:flex;align-items:flex-start;gap:12px;width:100%;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(39,39,42,.4);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:var(--sx-fg)}
.sx-avatar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:16px;background:#1c1830;overflow:hidden}
.sx-avatar svg{width:26px;height:26px;display:block}
.sx-card-text{font-size:14px;line-height:1.375}
.sx-card-text p{margin:0}
.sx-card-name{display:flex;align-items:center;gap:4px;font-weight:600}
.sx-card-handle{color:var(--sx-muted)}
.sx-card-body{margin-top:4px!important;color:rgba(250,250,250,.8)}
/* Animações da referência: fadeSlideIn (esquerda), slideRightIn (painel), testimonialIn (cartões). */
@keyframes sxFadeSlideIn{to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes sxSlideRightIn{to{opacity:1;filter:blur(0);transform:translateX(0)}}
@keyframes sxTestimonialIn{to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
.sx-el{opacity:0;filter:blur(1px);transform:translateY(10px);animation:sxFadeSlideIn .6s ease-out forwards}
.sx-slide{opacity:0;filter:blur(1px);transform:translateX(20px);animation:sxSlideRightIn .6s ease-out .3s forwards}
.sx-testimonial{opacity:0;filter:blur(1px);transform:translateY(20px) scale(.95);animation:sxTestimonialIn .6s ease-out forwards}
.sx-login .d1{animation-delay:.1s}.sx-login .d2{animation-delay:.2s}.sx-login .d3{animation-delay:.3s}.sx-login .d4{animation-delay:.4s}.sx-login .d5{animation-delay:.5s}.sx-login .d6{animation-delay:.6s}.sx-login .d7{animation-delay:.7s}.sx-login .d8{animation-delay:.8s}.sx-login .d9{animation-delay:.9s}
.sx-testimonial.t0{animation-delay:1s}.sx-testimonial.t1{animation-delay:1.2s}.sx-testimonial.t2{animation-delay:1.4s}
.sx-login :focus-visible{outline:2px solid var(--sx-violet);outline-offset:2px}
.sx-login .sx-input:focus-visible{outline:none}
/* Transição pro jogo: tela branca, logo em pixel art e barra violeta arredondada. */
.sx-load{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;background:#fafafa;color:#171717;font-family:'Geist',ui-sans-serif,system-ui,sans-serif;opacity:0;transition:opacity .35s ease}
.sx-load.on{opacity:1}
.sx-load.out{opacity:0;transition:opacity .6s ease}
.sx-load-box{display:flex;flex-direction:column;align-items:center;gap:22px;padding:16px}
.sx-load-logo svg{display:block;width:120px;height:120px;border-radius:24px;image-rendering:pixelated;box-shadow:0 18px 40px -18px rgba(76,29,149,.45)}
.sx-load.on .sx-load-logo{animation:sxPop .6s cubic-bezier(.2,.8,.2,1) .2s both}
.sx-load-name{font-size:15px;font-weight:600;letter-spacing:.42em;margin-right:-.42em}
.sx-load.on .sx-load-name,.sx-load.on .sx-bar,.sx-load.on .sx-load-info{animation:sxFadeSlideIn .6s ease-out .4s both;opacity:0;transform:translateY(10px);filter:blur(1px)}
@keyframes sxPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.sx-bar{width:min(300px,76vw);height:8px;border-radius:999px;background:#ede9fe;overflow:hidden}
.sx-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.sx-load-info{display:flex;justify-content:space-between;gap:16px;width:min(300px,76vw);font-size:13px;line-height:18px;color:#737373}
.sx-load-pct{flex:none;color:#171717;font-variant-numeric:tabular-nums;font-weight:500}
.sx-load.failed .sx-load-label{color:#b91c1c}
@media (prefers-reduced-motion:reduce){
 .sx-el,.sx-slide,.sx-testimonial,.sx-load.on .sx-load-logo,.sx-load.on .sx-load-name,.sx-load.on .sx-bar,.sx-load.on .sx-load-info{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
 .sx-load,.sx-load.out{transition:none}
}
/* Profissão: lista fechada num select com a mesma cara de vidro. */
.sx-select-wrap{position:relative}
.sx-select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.sx-select:invalid{color:#737373}
.sx-select option{background:#171717;color:var(--sx-fg)}
.sx-select-wrap svg{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--sx-muted);pointer-events:none}
/* Entrada só com Google: coluna centralizada, botão no mesmo vidro escuro dos campos, com o "G" em vetor.
   O botão oficial do Google fica por cima, invisível (opacidade quase zero), esticado pra cobrir o nosso: é ele que recebe o clique. */
.sx-only-google{align-items:center;text-align:center}
.sx-only-google .sx-title,.sx-only-google .sx-muted{width:100%}
.sx-only-google .sx-google{position:relative;display:block;min-height:0;padding:0;max-width:400px;border-color:var(--sx-border);background:rgba(250,250,250,.05);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color .2s,background-color .2s,transform .15s}
.sx-only-google .sx-google:hover{border-color:rgba(167,139,250,.7);background:rgba(139,92,246,.1)}
.sx-only-google .sx-google:active{transform:scale(.99)}
.sx-gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px;border:0;background:none;color:var(--sx-fg);font:inherit;font-size:16px;line-height:24px;font-weight:500;cursor:pointer}
.sx-g{width:22px;height:22px;flex:none}
.sx-only-google .sx-google-host{position:absolute;inset:0;min-height:0;display:flex;align-items:center;justify-content:center;opacity:.0001;transform:scaleY(1.45);cursor:pointer}
.sx-only-google .sx-google:not(.is-ready) .sx-google-host{pointer-events:none}
.sx-only-google .sx-google.is-off{opacity:.45}
.sx-only-google .sx-google.is-off,.sx-only-google .sx-google.is-off:hover{border-color:var(--sx-border);background:rgba(250,250,250,.05);transform:none}
.sx-only-google .sx-google.is-off .sx-gbtn{cursor:not-allowed}
.sx-hint{margin:-8px 0 0;font-size:13px;line-height:18px;color:var(--sx-muted)}
.sx-only-google .sx-guest{margin-top:-8px}
/* Logo revelada em vidro (src/glass-reveal.js): o canvas é maior que a logo pra caber a gota, a sombra e a onda;
   a margem negativa mantém o resto da tela no mesmo lugar. Sem WebGL2 a logo em pixel art continua ali. */
.sx-load{background:#ffffff}
.sx-load-logo{position:relative;display:grid;place-items:center;width:120px;height:120px}
.sx-load-logo .glass-reveal{position:absolute;left:50%;top:50%;width:240px;height:240px;transform:translate(-50%,-50%);display:block;cursor:pointer;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.sx-load-logo.has-glass svg{visibility:hidden}
.sx-load.on .sx-load-logo.has-glass{animation:none}
/* A tela de carregamento nasce sólida e fica embaixo do login; o login é que some por cima dela (src/login-shared.js: leave). */
.sx-load{z-index:9999;opacity:1}
.sx-login.leaving{opacity:0;transition:opacity .35s ease;pointer-events:none}