:root{
    --bg:#0b0f14;          /* fond global */
    --card:#10151c;        /* fond carte */
    --muted:#8b9bb0;       /* texte secondaire */
    --text:#e6edf3;        /* texte principal */
    --line:#1e2632;        /* bordures */
    --focus:#4f9cf9;       /* focus outline */
    --brand:#6aa7ff;       /* accent brand */
    --danger:#ef4444;      /* erreurs */
    --success:#10b981;     /* succès */
}

*{box-sizing:border-box}
html,body{height:100%}
body.auth-body{
    margin:0;
    background:
        radial-gradient(1000px 600px at 10% -10%, #12202f 0%, transparent 60%),
        radial-gradient(800px 500px at 110% 10%, #142538 0%, transparent 60%),
        var(--bg);
    color:var(--text);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
}

.auth-wrap{
    min-height:100%;
    display:grid;
    place-items:center;
    padding:32px 16px;
}

.auth-card{
    width:100%;
    max-width:420px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) , var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.logo{
    display:flex;justify-content:center;margin-bottom:8px;
}
.logo img{
    width:172px;height:172px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

.auth-title{
    margin:6px 0 2px;
    font-size:22px; font-weight:700; letter-spacing:.2px;
}
.auth-subtitle{
    margin:0 0 18px; color:var(--muted); font-size:13px;
}

.alert{
    border-radius:10px;
    padding:10px 12px;
    font-size:13px;
    margin-bottom:10px;
    border:1px solid;
}
.alert-error{ background:rgba(239,68,68,.1); color:#fecaca; border-color:rgba(239,68,68,.35); }
.alert-success{ background:rgba(16,185,129,.12); color:#bbf7d0; border-color:rgba(16,185,129,.35); }

.auth-form{ display:grid; gap:14px; margin-top:8px; }
.field{ display:grid; gap:8px; }
.label{ font-size:13px; color:var(--muted); }

.input{
    width:100%;
    appearance:none;
    background:#0d1218;
    border:1px solid var(--line);
    color:var(--text);
    border-radius:10px;
    padding:12px 12px;
    font-size:14px;
    outline:none;
    transition: border-color .15s, box-shadow .15s;
}
.input::placeholder{ color:#6f7d90; }
.input:focus{
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(79,156,249,.25);
}

.password-wrap{ position:relative; }
.password-wrap .input{ padding-right:42px; }
.btn-eye{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:transparent; border:0; color:#a7b4c6; cursor:pointer; font-size:16px;
}
.btn-eye:hover{ color:var(--text); }

.check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.check input{ width:16px; height:16px; accent-color: var(--brand); }

.btn-primary{
    margin-top:4px;
    width:100%;
    background:linear-gradient(180deg, #7fb3ff, #528df9);
    color:#0b1220;
    border:0;
    border-radius:10px;
    padding:12px 14px;
    font-weight:700;
    cursor:pointer;
    transition: filter .15s, transform .02s;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:active{ transform: translateY(1px); }

.links{ margin-top:6px; text-align:center; }
.links a{ color:#a7c7ff; text-decoration:none; font-size:13px; }
.links a:hover{ text-decoration:underline; }

.auth-footer{
    margin-top:16px; color:var(--muted); font-size:12px; text-align:center;
    border-top:1px solid var(--line); padding-top:12px;
}

/* Responsive léger */
@media (max-width:420px){
    .auth-card{ padding:22px; }
}