:root{
  --bg:#0d0d0d;
  --card:#1b1b1b;
  --text:#eee;
  --accent:#ffcc33;
  --muted:#888;
  --radius:18px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Tahoma,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
.wrapper{width:100%;padding:1rem;}
.card{
  max-width:380px;
  margin:auto;
  background:var(--card);
  border-radius:var(--radius);
  padding:2rem 2.25rem;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  text-align:center;
}
.logo{height:52px;margin:0 .25rem 1rem}
.logo.wa{height:42px}
h1{font-size:1.25rem;margin:0 0 1.25rem}
form{display:flex;flex-direction:column;gap:1rem}
.input-row{
  display:flex;align-items:center;
  background:#333;border-radius:10px;overflow:hidden;
}
.prefix{
  background:#222;padding:.75rem 1rem;
  color:var(--accent);font-weight:600;font-size:1rem;
}
input[type="tel"]{
  flex:1;padding:.75rem;border:none;
  background:#333;color:var(--text);
  font-size:1rem;outline:none;
}
button{
  padding:.8rem 1rem;
  background:var(--accent);color:#000;
  font-weight:bold;border:none;border-radius:30px;
  cursor:pointer;transition:background .3s;
}
button:hover{background:#f5b700}
.small{font-size:.85rem;text-align:left;color:var(--muted)}
.message{min-height:1.2rem;margin:1rem 0 0;font-weight:bold}
.debug{
  background:#000;color:#00ff5a;font-family:monospace;
  font-size:.8rem;padding:1rem;margin-top:1rem;
  max-height:260px;overflow-y:auto;border-radius:6px;
  white-space:pre-wrap;word-break:break-all;display:none;
}
.note{margin-top:1.2rem}