:root{
  --bg: #0A0F1A;
  --panel: #111827;
  --border: #223049;
  --text: #E7ECF3;
  --text-dim: #8291A8;
  --blue: #4FB6F0;
  --teal: #2AD4B0;
  --amber: #F5B942;
  --green: #4ADE80;
  --red: #F16A6A;
  --rose: #F272A6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background: radial-gradient(700px 500px at 50% -10%, #10192B 0%, var(--bg) 60%);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  display:flex; justify-content:center;
  min-height:100vh;
}
.phone-frame{
  width:100%; max-width: 430px;
  min-height:100vh;
  padding: 28px 22px 40px;
  display:flex; flex-direction:column;
  position:relative;
}

.tela{display:none; flex-direction:column; flex:1; animation: fadein .25s ease;}
.tela.ativa{display:flex;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* loading */
#tela-carregando{align-items:center; justify-content:center; gap:16px;}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border: 3px solid var(--border); border-top-color: var(--blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.carregando-texto{color:var(--text-dim); font-size:14px;}

/* topo / menu */
.topo{text-align:center; margin-bottom:28px;}
.logo-mark{font-size:32px; margin-bottom:6px;}
h1{font-family:'Space Grotesk',sans-serif; font-size:22px; margin:0 0 4px;}
h2{font-family:'Space Grotesk',sans-serif; font-size:19px; margin: 6px 0 4px;}
.subtitulo{color:var(--text-dim); font-size:13.5px; margin:0;}
.ajuda-texto{color:var(--text-dim); font-size:13px; margin:0 0 20px; line-height:1.5;}

.opcoes{display:flex; flex-direction:column; gap:12px; margin-bottom:12px;}
.opcao{
  display:flex; align-items:center; gap:12px;
  background: var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:16px 14px; color:var(--text); text-align:left; cursor:pointer;
  font-family:'Inter',sans-serif; width:100%;
}
.opcao-icone{font-size:20px; width:28px; text-align:center;}
.opcao-texto{flex:1; display:flex; flex-direction:column; gap:2px;}
.opcao-texto strong{font-size:14.5px;}
.opcao-texto small{color:var(--text-dim); font-size:12px;}
.opcao-seta{color:var(--text-dim); font-size:20px;}
.opcao-teal{border-color:#1c3d38;}
.opcao-amber{border-color:#3d331a; margin-top: 4px;}
.opcao-rose{border-color:#3d1f30;}

.ajuda-link{
  margin-top:auto; padding-top:24px; text-align:center;
  color: var(--text-dim); font-size:12.5px; text-decoration:underline;
}

/* voltar */
.voltar{
  background:none; border:none; color:var(--text-dim); font-size:13.5px;
  padding:0; margin-bottom:14px; text-align:left; cursor:pointer; width:fit-content;
}

/* forms */
form{display:flex; flex-direction:column; gap:14px; margin-top:6px;}
label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim);}
input{
  background: var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; color:var(--text); font-size:15px; font-family:'Inter',sans-serif;
}
input:focus{outline:2px solid var(--blue); outline-offset:1px;}

.botao-primario{
  background: linear-gradient(180deg, var(--blue), #3a9fdb);
  color:#04121f; border:none; border-radius:12px; padding:15px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; cursor:pointer;
  margin-top:4px;
}
.botao-secundario{
  background: transparent; border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:13px; font-size:14px; cursor:pointer; margin: 16px 0;
}
.mensagem-erro{color:var(--red); font-size:13px; margin-top:10px; min-height:16px;}
.lgpd-aviso{color:var(--text-dim); font-size:11.5px; line-height:1.5; margin:0;}

.toggle-identificador{display:flex; gap:8px; margin-bottom:-4px;}
.toggle-opt{
  flex:1; background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  border-radius:10px; padding:10px; font-size:13px; font-family:'Inter',sans-serif; cursor:pointer;
}
.toggle-opt.ativo{border-color:var(--blue); color:var(--text); background:#132436;}

.campo-divisor{
  display:flex; align-items:center; gap:10px; margin: 6px 0 -4px;
  font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em;
}
.campo-divisor::before{content:''; flex-shrink:0; width:14px; height:1px; background:var(--border);}

.linha-dupla{display:flex; gap:10px;}
.linha-dupla label{flex:1;}

.cep-linha{display:flex; align-items:center; gap:8px;}
.cep-linha input{flex:1;}
.cep-status{font-size:12px; color:var(--text-dim); min-width:60px; text-align:right;}
.cep-status.ok{color:var(--green);}
.cep-status.erro{color:var(--red);}

/* planos */
.planos{display:flex; flex-direction:column; gap:10px;}
.plano-item{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; cursor:pointer;
}
.plano-item strong{font-size:14.5px;}
.plano-item .plano-valor{color:var(--amber); font-family:'Space Grotesk',sans-serif; font-weight:700;}

/* pix */
#tela-pix{align-items:center; text-align:center;}
.qr-wrap{margin: 10px 0 16px;}
.qr-mock{
  width:180px; height:180px; background:#0F1729; border:1px solid var(--border);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:70px; color:var(--text-dim);
}
.status-pix{
  display:flex; align-items:center; gap:8px; margin-top:auto;
  background: var(--panel); border:1px solid var(--border); border-radius:99px;
  padding:10px 16px; font-size:13px;
}
.status-dot{width:8px;height:8px;border-radius:50%; background:var(--amber); animation: pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
.status-pix.confirmado .status-dot{background:var(--green); animation:none;}

/* liberado / bloqueado */
#tela-liberado, #tela-bloqueado{align-items:center; text-align:center; justify-content:center; gap:6px;}
.check-icone{
  width:64px; height:64px; border-radius:50%; background:rgba(74,222,128,.12);
  color:var(--green); font-size:30px; display:flex; align-items:center; justify-content:center;
  margin-bottom:8px; border:1px solid #1f4430;
}
.x-icone{
  width:64px; height:64px; border-radius:50%; background:rgba(241,106,106,.12);
  color:var(--red); font-size:28px; display:flex; align-items:center; justify-content:center;
  margin-bottom:8px; border:1px solid #4a2323;
}
#tela-liberado .botao-primario, #tela-bloqueado .botao-primario{width:100%; margin-top:20px;}