/* Pokeloutre Grading — Page de connexion (mot de passe partagé) */

.login-body {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 50%),
        radial-gradient(circle at 80% 100%, color-mix(in srgb, var(--primary) 3%, transparent), transparent 50%),
        var(--bg);
    padding:var(--space-24);
}

.login-wrap {
    width:100%;
    max-width:380px;
}

.login-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:var(--space-32) var(--space-32) var(--space-24);
    box-shadow:var(--shadow);
}

.login-head {
    margin-bottom:var(--space-24);
    text-align:center;
}

.login-logo {
    font-size:var(--text-2xl);
    font-weight:700;
    letter-spacing:0.3px;
    margin-bottom:var(--space-6);
}

.login-logo .muted {
    font-weight:400;
}

.login-tagline {
    margin:0;
    font-size:var(--text-base);
    color:var(--text-muted);
}

.login-error {
    background:color-mix(in srgb, var(--bad) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--bad) 35%, transparent);
    color:var(--bad);
    padding:var(--space-10) var(--space-16);
    border-radius:var(--radius-sm);
    font-size:var(--text-base);
    margin-bottom:var(--space-16);
}

.login-form {
    display:flex;
    flex-direction:column;
    gap:var(--space-16);
}

.login-field {
    display:flex;
    flex-direction:column;
    gap:var(--space-6);
}

.login-field span {
    font-size:var(--text-sm);
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight:600;
}

.login-field input[type="password"] {
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:var(--space-10) var(--space-12);
    font-size:var(--text-base);
    font-family:inherit;
}

.login-field input[type="password"]:focus {
    outline:2px solid var(--primary);
    outline-offset:-1px;
    border-color:transparent;
}

.login-submit {
    width:100%;
    padding:var(--space-12) var(--space-16);
    margin-top:var(--space-4);
    font-size:var(--text-base);
    font-weight:600;
}

.login-foot {
    margin-top:var(--space-16);
    text-align:center;
    padding-top:var(--space-16);
    border-top:1px solid var(--border);
    color:var(--text-muted);
    font-size:var(--text-xs);
}