/*
Theme Name: SkillMalawi
Theme URI: http://localhost/skillmalawi
Author: SkillMalawi
Author URI: http://localhost/skillmalawi
Description: SkillMalawi — Malawi's digital learning platform. Custom theme built with Bootstrap 5, custom post types for Courses, Instructors, Projects, Learning Paths and Opportunities.
Version: 1.0.0
Text Domain: skillmalawi
Tags: education, lms, custom-colors
*/

:root {
  --sm-primary: #0d6b4f;
  --sm-primary-2: #0aa06d;
  --sm-blue: #0b3d91;
  --sm-blue-2: #1857c4;
  --sm-accent: #ffb703;
  --sm-ink: #0f172a;
  --sm-ink-soft: #334155;
  --sm-muted: #64748b;
  --sm-bg: #f6f9fc;
  --sm-card: #ffffff;
  --sm-border: #e6ecf3;
  --sm-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.16);
  --sm-radius: 16px;
}

[data-bs-theme="dark"] {
  --sm-ink: #f1f5f9;
  --sm-ink-soft: #cbd5e1;
  --sm-muted: #94a3b8;
  --sm-bg: #0b1220;
  --sm-card: #121a2b;
  --sm-border: #1f2a44;
  --sm-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}

html, body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--sm-ink);
  background: var(--sm-bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Space Grotesk','Plus Jakarta Sans',sans-serif; letter-spacing:-0.01em; }

/* ============ Bootstrap overrides ============ */
.btn-primary { --bs-btn-bg: var(--sm-blue); --bs-btn-border-color: var(--sm-blue); --bs-btn-hover-bg: #0a327a; --bs-btn-hover-border-color: #0a327a; --bs-btn-active-bg: #0a327a; }
.btn-outline-primary { --bs-btn-color: var(--sm-blue); --bs-btn-border-color: var(--sm-blue); --bs-btn-hover-bg: var(--sm-blue); --bs-btn-hover-border-color: var(--sm-blue); }
.btn-success, .bg-success { --bs-btn-bg: var(--sm-primary); --bs-btn-border-color: var(--sm-primary); }
.text-success { color: var(--sm-primary) !important; }
.text-primary { color: var(--sm-blue) !important; }
.bg-primary { background: var(--sm-blue) !important; }
a { color: var(--sm-blue); text-decoration: none; }
a:hover { color: var(--sm-blue-2); }

/* ============ Navbar ============ */
.sm-nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--sm-border);
}
[data-bs-theme="dark"] .sm-nav { background: rgba(11,18,32,0.9); }
.sm-nav .nav-link {
  color: var(--sm-ink-soft);
  font-weight: 500;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  transition: 0.15s;
}
.sm-nav .nav-link:hover, .sm-nav .nav-link.active {
  color: var(--sm-blue);
  background: rgba(11, 61, 145, 0.08);
}
.sm-logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--sm-blue), var(--sm-primary));
  color: white; font-size: 1.15rem;
  box-shadow: 0 6px 16px -6px rgba(11,61,145,0.5);
}
.sm-logo-text { font-family: 'Space Grotesk',sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--sm-ink); }
.sm-accent { color: var(--sm-primary); }
.sm-icon-btn { width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center; border-radius: 10px; }

/* ============ Hero ============ */
.sm-hero {
  position: relative;
  padding: 4.5rem 0 3rem;
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(10,160,109,0.14), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(11,61,145,0.14), transparent 60%),
    linear-gradient(180deg, #f0f6ff 0%, var(--sm-bg) 100%);
  overflow: hidden;
}
[data-bs-theme="dark"] .sm-hero {
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(10,160,109,0.12), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(11,61,145,0.25), transparent 60%),
    linear-gradient(180deg, #0d1526 0%, var(--sm-bg) 100%);
}
.sm-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.sm-hero .sm-hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: rgba(11,61,145,0.09); color: var(--sm-blue);
  font-weight: 600; font-size: .85rem;
}
.sm-hero-illustration {
  position: relative; min-height: 380px; border-radius: 22px;
  background: linear-gradient(135deg, #0b3d91 0%, #0d6b4f 100%);
  padding: 2rem;
  color: white;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(11,61,145,.4);
}
.sm-hero-illustration::before {
  content:""; position:absolute; inset: -30% -30% auto auto; width: 400px; height: 400px;
  background: radial-gradient(closest-side, rgba(255,183,3,0.35), transparent 70%);
  border-radius: 50%;
}
.sm-hero-illustration .sm-float-card {
  position: absolute; background: white; color: var(--sm-ink);
  border-radius: 14px; padding: .75rem 1rem;
  box-shadow: var(--sm-shadow);
  display:flex; align-items:center; gap:.6rem; font-weight: 600;
  animation: floaty 5s ease-in-out infinite;
}
.sm-hero-illustration .sm-float-card small { color: var(--sm-muted); font-weight: 500;}
.sm-hero-illustration .fc-1 { top: 20px; right: 20px; animation-delay: 0s; }
.sm-hero-illustration .fc-2 { bottom: 30px; left: 20px; animation-delay: 1.5s; }
.sm-hero-illustration .fc-3 { top: 45%; right: -20px; animation-delay: 3s; }
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }

.sm-hero-scene {
  position:absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
  opacity: .95;
}
.sm-hero-scene i {
  font-size: 8rem; color: rgba(255,255,255,0.14);
}

/* ============ Stat pills ============ */
.sm-stats { gap: 1rem; }
.sm-stat {
  background: var(--sm-card); border: 1px solid var(--sm-border);
  border-radius: 14px; padding: 1rem 1.2rem; min-width: 150px;
  box-shadow: var(--sm-shadow);
}
.sm-stat .num { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.7rem; color: var(--sm-blue); line-height: 1; }
.sm-stat .lbl { color: var(--sm-muted); font-size: .82rem; margin-top:.2rem; }

/* ============ Search bar ============ */
.sm-search-card {
  background: var(--sm-card); border-radius: 20px; box-shadow: var(--sm-shadow);
  border: 1px solid var(--sm-border);
  padding: 1.25rem;
  margin-top: -40px; position: relative; z-index: 2;
}
.sm-search-card .form-control, .sm-search-card .form-select {
  border-radius: 12px; border-color: var(--sm-border); background: transparent; color: var(--sm-ink);
}

/* ============ Section ============ */
.sm-section { padding: 4rem 0; }
.sm-section-title { font-weight: 800; letter-spacing: -.02em; }
.sm-eyebrow {
  color: var(--sm-primary); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem;
}

/* ============ Course cards ============ */
.sm-course {
  background: var(--sm-card);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  overflow: hidden;
  transition: 0.2s;
  height: 100%;
  display:flex; flex-direction:column;
}
.sm-course:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow); border-color: rgba(11,61,145,0.25); }
.sm-course .thumb {
  aspect-ratio: 16/9;
  position: relative;
  display:flex; align-items:center; justify-content:center;
  font-size: 3.2rem; color: white;
  overflow: hidden;
}
.sm-course .thumb .cat-pill {
  position:absolute; top:12px; left:12px;
  background: rgba(0,0,0,0.35); color:white;
  font-size: .72rem; padding: .3rem .6rem; border-radius: 999px; font-weight:600;
  backdrop-filter: blur(6px);
}
.sm-course .thumb .price-pill {
  position:absolute; top:12px; right:12px;
  background: white; color: var(--sm-blue);
  font-size: .72rem; padding: .3rem .6rem; border-radius: 999px; font-weight:700;
}
.sm-course .thumb .price-pill.free { background: var(--sm-primary); color: white; }
.sm-course .body { padding: 1rem 1.1rem 1.1rem; flex: 1; display:flex; flex-direction: column; }
.sm-course .body .title { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.sm-course .body .desc { color: var(--sm-muted); font-size: .85rem; margin-top:.35rem; }
.sm-course .body .meta { color: var(--sm-muted); font-size: .78rem; margin-top: .5rem; }
.sm-course .body .meta i { color: var(--sm-primary); }
.sm-course .body .footer { margin-top: auto; padding-top: 0.9rem; border-top: 1px dashed var(--sm-border); }
.sm-progress { height: 6px; border-radius: 999px; background: rgba(11,61,145,0.1);}
.sm-progress .bar { height:100%; border-radius: 999px; background: linear-gradient(90deg, var(--sm-blue), var(--sm-primary));}

/* Course thumb gradients */
.thumb.g1 { background: linear-gradient(135deg,#0b3d91,#4d6ef7); }
.thumb.g2 { background: linear-gradient(135deg,#0d6b4f,#3ecf8e); }
.thumb.g3 { background: linear-gradient(135deg,#c2410c,#f97316); }
.thumb.g4 { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.thumb.g5 { background: linear-gradient(135deg,#0891b2,#22d3ee); }
.thumb.g6 { background: linear-gradient(135deg,#be123c,#fb7185); }
.thumb.g7 { background: linear-gradient(135deg,#0f172a,#334155); }
.thumb.g8 { background: linear-gradient(135deg,#166534,#84cc16); }
.thumb.g9 { background: linear-gradient(135deg,#1e40af,#0ea5e9); }
.thumb.g10 { background: linear-gradient(135deg,#831843,#f472b6); }
.thumb.g11 { background: linear-gradient(135deg,#065f46,#10b981); }
.thumb.g12 { background: linear-gradient(135deg,#78350f,#f59e0b); }

/* ============ Category grid ============ */
.sm-cat {
  background: var(--sm-card); border: 1px solid var(--sm-border);
  border-radius: 14px; padding: 1.2rem; text-align: center;
  transition: 0.15s; cursor: pointer; height: 100%;
}
.sm-cat:hover { transform: translateY(-3px); box-shadow: var(--sm-shadow); border-color: rgba(13,107,79,0.35); }
.sm-cat .icon {
  width: 50px; height: 50px; border-radius: 12px; display:inline-flex;
  align-items:center; justify-content:center; font-size: 1.4rem;
  margin: 0 auto .7rem;
  background: rgba(13,107,79,0.1); color: var(--sm-primary);
}
.sm-cat h6 { margin: 0; font-size: .95rem; font-weight: 700; }
.sm-cat small { color: var(--sm-muted); }

/* ============ Learning paths ============ */
.sm-path {
  background: var(--sm-card); border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius); padding: 1.4rem; height: 100%;
  position: relative; overflow: hidden;
}
.sm-path::before {
  content:""; position:absolute; inset:auto -40% -50% auto; width:220px; height:220px;
  background: radial-gradient(closest-side, rgba(10,160,109,0.18), transparent 70%);
  border-radius: 50%;
}
.sm-path h5 { font-weight: 800; }
.sm-path .step {
  display:flex; align-items:center; gap:.7rem;
  padding: .55rem .8rem; border-radius: 10px;
  background: rgba(11,61,145,0.05); margin-bottom: .4rem;
  font-size: .9rem;
}
.sm-path .step.done { background: rgba(13,107,79,0.1); color: var(--sm-primary); text-decoration: line-through; }
.sm-path .step .n { width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:white; font-size:.75rem; color: var(--sm-blue); font-weight:700; }
.sm-path .step.done .n { background: var(--sm-primary); color:white; }

/* ============ How it works ============ */
.sm-step {
  background: var(--sm-card); border:1px solid var(--sm-border);
  border-radius: var(--sm-radius); padding: 1.5rem; height:100%;
  position: relative;
}
.sm-step .num-badge {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg,var(--sm-blue),var(--sm-primary)); color:white;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem;
  margin-bottom: .8rem;
}

/* ============ Testimonials ============ */
.sm-testimonial {
  background: var(--sm-card); border-radius: var(--sm-radius); padding: 1.5rem;
  border: 1px solid var(--sm-border); height: 100%;
  position: relative;
}
.sm-testimonial .quote-mark {
  position:absolute; top:-14px; left: 18px;
  background: var(--sm-primary); color:white; border-radius: 8px;
  padding: .3rem .5rem; font-size: 1rem;
}
.sm-testimonial .avatar {
  width:44px;height:44px;border-radius:50%;
  background: linear-gradient(135deg,var(--sm-blue),var(--sm-primary));
  color:white; display:inline-flex; align-items:center; justify-content:center; font-weight: 700;
}

/* ============ Dashboard ============ */
.sm-dashboard { background: var(--sm-bg); padding: 2rem 0 4rem; }
.sm-kpi {
  background: var(--sm-card); border-radius: var(--sm-radius);
  border:1px solid var(--sm-border); padding: 1.2rem;
  display:flex; align-items:center; gap: 1rem;
}
.sm-kpi .ico { width:52px; height:52px; border-radius:12px; display:flex;align-items:center;justify-content:center; font-size:1.3rem; }
.sm-kpi .num { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.6rem; }
.sm-kpi .lbl { color: var(--sm-muted); font-size:.85rem; }

.sm-streak-day {
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding: .6rem 0; border-radius: 10px; background: rgba(11,61,145,0.05);
  flex: 1; font-size:.78rem; color: var(--sm-muted);
}
.sm-streak-day .dot { width:26px;height:26px;border-radius:50%; background: white; display:inline-flex;align-items:center;justify-content:center; color: var(--sm-muted); font-size: .8rem; border: 1px solid var(--sm-border);}
.sm-streak-day.done .dot { background: var(--sm-primary); color: white; border-color: var(--sm-primary);}
.sm-streak-day.today .dot { background: var(--sm-accent); color: var(--sm-ink); border-color: var(--sm-accent);}

/* ============ Lesson player ============ */
.sm-lesson-shell { display:grid; grid-template-columns: 280px 1fr 320px; gap: 1rem; }
@media (max-width: 1100px) { .sm-lesson-shell { grid-template-columns: 1fr; } }
.sm-lesson-card { background: var(--sm-card); border:1px solid var(--sm-border); border-radius:var(--sm-radius); padding: 1rem; }
.sm-lesson-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius: 10px; cursor:pointer; font-size:.9rem; }
.sm-lesson-item:hover { background: rgba(11,61,145,0.06); }
.sm-lesson-item.active { background: rgba(11,61,145,0.12); font-weight: 600; color: var(--sm-blue); }
.sm-lesson-item .check {
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--sm-border); display:inline-flex; align-items:center; justify-content:center;
  font-size: .7rem; color: transparent;
}
.sm-lesson-item.done .check { background: var(--sm-primary); border-color: var(--sm-primary); color: white; }
.sm-video {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white; border-radius: var(--sm-radius);
  aspect-ratio: 16/9;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: .5rem; position: relative; overflow: hidden;
}
.sm-video .play-btn {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);
  display:flex;align-items:center;justify-content:center; font-size:2rem;
  border:2px solid rgba(255,255,255,0.4);
  cursor:pointer; transition:.2s;
}
.sm-video .play-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.05);}
.sm-video .wave {
  position:absolute; bottom: 12px; left:12px; right:12px; height: 4px;
  background: rgba(255,255,255,0.15); border-radius: 999px;
}
.sm-video .wave::before { content:""; display:block; height:100%; width: 42%; background: var(--sm-accent); border-radius:999px; }

/* Quiz */
.sm-quiz-option {
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border-radius: 12px;
  border: 1px solid var(--sm-border); cursor: pointer; transition:.15s; margin-bottom: .5rem;
  background: var(--sm-card);
}
.sm-quiz-option:hover { border-color: var(--sm-blue); }
.sm-quiz-option.selected { border-color: var(--sm-blue); background: rgba(11,61,145,0.05); }
.sm-quiz-option.correct { border-color: var(--sm-primary); background: rgba(13,107,79,0.1); }
.sm-quiz-option.wrong { border-color: #dc2626; background: rgba(220,38,38,0.08); }
.sm-quiz-option .letter { width:30px;height:30px;border-radius:8px; background: rgba(11,61,145,0.08); color: var(--sm-blue); font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem;}

/* ============ Certificate ============ */
.sm-certificate {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 8px double #0b3d91;
  border-radius: 12px; padding: 3rem 2rem; text-align: center;
  color: #0f172a; position: relative; overflow: hidden;
}
.sm-certificate::before, .sm-certificate::after {
  content:""; position:absolute; width: 220px; height: 220px; border-radius: 50%; opacity: .12;
}
.sm-certificate::before { background: var(--sm-blue); top:-90px; left:-90px; }
.sm-certificate::after { background: var(--sm-primary); bottom:-90px; right:-90px; }
.sm-certificate .cert-mark {
  font-size: 3rem; color: var(--sm-primary);
}
.sm-certificate h2 { font-family: 'Space Grotesk',sans-serif; font-weight: 800; letter-spacing: .01em; }
.sm-certificate .cert-name {
  font-family: 'Space Grotesk',sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--sm-blue);
  margin: .5rem 0 .5rem;
  border-bottom: 2px dashed var(--sm-blue); display: inline-block; padding: 0 1rem .3rem;
}
.sm-certificate .cert-course { font-weight: 700; font-size: 1.3rem; margin-top: .5rem; }
.sm-certificate .cert-seal {
  position: absolute; bottom: 30px; right: 40px;
  width: 90px; height:90px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffd60a, #ffb703);
  color: #0f172a; display:flex; flex-direction:column; align-items:center;justify-content:center;
  font-size: .7rem; font-weight: 700; text-align:center; line-height:1;
  border: 4px solid #f8fafc; box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* ============ Skills ============ */
.sm-skill { background: var(--sm-card); border:1px solid var(--sm-border); border-radius:14px; padding:1rem 1.2rem; }
.sm-skill .bar { height: 10px; border-radius:999px; background: rgba(11,61,145,0.08); overflow:hidden; margin-top: .4rem; }
.sm-skill .bar div { height:100%; border-radius:999px; background: linear-gradient(90deg,var(--sm-blue),var(--sm-primary));}
.sm-badge-skill {
  display:inline-flex; align-items:center; gap:.35rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: rgba(13,107,79,0.1); color: var(--sm-primary); font-weight: 600; font-size:.8rem;
  border: 1px solid rgba(13,107,79,0.2);
}

/* ============ Instructors ============ */
.sm-instructor {
  background: var(--sm-card); border:1px solid var(--sm-border); border-radius: var(--sm-radius);
  padding: 1.5rem; text-align:center;
  transition:.15s; height: 100%;
}
.sm-instructor:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow); }
.sm-instructor .avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg,var(--sm-blue),var(--sm-primary));
  color: white; display:inline-flex; align-items:center; justify-content:center;
  font-family: 'Space Grotesk',sans-serif; font-size: 2rem; font-weight: 700;
  margin-bottom: 1rem;
}

/* ============ Community ============ */
.sm-thread {
  background: var(--sm-card); border:1px solid var(--sm-border); border-radius: var(--sm-radius);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; display:flex; gap:1rem; align-items:center;
  cursor:pointer; transition:.15s;
}
.sm-thread:hover { border-color: var(--sm-blue); transform: translateX(3px); }
.sm-thread .avatar { width:44px;height:44px;border-radius:50%;background: linear-gradient(135deg,var(--sm-blue),var(--sm-primary)); color:white; display:flex;align-items:center;justify-content:center;font-weight:700;}
.sm-thread .meta { color: var(--sm-muted); font-size:.8rem; }

.sm-reply { padding: .8rem 1rem; border-radius: 12px; background: rgba(11,61,145,0.04); margin-bottom: .6rem; }
.sm-reply .who { font-weight: 700; font-size:.85rem; }
.sm-reply .when { font-size:.72rem; color: var(--sm-muted); }

/* ============ Opportunities ============ */
.sm-job { background: var(--sm-card); border:1px solid var(--sm-border); border-radius: var(--sm-radius); padding: 1.2rem; height:100%; }
.sm-job .logo { width:52px;height:52px;border-radius:12px;background: linear-gradient(135deg,var(--sm-blue),var(--sm-primary)); color: white; display:flex;align-items:center;justify-content:center; font-size:1.3rem;}
.sm-job .tag { font-size:.72rem; padding:.25rem .55rem; border-radius: 999px; background: rgba(13,107,79,0.1); color: var(--sm-primary); font-weight:600; }

/* ============ Admin ============ */
.sm-admin-shell { display:grid; grid-template-columns: 240px 1fr; gap:1rem; }
@media (max-width: 992px) { .sm-admin-shell { grid-template-columns: 1fr; } }
.sm-admin-side { background: var(--sm-card); border:1px solid var(--sm-border); border-radius: var(--sm-radius); padding: 1rem; height: fit-content; }
.sm-admin-side a { display:block; padding:.55rem .75rem; border-radius:10px; color: var(--sm-ink-soft); font-weight: 500; }
.sm-admin-side a:hover, .sm-admin-side a.active { background: rgba(11,61,145,0.1); color: var(--sm-blue); }
.sm-chart-bar { display:flex; align-items:flex-end; gap:.6rem; height: 220px; padding: 1rem 0; }
.sm-chart-bar .b {
  flex:1; background: linear-gradient(180deg,var(--sm-blue),var(--sm-primary));
  border-radius: 8px 8px 0 0; position: relative;
  transition: height .6s ease;
}
.sm-chart-bar .b span {
  position:absolute; bottom: -22px; left:0; right:0; text-align:center;
  font-size:.72rem; color: var(--sm-muted);
}
.sm-chart-bar .b::after {
  content: attr(data-val); position:absolute; top:-20px; left:0; right:0; text-align:center;
  font-size:.72rem; color: var(--sm-ink); font-weight:700;
}

/* ============ Global search overlay ============ */
.sm-search-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,.85); backdrop-filter: blur(12px);
  display: none; padding: 5rem 0;
  overflow-y: auto;
}
.sm-search-overlay.open { display: block; }
.sm-search-overlay .form-control { border-radius: 14px; padding: 1rem 1.2rem; font-size: 1.1rem; }
.sm-chip { background: rgba(255,255,255,0.14); color: white; padding: .5rem .9rem; border-radius: 999px; border: 0; cursor: pointer; }
.sm-chip:hover { background: rgba(255,255,255,0.24); }
.sm-search-result { background: white; padding: .9rem 1.1rem; border-radius: 12px; margin-bottom: .5rem; cursor: pointer; display:flex; gap: .8rem; align-items:center; }
.sm-search-result:hover { background: #f1f5f9; }

/* ============ Footer ============ */
.sm-footer {
  background: linear-gradient(180deg, #0a1526, #071021);
  color: #cbd5e1;
}
.sm-footer-links li { margin-bottom:.35rem; }
.sm-footer-links a { color: #cbd5e1; }
.sm-footer-links a:hover { color: var(--sm-accent); }
.sm-muted { color: #94a3b8; }
.sm-footer-hr { border-color: rgba(255,255,255,0.08); }
.sm-social {
  width: 36px; height: 36px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); color: white;
}
.sm-social:hover { background: var(--sm-primary); color:white; }

/* ============ Utility ============ */
.sm-card {
  background: var(--sm-card); border:1px solid var(--sm-border); border-radius: var(--sm-radius);
}
.sm-tag {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size: .74rem; padding: .28rem .6rem; border-radius: 999px;
  background: rgba(11,61,145,0.08); color: var(--sm-blue); font-weight: 600;
}
.sm-tag.green { background: rgba(13,107,79,0.1); color: var(--sm-primary); }
.sm-tag.orange { background: rgba(249,115,22,0.12); color: #c2410c; }
.sm-tag.dark { background: rgba(15,23,42,0.08); color: var(--sm-ink); }

.sm-modal {
  background: var(--sm-card); color: var(--sm-ink); border-radius: 18px; border: 1px solid var(--sm-border);
}
[data-bs-theme="dark"] .sm-modal .form-control, [data-bs-theme="dark"] .sm-modal .form-select {
  background: #0d1424; color: var(--sm-ink); border-color: var(--sm-border);
}

/* Difficulty pill */
.sm-diff { padding: .18rem .55rem; border-radius: 999px; font-size:.7rem; font-weight:700; }
.sm-diff.beginner { background: rgba(13,107,79,.15); color: var(--sm-primary); }
.sm-diff.intermediate { background: rgba(255,183,3,.2); color: #b06703; }
.sm-diff.advanced { background: rgba(220,38,38,.15); color: #b91c1c; }

/* Filter bar */
.sm-filter-bar { display:flex; flex-wrap: wrap; gap: .5rem; }
.sm-filter-bar .btn { border-radius: 999px; }

/* Assessment */
.sm-assess-option {
  border: 1px solid var(--sm-border); border-radius: 12px; padding: 1rem;
  cursor: pointer; text-align:center; transition:.15s; background: var(--sm-card);
}
.sm-assess-option:hover { border-color: var(--sm-blue); }
.sm-assess-option.active { background: rgba(11,61,145,0.08); border-color: var(--sm-blue); }
.sm-assess-option i { font-size: 1.6rem; color: var(--sm-primary); }

/* Info banner */
.sm-banner {
  background: linear-gradient(135deg, rgba(11,61,145,.08), rgba(13,107,79,.08));
  border: 1px dashed rgba(11,61,145,.3);
  border-radius: var(--sm-radius); padding: 1.5rem;
}

/* Toasts */
.toast { border-radius: 12px; border: 1px solid var(--sm-border); box-shadow: var(--sm-shadow); }