.mdi-login-wrap { max-width: 380px; margin: 40px auto; font-family: sans-serif; }
.mdi-login-form input { width: 100%; padding: 10px; margin-top: 4px; box-sizing: border-box; }
.mdi-login-form label { font-weight: 600; }
.mdi-error { color: #b00020; }
.mdi-btn {
	display: inline-block; padding: 10px 18px; background: #2b6cb0; color: #fff;
	border: none; border-radius: 6px; cursor: pointer; text-decoration: none; font-weight: 600;
}
.mdi-btn:hover { background: #1a4e8a; color: #fff; }

.mdi-dashboard-wrap { font-family: sans-serif; max-width: 960px; margin: 30px auto; }

.mdi-track-switcher { display: flex; gap: 8px; margin-bottom: 24px; }
.mdi-track-tab {
	padding: 10px 16px; border: 2px solid #ccc; background: #fff; border-radius: 8px;
	cursor: pointer; font-weight: 600;
}
.mdi-track-tab.active { border-color: #2b6cb0; color: #2b6cb0; }

.mdi-track-panel { display: none; }
.mdi-track-panel.active { display: block; }

.mdi-review-bar { margin-bottom: 16px; }
.mdi-review-due { background: #6b46c1; }
.mdi-review-due:disabled { background: #cbd5e0; cursor: default; }
.mdi-review-due:hover:not(:disabled) { background: #553c9a; }

.mdi-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mdi-topic-card { border: 1px solid #e2e2e2; border-radius: 10px; padding: 16px; }
.mdi-topic-card h3 { margin: 0 0 10px; font-size: 15px; }
.mdi-progress-bar { background: #eee; border-radius: 6px; height: 8px; overflow: hidden; }
.mdi-progress-fill { background: #38a169; height: 100%; }
.mdi-progress-label { font-size: 12px; color: #666; margin: 6px 0 10px; }

/* Worker track — professional, muted */
.mdi-track-worker .mdi-topic-card { background: #f7fafc; }
.mdi-track-worker .mdi-progress-fill { background: #2b6cb0; }

/* Women track — warm, elegant */
.mdi-track-women .mdi-topic-card { background: #fdf6f0; border-color: #f0d9c8; }
.mdi-track-women .mdi-progress-fill { background: #c05621; }

/* Kids track — bright, playful, base theme */
.mdi-track-kids .mdi-topic-card { background: #fffbea; border-radius: 16px; border-width: 2px; transition: transform 0.15s ease; }
.mdi-track-kids h2 { font-size: 26px; }
.mdi-mascot { font-size: 56px; text-align: center; margin-bottom: 6px; display: inline-block; }
.mdi-mood-switcher { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
.mdi-mood-btn {
	padding: 10px 20px; border-radius: 20px; border: none; cursor: pointer; font-weight: 700;
	transition: transform 0.1s ease;
}
.mdi-mood-btn:hover { transform: scale(1.08); }
.mdi-mood-btn[data-mood="calm"] { background: #bee3f8; }
.mdi-mood-btn[data-mood="happy"] { background: #fefcbf; }
.mdi-mood-btn[data-mood="playful"] { background: #fbb6ce; }

/* Mood theme overrides, applied via JS as classes on the kids panel */
.mdi-track-kids.mood-calm { background: #ebf8ff; }
.mdi-track-kids.mood-happy { background: #fffff0; }
.mdi-track-kids.mood-playful { background: #fff5f7; }

/* Playful mood makes cards bouncier on hover; calm keeps them still */
.mdi-track-kids.mood-playful .mdi-topic-card:hover { transform: scale(1.05) rotate(-1deg); }
.mdi-track-kids.mood-happy .mdi-topic-card:hover { transform: translateY(-4px); }
.mdi-track-kids.mood-calm .mdi-topic-card:hover { transform: none; }

/* Mascot animations per mood */
@keyframes mdi-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes mdi-bounce {
	0%, 100% { transform: translateY(0) scale(1); }
	30% { transform: translateY(-14px) scale(1.05); }
	60% { transform: translateY(0) scale(0.97); }
}
@keyframes mdi-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-8deg); }
	75% { transform: rotate(8deg); }
}
.mascot-calm { animation: mdi-bob 2.4s ease-in-out infinite; }
.mascot-happy { animation: mdi-wiggle 0.6s ease-in-out 3; }
.mascot-playful { animation: mdi-bounce 0.7s ease-in-out 2; }

/* Practice / flashcard modal */
.mdi-modal-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,0.55);
	display: flex; align-items: center; justify-content: center; z-index: 9999;
	padding: 20px; box-sizing: border-box;
}
.mdi-flashcard-modal {
	background: #fff; border-radius: 14px; padding: 28px; max-width: 480px; width: 100%;
	font-family: sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,0.25); position: relative;
}
.mdi-modal-close {
	position: absolute; top: 14px; right: 16px; border: none; background: none;
	font-size: 22px; cursor: pointer; color: #888;
}
.mdi-modal-progress { font-size: 13px; color: #888; margin-bottom: 10px; }
.mdi-flashcard-phrase { font-size: 26px; font-weight: 700; margin: 10px 0; line-height: 1.3; }
.mdi-flashcard-listen {
	background: none; border: 1px solid #2b6cb0; color: #2b6cb0; border-radius: 20px;
	padding: 6px 14px; cursor: pointer; font-weight: 600; margin-bottom: 16px;
}
.mdi-flashcard-reveal {
	display: none; border-top: 1px solid #eee; margin-top: 16px; padding-top: 16px;
}
.mdi-flashcard-reveal.shown { display: block; }
.mdi-flashcard-reveal p { margin: 6px 0; }
.mdi-flashcard-label { font-size: 12px; text-transform: uppercase; color: #999; font-weight: 700; margin-top: 10px; }
.mdi-flashcard-actions { margin-top: 20px; display: flex; gap: 10px; }
.mdi-flashcard-actions button { flex: 1; padding: 12px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; }
.mdi-btn-learning { background: #fed7aa; color: #7c2d12; }
.mdi-btn-known { background: #c6f6d5; color: #22543d; }
.mdi-flashcard-show-btn { background: #2b6cb0; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; font-weight: 600; }
.mdi-flashcard-done { text-align: center; }
.mdi-flashcard-done h3 { font-size: 22px; }