* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(to bottom right, #f8fafc, #e2e8f0);min-height: 100vh;display: flex;flex-direction: column;}
/* Header */
header {background: white;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);border-bottom: 1px solid #e5e7eb;}
.header-container {max-width: 1280px;margin: 0 auto;padding: 1rem 1.5rem;text-align: center;}
.logo {height: 48px;}
/* Main Content */
main {flex: 1;display: flex;align-items: center;justify-content: center;padding: 1rem;}
.container {width: 100%;max-width: 448px;}
.card {background: white;border-radius: 1rem;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);padding: 2rem;border: 1px solid #f3f4f6;}
.icon-circle {width: 64px;height: 64px;background: #dbeafe;border-radius: 50%;display: flex;align-items: center;justify-content: center;
margin: 0 auto 1rem;}
.icon-circle svg {width: 32px;height: 32px;color: #2563eb;}
h1 {font-size: 1.5rem;font-weight: 600;text-align: center;margin-bottom: 0.5rem;color: #111827;}
.subtitle {text-align: center;color: #6b7280;margin-bottom: 2rem;}
.input-container {display: flex;align-items: center;gap: 0.5rem;border: 1px solid #d1d5db;border-radius: 0.5rem;padding: 0.25rem;margin-bottom: 1rem;transition: all 0.2s;}
.input-container:focus-within {border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);}
.country-code {color: #374151;padding: 0.5rem 0.75rem;border-right: 1px solid #d1d5db;font-weight: 500;}
input {flex: 1;border: none;outline: none;font-size: 1.125rem;padding: 0.75rem;font-family: inherit;}
.btn {width: 100%;background: #2563eb;color: white;border: none;padding: 1.5rem;font-size: 1.125rem;font-weight: 500;border-radius: 0.5rem;cursor: pointer;transition: background 0.2s;}
.btn:hover:not(:disabled) {background: #1d4ed8; color:#fff;}
.btn:disabled {background: #9ca3af;cursor: not-allowed;}
/* Footer */
footer {background: white;border-top: 1px solid #e5e7eb;padding: 1.5rem 1rem;}
.footer-container {max-width: 1280px;margin: 0 auto;text-align: center;}
.footer-logo {height: 40px;opacity: 0.75;margin-bottom: 0.5rem;}
.footer-text {font-size: 0.875rem;color: #6b7280;margin-bottom: 0.5rem;}
.footer-links {display: flex;justify-content: center;gap: 1rem;font-size: 0.75rem;color: #9ca3af;}
.footer-links a {color: #9ca3af;text-decoration: none;transition: color 0.2s;}
.footer-links a:hover {color: #2563eb;}


@media screen and (min-width:100px) and (max-width:479px){
 .card{background: white;border-radius: 0;box-shadow: none;padding: 1rem;border: 1px solid #f3f4f6;}  
 main{padding: 0;}
 .container{padding: 0;}
 input{padding: 0;}

 .btn{    padding: 1rem;}
}