:root{
  --wa-green:#008f83;
  --wa-button:#00b894;
  --text:#111b21;
  --muted:#667781;
  --border:#d5dde0;
  --page:#f7f3eb;
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:
 radial-gradient(circle at 1px 1px,rgba(17,27,33,.07) 1px,transparent 1.4px) 0 0/28px 28px,var(--page)}
button,input,select{font:inherit}
button{touch-action:manipulation}
.topbar{height:clamp(104px,16vh,154px);background:var(--wa-green)}
.wrap{min-height:calc(100vh - clamp(104px,16vh,154px));display:flex;justify-content:center;align-items:flex-start;padding:0 16px 48px}
.card{width:min(460px,100%);margin-top:-28px;background:#fff;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.16);overflow:hidden}
.inner{padding:44px 40px 30px}
.logo{width:66px;height:66px;margin:0 auto 16px;display:block;object-fit:contain}
h1{text-align:center;font-size:clamp(27px,5vw,29px);font-weight:400;line-height:1.2;margin:0 0 11px}
.subtitle{text-align:center;color:var(--muted);font-size:15px;line-height:1.55;margin:0 auto 32px;max-width:360px}
.label{display:block;font-size:14px;font-weight:700;margin-bottom:9px}
.phone-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px}
.country,.number{width:100%;height:52px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text);outline:none}
.country{padding:0 10px}.number{padding:0 14px}
.country:focus,.number:focus,.otp input:focus{border-color:#00a884;box-shadow:0 0 0 1px #00a884}
.helper{font-size:13px;color:#54656d;line-height:1.55;margin:36px 0 0}
.btn{width:100%;height:51px;border:0;border-radius:28px;margin-top:21px;background:var(--wa-button);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.btn:hover{background:#009f81}.btn:disabled{opacity:.55;cursor:not-allowed}
.security{border-top:1px solid #e4e8ea;margin-top:27px;padding-top:18px;text-align:center;color:var(--muted);font-size:12px}
.back{border:0;background:transparent;color:#008f72;padding:0;margin:0 0 20px;cursor:pointer}
.otp{display:flex;justify-content:center;gap:8px;margin:23px 0 8px}
.otp input{width:46px;height:53px;border:1px solid var(--border);border-radius:7px;text-align:center;font-size:22px;outline:none}
.msg{text-align:center;min-height:18px;color:#d32f2f;font-size:12px}
.note{text-align:center;color:#86939a;font-size:11px;line-height:1.5;margin-top:13px}
[hidden]{display:none!important}
@media(max-width:600px){
 .topbar{height:105px}.wrap{min-height:calc(100vh - 105px);padding:0 10px 28px}
 .card{margin-top:-18px;border-radius:10px}.inner{padding:34px 22px 24px}
 .subtitle{font-size:14px;margin-bottom:27px}.phone-row{grid-template-columns:118px minmax(0,1fr)}
}
@media(max-width:380px){
 .wrap{padding-left:0;padding-right:0}.card{border-radius:0;box-shadow:none;min-height:calc(100vh - 87px)}
 .inner{padding:28px 16px 22px}.phone-row{grid-template-columns:105px minmax(0,1fr);gap:6px}
 .country{padding:0 7px}.number{padding:0 11px}.otp{gap:5px}.otp input{width:42px;height:50px}
}
@media(min-width:1000px){.card{margin-top:-30px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}