/* ===== Student site: colourful, mobile-first ===== */
:root { --radius: 1rem; }
body { font-family: 'Poppins', 'Noto Sans Sinhala', system-ui, sans-serif; background: #f4f6fd; color: #1f2937; }

.site-nav { background: linear-gradient(90deg, #4338ca, #7c3aed 60%, #db2777); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.site-nav .nav-link { border-radius: .6rem; }
.site-nav .nav-link:hover { background: rgba(255,255,255,.15); }
.credit-pill { background: #fef3c7; color: #92400e; border-radius: 999px; padding: .25rem .8rem; font-weight: 600; text-decoration: none; }

.card { border: 0 !important; border-radius: var(--radius) !important; box-shadow: 0 6px 20px rgba(31,41,55,.08); }
.btn { border-radius: .7rem; }
.btn-primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); border: 0; }
.btn-success { background: linear-gradient(135deg, #16a34a, #22c55e); border: 0; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #f97316); border: 0; color: #fff; }
.form-control, .form-select { border-radius: .7rem; min-height: 44px; }

/* hero */
.hero { background: linear-gradient(135deg, #4338ca, #7c3aed 55%, #ec4899); color: #fff; border-radius: 1.5rem;
  padding: 3rem 1.5rem; text-align: center; box-shadow: 0 16px 40px rgba(79,70,229,.35); }
.hero h1 { font-weight: 700; }

.feature-card { background: #fff; border-radius: var(--radius); padding: 1.5rem; height: 100%; text-align: center;
  box-shadow: 0 6px 20px rgba(31,41,55,.08); }
.feature-icon { width: 64px; height: 64px; border-radius: 50%; color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1.8rem; margin: 0 auto .8rem; }

/* subject cards: each one gets its own colour */
.subject-card { transition: transform .15s ease, box-shadow .15s ease; border-radius: var(--radius); color: #fff; text-align: center; padding: 1.6rem .8rem; }
.subject-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.subject-card i { font-size: 2.4rem; }
.sc-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.sc-1 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.sc-2 { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.sc-3 { background: linear-gradient(135deg, #f97316, #f59e0b); }
.sc-4 { background: linear-gradient(135deg, #16a34a, #84cc16); }
.sc-5 { background: linear-gradient(135deg, #0d9488, #22c55e); }
.grad-a { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.grad-b { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.grad-c { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }

/* exam page */
.q-nav-btn { width: 44px; height: 44px; padding: 0; border-radius: .7rem; }
.q-nav-btn.answered { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
.q-nav-btn.current { outline: 3px solid #4f46e5; outline-offset: 1px; }
#examTimer { font-variant-numeric: tabular-nums; }
.opt-btn { padding: 1rem 1.1rem; border-radius: .8rem !important; margin-bottom: .5rem; border: 2px solid #e5e7eb !important; }
.opt-btn.active { background: #4f46e5; border-color: #4f46e5 !important; color: #fff; }
.exam-bar { background: #fff; border-radius: var(--radius); padding: .8rem 1rem; box-shadow: 0 6px 20px rgba(31,41,55,.08); }

.status-badge-completed { background: #16a34a; }
.status-badge-pending { background: #f59e0b; color: #000; }
.status-badge-rejected { background: #dc2626; }
.credit-hero { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; border-radius: var(--radius); }

@media (max-width: 575.98px) {
  .hero { padding: 2rem 1rem; }
  .hero h1 { font-size: 1.8rem; }
  main.container { padding-left: .8rem; padding-right: .8rem; }
  .btn-stack-sm { width: 100%; }
}

/* ===== Homepage quick-quiz widget ===== */
.quiz-card { border-left: 6px solid #4f46e5; }
.quiz-stat-pill { border-radius: 1rem; padding: .8rem 1rem; color: #fff; text-align: center; height: 100%;
  box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.hq-opt.hq-correct { background: #16a34a !important; border-color: #16a34a !important; color: #fff; }
.hq-opt.hq-wrong { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff; }
.reward-chip { background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: .35rem .9rem;
  font-size: .85rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.cta-banner { background: linear-gradient(135deg, #7c3aed, #ec4899); color: #fff; border-radius: 1.5rem;
  padding: 2.5rem 1.5rem; box-shadow: 0 14px 34px rgba(124,58,237,.35); }

@media (max-width: 575.98px) {
  .quiz-stat-pill { padding: .6rem .5rem; }
}