* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; }

body.all { background-color:#121212; color:#e0e0e0; }
body.login-page { background:#121212; color:#e0e0e0; display:flex; justify-content:center; align-items:center; min-height:100vh; }

header { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; background:#1c1c1c; border-bottom:1px solid #2a2a2a; } 
header h1 { font-size:24px; font-weight:bold; } .login-container { background:#1e1e1e; padding:40px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.6); width:100%; max-width:400px; } 

main { max-width:1250px; margin:40px auto; padding:0 20px; }



.login-container h1 { text-align:center; margin-bottom:30px; color:#5a9bd8; } 

.form-group { display:flex; flex-direction:column; margin-bottom:20px; } 
.form-group label { margin-bottom:6px; font-size:14px; color:#aaa; } 
.form-group input { padding:10px 12px; border-radius:6px; border:none; background:#2a2a2a; color:#e0e0e0; font-size:14px; transition:0.3s; } 
.form-group input:focus { outline:none; background:#3a3a3a; } 

.btn-login { width:100%; padding:12px; border:none; border-radius:6px; background:#5a9bd8; color:#fff; font-size:16px; cursor:pointer; transition:0.3s; margin-top:10px; } 
.btn-login:hover { background:#4671a8; } .extra { margin-top:15px; text-align:center; font-size:13px; color:#999; } 

.extra a { color:#5a9bd8; text-decoration:none; transition:0.3s; } 
.extra a:hover { text-decoration:underline; }

.btn-settings { background:none; border:none; font-size:22px; color:#e0e0e0; cursor:pointer; }





.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.dashboard-header h2 { font-size:26px; color:#fff; }
.btn-add { background-color:#2a2a2a; color:#e0e0e0; border:none; padding:10px 18px; border-radius:6px; cursor:pointer; transition:0.3s; font-weight:bold; }
.btn-add:hover { background-color:#3a3a3a; }





.add-opening-form { background:#1e1e1e; padding:18px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.5); margin-bottom:20px; display:none; transition:all 0.3s ease; } 
.add-opening-form.show { display:block; } 
.add-opening-form input[type="text"], .add-opening-form select { width:100%; padding:10px 12px; border-radius:6px; border:none; background:#2a2a2a; color:#e0e0e0; font-size:14px; margin-bottom:10px; transition:0.3s; } 
.add-opening-form input[type="text"]:focus, .add-opening-form select:focus { outline:none; background:#3a3a3a; } 
.add-opening-form button { width:100%; padding:10px 0; border:none; border-radius:6px; background:#5a9bd8; color:#fff; font-size:16px; cursor:pointer; transition:0.3s; } 
.add-opening-form button:hover { background:#4671a8; }


.couleur-choice .color-buttons { display:flex; gap:10px; } 
.couleur-choice input[type="radio"] { display:none; } 
.couleur-choice .btn-color { flex:1; text-align:center; padding:12px 0; border-radius:8px; cursor:pointer; background:#2a2a2a; color:#e0e0e0; font-weight:bold; transition:background 0.3s,color 0.3s; user-select:none; } 
.couleur-choice input[type="radio"]:checked + .btn-color { background:#5a9bd8; color:#fff; }




.openings-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 40px;
}

.card {
    background: #1e1e1e;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Conteneur principal : gauche infos, droite donut */
.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Partie gauche */
.card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-left h3 {
    color: #e4e4e4;
    font-size: 20px;
    margin: 0;
}

.moves-count {
    font-size: 13px;
    color: #999;
}

/* Boutons pratique */
.practice-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.practice-buttons .btn-practice {
    flex: 1 1 calc(33% - 10px);
    min-width: 80px;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: #2a2a2a;
    color: #e0e0e0;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: 0.3s;
    text-decoration: none;
}
.practice-buttons .btn-practice:hover {
    background: #3a3a3a;
}
.practice-buttons .btn-practice span {
    font-weight: bold;
    color: #c0c0c0;
}

/* Partie droite : Donut */
.card-right {
    flex-shrink: 0;
}
.coverage-donut {
    --size: 90px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--percentage) * 1%), #444 calc(var(--percentage) * 1%) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.coverage-donut::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    background: #1e1e1e;
    border-radius: 50%;
}
.coverage-donut span {
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

/* Bouton continuer / commencer */
.btn-continue {
    background: #5a9bd8;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: 6px;
}
.btn-continue:hover {
    background: #4a85c2;
    text-decoration: none;
}

.card-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btn-settings-card {
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    margin-top: 6px;
    width: 145px;
}
.btn-settings-card:hover {
    background: #3a3a3a;
}


/* Responsive */
@media (max-width: 600px) {
    .card-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .card-right {
        margin-top: 12px;
    }
    .practice-buttons .btn-practice {
        flex: 1 1 100%;
    }
}