:root{
  --sky: linear-gradient(180deg,#dff3ff, #fefefe);
  --ground: #f8fafc;
  --primary:#6c5ce7;
  --accent:#00b894;
  --danger:#e17055;
  --card:#ffffffee;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 18px;
    --cat-6-10: #ffb74d;
  --cat-11-12: #4db6ac;
  --cat-above-12: #7986cb;
  --cat-teachers: #81c784;
  --cat-parents: #ba68c8;
}
body[data-category="6-10"] { --accent: var(--cat-6-10); }
body[data-category="11-12"] { --accent: var(--cat-11-12); }
body[data-category="above-12"] { --accent: var(--cat-above-12); }
body[data-category="teachers"] { --accent: var(--cat-teachers); }
body[data-category="parents"] { --accent: var(--cat-parents); }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Poppins, Arial, sans-serif;background:var(--ground);color:#222}

.nav a{margin:0 8px;text-decoration:none;color:#333;font-weight:500}
.page{padding:20px;min-height:calc(100vh - 120px)}
.footer{padding:24px;text-align:center;color:#666}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:10px 16px;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn.outline{background:#fff;color:#333;border:2px solid #ddd}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.auth{max-width:420px;margin:40px auto}
.input{width:100%;padding:12px 14px;border-radius:12px;border:2px solid #eee;margin:8px 0;font-size:16px}
.helper{color:#777;font-size:.9rem}
.gameboard{position:relative;min-height:70vh;border-radius:24px;background:var(--sky);padding:20px;overflow:hidden}
.path{position:absolute;inset:0;pointer-events:none}
.station{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.station .bubble{width:90px;height:90px;border-radius:999px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow);transition:.2s;border:4px solid rgba(0,0,0,.04)}
.station .bubble:hover{transform:translateY(-6px) rotate(-2deg)}
.station .title{font-weight:700;max-width:120px}
.tabs{display:flex;gap:8px;margin:12px 0}
.tab{padding:8px 12px;border-radius:12px;background:#f1f5f9;cursor:pointer}
.tab.active{background:#fff;box-shadow:var(--shadow)}
.tabpanel{display:none}
.tabpanel.active{display:block}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.role-student .topbar{background:#fff5f8}
.role-teacher .topbar{background:#f2fff7}
.role-parent .topbar{background:#f5fbff}
.badge{padding:4px 8px;border-radius:10px;background:#ecf0ff;font-size:12px}
.progress{height:10px;background:#eee;border-radius:10px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--accent);width:0%}
/* Sidebar layout */
.layout{display:flex;min-height:100vh;background:#f9fafc;}
.sidebar{
  width:230px;flex-shrink:0;background:#fff;box-shadow:0 0 15px rgba(0,0,0,.05);
  padding:20px;position:relative;z-index:1000;transition:.3s;
}
.sidebar .logo{font-weight:700;font-size:1.2rem;margin-bottom:20px;}
.sidebar .toggle{display:none;position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;cursor:pointer;}
.sidebar nav{display:flex;flex-direction:column;gap:8px;}
.sidebar .nav-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:#333;font-weight:500;transition:.2s;
}
.sidebar .nav-link:hover{background:#f1f5ff;color:var(--primary);}
.main-content{flex:1;display:flex;flex-direction:column;}

.breadcrumbs{color:#555;font-size:.95rem;}
.breadcrumbs i{margin-right:5px;color:var(--primary);}
.user-info{display:flex;align-items:center;gap:6px;color:#444;font-weight:500;}
.page{padding:20px;animation:fadeIn .3s ease;}
.fade-in{animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

/* Responsive */
@media(max-width:900px){
  .sidebar{position:fixed;left:-240px;top:0;height:100%;width:220px;transition:.3s;background:#fff;}
  .sidebar.open{left:0;}
  .sidebar .toggle{display:block;}
  .main-content{margin-left:0;}
}
/* ========== LMS LAYOUT ========== */
.lms-layout{display:flex;min-height:100vh;background:#f9fafc;}
.sidebar{
  width:250px;background:#fff;box-shadow:2px 0 12px rgba(0,0,0,.05);
  display:flex;flex-direction:column;transition:.3s;
}
.sidebar .logo{
  font-weight:700;font-size:1.2rem;padding:18px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #eee;color:var(--primary);
}
.sidebar-toggle{background:none;border:none;font-size:20px;color:#555;cursor:pointer;}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #eee;}
.sidebar-user .fa-user-circle{font-size:32px;color:var(--primary);}
.sidebar-user .user-name{font-weight:600;}
.sidebar-user .user-role{font-size:.8rem;color:#777;}
.sidebar-nav{flex:1;display:flex;flex-direction:column;padding:10px;}
.sidebar-nav .nav-link{
  display:flex;align-items:center;gap:12px;padding:10px 14px;margin:4px 0;
  border-radius:12px;color:#444;text-decoration:none;font-weight:500;
  transition:.2s;
}
.sidebar-nav .nav-link:hover{background:#eef4ff;color:var(--primary);}
.sidebar-nav .nav-link.active{
  background:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.1);
}
.main-content{flex:1;display:flex;flex-direction:column;}

.breadcrumbs{color:#555;font-size:.95rem;}
.quick-actions{display:flex;gap:10px;}
.btn.small{padding:6px 10px;font-size:.85rem;border-radius:8px;}
.page{padding:24px;}
.fade-in{animation:fadeIn .4s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

@media(max-width:900px){
  .sidebar{position:fixed;left:-260px;top:0;height:100%;z-index:1000;}
  .sidebar.open{left:0;}
  .main-content{margin-left:0;}
}

/* Chapter card enhancements */
.chapter-card{background:#fff;border-radius:16px;padding:18px;margin:10px 0;box-shadow:0 4px 10px rgba(0,0,0,.04);transition:.2s;}
.chapter-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.08);}
.chapter-card h3{margin:0 0 8px;}
.chapter-card .tabs{display:flex;gap:10px;margin-bottom:8px;}
.chapter-card .tab{padding:6px 10px;border-radius:10px;background:#f3f5f8;cursor:pointer;}
.chapter-card .tab.active{background:var(--primary);color:#fff;}

.path{
  width:100%;height:600px;overflow:visible;
}
#progressPath{
  transition:stroke-dasharray 1s ease-in-out;
}
@keyframes pulseGlow{
  0%{filter:drop-shadow(0 0 6px var(--accent));}
  50%{filter:drop-shadow(0 0 16px var(--accent));}
  100%{filter:drop-shadow(0 0 6px var(--accent));}
}
#progressPath.animate{
  animation:pulseGlow 2.5s infinite;
}

.bubble.unlocked{
  border:3px solid var(--accent);
  animation:glowPulse 2s infinite;
}
@keyframes glowPulse{
  0%{box-shadow:0 0 6px var(--accent);}
  50%{box-shadow:0 0 18px var(--accent);}
  100%{box-shadow:0 0 6px var(--accent);}
}
.bubble.complete{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 20px var(--accent);
}

/* ========== FIXED & CLICK-COLLAPSIBLE SIDEBAR ========== */
:root {
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 70px;
  --topbar-height: 60px;
}

/* Sidebar base */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: #fff;
  box-shadow: 2px 0 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
}

/* Collapsed state */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* Hide logo text, main icon, and user details when collapsed */
.sidebar.collapsed .logo-text,
.sidebar.collapsed .main-icon,
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-role,
.sidebar.collapsed .category-switcher {
  display: none !important;
}

/* Center the menu button when collapsed */
.sidebar.collapsed .logo {
  justify-content: center;
}

/* Sidebar logo area */
.logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px;
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: 1px solid #eee;
  color: var(--primary);
}
.logo .fa-bars {
  cursor: pointer;
  color: #444;
  font-size: 1.3rem;
}
.logo .fa-bars:hover {
  color: var(--primary);
}

/* Sidebar user section */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}
.sidebar-user .fa-user-circle {
  font-size: 32px;
  color: var(--primary);
  transition: all 0.3s ease;
}
.sidebar-user .user-name {
  font-weight: 600;
}
.sidebar-user .user-role {
  font-size: 0.8rem;
  color: #777;
}

/* Compact layout when collapsed */
.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 12px 0;
}
.sidebar.collapsed .sidebar-user .fa-user-circle {
  font-size: 24px;           /* smaller */
  margin: 0;
}
.sidebar.collapsed .sidebar-user div {
  display: none;             /* hide name + role */
}
.sidebar.collapsed .sidebar-user .fa-user-circle {
  font-size: 24px;
  padding: 6px;
  border-radius: 50%;
  background: #f4f6ff;
  color: var(--primary);
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

/* Sidebar navigation */
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 4px 0;
  border-radius: 12px;
  color: #444;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.sidebar-nav .nav-link:hover {
  background: #eef4ff;
  color: var(--primary);
}

.sidebar-nav .nav-link.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* 🔹 COLLAPSED STATE FIX */
.sidebar.collapsed .nav-link {
  justify-content: center;        /* center icons */
  padding: 12px 0;
  gap: 0;
}

.sidebar.collapsed .nav-link span {
  display: none !important;       /* hide link names */
}

.sidebar.collapsed .nav-link i {
  font-size: 1.3rem;              /* resize icons */
  margin: 0;
}


/* Topbar and main content adjust */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  transition: left 0.3s ease;
  z-index: 900;
}


.main-content {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  transition: margin-left 0.3s ease;
  background: var(--ground);
  min-height: 100vh;
}
.main-content.collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

/* Mobile behavior */
@media (max-width: 900px) {
  .sidebar {
    left: -260px;
    width: 220px;
  }
  .sidebar.open {
    left: 0;
  }
  .topbar {
    left: 0;
    width: 100%;
  }
  .main-content {
    margin-left: 0;
    padding-top: var(--topbar-height);
  }
}

/* ========== MOBILE SIDEBAR HANDLE & SLIDE EFFECT ========== */

/* Sidebar hidden off-screen by default in mobile */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -240px;
    width: 220px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
    transition: left 0.35s ease, transform 0.35s ease;
    z-index: 1000;
  }

  /* When open, slide it in */
  .sidebar.open {
    left: 0;
  }

  /* Handle to pull the sidebar */
  .sidebar-handle {
    display: flex;
    position: fixed;
    top: 20%;
    left: 0;
    transform: translateY(-50%);
    width: 26px;
    height: 60px;
    background: var(--primary);
    color: #fff;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1100;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    transition: left 0.35s ease, background 0.3s ease;
  }

  .sidebar-handle:hover {
    background: #5a4ddc;
  }

  /* When sidebar is open, push handle aside */
  .sidebar.open ~ .sidebar-handle {
    left: 220px; /* matches sidebar width */
  }
}

/* Hide handle on desktop */
@media (min-width: 901px) {
  .sidebar-handle {
    display: none;
  }
}
/* ========== SIDEBAR OVERLAY EFFECT ========== */
.sidebar-overlay {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0); /* hidden initially */
    backdrop-filter: blur(0px);
    transition: background 0.35s ease, backdrop-filter 0.35s ease;
    z-index: 900; /* below sidebar but above main content */
    pointer-events: none;
  }

  /* When sidebar is open */
  .sidebar.open ~ .sidebar-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    pointer-events: all; /* enable closing on click */
  }
}
/* ========== MOBILE BOTTOM NAVIGATION (POLISHED) ========== */
.mobile-nav {
  display: none;
}

@media (max-width: 900px) {
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #fff;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1100;
    border-top: 1px solid #eee;
    transition: transform 0.3s ease;
  }

  /* Hide when scrolling down */
  .mobile-nav.hide {
    transform: translateY(100%);
  }

  .mobile-nav .nav-item {
    flex: 1;
    text-align: center;
    color: #666;
    font-size: 0.85rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
  }

  .mobile-nav .nav-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
    transition: color 0.3s ease, transform 0.3s ease;
  }

  .mobile-nav .nav-item.active,
  .mobile-nav .nav-item:hover {
    color: var(--primary);
  }

  .mobile-nav .nav-item.active i {
    transform: scale(1.1);
    color: var(--primary);
  }



  .mobile-nav .center-btn span {
    display: none;
  }
}
/* Center button (Modules) with pulse animation */
.mobile-nav .center-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  background: var(--primary);
  border-radius: 50%;
  border: 5px solid var(--ground); /* adaptive outline color */
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  font-size: 1.5rem;
  z-index: 1200;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: breathePulse 3s ease-in-out infinite;
}

/* Slight scale and glow change to mimic breathing */
@keyframes breathePulse {
  0%,100% { box-shadow: 0 0 10px var(--primary); }
  50% { box-shadow: 0 0 25px var(--primary); }
}


/* Hover overrides animation temporarily */
.mobile-nav .center-btn:hover {
  animation: none;
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ========== MOBILE BOTTOM NAVIGATION ========== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: #fff;
  border-top: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
}

.mobile-nav a {
  text-decoration: none;
  color: #555;
  font-weight: 500;
  text-align: center;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.mobile-nav a i {
  font-size: 1.4rem;
}

/* ===== Special active highlight for center button ===== */
.mobile-nav .center-btn.active-center {
  background: var(--primary);
  box-shadow: 0 0 18px var(--primary);
  border: 4px solid #fff;
}

.mobile-nav .center-btn.active-center i {
  color: #fff;
}



/* Create ring ripples */
.mobile-nav .center-btn.active-center::before,
.mobile-nav .center-btn.active-center::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.6;
  animation: rippleRing 2.5s infinite ease-out;
}

/* Second ring starts slightly later for smooth overlap */
.mobile-nav .center-btn.active-center::after {
  animation-delay: 1.2s;
}

@keyframes rippleRing {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.6;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0.15;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.mobile-nav .center-btn.active-center i {
  color: #fff;
  position: relative;
  z-index: 2;
}

/* Active page highlight */
.mobile-nav a.active {
  color: var(--primary);
}

.mobile-nav a.active i {
  color: var(--primary);
}

/* Hide labels for center button */
.mobile-nav .center-btn span {
  display: none;
}

/* Only show on mobile */
@media (min-width: 901px) {
  .mobile-nav { display: none !important; }
}

@media (max-width: 900px) {
  .mobile-nav { display: flex; }
}

.health-fitness-guide h2 { color: #2c3e50; }
.target-audience div { transition: transform 0.3s; }
.target-audience div:hover { transform: translateY(-5px); }
.impact-card { transition: all 0.3s ease; }
.impact-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.indicator-category { transition: all 0.3s ease; }
.indicator-category:hover { transform: translateY(-5px); }
.step-card { transition: all 0.3s ease; }
.step-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
table { border-radius: 8px; overflow: hidden; }
table th { font-weight: 600; }
.highlight-box { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}