/* EduResource ZA Study Path: built around existing papers, notes, tutor and calculator tools. */
#app{max-width:1320px;margin:0 auto}
#app .ultra-heading{margin-bottom:26px}.ultra-heading h2{max-width:760px;font-size:clamp(30px,3.3vw,48px);letter-spacing:-.055em}.ultra-heading p{max-width:720px;font-size:14px}
#app .ultra-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);gap:30px;padding:42px 44px 34px;border-radius:26px;background:linear-gradient(125deg,#10192e 0%,#1d2740 64%,#401d32 100%);color:#fff;isolation:isolate}
#app .ultra-hero::before{content:'';position:absolute;width:520px;height:520px;right:-180px;top:-220px;border-radius:50%;background:#d6073b24;filter:blur(2px);z-index:-1}
#app .ultra-hero-copy{align-self:center}.ultra-hero-copy .eyebrow{color:#fda4af}.ultra-hero h1{font-size:clamp(33px,4.2vw,57px);line-height:1.04;letter-spacing:-.06em;margin:11px 0 15px;color:#fff}.ultra-hero p{max-width:580px;color:#d2d9e5;font-size:15px;margin:0 0 24px}
#app .hero-actions{display:flex;gap:10px;flex-wrap:wrap}.ultra-hero .button{background:#ffffff10;border-color:#ffffff33;color:#fff}.ultra-hero .button.primary{background:var(--edu-red)!important;border-color:var(--edu-red)!important;color:#fff!important}.ultra-hero .button:hover{background:#ffffff1e;color:#fff}
#app .hero-library-stat{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid #ffffff1b;max-width:520px}.hero-library-stat strong{font-size:23px;letter-spacing:-.04em;color:#fff}.hero-library-stat span{font-size:11px;line-height:1.5;color:#c8d1df;max-width:255px}
#app .ultra-hero-mascot{display:grid;place-items:center;min-height:270px;position:relative}.mascot-speech{position:absolute;bottom:4px;right:0;max-width:210px;padding:9px 12px;background:#fff;color:#7f1239;font:700 11px/1.45 'Plus Jakarta Sans',system-ui,sans-serif;border-radius:11px;box-shadow:0 14px 26px #0003;transform:rotate(-2deg)}

.aplus-scene{position:relative;display:grid;place-items:center;min-width:210px;min-height:230px;isolation:isolate}.aplus-scene img{position:relative;z-index:3;width:236px;height:236px;object-fit:contain;filter:drop-shadow(0 18px 18px #0f172a3b);animation:aplus-breathe 4.6s ease-in-out infinite}.aplus-scene::before{content:'';position:absolute;z-index:0;width:174px;height:174px;border-radius:50%;background:radial-gradient(circle,#d6073b26 0 32%,#ffffff0c 33% 56%,transparent 57%);border:1px solid #ffffff20}.aplus-orbit{position:absolute;border:1px solid #ffffff28;border-radius:50%;z-index:1}.aplus-orbit--one{width:205px;height:205px;animation:aplus-orbit 11s linear infinite}.aplus-orbit--two{width:150px;height:150px;border-style:dashed;animation:aplus-orbit 8s linear infinite reverse}.aplus-desk{display:none}.aplus-note{position:absolute;z-index:2;width:34px;height:42px;right:31px;bottom:44px;border-radius:5px;background:#fff;box-shadow:0 8px 14px #0002;transform:rotate(10deg)}.aplus-note::before,.aplus-note::after{content:'';position:absolute;left:7px;right:7px;height:2px;background:#d6073b55;border-radius:3px}.aplus-note::before{top:14px}.aplus-note::after{top:22px}
.aplus-scene[data-mood=focus] img{animation:aplus-focus 3.4s ease-in-out infinite}.aplus-scene[data-mood=focus]::before{background:radial-gradient(circle,#d6073b1e 0 28%,#1720330b 29% 48%,transparent 49%);border-color:#d6073b22}.aplus-scene[data-mood=focus] .aplus-desk{display:block;position:absolute;z-index:1;width:183px;height:25px;bottom:26px;border-radius:5px 5px 20px 20px;background:linear-gradient(180deg,#fff,#e7e9f0);box-shadow:0 9px 14px #0f172a22}.aplus-scene[data-mood=focus] .aplus-note{right:38px;bottom:43px;transform:rotate(8deg)}
.aplus-scene[data-mood=celebrate] img{animation:aplus-celebrate 2.2s cubic-bezier(.34,1.56,.64,1) infinite}.aplus-scene[data-mood=celebrate]::before{background:conic-gradient(from 10deg,#d6073b33,#f59e0b2b,#d6073b20,#ffffff0d,#d6073b33)}.aplus-scene[data-mood=celebrate] .aplus-note{background:#fef3c7;animation:aplus-note 1.3s ease-in-out infinite alternate}.aplus-scene--compact{min-width:84px;min-height:92px;align-self:start}.aplus-scene--compact::before,.aplus-scene--compact .aplus-orbit{display:none}.aplus-scene--compact img{width:94px;height:94px;filter:drop-shadow(0 8px 10px #0f172a1c)}.aplus-scene--compact .aplus-note{display:none}.aplus-scene--compact .aplus-desk{transform:scale(.55);transform-origin:center bottom}
@keyframes aplus-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-2deg)}}@keyframes aplus-focus{0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-4px) rotate(1deg)}}@keyframes aplus-celebrate{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-13px) rotate(-7deg)}70%{transform:translateY(-4px) rotate(6deg)}}@keyframes aplus-orbit{to{transform:rotate(360deg)}}@keyframes aplus-note{to{transform:translateY(-8px) rotate(20deg)}}

#app .daily-board{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin:22px 0 32px;padding:24px 28px;border:1px solid var(--edu-line);border-radius:20px;background:var(--edu-card);box-shadow:0 7px 24px #0f172a05}
#app .daily-summary{display:flex;gap:23px;align-items:center}.daily-summary h2{font-size:23px;letter-spacing:-.04em;margin:3px 0}.daily-summary p{font-size:12px;margin:0}.goal-ring{width:82px;height:82px;flex:0 0 82px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(var(--edu-card) 55%,transparent 56%),conic-gradient(var(--edu-red) calc(var(--goal)*1%),var(--edu-line) 0);font-size:10px}.goal-ring strong{font-size:17px;letter-spacing:-.05em}.goal-ring span{color:var(--edu-muted);font-size:9px}.daily-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.daily-actions .button{font-size:11px}.focus-status{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-top:17px;border-top:1px solid var(--edu-line);font-size:11px;color:var(--edu-muted)}.focus-status strong{min-width:57px;font-size:16px;letter-spacing:-.04em;color:var(--edu-ink);font-variant-numeric:tabular-nums}
#app .ultra-section{margin:32px 0}.ultra-section .section-heading{align-items:end}.ultra-section .section-heading h2{font-size:23px;letter-spacing:-.04em;margin:4px 0 0}.ultra-section .section-heading a{font-size:11px}
.path-subject-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.path-subject{border:1px solid var(--edu-line);background:var(--edu-card);border-radius:16px;padding:18px;min-height:180px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}.path-subject:hover{transform:translateY(-3px);border-color:#eba1b4;box-shadow:0 12px 26px #0f172a09}.path-subject-top{display:flex;align-items:center;gap:8px;font-size:13px}.path-subject-top svg{width:20px;height:20px;color:var(--edu-red)}.path-subject p{font-size:11px;color:var(--edu-muted);line-height:1.55;margin:12px 0 auto}.path-progress{height:6px;border-radius:10px;background:var(--edu-line);overflow:hidden;margin:15px 0 0}.path-progress span{display:block;height:100%;background:var(--edu-red);border-radius:inherit}.path-subject>div:last-child{display:flex;gap:6px;margin-top:14px}.path-subject button{font-size:10px;padding:7px 9px;min-height:auto}
#app .ultra-action-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:32px}.ultra-action-card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:157px;padding:16px;border:1px solid var(--edu-line);border-radius:15px;background:var(--edu-card);color:var(--edu-ink)!important;transition:transform .18s,box-shadow .18s,border-color .18s}.ultra-action-card:hover{transform:translateY(-3px);border-color:#eda8b9;box-shadow:0 11px 25px #0f172a09}.ultra-action-card strong{font-size:12px}.ultra-action-card small{font-size:10px;line-height:1.55;color:var(--edu-muted)}.action-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--edu-red-soft);color:var(--edu-red)}.action-icon svg{width:20px;height:20px}.ultra-action-card:nth-child(2) .action-icon{background:#f3edff;color:#7c3aed}.ultra-action-card:nth-child(3) .action-icon{background:#eaf8f4;color:#047857}.ultra-action-card:nth-child(4) .action-icon{background:#fff7e6;color:#b45309}.ultra-action-card:nth-child(5) .action-icon{background:#edf6ff;color:#2563eb}.ultra-action-card:nth-child(6) .action-icon{background:#f4efff;color:#6d28d9}
#app .ultra-main-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(275px,.8fr);gap:20px}.ultra-panel{border-radius:17px!important;box-shadow:0 5px 18px #0f172a04!important}.ultra-panel .section-heading h2{font-size:18px;margin:0}.continue-list{display:grid}.continue-item{display:flex;align-items:center;gap:12px;padding:13px 0;color:var(--edu-ink)!important;border-bottom:1px solid var(--edu-line)}.continue-item:last-child{border-bottom:0}.continue-item>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--edu-red-soft);color:var(--edu-red)}.continue-item svg{width:18px;height:18px}.continue-item div{min-width:0}.continue-item strong,.continue-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continue-item strong{font-size:12px}.continue-item small{font-size:10px;color:var(--edu-muted);margin-top:2px}.pack-preview{display:flex;align-items:center;gap:12px}.pack-preview strong{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#fff1f3;color:var(--edu-red);font-size:18px}.pack-preview span{font-size:12px;color:var(--edu-muted)}.rhythm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.rhythm-stats strong{display:block;font-size:21px;letter-spacing:-.05em}.rhythm-stats span{font-size:9px;color:var(--edu-muted);line-height:1.35}.aplus-checkin{display:grid;grid-template-columns:94px 1fr;gap:8px;align-items:center}.aplus-checkin h2{font-size:17px;margin:5px 0}.aplus-checkin p{font-size:11px;line-height:1.6}.aplus-checkin .button{font-size:10px;padding:8px 10px}

#app .path-overview,#app .practice-hero,#app .calculator-hero,#app .builder-intro{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:center;padding:26px 30px;margin-bottom:24px;border-radius:20px;border:1px solid var(--edu-line);background:linear-gradient(120deg,var(--edu-card),#fff5f7)}.dark #app .path-overview,.dark #app .practice-hero,.dark #app .calculator-hero,.dark #app .builder-intro{background:linear-gradient(120deg,var(--edu-card),#251722)}.path-overview h2,.practice-hero h2,.calculator-hero h2,.builder-intro h2{font-size:27px;letter-spacing:-.05em;margin:5px 0 9px}.path-overview p,.practice-hero p,.calculator-hero p,.builder-intro p{font-size:12px;color:var(--edu-muted);max-width:650px;margin:0}.path-overview-stats{display:flex;gap:24px;margin-top:20px}.path-overview-stats strong{display:block;font-size:21px;letter-spacing:-.04em}.path-overview-stats span{font-size:9px;color:var(--edu-muted)}
#app .profile-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.profile-form fieldset{grid-column:1/-1;border:0;padding:0;margin:5px 0}.profile-form legend{font-size:12px;font-weight:700;margin-bottom:9px}.subject-picker,.goal-options{display:flex;flex-wrap:wrap;gap:8px}.subject-picker label,.goal-options label{display:flex;align-items:center;margin:0}.subject-picker input,.goal-options input{position:absolute;opacity:0;pointer-events:none}.subject-picker span,.goal-options span{display:block;padding:8px 10px;border:1px solid var(--edu-line);border-radius:9px;background:var(--edu-card);font-size:11px;cursor:pointer}.subject-picker input:checked+span,.goal-options input:checked+span{background:var(--edu-red-soft);border-color:#ec9daf;color:var(--edu-red-dark);font-weight:700}.form-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}.profile-form .form-actions{grid-column:1/-1}
#app .papers-search-panel{padding:22px}.papers-search-panel .searchbar{margin-bottom:12px}.search-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.ultra-badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:20px;background:var(--edu-red-soft);color:var(--edu-red-dark);font-size:9px;font-weight:800;white-space:nowrap}.ultra-badge.quiet{background:#edf6f1;color:#087a52}.ultra-resource{border-radius:15px!important}.ultra-resource .resource-topline{display:flex;align-items:center;justify-content:space-between;gap:7px}.resource-kind{font-size:9px;color:var(--edu-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ultra-resource .actions{flex-wrap:wrap}.ultra-resource .actions>*{flex:1 1 90px;text-align:center}.reader-bridge{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 23px;border:1px solid #efd3db;background:#fff8fa;border-radius:16px}.dark .reader-bridge{background:#231721;border-color:#4d2637}.reader-bridge>div{display:flex;align-items:center;gap:12px}.reader-bridge svg{width:25px;height:25px;color:var(--edu-red)}.reader-bridge strong{display:block;font-size:13px}.reader-bridge p{margin:3px 0 0;font-size:11px;color:var(--edu-muted)}
#app .notes-grid{align-items:start}.notes-grid textarea{min-height:150px}.notes-grid .note-item{background:var(--edu-bg)}.notes-grid .note-item h3{font-size:13px}.notes-grid .note-item p{font-size:11px;line-height:1.7}.notes-grid .note-item button{font-size:10px}.flashcard-list{margin-top:18px}
#app .planner-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.task-form{display:grid;grid-template-columns:1fr 160px auto;align-items:end;gap:12px}.task-form label{margin-top:0}.task-list{margin-top:21px}.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--edu-line)}.task input{width:18px;height:18px}.task div{min-width:0}.task strong,.task small{display:block}.task strong{font-size:12px}.task small{font-size:10px;color:var(--edu-muted);margin-top:2px}.task.done strong{text-decoration:line-through;color:var(--edu-muted)}.task button{padding:7px 9px;font-size:10px}.planner-aside{position:sticky;top:24px}.planner-aside h2{font-size:18px;margin:7px 0}.planner-aside p{font-size:11px;line-height:1.65}
#app .practice-hero{background:linear-gradient(120deg,#10192e,#25314c)!important;border:0;color:#fff}.practice-hero .eyebrow{color:#fda4af}.practice-hero h2{color:#fff}.practice-hero p{color:#cad4e1}.practice-metric{display:flex;align-items:center;gap:10px;margin-top:19px}.practice-metric>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ffffff12;color:#fff}.practice-metric svg{width:21px}.practice-metric strong,.practice-metric small{display:block}.practice-metric strong{font-size:20px}.practice-metric small{font-size:10px;color:#cbd5e1}.practice-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}.practice-steps{padding-left:20px;margin:15px 0 22px}.practice-steps li{padding-left:5px;margin:13px 0}.practice-steps strong{font-size:12px}.practice-steps p{font-size:11px;line-height:1.6;color:var(--edu-muted);margin:3px 0}
#app .builder-intro{margin-bottom:20px}.builder-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr);gap:20px}.pack-list{display:grid}.pack-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid var(--edu-line)}.pack-item>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--edu-red-soft);color:var(--edu-red)}.pack-item svg{width:16px}.pack-item div{min-width:0}.pack-item strong,.pack-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pack-item strong{font-size:11px}.pack-item small{font-size:9px;color:var(--edu-muted);margin-top:2px}.pack-item .button,.pack-item button{font-size:10px;padding:7px 8px}.compact-library{display:grid;gap:7px;margin:14px 0}.compact-library>div{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:7px;align-items:center;padding:8px 0;border-bottom:1px solid var(--edu-line)}.compact-library span{color:var(--edu-red)}.compact-library svg{width:16px}.compact-library strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-library button{font-size:9px;padding:6px 7px}
#app .calculator-hero{background:linear-gradient(120deg,#1a1731,#2c1a3e)!important;border:0;color:#fff}.calculator-hero .eyebrow{color:#f5d0fe}.calculator-hero h2{color:#fff}.calculator-hero p{color:#ddd1e6}.calculator-hero .button{margin-top:20px;background:#fff!important;color:#55156b!important;border-color:#fff!important}.calculator-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.calculator-card{display:flex;flex-direction:column;min-height:172px;padding:18px;border:1px solid var(--edu-line);border-radius:15px;background:var(--edu-card);color:var(--edu-ink)!important;transition:transform .18s,border-color .18s,box-shadow .18s}.calculator-card:hover{transform:translateY(-3px);border-color:#b9a0dc;box-shadow:0 11px 25px #0f172a0a}.calculator-card>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#6d28d9;background:#f4efff}.dark .calculator-card>span{background:#2b1d3d}.calculator-card svg{width:20px}.calculator-card strong{font-size:12px;margin-top:14px}.calculator-card p{font-size:10px;line-height:1.55;color:var(--edu-muted);margin:7px 0 auto}.calculator-card small{font-size:10px;color:#6d28d9;font-weight:700;margin-top:12px}
#app .ultra-pricing{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}.ultra-pricing .plan{min-height:430px}.ultra-pricing .plan li::before{color:var(--edu-red)}.premium-clarity{margin-top:24px}.premium-clarity h2{font-size:17px}.premium-clarity p{font-size:11px;line-height:1.6}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.settings-grid form{display:grid;gap:12px}.settings-grid label{margin:0}.settings-grid .primary{justify-self:start}
@media (max-width: 860px) {
  #app .ultra-pricing, .pricing, #membership-plans {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .ultra-pricing .plan, .pricing .plan {
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* /* ==========================================================================
   SimpleStudy-Grade Advanced Study Modules: Quizzes, Topics, Builder, Journal
   ========================================================================== */

/* Quiz Module */
.edu-quiz-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.edu-quiz-card {
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.dark .edu-quiz-card {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.edu-quiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.edu-quiz-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(214, 7, 59, 0.08);
  color: #be123c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.dark .edu-quiz-pill {
  background: rgba(214, 7, 59, 0.18);
  color: #fda4af;
}

.edu-quiz-step {
  font-size: 13px;
  font-weight: 700;
  color: var(--edu-muted);
}

.edu-quiz-question {
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--edu-ink);
  margin-bottom: 24px;
}

.edu-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.edu-quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1.5px solid var(--edu-line);
  background: var(--edu-bg);
  color: var(--edu-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  width: 100%;
}

.edu-quiz-option:hover:not(:disabled) {
  border-color: #cbd5e1;
  background: var(--edu-card);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.edu-quiz-option-key {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--edu-muted);
  flex-shrink: 0;
}

.edu-quiz-option.correct {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  color: #065f46 !important;
}

.dark .edu-quiz-option.correct {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
}

.edu-quiz-option.correct .edu-quiz-option-key {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.edu-quiz-option.wrong {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #991b1b !important;
}

.dark .edu-quiz-option.wrong {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}

.edu-quiz-option.wrong .edu-quiz-option-key {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.edu-quiz-rationale {
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: #065f46;
}

.dark .edu-quiz-rationale {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #a7f3d0;
}

.edu-quiz-rationale.has-error {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.2);
  color: #991b1b;
}

.dark .edu-quiz-rationale.has-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.edu-quiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--edu-line);
}

/* Questions by Topic Module */
.edu-topic-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.edu-topic-question-card {
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 18px;
  padding: 24px;
  transition: all 0.2s ease;
}

.edu-topic-question-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.edu-topic-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.edu-marks-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.dark .edu-marks-badge {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.edu-topic-solution {
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--edu-bg);
  border: 1px solid var(--edu-line);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
}

/* Homework Journal Module */
.edu-homework-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 22px;
}

@media (max-width: 900px) {
  .edu-homework-grid {
    grid-template-columns: 1fr;
  }
}

.edu-task-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 14px;
  margin-bottom: 10px;
  transition: all 0.18s ease;
}

.edu-task-card:hover {
  border-color: #cbd5e1;
  transform: translateX(2px);
}

.edu-task-priority {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

.edu-task-priority.high {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.edu-task-priority.med {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.edu-task-priority.low {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

/* Friends & Leaderboard Module */
.edu-friends-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .edu-friends-grid {
    grid-template-columns: 1fr;
  }
}

.edu-leaderboard-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.edu-leaderboard-card.current-user {
  border-color: var(--edu-red);
  background: var(--edu-red-soft);
}

.edu-rank-num {
  font-size: 16px;
  font-weight: 800;
  width: 28px;
  text-align: center;
  color: var(--edu-muted);
}

.edu-rank-num.gold { color: #f59e0b; }
.edu-rank-num.silver { color: #94a3b8; }
.edu-rank-num.bronze { color: #b45309; }

.edu-friend-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.edu-xp-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  padding-top: 20px;
  margin: 18px 0;
}

.edu-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}

.edu-bar-track {
  width: 100%;
  flex: 1;
  background: var(--edu-line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.edu-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #d6073b, #b91c1c);
  border-radius: 8px 8px 0 0;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.edu-bar-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--edu-muted);
}

/* ==========================================================================
   Command Palette (Ctrl + K)
   ========================================================================== */
.edu-cmd-palette {
  border: 0;
  padding: 0;
  background: transparent;
  width: 90vw;
  max-width: 640px;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.edu-cmd-palette::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
}

.edu-cmd-box {
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.edu-cmd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--edu-line);
  background: var(--edu-bg);
}

.edu-cmd-header svg {
  width: 20px;
  height: 20px;
  color: var(--edu-red);
  flex-shrink: 0;
}

.edu-cmd-input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  color: var(--edu-ink);
}

.edu-cmd-kbd {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  background: var(--edu-line);
  border-radius: 6px;
  color: var(--edu-muted);
}

.edu-cmd-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edu-cmd-group-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--edu-muted);
  padding: 8px 12px 4px;
  letter-spacing: 0.5px;
}

.edu-cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--edu-ink);
  transition: all 0.15s ease;
  text-decoration: none;
}

.edu-cmd-item:hover, .edu-cmd-item.selected {
  background: var(--edu-red-soft);
  color: var(--edu-red-dark);
}

.edu-cmd-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}

.edu-cmd-item-main span.icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.05);
}

.dark .edu-cmd-item-main span.icon {
  background: rgba(255, 255, 255, 0.08);
}

.edu-cmd-footer {
  padding: 10px 20px;
  background: var(--edu-bg);
  border-top: 1px solid var(--edu-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--edu-muted);
}

/* ==========================================================================
   Onboarding Modal Wizard
   ========================================================================== */
.edu-onboarding-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: 92vw;
  max-width: 680px;
  border-radius: 24px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
}

.edu-onboarding-modal::backdrop {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
}

.edu-onboarding-card {
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 24px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.edu-onboarding-progress {
  height: 4px;
  background: var(--edu-line);
  border-radius: 4px;
  margin-bottom: 24px;
  overflow: hidden;
}

.edu-onboarding-progress span {
  display: block;
  height: 100%;
  background: var(--edu-red);
  transition: width 0.3s ease;
}

.edu-role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

@media (max-width: 600px) {
  .edu-role-grid {
    grid-template-columns: 1fr;
  }
}

.edu-role-card {
  border: 1.5px solid var(--edu-line);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  background: var(--edu-bg);
  transition: all 0.2s ease;
}

.edu-role-card:hover, .edu-role-card.selected {
  border-color: var(--edu-red);
  background: var(--edu-red-soft);
  transform: translateY(-2px);
}

.edu-role-card span.emoji {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}

.edu-role-card strong {
  display: block;
  font-size: 13px;
  color: var(--edu-ink);
}

.edu-role-card small {
  font-size: 10px;
  color: var(--edu-muted);
  line-height: 1.4;
  display: block;
  margin-top: 4px;
}

/* ==========================================================================
   Topic-Based Learning Engine
   ========================================================================== */
.edu-topic-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 960px) {
  .edu-topic-workspace {
    grid-template-columns: 1fr;
  }
}

.edu-topic-tree {
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 18px;
  padding: 16px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.edu-topic-tree-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--edu-muted);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-left: 6px;
}

.edu-topic-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--edu-ink);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 4px;
}

.edu-topic-nav-btn:hover {
  background: var(--edu-line);
}

.edu-topic-nav-btn.active {
  background: var(--edu-red-soft);
  color: var(--edu-red-dark);
  font-weight: 700;
}

.edu-topic-reading-pane {
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 22px;
  padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.edu-mastery-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.edu-mastery-pill.New { background: rgba(148, 163, 184, 0.15); color: #64748b; }
.edu-mastery-pill.Learning { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.edu-mastery-pill.Practising { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.edu-mastery-pill.Confident { background: rgba(16, 185, 129, 0.15); color: #059669; }
.edu-mastery-pill.NeedsRevision { background: rgba(239, 68, 68, 0.15); color: #dc2626; }

.edu-concept-box {
  background: var(--edu-bg);
  border-left: 4px solid var(--edu-red);
  padding: 16px 20px;
  border-radius: 0 14px 14px 0;
  margin: 20px 0;
  font-size: 13.5px;
  line-height: 1.65;
}

.edu-formula-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0.06));
  border: 1px solid var(--edu-line);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  color: var(--edu-ink);
  margin: 12px 0;
}

.dark .edu-formula-card {
  background: rgba(255, 255, 255, 0.04);
}

.edu-pitfall-box {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--edu-ink);
  margin: 20px 0;
}

/* ==========================================================================
   3D Spaced-Repetition Flashcards (SM-2)
   ========================================================================== */
.edu-flashcard-stage {
  perspective: 1000px;
  max-width: 620px;
  margin: 24px auto;
  min-height: 280px;
}

.edu-flashcard-3d {
  position: relative;
  width: 100%;
  min-height: 280px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.edu-flashcard-3d.flipped {
  transform: rotateY(180deg);
}

.edu-flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 22px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--edu-line);
  background: var(--edu-card);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.edu-flashcard-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--edu-card), var(--edu-bg));
  border-color: #fca5a5;
}

.dark .edu-flashcard-back {
  border-color: #881337;
}

.edu-sm2-rating-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.edu-sm2-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--edu-line);
  background: var(--edu-card);
  cursor: pointer;
  transition: all 0.15s ease;
}

.edu-sm2-btn:hover {
  transform: translateY(-2px);
}

.edu-sm2-btn.again:hover { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.edu-sm2-btn.hard:hover { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.edu-sm2-btn.good:hover { border-color: #3b82f6; background: rgba(59, 130, 246, 0.08); }
.edu-sm2-btn.easy:hover { border-color: #10b981; background: rgba(16, 185, 129, 0.08); }

.edu-sm2-btn strong { font-size: 12px; }
.edu-sm2-btn small { font-size: 9px; color: var(--edu-muted); }

/* ==========================================================================
   Future Pathways Hub & University Prospectuses
   ========================================================================== */
.edu-pathways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin: 20px 0;
}

.edu-uni-card {
  background: var(--edu-card);
  border: 1px solid var(--edu-line);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.edu-uni-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
  border-color: #fda4af;
}

.edu-uni-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.edu-uni-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--edu-red-soft);
  color: var(--edu-red-dark);
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ==========================================================================
   Clean Print Styles for Mock Exams
   ========================================================================== */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt !important;
  }
  .edu-rail, .edu-mobile-topbar, .edu-mobile-menu, .edu-mobile-home, .edu-mobile-signin,
  .study-top, .study-footer, #toast, .hero-actions, button:not(.print-allow),
  .edu-cmd-palette, .edu-onboarding-modal, .reader-heading, .reader-picker, .reader-tabs,
  .reader-timer-bar, .reader-layout-selector, .pane-toolbar, .reader-ai,
  #cmd-open-btn, .edu-menu-scrim, .top-home {
    display: none !important;
  }
  #app, #study-main, #reader-main {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .ultra-panel {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .page-break {
    page-break-before: always;
  }
  details[open] summary,
  details summary {
    display: none !important;
  }
}

/* ==========================================================================
   Pre-Checkout Recurring Billing Modal (PayFast Compliance)
   ========================================================================== */
.edu-checkout-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: 92vw;
  max-width: 520px;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.edu-checkout-modal::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
}