Adding educational components

frontend/src/index.css

@@ -745,6 +745,123 @@ textarea {
   align-content: start;
 }
 
+.daily-education-panel,
+.daily-quiz,
+.quiz-options,
+.education-question-editor {
+  display: grid;
+  gap: 1rem;
+}
+
+.daily-education-panel.condensed {
+  gap: 0.35rem;
+  padding-block: 1rem;
+}
+
+.daily-education-panel.condensed .panel-header {
+  margin-bottom: 0;
+}
+
+.daily-education-teaser {
+  margin: 0;
+}
+
+.daily-fact {
+  margin: 0;
+  padding: 1rem;
+  border-left: 4px solid var(--accent-gold);
+  border-radius: 0 8px 8px 0;
+  background: rgba(255, 254, 250, 0.7);
+  font-size: 1.08rem;
+}
+
+.daily-quiz {
+  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
+}
+
+.quiz-question,
+.quiz-editor-question {
+  min-width: 0;
+  margin: 0;
+  border: 1px solid var(--button-border);
+}
+
+.quiz-question {
+  display: grid;
+  gap: 0.85rem;
+  padding: 1rem;
+  border-radius: 8px;
+  background: rgba(255, 254, 250, 0.64);
+}
+
+.quiz-question legend,
+.quiz-editor-question legend {
+  padding: 0 0.35rem;
+  font-weight: 700;
+}
+
+.quiz-option {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 0.65rem;
+  min-width: 0;
+  padding: 0.7rem;
+  border: 1px solid rgba(39, 105, 179, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.quiz-option.correct {
+  border-color: rgba(35, 138, 90, 0.42);
+  background: rgba(223, 247, 229, 0.82);
+}
+
+.quiz-option.incorrect {
+  border-color: rgba(203, 58, 53, 0.36);
+  background: rgba(255, 236, 232, 0.82);
+}
+
+.quiz-option input {
+  width: auto;
+  margin: 0.25rem 0 0;
+}
+
+.quiz-feedback {
+  margin: 0;
+  color: var(--accent-red);
+}
+
+.quiz-feedback.correct {
+  color: var(--accent-green);
+}
+
+.admin-education-panel,
+.education-admin-basics,
+.quiz-editor-question,
+.education-admin-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.education-admin-basics {
+  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
+}
+
+.quiz-editor-question {
+  padding: 1rem;
+}
+
+.quiz-editor-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+
+.education-admin-list span {
+  overflow-wrap: anywhere;
+}
+
 .button-row {
   display: flex;
   gap: 0.75rem;
@@ -1849,6 +1966,11 @@ label {
 }
 
 @media (max-width: 980px) {
+  .education-admin-basics,
+  .quiz-editor-options {
+    grid-template-columns: 1fr;
+  }
+
   .app-shell,
   .auth-panel,
   .hero-card,