*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f5f7;color:#17202a}
.container{width:min(680px,92%);margin:0 auto;padding:28px 0 40px}
.hero{text-align:center;padding:20px 10px 26px}
.badge{display:inline-block;background:#111827;color:#fff;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700}
h1{font-size:42px;margin:12px 0 8px}
.hero p{font-size:18px;color:#5b6570;margin:0}
.card{background:#fff;border-radius:18px;padding:24px;margin:18px 0;box-shadow:0 8px 30px rgba(0,0,0,.07)}
h2{margin-top:0}
label{display:block;font-weight:700;margin:18px 0}
input{display:block;width:100%;margin-top:8px;padding:14px;border:1px solid #ccd3da;border-radius:10px;font-size:17px}
button{width:100%;border:0;border-radius:10px;padding:15px;font-size:16px;font-weight:800;cursor:pointer;background:#111827;color:#fff}
button:hover{opacity:.92}
.secondary{background:#e9edf2;color:#111827}
.result{margin-top:20px;padding:18px;border-radius:12px;background:#eef7ee}
.result strong{font-size:28px;display:block;margin:7px 0}
.result .line{margin:8px 0}
.hidden{display:none}
.status{text-align:center;color:#4d5965;min-height:20px}
footer{text-align:center;color:#69737d;margin-top:24px}
.small{font-size:12px}