:root {
    --primary: #1e3a8a;
    --secondary: #3b82f6;
    --success: #10b981;
    --danger: #ef4444;
}

body { font-family: sans-serif; background: #f3f4f6; margin: 0; }
.auth-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.auth-card { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 350px; text-align: center; }

input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }
.btn { border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; width: 100%; }
.btn-primary { background: var(--primary); color: white; }
.btn-block { display: block; }

.alert { padding: 10px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; }
.alert-danger { background: #fee2e2; color: #b91c1c; }
.alert-success { background: #dcfce7; color: #15803d; }

/* reCAPTCHA ကို Mobile Screen အတွင်း ဝင်အောင် Fix လုပ်ခြင်း */
@media screen and (max-width: 480px) {
    .g-recaptcha {
        transform: scale(0.77); /* အရွယ်အစား အနည်းငယ် ချုံ့ခြင်း */
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }
}

.auth-card {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    /* desktop/mobile fix */
    width: 90%; 
}