/* Minimalist, Cacheable CSS for Pro Login */
body { 
    font-family: sans-serif; 
    background: #f3f4f6; 
    display: flex; 
    justify-content: center; 
    align-items: center; /* Centers vertically */
    min-height: 100vh;   /* Ensures full page height for centering */
    margin: 0;
    padding: 20px; 
    color: #333; 
    box-sizing: border-box;
}
.card { 
    background: #fff; 
    max-width: 380px; 
    width: 100%; 
    padding: 30px; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    box-sizing: border-box;
}
h1 { font-size: 22px; margin: 0 0 5px; text-align: center; }
.sub { font-size: 13px; color: #666; margin-bottom: 20px; text-align: center; }
.input-group { margin-bottom: 15px; }
label { display: block; font-size: 13px; font-weight: bold; margin-bottom: 5px; }
input[type="email"], input[type="password"] { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    font-size: 14px; 
    outline: none;
    transition: border-color 0.2s;
}
input[type="email"]:focus, input[type="password"]:focus { border-color: #2563eb; }
.pass-wrapper { position: relative; }
.toggle-pass { 
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    cursor: pointer; 
    display: flex; 
}
.toggle-pass svg { width: 18px; fill: #666; }
.btn-login { 
    width: 100%; 
    padding: 12px; 
    background: #2563eb; 
    color: #fff; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 15px; 
    font-weight: bold; 
    margin-bottom: 15px;
    transition: background 0.2s;
}
.btn-login:hover { background: #1d4ed8; }
.footer { text-align: center; font-size: 13px; color: #666; line-height: 1.5; }
.footer a, .link { color: #2563eb; text-decoration: none; font-weight: bold; }
.error-box { background: #fef2f2; border: 1px solid #fecdd3; padding: 12px; border-radius: 4px; margin-bottom: 15px; text-align: center; color: #e11d48; font-size: 13px; }
.btn-support { display: inline-block; margin-top: 10px; background: #1e293b; color: #fff; padding: 8px 12px; border-radius: 4px; text-decoration: none; font-size: 12px; transition: background 0.2s;}
.btn-support:hover { background: #000; }
#loader { display: none; text-align: center; margin-bottom: 15px; font-size: 14px; color: #666; }