/* login.css — Estilos da página de login com Firebase Phone Auth */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --noite:#04060e;--painel:#0d1120;--lift:#131926;
  --verde:#00e676;--verde2:#00c853;--vglow:rgba(0,230,118,.2);--vdim:rgba(0,230,118,.08);
  --texto:#c8d8ea;--muted:#4a6080;--muted2:#6b84a0;--branco:#eef4ff;
  --fonte:'Geist',system-ui,sans-serif;--mono:'Geist Mono',monospace;
}
html,body{height:100%;overflow:hidden;font-family:var(--fonte);background:var(--noite);color:var(--texto)}

/* Fundo */
.fundo{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bolha{position:absolute;border-radius:50%;filter:blur(90px);animation:flutuar 10s ease-in-out infinite alternate}
.b1{width:500px;height:500px;background:radial-gradient(circle,rgba(0,230,118,.1),transparent 70%);top:-150px;left:50%;transform:translateX(-50%)}
.b2{width:350px;height:350px;background:radial-gradient(circle,rgba(41,182,246,.07),transparent 70%);bottom:-80px;left:-80px;animation-delay:-4s}
.b3{width:300px;height:300px;background:radial-gradient(circle,rgba(206,147,216,.06),transparent 70%);bottom:-60px;right:-60px;animation-delay:-7s}
@keyframes flutuar{from{transform:translate(0,0)}to{transform:translate(20px,15px)}}
.grade{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 100%);z-index:0;pointer-events:none}

/* Shell e Card */
.shell{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100vh;padding:20px}
.card{background:var(--painel);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:36px 34px;width:100%;max-width:420px;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 24px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);animation:entrar .5s cubic-bezier(.34,1.4,.64,1)}
@keyframes entrar{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* Logo */
.logo-wrap{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.logo-icon{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--verde),#29b6f6);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 4px 16px var(--vglow)}
.logo-nome{font-size:17px;font-weight:900;color:var(--branco);letter-spacing:-.3px}
.logo-nome span{color:var(--verde)}
.logo-tag{font-size:11px;color:var(--muted2);margin-top:1px}

/* Etapas */
.etapas{display:flex;align-items:center;gap:7px;margin-bottom:24px}
.etapa-dot{width:26px;height:4px;border-radius:2px;background:var(--lift);transition:all .4s}
.etapa-dot.ativo{background:var(--verde);box-shadow:0 0 8px var(--vglow)}
.etapa-dot.feito{background:rgba(0,230,118,.35)}
.etapa-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-left:4px}

/* Camadas */
.camada{display:none;flex-direction:column;gap:0;animation:deslizar .3s cubic-bezier(.34,1.2,.64,1)}
.camada.ativa{display:flex}
@keyframes deslizar{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.card-titulo{font-size:24px;font-weight:900;color:var(--branco);letter-spacing:-.5px;margin-bottom:7px}
.card-sub{font-size:13px;color:var(--muted2);line-height:1.55;margin-bottom:22px}
.card-sub strong{color:var(--verde);font-weight:600}

/* Botão Google */
.btn-google{display:flex;align-items:center;justify-content:center;gap:9px;height:46px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:11px;color:var(--texto);font-size:13px;font-weight:600;text-decoration:none;transition:all .18s;margin-bottom:18px}
.btn-google:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}

/* Divisor */
.divisor{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.div-linha{flex:1;height:1px;background:rgba(255,255,255,.08)}
.div-txt{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}

/* Input de telefone */
.telefone-row{display:flex;gap:8px;margin-bottom:6px}
.ddi-select{width:88px;flex-shrink:0;height:50px;padding:0 10px;background:var(--lift);border:1.5px solid rgba(255,255,255,.1);border-radius:11px;color:var(--branco);font-family:var(--mono);font-size:13px;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a6080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;transition:border-color .2s}
.ddi-select:focus{border-color:var(--verde)}
.ddi-select option{background:var(--painel)}
.telefone-input{flex:1;height:50px;padding:0 14px;background:var(--lift);border:1.5px solid rgba(255,255,255,.1);border-radius:11px;color:var(--branco);font-family:var(--mono);font-size:16px;letter-spacing:1px;outline:none;transition:border-color .2s,box-shadow .2s}
.telefone-input:focus{border-color:var(--verde);box-shadow:0 0 0 3px var(--vdim)}
.telefone-input::placeholder{color:var(--muted);font-size:13px;letter-spacing:.3px;font-family:var(--fonte)}
.telefone-input.erro{border-color:#ef5350}
.tel-hint{font-size:11px;color:var(--muted2);margin-bottom:18px;margin-top:5px}

/* Botão primário */
.btn-primario{width:100%;height:50px;background:linear-gradient(135deg,var(--verde),var(--verde2));border:none;border-radius:11px;color:#000;font-family:var(--fonte);font-size:15px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;box-shadow:0 4px 20px var(--vglow);letter-spacing:-.1px;margin-top:4px}
.btn-primario:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,230,118,.35)}
.btn-primario:active{transform:none}
.btn-primario:disabled{background:var(--lift);color:var(--muted);box-shadow:none;cursor:default;transform:none}
.btn-primario .spinner{width:18px;height:18px;border:2.5px solid rgba(0,0,0,.25);border-top-color:#000;border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* Mensagem de erro */
.msg-erro{background:rgba(239,83,80,.1);border:1px solid rgba(239,83,80,.25);border-radius:9px;padding:10px 14px;font-size:12px;color:#ef9a9a;margin-bottom:12px;display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.msg-erro::before{content:'⚠';flex-shrink:0}
.msg-erro.hidden{display:none}

/* OTP */
.otp-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.chip-telefone{font-family:var(--mono);font-size:12px;color:var(--verde);background:var(--vdim);padding:4px 12px;border-radius:20px;border:1px solid rgba(0,230,118,.2)}
.timer-wrap{margin-left:auto;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--muted2)}
#timer-arco{stroke-dashoffset:0}
.otp-boxes{display:flex;gap:8px;margin-bottom:10px}
.otp-box{flex:1;height:56px;background:var(--lift);border:1.5px solid rgba(255,255,255,.1);border-radius:11px;color:var(--branco);font-family:var(--mono);font-size:22px;font-weight:700;text-align:center;outline:none;transition:all .18s;caret-color:var(--verde)}
.otp-box:focus{border-color:var(--verde);box-shadow:0 0 0 3px var(--vdim);background:rgba(0,230,118,.04)}
.otp-box.preenchido{border-color:rgba(0,230,118,.4);background:rgba(0,230,118,.04)}
.otp-box.erro{border-color:#ef5350;animation:sacudir .4s ease}
@keyframes sacudir{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.reenvio-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.btn-reenvio{background:none;border:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--verde);font-family:var(--fonte);padding:4px 8px;border-radius:6px;transition:background .15s}
.btn-reenvio:hover{background:var(--vdim)}
.btn-reenvio:disabled{color:var(--muted);cursor:default;background:none}
.btn-voltar{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:var(--muted2);font-size:13px;font-weight:600;font-family:var(--fonte);padding:0;margin-bottom:20px;transition:color .15s}
.btn-voltar:hover{color:var(--branco)}

/* Sucesso */
.check-icon{width:68px;height:68px;border-radius:50%;background:var(--vdim);border:2px solid rgba(0,230,118,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:30px;color:var(--verde);animation:aparecer .5s cubic-bezier(.34,1.5,.64,1);box-shadow:0 0 28px var(--vglow)}
@keyframes aparecer{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}

/* Rodapé */
.card-footer{text-align:center;margin-top:22px;font-size:11px;color:var(--muted);line-height:1.6}
.card-footer a{color:var(--muted2);text-decoration:none;font-weight:600}
.card-footer a:hover{color:var(--verde)}