* { font-family: 'Quicksand', sans-serif; }
body { margin: 0; }
.bg-app { background: linear-gradient(135deg, #e8eeff 0%, #f3f2ff 40%, #e8fff9 100%); min-height: 100vh; }
.glass { background: rgba(255,255,255,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 8px 32px rgba(45,92,254,0.08); }
.sidebar { width: 220px; min-width: 220px; background: #0B1437; min-height: 100vh; display: flex; flex-direction: column; padding: 24px 16px; position: sticky; top: 0; align-self: flex-start; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; color: #94a3b8; font-weight: 600; font-size: 14px; transition: all .2s; cursor: pointer; text-decoration: none; background: none; border: none; width: 100%; }
.nav-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-link.active { background: #2D5CFE; color: #fff; box-shadow: 0 4px 15px rgba(45,92,254,0.4); }
.nav-link .material-symbols-outlined { font-size: 20px; }
.card { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(45,92,254,0.08); }
.progress-bar { height: 6px; border-radius: 999px; background: #e2e1ef; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: 'Lexend', sans-serif; }
.btn-primary { background: #2D5CFE; color: #fff; padding: 12px 24px; border-radius: 14px; font-weight: 700; font-family: 'Lexend', sans-serif; border: none; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { background: #0041DE; box-shadow: 0 8px 20px rgba(45,92,254,0.4); transform: translateY(-1px); }
.btn-secondary { background: #f3f2ff; color: #2D5CFE; padding: 10px 20px; border-radius: 14px; font-weight: 600; font-family: 'Lexend', sans-serif; border: 1px solid #dde1ff; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-secondary:hover { background: #dde1ff; }
.input-field { width: 100%; padding: 12px 16px 12px 44px; border: 1.5px solid #e2e1ef; border-radius: 14px; background: #f8f8ff; font-family: 'Quicksand', sans-serif; font-size: 15px; color: #191b24; outline: none; transition: border .2s; box-sizing: border-box; }
.input-field:focus { border-color: #2D5CFE; background: #fff; }
.toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #c4c5d9; border-radius: 999px; transition: .3s; }
.toggle-slider:before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.toggle input:checked + .toggle-slider { background: #2D5CFE; }
.toggle input:checked + .toggle-slider:before { transform: translateX(22px); }
[data-page] { display: none; }
[data-page].active { display: flex; }
.view-content { padding: 32px; display: none; }
.view-content.active { display: block; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: 'Lexend', sans-serif; cursor: pointer; transition: all .2s; border: none; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal-overlay.hidden { display: none; }
.modal { background: #fff; border-radius: 20px; padding: 28px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); margin: 16px; }
.devoir-card { background: #fff; border-radius: 14px; padding: 16px; border-left: 4px solid #2D5CFE; box-shadow: 0 2px 12px rgba(45,92,254,0.06); transition: all .2s; }
.devoir-card:hover { box-shadow: 0 4px 20px rgba(45,92,254,0.12); transform: translateY(-1px); }
#toast { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: #191b24; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; transform: translateY(100px); opacity: 0; transition: all .3s; pointer-events: none; }
#toast.show { transform: translateY(0); opacity: 1; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border .2s; }
.color-dot.selected { border-color: #0041DE; }
.trophee-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 12px; background: #f8f8ff; }
.trophee-item.unlocked { background: linear-gradient(135deg, #fff8e0, #fff3c0); }
.trophee-item span { font-size: 11px; font-weight: 600; text-align: center; color: #747687; }
.mat-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px rgba(45,92,254,0.07); transition: all .2s; }
.mat-card:hover { box-shadow: 0 8px 30px rgba(45,92,254,0.12); transform: translateY(-2px); }
.obj-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 12px rgba(45,92,254,0.06); border: 1.5px solid #f3f2ff; transition: all .2s; }
.statut-pill { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: 'Lexend', sans-serif; }
.statut-en_cours { background: #fff0e0; color: #FF9500; }
.statut-a_commencer { background: #f0e8ff; color: #8E54E9; }
.statut-termine { background: #e0fff9; color: #00C2B7; }
.statut-a_faire { background: #e8eeff; color: #2D5CFE; }