body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.login-card {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: min(400px, calc(100% - 40px));
    box-sizing: border-box;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.icon-circle i { font-size: 35px; color: #1e3c72; }
.login-card h2 { margin: 0 0 10px; color: #333; }
.login-card p { color: #666; margin-bottom: 25px; }
.input-group { margin-bottom: 16px; text-align: right; }
.input-group label { display: block; margin-bottom: 6px; color: #333; font-weight: 600; }
.input-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.input-group input:focus { border-color: #1e3c72; outline: none; }
#tokenInput { text-align: center; letter-spacing: 5px; font-size: 18px; }
#loginButton {
    width: 100%;
    padding: 12px;
    background: #1e3c72;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

#loginButton:disabled { opacity: 0.65; cursor: wait; }
#loginButton:hover:not(:disabled) { background: #162b52; }
.error-msg {
    color: #dc3545;
    font-size: 14px;
    margin-top: 12px;
    display: none;
}

.hidden { display: none; }