body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background: linear-gradient(to right, #fdfbfb, #ebedee); color: #333; transition: background 0.3s, color 0.3s; }

.dark { background: linear-gradient(to right, #121212, #1e1e1e); color: #f0f0f0; }

header { background-color: #6200ea; color: white; padding: 1rem; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

nav { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }

nav button { background: #ffffff; color: #6200ea; border: 2px solid #6200ea; padding: 0.5rem 1rem; font-size: 1rem; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }

nav button:hover { background: #6200ea; color: white; }

main { padding: 2rem; max-width: 800px; margin: auto; }

.section { margin-bottom: 3rem; background: white; border-radius: 12px; padding: 1rem 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: background 0.3s, color 0.3s; }

.dark .section { background: #1e1e1e; color: #e0e0e0; }

input[type="text"] { padding: 0.5rem; width: 60%; margin-right: 0.5rem; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; }

button { background-color: #03dac6; color: #000; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background 0.3s ease; margin: 0.25rem 0; }

button:hover { background-color: #018786; color: white; }

ul { list-style-type: disc; padding-left: 1.2rem; }

#quizOptions button { display: block; width: 100%; text-align: left; background: #f0f0f0; margin: 0.25rem 0; border: 1px solid #ccc; padding: 0.5rem; border-radius: 6px; }

#quizOptions button:hover { background-color: #d0d0d0; }

#quizOptions button.correct { background-color: #4caf50; color: white; }

#quizOptions button.wrong { background-color: #f44336; color: white; }

.hidden { display: none; }

.text-sm { font-size: 14px; }

.text-base { font-size: 16px; }

.text-lg { font-size: 20px; }