:root {
    --app-primary: #1e3a8a;
    --app-primary-2: #2563eb;
}

body { background: #f4f6fb; }

.app-navbar {
    background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
    box-shadow: 0 2px 10px rgba(30, 58, 138, .25);
}
.app-footer { background: #fff; border-top: 1px solid #e5e7eb; }

.card { border-radius: .8rem; }
.card-header:first-child { border-radius: .8rem .8rem 0 0; }

/* Accueil */
.role-card { transition: transform .15s ease, box-shadow .15s ease; }
.role-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08) !important; }
.role-icon, .stat-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.stat-icon { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 12px; }

/* Listes vides */
.empty-state { text-align: center; padding: 3rem 1rem; color: #6b7280; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* Cartes sujets */
.sujet-card { border-top: 4px solid var(--app-primary-2) !important; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.note-box { background: #ecfdf5; color: #065f46; border-radius: .5rem; padding: .4rem .75rem; text-align: center; }

/* Composition */
.composer-header { z-index: 1010; top: 0; }
.preserve-lines { white-space: pre-wrap; word-wrap: break-word; }
.enonce { font-size: 1.05rem; }
.question-card { border-left: 4px solid transparent !important; transition: border-color .2s; }
.question-card.repondue { border-left-color: #22c55e !important; }
.qcm-option { padding: .45rem .75rem .45rem 2.2rem; border: 1px solid #e5e7eb; border-radius: .5rem; margin-bottom: .4rem; background: #fff; }
.qcm-option:has(input:checked) { border-color: var(--app-primary-2); background: #eff6ff; }
.qcm-option label { cursor: pointer; width: 100%; }
textarea.auto-grow { resize: vertical; min-height: 7rem; overflow: hidden; }

#timer.warning { background: #f59e0b !important; color: #111 !important; }
#timer.danger { background: #dc2626 !important; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }

/* Copie / correction */
.reponse-box { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: .5rem; padding: .75rem 1rem; }
.commentaire-prof { background: #fffbeb; border-left: 3px solid #f59e0b; padding: .5rem .75rem; border-radius: .25rem; font-size: .95rem; }
.note-finale { background: #fff; border-radius: .8rem; padding: .75rem 1.5rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.note-finale .valeur { font-size: 2.2rem; font-weight: 700; color: var(--app-primary); line-height: 1.1; }
.note-finale .valeur span { font-size: 1.1rem; color: #6b7280; }
.correction-panel { top: 1rem; }

/* Éditeur de sujet */
.q-bloc .card-header { cursor: default; }
.drag-handle { font-size: 1.2rem; }