* { box-sizing: border-box; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        body { margin: 0; min-height:100vh; display:flex; align-items:center; justify-content:center;
               padding:20px;
               background:linear-gradient(135deg, rgba(6,95,70,0.9), rgba(15,23,42,0.95)),
                          radial-gradient(circle at top right, rgba(212,175,55,0.35), transparent 45%);}
        .glass-card { position:relative; width:100%; max-width:420px; background:rgba(255,255,255,0.14);
                      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
                      border-radius:16px; padding:34px 32px; border:1px solid rgba(255,255,255,0.28);
                      box-shadow:0 25px 45px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.15);
                      overflow:hidden;}
        .glass-card::before { content:""; position:absolute; top:-50%; left:-75%; width:50%; height:200%;
                              background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
                              animation: shimmer 6s infinite;}
        @keyframes shimmer {0%{transform:translateX(0);}100%{transform:translateX(300%);}}
        .logo {text-align:center;margin-bottom:14px;} .logo img{width:80px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));}
        h2{text-align:center;margin:6px 0 4px;color:#f0fdf4;letter-spacing:0.6px;}
        .subtitle{text-align:center;color:rgba(255,255,255,0.8);font-size:14px;margin-bottom:26px;}
        .error-box{background:rgba(220,38,38,0.2);color:#ffccd5;border:1px solid rgba(220,38,38,0.35);
                   padding:12px 14px;border-radius:10px;margin-bottom:18px;font-size:14px;
                   text-align:center;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,0.2);
                   animation: shake 0.3s ease-in-out 2;}
        @keyframes shake {0%{transform:translateX(0);}25%{transform:translateX(-4px);}
                          50%{transform:translateX(4px);}75%{transform:translateX(-4px);}100%{transform:translateX(0);}}
        .form-group{margin-bottom:18px;position:relative;}
        .form-group label{display:block;margin-bottom:6px;font-size:13px;color:#ecfdf5;font-weight:600;}
        .form-group input{width:100%;padding:11px 44px 11px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.35);
                          background:rgba(255,255,255,0.18);color:#fff;font-size:14px;}
        .form-group input::placeholder{color: rgba(255,255,255,0.7);}
        .form-group input:focus{outline:none;border-color:rgba(212,175,55,0.9);
                                box-shadow:0 0 0 2px rgba(212,175,55,0.35),0 0 18px rgba(212,175,55,0.45);}
        .login-btn{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,#16a34a,#d4af37);
                   color:#052e16;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:0.3px;
                   display:flex;align-items:center;justify-content:center;gap:10px;
                   box-shadow:0 8px 18px rgba(22,163,74,0.45),0 4px 12px rgba(212,175,55,0.4);}
        .login-btn:disabled{opacity:0.75;cursor:not-allowed;}
        .footer-text{text-align:center;margin-top:22px;font-size:12px;color: rgba(255,255,255,0.75);}
        .countdown{color:#ffcc00; font-weight:600; text-align:center; margin-bottom:10px;}
        .help-box{
    margin-top:22px;
    padding:14px 16px;
    border-radius:12px;
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.25);
    font-size:13px;
    line-height:1.5;
    text-align:center;
    color:#ecfdf5;
    box-shadow:0 8px 18px rgba(0,0,0,0.25);
}

.help-box strong{
    display:block;
    margin-bottom:4px;
    color:#facc15;
    letter-spacing:.3px;
}

.help-phone{
    font-weight:700;
    color:#22c55e;
    letter-spacing:.4px;
}
.input-hint {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 4px;
    display: block;
}
.login-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-btn.loading::after {
    content: '';
    margin-left: 8px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}