/* Primary4.css — same base as Primary3 */
body { background-color: #eef2f7; font-family: 'Nunito', sans-serif; margin: 0; padding: 0; }
#feedback { font-size: 18px; text-align: center; font-weight: 700; margin-top: 14px; min-height: 22px; }
.image-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; background: #f5f3ff; border-radius: 16px; padding: 18px; width: 100%; }
.answer { font-family: 'Nunito', sans-serif; padding: 15px; max-width: 500px; margin: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px; }
#score { margin-top: 15px; font-weight: bold; text-align: center; }
.number-input { font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 700; width: 80px; padding: 10px; border: 2px solid #a78bfa; border-radius: 12px; text-align: center; outline: none; transition: border-color 0.2s; }
.number-input:focus { border-color: #7c3aed; }
.equation-box { background: #f5f3ff; border-radius: 16px; padding: 20px 28px; font-size: 26px; font-weight: 900; color: #1e1b4b; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; width: 100%; }
.vertical-equation { background: #f5f3ff; border-radius: 16px; padding: 20px 28px; font-size: 26px; font-weight: 900; color: #1e1b4b; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-bottom: 22px; min-width: 140px; }
.vertical-equation .v-row { display: flex; align-items: center; gap: 10px; }
.vertical-equation .v-line { border-top: 3px solid #1e1b4b; width: 100%; margin: 4px 0; }
.vertical-equation .v-op { color: #7c3aed; font-size: 28px; margin-right: 6px; }
.word-problem { background: #eff6ff; border-left: 4px solid #2563eb; border-radius: 12px; padding: 16px 20px; font-size: 17px; color: #1e3a5f; margin-bottom: 20px; line-height: 1.6; width: 100%; text-align: left; }
.option-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; width: 100%; }
.option-btn { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 700; padding: 12px 24px; border-radius: 12px; border: 2px solid #a78bfa; background: #f5f3ff; color: #4c1d95; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.option-btn:hover { background: #ede9fe; transform: translateY(-2px); }
.option-btn.selected { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.fraction { display: inline-flex; flex-direction: column; align-items: center; font-size: 22px; font-weight: 900; color: #1e1b4b; line-height: 1.1; padding: 0 6px; }
.fraction .frac-num { border-bottom: 2px solid #1e1b4b; padding-bottom: 2px; }
.fraction .frac-den { padding-top: 2px; }
.roman-display { background: #f5f3ff; border-radius: 16px; padding: 20px; font-size: 28px; font-weight: 900; color: #4f46e5; text-align: center; margin-bottom: 20px; letter-spacing: 4px; width: 100%; }
.money-display { background: #f0ead8; border-radius: 16px; padding: 20px; font-size: 26px; font-weight: 900; color: #b45309; text-align: center; margin-bottom: 20px; width: 100%; }