/* ==========================================================================
   GLOBAL MEDIA PROTECTION (PREVENT DIRECT SAVING & DRAGGING)
   - Inspect element and developer tools remain fully operational
   - Media elements (images, videos, audio, picture, canvas) cannot be dragged or long-press saved
   ========================================================================== */
img,
video,
audio,
picture,
canvas,
[data-media],
.media-protected {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  -webkit-touch-callout: none !important; /* Disables mobile iOS/Android "Save Image" popup */
}

/* ==========================================================================
   NAVBAR EXACT DIMENSIONS + SPACING + ALIGNMENT
   ========================================================================== */

/* 1. MAIN NAVBAR CONTAINER */
.site-header {
  width: 100% !important;
  height: 76px !important; /* 72–80px */
  min-height: 76px !important;
  max-height: 76px !important;
  padding: 0 28px !important; /* 20–32px */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

/* 2. LOGO */
.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  width: auto !important;
  max-width: 80px !important; /* 70–80px */
  height: 58px !important; /* 55–65px */
  min-height: 55px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 3. SEARCH BOX + AI (18–24px spacing from LOGO) */
.header-search-wrap {
  flex: 0 1 380px !important;
  width: 380px !important; /* 350–420px */
  max-width: 420px !important;
  min-width: 240px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 0 0 20px !important; /* 18–24px gap LOGO <-> SEARCH */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 44px !important; /* 42–48px */
  background: #FFFFFF !important;
  border: 1.5px solid #2563EB !important;
  border-radius: 22px !important; /* 20–24px */
  padding: 0 5px 0 14px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ai-entry:focus-within,
.ai-entry:hover {
  border-color: #1D4ED8 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

.search-svg {
  color: #64748B !important;
  stroke: #64748B !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"],
#headerSearch {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #0F172A !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.ai-entry input[type="search"]::placeholder,
#headerSearch::placeholder {
  color: #64748B !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 34px !important;
  padding: 0 12px !important;
  background: #22C55E !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 17px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
}

.ai-button:hover {
  background: #16A34A !important;
  transform: scale(1.02) !important;
}

/* 4. FUTURE STARS BESIDE SEARCH BOX (ATTRACTIVE ITALIC TYPOGRAPHY + SUBTLE SHADOW) */
.header-tagline-wrap {
  display: flex !important;
  align-items: center !important;
  margin-left: 16px !important;
  margin-right: auto !important;
  flex-shrink: 0 !important;
}

.header-future-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
}

.header-future-stars em {
  font-style: italic !important;
  font-weight: 700 !important;
  color: inherit !important;
  letter-spacing: 0.01em !important;
}

.header-future-stars .fs-star {
  font-size: 11px !important;
  font-style: normal !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 2px !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) !important;
}

.header-future-stars:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #2563EB !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1) !important;
}

@media (max-width: 1024px) {
  .header-future-stars {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
}

@media (max-width: 860px) {
  .header-tagline-wrap {
    display: none !important;
  }
}

/* 5. RIGHT-SIDE CONTROLS (ONE HORIZONTAL LINE, GAP 8–12px) */
.header-right-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important; /* 8–12px */
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.custom-menu {
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* Common Pill Button Base */
.header-pill-btn {
  height: 44px !important; /* 42–48px */
  background: #FFFFFF !important;
  color: #1E293B !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
}

/* 5.1 SELECT YOUR COLLEGE */
.goal-menu .goal-trigger,
.goal-menu .menu-trigger,
.goal-menu .header-pill-btn {
  height: 44px !important; /* 42–48px */
  width: 190px !important; /* 180–200px */
  min-width: 180px !important;
  max-width: 200px !important;
  padding: 0 14px !important;
  border: 1.5px solid #3B82F6 !important;
  border-radius: 12px !important; /* 10–14px */
  justify-content: space-between !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

.goal-menu .goal-trigger:hover,
.goal-menu .menu-trigger:hover,
.goal-menu .header-pill-btn:hover {
  border-color: #2563EB !important;
  background: #F8FAFC !important;
  color: #2563EB !important;
}

/* 5.2 EXPLORE */
.explore-menu .explore-trigger,
.explore-menu .menu-trigger,
.explore-menu .header-pill-btn {
  height: 44px !important; /* 42–48px */
  width: 120px !important; /* 110–130px */
  min-width: 110px !important;
  max-width: 130px !important;
  padding: 0 14px !important;
  border: 1.5px solid #3B82F6 !important;
  border-radius: 12px !important; /* 10–14px */
  justify-content: space-between !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

.explore-menu .explore-trigger:hover,
.explore-menu .menu-trigger:hover,
.explore-menu .header-pill-btn:hover {
  border-color: #2563EB !important;
  background: #F8FAFC !important;
  color: #2563EB !important;
}

/* 5.3 LANGUAGE */
.language-menu .language-trigger,
.language-menu .menu-trigger,
.language-menu .header-pill-btn {
  height: 44px !important; /* 42–48px */
  width: 66px !important; /* 60–70px */
  min-width: 60px !important;
  max-width: 70px !important;
  padding: 0 10px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important; /* 10–14px */
  justify-content: space-between !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

.language-menu .language-trigger:hover,
.language-menu .menu-trigger:hover,
.language-menu .header-pill-btn:hover {
  border-color: #3B82F6 !important;
  background: #F8FAFC !important;
}

/* Pill Icon & Text */
.pill-icon,
.green-icon {
  color: #16A34A !important;
  stroke: #16A34A !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.pill-btn-text {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pill-caret {
  color: #64748B !important;
  stroke: #64748B !important;
  flex-shrink: 0 !important;
  margin-left: 2px !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

.custom-menu.open .pill-caret {
  transform: rotate(180deg) !important;
  color: #2563EB !important;
  stroke: #2563EB !important;
}

/* 5.4 TIME */
.live-time {
  height: 44px !important; /* 42–48px */
  width: 78px !important; /* 70–85px */
  min-width: 70px !important;
  max-width: 85px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important; /* 8–12px */
  background: #FFFFFF !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 8px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* 5.5 PROFILE AVATAR */
.profile-menu {
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.profile-avatar-btn {
  width: 42px !important; /* 38–44px */
  height: 42px !important; /* 38–44px */
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7A8754 0%, #B85D19 100%) !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14) !important;
}

.avatar-letter {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

/* User Login / Profile Header Access State */
.profile-menu:not(.is-authenticated) .profile-avatar-btn {
  display: none !important;
}

.profile-menu:not(.is-authenticated) .header-login-btn {
  display: inline-flex !important;
}

.profile-menu.is-authenticated .header-login-btn {
  display: none !important;
}

.profile-menu.is-authenticated .profile-avatar-btn {
  display: flex !important;
}

.header-login-btn {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  background: #77AC3B !important;
  border: 1.5px solid #77AC3B !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(119, 172, 59, 0.25) !important;
  text-decoration: none !important;
  margin: 0 !important;
}

.header-login-btn:hover {
  background: #6CA034 !important;
  border-color: #6CA034 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(119, 172, 59, 0.35) !important;
}

/* 5.6 MAIN NAVIGATION MENU (HAMBURGER) */
.header-menu-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.header-menu-btn {
  width: 44px !important; /* 42–48px */
  height: 44px !important; /* 42–48px */
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important; /* 10–14px */
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.header-menu-btn:hover {
  border-color: #3B82F6 !important;
  background: #F8FAFC !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12) !important;
}

.header-menu-btn span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #334155 !important;
  border-radius: 1px !important;
  transition: all 0.2s ease !important;
}

/* 6. CATEGORY / 16-FIELD BAR */
.category-nav {
  position: relative !important;
  width: 100% !important;
  height: 52px !important; /* 48–56px */
  margin: 0 !important;
  padding: 8px 20px !important; /* 8–12px top/bottom, 16–24px horizontal */
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  z-index: 90 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important; /* 6–10px */
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #CBD5E1 transparent !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.nav-inner::-webkit-scrollbar {
  height: 3px !important;
}

.nav-inner::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 4px !important;
}

.nav-inner a {
  height: 36px !important; /* 32–38px */
  padding: 0 14px !important; /* 12–16px */
  border-radius: 9px !important; /* 8–10px */
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background: #EFF6FF !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

.nav-inner a.active,
.nav-inner a[data-active="true"] {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background: #EFF6FF !important;
  font-weight: 700 !important;
}

.nav-status {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #1E293B !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 4px 10px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
}



/* ==========================================================================
   RESTORED ORIGINAL BACKGROUND IMAGES & SUBTLE GREEN GLOW (#77AC3B)
   ========================================================================== */

/* Hero Background Visual Carousel */
.hero-section {
  position: relative !important;
  overflow: hidden !important;
}

.hero-bg-carousel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
}

.hero-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center 35% !important;
  opacity: 0 !important;
  transition: opacity 1.2s ease-in-out !important;
  filter: brightness(0.92) contrast(1.05) !important;
  display: block !important;
}

.hero-bg-slide.active {
  opacity: 1 !important;
}

/* Subtle, neutral overlay to ensure 100% crisp text readability without overpowering images */
.hero-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(253, 253, 253, 0.94) 0%, rgba(253, 253, 253, 0.82) 48%, rgba(253, 253, 253, 0.65) 100%) !important;
  z-index: 1 !important;
  display: block !important;
}

.hero-copy, .hero-ad-card, .hero-carousel-indicators {
  position: relative !important;
  z-index: 2 !important;
}

/* Carousel Indicators with subtle #77AC3B glow */
.hero-carousel-indicators {
  position: absolute !important;
  bottom: 18px !important;
  left: 5.2% !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 3 !important;
}

.hero-indicator {
  width: 24px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(37, 42, 48, 0.25) !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.hero-indicator.active {
  background: var(--green-accent) !important;
  width: 40px !important;
  box-shadow: 0 0 8px rgba(119, 172, 59, 0.55) !important;
}

/* Subtle Green Glow on Active/Hover states where originally present */
.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: var(--green-accent) !important;
  color: var(--green-accent) !important;
  background: rgba(119, 172, 59, 0.08) !important;
  box-shadow: 0 0 10px rgba(119, 172, 59, 0.25) !important;
  font-weight: 700 !important;
}

.btn-primary:hover, .primary-btn:hover {
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.35) !important;
}

.card:hover, .college-card:hover, .course-card:hover {
  border-color: var(--green-accent) !important;
  box-shadow: 0 6px 20px rgba(119, 172, 59, 0.12) !important;
}




/* ==========================================================================
   THECAMPUSNOVA EXACT 8-TOKEN THEME SYSTEM
   ========================================================================== */

:root {
    --main-background: #FDFDFD;
    --section-background: #F7F7F7;
    --card-background: #FCFCFC;
    --border-color: #EFEFEF;
    --secondary-grey: #EEEEEE;
    --main-text: #252A30;
    --secondary-text: #5F6368;
    --green-accent: #77AC3B;
    
    /* System aliases */
    --bg-page: var(--main-background);
    --bg-secondary: var(--section-background);
    --bg-card: var(--card-background);
    --border-subtle: var(--border-color);
    --text-main: var(--main-text);
    --text-muted: var(--secondary-text);
    --primary-green: var(--green-accent);
}

/* Global Canvas */
html, body, html[data-theme="light"], html[data-theme="dark"], #app, .view {
  background-color: var(--main-background) !important;
  color: var(--main-text) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Top Information Bar */
.topline {
  height: 32px !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: var(--secondary-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--section-background) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.topline-left, .topline-right {
  color: var(--secondary-text) !important;
}

.topline-dot {
  color: var(--green-accent) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Sticky Site Header */
.site-header {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: var(--card-background) !important;
  border-bottom: 1px solid var(--border-color) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Search Box + AI in Header */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: var(--card-background) !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: var(--green-accent) !important;
  box-shadow: 0 0 0 3px rgba(119, 172, 59, 0.12) !important;
}

.search-svg {
  color: var(--secondary-text) !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: var(--main-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: var(--secondary-text) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: var(--green-accent) !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.ai-button:hover {
  background: rgba(119, 172, 59, 0.12) !important;
  color: #6CA034 !important;
}

/* Header Pill Buttons */
.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 10px !important;
  background: var(--card-background) !important;
  color: var(--main-text) !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
}

.header-pill-btn:hover {
  border-color: var(--green-accent) !important;
  color: var(--green-accent) !important;
  background: var(--secondary-grey) !important;
}

.green-icon {
  color: var(--green-accent) !important;
  flex-shrink: 0 !important;
}

.pill-caret {
  color: var(--secondary-text) !important;
  margin-left: 2px !important;
}

.live-time {
  color: var(--secondary-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}

.profile-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5C6B73 0%, var(--green-accent) 100%) !important;
  border: 1.5px solid var(--card-background) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.header-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 10px !important;
  background: var(--card-background) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.header-menu-btn span {
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: var(--secondary-text) !important;
  border-radius: 1px !important;
}

.header-menu-btn:hover {
  border-color: var(--green-accent) !important;
  background: var(--secondary-grey) !important;
}

.header-menu-btn:hover span {
  background: var(--green-accent) !important;
}

/* Category Navigation Row */
.category-nav {
  height: 50px !important;
  background: var(--section-background) !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: var(--main-text) !important;
  font-weight: 500 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border-color) !important;
  background: var(--card-background) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: var(--green-accent) !important;
  color: var(--green-accent) !important;
  background: var(--secondary-grey) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: var(--green-accent) !important;
  color: var(--green-accent) !important;
  background: rgba(119, 172, 59, 0.12) !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--main-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--green-accent) !important;
  display: inline-block !important;
}

/* Headings & Text Across Platform */
h1, h2, h3, h4, h5, h6,
.section-head h2, .section-title, .view-title, .page-title,
.hero-copy h1, .card-title, .college-card-title, .course-card-title, strong, b {
  color: var(--main-text) !important;
  font-weight: 700 !important;
}

p, span, li, td, th, label, div,
.pill-btn-text, .card-desc, .info-item, .stat-label {
  color: var(--main-text) !important;
}

small, .text-muted, .meta-text, .sub-label, .time-text, 
.location-text, .date-text, .footer-desc, .hero-text, .hero-subtitle, .section-subtitle {
  color: var(--secondary-text) !important;
  font-weight: 500 !important;
}

h1 em, h2 em, h3 em, .hero-copy h1 em,
.eyebrow, .courses-top-eyebrow, .text-green, .highlight-green {
  color: var(--green-accent) !important;
  font-style: normal !important;
}

.eyebrow span, .courses-top-eyebrow span {
  background: var(--green-accent) !important;
}

/* All Content Cards & Boxes */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card, .career-card, .placement-card,
.job-card, .internship-card, .scholarship-card, .facility-card,
.filter-sidebar, .filter-box, .modal-content, .hero-ad-card {
  background: var(--card-background) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--main-text) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover, .college-card:hover, .course-card:hover,
.exam-card:hover, .domain-card:hover, .material-card:hover, .review-card:hover {
  border-color: var(--green-accent) !important;
  box-shadow: 0 4px 16px rgba(119, 172, 59, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* Section background areas */
.feature-band, .alternate-section, .filter-group-header, .stats-ribbon {
  background: var(--section-background) !important;
  border-color: var(--border-color) !important;
}

/* Filter Tags and Chips */
.filter-pill, .filter-chip, .tag-btn {
  background: var(--secondary-grey) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--main-text) !important;
  font-weight: 600 !important;
}

.filter-pill:hover, .filter-chip:hover, .tag-btn:hover {
  border-color: var(--green-accent) !important;
  color: var(--green-accent) !important;
  background: rgba(119, 172, 59, 0.12) !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: var(--green-accent) !important;
  color: var(--card-background) !important;
  border-color: var(--green-accent) !important;
}

/* Primary & Secondary Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: var(--green-accent) !important;
  color: var(--card-background) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover, .primary-btn:hover, .submit-btn:hover, .primary-button:hover {
  background: #6CA034 !important;
  transform: translateY(-1px) !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: var(--card-background) !important;
  border: 1.5px solid var(--border-color) !important;
  color: var(--main-text) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-secondary:hover, .secondary-btn:hover, .outline-btn:hover {
  border-color: var(--green-accent) !important;
  color: var(--green-accent) !important;
  background: var(--secondary-grey) !important;
}

/* Inputs & Form Fields */
input[type="text"], input[type="search"], input[type="email"], 
input[type="password"], input[type="number"], select, textarea {
  background: var(--card-background) !important;
  border: 1.5px solid var(--border-color) !important;
  color: var(--main-text) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--green-accent) !important;
  box-shadow: 0 0 0 3px rgba(119, 172, 59, 0.12) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--secondary-text) !important;
  opacity: 1 !important;
}

/* Badges & Status */
.badge, .status-badge, .rating-badge {
  background: rgba(119, 172, 59, 0.12) !important;
  color: var(--green-accent) !important;
  border: 1px solid rgba(119, 172, 59, 0.3) !important;
  font-weight: 700 !important;
}

/* Modals & Dropdown Menus */
.menu-panel, .ai-panel, .profile-panel, .explore-panel, .language-panel, .modal-content, select option {
  background: var(--card-background) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--main-text) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.menu-panel button, .profile-menu-item, .explore-item, .lang-item {
  color: var(--main-text) !important;
}

.menu-panel button:hover, .profile-menu-item:hover, .explore-item:hover, .lang-item:hover {
  background: var(--secondary-grey) !important;
  color: var(--green-accent) !important;
}

/* Footer */
.site-footer {
  background: var(--section-background) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--main-text) !important;
}

.site-footer a, .footer-links a {
  color: var(--secondary-text) !important;
}

.site-footer a:hover, .footer-links a:hover {
  color: var(--green-accent) !important;
}

.footer-bottom-bar {
  background: var(--secondary-grey) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--secondary-text) !important;
}


/* ==========================================================================
   THECAMPUSNOVA DIM GREY (#FDFDFD) PLATFORM DESIGN SYSTEM
   ========================================================================== */

:root {
  --bg-page: #FDFDFD;
  --bg-secondary: #F7F7F7;
  --bg-card: #FCFCFC;
  --bg-card-white: #FFFFFF;
  --border-dark: #EFEFEF;
  --border-card: #E2E8F0;
  --text-on-dark: #FFFFFF;
  --text-light-grey: #F1F5F9;
  --text-muted-on-dark: #5F6368;
  --text-in-card: #252A30;
  --text-heading-card: #252A30;
  --primary-green: #77AC3B;
  --primary-green-bright: #77AC3B;
  --primary-green-hover: #6CA034;
  --primary-green-soft: rgba(58, 155, 143, 0.15);
}

/* Global Background Canvas - Soft Dim Grey */
html, body, html[data-theme="light"], html[data-theme="dark"], #app, .view {
  background-color: #FDFDFD !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  opacity: 1 !important;
}

/* All Headings Directly on Grey Background */
h1, h2, h3, h4, h5, h6,
.section-head h2, .section-title, .view-title, .page-title,
.hero-copy h1, .hero-rotator-h1, .hero-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* Light Green Highlights & Accents on Headings */
h1 em, h2 em, h3 em,
.hero-copy h1 em, .hero-rotator-h1 em, .hero-title em,
.hero-highlight, .text-green, .highlight-green {
  color: #77AC3B !important;
  font-style: normal !important;
  opacity: 1 !important;
}

/* Eyebrow / Kickers / Small Labels (e.g. "THE CLEARER WAY FORWARD") */
.eyebrow,
.hero-eyebrow,
.section-eyebrow,
.courses-top-eyebrow,
.footer-banner-badge,
.hero-ad-kicker {
  color: #77AC3B !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  margin-bottom: 12px !important;
}

.eyebrow span, .courses-top-eyebrow span {
  background: #77AC3B !important;
}

/* Descriptions & Subtitles */
.hero-text,
.hero-subtitle,
.hero-desc,
.hero-copy p {
  color: #F1F5F9 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

.section-subtitle,
.section-head p,
.page-desc,
.view-desc {
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

/* Top Information Bar */
.topline {
  height: 32px !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #5F6368 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #F7F7F7 !important;
  border-bottom: 1px solid #EFEFEF !important;
  opacity: 1 !important;
}

.topline-left, .topline-right {
  color: #5F6368 !important;
  opacity: 1 !important;
}

.topline-dot {
  color: #77AC3B !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Main Header Row */
.site-header {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: #F7F7F7 !important;
  border-bottom: 1px solid #EFEFEF !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 48px !important;
  max-height: 56px !important;
  max-width: 120px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Search Box + AI */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 auto 0 0 !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FCFCFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #252A30 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: #5F6368 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #77AC3B !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.ai-button:hover {
  background: rgba(58, 155, 143, 0.15) !important;
  color: #77AC3B !important;
}

/* Header Pill Buttons */
.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FCFCFC !important;
  color: #252A30 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.header-pill-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.15) !important;
}

.live-time {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
  opacity: 1 !important;
}

/* Category Navigation Row */
.category-nav {
  height: 50px !important;
  background: #F7F7F7 !important;
  border-bottom: 1px solid #EFEFEF !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #252A30 !important;
  font-weight: 600 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #FCFCFC !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.15) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: #FDFDFD !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #77AC3B !important;
  display: inline-block !important;
}

/* Hero Section (Clean Dim Grey, High Contrast Light White & Green) */
.hero-section {
  background: #FDFDFD !important;
  min-height: 480px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid #EFEFEF !important;
  position: relative !important;
}

/* All Content Cards & Boxes (Soft Light White Background, Ultra-Readable Dark Text Inside) */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card, .career-card, .placement-card,
.job-card, .internship-card, .scholarship-card, .facility-card,
.filter-sidebar, .filter-box, .modal-content, .hero-ad-card {
  background: #FCFCFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #252A30 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.card h3, .college-card h3, .course-card h3, .exam-card h3, 
.domain-card h3, .material-card h3, .review-card h3, .modal-content h3 {
  color: #252A30 !important;
  font-weight: 700 !important;
}

.card p, .card span, .card li, .card td, .card div, .card-desc {
  color: #252A30 !important;
}

.card small, .card .text-muted, .card .meta-text {
  color: #5F6368 !important;
  font-weight: 500 !important;
}

/* Filter Tags and Chips */
.filter-pill, .filter-chip, .tag-btn {
  background: #EAEFEA !important;
  border: 1px solid #D1DBD3 !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border-color: #77AC3B !important;
}

/* Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 8px !important;
}

.btn-primary:hover, .primary-btn:hover, .submit-btn:hover {
  background: #6CA034 !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: #FCFCFC !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

/* Badges & Status */
.badge, .status-badge, .rating-badge {
  background: rgba(58, 155, 143, 0.15) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(58, 155, 143, 0.4) !important;
  font-weight: 700 !important;
}

/* Footer */
.site-footer {
  background: #F7F7F7 !important;
  border-top: 1px solid #EFEFEF !important;
  color: #FFFFFF !important;
}

.site-footer h4, .footer-col h4, .footer-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.site-footer a, .footer-links a {
  color: #5F6368 !important;
  font-weight: 500 !important;
}

.site-footer a:hover, .footer-links a:hover {
  color: #77AC3B !important;
}

.footer-bottom-bar {
  background: #FDFDFD !important;
  border-top: 1px solid #EFEFEF !important;
  color: #5F6368 !important;
}


/* ==========================================================================
   THECAMPUSNOVA DIM DARK BLUE (#FDFDFD) PLATFORM DESIGN SYSTEM
   ========================================================================== */

:root {
  --bg-page: #FDFDFD;
  --bg-secondary: #F7F7F7;
  --bg-card: #FCFCFC;
  --bg-card-white: #FFFFFF;
  --border-dark: #EFEFEF;
  --border-card: #EFEFEF;
  --text-on-dark: #F8FAFC;
  --text-muted-on-dark: #5F6368;
  --text-in-card: #252A30;
  --text-heading-card: #252A30;
  --primary-green: #77AC3B;
  --primary-green-bright: #77AC3B;
  --primary-green-hover: #6CA034;
  --primary-green-soft: rgba(58, 155, 143, 0.15);
}

/* Global Background Canvas */
html, body, html[data-theme="light"], html[data-theme="dark"], #app, .view {
  background-color: #FDFDFD !important;
  color: #F8FAFC !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Disable and remove all background images & photo slides globally */
.hero-bg-carousel, .hero-bg-slide, .hero-bg-overlay, 
.view-bg-overlay, .home-body-bg-overlay, .college-thumb-overlay, .college-image-overlay {
  background-image: none !important;
  background: transparent !important;
  display: none !important;
}

/* Top Information Bar */
.topline {
  height: 32px !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #5F6368 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: #F7F7F7 !important;
  border-bottom: 1px solid #EFEFEF !important;
}

.topline-left, .topline-right {
  color: #5F6368 !important;
}

.topline-dot {
  color: #77AC3B !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Main Header Row */
.site-header {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: #F7F7F7 !important;
  border-bottom: 1px solid #EFEFEF !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Search Box + AI in Header */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #252A30 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: #5F6368 !important;
  font-weight: 500 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #77AC3B !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.ai-button:hover {
  background: rgba(58, 155, 143, 0.15) !important;
  color: #77AC3B !important;
}

/* Header Pill Buttons */
.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid #EFEFEF !important;
  border-radius: 10px !important;
  background: #FCFCFC !important;
  color: #252A30 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.header-pill-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.15) !important;
}

.live-time {
  color: #F8FAFC !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}

/* Category Navigation Row */
.category-nav {
  height: 50px !important;
  background: #F7F7F7 !important;
  border-bottom: 1px solid #EFEFEF !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #252A30 !important;
  font-weight: 600 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid #EFEFEF !important;
  background: #FCFCFC !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.15) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: #FDFDFD !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #F8FAFC !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #77AC3B !important;
  display: inline-block !important;
}

/* Hero Section (Clean Dim Dark Blue, No Photo, Sharp Light Green Highlights) */
.hero-section {
  background: #FDFDFD !important;
  min-height: 480px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid #EFEFEF !important;
}

.hero-copy h1, .hero-rotator-h1, .hero-title {
  color: #F8FAFC !important;
  font-weight: 800 !important;
}

.hero-copy h1 em, .hero-rotator-h1 em, .hero-highlight {
  color: #77AC3B !important;
  font-style: normal !important;
}

.eyebrow, .hero-eyebrow, .section-eyebrow, .courses-top-eyebrow {
  color: #77AC3B !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.hero-text, .hero-subtitle, .hero-copy p {
  color: #F8FAFC !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  max-width: 580px !important;
}

/* Section Headings on Dim Dark Blue Canvas */
.section-head h2, .section-title, .view-title, .page-title {
  color: #F8FAFC !important;
  font-weight: 800 !important;
}

.section-subtitle, .section-head p {
  color: #5F6368 !important;
  font-weight: 500 !important;
}

/* All Content Cards & Boxes (Soft Light White Background, Ultra-Readable Dark Text Inside) */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card, .career-card, .placement-card,
.job-card, .internship-card, .scholarship-card, .facility-card,
.filter-sidebar, .filter-box, .modal-content, .hero-ad-card {
  background: #FCFCFC !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.card h3, .college-card h3, .course-card h3, .exam-card h3, 
.domain-card h3, .material-card h3, .review-card h3, .modal-content h3 {
  color: #252A30 !important;
  font-weight: 700 !important;
}

.card p, .card span, .card li, .card td, .card div, .card-desc {
  color: #252A30 !important;
}

.card small, .card .text-muted, .card .meta-text {
  color: #5F6368 !important;
}

/* Filter Tags and Chips */
.filter-pill, .filter-chip, .tag-btn {
  background: #EAEFEA !important;
  border: 1px solid #D1DBD3 !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border-color: #77AC3B !important;
}

/* Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 8px !important;
}

.btn-primary:hover, .primary-btn:hover, .submit-btn:hover {
  background: #6CA034 !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

/* Badges & Status */
.badge, .status-badge, .rating-badge {
  background: rgba(58, 155, 143, 0.15) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(58, 155, 143, 0.4) !important;
  font-weight: 700 !important;
}

/* Footer */
.site-footer {
  background: #F7F7F7 !important;
  border-top: 1px solid #EFEFEF !important;
  color: #F8FAFC !important;
}

.site-footer h4, .footer-col h4, .footer-title {
  color: #F8FAFC !important;
  font-weight: 700 !important;
}

.site-footer a, .footer-links a {
  color: #5F6368 !important;
  font-weight: 500 !important;
}

.site-footer a:hover, .footer-links a:hover {
  color: #77AC3B !important;
}

.footer-bottom-bar {
  background: #FDFDFD !important;
  border-top: 1px solid #EFEFEF !important;
  color: #5F6368 !important;
}


/* ==========================================================================
   THECAMPUSNOVA HERO, BACKGROUND-IMAGE OVERLAY & OUTSIDE-BOX TEXT VISIBILITY
   ========================================================================== */

/* 1. Hero Section & Rotator Heading over Background Image */
.hero-section {
  position: relative !important;
}

.hero-copy h1, 
.hero-rotator-h1,
.hero-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.hero-copy h1 em,
.hero-rotator-h1 em,
.hero-title em,
.hero-highlight {
  color: #77AC3B !important;
  font-style: normal !important;
  text-shadow: none !important;
}

/* 2. Eyebrow / Small Labels over Background Images & Outside Boxes */
.eyebrow,
.hero-eyebrow,
.section-eyebrow,
.courses-top-eyebrow,
.footer-banner-badge,
.hero-ad-kicker {
  color: #77AC3B !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.eyebrow span,
.courses-top-eyebrow span {
  background: #77AC3B !important;
}

/* 3. Hero Subtitles & Descriptions over Dark Background Overlays */
.hero-text,
.hero-subtitle,
.hero-desc,
.hero-copy p {
  color: #F1F5F9 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* Scoped hero feature text area: strictly ensure zero black text-shadow */
.hero-copy h1,
.hero-copy .hero-rotator-h1,
.hero-copy .hero-h1-slide,
.hero-copy .eyebrow,
.hero-copy .hero-text,
.hero-copy p {
  text-shadow: none !important;
}

/* 4. Text Links & CTAs over Background Images */
.hero-link,
.overlay-link,
.hero-ad-verified {
  color: #77AC3B !important;
  font-weight: 700 !important;
}

.hero-link:hover,
.overlay-link:hover {
  color: #6CA034 !important;
  text-decoration: underline !important;
}

/* 5. Any Section Headings / Labels over Background Overlays */
.view-bg-overlay ~ * h1,
.view-bg-overlay ~ * h2,
.home-body-bg-overlay ~ * h1,
.home-body-bg-overlay ~ * h2 {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

.hero-copy h1,
.hero-copy .hero-rotator-h1,
.hero-copy .hero-h1-slide,
#heroRotatorH1,
#heroRotatorH1 .hero-h1-slide {
  color: #0F172A !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.hero-copy h1 em,
.hero-copy .hero-rotator-h1 em,
.hero-copy .hero-h1-slide em,
#heroRotatorH1 em,
#heroRotatorH1 * em {
  color: #77AC3B !important;
  font-style: italic !important;
  text-shadow: none !important;
}

.view-bg-overlay ~ * h1 em,
.view-bg-overlay ~ * h2 em,
.home-body-bg-overlay ~ * h1 em,
.home-body-bg-overlay ~ * h2 em {
  color: #77AC3B !important;
  text-shadow: none !important;
}

/* 6. Carousel Indicators & Active Highlights */
.hero-indicator.active {
  background: #77AC3B !important;
  box-shadow: 0 0 12px rgba(126, 211, 33, 0.8) !important;
}

/* 7. Ad Cards & Feature Banners over Overlays */
.hero-ad-card {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
}

.hero-ad-badge {
  background: rgba(126, 211, 33, 0.15) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(126, 211, 33, 0.4) !important;
  font-weight: 800 !important;
}

/* 8. Outside-Box Blue Text Replacement -> Light Green */
a.text-blue, span.text-blue, p.text-blue,
.blue-text, .link-blue, .accent-blue {
  color: #77AC3B !important;
}

a.text-blue:hover, span.text-blue:hover,
.blue-text:hover, .link-blue:hover {
  color: #6CA034 !important;
}


/* ==========================================================================
   THECAMPUSNOVA UNIVERSAL TEXT & CONTENT VISIBILITY (INSIDE & OUTSIDE BOXES)
   ========================================================================== */

:root {
  --bg-page: #FDFDFD;
  --bg-card: #FCFCFC;
  --bg-subtle: #EFEFEF;
  --border-subtle: #EFEFEF;
  --border-light: #EFEFEF;
  --border-input: #EFEFEF;
  --text-main: #252A30;
  --text-heading: #252A30;
  --text-muted: #374151;
  --primary-green: #77AC3B;
  --primary-green-hover: #6CA034;
  --primary-green-active: #6CA034;
  --primary-green-soft: rgba(58, 155, 143, 0.12);
}

/* Universal Body & Canvas Typography */
html, body, html[data-theme="light"], html[data-theme="dark"] {
  color-scheme: light !important;
  background-color: #FDFDFD !important;
  color: #252A30 !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* All Headings Across the Platform (Inside & Outside Boxes) */
h1, h2, h3, h4, h5, h6, 
.section-head h2, .section-title, .view-title, .page-title,
.hero-copy h1, .card-title, .college-card-title, .course-card-title, 
.exam-title, .stat-value, strong, b {
  color: #252A30 !important;
  font-weight: 700 !important;
}

/* All Paragraphs, Spans & Normal Text (Inside & Outside Boxes) */
p, span, li, td, th, label, div,
.hero-copy p, .hero-subtitle, .section-subtitle, .section-head p,
.pill-btn-text, .nav-inner a, .card-desc, .info-item, .stat-label,
.tab-btn, .filter-label, .breadcrumb-item {
  color: #252A30 !important;
}

/* All Secondary & Metadata Text (Inside & Outside Boxes) */
small, .text-muted, .meta-text, .sub-label, .time-text, 
.location-text, .date-text, .topline-left, .topline-right, .live-time,
.footer-desc, .author-meta, .review-date {
  color: #374151 !important;
  font-weight: 500 !important;
}

/* Topline Bar Text Outside Box */
.topline {
  background: #EFEFEF !important;
  border-bottom: 1px solid #EFEFEF !important;
  color: #374151 !important;
  font-weight: 600 !important;
}

.topline-left, .topline-right {
  color: #374151 !important;
  font-weight: 600 !important;
}

.topline-dot {
  color: #77AC3B !important;
  font-weight: 800 !important;
}

/* Category Navigation Row Outside Boxes */
.category-nav {
  background: #FCFCFC !important;
  border-bottom: 1px solid #EFEFEF !important;
}

.nav-inner a {
  color: #252A30 !important;
  font-weight: 600 !important;
  border: 1.5px solid #EFEFEF !important;
  background: #FCFCFC !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
  font-weight: 700 !important;
}

.nav-status {
  color: #252A30 !important;
  font-weight: 600 !important;
}

/* All SVG Icons (Inside & Outside Boxes) */
svg, .pill-icon, .search-svg, .feature-icon, .tab-icon, .icon {
  color: #374151 !important;
  stroke: #374151 !important;
}

.pill-caret {
  color: #374151 !important;
  stroke: #374151 !important;
}

.header-menu-btn span {
  background: #374151 !important;
}

/* Hero Section High Visibility */
.hero-section {
  color: #252A30 !important;
}

.hero-copy h1 {
  color: #252A30 !important;
  font-weight: 800 !important;
}

.hero-copy h1 em {
  color: #77AC3B !important;
  font-style: normal !important;
}

.hero-copy p {
  color: #252A30 !important;
  font-weight: 500 !important;
}

/* Footer & Bottom Bar Outside Boxes */
.site-footer {
  background: #EFEFEF !important;
  border-top: 1px solid #EFEFEF !important;
  color: #252A30 !important;
}

.site-footer h4, .footer-col h4, .footer-title {
  color: #252A30 !important;
  font-weight: 700 !important;
}

.site-footer p, .site-footer span, .site-footer li, .footer-desc {
  color: #374151 !important;
  font-weight: 500 !important;
}

.site-footer a, .footer-links a {
  color: #252A30 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.site-footer a:hover, .footer-links a:hover {
  color: #77AC3B !important;
}

.footer-bottom-bar {
  background: #DADEDA !important;
  border-top: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.footer-bottom-bar p, .footer-bottom-bar span {
  color: #252A30 !important;
}

/* Header Search & Inputs */
.ai-entry input[type="search"],
input[type="text"], input[type="search"], input[type="email"], 
input[type="password"], input[type="number"], select, textarea {
  color: #252A30 !important;
  font-weight: 600 !important;
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
}

.ai-entry input[type="search"]::placeholder,
input::placeholder, textarea::placeholder {
  color: #5F6368 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Filter Tags and Chips Outside Boxes */
.filter-pill, .filter-chip, .tag-btn {
  background: #EFEFEF !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border-color: #77AC3B !important;
}

/* Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.btn-secondary:hover, .secondary-btn:hover, .outline-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}


/* ==========================================================================
   THECAMPUSNOVA HIGH-CONTRAST TEXT VISIBILITY & READABILITY MASTER RULES
   ========================================================================== */

:root {
  --bg-page: #FDFDFD;
  --bg-card: #FCFCFC;
  --bg-subtle: #EFEFEF;
  --border-subtle: #EFEFEF;
  --border-light: #EFEFEF;
  --border-input: #EFEFEF;
  --text-main: #252A30;
  --text-heading: #252A30;
  --text-muted: #5F6368;
  --primary-green: #77AC3B;
  --primary-green-hover: #6CA034;
  --primary-green-active: #6CA034;
  --primary-green-soft: rgba(58, 155, 143, 0.12);
}

/* Global Typography High Contrast */
html, body, html[data-theme="light"], html[data-theme="dark"] {
  color-scheme: light !important;
  background-color: #FDFDFD !important;
  color: #252A30 !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Stronger Dark Grey Headings */
h1, h2, h3, h4, h5, h6, 
.card-title, .college-card-title, .course-card-title, 
.section-heading, .hero-copy h1, strong, b {
  color: #252A30 !important;
  font-weight: 700 !important;
}

/* Dark Grey Normal Text */
p, span, li, td, th, label, div,
.pill-btn-text, .nav-inner a, .card-desc, .info-item, .stat-label {
  color: #252A30 !important;
}

/* Medium Grey for Secondary/Metadata (Never Washed Out) */
small, .text-muted, .meta-text, .sub-label, .time-text, 
.location-text, .date-text, .topline-left, .topline-right, .live-time {
  color: #5F6368 !important;
  font-weight: 500 !important;
}

/* Topline Bar Text */
.topline {
  background: #EFEFEF !important;
  border-bottom: 1px solid #EFEFEF !important;
  color: #5F6368 !important;
}

.topline-dot {
  color: #77AC3B !important;
  font-weight: 800 !important;
}

/* Header Search & Inputs */
.ai-entry {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
}

.ai-entry input[type="search"],
input[type="text"], input[type="search"], input[type="email"], 
input[type="password"], input[type="number"], select, textarea {
  color: #252A30 !important;
  font-weight: 600 !important;
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
}

.ai-entry input[type="search"]::placeholder,
input::placeholder, textarea::placeholder {
  color: #374151 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.search-svg {
  color: #374151 !important;
  stroke: #374151 !important;
}

/* Header Pill Buttons */
.header-pill-btn {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.pill-caret {
  color: #374151 !important;
  stroke: #374151 !important;
}

.header-menu-btn span {
  background: #374151 !important;
}

/* Category Nav Links */
.nav-inner a {
  color: #252A30 !important;
  font-weight: 600 !important;
  border: 1.5px solid #EFEFEF !important;
  background: #FCFCFC !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
  font-weight: 700 !important;
}

.nav-status {
  color: #252A30 !important;
  font-weight: 600 !important;
}

/* Dropdown Menus & Panels */
.menu-panel, .ai-panel, .profile-panel, .explore-panel, .language-panel, select option {
  background: #FCFCFC !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.menu-panel button, .profile-menu-item, .explore-item, .lang-item {
  color: #252A30 !important;
  font-weight: 600 !important;
}

.menu-panel button:hover, .profile-menu-item:hover, .explore-item:hover, .lang-item:hover {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #77AC3B !important;
}

/* Cards & Content Panels */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card, .career-card, .placement-card,
.job-card, .internship-card, .scholarship-card, .facility-card,
.filter-sidebar, .filter-box, .filter-group, .modal-content {
  background: #FCFCFC !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
}

.card h3, .college-card h3, .course-card h3, .exam-card h3, .domain-card h3,
.material-card h3, .review-card h3, .modal-content h3 {
  color: #252A30 !important;
}

/* Filter Tags and Chips */
.filter-pill, .filter-chip, .tag-btn {
  background: #EFEFEF !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border-color: #77AC3B !important;
}

/* Badges & Rating Highlights */
.badge, .status-badge, .rating-badge {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(58, 155, 143, 0.3) !important;
  font-weight: 700 !important;
}

/* Primary & Secondary Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  color: #252A30 !important;
  font-weight: 600 !important;
}

.btn-secondary:hover, .secondary-btn:hover, .outline-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

/* Footer Contrast */
.site-footer {
  background: #EFEFEF !important;
  border-top: 1px solid #EFEFEF !important;
  color: #252A30 !important;
}

.site-footer a, .site-footer p, .site-footer span {
  color: #252A30 !important;
}

.site-footer a:hover {
  color: #77AC3B !important;
}

.footer-bottom-bar {
  background: #DADEDA !important;
  border-top: 1px solid #EFEFEF !important;
  color: #5F6368 !important;
}


/* ==========================================================================
   THECAMPUSNOVA SOFT THEME (MAIN: #FDFDFD | SURFACE: #FCFCFC | BORDER: #EFEFEF)
   ========================================================================== */

:root {
  --bg-page: #FDFDFD;
  --bg-card: #FCFCFC;
  --bg-subtle: #EFEFEF;
  --border-subtle: #EFEFEF;
  --border-light: #EFEFEF;
  --border-input: #EFEFEF;
  --text-main: #252A30;
  --text-muted: #5F6368;
  --primary-green: #77AC3B;
  --primary-green-hover: #6CA034;
  --primary-green-active: #6CA034;
  --primary-green-soft: rgba(58, 155, 143, 0.12);
  
  --coral: #77AC3B;
  --coral-soft: rgba(58, 155, 143, 0.12);
  --teal: #77AC3B;
  --mint: rgba(58, 155, 143, 0.12);
  --sky: #EFEFEF;
  --blue: #77AC3B;
  --theme-page: #FDFDFD;
  --theme-surface: #FCFCFC;
  --theme-surface-subtle: #EFEFEF;
  --theme-text: #252A30;
  --theme-muted: #5F6368;
  --theme-line: #EFEFEF;
  --theme-header: #FCFCFC;
}

html, body, html[data-theme="light"], html[data-theme="dark"] {
  color-scheme: light !important;
  background-color: #FDFDFD !important;
  color: #252A30 !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Global Headings */
h1, h2, h3, h4, h5, h6 {
  color: #252A30 !important;
  font-weight: 700 !important;
}

/* Top Information Bar */
.topline {
  height: 32px !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #374151 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: #EFEFEF !important;
  border-bottom: 1px solid #EFEFEF !important;
}

.topline-left, .topline-right {
  color: #374151 !important;
}

.topline-dot {
  color: #77AC3B !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Main Header Row */
.site-header {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: #FCFCFC !important;
  border-bottom: 1px solid #EFEFEF !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.12) !important;
  background: #FCFCFC !important;
}

.search-svg {
  color: #374151 !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #252A30 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: #374151 !important;
  font-weight: 400 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #77AC3B !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
}

.ai-button:hover {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #6CA034 !important;
}

.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid #EFEFEF !important;
  border-radius: 10px !important;
  background: #FCFCFC !important;
  color: #252A30 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.header-pill-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.12) !important;
}

.green-icon {
  color: #77AC3B !important;
  flex-shrink: 0 !important;
}

.live-time {
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}

.profile-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4A5650 0%, #77AC3B 100%) !important;
  border: 1.5px solid #FCFCFC !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.avatar-letter {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.header-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid #EFEFEF !important;
  border-radius: 10px !important;
  background: #FCFCFC !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.header-menu-btn span {
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: #5F6368 !important;
  border-radius: 1px !important;
  transition: background 0.18s !important;
}

.header-menu-btn:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.12) !important;
}

.header-menu-btn:hover span {
  background: #77AC3B !important;
}

/* Category Navigation Row */
.category-nav {
  height: 50px !important;
  background: #FCFCFC !important;
  border-bottom: 1px solid #EFEFEF !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav-inner::-webkit-scrollbar {
  display: none !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid #EFEFEF !important;
  background: #FCFCFC !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #77AC3B !important;
  display: inline-block !important;
}

/* All Content Cards & Panels across the platform */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card, .career-card, .placement-card,
.job-card, .internship-card, .scholarship-card, .facility-card {
  background: #FCFCFC !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover, .college-card:hover, .course-card:hover, 
.exam-card:hover, .domain-card:hover, .material-card:hover, .review-card:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 8px 24px rgba(58, 155, 143, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* Filter Sidebars & Search Controls */
.filter-sidebar, .filter-box, .filter-group, .filter-panel, .search-container {
  background: #FCFCFC !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  border-radius: 12px !important;
}

.filter-pill, .filter-chip, .tag-btn {
  background: #EFEFEF !important;
  border: 1px solid #EFEFEF !important;
  color: #374151 !important;
  border-radius: 18px !important;
}

.filter-pill:hover, .filter-chip:hover, .tag-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border-color: #77AC3B !important;
  font-weight: 700 !important;
}

/* Inputs & Form Controls */
input[type="text"], input[type="search"], input[type="email"], 
input[type="password"], input[type="number"], select, textarea {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  color: #252A30 !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.12) !important;
  outline: none !important;
  background: #FCFCFC !important;
}

/* Primary & Secondary Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.18) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover, .primary-btn:hover, .submit-btn:hover, .primary-button:hover {
  background: #6CA034 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(58, 155, 143, 0.25) !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: #FCFCFC !important;
  border: 1.5px solid #EFEFEF !important;
  color: #252A30 !important;
  border-radius: 8px !important;
}

.btn-secondary:hover, .secondary-btn:hover, .outline-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

/* Badges & Status */
.badge, .status-badge, .rating-badge {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(58, 155, 143, 0.25) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* Modals & Dialogs */
.modal-overlay, .modal-backdrop {
  background: rgba(35, 45, 40, 0.35) !important;
  backdrop-filter: none !important;
}

.modal-content, .modal-dialog, .popup-content {
  background: #FCFCFC !important;
  border: 1px solid #EFEFEF !important;
  color: #252A30 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
}

/* Footer */
.site-footer {
  background: #EFEFEF !important;
  border-top: 1px solid #EFEFEF !important;
  color: #374151 !important;
}

.footer-bottom-bar {
  background: #DADEDA !important;
  border-top: 1px solid #EFEFEF !important;
  color: #374151 !important;
}

/* Text Highlights */
.highlight-green, .text-green, .hero-copy h1 em {
  color: #77AC3B !important;
}


/* ==========================================================================
   THECAMPUSNOVA MASTER DESIGN SYSTEM (LIGHT WHITE + SOFT GREY + LIGHT GREEN)
   ========================================================================== */

:root {
  --bg-page: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --border-subtle: #E2E8F0;
  --border-light: #E5E7EB;
  --text-main: #1E293B;
  --text-muted: #5F6368;
  --primary-green: #77AC3B;
  --primary-green-hover: #6CA034;
  --primary-green-active: #6CA034;
  --primary-green-soft: rgba(58, 155, 143, 0.12);
  
  --coral: #77AC3B;
  --coral-soft: rgba(58, 155, 143, 0.12);
  --teal: #77AC3B;
  --mint: rgba(58, 155, 143, 0.12);
  --sky: #F1F5F9;
  --blue: #77AC3B;
  --theme-page: #F8FAFC;
  --theme-surface: #FFFFFF;
  --theme-surface-subtle: #F1F5F9;
  --theme-text: #1E293B;
  --theme-muted: #5F6368;
  --theme-line: #E2E8F0;
  --theme-header: #FFFFFF;
}

html, body, html[data-theme="light"], html[data-theme="dark"] {
  color-scheme: light !important;
  background-color: #F8FAFC !important;
  color: #1E293B !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Global Headings */
h1, h2, h3, h4, h5, h6 {
  color: #1E293B !important;
  font-weight: 700 !important;
}

/* Top Information Bar */
.topline {
  height: 32px !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #374151 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: #F1F5F9 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.topline-left, .topline-right {
  color: #374151 !important;
}

.topline-dot {
  color: #77AC3B !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Main Header Row */
.site-header {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.12) !important;
}

.search-svg {
  color: #374151 !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #1E293B !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: #374151 !important;
  font-weight: 400 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #77AC3B !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
}

.ai-button:hover {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #6CA034 !important;
}

.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.header-pill-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.12) !important;
}

.green-icon {
  color: #77AC3B !important;
  flex-shrink: 0 !important;
}

.live-time {
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}

.profile-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #475569 0%, #77AC3B 100%) !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

.avatar-letter {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.header-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.header-menu-btn span {
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: #5F6368 !important;
  border-radius: 1px !important;
  transition: background 0.18s !important;
}

.header-menu-btn:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.12) !important;
}

.header-menu-btn:hover span {
  background: #77AC3B !important;
}

/* Category Navigation Row */
.category-nav {
  height: 50px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #77AC3B !important;
  display: inline-block !important;
}

/* All Content Cards & Panels across the platform */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card, .career-card, .placement-card,
.job-card, .internship-card, .scholarship-card, .facility-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover, .college-card:hover, .course-card:hover, 
.exam-card:hover, .domain-card:hover, .material-card:hover, .review-card:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 8px 24px rgba(58, 155, 143, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* Filter Sidebars & Search Controls */
.filter-sidebar, .filter-box, .filter-group, .filter-panel, .search-container {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  border-radius: 12px !important;
}

.filter-pill, .filter-chip, .tag-btn {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #374151 !important;
  border-radius: 18px !important;
}

.filter-pill:hover, .filter-chip:hover, .tag-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border-color: #77AC3B !important;
  font-weight: 700 !important;
}

/* Inputs & Form Controls */
input[type="text"], input[type="search"], input[type="email"], 
input[type="password"], input[type="number"], select, textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #1E293B !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.12) !important;
  outline: none !important;
  background: #FFFFFF !important;
}

/* Primary & Secondary Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.2) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover, .primary-btn:hover, .submit-btn:hover, .primary-button:hover {
  background: #6CA034 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(58, 155, 143, 0.28) !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #1E293B !important;
  border-radius: 8px !important;
}

.btn-secondary:hover, .secondary-btn:hover, .outline-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.12) !important;
}

/* Badges & Status */
.badge, .status-badge, .rating-badge {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(58, 155, 143, 0.25) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* Modals & Dialogs */
.modal-overlay, .modal-backdrop {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-content, .modal-dialog, .popup-content {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
}

/* Footer */
.site-footer {
  background: #F1F5F9 !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #374151 !important;
}

.footer-bottom-bar {
  background: #E8ECEF !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #374151 !important;
}

/* Text Highlights */
.highlight-green, .text-green, .hero-copy h1 em {
  color: #77AC3B !important;
}


/* ==========================================================================
   THECAMPUSNOVA EXACT HEADER: LOGO (LEFT) -> SEARCH+AI -> CONTROLS
   ========================================================================== */

/* Top Information Bar */
.topline {
  height: 32px !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #374151 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.topline-left {
  color: #374151 !important;
}

.topline-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #374151 !important;
}

.topline-dot {
  color: #22C55E !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Main Header Row */
.site-header {
  height: 72px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 1. LOGO ON THE LEFT */
.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 2. SEARCH BOX + AI (IMMEDIATELY AFTER LOGO) */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}

.search-svg {
  color: #5F6368 !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: #5F6368 !important;
  font-weight: 400 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #22C55E !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
}

.ai-button .ai-sparkle {
  font-size: 14px !important;
  color: #22C55E !important;
}

.ai-button:hover {
  background: rgba(34, 197, 94, 0.08) !important;
  color: #16A34A !important;
}

/* 3. SELECT YOUR COLLEGE & 4. EXPLORE & 5. LANGUAGE PILL BUTTONS */
.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #374151 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.header-pill-btn:hover {
  border-color: #22C55E !important;
  color: #16A34A !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12) !important;
}

.green-icon {
  color: #22C55E !important;
  flex-shrink: 0 !important;
}

.pill-btn-text {
  color: inherit !important;
}

.pill-caret {
  color: #374151 !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
}

.custom-menu.open .pill-caret {
  transform: rotate(180deg) !important;
}

/* 6. TIME */
.live-time {
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}

/* 7. PROFILE */
.profile-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5C6B73 0%, #8A5340 100%) !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.avatar-letter {
  color: #1E293B !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* 8. MENU */
.header-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.header-menu-btn span {
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: #5F6368 !important;
  border-radius: 1px !important;
  transition: background 0.18s !important;
}

.header-menu-btn:hover {
  border-color: #22C55E !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12) !important;
}

.header-menu-btn:hover span {
  background: #22C55E !important;
}

/* SINGLE CATEGORY NAVIGATION ROW */
.category-nav {
  height: 50px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav-inner::-webkit-scrollbar {
  display: none !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #5F6368 !important;
  font-weight: 500 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid #1E293B !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #22C55E !important;
  color: #16A34A !important;
  background: #F0FDF4 !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #22C55E !important;
  color: #16A34A !important;
  background: #F0FDF4 !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #5F6368 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22C55E !important;
  display: inline-block !important;
}


/* ==========================================================================
   THECAMPUSNOVA EXACT HEADER & NAV (SOURCE OF TRUTH: REFERENCE IMAGE 2)
   ========================================================================== */

/* Top Information Bar */
.topline {
  height: 32px !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #374151 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.topline-left {
  color: #374151 !important;
}

.topline-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #374151 !important;
}

.topline-dot {
  color: #22C55E !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Main Header Row - Compact, Balanced, Centered Alignment */
.site-header {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 1. SEARCH BOX + AI (LEFT) */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}

.search-svg {
  color: #5F6368 !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: #5F6368 !important;
  font-weight: 400 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #22C55E !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
}

.ai-button .ai-sparkle {
  font-size: 14px !important;
  color: #22C55E !important;
}

.ai-button:hover {
  background: rgba(34, 197, 94, 0.08) !important;
  color: #16A34A !important;
}

/* 2. CENTER THECAMPUSNOVA LOGO (MEDIUM SIZE, SHARP & BALANCED) */
.header-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 10px !important;
}

.header-logo-wrap .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 3. SELECT YOUR COLLEGE & 4. EXPLORE & 5. LANGUAGE */
.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #374151 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.header-pill-btn:hover {
  border-color: #22C55E !important;
  color: #16A34A !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12) !important;
}

.green-icon {
  color: #22C55E !important;
  flex-shrink: 0 !important;
}

.pill-btn-text {
  color: inherit !important;
}

.pill-caret {
  color: #374151 !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
}

.custom-menu.open .pill-caret {
  transform: rotate(180deg) !important;
}

/* 6. TIME */
.live-time {
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}

/* 7. PROFILE / LOG-IN */
.profile-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5C6B73 0%, #8A5340 100%) !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.avatar-letter {
  color: #1E293B !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* 8. MENU */
.header-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.header-menu-btn span {
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: #5F6368 !important;
  border-radius: 1px !important;
  transition: background 0.18s !important;
}

.header-menu-btn:hover {
  border-color: #22C55E !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12) !important;
}

.header-menu-btn:hover span {
  background: #22C55E !important;
}

/* SINGLE CLEAN CATEGORY NAVIGATION ROW */
.category-nav {
  height: 50px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav-inner::-webkit-scrollbar {
  display: none !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #5F6368 !important;
  font-weight: 500 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid #1E293B !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #22C55E !important;
  color: #16A34A !important;
  background: #F0FDF4 !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #22C55E !important;
  color: #16A34A !important;
  background: #F0FDF4 !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #5F6368 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22C55E !important;
  display: inline-block !important;
}



/* ==========================================================================
   THECAMPUSNOVA EXACT HEADER REDESIGN (100% MATCHED TO REFERENCE IMAGE)
   ========================================================================== */

/* Topline Bar */
.topline {
  height: 32px !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #374151 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.topline-left {
  color: #374151 !important;
}

.topline-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #374151 !important;
}

.topline-dot {
  color: #22C55E !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Main Header Row */
.site-header {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 1. SEARCH BOX + AI */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 24px !important;
  padding: 0 4px 0 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}

.search-svg {
  color: #5F6368 !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: #374151 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: #5F6368 !important;
  font-weight: 400 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 12px !important;
  background: transparent !important;
  color: #22C55E !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
}

.ai-button .ai-sparkle {
  font-size: 14px !important;
  color: #22C55E !important;
}

.ai-button:hover {
  background: rgba(34, 197, 94, 0.08) !important;
  color: #16A34A !important;
}

/* 2. CENTER LOGO */
.header-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 10px !important;
}

.header-logo-wrap .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 3. SELECT YOUR COLLEGE & 4. EXPLORE & 5. LANGUAGE PILL BUTTONS */
.header-pill-btn {
  height: 40px !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #374151 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.header-pill-btn:hover {
  border-color: #22C55E !important;
  color: #16A34A !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12) !important;
}

.green-icon {
  color: #22C55E !important;
  flex-shrink: 0 !important;
}

.pill-btn-text {
  color: inherit !important;
}

.pill-caret {
  color: #374151 !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
}

.custom-menu.open .pill-caret {
  transform: rotate(180deg) !important;
}

/* 6. TIME */
.live-time {
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}

/* 7. PROFILE / LOG-IN AVATAR */
.profile-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5C6B73 0%, #8A5340 100%) !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.avatar-letter {
  color: #1E293B !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* 8. MENU HAMBURGER BUTTON */
.header-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.header-menu-btn span {
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: #5F6368 !important;
  border-radius: 1px !important;
  transition: background 0.18s !important;
}

.header-menu-btn:hover {
  border-color: #22C55E !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12) !important;
}

.header-menu-btn:hover span {
  background: #22C55E !important;
}

/* ==========================================================================
   SECOND NAVIGATION ROW (CATEGORY PILLS)
   ========================================================================== */
.category-nav {
  height: 50px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav-inner::-webkit-scrollbar {
  display: none !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #5F6368 !important;
  font-weight: 500 !important;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid #1E293B !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #22C55E !important;
  color: #16A34A !important;
  background: #F0FDF4 !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #22C55E !important;
  color: #16A34A !important;
  background: #F0FDF4 !important;
  font-weight: 700 !important;
}

.nav-status {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #5F6368 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
}

.nav-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22C55E !important;
  display: inline-block !important;
}


/* =========================================================
   DIM WHITE + GREY + LIGHT GREEN THEME (THECAMPUSNOVA)
   ========================================================= */
:root {
  --dim-white: #F0F2F5;
  --dim-white-surface: #FAFBFC;
  --dim-white-subtle: #E8ECEF;
  --grey-text: #242D35;
  --grey-muted: #606F7B;
  --grey-border: #D1D5DB;
  --grey-border-light: #DCE2E8;
  --light-green: #77AC3B;
  --light-green-hover: #6CA034;
  --light-green-active: #6CA034;
  --light-green-soft: rgba(58, 155, 143, 0.12);

  --ink: #242D35;
  --muted: #606F7B;
  --line: #DCE2E8;
  --paper: #FAFBFC;
  --white: #FAFBFC;
  --navy: #242D35;
  --blue: #77AC3B;
  --sky: #E8F5F3;
  --coral: #77AC3B;
  --coral-soft: rgba(58, 155, 143, 0.12);
  --mint: rgba(58, 155, 143, 0.15);
  --amber: #606F7B;
  --lavender: #E8ECEF;
  --teal: #77AC3B;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  --theme-page: #F0F2F5;
  --theme-surface: #FAFBFC;
  --theme-surface-subtle: #E8ECEF;
  --theme-text: #242D35;
  --theme-muted: #606F7B;
  --theme-line: #DCE2E8;
  --theme-header: #F4F6F8;
}

html, body, html[data-theme="light"], html[data-theme="dark"] {
  color-scheme: light;
  background-color: #F0F2F5 !important;
  color: #242D35 !important;
  --theme-page: #F0F2F5;
  --theme-surface: #FAFBFC;
  --theme-text: #242D35;
  --theme-muted: #606F7B;
  --theme-line: #DCE2E8;
  --theme-header: #F4F6F8;
}

/* =========================================================
   TOPLINE
   ========================================================= */
.topline {
  height: 32px;
  padding: 0 3%;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  color: #606F7B !important;
  font-size: 11.5px;
  background: #E5E9EC !important;
  border-bottom: 1px solid #DCE2E8 !important;
}

.topline i {
  width: 5px;
  height: 5px;
  background: #77AC3B !important;
  border-radius: 50%;
  display: inline-block;
}

/* =========================================================
   SITE HEADER - EXACT SEQUENCE & BALANCED SPACING
   ========================================================= */
.site-header {
  height: 76px !important;
  padding: 0 2.5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: #F4F6F8 !important;
  border-bottom: 1px solid #DCE2E8 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* 1. SEARCH BOX (WITH AI) */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: #FAFBFC !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 22px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.12) !important;
  background: #FFFFFF !important;
}

.ai-search-field {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  height: 100% !important;
  padding-left: 14px !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}

.header-search input {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  width: 100% !important;
  color: #242D35 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.header-search input::placeholder {
  color: #7B8A97 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 34px !important;
  margin-right: 4px !important;
  padding: 0 12px !important;
  background: #77AC3B !important;
  color: #1E293B !important;
  border: 0 !important;
  border-radius: 17px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ai-button:hover {
  background: #6CA034 !important;
}

/* 2. CENTER THECAMPUSNOVA LOGO */
.header-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 8px !important;
}

.header-logo-wrap .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 3. SELECT YOUR COLLEGE & 4. EXPLORE & 5. LANGUAGE */
.menu-trigger {
  height: 40px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FAFBFC !important;
  color: #242D35 !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.menu-trigger:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.1) !important;
}

.goal-menu .goal-trigger {
  width: auto !important;
  min-width: max-content !important;
}

.goal-menu .goal-trigger::before, .goal-menu .goal-trigger::after {
  display: none !important;
}

.goal-icon {
  color: #77AC3B !important;
}

.explore-menu .explore-trigger {
  width: auto !important;
  min-width: max-content !important;
}

.explore-icon {
  color: #77AC3B !important;
}

.language-menu .language-trigger {
  padding: 0 10px !important;
  min-width: max-content !important;
}

/* 6. TIME */
.live-time {
  color: #606F7B !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* 7. LOG-IN */
.sign-in {
  border: 1.5px solid #77AC3B !important;
  background: #77AC3B !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  color: #1E293B !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.2) !important;
}

.sign-in:hover {
  background: #6CA034 !important;
  border-color: #6CA034 !important;
  transform: translateY(-1px) !important;
}

/* 8. MENU */
.menu-button {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 36px !important;
  height: 36px !important;
  background: #FAFBFC !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  padding: 6px !important;
  transition: border-color 0.2s ease !important;
}

.menu-button span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #5F6368 !important;
  border-radius: 1px !important;
}

.menu-button:hover {
  border-color: #77AC3B !important;
}

.menu-button:hover span {
  background: #77AC3B !important;
}

/* Dropdown Panels */
.menu-panel {
  background: #FAFBFC !important;
  border: 1px solid #DCE2E8 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  color: #242D35 !important;
}

.menu-panel button, .menu-panel a {
  color: #374151 !important;
}

.menu-panel button:hover, .menu-panel a:hover {
  background: rgba(58, 155, 143, 0.08) !important;
  color: #77AC3B !important;
}

/* =========================================================
   CATEGORY NAVIGATION PILLS
   ========================================================= */
.category-nav {
  height: 48px !important;
  background: #ECEFF2 !important;
  border-bottom: 1px solid #DCE2E8 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 2.5% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav-inner::-webkit-scrollbar {
  display: none !important;
}

.nav-inner a {
  font-size: 12.5px !important;
  color: #5F6368 !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  border: 1.5px solid #D1D5DB !important;
  background: #FAFBFC !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.nav-inner a::before, .nav-inner a::after {
  display: none !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.08) !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.12) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #1E293B !important;
  background: #77AC3B !important;
  box-shadow: 0 2px 8px rgba(58, 155, 143, 0.25) !important;
  font-weight: 700 !important;
}

/* =========================================================
   ALL CARDS, TABLES, MODALS & SURFACES (DIM WHITE + GREY)
   ========================================================= */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card {
  background: #FAFBFC !important;
  border: 1px solid #DCE2E8 !important;
  color: #242D35 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03) !important;
  border-radius: 12px !important;
}

.card:hover, .college-card:hover, .course-card:hover, 
.exam-card:hover, .domain-card:hover, .material-card:hover, .review-card:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 6px 20px rgba(58, 155, 143, 0.12) !important;
}

.filter-sidebar, .filter-box, .filter-group, .filter-panel, .search-container {
  background: #FAFBFC !important;
  border: 1px solid #DCE2E8 !important;
  color: #242D35 !important;
}

.filter-pill, .filter-chip, .tag-btn {
  background: #E8ECEF !important;
  border: 1px solid #D1D5DB !important;
  color: #5F6368 !important;
  border-radius: 18px !important;
}

.filter-pill:hover, .filter-chip:hover, .tag-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.08) !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #1E293B !important;
  border-color: #77AC3B !important;
  font-weight: 700 !important;
}

/* Inputs & Form Controls */
input[type="text"], input[type="search"], input[type="email"], 
input[type="password"], input[type="number"], select, textarea {
  background: #FAFBFC !important;
  border: 1.5px solid #D1D5DB !important;
  color: #242D35 !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.15) !important;
  outline: none !important;
  background: #FFFFFF !important;
}

/* Modals & Dialogs */
.modal-overlay, .modal-backdrop {
  background: rgba(36, 45, 53, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-content, .modal-dialog, .popup-content {
  background: #FAFBFC !important;
  border: 1px solid #DCE2E8 !important;
  color: #242D35 !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
}

/* Badges & Status */
.badge, .status-badge, .rating-badge {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(58, 155, 143, 0.25) !important;
}

/* Primary Buttons */
.btn-primary, .primary-btn, .submit-btn, .primary-button {
  background: #77AC3B !important;
  color: #1E293B !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.2) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover, .primary-btn:hover, .submit-btn:hover, .primary-button:hover {
  background: #6CA034 !important;
}

/* Footer */
.site-footer {
  background: #E8ECEF !important;
  border-top: 1px solid #DCE2E8 !important;
  color: #606F7B !important;
}

.footer-bottom-bar {
  background: #DFE4E8 !important;
  border-top: 1px solid #DCE2E8 !important;
  color: #606F7B !important;
}

/* Text Highlights */
h1, h2, h3, h4, h5, h6 {
  color: #252A30 !important;
}

.hero-copy h1 em, .highlight-green, .text-green {
  color: #77AC3B !important;
}



/* =========================================================
   THECAMPUSNOVA - WHITE + GREEN + GREY THEME OVERRIDES
   ========================================================= */
.site-header {
  height: 80px;
  padding: 0 3.8%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1 1 340px;
  max-width: 420px;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.header-center .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
}

.ai-entry {
  display: flex !important;
  align-items: center;
  position: relative;
  width: 100% !important;
  max-width: 390px !important;
  height: 44px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 24px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.15) !important;
}

.ai-search-field {
  display: flex !important;
  align-items: center;
  flex: 1 !important;
  height: 100% !important;
  padding-left: 14px !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}

.header-search input {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  width: 100% !important;
  color: #252A30 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.header-search input::placeholder {
  color: #5F6368 !important;
}

.ai-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px !important;
  margin-right: 4px !important;
  padding: 0 14px !important;
  background: #77AC3B !important;
  color: #1E293B !important;
  border: 0 !important;
  border-radius: 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-button:hover {
  background: #6CA034 !important;
  box-shadow: 0 2px 8px rgba(58, 155, 143, 0.35) !important;
}

.topline {
  background: #F3F4F6 !important;
  color: #5F6368 !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.topline i {
  background: #77AC3B !important;
}

.category-nav {
  height: 50px !important;
  background: #FAFBFC !important;
  border-bottom: 1px solid #E5E7EB !important;
  display: flex !important;
  align-items: center;
  position: relative;
  z-index: 30;
}

.nav-inner {
  height: 100%;
  padding: 0 3.8% !important;
  display: flex;
  align-items: center;
  gap: 8px !important;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-inner a {
  font-size: 13px !important;
  color: #5F6368 !important;
  font-weight: 600 !important;
  padding: 7px 15px !important;
  border-radius: 8px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.nav-inner a::before, .nav-inner a::after {
  display: none !important;
}

.nav-inner a:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.06) !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.15) !important;
}

.nav-inner a.active, .nav-inner a[data-active="true"] {
  border-color: #77AC3B !important;
  color: #1E293B !important;
  background: #77AC3B !important;
  box-shadow: 0 2px 8px rgba(58, 155, 143, 0.25) !important;
  font-weight: 700 !important;
}

.menu-trigger {
  height: 42px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #252A30 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

.menu-trigger:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  box-shadow: 0 2px 8px rgba(58, 155, 143, 0.12) !important;
}

.goal-menu .menu-trigger {
  width: auto !important;
  min-width: 120px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.goal-menu .menu-trigger::before, .goal-menu .menu-trigger::after {
  display: none !important;
}

.explore-trigger {
  width: auto !important;
  min-width: 110px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.sign-in {
  border: 1.5px solid #77AC3B !important;
  background: #77AC3B !important;
  padding: 9px 20px !important;
  border-radius: 8px !important;
  color: #1E293B !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.25) !important;
}

.sign-in:hover {
  background: #6CA034 !important;
  border-color: #6CA034 !important;
  transform: translateY(-1px);
}

.menu-panel {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08) !important;
  color: #252A30 !important;
}

.menu-panel button, .menu-panel a {
  color: #374151 !important;
}

.menu-panel button:hover, .menu-panel a:hover {
  background: rgba(58, 155, 143, 0.08) !important;
  color: #77AC3B !important;
}

.site-footer {
  background: #F9FAFB !important;
  border-top: 1px solid #E5E7EB !important;
  color: #5F6368 !important;
}

.hero-copy h1 em {
  color: #77AC3B !important;
}

.primary-button {
  background: #77AC3B !important;
  color: #1E293B !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(58, 155, 143, 0.25) !important;
}

.primary-button:hover {
  background: #6CA034 !important;
}

/* =========================================================
   THECAMPUSNOVA - MAIN CORE STYLESHEET
   Desktop Base & Comprehensive Responsive Mobile Styling
   ========================================================= */

:root {
  --ink: #252A30;
  --muted: #5F6368;
  --line: #E5E7EB;
  --paper: #FAFBFC;
  --white: #FFFFFF;
  --navy: #374151;
  --blue: #77AC3B;
  --sky: #F0FDF4;
  --coral: #77AC3B;
  --coral-soft: rgba(58, 155, 143, 0.12);
  --mint: rgba(58, 155, 143, 0.15);
  --amber: #9CA3AF;
  --lavender: #F3F4F6;
  --teal: #77AC3B;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  --theme-page: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-surface-subtle: #F8FAFC;
  --theme-text: #252A30;
  --theme-muted: #5F6368;
  --theme-line: #E5E7EB;
  --theme-header: #FFFFFF;
  --primary-green: #77AC3B;
  --primary-green-hover: #6CA034;
  --primary-green-active: #6CA034;
  --primary-green-soft: rgba(58, 155, 143, 0.12);
  --secondary-grey: #5F6368;
  --secondary-grey-light: #9CA3AF;
  --border-grey: #E5E7EB;
  --border-grey-medium: #D1D5DB;
  --bg-white: #FFFFFF;
  --bg-light: #F8FAFC;
  --bg-subtle: #F1F5F9;
}

html, body, html[data-theme="light"], html[data-theme="dark"] {
  color-scheme: light;
  --theme-page: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-text: #252A30;
  --theme-muted: #5F6368;
  --theme-line: #E5E7EB;
  --theme-header: #FFFFFF;
  background: #FFFFFF;
  color: #252A30;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
  color: var(--theme-text);
  background: var(--theme-page);
  font-family: 'DM Sans', 'Noto Sans Tamil', 'Latha', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
}

button, a, input, select, textarea {
  font: inherit;
}

select {
  color-scheme: dark;
}

select option {
  background-color: #1E293B;
  color: #1E293B;
}

select option:hover,
select option:focus,
select option:checked {
  background-color: #F1F5F9 !important;
  color: #1E293B !important;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Topline */
.topline {
  height: 32px;
  padding: 0 5.2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #374151;
  font-size: 11px;
  letter-spacing: .03em;
  background: #eef3f5;
}

html[data-theme="dark"] .topline {
  background: #F9FAFB;
  color: #374151;
  border-bottom: 1px solid var(--theme-line);
}

.topline-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.topline i {
  width: 4px;
  height: 4px;
  background: #7fa58f;
  border-radius: 50%;
  display: inline-block;
}

/* Site Header */
.site-header {
  height: 78px;
  padding: 0 5.2%;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--theme-header);
  border-bottom: 1px solid var(--theme-line);
  position: relative;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.04em;
  white-space: nowrap;
}

html[data-theme="dark"] .brand {
  color: #1E293B;
}

/* AI Entry Bar */
.ai-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 1;
  max-width: 390px;
  min-width: 250px;
}

.ai-search-field {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--theme-line);
  border-radius: 7px;
  background: var(--theme-surface);
}

.header-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  color: var(--theme-text);
  font-size: 13px;
}

.ai-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 52px;
  width: 52px;
  height: 42px;
  border: 1px solid #865c50;
  border-radius: 6px;
  background: #77AC3B;
  color: rgba(58, 155, 143, 0.2);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-button:hover {
  background: #51353a;
  border-color: var(--coral);
}

.ai-panel {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  width: 350px;
  padding: 16px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ai-entry.open .ai-panel {
  display: block;
}

.ai-panel-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-line);
}

.ai-panel-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--coral-soft);
  color: var(--coral);
}

.ai-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--theme-muted);
  font-size: 20px;
  cursor: pointer;
}

.ai-chat {
  max-height: 280px;
  overflow-y: auto;
  padding: 12px 0;
}

.ai-welcome {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #F0FDF4;
  border-radius: 7px;
  color: #166534;
  font-size: 12px;
}

.ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-suggestions button {
  border: 1px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  border-radius: 6px !important;
  color: #0F172A !important; /* High contrast, crisp readable text */
  font-weight: 600 !important;
  padding: 8px 10px !important;
  text-align: left !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.ai-suggestions button:hover {
  border-color: #2563EB !important;
  color: #1D4ED8 !important;
  background: #EFF6FF !important;
}

.ai-message-user {
  margin: 8px 0 8px auto;
  max-width: 88%;
  padding: 8px 12px;
  background: #15803D !important;
  border: 1px solid #166534 !important;
  border-radius: 9px 9px 2px 9px;
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

.ai-message-answer {
  margin: 8px auto 8px 0;
  max-width: 92%;
  padding: 9px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 9px 9px 9px 2px;
  color: #0F172A !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}

.ai-message-answer b {
  color: #0F172A !important;
  font-weight: 700;
}

.ai-followup-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 10px;
}

.ai-followup-btn {
  border: 1px solid #CBD5E1 !important;
  background: #F1F5F9 !important;
  border-radius: 12px !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.ai-followup-btn:hover {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}

.ai-input {
  display: flex;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--theme-line);
}

.ai-input input {
  flex: 1;
  height: 38px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-page);
  color: #1E293B;
  padding: 0 10px;
  font-size: 12px;
  outline: 0;
}

.ai-input button {
  width: 38px;
  border: 0;
  border-radius: 6px;
  background: var(--coral);
  color: #1E293B;
  font-size: 16px;
}

/* Custom Dropdown Menus */
.custom-menu {
  position: relative;
}

.menu-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-surface);
  color: var(--theme-text);
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.menu-panel {
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 7px);
  right: 0;
  min-width: 210px;
  padding: 8px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  box-shadow: 0 16px 35px rgba(0,0,0,.4);
}

.custom-menu.open .menu-panel {
  display: block;
}

.menu-panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  border-radius: 5px;
  padding: 9px 12px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.menu-panel button:hover {
  background: rgba(58, 155, 143, 0.15);
  color: var(--coral);
}

/* Goal Menu Trigger */
.goal-menu .menu-trigger {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

.goal-menu .menu-trigger::before,
.goal-menu .menu-trigger::after {
  display: none !important;
  content: none !important;
}

.goal-icon {
  width: 16px;
  height: 16px;
  color: var(--coral);
  flex-shrink: 0;
}

.goal-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  margin-left: 2px;
  margin-right: auto;
}

.goal-label {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--theme-muted);
  margin-bottom: 2px;
}

.goal-val {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--theme-text);
  line-height: 1;
}

.goal-val b {
  font-weight: 700;
  color: var(--theme-text);
}

.goal-arrow {
  font-style: normal;
  font-size: 10px;
  color: var(--theme-muted);
  transition: transform 0.2s ease;
  display: inline-block;
  margin-left: 4px;
}

.goal-menu.open .goal-arrow {
  transform: rotate(180deg);
  color: var(--coral);
}

@keyframes goalMarqueeGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Explore Dropdown Menu */
.explore-menu {
  position: relative;
}

.explore-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  width: auto;
  min-width: max-content;
  padding: 0 12px;
  border: 1.5px solid var(--border-color, #EFEFEF);
  border-radius: 10px;
  background: var(--card-background, #FCFCFC);
  color: var(--main-text, #252A30);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.explore-icon {
  width: 14px;
  height: 14px;
  color: var(--coral);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.explore-trigger b {
  font-weight: 700;
  color: var(--theme-text);
  margin-left: 2px;
  margin-right: auto;
}

.explore-trigger:hover {
  border-color: var(--coral);
}

.explore-trigger:hover b {
  color: var(--coral);
}

.explore-trigger:hover .explore-icon {
  transform: scale(1.08);
}

.explore-arrow {
  font-style: normal;
  font-size: 10px;
  color: var(--theme-muted);
  transition: transform 0.2s ease, color 0.2s ease;
  margin-left: 4px;
}

.explore-menu.open .explore-trigger {
  border-color: var(--coral);
}

.explore-menu.open .explore-trigger b {
  color: var(--coral);
}

.explore-menu.open .explore-arrow {
  transform: rotate(180deg);
  color: var(--coral);
}

.explore-panel {
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: 540px;
  overflow-y: auto;
  padding: 12px;
  border-radius: 10px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  right: 0;
}

.explore-panel::-webkit-scrollbar {
  width: 5px;
}

.explore-panel::-webkit-scrollbar-thumb {
  background: var(--theme-line);
  border-radius: 3px;
}

.explore-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--theme-line);
  margin-bottom: 8px;
}

.explore-panel-header span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}

.explore-panel-header small {
  font-size: 11px;
  color: var(--theme-muted);
  font-weight: 600;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.explore-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: all 0.18s ease;
  text-decoration: none;
  cursor: pointer;
}

.explore-item:hover {
  background: rgba(58, 155, 143, 0.12);
  border-color: rgba(58, 155, 143, 0.35);
  transform: translateY(-1px);
}

.exp-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.exp-blue { background: rgba(58, 155, 143, 0.18); }
.exp-coral { background: rgba(58, 155, 143, 0.18); }
.exp-mint { background: rgba(58, 155, 143, 0.18); }
.exp-teal { background: rgba(58, 155, 143, 0.22); }
.exp-amber { background: rgba(244, 231, 197, 0.18); }
.exp-lavender { background: rgba(233, 228, 243, 0.18); }

.exp-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.exp-text strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-text);
  line-height: 1.2;
}

.explore-item:hover .exp-text strong {
  color: var(--coral);
}

.exp-text small {
  font-size: 10px;
  color: var(--theme-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Enhanced Language Dropdown Panel */
.language-panel {
  width: 230px;
  padding: 6px;
  border-radius: 10px;
}

.language-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--theme-line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--theme-muted);
}

.language-panel-header small {
  font-size: 10px;
  color: var(--coral);
  font-weight: 700;
}

.language-panel-scroll {
  max-height: 250px;
  overflow-y: auto;
  padding: 4px 0;
}

.language-panel-scroll::-webkit-scrollbar {
  width: 4px;
}

.language-panel-scroll::-webkit-scrollbar-thumb {
  background: var(--theme-line);
  border-radius: 2px;
}

.lang-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--theme-text) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.lang-item:hover {
  background: rgba(58, 155, 143, 0.12) !important;
  color: var(--coral) !important;
}

.lang-item.active {
  background: rgba(58, 155, 143, 0.18) !important;
  color: var(--coral) !important;
  font-weight: 700 !important;
}

.lang-item-code {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--theme-muted);
}

.lang-item.active .lang-item-code {
  background: rgba(58, 155, 143, 0.25);
  color: var(--coral);
}

.language-others-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding: 9px 10px !important;
  border-top: 1px solid var(--theme-line) !important;
  border-radius: 0 0 6px 6px !important;
  background: rgba(58, 155, 143, 0.08) !important;
  color: var(--coral) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.language-others-btn:hover {
  background: rgba(58, 155, 143, 0.18) !important;
}

.others-arrow {
  font-size: 12px;
  font-weight: 800;
}

.drawer-more-lang-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--theme-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.drawer-more-lang-btn:hover {
  background: rgba(58, 155, 143, 0.15);
  border-color: var(--coral);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.live-time {
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
}

.sign-in {
  border: 1px solid var(--theme-line);
  background: var(--theme-surface);
  padding: 9px 18px;
  border-radius: 6px;
  color: var(--theme-text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.sign-in:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.menu-button {
  display: none;
}

/* Category Navigation */
.category-nav {
  height: 48px;
  background: var(--theme-header);
  border-bottom: 1px solid var(--theme-line);
  display: flex;
  align-items: center;
}

.nav-inner {
  height: 100%;
  padding: 0 5.2%;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: auto;
}

.nav-inner a {
  position: relative;
  font-size: 12.5px;
  color: var(--theme-muted);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  overflow: hidden;
  z-index: 1;
  text-decoration: none;
  transition: color 0.2s ease, box-shadow 0.3s ease;
}

.nav-inner a::before {
  content: '';
  position: absolute;
  top: -120%;
  left: -120%;
  width: 340%;
  height: 340%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(58, 155, 143, 0.75) 50deg,
    rgba(58, 155, 143, 0.75) 120deg,
    transparent 180deg,
    rgba(58, 155, 143, 0.75) 230deg,
    rgba(58, 155, 143, 0.75) 300deg,
    transparent 360deg
  );
  animation: navBorderRoam 5s linear infinite;
  animation-delay: calc(var(--nav-i, 0) * -0.5s);
  z-index: -2;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.nav-inner a::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--theme-header);
  border-radius: 5px;
  z-index: -1;
  transition: background 0.2s ease;
}

.nav-inner a:hover {
  color: var(--theme-text);
  box-shadow: 0 0 12px rgba(58, 155, 143, 0.3), 0 0 10px rgba(58, 155, 143, 0.2);
}

.nav-inner a:hover::before {
  opacity: 1;
  animation-duration: 3.2s;
}

.nav-inner a:hover::after {
  background: var(--theme-surface);
}

@keyframes navBorderRoam {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.nav-status {
  margin-left: auto;
  font-size: 11.5px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
}

.nav-status b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6db085;
  display: inline-block;
}

/* =========================================================
   HERO SECTION & COLLEGE ADVERTISEMENT
   ========================================================= */
.hero-section {
  min-height: 520px;
  padding: 74px 5.2% 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  background: #F0FDF4;
  color: #1E293B;
}

.hero-copy {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 680px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--coral);
  vertical-align: middle;
  margin-left: 7px;
}

.hero-copy h1 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.04;
  letter-spacing: -.05em;
  margin: 0;
  color: #1E293B;
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--coral);
}

.hero-text {
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 540px;
  color: var(--theme-muted);
  margin: 20px 0 28px;
}

.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 600px;
  height: 56px;
  background: var(--theme-surface);
  padding: 6px 8px 6px 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--theme-line);
  border-radius: 8px;
}

.hero-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  color: var(--theme-text);
  font-size: 14px;
}

.primary-button {
  border: 0;
  background: var(--coral);
  color: #1E293B;
  font-weight: 700;
  border-radius: 6px;
  padding: 13px 20px;
  font-size: 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.primary-button:hover {
  background: #77AC3B;
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
  color: var(--theme-muted);
  font-size: 12px;
}

.quick-links button {
  border: 0;
  background: transparent;
  color: #374151;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
}

.quick-links button:hover {
  color: var(--coral);
  text-decoration: underline;
}

/* Hero Ad Card */
.hero-visual {
  position: relative;
  flex: 1;
  max-width: 440px;
  min-width: 320px;
  display: flex;
  justify-content: flex-end;
}

.hero-ad-card {
  width: 100%;
  background: linear-gradient(145deg, #F1F5F9 0%, #FFFFFF 100%);
  border: 1px solid #2d4554;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  color: #1E293B;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-ad-badge {
  background: rgba(58, 155, 143, 0.2);
  color: #6CA034;
  border: 1px solid rgba(58, 155, 143, 0.4);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero-ad-verified {
  font-size: 11px;
  font-weight: 700;
  color: #77AC3B;
}

.hero-ad-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #374151;
  display: block;
}

.hero-ad-title {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  line-height: 1.25;
  color: #1E293B;
  margin: 4px 0 6px;
}

.hero-ad-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #5F6368;
  margin: 0 0 8px;
}

.hero-ad-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
}

.hero-ad-metric strong {
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  color: #f1ad8d;
  display: block;
}

.hero-ad-metric small {
  font-size: 10px;
  color: #5F6368;
}

.hero-ad-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.hero-ad-tags span {
  background: #F1F5F9;
  color: #374151;
  border: 1px solid #2d4c5f;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.hero-ad-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}

.hero-ad-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pulse-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #77AC3B;
  animation: pulseGreenGlow 1.8s infinite;
}

@keyframes pulseGreenGlow {
  0% { box-shadow: 0 0 0 0 rgba(58, 155, 143, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(58, 155, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 155, 143, 0); }
}

.hero-ad-status small {
  font-size: 10px;
  color: #5F6368;
}

.hero-ad-btn {
  background: var(--coral);
  color: #1E293B;
  border: 0;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Stats Strip */
.stats-strip {
  min-height: 96px;
  background: var(--theme-surface);
  border-bottom: 1px solid var(--theme-line);
  padding: 24px 5.2%;
  display: flex;
  align-items: center;
  gap: 6%;
}

.stats-strip strong {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  color: var(--navy);
  display: block;
}

html[data-theme="dark"] .stats-strip strong {
  color: #1E293B;
}

.stats-strip strong span {
  color: var(--coral);
}

.stats-strip small {
  color: var(--theme-muted);
  font-size: 11px;
}

.strip-quote {
  margin-left: auto;
  color: var(--coral);
  font-family: Georgia, serif;
  font-size: 14px;
  max-width: 240px;
}

.strip-quote span {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: var(--theme-muted);
  margin-top: 4px;
}

/* =========================================================
   SECTIONS: GOAL, STREAMS, COLLEGES, DOMAINS, FEATURE BAND
   ========================================================= */
.section {
  padding: 80px 5.2% 0;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}

.section-heading h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 34px;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: 0;
  color: #1E293B;
}

.section-subtitle {
  color: var(--theme-muted);
  margin: 8px 0 0;
  font-size: 14px;
}

.text-link {
  color: var(--coral);
  font-size: 13px;
  font-weight: 700;
}

/* Goal Grid */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.goal-card {
  position: relative;
  text-align: left;
  min-height: 160px;
  padding: 20px 18px;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  background: var(--theme-surface);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}

.goal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--coral);
}

.goal-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 20px;
}

.mint { background: var(--mint); color: #397666; }
.amber { background: var(--amber); color: #5F6368; }
.blue { background: var(--sky); color: var(--blue); }
.coral { background: var(--coral-soft); color: var(--coral); }
.lavender { background: var(--lavender); color: #786e9a; }
.teal { background: var(--teal); color: #3b8788; }

.goal-card strong {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: #1E293B;
  display: block;
}

.goal-card small {
  color: var(--theme-muted);
  font-size: 11.5px;
  margin-top: 6px;
  line-height: 1.4;
  display: block;
}

.tiny-arrow {
  position: absolute;
  right: 14px;
  top: 18px;
  color: var(--theme-muted);
}

/* Stream Section */
.stream-section {
  padding-bottom: 80px;
}

.stream-layout {
  display: grid;
  grid-template-columns: 35% 65%;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  overflow: hidden;
}

.stream-list {
  background: #FFFFFF;
  padding: 12px;
}

.stream-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--theme-line);
  padding: 16px 14px;
  background: transparent;
  color: var(--theme-muted);
  cursor: pointer;
  transition: background 0.15s;
}

.stream-item.active {
  background: var(--theme-surface);
  color: #1E293B;
  border-radius: 6px;
}

.stream-detail {
  padding: 36px 40px;
  background: var(--theme-surface);
  min-height: 350px;
}

.stream-detail h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  color: #1E293B;
  margin: 8px 0 10px;
}

.stream-detail > p {
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.6;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.field-grid button {
  padding: 14px;
  text-align: left;
  background: #F1F5F9;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
}

.field-grid button:hover {
  border-color: var(--coral);
  color: #1E293B;
}

/* Top 20 Colleges Section */
.colleges-section {
  padding-bottom: 80px;
}

.college-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.top-college-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}

.top-college-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.college-thumb {
  height: 120px;
  position: relative;
  background: linear-gradient(135deg, var(--thumb-one, #F1F5F9), var(--thumb-two, #FFFFFF));
  overflow: hidden;
}

.college-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.top-college-card:hover .college-thumb-img {
  transform: scale(1.06);
}

.college-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 22, 26, 0.25) 0%, rgba(18, 22, 26, 0.75) 100%);
  pointer-events: none;
}

.college-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  background: rgba(16, 27, 36, 0.85);
  border-radius: 4px;
  color: #1E293B;
  font-size: 11px;
  font-weight: 800;
  z-index: 2;
}

.college-city {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #1E293B;
  font-size: 10.5px;
  z-index: 2;
  text-shadow: none;
}

.top-college-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-college-body h3 {
  font-family: 'Manrope', sans-serif;
  color: #1E293B;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 6px;
}

.top-college-body > small {
  color: var(--theme-muted);
  font-size: 11px;
}

.college-rating {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 8px;
  color: #77AC3B;
  font-size: 11.5px;
  font-weight: 700;
}

.college-course {
  color: var(--theme-muted);
  font-size: 11px;
}

.college-placement {
  color: #77AC3B;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

/* View College (PRIMARY / PROMINENT BUTTON) */
.college-view {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  background: var(--coral, #3A9B8F) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(58, 155, 143, 0.25) !important;
}

.college-view:hover {
  background: #2E8076 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(58, 155, 143, 0.35) !important;
}

/* Update Details (SMALL / SECONDARY BUTTON) */
.further-details-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: 8px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.further-details-trigger:hover {
  border-color: var(--coral, #3A9B8F) !important;
  color: var(--coral, #3A9B8F) !important;
  background: rgba(58, 155, 143, 0.08) !important;
}

/* Explore Domains */
.domain-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 16px;
}

.domain-card {
  min-height: 270px;
  padding: 24px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.domain-top, .domain-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demand {
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 800;
}

.demand.high { color: #f1ad8d; }
.demand.emerging { color: #77AC3B; }
.demand.stable { color: #569794; }

.domain-card h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  color: #1E293B;
  margin: 32px 0 8px;
}

.domain-card p {
  font-size: 12.5px;
  color: var(--theme-muted);
  margin: 0;
}

.domain-bottom {
  margin-top: auto;
  border-top: 1px solid var(--theme-line);
  padding-top: 14px;
}

.domain-bottom button {
  border: 0;
  background: transparent;
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
}

/* Feature Band ("A MAP, NOT A MAZE") */
.feature-band {
  margin-top: 80px;
  padding: 48px 5.2%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  background: #FFFFFF;
  border-top: 1px solid var(--theme-line);
  border-bottom: 1px solid var(--theme-line);
}

.feature-band-left h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 32px;
  color: #1E293B;
  margin: 0 0 10px;
}

.feature-band-left p:not(.eyebrow) {
  color: var(--theme-muted);
  font-size: 13.5px;
  margin: 0 0 20px;
}

.outline-button {
  background: transparent;
  border: 1px solid #b7cbc6;
  color: #1E293B;
  border-radius: 6px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.feature-ad-banner {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-ad-header {
  display: flex;
  justify-content: space-between;
}

.feature-ad-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--coral);
  letter-spacing: 0.1em;
}

.feature-ad-stat {
  font-size: 11px;
  font-weight: 700;
  color: #77AC3B;
}

.feature-ad-banner h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  color: #1E293B;
  margin: 0;
}

.feature-ad-banner p {
  font-size: 12.5px;
  color: var(--theme-muted);
  margin: 0;
  line-height: 1.55;
}

.feature-ad-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--theme-line);
}

.feature-ad-btn {
  background: var(--coral);
  color: #1E293B;
  border: 0;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.feature-ad-sub {
  font-size: 10.5px;
  color: var(--theme-muted);
}

/* Portal Grid, Resources, Guidance & Newsletter */
.portal-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 16px;
}

.portal-panel {
  min-height: 320px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 22px;
}

.panel-top {
  display: flex;
  justify-content: space-between;
  color: #374151;
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 800;
}

.panel-top b {
  color: var(--coral);
}

.exam-panel h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  color: #1E293B;
  margin: 28px 0 18px;
}

.exam-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--theme-line);
  margin-bottom: 10px;
}

.exam-tabs button {
  border: 0;
  background: transparent;
  padding: 0 0 8px;
  color: var(--theme-muted);
  font-size: 11px;
}

.exam-tabs button.active {
  color: var(--coral);
  border-bottom: 2px solid var(--coral);
  font-weight: 700;
}

.exam-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--theme-line);
  padding: 14px 0;
}

.exam-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #77AC3B;
  color: #1E293B;
  font-weight: 700;
}

.exam-logo.coral {
  background: var(--coral);
}

.exam-row strong {
  font-size: 13px;
  color: #1E293B;
  display: block;
}

.exam-row small {
  font-size: 10.5px;
  color: var(--theme-muted);
}

.college-image {
  height: 140px;
  margin: 18px 0 12px;
  background: linear-gradient(135deg,#F1F5F9,#FFFFFF);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.feature-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.portal-panel:hover .feature-card-img,
.mag-card:hover .feature-card-img {
  transform: scale(1.05);
}

.college-image-overlay,
.mag-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 22, 26, 0.15) 0%, rgba(18, 22, 26, 0.8) 100%);
  pointer-events: none;
}

.college-image span {
  position: absolute;
  bottom: 10px;
  left: 12px;
  color: #1E293B;
  font-size: 9px;
  letter-spacing: .12em;
  z-index: 2;
}

.college-info {
  display: flex;
  justify-content: space-between;
}

.college-info h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  color: #1E293B;
  margin: 0;
}

.college-stats {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--theme-line);
  padding-top: 12px;
  margin-top: 12px;
  font-size: 10px;
  color: var(--theme-muted);
}

.college-stats b {
  color: #1E293B;
  font-size: 12px;
  display: block;
}

.outcome-number {
  margin: 32px 0 16px;
}

.outcome-number strong {
  font-family: 'Manrope', sans-serif;
  font-size: 46px;
  color: #1E293B;
  line-height: 1;
}

.outcome-number strong span {
  color: var(--coral);
}

.outcome-number small {
  color: var(--theme-muted);
  font-size: 11px;
}

.outcome-bars {
  height: 75px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 1px solid var(--theme-line);
}

.outcome-bars span {
  flex: 1;
  background: var(--coral);
  border-radius: 4px 4px 0 0;
  position: relative;
}

.outcome-bars i {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  color: var(--theme-muted);
  font-size: 9px;
}

.outcome-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  font-size: 10.5px;
  color: var(--theme-muted);
}

.outcome-footer b {
  color: #1E293B;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.resource-grid article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-surface);
}

.resource-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 16px;
}

.resource-grid strong {
  color: #1E293B;
  font-size: 13px;
  display: block;
}

.resource-grid small {
  color: var(--theme-muted);
  font-size: 10.5px;
}

.resource-grid button {
  border: 0;
  background: transparent;
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
}

.guidance-section {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  padding-bottom: 80px;
}

.guidance-review, .rankings-panel, .mentor-panel {
  min-height: 260px;
  border-radius: 10px;
  padding: 24px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
}

.guidance-review blockquote {
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.35;
  color: #374151;
  margin: 24px 0 16px;
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--theme-line);
  font-size: 12px;
}

.rank-item > span { color: var(--coral); font-weight: 700; }
.rank-item strong { color: var(--theme-muted); }
.rank-item > b { margin-left: auto; color: #1E293B; }

.mentor-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}

.mentor-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--coral);
  color: #1E293B;
  font-weight: 700;
}

.mentor-person button {
  margin-left: auto;
  border: 1px solid var(--theme-line);
  border-radius: 4px;
  background: var(--theme-page);
  color: var(--coral);
  padding: 4px 8px;
  font-weight: 700;
}

/* Split Section & Magazine */
.split-section {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  padding-bottom: 80px;
}

.magazine-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.mag-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  overflow: hidden;
}

.mag-image {
  height: 150px;
  position: relative;
  background: linear-gradient(135deg, #F1F5F9, #FFFFFF);
  overflow: hidden;
}

.mag-image span {
  position: absolute;
  bottom: 10px;
  left: 12px;
  color: #1E293B;
  font-size: 9px;
  letter-spacing: .12em;
  z-index: 2;
}

.mag-copy {
  padding: 18px;
}

.mag-copy small {
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.mag-copy h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: #1E293B;
  margin: 8px 0 14px;
}

.mag-copy a {
  color: var(--coral);
  font-weight: 700;
  font-size: 12px;
}

.ad-rail {
  border-left: 1px solid var(--theme-line);
  padding-left: 30px;
}

.ad-art {
  min-height: 280px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid var(--theme-line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ad-art p {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  color: #1E293B;
  line-height: 1.2;
}

.ad-art small {
  color: var(--theme-muted);
  font-size: 11px;
}

.ad-art button {
  border: 0;
  background: transparent;
  color: var(--coral);
  font-weight: 700;
  font-size: 12px;
  text-align: left;
}

/* Newsletter Section */
.newsletter-section {
  display: grid;
  grid-template-columns: .9fr 1.5fr;
  gap: 50px;
  align-items: center;
  padding: 60px 5.2%;
  background: #FFFFFF;
  border-top: 1px solid var(--theme-line);
  border-bottom: 1px solid var(--theme-line);
}

.newsletter-copy h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 30px;
  color: #1E293B;
  margin: 0 0 10px;
}

.newsletter-copy > p:not(.eyebrow) {
  color: var(--theme-muted);
  font-size: 13.5px;
  margin: 0;
}

.newsletter-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr auto;
  gap: 10px;
}

.newsletter-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
}

.newsletter-form input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--theme-text);
  font-size: 12.5px;
}

.newsletter-form select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--theme-text);
  font-size: 12.5px;
  cursor: pointer;
  color-scheme: dark;
}

.newsletter-form select option {
  background-color: var(--theme-surface, #FFFFFF);
  color: var(--theme-text, #1E293B);
  padding: 8px 12px;
}

.newsletter-form select option:hover,
.newsletter-form select option:focus,
.newsletter-form select option:checked {
  background-color: #F1F5F9 !important;
  color: #1E293B !important;
}

.newsletter-form .primary-button {
  height: 46px;
}

/* =========================================================
   ORIGINAL THECAMPUSNOVA FOOTER (Responsive & Functional)
   ========================================================= */
.site-footer {
  background: #F9FAFB;
  border-top: 1px solid var(--theme-line);
  color: var(--theme-muted);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.footer-top-banner {
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--theme-line);
  padding: 32px 5.2%;
}

.footer-banner-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-banner-copy {
  max-width: 680px;
}

.footer-banner-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.footer-banner-copy h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  color: #1E293B;
  margin: 0 0 6px;
}

.footer-banner-copy p {
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.footer-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── FOOTER: ROW-WISE REDESIGN ── */
.footer-main {
  padding: 48px 5.2% 32px;
  max-width: 1320px;
  margin: 0 auto;
}

/* Top identity row: brand left, stats right */
.footer-identity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-brand-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
}

.footer-brand-name {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: block;
}

.footer-brand-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--coral);
  text-transform: uppercase;
  line-height: 1;
  display: block;
}

.footer-desc {
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 380px;
}

/* Stats pills — horizontal row on the right */
.footer-stats-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-stats-row span {
  font-size: 12px;
  font-weight: 700;
  color: #3D6B1C;
  background: rgba(119, 172, 59, 0.10);
  border: 1px solid rgba(119, 172, 59, 0.30);
  border-radius: 20px;
  padding: 5px 14px;
  letter-spacing: 0.01em;
}

/* Horizontal rule between identity and nav rows */
.footer-hr {
  height: 1px;
  background: var(--theme-line, #E2E8F0);
  margin-bottom: 4px;
}

/* Nav row container */
.footer-nav-rows {
  display: flex;
  flex-direction: column;
}

/* Each category row */
.footer-nav-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 11px 0;
  border-bottom: 1px solid #F1F5F9;
}

.footer-nav-row:last-child {
  border-bottom: none;
}

/* Category label */
.footer-nav-row-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #77AC3B;
  min-width: 108px;
  flex-shrink: 0;
  padding-right: 16px;
  border-right: 1.5px solid #E2E8F0;
  margin-right: 4px;
}

/* Links container — horizontal with pipe dividers */
.footer-nav-row-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer-nav-row-links a {
  font-size: 13px;
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  padding: 2px 14px;
  border-right: 1px solid #E2E8F0;
  line-height: 1.5;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.footer-nav-row-links a:last-child {
  border-right: none;
}

.footer-nav-row-links a:hover {
  color: #77AC3B;
}

/* Attribution row */
.footer-attribution-row {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed #E2E8F0;
  text-align: center;
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.footer-attribution-row strong {
  color: #64748B;
  font-weight: 700;
}

.footer-attribution-link {
  color: #15803D;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.footer-attribution-link:hover,
.footer-attribution-link:focus {
  color: #166534;
  text-decoration: underline;
}

.footer-attribution-link strong {
  color: inherit;
}

/* Bottom bar */
.footer-bottom-bar {
  border-top: 1px solid var(--theme-line);
  padding: 20px 5.2%;
  background: #F9FAFB;
}

.footer-bottom-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
}

.footer-copyright {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-muted);
}

.footer-sep {
  color: var(--theme-line);
}

.footer-subtext {
  color: #657e8a;
  font-size: 11.5px;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-legal-links a {
  color: var(--theme-muted);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.15s;
}

.footer-legal-links a:hover {
  color: #1E293B;
}

.back-to-top-btn {
  color: #77AC3B !important;
  font-weight: 700;
}


.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal-links a {
  color: var(--theme-muted);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.15s ease;
}

.footer-legal-links a:hover {
  color: #1E293B;
}

.back-to-top-btn {
  color: var(--coral) !important;
  font-weight: 700;
  border: 1px solid rgba(58, 155, 143, 0.3);
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(58, 155, 143, 0.08);
}

.back-to-top-btn:hover {
  background: var(--coral) !important;
  color: #1E293B !important;
}

/* =========================================================
   MEDIA & RESOURCES UPLOAD SECTION (Requirement 1 & 2)
   ========================================================= */
.media-resources-section {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 18px 16px;
  margin-top: 10px;
  margin-bottom: 6px;
}

.media-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-line);
}

.media-section-icon {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.media-section-title {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: #1E293B;
}

.media-section-sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--theme-muted);
}

.media-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.media-field-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.media-field-limit {
  font-size: 10px;
  font-weight: 700;
  color: var(--theme-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.media-dropzone {
  border: 1.5px dashed var(--theme-line);
  border-radius: 8px;
  background: var(--theme-page);
  padding: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.media-dropzone.dragover {
  border-color: var(--coral);
  background: rgba(58, 155, 143, 0.08);
}

.media-drop-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.media-drop-icon {
  font-size: 24px;
  margin-bottom: 2px;
}

.media-drop-text strong {
  display: block;
  font-size: 12.5px;
  color: #1E293B;
}

.media-drop-text small {
  display: block;
  font-size: 10.5px;
  color: var(--theme-muted);
  margin-top: 2px;
}

.media-select-btn {
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--coral);
  background: rgba(58, 155, 143, 0.15);
  color: var(--coral);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.media-select-btn:hover {
  background: var(--coral);
  color: #1E293B;
}

.media-preview-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.media-thumb-wrap {
  width: 100%;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumb-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.media-meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.media-file-name {
  font-size: 12px;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-file-size {
  font-size: 11px;
  color: var(--theme-muted);
}

.media-file-status {
  font-size: 10px;
  font-weight: 700;
  color: #77AC3B;
  text-transform: uppercase;
}

.media-btn-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.media-act-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  transition: background 0.15s ease;
}

.replace-btn {
  background: #F8FAFC;
  color: #1E293B;
  border: 1px solid var(--theme-line);
}

.replace-btn:hover {
  background: #F1F5F9;
}

.remove-btn {
  background: rgba(58, 155, 143, 0.18);
  color: #77AC3B;
  border: 1px solid rgba(58, 155, 143, 0.35);
}

.remove-btn:hover {
  background: rgba(58, 155, 143, 0.35);
}

.media-error-text {
  font-size: 11px;
  color: #77AC3B;
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.3);
  padding: 6px 10px;
  border-radius: 5px;
  margin-top: 4px;
}

@media (max-width: 1024px) {
  .footer-nav-row-label {
    min-width: 90px;
  }
  .media-fields-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .footer-identity-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .footer-nav-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 0;
  }
  .footer-nav-row-label {
    border-right: none;
    border-bottom: 1.5px solid #E2E8F0;
    padding-right: 0;
    padding-bottom: 6px;
    margin-right: 0;
    min-width: unset;
    width: 100%;
  }
  .footer-nav-row-links a {
    padding: 2px 10px;
    font-size: 12.5px;
  }
  .footer-banner-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-banner-actions {
    width: 100%;
  }
  .footer-banner-actions button {
    flex: 1;
  }
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .footer-nav-row-links a {
    font-size: 12px;
    padding: 2px 8px;
  }
  .footer-stats-row {
    gap: 8px;
  }
}

/* Modals & Popups */
.further-details-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99990;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.further-details-modal.open {
  display: flex !important;
}

.further-details-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  z-index: -1;
}

.further-details-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}

.compact-dialog {
  width: min(480px, 100%) !important;
}

.further-details-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--theme-line);
  padding-bottom: 16px;
}

.further-details-header h2 {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  color: #1E293B;
}

.further-details-college {
  font-size: 13px;
  color: var(--coral);
  font-weight: 700;
  margin: 4px 0 0;
}

.further-details-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--theme-muted);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.further-details-close:hover {
  color: #1E293B;
}

.modal-body-content {
  padding-top: 18px;
}

.further-details-step {
  font-size: 13.5px;
  color: var(--theme-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}

.vertical-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.modal-field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-muted);
  letter-spacing: 0.04em;
}

.modal-input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-page);
  color: #1E293B;
  padding: 0 14px;
  font-size: 13.5px;
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.18);
}

.otp-code-input {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-align: center;
  font-family: 'DM Sans', monospace, sans-serif;
}

.full-width-modal-btn {
  width: 100% !important;
  height: 46px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.otp-sent-banner {
  background: rgba(58, 155, 143, 0.14);
  border: 1px solid rgba(58, 155, 143, 0.38);
  color: #5F6368;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-otp-box {
  background: #FFFFFF;
  border: 1px dashed rgba(58, 155, 143, 0.55);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-otp-pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo-otp-pill strong {
  font-size: 16px;
  font-weight: 800;
  color: #ff9179;
  letter-spacing: 0.14em;
  font-family: 'DM Sans', monospace, sans-serif;
  background: rgba(58, 155, 143, 0.16);
  padding: 2px 8px;
  border-radius: 4px;
}

.demo-otp-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6e828d;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 7px;
  border-radius: 4px;
}

.modal-error-alert {
  background: rgba(58, 155, 143, 0.14);
  border: 1px solid rgba(58, 155, 143, 0.45);
  color: #ffb19f;
  padding: 11px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.otp-actions-block {
  margin-top: 8px;
}

.otp-resend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 0 4px;
}

.text-btn {
  background: transparent;
  border: 0;
  color: var(--coral);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.2s ease;
}

.text-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.otp-timer-text {
  font-size: 12px;
  color: var(--theme-muted);
  font-weight: 600;
}

/* Temporary Demo OTP Display Box */
.demo-otp-box {
  background: rgba(58, 155, 143, 0.09);
  border: 1px dashed rgba(58, 155, 143, 0.55);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.demo-otp-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.demo-otp-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--coral);
  color: #1E293B;
}

.demo-otp-note {
  font-size: 11px;
  color: var(--theme-muted);
}

.demo-otp-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-otp-label {
  font-size: 12.5px;
  color: var(--theme-text);
  font-weight: 600;
}

.demo-otp-val {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #77AC3B;
  font-family: 'DM Sans', monospace, sans-serif;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid rgba(58, 155, 143, 0.35);
}

/* Searchable Language Selection Modal */
.language-modal-dialog {
  max-width: 620px !important;
  width: 92vw !important;
}

.language-modal-body {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lang-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-search-icon {
  position: absolute;
  left: 12px;
  font-size: 15px;
  color: var(--theme-muted);
  pointer-events: none;
}

.lang-search-box input {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 36px;
  border-radius: 8px;
  border: 1px solid var(--theme-line);
  background: var(--theme-page);
  color: #1E293B;
  font-size: 13.5px;
  outline: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lang-search-box input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.18);
}

.lang-search-clear {
  position: absolute;
  right: 10px;
  background: transparent;
  border: 0;
  color: var(--theme-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}

.lang-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lang-filter-tabs button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--theme-line);
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lang-filter-tabs button:hover {
  color: var(--theme-text);
  border-color: rgba(58, 155, 143, 0.5);
}

.lang-filter-tabs button.active {
  background: var(--coral);
  color: #1E293B;
  border-color: var(--coral);
  font-weight: 700;
}

.lang-results-count {
  font-size: 11.5px;
  color: var(--theme-muted);
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.lang-grid::-webkit-scrollbar {
  width: 5px;
}

.lang-grid::-webkit-scrollbar-thumb {
  background: var(--theme-line);
  border-radius: 3px;
}

.lang-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}

.lang-card:hover {
  background: rgba(58, 155, 143, 0.12);
  border-color: rgba(58, 155, 143, 0.4);
  transform: translateY(-1px);
}

.lang-card.active {
  background: rgba(58, 155, 143, 0.18);
  border-color: var(--coral);
}

.lang-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lang-card-code {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--coral);
}

.lang-card-region {
  font-size: 9.5px;
  color: var(--theme-muted);
}

.lang-card-native {
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-text);
  line-height: 1.2;
}

.lang-card-eng {
  font-size: 11px;
  color: var(--theme-muted);
}

.lang-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--theme-muted);
  font-size: 13px;
}

.further-details-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.further-details-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 700;
}

/* ==========================================================================
   PLACEMENT INTELLIGENCE & COMPANY PREPARATION SYSTEM
   ========================================================================== */

.placement-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  background: var(--theme-surface);
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--theme-line);
}

.placement-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.placement-pill-btn {
  padding: 6px 13px;
  border-radius: 6px;
  border: 1px solid var(--theme-line);
  background: var(--theme-page);
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.placement-pill-btn:hover {
  color: var(--theme-text);
  border-color: var(--coral);
}

.placement-pill-btn.active {
  background: rgba(58, 155, 143, 0.15);
  border-color: var(--coral);
  color: #77AC3B;
  font-weight: 700;
}

.placement-college-select {
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--theme-line);
  background: var(--theme-page);
  color: var(--theme-text);
  font-size: 12.5px;
  outline: 0;
  min-width: 190px;
}

.company-prep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.company-prep-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.company-prep-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.company-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.company-title-wrap h3 {
  margin: 0;
  font-size: 18px;
  color: #1E293B;
  font-family: 'Manrope', sans-serif;
}

.company-title-wrap small {
  color: var(--theme-muted);
  font-size: 11.5px;
}

.priority-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.priority-tag.preferred {
  background: rgba(58, 155, 143, 0.18);
  border: 1px solid rgba(58, 155, 143, 0.4);
  color: #77AC3B;
}

.priority-tag.frequent {
  background: rgba(58, 155, 143, 0.18);
  border: 1px solid rgba(58, 155, 143, 0.4);
  color: #77AC3B;
}

.priority-tag.popular {
  background: rgba(58, 155, 143, 0.18);
  border: 1px solid rgba(58, 155, 143, 0.4);
  color: #6CA034;
}

.priority-tag.emerging {
  background: rgba(58, 155, 143, 0.18);
  border: 1px solid rgba(58, 155, 143, 0.4);
  color: #6CA034;
}

.company-meta-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.company-meta-block strong {
  font-size: 10.5px;
  color: var(--theme-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.company-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.company-skill-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid var(--theme-line);
  color: #d1e2e9;
}

.quant-priority-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
}

.quant-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.quant-tag.high { background: rgba(58, 155, 143, 0.2); color: #77AC3B; border: 1px solid rgba(58, 155, 143, 0.4); }
.quant-tag.med { background: rgba(58, 155, 143, 0.2); color: #6CA034; border: 1px solid rgba(58, 155, 143, 0.4); }
.quant-tag.low { background: rgba(58, 155, 143, 0.2); color: #77AC3B; border: 1px solid rgba(58, 155, 143, 0.4); }

.company-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--theme-line);
}

.prep-guide-btn {
  flex: 1;
  height: 36px;
  background: var(--coral);
  color: #1E293B;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s;
}

.prep-guide-btn:hover { background: #77AC3B; }

.reaction-btn-group {
  display: flex;
  gap: 4px;
}

.reaction-pill-btn {
  height: 36px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--theme-line);
  background: var(--theme-page);
  color: var(--theme-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.reaction-pill-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #1E293B;
  border-color: var(--coral);
}

.reaction-pill-btn.reacted {
  background: rgba(58, 155, 143, 0.18);
  border-color: var(--teal);
  color: #77AC3B;
  font-weight: 700;
}

/* Modal for Company Placement & Preparation */
.placement-prep-dialog {
  max-width: 760px !important;
  width: 94vw !important;
}

.placement-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--theme-line);
}

.placement-modal-body {
  max-height: 72vh;
  overflow-y: auto;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.prep-section-card {
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prep-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #1E293B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quant-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quant-topic-item {
  background: #FFFFFF;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quant-topic-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
}

.quant-topic-item-desc {
  font-size: 11px;
  color: var(--theme-muted);
}

.resource-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--theme-text);
  transition: border-color 0.15s, transform 0.15s;
}

.resource-link-row:hover {
  border-color: var(--coral);
  transform: translateX(3px);
}

.resource-info strong {
  display: block;
  font-size: 13px;
  color: #1E293B;
}

.resource-info small {
  font-size: 11px;
  color: var(--theme-muted);
}

.video-embed-box {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--theme-line);
}

.further-details-form input,
.further-details-form select,
.further-details-form textarea {
  width: 100%;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-page);
  color: #1E293B;
  padding: 10px 12px;
  font-size: 13px;
  outline: 0;
}

.form-span-two {
  grid-column: 1 / -1;
}

.further-details-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  grid-column: 1 / -1;
  margin-top: 8px;
}

.further-details-cancel {
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: transparent;
  color: var(--theme-muted);
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Profile Menu & Portal Links */
.profile-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: var(--theme-text) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.profile-menu-item:hover {
  background: rgba(58, 155, 143, 0.12) !important;
  color: var(--coral) !important;
}

.profile-menu-divider {
  height: 1px;
  background: var(--theme-line);
  margin: 6px 0;
}

/* User Login Modal */
.user-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.user-login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--theme-muted);
}

.user-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.user-forgot-link {
  color: var(--coral);
  text-decoration: none;
  font-weight: 600;
}

/* Toast / Notification Popup */
.toast, #globalToast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #77AC3B !important;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(150px);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), opacity .25s ease;
  z-index: 99999;
}

.toast.show, #globalToast.show {
  transform: translateY(0);
}

/* ==========================================================================
   COURSES → FULL ROADMAP DETAIL VIEW UI ENHANCEMENTS
   ========================================================================== */
#detailView .detail-heading {
  text-align: center !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#detailView .detail-heading h1 {
  color: #0F172A !important;
  font-size: clamp(26px, 3.4vw, 38px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95), 0 2px 12px rgba(255, 255, 255, 0.8) !important;
  text-align: center !important;
  margin: 0 auto 12px !important;
  line-height: 1.25 !important;
}

#detailView .section-subtitle,
#detailView .detail-heading p {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  display: inline-block !important;
  color: #1E293B !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  text-align: center !important;
  max-width: 820px !important;
  margin: 6px auto 14px !important;
}

#detailView .year-tabs {
  display: flex !important;
  gap: 8px !important;
  background: #F1F5F9 !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: 1px solid #CBD5E1 !important;
}

#detailView .year-tabs button {
  background: transparent !important;
  color: #475569 !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#detailView .year-tabs button.active {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(119, 172, 59, 0.3) !important;
}

#detailView .year-tabs button:hover:not(.active) {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

.cn-subject-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.cn-subject-status-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
}

/* Views */
.view { display: none; }
.view.active { display: block; }

/* Navigation & Header Visibility Rules (Home vs Inner Pages) */
body.is-inner-view .topline,
body.is-inner-view .site-header,
body.is-inner-view .category-nav {
  display: none !important;
}

body.is-inner-view .inner-page {
  padding-top: 18px;
}

body.is-home-view .topline {
  display: flex !important;
}
body.is-home-view .site-header {
  display: flex !important;
}
body.is-home-view .category-nav {
  display: block !important;
}

/* Upcoming Exam Floating Notification: strictly exclusive to Exams view */
body:not(.is-exams-view) #examFloatingNotification {
  display: none !important;
}

/* Mobile Navigation Drawer */
.mobile-drawer-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-drawer-backdrop.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: var(--theme-surface, #FFFFFF);
  border-left: 1px solid var(--theme-line, #E2E8F0);
  box-shadow: -6px 0 28px rgba(0,0,0,0.25);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer.open {
  transform: translateX(0) !important;
  display: flex !important;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--theme-line, #1E293B);
}
.drawer-close {
  background: transparent;
  border: 0;
  color: var(--theme-text, #1E293B);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.drawer-search input {
  width: 100%;
  height: 42px;
  background: var(--theme-page, #F8FAFC);
  border: 1px solid var(--theme-line, #1E293B);
  border-radius: 6px;
  color: #1E293B;
  padding: 0 12px;
  font-size: 13px;
  outline: 0;
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.drawer-links a {
  display: block;
  padding: 10px 12px;
  color: var(--theme-text, #1E293B);
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.drawer-links a:hover {
  background: rgba(58, 155, 143, 0.12);
  color: var(--coral, #77AC3B);
}

.drawer-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--theme-line, #1E293B);
}
.drawer-status {
  font-size: 11px;
  color: var(--theme-muted, #5F6368);
  display: flex;
  align-items: center;
  gap: 6px;
}
.drawer-status b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6db085;
  display: inline-block;
}
.drawer-languages {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.drawer-languages button {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--theme-line, #1E293B);
  background: var(--theme-page, #F8FAFC);
  color: var(--theme-text, #1E293B);
  cursor: pointer;
}
.full-width-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}


/* =========================================================
   DESKTOP & TABLET QUERIES
   ========================================================= */
@media (max-width: 1050px) {
  .goal-grid { grid-template-columns: repeat(3, 1fr); }
  .domain-grid { grid-template-columns: repeat(2, 1fr); }
  .college-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-band { grid-template-columns: 1fr; gap: 30px; }
  .newsletter-section { grid-template-columns: 1fr; gap: 30px; }
  .newsletter-form { grid-template-columns: repeat(2, 1fr); }
  .portal-grid { grid-template-columns: 1fr 1fr; }
  .guidance-section { grid-template-columns: 1fr 1fr; }
  .mentor-panel { grid-column: 1 / -1; }
  .strip-quote { display: none; }
}

/* =========================================================
   TRUE PROFESSIONAL MOBILE RESPONSIVE LAYOUT (<= 768px)
   ========================================================= */
@media (max-width: 768px) {
  /* 1. Global Overflow Prevention */
  html, body, #app {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 2. Topline */
  .topline {
    padding: 0 18px;
    font-size: 11px;
    height: 34px;
  }
  .topline-right {
    display: none;
  }

  /* 3. Header */
  .site-header {
    height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .brand img {
    width: 140px !important;
    height: auto !important;
  }
  .header-search,
  .goal-menu,
  .explore-menu,
  .header-actions .language-menu,
  .header-actions .live-time,
  .header-actions .profile-menu,
  .header-actions .sign-in {
    display: none;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
  }
  .menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--theme-line);
    background: var(--theme-surface);
    color: var(--theme-text);
    cursor: pointer;
  }
  .menu-button span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  /* 4. Category Nav */
  .category-nav {
    height: 44px;
    width: 100%;
  }
  .nav-inner {
    padding: 0 18px;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-inner a {
    font-size: 12.5px;
    font-weight: 600;
  }
  .nav-status {
    display: none;
  }

  /* 5. Hero Section */
  .hero-section {
    display: flex !important;
    flex-direction: column !important;
    padding: 36px 18px 32px !important;
    gap: 28px !important;
    min-height: auto !important;
  }
  .hero-copy {
    width: 100% !important;
    max-width: none !important;
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    font-weight: 800;
    margin-bottom: 10px;
  }
  .hero-copy h1 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 12px !important;
  }
  .hero-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--theme-muted) !important;
    margin: 0 0 22px !important;
    max-width: 100% !important;
  }
  .hero-search {
    width: 100% !important;
    min-height: 52px !important;
    padding: 6px 8px 6px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
  }
  .hero-search input {
    font-size: 14px !important;
    width: 100% !important;
  }
  .hero-search .primary-button {
    padding: 11px 18px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
  }
  .quick-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
    font-size: 12px !important;
  }
  .quick-links button {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--theme-line) !important;
  }

  /* Hero College Ad */
  .hero-visual {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 6px !important;
  }
  .hero-ad-card {
    padding: 22px 20px !important;
    border-radius: 14px !important;
    gap: 14px !important;
  }
  .hero-ad-badge {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  .hero-ad-verified {
    font-size: 11px !important;
  }
  .hero-ad-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 4px 0 8px !important;
  }
  .hero-ad-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 0 12px !important;
  }
  .hero-ad-highlights {
    gap: 10px !important;
    padding: 12px 0 !important;
  }
  .hero-ad-metric strong {
    font-size: 16px !important;
  }
  .hero-ad-metric small {
    font-size: 10.5px !important;
  }
  .hero-ad-tags span {
    font-size: 10.5px !important;
    padding: 4px 9px !important;
  }
  .hero-ad-footer {
    padding-top: 14px !important;
  }
  .hero-ad-btn {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

  /* 6. Stats Strip */
  .stats-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    padding: 24px 18px !important;
    min-height: auto !important;
  }
  .stats-strip strong {
    font-size: 26px !important;
  }
  .stats-strip small {
    font-size: 12px !important;
    margin-top: 3px !important;
  }
  .strip-quote {
    display: none !important;
  }

  /* 7. Common Section Headings */
  .section {
    padding: 48px 18px 0 !important;
  }
  .section-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
  }
  .section-heading h2 {
    font-size: clamp(24px, 6vw, 28px) !important;
    line-height: 1.2 !important;
  }
  .section-subtitle {
    font-size: 14px !important;
    margin-top: 6px !important;
  }
  .text-link {
    font-size: 13px !important;
  }

  /* 8. Goal Cards */
  .goal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .goal-card {
    min-height: 140px !important;
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
  .goal-symbol {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
  .goal-card strong {
    font-size: 15px !important;
  }
  .goal-card small {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }

  /* 9. Education Streams */
  .stream-section {
    padding-bottom: 52px !important;
  }
  .stream-layout {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px !important;
    border: 1px solid var(--theme-line) !important;
    overflow: hidden !important;
  }
  .stream-list {
    display: flex !important;
    overflow-x: auto !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    background: #FFFFFF !important;
  }
  .stream-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important;
    border: 1px solid transparent !important;
  }
  .stream-item.active {
    border-color: var(--coral) !important;
  }
  .stream-item.active:after {
    display: none !important;
  }
  .stream-detail {
    padding: 24px 18px !important;
    min-height: auto !important;
  }
  .stream-detail h3 {
    font-size: 22px !important;
    margin: 8px 0 10px !important;
  }
  .stream-detail > p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .field-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .field-grid button {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  }

  /* 10. Top 20 Colleges - Full Width Single Column Cards */
  .colleges-section {
    padding-bottom: 60px !important;
  }
  .college-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .top-college-card {
    border-radius: 12px !important;
    border: 1px solid var(--theme-line) !important;
    background: var(--theme-surface) !important;
    overflow: hidden !important;
  }
  .college-thumb {
    height: 140px !important;
  }
  .college-rank {
    top: 12px !important;
    left: 12px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
  }
  .college-city {
    bottom: 12px !important;
    left: 14px !important;
    font-size: 12px !important;
  }
  .top-college-body {
    padding: 20px 18px !important;
  }
  .top-college-body h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
  }
  .top-college-body > small {
    font-size: 12.5px !important;
  }
  .college-rating {
    margin: 12px 0 10px !important;
    font-size: 13px !important;
  }
  .college-course {
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }
  .college-placement {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
  }
  .college-view {
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: var(--coral, #3A9B8F) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
  }
  .further-details-trigger {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
  }

  /* 11. Explore Domains */
  .domain-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .domain-card {
    min-height: 200px !important;
    padding: 22px 20px !important;
    border-radius: 12px !important;
  }
  .domain-card h3,
  .featured-domain h3 {
    font-size: 22px !important;
    margin: 16px 0 8px !important;
  }
  .domain-card p,
  .featured-domain p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
  }
  .domain-bottom {
    padding-top: 14px !important;
    font-size: 13px !important;
  }
  .domain-bottom button {
    font-size: 13px !important;
  }

  /* 12. "A MAP, NOT A MAZE" Section */
  .feature-band {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 48px !important;
    padding: 40px 18px !important;
    border-radius: 12px !important;
  }
  .feature-band-left h2 {
    font-size: 25px !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important;
  }
  .feature-band-left p:not(.eyebrow) {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    margin: 0 0 18px !important;
  }
  .feature-band-left .outline-button {
    min-height: 46px !important;
    padding: 12px 20px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .feature-band-ad {
    width: 100% !important;
  }
  .feature-ad-banner {
    padding: 22px 20px !important;
    border-radius: 12px !important;
    gap: 12px !important;
  }
  .feature-ad-banner h3 {
    font-size: 18px !important;
  }
  .feature-ad-banner p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .feature-ad-btn {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

  /* 13. Portal Panels (Exams, Colleges, Placements) */
  .portal-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .portal-panel {
    min-height: auto !important;
    padding: 22px 20px !important;
    border-radius: 12px !important;
  }
  .exam-panel h3 {
    font-size: 22px !important;
    margin: 20px 0 16px !important;
  }
  .exam-row {
    padding: 14px 0 !important;
    gap: 12px !important;
  }
  .exam-row strong {
    font-size: 14px !important;
  }
  .exam-row small {
    font-size: 12px !important;
  }
  .college-info h3 {
    font-size: 18px !important;
  }
  .college-info small {
    font-size: 12px !important;
  }
  .outcome-number {
    margin: 24px 0 16px !important;
  }
  .outcome-number strong {
    font-size: 48px !important;
  }
  .outcome-bars {
    height: 80px !important;
  }

  /* 14. Resources & Guidance */
  .resource-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .resource-grid article {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .resource-grid strong {
    font-size: 14px !important;
  }
  .resource-grid small {
    font-size: 12px !important;
  }
  .guidance-section {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .guidance-review, .rankings-panel, .mentor-panel {
    min-height: auto !important;
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }
  .guidance-review blockquote {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 20px 0 16px !important;
  }

  /* 15. Magazine / Spotlight / Ad Rail */
  .split-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding-bottom: 52px !important;
  }
  .magazine-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mag-card {
    border-radius: 10px !important;
  }
  .mag-image {
    height: 160px !important;
  }
  .mag-copy {
    padding: 18px 16px !important;
  }
  .mag-copy h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
  .ad-rail {
    border: 0 !important;
    padding: 0 !important;
  }
  .ad-art {
    min-height: 200px !important;
    padding: 22px 18px !important;
    border-radius: 10px !important;
  }

  /* 16. Newsletter Form */
  .newsletter-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 48px 18px !important;
    border-radius: 12px !important;
  }
  .newsletter-copy h2 {
    font-size: 26px !important;
    margin: 0 0 10px !important;
  }
  .newsletter-copy > p:not(.eyebrow) {
    font-size: 14px !important;
  }
  .newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .newsletter-form label {
    height: 48px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
  }
  .newsletter-form input,
  .newsletter-form select {
    font-size: 14px !important;
  }
  .newsletter-form .primary-button {
    width: 100% !important;
    height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 17. Footer */
  footer {
    padding: 48px 18px 24px !important;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 18px !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
  }
  .footer-inner > div:not(.footer-brand) strong {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  .footer-inner > div:not(.footer-brand) a {
    font-size: 13px !important;
    line-height: 2 !important;
  }
  .footer-socials a {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    margin-top: 32px !important;
    padding-top: 18px !important;
    font-size: 11.5px !important;
  }

  /* 18. Modals & Dialogs */
  .further-details-modal {
    padding: 16px !important;
  }
  .further-details-dialog {
    width: calc(100% - 32px) !important;
    max-height: 88vh !important;
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }
  .further-details-header h2 {
    font-size: 22px !important;
  }
  .further-details-form {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .further-details-form label {
    font-size: 12px !important;
  }
  .further-details-form input,
  .further-details-form select {
    height: 46px !important;
    font-size: 14px !important;
  }
  .further-details-form textarea {
    font-size: 14px !important;
  }
  .further-details-actions {
    display: flex !important;
    gap: 10px !important;
  }
  .further-details-actions button {
    flex: 1 !important;
    min-height: 46px !important;
    font-size: 14px !important;
  }

  /* 19. Search & Detail Views */
  .inner-page {
    padding: 0 18px !important;
  }
  .page-top {
    display: block !important;
    padding: 36px 0 20px !important;
  }
  .page-top h1 {
    font-size: 30px !important;
  }
  .result-search {
    width: 100% !important;
    margin-top: 16px !important;
  }
  .result-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-bottom: 60px !important;
  }
  .filter-panel {
    display: none !important;
  }
  .result-card {
    padding: 18px !important;
    min-height: auto !important;
    border-radius: 10px !important;
  }
  .result-action {
    position: static !important;
    margin-top: 14px !important;
    display: inline-block !important;
    font-size: 13px !important;
  }
  .detail-heading {
    display: block !important;
    padding-bottom: 30px !important;
  }
  .detail-heading h1 {
    font-size: 34px !important;
  }
  .detail-content {
    display: block !important;
    padding-top: 36px !important;
    padding-bottom: 60px !important;
  }
  .overview-grid {
    grid-template-columns: 1fr !important;
  }
  .overview-grid div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--theme-line) !important;
  }
  .detail-aside {
    display: none !important;
  }
}

/* Specific narrow devices <= 375px */
@media (max-width: 375px) {
  .hero-copy h1 { font-size: 28px !important; }
  .goal-grid { grid-template-columns: 1fr !important; }
  .field-grid { grid-template-columns: 1fr !important; }
  .footer-inner { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   HERO BACKGROUND ROTATING VISUAL CAROUSEL
   ========================================================================== */

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-bg-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0;
  transform: none;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
  filter: brightness(1.10) contrast(1.04);
}

.hero-bg-slide.active {
  opacity: 1;
  transform: none;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 22, 26, 0.90) 0%, rgba(18, 22, 26, 0.68) 45%, rgba(18, 22, 26, 0.28) 75%, rgba(18, 22, 26, 0.58) 100%),
              linear-gradient(180deg, rgba(18, 22, 26, 0.35) 0%, transparent 40%, rgba(18, 22, 26, 0.65) 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 3;
}

.hero-copy h1 {
  text-shadow: none !important;
}

.hero-text {
  text-shadow: none !important;
}

.hero-carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 5.2%;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

.hero-indicator {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-indicator:hover {
  background: rgba(255, 255, 255, 0.7);
}

.hero-indicator.active {
  background: var(--coral);
  width: 40px;
  box-shadow: 0 0 10px rgba(58, 155, 143, 0.7);
}

/* ==========================================================================
   PERSONALIZED CAREER DOMAIN & GROWTH PATHWAYS
   ========================================================================== */

.career-priority-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 22px;
  scrollbar-width: thin;
}

.career-priority-bar::-webkit-scrollbar {
  height: 4px;
}

.career-priority-bar::-webkit-scrollbar-thumb {
  background: var(--theme-line);
  border-radius: 4px;
}

.career-priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  color: var(--theme-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.career-priority-pill:hover {
  border-color: var(--coral);
  color: #1E293B;
  transform: translateY(-1px);
}

.career-priority-pill.active {
  background: rgba(58, 155, 143, 0.16);
  border-color: var(--coral);
  color: #77AC3B;
  box-shadow: 0 4px 14px rgba(58, 155, 143, 0.2);
}

.career-pathway-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.career-goal-hero-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.career-goal-meta h3 {
  margin: 4px 0 6px;
  font-size: 24px;
  color: #1E293B;
  font-family: 'Manrope', sans-serif;
}

.career-goal-meta p {
  margin: 0;
  font-size: 14px;
  color: var(--theme-muted);
  max-width: 680px;
}

.career-metrics-badge-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.career-metric-chip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
}

.career-metric-chip small {
  display: block;
  font-size: 10px;
  color: var(--theme-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.career-metric-chip strong {
  font-size: 15px;
  color: var(--teal);
}

.career-subfields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.career-subfield-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.career-subfield-card:hover {
  border-color: rgba(58, 155, 143, 0.4);
  transform: translateY(-2px);
}

.career-subfield-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 10px;
}

.career-subfield-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
}

.career-subfield-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--coral);
}

.career-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.career-card-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--theme-page);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--theme-line);
  font-size: 12.5px;
}

.career-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.career-tag-pill {
  padding: 4px 10px;
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  font-size: 11.5px;
  color: #d8e5ec;
}

.career-review-box {
  background: var(--theme-page);
  border-left: 3px solid var(--coral);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.45;
  color: #5F6368;
}

/* ==========================================================================
   INTERNSHIPS & PRACTICAL EXPERIENCE HUB
   ========================================================================== */

.internship-hub-section {
  padding-top: 48px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.internship-toolbar {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.internship-suggest-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.internship-suggest-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #77AC3B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.internship-filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.internship-pill-btn {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.internship-pill-btn:hover {
  color: #1E293B;
  border-color: var(--teal);
}

.internship-pill-btn.active {
  background: rgba(58, 155, 143, 0.18);
  border-color: var(--teal);
  color: #6CA034;
  font-weight: 700;
}

.others-pill-btn {
  background: rgba(58, 155, 143, 0.12) !important;
  border-color: rgba(58, 155, 143, 0.4) !important;
  color: #77AC3B !important;
  font-weight: 700 !important;
}

.others-pill-btn:hover {
  background: var(--coral) !important;
  color: #1E293B !important;
  border-color: var(--coral) !important;
}

.internship-selects-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-select-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-select-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.internship-select {
  height: 34px;
  padding: 0 10px;
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  color: var(--theme-text);
  font-size: 12px;
  outline: none;
}

.internship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.internship-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.internship-card:hover {
  border-color: rgba(58, 155, 143, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.internship-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.internship-company-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.internship-company-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--teal);
}

.internship-role-title {
  margin: 0 0 2px;
  font-size: 16px;
  color: #1E293B;
  font-weight: 700;
}

.internship-company-name {
  font-size: 12px;
  color: var(--theme-muted);
}

.internship-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
}

.stipend-tag {
  background: rgba(58, 155, 143, 0.15);
  color: #77AC3B;
  border: 1px solid rgba(58, 155, 143, 0.35);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.workmode-tag {
  background: rgba(58, 155, 143, 0.15);
  color: #6CA034;
  border: 1px solid rgba(58, 155, 143, 0.35);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.duration-tag {
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  color: var(--theme-muted);
  padding: 3px 8px;
  border-radius: 4px;
}

.internship-details-list {
  font-size: 12px;
  color: #5F6368;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.deadline-chip {
  font-size: 11px;
  color: var(--theme-muted);
}

.deadline-chip strong {
  color: var(--coral);
}

.internship-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.internship-details-btn {
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  color: var(--theme-text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.internship-details-btn:hover {
  border-color: var(--teal);
  color: #6CA034;
}

.internship-portal-btn {
  background: var(--coral);
  color: #1E293B;
  border: 1px solid var(--coral);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.internship-portal-btn:hover {
  background: #77AC3B;
  border-color: #77AC3B;
  color: #1E293B;
}

.internship-no-link {
  font-size: 11px;
  color: var(--theme-muted);
  font-style: italic;
  padding: 4px 6px;
}

.internship-detail-dialog {
  max-width: 640px;
}

/* ==========================================================================
   INTERNSHIP DOMAINS "OTHERS" SELECTION MODAL
   ========================================================================== */

.internship-domains-dialog {
  max-width: 720px;
  width: 100%;
}

.domain-modal-search-wrap {
  position: relative;
  margin-top: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}

.domain-search-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: var(--theme-muted);
  pointer-events: none;
}

.domain-search-input {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 38px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  color: #1E293B;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.domain-search-input:focus {
  border-color: var(--green-accent, #77AC3B);
  box-shadow: 0 0 0 3px rgba(119, 172, 59, 0.15);
}

.domain-search-clear {
  position: absolute;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--theme-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}

.domain-search-clear:hover {
  color: #1E293B;
}

.domain-modal-body {
  overflow-y: auto;
  max-height: 52vh;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}

.domain-modal-body::-webkit-scrollbar {
  width: 6px;
}

.domain-modal-body::-webkit-scrollbar-thumb {
  background: var(--theme-line);
  border-radius: 4px;
}

.domain-modal-group {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 12px 16px;
}

.domain-group-title {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--theme-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.domain-modal-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.domain-item-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-text, #1E293B);
  cursor: pointer;
  transition: all 0.15s ease;
}

.domain-item-pill:hover {
  background: rgba(119, 172, 59, 0.12);
  border-color: var(--green-accent, #77AC3B);
  color: var(--theme-text, #1E293B);
  transform: translateY(-1px);
}

.domain-item-pill.active {
  background: var(--green-accent, #77AC3B) !important;
  border-color: var(--green-accent, #77AC3B) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(119, 172, 59, 0.25);
}

.domain-empty-search {
  text-align: center;
  padding: 28px 16px;
  color: var(--theme-muted);
  font-size: 13px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid var(--theme-line);
}

/* ==========================================================================
   DISCOVERY PAGES BACKGROUND IMAGE SLIDER (COURSES, COLLEGES, DOMAINS)
   ========================================================================== */

#coursesView,
#collegesView,
#domainsView,
#examsView,
#materialsView,
#reviewsView,
#rankingsView,
#careersView,
#placementsView,
#jobsView,
#internshipsView,
#admissionsView,
#scholarshipsView,
#facilitiesView,
#entrancePrepView,
#reviewsCompareView {
  position: relative;
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

#coursesView > .inner-page,
#collegesView > .inner-page,
#domainsView > .inner-page,
#examsView > .inner-page,
#materialsView > .inner-page,
#reviewsView > .inner-page,
#rankingsView > .inner-page,
#careersView > .inner-page,
#placementsView > .inner-page,
#jobsView > .inner-page,
#internshipsView > .inner-page,
#admissionsView > .inner-page,
#scholarshipsView > .inner-page,
#facilitiesView > .inner-page,
#entrancePrepView > .inner-page,
#reviewsCompareView > .inner-page {
  position: relative;
  z-index: 2;
  height: auto;
  overflow: visible;
}

.view-bg-slider {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.view-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06) translate3d(0, 0, 0);
  transition: opacity 1.5s ease-in-out, transform 8s ease-out;
  will-change: opacity, transform;
  filter: brightness(1.12) contrast(1.05);
}

.view-bg-slide.active {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

.view-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 26, 0.74) 0%, rgba(18, 22, 26, 0.78) 50%, rgba(10, 17, 23, 0.83) 100%);
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .view-bg-slide {
    transition: opacity 0.5s ease;
    transform: none !important;
  }
}

/* ==========================================================================
   ENTRANCE EXAMS & PREP DEDICATED 50% DIMMED BACKGROUND SLIDESHOW
   ========================================================================== */
#entrancePrepView {
  position: relative;
}

#entrancePrepView .entrance-prep-bg-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#entrancePrepView .entrance-prep-bg-slider .view-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.5s ease-in-out, transform 6s ease-out;
  will-change: opacity, transform;
  filter: brightness(0.88) contrast(1.04);
}

#entrancePrepView .entrance-prep-bg-slider .view-bg-slide.active {
  opacity: 0.52;
  transform: scale(1);
}

#entrancePrepView .entrance-prep-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42) 0%, rgba(15, 23, 42, 0.38) 50%, rgba(15, 23, 42, 0.48) 100%);
  z-index: 1;
  pointer-events: none;
}

#entrancePrepView .inner-page {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   COURSES DISCOVERY SYSTEM: 7 EXPANDABLE CATEGORIES & NESTED HIERARCHIES
   ========================================================================== */

.courses-top-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 12px 0;
  width: 100%;
}

.courses-back-home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0F172A !important;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 8px;
  background: #FFFFFF !important;
  border: 1.5px solid #64748B !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.courses-back-home-link:hover {
  background: #F8FAFC !important;
  border-color: #15803D !important;
  color: #15803D !important;
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
}

.courses-back-home-link .back-arrow {
  font-size: 16px;
  font-weight: 900;
  color: #15803D !important;
  line-height: 1;
}

.breadcrumbs a,
.breadcrumbs a[data-view="home"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0F172A !important;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 6px;
  background: #FFFFFF !important;
  border: 1.5px solid #64748B !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.09);
  transition: all 0.2s ease;
}

.breadcrumbs a:hover,
.breadcrumbs a[data-view="home"]:hover {
  background: #F8FAFC !important;
  border-color: #15803D !important;
  color: #15803D !important;
}

.roadmap-action-btn,
#detailView .save-button {
  background: #15803D !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 12px 30px !important;
  border-radius: 8px !important;
  border: 1.5px solid #14532D !important;
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.roadmap-action-btn:hover,
#detailView .save-button:hover {
  background: #166534 !important;
  border-color: #052E16 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(21, 128, 61, 0.5) !important;
}

.courses-top-eyebrow {
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 800;
  color: var(--teal);
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

.courses-top-spacer {
  width: 80px;
  visibility: hidden;
}

#coursesView .courses-intro-block,
#collegesView .courses-intro-block,
#domainsView .courses-intro-block,
#examsView .courses-intro-block,
#materialsView .courses-intro-block,
#reviewsView .courses-intro-block,
#rankingsView .courses-intro-block,
#careersView .courses-intro-block,
#placementsView .courses-intro-block,
#jobsView .courses-intro-block,
#internshipsView .courses-intro-block,
#admissionsView .courses-intro-block,
#scholarshipsView .courses-intro-block,
#facilitiesView .courses-intro-block,
#entrancePrepView .courses-intro-block,
#reviewsCompareView .courses-intro-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-bottom: 16px;
  width: 100%;
}

.heading-flank-visual-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto 6px;
  position: relative;
  z-index: 2;
}

.heading-side-visual {
  flex: 0 1 360px;
  width: 360px;
  height: 180px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(18, 22, 26, 0.85);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 24px rgba(58, 155, 143, 0.1);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.heading-side-visual.left {
  margin-right: auto;
}

.heading-side-visual.right {
  margin-left: auto;
}

.heading-side-visual:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(58, 155, 143, 0.6);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.65), 0 0 32px rgba(58, 155, 143, 0.3);
}

.heading-side-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.94) contrast(1.08);
  transition: filter 0.3s ease, transform 0.4s ease;
}

.heading-side-visual:hover img {
  filter: brightness(1.06) contrast(1.1);
  transform: scale(1.04);
}

@media (max-width: 1366px) {
  .heading-flank-visual-row {
    gap: 20px;
    max-width: 1200px;
  }
  .heading-side-visual {
    flex: 0 1 300px;
    width: 300px;
    height: 160px;
    border-radius: 16px;
  }
}

@media (max-width: 1100px) {
  .heading-flank-visual-row {
    gap: 16px;
  }
  .heading-side-visual {
    flex: 0 1 230px;
    width: 230px;
    height: 135px;
    border-radius: 14px;
  }
}

@media (max-width: 860px) {
  .heading-flank-visual-row {
    gap: 12px;
  }
  .heading-side-visual {
    flex: 0 1 170px;
    width: 170px;
    height: 105px;
    border-radius: 12px;
  }
}

@media (max-width: 720px) {
  .heading-side-visual {
    display: none !important;
  }
}

#coursesView .courses-heading-wrap,
#collegesView .courses-heading-wrap,
#domainsView .courses-heading-wrap,
#examsView .courses-heading-wrap,
#materialsView .courses-heading-wrap,
#reviewsView .courses-heading-wrap,
#rankingsView .courses-heading-wrap,
#careersView .courses-heading-wrap,
#placementsView .courses-heading-wrap,
#jobsView .courses-heading-wrap,
#internshipsView .courses-heading-wrap,
#admissionsView .courses-heading-wrap,
#scholarshipsView .courses-heading-wrap,
#facilitiesView .courses-heading-wrap,
#entrancePrepView .courses-heading-wrap,
#reviewsCompareView .courses-heading-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.5px;
  border-radius: 999px;
  margin: 4px auto 0;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

#coursesView .courses-heading-wrap::before,
#collegesView .courses-heading-wrap::before,
#domainsView .courses-heading-wrap::before,
#examsView .courses-heading-wrap::before,
#materialsView .courses-heading-wrap::before,
#reviewsView .courses-heading-wrap::before,
#rankingsView .courses-heading-wrap::before,
#careersView .courses-heading-wrap::before,
#placementsView .courses-heading-wrap::before,
#jobsView .courses-heading-wrap::before,
#internshipsView .courses-heading-wrap::before,
#admissionsView .courses-heading-wrap::before,
#scholarshipsView .courses-heading-wrap::before,
#facilitiesView .courses-heading-wrap::before,
#entrancePrepView .courses-heading-wrap::before,
#reviewsCompareView .courses-heading-wrap::before {
  content: '';
  position: absolute;
  top: -80%;
  left: -80%;
  width: 260%;
  height: 260%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--coral) 60deg,
    #77AC3B 130deg,
    transparent 180deg,
    var(--coral) 250deg,
    #77AC3B 320deg,
    transparent 360deg
  );
  animation: goalMarqueeGlow 5s linear infinite;
  z-index: 1;
  opacity: 0.65;
}

#coursesView .courses-heading-wrap h1,
#collegesView .courses-heading-wrap h1,
#domainsView .courses-heading-wrap h1,
#examsView .courses-heading-wrap h1,
#materialsView .courses-heading-wrap h1,
#reviewsView .courses-heading-wrap h1,
#rankingsView .courses-heading-wrap h1,
#careersView .courses-heading-wrap h1,
#placementsView .courses-heading-wrap h1,
#jobsView .courses-heading-wrap h1,
#internshipsView .courses-heading-wrap h1,
#admissionsView .courses-heading-wrap h1,
#scholarshipsView .courses-heading-wrap h1,
#facilitiesView .courses-heading-wrap h1,
#entrancePrepView .courses-heading-wrap h1,
#reviewsCompareView .courses-heading-wrap h1 {
  position: relative;
  z-index: 2;
  background: #F9FAFB;
  border-radius: 999px;
  padding: 8px 28px;
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: -0.02em;
  border: 1px solid var(--theme-line);
  box-shadow: 0 0 16px rgba(58, 155, 143, 0.22);
}

#coursesView .section-subtitle,
#collegesView .section-subtitle,
#domainsView .section-subtitle,
#examsView .section-subtitle,
#materialsView .section-subtitle,
#reviewsView .section-subtitle,
#rankingsView .section-subtitle,
#careersView .section-subtitle,
#placementsView .section-subtitle,
#jobsView .section-subtitle,
#internshipsView .section-subtitle,
#admissionsView .section-subtitle,
#scholarshipsView .section-subtitle,
#facilitiesView .section-subtitle,
#entrancePrepView .section-subtitle,
#reviewsCompareView .section-subtitle {
  text-align: center;
  max-width: 760px;
  margin: 12px auto 0;
  line-height: 1.65;
  color: var(--theme-muted);
  font-size: 13.5px;
}

.courses-discovery-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 70px;
}

/* Search and Quick Filters Bar (Centered & Medium-Width with Subtle Glow) */
.courses-search-section {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 6px;
}

.courses-search-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 680px;
  border-radius: 10px;
  padding: 1.5px;
  background: transparent;
  transition: box-shadow 0.3s ease;
  overflow: hidden;
}

/* Subtle glowing border roaming marquee effect matching Select Goal */
.courses-search-bar-wrap::before {
  content: '';
  position: absolute;
  top: -80%;
  left: -80%;
  width: 260%;
  height: 260%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--coral) 60deg,
    #77AC3B 130deg,
    transparent 180deg,
    var(--coral) 250deg,
    #77AC3B 320deg,
    transparent 360deg
  );
  animation: goalMarqueeGlow 4.5s linear infinite;
  z-index: 1;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.courses-search-bar-wrap:hover::before,
.courses-search-bar-wrap:focus-within::before {
  opacity: 0.95;
  animation-duration: 3s;
}

.courses-search-bar-wrap:hover,
.courses-search-bar-wrap:focus-within {
  box-shadow: 0 0 18px rgba(58, 155, 143, 0.32), 0 0 8px rgba(58, 155, 143, 0.2);
}

.courses-search-input-field {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 48px;
  padding: 0 42px 0 44px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 8.5px;
  color: #1E293B;
  font-size: 13.5px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.courses-search-input-field:focus {
  border-color: var(--coral);
  background: #F9FAFB;
}

.courses-search-lead-icon {
  position: absolute;
  left: 15px;
  font-size: 16px;
  color: var(--theme-muted);
  pointer-events: none;
  z-index: 3;
}

.courses-search-clear-btn {
  position: absolute;
  right: 14px;
  background: transparent;
  border: 0;
  color: var(--theme-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  display: none;
  z-index: 3;
}

.courses-search-clear-btn:hover {
  color: #1E293B;
}

.courses-quick-chips-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  width: 100%;
  max-width: 780px;
  flex-wrap: wrap;
}

.courses-quick-chips-row::-webkit-scrollbar {
  display: none;
}

.courses-quick-chips-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-muted);
  white-space: nowrap;
}

.courses-filter-chip {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  color: #374151;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.courses-filter-chip:hover {
  background: rgba(58, 155, 143, 0.15);
  border-color: var(--coral);
  color: #1E293B;
  transform: translateY(-1px);
}

.courses-filter-chip.active {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #1E293B !important;
  font-weight: 700;
}

.courses-meta-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.courses-meta-summary-text,
.courses-meta-summary-highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.32);
  border-radius: 20px;
  color: rgba(58, 155, 143, 0.1);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.courses-meta-summary-highlight b,
.courses-meta-summary-text b {
  color: #1E293B;
  font-weight: 800;
}

.stat-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral);
  display: inline-block;
  flex-shrink: 0;
}

.courses-expand-all-btn {
  background: transparent;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  color: var(--theme-muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.courses-expand-all-btn:hover {
  color: #1E293B;
  border-color: var(--coral);
}

/* ==========================================================================
   7 LARGE EXPANDABLE CATEGORY BLOCKS
   ========================================================================== */

.category-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.category-card-block {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.category-card-block:hover {
  border-color: rgba(58, 155, 143, 0.45);
}

.category-card-block.expanded {
  border-color: var(--coral);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

/* Category Card Header */
.category-header-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.category-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.category-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.category-card-block:hover .category-icon-box {
  border-color: var(--coral);
  transform: scale(1.05);
}

.category-header-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.category-header-title {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1E293B;
  margin: 0;
  line-height: 1.3;
}

.category-header-desc {
  font-size: 12.5px;
  color: var(--theme-muted);
  margin: 0;
  line-height: 1.45;
}

.category-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.25);
  border-radius: 6px;
  color: #77AC3B;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.category-arrow-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-muted);
  font-size: 12px;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.category-card-block.expanded .category-arrow-indicator {
  transform: rotate(180deg);
  background: var(--coral);
  border-color: var(--coral);
  color: #1E293B;
}

/* Category Content Body */
.category-body-container {
  display: none;
  padding: 0 26px 26px 26px;
  border-top: 1px solid var(--theme-line);
  background: rgba(18, 22, 26, 0.4);
}

.category-card-block.expanded .category-body-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Course Groups (Core Branches vs Emerging Specializations) */
.course-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.course-group-header-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
}

.course-group-header-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--theme-line);
}

/* Sub-fields Accordion Cards */
.subfields-accordion-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subfield-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 9px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.subfield-card:hover {
  border-color: rgba(58, 155, 143, 0.4);
}

.subfield-card.open {
  border-color: rgba(58, 155, 143, 0.6);
  background: #F9FAFB;
}

.subfield-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}

.subfield-title-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.subfield-icon {
  font-size: 16px;
}

.subfield-name {
  font-size: 14px;
  font-weight: 800;
  color: #1E293B;
}

.subfield-tagline {
  font-size: 11.5px;
  color: var(--theme-muted);
  font-weight: 500;
  display: block;
}

.subfield-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subfield-count-pill {
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  color: #5F6368;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.subfield-arrow {
  font-size: 10px;
  color: var(--theme-muted);
  transition: transform 0.2s ease;
}

.subfield-card.open .subfield-arrow {
  transform: rotate(90deg);
  color: #6CA034;
}

/* Degree Programs Container inside Subfield */
.subfield-programs-container {
  display: none;
  padding: 12px 16px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #F9FAFB;
  flex-direction: column;
  gap: 10px;
}

.subfield-card.open .subfield-programs-container {
  display: flex;
}

/* Individual Program Card */
.program-item-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.program-item-card:hover {
  border-color: rgba(58, 155, 143, 0.35);
}

.program-item-card.detail-open {
  border-color: var(--coral);
}

.program-header-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  gap: 12px;
  flex-wrap: wrap;
}

.program-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

.program-title-wrap:hover .program-title {
  color: var(--coral);
}

.subfield-direct-view-btn {
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.3);
  border-radius: 5px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  margin-right: 12px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.subfield-direct-view-btn:hover {
  background: var(--coral);
  color: #1E293B;
}

.program-title {
  font-size: 14px;
  font-weight: 800;
  color: #1E293B;
  transition: color 0.15s ease;
}

.program-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.program-badge {
  padding: 2px 7px;
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.25);
  border-radius: 4px;
  color: #77AC3B;
  font-size: 10.5px;
  font-weight: 700;
}

.program-badge.salary-badge {
  background: rgba(58, 155, 143, 0.12);
  border-color: rgba(58, 155, 143, 0.25);
  color: #ffcf99;
}

.program-toggle-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--theme-line);
  border-radius: 5px;
  color: var(--theme-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.program-item-card:hover .program-toggle-detail-btn {
  border-color: var(--coral);
  color: var(--coral);
}

.program-item-card.detail-open .program-toggle-detail-btn {
  background: var(--coral);
  border-color: var(--coral);
  color: #1E293B;
}

/* Expandable Program Detail View Panel */
.program-detail-panel {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--theme-line);
  background: #F9FAFB;
  flex-direction: column;
  gap: 14px;
}

.program-item-card.detail-open .program-detail-panel {
  display: flex;
}

.program-quick-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.program-metric-box {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.program-metric-box small {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--theme-muted);
}

.program-metric-box strong {
  font-size: 12px;
  color: #1E293B;
}

.program-info-block {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 12px;
  color: #d7e4ec;
  line-height: 1.5;
}

.program-info-block-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  margin-bottom: 4px;
}

.program-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.program-tag-item {
  padding: 2px 7px;
  background: rgba(58, 155, 143, 0.1);
  border: 1px solid rgba(58, 155, 143, 0.25);
  border-radius: 4px;
  color: #6CA034;
  font-size: 10.5px;
  font-weight: 600;
}

.program-tag-item.career-tag {
  background: rgba(58, 155, 143, 0.1);
  border-color: rgba(58, 155, 143, 0.25);
  color: #77AC3B;
}

.program-tag-item.exam-tag {
  background: rgba(58, 155, 143, 0.1);
  border-color: rgba(58, 155, 143, 0.25);
  color: #6CA034;
}

.program-tag-item.college-tag {
  background: rgba(58, 155, 143, 0.1);
  border-color: rgba(58, 155, 143, 0.25);
  color: #ffcf99;
}

.program-action-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.program-explore-colleges-btn {
  padding: 8px 14px;
  background: var(--coral);
  border: 0;
  border-radius: 6px;
  color: #1E293B;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.program-explore-colleges-btn:hover {
  background: #77AC3B;
}

/* Empty Search Results */
.courses-empty-results-box {
  text-align: center;
  padding: 40px 20px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.courses-empty-results-box h3 {
  font-size: 17px;
  color: #1E293B;
  margin: 0;
}

.courses-empty-results-box p {
  font-size: 13px;
  color: var(--theme-muted);
  margin: 0;
  max-width: 480px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #coursesView .page-top h1 {
    font-size: 26px;
  }
  #coursesView .page-top .section-subtitle {
    font-size: 13px;
    padding: 0 8px;
  }
  .courses-search-section {
    padding: 16px 14px;
  }
  .courses-search-bar-wrap {
    max-width: 100%;
  }
  .category-header-trigger {
    padding: 16px;
  }
  .category-icon-box {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  .category-header-title {
    font-size: 16px;
  }
  .category-body-container {
    padding: 0 16px 16px 16px;
  }
  .program-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .program-toggle-detail-btn {
    width: 100%;
    justify-content: center;
  }
}





/* ==========================================================================
   DEDICATED PATHWAY VIEWS & CATALOG STYLING
   ========================================================================== */

.page-container {
  padding: 10px 0 40px 0;
}

.pathway-filter-bar {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pathway-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  padding: 8px 14px;
  flex: 1;
  min-width: 260px;
}

.pathway-search-wrap input {
  background: transparent;
  border: none;
  color: var(--theme-text);
  font-size: 13px;
  width: 100%;
  outline: none;
}

.pathway-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pathway-filter-chip {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--theme-page);
  border: 1px solid var(--theme-line);
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pathway-filter-chip:hover {
  color: #1E293B;
  border-color: var(--coral);
}

.pathway-filter-chip.active {
  background: rgba(58, 155, 143, 0.16);
  border-color: var(--coral);
  color: #77AC3B;
  font-weight: 700;
}

.pathway-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.pathway-view-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pathway-view-card:hover {
  transform: translateY(-2px);
  border-color: rgba(58, 155, 143, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.pathway-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pathway-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--theme-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.pathway-card-title-group h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: #1E293B;
}

.pathway-card-title-group p {
  margin: 0;
  font-size: 12px;
  color: var(--theme-muted);
  line-height: 1.4;
}

.pathway-card-body {
  font-size: 13px;
  color: #5F6368;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pathway-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pathway-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--theme-line);
  color: var(--theme-muted);
}

.pathway-badge.coral {
  color: #77AC3B;
  border-color: rgba(58, 155, 143, 0.3);
  background: rgba(58, 155, 143, 0.1);
}

.pathway-badge.teal {
  color: #6CA034;
  border-color: rgba(58, 155, 143, 0.3);
  background: rgba(58, 155, 143, 0.1);
}

.pathway-badge.amber {
  color: #ffd166;
  border-color: rgba(245, 166, 35, 0.3);
  background: rgba(245, 166, 35, 0.1);
}

.pathway-card-footer {
  border-top: 1px solid var(--theme-line);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pathway-card-btn {
  padding: 7px 14px;
  border-radius: 6px;
  background: rgba(58, 155, 143, 0.14);
  border: 1px solid rgba(58, 155, 143, 0.4);
  color: #77AC3B;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pathway-card-btn:hover {
  background: var(--coral);
  color: #1E293B;
  border-color: var(--coral);
}

/* User Profile Avatar in Header (Logged In State) */
.user-profile-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), #e05638);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #1E293B;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
  outline: none;
}

.user-profile-avatar-btn:hover {
  transform: scale(1.06);
  border-color: #1E293B;
  box-shadow: 0 4px 14px rgba(58, 155, 143, 0.4);
}

.user-avatar-initials {
  letter-spacing: 0.05em;
  line-height: 1;
}


/* ==========================================================================
   COLLEGES DISCOVERY ADVANCED FILTERS (STATE, DISTRICT, COURSE)
   ========================================================================== */

.colleges-discovery-filter-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  margin-bottom: 6px;
  position: relative;
  z-index: 10;
}

.colleges-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.colleges-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 2;
  min-width: 220px;
  border-radius: 8px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.colleges-search-input-wrap:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px rgba(58, 155, 143, 0.2);
}

.colleges-input-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: var(--theme-muted);
  pointer-events: none;
}

.colleges-filter-input {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 36px;
  background: transparent;
  border: 0;
  color: #1E293B;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}

.colleges-filter-clear-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: 0;
  color: var(--theme-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}

.colleges-filter-clear-btn:hover {
  color: #1E293B;
}

/* Custom Dropdown Filters */
.colleges-custom-dropdown-wrap {
  position: relative;
  flex: 1.2;
  min-width: 160px;
}

.colleges-dropdown-trigger {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  color: #1E293B;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.colleges-dropdown-trigger:hover:not(:disabled) {
  border-color: var(--coral);
  box-shadow: 0 0 12px rgba(58, 155, 143, 0.2);
}

.colleges-dropdown-trigger.active {
  border-color: var(--coral);
  background: #FFFFFF;
}

.colleges-dropdown-trigger.disabled,
.colleges-dropdown-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #F9FAFB;
}

.dropdown-trigger-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--coral);
  margin-right: 4px;
}

.dropdown-trigger-val {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(58, 155, 143, 0.08);
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-arrow {
  font-size: 9px;
  color: var(--theme-muted);
  transition: transform 0.2s ease;
  margin-left: 6px;
}

.colleges-custom-dropdown-wrap.open .dropdown-arrow {
  transform: rotate(180deg);
  color: var(--coral);
}

/* Floating Dropdown Panel */
.colleges-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 240px;
  max-width: calc(100vw - 32px);
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  padding: 8px;
  z-index: 100;
}

.colleges-custom-dropdown-wrap.open .colleges-dropdown-panel {
  display: flex;
}

.dropdown-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  margin-bottom: 6px;
}

.dropdown-search-box span {
  font-size: 12px;
  color: var(--theme-muted);
}

.dropdown-search-box input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: #1E293B;
  font-size: 12px;
  font-weight: 500;
}

.dropdown-items-scroll {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--theme-line) transparent;
}

.dropdown-items-scroll::-webkit-scrollbar {
  width: 4px;
}

.dropdown-items-scroll::-webkit-scrollbar-thumb {
  background: var(--theme-line);
  border-radius: 2px;
}

.dropdown-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #5F6368;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.dropdown-item-btn:hover {
  background: rgba(58, 155, 143, 0.15);
  color: var(--coral);
}

.dropdown-item-btn.selected {
  background: var(--coral);
  color: #1E293B;
  font-weight: 700;
}

.dropdown-item-count {
  font-size: 10.5px;
  color: var(--theme-muted);
  font-weight: 500;
}

.dropdown-item-btn.selected .dropdown-item-count {
  color: #1E293B;
}

/* Reset Button */
.colleges-reset-filters-btn {
  height: 42px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.colleges-reset-filters-btn:hover {
  color: #1E293B;
  border-color: var(--coral);
  background: rgba(58, 155, 143, 0.12);
}

/* Active Tags */
.colleges-active-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.colleges-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(58, 155, 143, 0.15);
  border: 1px solid var(--coral);
  border-radius: 14px;
  color: #1E293B;
  font-size: 11.5px;
  font-weight: 600;
}

.colleges-filter-badge button {
  background: transparent;
  border: 0;
  color: #ffcfcf;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.colleges-filter-badge button:hover {
  color: #1E293B;
}


/* ==========================================================================
   DOMAIN DISCOVERY & CAREER PATHWAYS SYSTEM
   ========================================================================== */

.domains-discovery-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.domains-category-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.domain-category-block {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.domain-category-block:hover {
  border-color: rgba(58, 155, 143, 0.4);
}

.domain-category-block.expanded {
  border-color: var(--coral);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.domain-category-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: background 0.15s ease;
}

.domain-category-trigger:hover {
  background: rgba(255, 255, 255, 0.02);
}

.domain-category-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.domain-category-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.domain-category-info h3 {
  font-size: 16px;
  font-weight: 800;
  color: #1E293B;
  margin: 0 0 4px;
  font-family: 'Manrope', sans-serif;
}

.domain-category-info p {
  font-size: 12.5px;
  color: var(--theme-muted);
  margin: 0;
  line-height: 1.4;
}

.domain-category-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.domain-subfields-container {
  display: none;
  padding: 16px 20px 20px;
  background: rgba(18, 22, 26, 0.6);
  border-top: 1px solid var(--theme-line);
}

.domain-category-block.expanded .domain-subfields-container {
  display: block;
}

.domain-subfields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.domain-card-item {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.domain-card-item:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  background: #F9FAFB;
}

.domain-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.domain-card-icon {
  font-size: 20px;
}

.domain-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 3px;
}

.domain-card-tagline {
  font-size: 11.5px;
  color: var(--theme-muted);
  line-height: 1.35;
}

.domain-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.domain-salary-pill {
  font-size: 11px;
  color: var(--teal);
  font-weight: 700;
}

.domain-view-link {
  font-size: 11.5px;
  color: var(--coral);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Survey & Analytics Cards */
.domain-survey-section {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.survey-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--theme-line);
}

.survey-section-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #1E293B;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.survey-section-header p {
  font-size: 12.5px;
  color: var(--theme-muted);
  margin: 0;
}

.survey-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(58, 155, 143, 0.15);
  border: 1px solid rgba(58, 155, 143, 0.35);
  color: #6CA034;
}

.survey-tag.future {
  background: rgba(58, 155, 143, 0.15);
  border-color: rgba(58, 155, 143, 0.35);
  color: #77AC3B;
}

/* 10-Year Historical Trends Visualization */
.trends-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.trend-metric-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trend-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trend-metric-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-growth-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: #77AC3B;
  background: rgba(58, 155, 143, 0.12);
  padding: 2px 8px;
  border-radius: 12px;
}

.trend-bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trend-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
}

.trend-bar-label {
  width: 65px;
  color: var(--theme-muted);
  font-weight: 600;
}

.trend-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.trend-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.trend-bar-fill.year-2016 {
  background: #77AC3B;
}

.trend-bar-fill.year-2026 {
  background: var(--coral);
}

.trend-bar-val {
  width: 36px;
  text-align: right;
  font-weight: 700;
  color: rgba(58, 155, 143, 0.08);
}

/* Next 5 Years Outlook Visualization */
.future-outlook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.future-outlook-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.future-outlook-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--coral);
}

.future-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.future-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #1E293B;
}

.future-demand-index {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--coral);
  background: rgba(58, 155, 143, 0.15);
  padding: 2px 8px;
  border-radius: 12px;
}

.future-progress-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}

.future-progress-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #77AC3B, var(--coral));
}

.future-card-desc {
  font-size: 12px;
  color: var(--theme-muted);
  line-height: 1.4;
  margin: 0;
}

/* Student & User Reviews Grid */
.domain-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.domain-review-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.domain-review-card:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
}

.review-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-domain-pill {
  font-size: 11px;
  font-weight: 800;
  color: var(--coral);
  background: rgba(58, 155, 143, 0.12);
  padding: 3px 10px;
  border-radius: 14px;
}

.review-stars {
  color: #77AC3B;
  font-size: 12px;
}

.review-quote-text {
  font-size: 12.5px;
  color: #1E293B;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

.review-suggestion-box {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--teal);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

.review-suggestion-box strong {
  font-size: 11px;
  color: var(--teal);
  display: block;
  margin-bottom: 2px;
}

.review-suggestion-box p {
  font-size: 11.5px;
  color: #374151;
  margin: 0;
  line-height: 1.35;
}

.review-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.review-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F1F5F9, #FFFFFF);
  border: 1px solid var(--theme-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #1E293B;
}

.review-user-meta h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.review-user-meta span {
  font-size: 11px;
  color: var(--theme-muted);
}

/* ==========================================================================
   DOMAIN DISCOVERY SPLIT LAYOUTS & SIDEBAR CHARTS & USER REMARKS PANEL
   ========================================================================== */

.survey-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.survey-cards-column {
  min-width: 0;
}

.survey-chart-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sidebar Chart Card Container */
.domain-sidebar-chart-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.sidebar-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-line);
}

.sidebar-chart-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-chart-title strong {
  font-size: 13.5px;
  color: #1E293B;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-chart-title small {
  font-size: 11px;
  color: var(--theme-muted);
}

.sidebar-chart-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 700;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
}

.legend-dot.blue { background: #77AC3B; }
.legend-dot.coral { background: var(--coral); }
.legend-dot.teal { background: #77AC3B; }

/* 10-Year Historical Comparative Bar Chart */
.hist-bar-chart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hist-chart-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hist-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}

.hist-item-name {
  color: #dbe8ef;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.hist-item-growth {
  font-size: 10px;
  font-weight: 800;
  color: #77AC3B;
  background: rgba(58, 155, 143, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
}

.hist-bars-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hist-bar-single {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
}

.hist-bar-year-tag {
  width: 32px;
  color: var(--theme-muted);
  font-size: 9.5px;
  font-weight: 700;
}

.hist-bar-track-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.hist-bar-fill-seg {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.hist-bar-fill-seg.b2016 { background: #77AC3B; }
.hist-bar-fill-seg.b2026 { background: var(--coral); }

.hist-bar-val-text {
  width: 28px;
  text-align: right;
  font-weight: 700;
  font-size: 10.5px;
}

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

.sidebar-chart-footer b {
  color: #77AC3B;
}

/* Next 5 Years Demand Radar Bar Chart */
.future-bar-chart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.future-chart-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.future-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}

.future-item-name {
  color: #dbe8ef;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.future-item-score {
  font-size: 11px;
  font-weight: 800;
  color: var(--coral);
}

.future-chart-track {
  height: 7px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.future-chart-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #77AC3B 0%, #77AC3B 50%, var(--coral) 100%);
}

.future-item-proj {
  font-size: 10px;
  color: var(--theme-muted);
  display: flex;
  justify-content: space-between;
}

/* User Remarks Panel with subtle education background */
.user-remarks-panel {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

.user-remarks-bg-img {
  display: none !important;
}

.user-remarks-content {
  position: relative;
  z-index: 1;
  padding: 22px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 16px !important;
  background: #FFFFFF !important;
}

.remarks-panel-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E8F0 !important;
}

.remarks-panel-head h3 {
  margin: 0;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.remarks-panel-head p {
  margin: 0;
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

.remarks-form-group {
  display: flex;
  flex-direction: column;
  gap: 12px !important;
}

.remarks-input,
.remarks-select,
.remarks-textarea {
  width: 100%;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.remarks-input::placeholder,
.remarks-textarea::placeholder {
  color: #64748B !important;
  font-weight: 400 !important;
}

.remarks-input:focus,
.remarks-select:focus,
.remarks-textarea:focus {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(119, 172, 59, 0.18) !important;
}

.remarks-textarea {
  resize: vertical;
  min-height: 80px !important;
  font-family: inherit;
  line-height: 1.45;
}

.remarks-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
}

.remarks-submit-btn {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.3) !important;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.remarks-submit-btn:hover {
  background: #659730 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(119, 172, 59, 0.45) !important;
}

.user-remarks-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
  border-top: 1px solid #E2E8F0 !important;
  padding-top: 14px;
}

.user-remarks-feed::-webkit-scrollbar {
  width: 5px;
}

.user-remarks-feed::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}

.user-remark-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-remark-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.user-remark-author {
  font-weight: 700 !important;
  color: #0F172A !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-remark-domain-tag {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #77AC3B !important;
  background: rgba(119, 172, 59, 0.12) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.user-remark-body {
  font-size: 12.5px !important;
  color: #334155 !important;
  line-height: 1.5 !important;
  margin: 0;
}

.user-remark-empty {
  text-align: center;
  padding: 16px 8px;
  font-size: 12.5px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .survey-split-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EXAMS DISCOVERY, LOCATION FILTERS, CARDS, NOTIFICATIONS & PREP ROADMAP
   ========================================================================== */

#examsView {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

.exams-discovery-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding-bottom: 70px;
  position: relative;
  z-index: 2;
}

.exams-filter-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.exams-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.exams-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 2;
  min-width: 240px;
  border-radius: 8px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.exams-search-wrap:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px rgba(58, 155, 143, 0.2);
}

.exams-input-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: var(--theme-muted);
  pointer-events: none;
}

.exams-search-input {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 36px;
  background: transparent;
  border: 0;
  color: #1E293B;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  font-family: inherit;
}

.exams-dropdown-select {
  height: 42px;
  padding: 0 14px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  color: rgba(58, 155, 143, 0.08);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  flex: 1.2;
  min-width: 170px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.exams-dropdown-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.exams-dropdown-select:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px rgba(58, 155, 143, 0.2);
}

.exams-filter-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--theme-muted);
}

.exams-count-pill {
  font-weight: 700;
  color: #1E293B;
}

.exams-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.exam-info-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.exam-info-card:hover {
  transform: translateY(-3px);
  border-color: #77AC3B !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

.exam-card-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exam-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.exam-level-pill {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(58, 155, 143, 0.15);
  color: #6CA034;
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.exam-stream-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-muted);
}

.exam-card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exam-location-pill {
  font-size: 12px;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.exam-details-block {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
  margin-top: 4px;
}

.exam-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.exam-detail-label {
  color: var(--theme-muted);
  font-weight: 700;
  min-width: 90px;
}

.exam-detail-val {
  color: #0F172A !important;
  font-weight: 600 !important;
}

.exam-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--theme-line);
}

.exam-btn-how-to-prep {
  flex: 1;
  min-width: 120px;
  background: rgba(58, 155, 143, 0.12);
  color: #77AC3B;
  border: 1px solid rgba(58, 155, 143, 0.35);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.exam-btn-how-to-prep:hover {
  background: #77AC3B;
  color: #F8FAFC;
}

.exam-btn-roadmap {
  flex: 1;
  min-width: 120px;
  background: var(--coral);
  color: #1E293B;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.exam-btn-roadmap:hover {
  background: #77AC3B;
  transform: translateY(-1px);
}

.exam-btn-platform {
  width: 100%;
  background: rgba(58, 155, 143, 0.12);
  color: #6CA034;
  border: 1px solid rgba(58, 155, 143, 0.3);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.exam-btn-platform:hover {
  background: #77AC3B;
  color: #1E293B;
}

/* Floating Right-Center Upcoming Exam Date Notification */
.exam-floating-notification {
  position: fixed;
  top: 50%;
  right: 24px;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 998;
  width: 330px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09) !important;
  animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@keyframes slideInRight {
  from {
    transform: translate(40px, -50%);
    opacity: 0;
  }
  to {
    transform: translate(0, -50%);
    opacity: 1;
  }
}

@media (max-width: 1200px) {
  .exam-floating-notification {
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: none;
  }
}

.exam-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.exam-notif-close-btn {
  background: transparent;
  border: 0;
  color: var(--theme-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.exam-notif-close-btn:hover {
  color: #1E293B;
}

.exam-notif-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #1E293B;
}

.exam-notif-body {
  font-size: 12px;
  color: #374151;
  line-height: 1.4;
  margin: 0;
}

.exam-notif-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--theme-line);
}

.exam-notif-act-btn {
  background: rgba(58, 155, 143, 0.15);
  border: 1px solid var(--coral);
  color: #1E293B;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Exam Rankings Table Card */
.exam-rankings-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--theme-line);
  background: #F9FAFB;
}

.exam-rankings-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12.5px;
}

.exam-rankings-table th {
  background: #FFFFFF;
  color: var(--theme-muted);
  padding: 12px 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--theme-line);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exam-rankings-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-line);
  color: #e5f0f7;
}

.exam-rankings-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Future Student Guidance Grid */
.exam-guidance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.exam-guidance-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exam-guidance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exam-guidance-tag {
  font-size: 10px;
  font-weight: 800;
  color: #77AC3B;
  background: rgba(58, 155, 143, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

.exam-guidance-card h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exam-guidance-card p {
  margin: 0;
  font-size: 12px;
  color: #374151;
  line-height: 1.45;
}

/* Exam Preparation Materials & Resources Grid */
.exam-materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.exam-material-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-material-card:hover {
  transform: translateY(-2px);
  border-color: rgba(58, 155, 143, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.exam-mat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.exam-mat-badge {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(58, 155, 143, 0.14);
  color: var(--teal);
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.exam-mat-cat {
  font-size: 11px;
  font-weight: 600;
  color: var(--theme-muted);
}

.exam-mat-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.35;
}

.exam-mat-desc {
  margin: 0;
  font-size: 12px;
  color: #5F6368;
  line-height: 1.45;
}

.exam-mat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.exam-mat-type {
  font-size: 11px;
  color: var(--theme-muted);
  font-weight: 600;
}

.exam-mat-btn {
  background: rgba(58, 155, 143, 0.15);
  color: #6CA034;
  border: 1px solid rgba(58, 155, 143, 0.35);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.exam-mat-btn:hover {
  background: #77AC3B;
  color: #1E293B;
}

/* ==========================================================================
   HERO MAIN HEADING ROTATOR / MARQUEE ANIMATION (HOME PAGE)
   ========================================================================== */
.hero-rotator-h1,
.hero-copy .hero-rotator-h1 {
  position: relative;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(32px, 3.15vw, 45px) !important;
  line-height: 1.15;
  letter-spacing: -.05em;
  margin: 0;
  color: #1E293B;
  display: block;
  min-height: 2.45em;
  overflow: hidden;
  text-shadow: none !important;
}

.hero-rotator-h1 em {
  font-style: normal;
  color: var(--coral);
}

.hero-h1-slide,
.hero-copy .hero-h1-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease, visibility 0.32s;
  pointer-events: none;
}

.hero-h1-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-h1-slide.prev {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-30px);
}

@media (max-width: 768px) {
  .hero-rotator-h1,
  .hero-copy .hero-rotator-h1 {
    font-size: clamp(24px, 6.2vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    min-height: 2.5em !important;
    margin: 0 0 12px !important;
  }
}

/* ==========================================================================
   WHOLE-PAGE BACKGROUND SLIDER (FROM BELOW HERO TO FOOTER ON HOME VIEW)
   ========================================================================== */
#homeView {
  position: relative;
}

.home-body-bg-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-body-bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0;
  transform: none;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
  filter: brightness(1.10) contrast(1.04);
}

.home-body-bg-slide.active {
  opacity: 1;
}

.home-body-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(18, 22, 26, 0.94) 0%, rgba(18, 22, 26, 0.82) 20%, rgba(18, 22, 26, 0.80) 50%, rgba(18, 22, 26, 0.86) 80%, rgba(18, 22, 26, 0.96) 100%);
  z-index: 1;
  pointer-events: none;
}

#homeView > section:not(.hero-section),
#homeView > div:not(.home-body-bg-slider) {
  position: relative;
  z-index: 2;
}

/* ============================================================================
   13. STUDY MATERIALS & EXAM PREPARATION PORTAL STYLES
   ============================================================================ */

#materialsView {
  display: none;
  position: relative;
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

#materialsView.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#materialsView > .inner-page {
  position: relative;
  z-index: 2;
  height: auto;
  min-height: 100%;
  overflow: visible;
  padding-bottom: 100px;
}

#materialsView .page-container,
#materialsPageContent {
  width: 100%;
  height: auto;
  min-height: auto;
  max-height: none;
  overflow: visible;
  display: block;
}

.study-materials-portal {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  height: auto;
  min-height: auto;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
}

.study-materials-portal section,
.study-materials-portal nav,
.study-materials-portal div.sm-materials-grid,
.study-materials-portal div.sm-analytics-grid,
.study-materials-portal div.sm-experience-grid,
.study-materials-portal div.sm-pop-list {
  height: auto;
  min-height: auto;
  max-height: none;
  overflow: visible;
}

/* Search & Discovery Toolbar */
.sm-discovery-toolbar {
  background: rgba(21, 34, 43, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.sm-search-box-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 10px 16px;
  transition: all 0.2s ease;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.sm-search-box-wrap:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.2);
}

.sm-search-box-wrap span {
  font-size: 18px;
  color: var(--theme-muted);
}

.sm-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #1E293B;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.sm-search-clear-btn {
  background: transparent;
  border: none;
  color: var(--theme-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}

.sm-search-clear-btn:hover {
  color: #1E293B;
}

/* Exam / Stream Selection Row */
.sm-filters-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sm-select {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  color: #1E293B;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 180px;
}

.sm-select:focus {
  border-color: var(--coral);
}

.sm-stream-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.sm-pill-btn {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 20px !important;
  color: #334155 !important;
  padding: 7px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.sm-pill-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: #F8FAFC !important;
  transform: translateY(-1px) !important;
}

.sm-pill-btn.active {
  background: #77AC3B !important;
  border-color: #77AC3B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.35) !important;
}

.sm-others-btn {
  background: rgba(119, 172, 59, 0.1) !important;
  border: 1.5px dashed #77AC3B !important;
  color: #5C8728 !important;
}

.sm-others-btn:hover,
.sm-others-btn.active {
  background: #77AC3B !important;
  border-color: #77AC3B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.sm-others-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 580px;
  margin: 8px auto 0;
  animation: fadeInDown 0.25s ease-out;
}

.sm-others-input {
  flex: 1;
  background: #FFFFFF;
  border: 1.5px solid #77AC3B;
  border-radius: 10px;
  color: #1E293B;
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Format Navigation Tabs Bar - Solid White & Crisp Visibility */
.sm-format-tabs-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 12px 0 20px !important;
}

.sm-format-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 999px !important;
  color: #1E293B !important;
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  opacity: 1 !important;
}

.sm-format-tab:hover {
  background: #F8FAFC !important;
  color: #77AC3B !important;
  border-color: #77AC3B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.22) !important;
}

.sm-format-tab.active {
  background: #FFFFFF !important;
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 2px #77AC3B, 0 4px 18px rgba(119, 172, 59, 0.28) !important;
  transform: translateY(-1px) !important;
}

/* Resource Cards Grid */
.sm-materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.sm-material-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sm-material-card:hover {
  transform: translateY(-3px);
  border-color: rgba(58, 155, 143, 0.4);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.sm-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sm-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(58, 155, 143, 0.12);
  border: 1px solid rgba(58, 155, 143, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sm-card-icon.video {
  background: rgba(58, 155, 143, 0.15);
  border-color: rgba(58, 155, 143, 0.3);
}

.sm-card-icon.website {
  background: rgba(58, 155, 143, 0.15);
  border-color: rgba(58, 155, 143, 0.3);
}

.sm-card-icon.practice {
  background: rgba(58, 155, 143, 0.15);
  border-color: rgba(58, 155, 143, 0.3);
}

.sm-card-title-group {
  flex: 1;
}

.sm-card-title-group h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 4px;
  line-height: 1.35;
}

.sm-card-exam-tag {
  font-size: 11.5px;
  color: var(--coral);
  font-weight: 600;
}

.sm-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--theme-muted);
  line-height: 1.45;
  flex: 1;
}

.sm-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.sm-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sm-badge.coral {
  background: rgba(58, 155, 143, 0.15);
  color: #6CA034;
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.sm-badge.teal {
  background: rgba(58, 155, 143, 0.15);
  color: #77AC3B;
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.sm-badge.blue {
  background: rgba(58, 155, 143, 0.15);
  color: #6CA034;
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.sm-badge.amber {
  background: rgba(58, 155, 143, 0.15);
  color: #77AC3B;
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.sm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
  margin-top: auto;
}

.sm-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #77AC3B;
  color: #FFFFFF !important;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(119, 172, 59, 0.25);
}

.sm-card-btn:hover {
  background: #5C8728;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(119, 172, 59, 0.35);
}

.sm-card-btn.secondary {
  background: #F1F5F9;
  border: 1.5px solid #CBD5E1;
  color: #1E293B !important;
}

.sm-card-btn.secondary:hover {
  background: #E2E8F0;
  border-color: #94A3B8;
  color: #0F172A !important;
}

.sm-card-btn.sm-official-btn,
.sm-official-btn {
  background: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
}

.sm-card-btn.sm-official-btn:hover,
.sm-official-btn:hover {
  background: #FFFFFF !important;
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(119, 172, 59, 0.15);
}

/* Analytics & Usage Insights Section */
.sm-analytics-section {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sm-analytics-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.sm-analytics-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 4px;
}

.sm-analytics-head p {
  font-size: 12.5px;
  color: var(--theme-muted);
  margin: 0;
}

.sm-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 860px) {
  .sm-analytics-grid {
    grid-template-columns: 1fr;
  }
}

.sm-chart-card {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sm-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sm-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
}

.sm-chart-sub {
  font-size: 11px;
  color: var(--theme-muted);
}

.sm-bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sm-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sm-bar-item-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #1E293B;
}

.sm-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.sm-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}

.sm-bar-fill.coral { background: var(--coral); }
.sm-bar-fill.teal { background: var(--teal); }
.sm-bar-fill.blue { background: #77AC3B; }
.sm-bar-fill.amber { background: #77AC3B; }
.sm-bar-fill.purple { background: #9d72d6; }

/* Line Chart Visualizer */
.sm-line-chart-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-top: 20px;
}

.sm-line-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 6px;
}

.sm-line-pillar-track {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.sm-line-bar {
  width: 35%;
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease;
}

.sm-line-bar.views { background: #77AC3B; }
.sm-line-bar.downloads { background: var(--coral); }

.sm-line-col-label {
  font-size: 11px;
  color: var(--theme-muted);
}

/* Learner Success / Experience Portal */
.sm-experiences-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sm-experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.sm-experience-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sm-experience-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sm-experience-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(58, 155, 143, 0.15);
  border: 1px solid var(--teal);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.sm-experience-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.sm-experience-info span {
  font-size: 11.5px;
  color: var(--teal);
  font-weight: 600;
}

.sm-experience-quote {
  font-style: italic;
  font-size: 12.5px;
  color: #374151;
  line-height: 1.45;
  margin: 0;
}

.sm-rec-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--theme-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}

/* Material Popularity Rankings */
.sm-popularity-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 22px;
}

.sm-pop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.sm-pop-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
}

.sm-pop-rank {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--coral);
  min-width: 24px;
}

.sm-pop-details {
  flex: 1;
}

.sm-pop-title {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 2px;
}

.sm-pop-meta {
  font-size: 11px;
  color: var(--theme-muted);
}

/* Compact Feedback Section */
.sm-feedback-box {
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sm-feedback-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sm-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--theme-line);
  background: rgba(255, 255, 255, 0.04);
  color: #1E293B;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.sm-fb-btn.active,
.sm-fb-btn:hover {
  border-color: var(--coral);
  background: rgba(58, 155, 143, 0.15);
  color: #6CA034;
}

/* Split Reviews Grid & Right Side Review Form */
.sm-reviews-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 960px) {
  .sm-reviews-layout {
    grid-template-columns: 1fr;
  }
  .sm-your-review-panel {
    position: static !important;
    top: auto !important;
  }
}

.sm-reviews-feed-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sm-review-card-item {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sm-review-author-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sm-review-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(58, 155, 143, 0.15);
  border: 1px solid var(--coral);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.sm-review-author-name {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
}

.sm-review-exam-badge {
  font-size: 11px;
  color: var(--teal);
}

.sm-review-statement-text {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.45;
  margin: 0;
}

.sm-review-advice-tag {
  font-size: 11.5px;
  color: #77AC3B;
  background: rgba(58, 155, 143, 0.1);
  border: 1px solid rgba(58, 155, 143, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
}

/* User Review Right Panel */
.sm-your-review-panel {
  background: #FFFFFF;
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 90px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.sm-your-review-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 4px;
}

.sm-your-review-head p {
  font-size: 11.5px;
  color: var(--theme-muted);
  margin: 0;
}

.sm-review-form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-rf-input,
.sm-rf-select,
.sm-rf-textarea {
  width: 100%;
  background: #F9FAFB;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  color: #1E293B;
  padding: 8px 12px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.sm-rf-input:focus,
.sm-rf-select:focus,
.sm-rf-textarea:focus {
  border-color: var(--coral);
}

.sm-rf-textarea {
  resize: vertical;
  min-height: 70px;
}

.sm-rf-submit-btn {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: var(--coral);
  border: none;
  color: #1E293B;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ==========================================================================
   REVIEWS & VERIFIED EXPERIENCES PORTAL (4 CATEGORIES HUB)
   ========================================================================== */
.reviews-hub-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 70px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.reviews-filter-toolbar {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

.reviews-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.reviews-cat-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--theme-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reviews-cat-btn:hover {
  border-color: rgba(58, 155, 143, 0.4);
  color: #1E293B;
  background: rgba(58, 155, 143, 0.08);
}

.reviews-cat-btn.active {
  background: linear-gradient(135deg, rgba(58, 155, 143, 0.22), rgba(58, 155, 143, 0.1));
  border-color: var(--coral);
  color: #1E293B;
  box-shadow: 0 0 14px rgba(58, 155, 143, 0.3);
}

.reviews-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.reviews-search-input-wrap {
  flex: 1;
  min-width: 260px;
  position: relative;
}

.reviews-search-input-wrap input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  background: rgba(8, 14, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #1E293B;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s;
}

.reviews-search-input-wrap input:focus {
  border-color: var(--coral);
}

.reviews-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-muted);
  font-size: 14px;
  pointer-events: none;
}

.reviews-submit-trigger-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #77AC3B, #6CA034);
  border: none;
  border-radius: 10px;
  color: #1E293B;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(58, 155, 143, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reviews-submit-trigger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(58, 155, 143, 0.48);
}

/* Category Sections */
.reviews-cat-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reviews-cat-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.reviews-cat-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-cat-block-title h2 {
  font-size: 19px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
  letter-spacing: -0.01em;
}

.reviews-cat-badge-count {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(58, 155, 143, 0.15);
  color: var(--coral);
  border: 1px solid rgba(58, 155, 143, 0.3);
}

/* Grid of Cards */
.reviews-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .reviews-items-grid {
    grid-template-columns: 1fr;
  }
}

.review-card-item {
  background: rgba(18, 22, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.review-card-item:hover {
  transform: translateY(-3px);
  border-color: rgba(58, 155, 143, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(58, 155, 143, 0.12);
}

.rc-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rc-tag-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(58, 155, 143, 0.15);
  color: #77AC3B;
  border: 1px solid rgba(58, 155, 143, 0.3);
}

.rc-rating-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-stars {
  color: #77AC3B;
  font-size: 13px;
  letter-spacing: 1px;
}

.rc-score {
  font-size: 11.5px;
  font-weight: 700;
  color: #77AC3B;
}

.rc-context {
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.rc-statement {
  font-size: 13px;
  line-height: 1.6;
  color: #d2e1eb;
  font-style: normal;
  margin: 0;
  flex: 1;
}

.rc-advice-box {
  background: rgba(8, 14, 18, 0.7);
  border-left: 3px solid var(--coral);
  border-radius: 0 8px 8px 0;
  padding: 9px 12px;
  font-size: 12px;
  color: #5F6368;
  line-height: 1.5;
}

.rc-advice-box strong {
  color: var(--coral);
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rc-author-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.rc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(58, 155, 143, 0.35), rgba(58, 155, 143, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  flex-shrink: 0;
}

.rc-author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rc-author-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1E293B;
}

.rc-author-role {
  font-size: 11px;
  color: var(--theme-muted);
}

/* User Review Submission Modal */
.user-review-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.user-review-modal-wrap.open {
  display: flex;
}

.user-review-modal-card {
  background: #F9FAFB;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(58, 155, 143, 0.2);
}

.user-review-modal-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.user-review-modal-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #5F6368;
}

.user-review-modal-card input,
.user-review-modal-card select,
.user-review-modal-card textarea {
  background: rgba(5, 9, 12, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #1E293B;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.user-review-modal-card input:focus,
.user-review-modal-card select:focus,
.user-review-modal-card textarea:focus {
  border-color: var(--coral);
}


.sm-rf-submit-btn:hover {
  background: #77AC3B;
  transform: translateY(-1px);
}


/* =========================================================
   COMPREHENSIVE WHITE + GREEN + GREY THEME STYLING
   ========================================================= */
body, html {
  background-color: #1E293B !important;
  color: #252A30 !important;
}

/* Card & Surface Defaults */
.card, .college-card, .course-card, .exam-card, .domain-card, 
.material-card, .review-card, .feature-card, .ranking-card,
.stat-card, .overview-card, .info-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #252A30 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
}

.card:hover, .college-card:hover, .course-card:hover, 
.exam-card:hover, .domain-card:hover, .material-card:hover, .review-card:hover {
  border-color: #77AC3B !important;
  box-shadow: 0 8px 25px rgba(58, 155, 143, 0.12) !important;
}

/* Filter Sidebars & Control Boxes */
.filter-sidebar, .filter-box, .filter-group, .filter-panel, .search-container {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #252A30 !important;
}

.filter-pill, .filter-chip, .tag-btn {
  background: #F3F4F6 !important;
  border: 1px solid #D1D5DB !important;
  color: #5F6368 !important;
  border-radius: 20px !important;
}

.filter-pill:hover, .filter-chip:hover, .tag-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.08) !important;
}

.filter-pill.active, .filter-chip.active, .tag-btn.active {
  background: #77AC3B !important;
  color: #1E293B !important;
  border-color: #77AC3B !important;
  font-weight: 700 !important;
}

/* Form Inputs & Dropdowns */
input[type="text"], input[type="search"], input[type="email"], 
input[type="password"], input[type="number"], select, textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #D1D5DB !important;
  color: #252A30 !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(58, 155, 143, 0.15) !important;
  outline: none !important;
}

/* Modals & Dialogs */
.modal-overlay, .modal-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-content, .modal-dialog, .popup-content {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #252A30 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  border-radius: 14px !important;
}

/* Badges & Accents */
.badge, .status-badge, .rating-badge {
  background: rgba(58, 155, 143, 0.12) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(58, 155, 143, 0.25) !important;
}

/* Buttons */
.btn-primary, .primary-btn, .submit-btn, .action-btn-primary {
  background: #77AC3B !important;
  color: #1E293B !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover, .primary-btn:hover, .submit-btn:hover, .action-btn-primary:hover {
  background: #6CA034 !important;
  box-shadow: 0 4px 12px rgba(58, 155, 143, 0.25) !important;
}

.btn-secondary, .secondary-btn, .outline-btn {
  background: #FFFFFF !important;
  border: 1.5px solid #D1D5DB !important;
  color: #5F6368 !important;
  border-radius: 8px !important;
}

.btn-secondary:hover, .secondary-btn:hover, .outline-btn:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
  background: rgba(58, 155, 143, 0.06) !important;
}

/* Headings & Highlight text */
h1, h2, h3, h4, h5, h6 {
  color: #252A30 !important;
}

.highlight-green, .text-green, .accent-text {
  color: #77AC3B !important;
}

/* ==========================================================================
   THECAMPUSNOVA DEFINITIVE HEADER & NAVBAR MASTER SPECIFICATION
   ========================================================================== */

/* Main Header Container: 72px fixed height, balanced padding, vertical centering */
.site-header {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  background: var(--card-background, #FCFCFC) !important;
  border-bottom: 1px solid var(--border-color, #EFEFEF) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

/* 1. LOGO: Slightly increased size, 100% proportional & undistorted, vertically centered in the middle */
.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 2. SEARCH BOX + AI: Balanced, flexible width matching screenshot on the left */
.header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  background: var(--card-background, #FCFCFC) !important;
  border: 1.5px solid var(--border-color, #EFEFEF) !important;
  border-radius: 24px !important;
  padding: 0 4px 0 12px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ai-entry:focus-within, .ai-entry:hover {
  border-color: var(--green-accent, #77AC3B) !important;
  box-shadow: 0 0 0 3px rgba(119, 172, 59, 0.12) !important;
}

.search-svg {
  color: var(--secondary-text, #5F6368) !important;
  stroke: var(--secondary-text, #5F6368) !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.ai-entry input[type="search"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  color: var(--main-text, #252A30) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.ai-entry input[type="search"]::placeholder {
  color: var(--secondary-text, #5F6368) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.ai-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: var(--green-accent, #77AC3B) !important;
  color: #FCFCFC !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
}

.ai-button:hover {
  background: #6CA034 !important;
}

/* 3. SELECT YOUR COLLEGE, 4. EXPLORE, 5. LANGUAGE PILL BUTTONS (NO CLIPPING, NO OVERFLOW) */
.custom-menu {
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.goal-menu {
  margin: 0 !important;
}

.explore-menu, .language-menu {
  margin: 0 !important;
}

.header-pill-btn,
.goal-menu .goal-trigger,
.goal-menu .menu-trigger,
.explore-menu .explore-trigger,
.language-menu .language-trigger {
  height: 40px !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  border: 1.5px solid var(--border-color, #EFEFEF) !important;
  border-radius: 10px !important;
  background: var(--card-background, #FCFCFC) !important;
  color: var(--main-text, #252A30) !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, color 0.18s, background-color 0.18s !important;
}

.header-pill-btn:hover,
.goal-menu .goal-trigger:hover,
.goal-menu .menu-trigger:hover,
.explore-menu .explore-trigger:hover,
.language-menu .language-trigger:hover {
  border-color: var(--green-accent, #77AC3B) !important;
  color: var(--green-accent, #77AC3B) !important;
  background: var(--secondary-grey, #EEEEEE) !important;
}

.goal-menu .menu-trigger::before,
.goal-menu .menu-trigger::after,
.goal-menu .goal-trigger::before,
.goal-menu .goal-trigger::after {
  display: none !important;
  content: none !important;
}

.pill-btn-text {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: inline-block !important;
}

.pill-icon,
.green-icon {
  color: var(--green-accent, #77AC3B) !important;
  stroke: var(--green-accent, #77AC3B) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.pill-caret {
  color: var(--secondary-text, #5F6368) !important;
  stroke: var(--secondary-text, #5F6368) !important;
  flex-shrink: 0 !important;
  margin-left: 2px !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

.custom-menu.open .pill-caret {
  transform: rotate(180deg) !important;
  color: var(--green-accent, #77AC3B) !important;
  stroke: var(--green-accent, #77AC3B) !important;
}

/* 6. TIME: Clean, compact, properly spaced */
.live-time {
  color: var(--secondary-text, #5F6368) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* 7. PROFILE AVATAR */
.profile-menu {
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.profile-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7A8754 0%, #B85D19 100%) !important;
  border: 1.5px solid var(--card-background, #FCFCFC) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

.avatar-letter {
  color: #1E293B !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

/* 8. MENU HAMBURGER BUTTON: Compact, balanced, aligned with no excessive margin */
.header-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid var(--border-color, #EFEFEF) !important;
  border-radius: 10px !important;
  background: var(--card-background, #FCFCFC) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: border-color 0.18s, background-color 0.18s !important;
}

.header-menu-btn:hover {
  border-color: var(--green-accent, #77AC3B) !important;
  background: var(--secondary-grey, #EEEEEE) !important;
}

.header-menu-btn span {
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: var(--secondary-text, #5F6368) !important;
  border-radius: 1px !important;
}


/* Responsive Top Header for Tablets & Mobile */
@media (max-width: 992px) {
  .site-header {
    height: auto !important;
    padding: 10px 16px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .header-search-wrap {
  flex: 0 1 350px !important;
  width: 350px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: auto !important;
}
  .header-logo-wrap {
    order: 1 !important;
    margin: 0 !important;
  }
  .header-logo-img {
  height: 54px !important;
  width: auto !important;
  min-height: 54px !important;
  max-height: 56px !important;
  max-width: 65px !important;
  object-fit: contain !important;
  display: block !important;
}
  .goal-menu, .explore-menu, .language-menu, .live-time {
    display: none !important;
  }
  .sign-in {
    order: 2 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    margin-left: auto !important;
  }
  .menu-button {
    order: 2 !important;
    display: flex !important;
  }
}



/* ==========================================================================
   MENTORS VIEW, DISCOVERY SLIDERS & MOBILE DRAWER STYLING
   ========================================================================== */
.discovery-bg-slider, .view-bg-slider {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.discovery-bg-slide, .view-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06) translate3d(0, 0, 0);
  transition: opacity 1.5s ease-in-out, transform 6s ease-out;
  will-change: opacity, transform;
  filter: brightness(1.02) contrast(1.02);
}

.discovery-bg-slide.active, .view-bg-slide.active {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

.mentor-profile-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.drawer-nav-item:hover {
  background: rgba(119, 172, 59, 0.08);
  color: #77AC3B !important;
}

@media (max-width: 768px) {
  .roadmap-feature-card > div:first-child {
    flex-direction: column;
  }
}



/* ==========================================================================
   SUBTLE BLUE BORDER GLOW ON SELECT YOUR COLLEGE, EXPLORE & CONTROLS
   ========================================================================== */
.goal-trigger,
#goalTrigger,
.explore-trigger,
#exploreTrigger {
  border: 1px solid rgba(50, 140, 255, 0.48) !important;
  box-shadow: 0 0 6px rgba(50, 140, 255, 0.20), 0 0 14px rgba(50, 140, 255, 0.10) !important;
  transition: border 0.25s ease, box-shadow 0.25s ease !important;
}

.goal-trigger:hover,
#goalTrigger:hover,
.explore-trigger:hover,
#exploreTrigger:hover {
  border: 1px solid rgba(50, 140, 255, 0.75) !important;
  box-shadow: 0 0 8px rgba(50, 140, 255, 0.30), 0 0 18px rgba(50, 140, 255, 0.16) !important;
}

.header-search-wrap {
  border: 1px solid rgba(50, 140, 255, 0.38) !important;
  box-shadow: 0 0 5px rgba(50, 140, 255, 0.14), 0 0 12px rgba(50, 140, 255, 0.08) !important;
}

.language-trigger,
#languageTrigger,
.live-time,
#liveTime,
.profile-avatar-btn,
#headerSignInBtn,
.header-menu-btn,
#hamburgerMenuBtn {
  border: 1px solid rgba(50, 140, 255, 0.35) !important;
  box-shadow: 0 0 4px rgba(50, 140, 255, 0.12), 0 0 10px rgba(50, 140, 255, 0.06) !important;
}

.nav-status {
  border: 1px solid rgba(50, 140, 255, 0.40) !important;
  box-shadow: 0 0 5px rgba(50, 140, 255, 0.15) !important;
}

/* ==========================================================================
   EXPLORE PANEL BACKGROUND SLIDESHOW STYLING
   ========================================================================== */
.explore-panel {
  position: relative !important;
  overflow: hidden !important;
}

.explore-bg-slider {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.explore-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 0 !important;
  transition: opacity 1.2s ease-in-out !important;
  filter: brightness(0.95) contrast(1.02) !important;
}

.explore-bg-slide.active {
  opacity: 0.22 !important; /* Soft subtle background behind explore grid */
}

.explore-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.explore-panel > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   HOME WHOLE-BODY BACKGROUND SLIDESHOW STYLING
   ========================================================================== */
.home-body-bg-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.home-body-bg-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  opacity: 0 !important;
  transition: opacity 1.4s ease-in-out !important;
  will-change: opacity !important;
  filter: brightness(1.02) contrast(1.02) !important;
}

.home-body-bg-slide.active {
  opacity: 0.16 !important; /* Elegant subtle opacity keeping all content readable */
}

.home-body-bg-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(248, 250, 252, 0.82) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#homeView > section,
#homeView > div:not(.home-body-bg-slider) {
  position: relative !important;
  z-index: 2 !important;
}



/* ==========================================================================
   HIGH BRIGHTNESS, VIBRANT & INTERACTIVE BACKGROUND SLIDESHOW STYLING
   ========================================================================== */

/* 1. Main Home Whole-Body Background Slider (High Brightness & Vivid Opacity) */
.home-body-bg-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.home-body-bg-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  opacity: 0 !important;
  transform: scale(1.04) translate3d(0, 0, 0) !important;
  transition: opacity 1.4s ease-in-out, transform 6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
  filter: brightness(1.25) contrast(1.10) saturate(1.20) !important;
}

.home-body-bg-slide.active {
  opacity: 0.88 !important; /* Super bright, crisp and clearly visible */
  transform: scale(1.0) translate3d(0, 0, 0) !important;
}

.home-body-bg-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.28) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#homeView > section,
#homeView > div:not(.home-body-bg-slider) {
  position: relative !important;
  z-index: 2 !important;
}

/* 2. Hero Background Carousel (Vibrant & High Brightness) */
.hero-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center 35% !important;
  opacity: 0 !important;
  transform: scale(1.05) translate3d(0, 0, 0) !important;
  transition: opacity 1.2s ease-in-out, transform 6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: brightness(1.24) contrast(1.10) saturate(1.20) !important;
  display: block !important;
}

.hero-bg-slide.active {
  opacity: 0.95 !important;
  transform: scale(1.0) translate3d(0, 0, 0) !important;
}

/* 3. Explore Panel Background Slider (Vivid & Bright) */
.explore-panel {
  position: relative !important;
  overflow: hidden !important;
}

.explore-bg-slider {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.explore-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 0 !important;
  transform: scale(1.04) translate3d(0, 0, 0) !important;
  transition: opacity 1.2s ease-in-out, transform 5s ease-out !important;
  filter: brightness(1.22) contrast(1.10) saturate(1.18) !important;
}

.explore-bg-slide.active {
  opacity: 0.78 !important; /* Bright and vivid */
  transform: scale(1.0) translate3d(0, 0, 0) !important;
}

.explore-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.explore-panel > * {
  position: relative !important;
  z-index: 2 !important;
}

/* 4. Discovery Sections (Colleges, Courses, Domains, Exams, Materials, Reviews, Rankings, Careers, etc.) */
.discovery-bg-slider, .view-bg-slider {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.discovery-bg-slide, .view-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0 !important;
  transform: scale(1.05) translate3d(0, 0, 0) !important;
  transition: opacity 1.4s ease-in-out, transform 6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
  filter: brightness(0.92) contrast(1.04) !important;
}

.discovery-bg-slide.active, .view-bg-slide.active {
  opacity: 0.52 !important; /* ~50% dimmed, visible, clear and non-distracting */
  transform: scale(1.0) translate3d(0, 0, 0) !important;
}

.view-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42) 0%, rgba(15, 23, 42, 0.38) 50%, rgba(15, 23, 42, 0.48) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#examsView .view-bg-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#examsView {
  background: #F8FAFC !important;
}

/* 5. Glassmorphism Card Readability Enhancements */
.goal-card,
.stream-layout,
.stream-list,
.stream-detail,
.career-priority-bar,
.roadmap-feature-card,
.about-content-card,
.prep-section-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.section-heading h2,
.section-heading .eyebrow,
.page-top h1,
.page-top .eyebrow {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}



/* ==========================================================================
   TWO SEPARATE SHARP HORIZONTAL (RIGHT -> LEFT) BACKGROUND SLIDESHOWS
   ========================================================================== */

/* --------------------------------------------------------------------------
   SLIDER 1: HERO SECTION ONLY (4-5 SHARP IMAGES, RIGHT -> LEFT, 6 SECONDS)
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  min-height: 500px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.hero-bg-carousel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  display: block !important;
}

.hero-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center 35% !important;
  background-repeat: no-repeat !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out !important;
  will-change: transform, opacity !important;
  filter: brightness(1.15) contrast(1.06) saturate(1.12) !important; /* Crystal sharp, no blur */
  display: block !important;
}

.hero-bg-slide.active {
  transform: translateX(0%) !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.hero-bg-slide.slide-out-left {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

.hero-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.hero-copy,
.hero-visual {
  position: relative !important;
  z-index: 5 !important;
}

.hero-ad-card {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
}

/* --------------------------------------------------------------------------
   SLIDER 2: SECOND SECTION TO FOOTER (4-5 SHARP IMAGES, RIGHT -> LEFT, 6 SECONDS)
   -------------------------------------------------------------------------- */
#homeView {
  position: relative !important;
  background: transparent !important;
}

.home-body-bg-slider {
  position: absolute !important;
  top: 500px !important; /* Starts immediately after the hero section */
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - 500px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.home-body-bg-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out !important;
  will-change: transform, opacity !important;
  filter: brightness(1.15) contrast(1.06) saturate(1.12) !important; /* Crystal sharp, no blur */
}

.home-body-bg-slide.active {
  transform: translateX(0%) !important;
  opacity: 0.95 !important;
  z-index: 2 !important;
}

.home-body-bg-slide.slide-out-left {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

.home-body-bg-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Sections below Hero: transparent backgrounds so background image shows naturally */
#homeView > section:not(.hero-section),
#homeView > div:not(.home-body-bg-slider) {
  position: relative !important;
  z-index: 4 !important;
  background: transparent !important;
}

.stats-strip {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.goal-card,
.stream-layout,
.stream-list,
.stream-detail,
.college-grid,
.career-priority-bar,
.roadmap-feature-card,
.about-content-card,
.prep-section-card {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}



/* ==========================================================================
   PERFECT 100% NATURAL ZOOM LEVEL FOR BOTH BACKGROUND SLIDESHOWS
   ========================================================================== */

/* SLIDER 1 (HERO): Natural 100% scale without excessive enlargement */
.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  min-height: 500px !important;
}

.hero-bg-carousel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.hero-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out !important;
  will-change: transform, opacity !important;
  filter: brightness(1.12) contrast(1.05) saturate(1.10) !important;
  display: block !important;
}

.hero-bg-slide.active {
  transform: translateX(0%) !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.hero-bg-slide.slide-out-left {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

.hero-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* SLIDER 2 (SECOND SECTION TO FOOTER): Viewport-pinned 100% natural zoom scale */
.home-body-bg-slider {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.home-body-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important; /* Prevents extreme 10x elongation */
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out !important;
  will-change: transform, opacity !important;
  filter: brightness(1.12) contrast(1.05) saturate(1.10) !important;
}

.home-body-bg-slide.active {
  transform: translateX(0%) !important;
  opacity: 0.95 !important;
  z-index: 2 !important;
}

.home-body-bg-slide.slide-out-left {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

.home-body-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Explore Panel Slider (Natural fit) */
.explore-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}



/* ==========================================================================
   50% REDUCED DARKNESS / INCREASED BRIGHTNESS FOR ALL BACKGROUND SLIDESHOWS
   ========================================================================== */

/* 1. Hero Section Slideshow (Slider 1) */
.hero-bg-slide {
  filter: brightness(1.28) contrast(1.04) saturate(1.12) !important;
}

.hero-bg-slide.active {
  opacity: 1 !important;
}

.hero-bg-overlay {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* 2. Whole-Body Background Slideshow to Footer (Slider 2) */
.home-body-bg-slide {
  filter: brightness(1.28) contrast(1.04) saturate(1.12) !important;
}

.home-body-bg-slide.active {
  opacity: 1 !important;
}

.home-body-bg-overlay {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* 3. Explore Panel Slideshow */
.explore-bg-slide {
  filter: brightness(1.25) contrast(1.04) saturate(1.12) !important;
}

.explore-bg-slide.active {
  opacity: 0.88 !important;
}

.explore-bg-overlay {
  background: rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(3px) !important;
}

/* 4. Discovery Sections (Courses, Colleges, Domains, Exams, Materials, Reviews) */
.discovery-bg-slide, .view-bg-slide {
  filter: brightness(0.92) contrast(1.04) !important;
}

.discovery-bg-slide.active, .view-bg-slide.active {
  opacity: 0.52 !important;
}

.view-bg-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42) 0%, rgba(15, 23, 42, 0.38) 50%, rgba(15, 23, 42, 0.48) 100%) !important;
}

#examsView .view-bg-overlay {
  display: none !important;
  opacity: 0 !important;
}



/* ==========================================================================
   PRECISE ABSOLUTE POSITIONING FOR EXPLORE & ALL HEADER DROPDOWNS
   ========================================================================== */

.custom-menu,
.explore-menu,
.goal-menu,
.language-menu,
.profile-menu {
  position: relative !important;
}

/* Explore dropdown panel: Opens directly BELOW Explore button with high z-index */
.explore-panel,
.custom-menu .explore-panel,
.explore-menu .explore-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 440px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}

.custom-menu.open .explore-panel,
.explore-menu.open .explore-panel {
  display: block !important;
}

/* Goal (Select Your College) dropdown panel: Opens directly BELOW button */
.goal-menu .menu-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 240px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
  z-index: 1000 !important;
  padding: 8px !important;
}

.goal-menu.open .menu-panel,
.custom-menu.open .menu-panel {
  display: block !important;
}

/* Language dropdown panel: Opens directly BELOW button */
.language-menu .language-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 320px !important;
  max-width: calc(100vw - 24px) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
  z-index: 1000 !important;
  padding: 10px !important;
}

.language-menu.open .language-panel {
  display: block !important;
}

/* Profile dropdown panel: Opens directly BELOW button */
.profile-menu .profile-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 220px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
  z-index: 1000 !important;
  padding: 8px !important;
}

.profile-menu.open .profile-panel {
  display: block !important;
}



/* ==========================================================================
   UI REFINEMENTS: SOLID TOP NAVBAR, 70% INTENSITY, WIDER LOWER SECTION, CURVED TEXT PANELS
   ========================================================================== */

/* 1. NAVBAR TOP EDGE: COMPLETELY SOLID, CLOSED, FIXED TO TOP EDGE WITH ZERO GAPS */
.topline {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 32px !important;
  background: #EAEFF2 !important;
  color: #475569 !important;
  border-bottom: 1px solid #DCE2E8 !important;
  z-index: 110 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  z-index: 100 !important;
  margin: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.category-nav {
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  z-index: 90 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 2. BACKGROUND IMAGE: 70% VISUAL INTENSITY, NO BLUR, NATURAL PROPORTIONS */
.hero-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out !important;
  will-change: transform, opacity !important;
  filter: brightness(1.08) contrast(1.04) saturate(1.08) !important;
}

.hero-bg-slide.active {
  transform: translateX(0%) !important;
  opacity: 0.70 !important; /* 70% visual intensity */
  z-index: 2 !important;
}

.hero-bg-slide.slide-out-left {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

.home-body-bg-slider {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.home-body-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out !important;
  will-change: transform, opacity !important;
  filter: brightness(1.08) contrast(1.04) saturate(1.08) !important;
}

.home-body-bg-slide.active {
  transform: translateX(0%) !important;
  opacity: 0.70 !important; /* 70% visual intensity */
  z-index: 2 !important;
}

.home-body-bg-slide.slide-out-left {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

/* 3. HERO CONTENT AREA & CURVED LIGHT-WHITE SUPPORT */
.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  min-height: 520px !important;
  padding: 44px 3% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 36px !important;
}

.hero-copy {
  position: relative !important;
  z-index: 5 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  padding: 28px 32px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
  max-width: 640px !important;
}

.hero-copy .eyebrow {
  color: #77AC3B !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 8px !important;
}

.hero-rotator-h1,
.hero-copy h1 {
  color: #0F172A !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.hero-rotator-h1 em,
.hero-copy h1 em {
  color: #77AC3B !important;
  font-style: italic !important;
}

.hero-text {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  margin: 14px 0 20px !important;
}

.hero-visual {
  position: relative !important;
  z-index: 5 !important;
}

.hero-ad-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
}

/* 4. LOWER CONTENT WIDTH: WIDER, NATURAL SPREAD WITH CLEAN 2.8% SIDE MARGINS */
.stats-strip {
  width: 100% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 22px 2.8% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.section {
  width: 100% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 56px 2.8% 0 !important;
  box-sizing: border-box !important;
}

.section-heading {
  margin-bottom: 24px !important;
}

.section-heading > div {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 14px !important;
  padding: 12px 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  display: inline-block !important;
}

.section-heading h2 {
  color: #0F172A !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.section-subtitle {
  color: #475569 !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

/* Goal Cards Grid: Stretches naturally across the full wider container */
.goal-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

.goal-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  padding: 20px 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
}

.goal-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10) !important;
  border-color: rgba(50, 140, 255, 0.45) !important;
}

.goal-card strong {
  color: #0F172A !important;
  font-size: 15px !important;
}

.goal-card small {
  color: #475569 !important;
}

/* Stream Layout */
.stream-layout {
  width: 100% !important;
  gap: 24px !important;
}

.stream-list,
.stream-detail {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* College Cards Grid */
.college-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

.college-card {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Career Domain Selector Bar */
.career-priority-bar {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

@media (max-width: 1100px) {
  .goal-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .goal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hero-section {
    flex-direction: column !important;
    padding: 24px 16px !important;
  }
  .hero-copy {
    padding: 20px 18px !important;
  }
}



/* ==========================================================================
   TARGETED HIGH-CONTRAST & CURVED LIGHT-WHITE SUPPORT FOR THE 3 KEY SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 1: NEWSLETTER SECTION ("Stay Updated with TheCampusNova")
   -------------------------------------------------------------------------- */
.newsletter-section {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
  margin: 40px auto !important;
  max-width: 1540px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 0.95fr 1.45fr !important;
  gap: 36px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 5 !important;
}

.newsletter-copy {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.newsletter-copy .eyebrow {
  color: #77AC3B !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 8px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  display: block !important;
}

.newsletter-copy h2 {
  color: #0F172A !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

.newsletter-copy > p:not(.eyebrow) {
  color: #334155 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* --------------------------------------------------------------------------
   SECTION 2: FEATURE BAND ("See how every choice connects.")
   -------------------------------------------------------------------------- */
.feature-band {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
  margin: 40px auto !important;
  max-width: 1540px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 36px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 5 !important;
}

.feature-band-left {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.feature-band-left .eyebrow {
  color: #77AC3B !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 8px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  display: block !important;
}

.feature-band-left h2 {
  color: #0F172A !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

.feature-band-left p:not(.eyebrow) {
  color: #334155 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  margin: 0 0 18px !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.feature-band-left .outline-button {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.feature-band-left .outline-button:hover {
  border-color: #77AC3B !important;
  color: #77AC3B !important;
}

/* --------------------------------------------------------------------------
   SECTION 3: STATS STRIP ("2.4M+", "18,500", "4,200", "96%", QUOTE BANNER)
   -------------------------------------------------------------------------- */
.stats-strip {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
  margin: 28px auto 0 !important;
  max-width: 1540px !important;
  width: 100% !important;
  padding: 24px 32px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  position: relative !important;
  z-index: 5 !important;
}

.stats-strip > div:not(.strip-quote) {
  background: rgba(248, 250, 252, 0.75) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.stats-strip strong {
  color: #0F172A !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  display: block !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

.stats-strip strong span {
  color: #77AC3B !important;
}

.stats-strip small {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  display: block !important;
}

.stats-strip .strip-quote {
  display: block !important;
  color: #1E293B !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  background: rgba(248, 250, 252, 0.75) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.7) !important;
  border-left: 4px solid #77AC3B !important;
  max-width: 320px !important;
}

.stats-strip .strip-quote span {
  color: #64748B !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: 4px !important;
}

@media (max-width: 900px) {
  .newsletter-section,
  .feature-band {
    grid-template-columns: 1fr !important;
  }
  .stats-strip {
    flex-wrap: wrap !important;
  }
}



/* ==========================================================================
   UNIVERSAL INTERACTIVE SUB-FIELDS & ZERO BLACK SHADE OVERRIDE
   ========================================================================== */

/* 1. All Remarks Panels across Domains, Exams, Careers, Materials */
.user-remarks-panel,
.domain-sidebar-chart-card,
.survey-chart-sidebar > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

.user-remarks-bg-img {
  display: none !important;
}

.user-remarks-content {
  background: #FFFFFF !important;
  padding: 22px 20px !important;
  border-radius: 16px !important;
}

.remarks-panel-head h3,
.sidebar-chart-title strong {
  color: #0F172A !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.remarks-panel-head p,
.sidebar-chart-title small {
  color: #475569 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

.remarks-input,
.remarks-select,
.remarks-textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
}

.remarks-input::placeholder,
.remarks-textarea::placeholder {
  color: #64748B !important;
  font-weight: 400 !important;
}

.remarks-input:focus,
.remarks-select:focus,
.remarks-textarea:focus {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(119, 172, 59, 0.18) !important;
}

.remarks-submit-btn,
#submitRemarkBtn,
#submitExamRemarkBtn {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 18px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.3) !important;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.remarks-submit-btn:hover,
#submitRemarkBtn:hover,
#submitExamRemarkBtn:hover {
  background: #659730 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(119, 172, 59, 0.45) !important;
}

.user-remark-empty {
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
}

/* 2. Reviews Filter Toolbar & Category Buttons */
.reviews-filter-toolbar {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
  padding: 20px 24px !important;
}

.reviews-cat-btn {
  background: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.reviews-cat-btn:hover {
  background: rgba(119, 172, 59, 0.1) !important;
  border-color: #77AC3B !important;
  color: #77AC3B !important;
}

.reviews-cat-btn.active {
  background: #77AC3B !important;
  border-color: #77AC3B !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.3) !important;
}

.reviews-search-input-wrap input {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.reviews-search-input-wrap input::placeholder {
  color: #64748B !important;
}

.reviews-search-input-wrap input:focus {
  border-color: #77AC3B !important;
  box-shadow: 0 0 0 3px rgba(119, 172, 59, 0.18) !important;
}

.reviews-submit-trigger-btn {
  background: #77AC3B !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.35) !important;
}

.reviews-submit-trigger-btn:hover {
  background: #659730 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(119, 172, 59, 0.5) !important;
}

/* 3. Review Cards Item (Clean Bright Glassmorphic) */
.review-card-item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: none !important;
  padding: 22px !important;
}

.review-card-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(119, 172, 59, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.rc-tag-badge {
  background: rgba(119, 172, 59, 0.12) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(119, 172, 59, 0.25) !important;
  font-weight: 800 !important;
}

.rc-context {
  color: #0F172A !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.rc-statement {
  color: #334155 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.rc-advice-box {
  background: #F8FAFC !important;
  border-left: 4px solid #77AC3B !important;
  color: #334155 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.rc-advice-box strong {
  color: #77AC3B !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
}

.rc-author-footer {
  border-top: 1px solid #E2E8F0 !important;
  padding-top: 12px !important;
}

.rc-avatar {
  background: linear-gradient(135deg, #77AC3B, #5A8A2B) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: none !important;
}

.rc-author-name {
  color: #0F172A !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.rc-author-role {
  color: #64748B !important;
  font-size: 11.5px !important;
}

/* 4. Category Section Headers */
.reviews-cat-block-title h2 {
  color: #0F172A !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.reviews-cat-badge-count {
  background: rgba(119, 172, 59, 0.12) !important;
  color: #77AC3B !important;
  border: 1px solid rgba(119, 172, 59, 0.25) !important;
  font-weight: 800 !important;
}



/* ==========================================================================
   WEBSITE & ORIENTATION FEEDBACK REVIEW BOX STYLING
   ========================================================================== */
.website-feedback-hero-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(119, 172, 59, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.website-feedback-hero-card:hover {
  border-color: rgba(119, 172, 59, 0.5) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09) !important;
}

@media (max-width: 900px) {
  .website-feedback-hero-card > div {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ==========================================================================
   THECAMPUSNOVA 10-FIELD ENHANCED BAR CHARTS & CARD STYLES
   ========================================================================== */

.cn-bar-chart-card {
  background: var(--theme-surface, #FFFFFF);
  border: 1px solid var(--theme-line, #E2E8F0);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cn-bar-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-line, #E2E8F0);
}

.cn-bar-chart-title {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cn-bar-chart-subtitle {
  font-size: 12px;
  color: #64748B;
  margin: 2px 0 0;
}

/* Vertical Bar Chart Container */
.cn-vertical-bars-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 200px;
  padding: 24px 8px 0;
  position: relative;
  border-bottom: 2px solid var(--theme-line, #E2E8F0);
}

.cn-vertical-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
  min-width: 24px;
}

.cn-vbar-value {
  font-size: 10.5px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
  white-space: nowrap;
}

.cn-vbar-track {
  width: 100%;
  max-width: 32px;
  background: rgba(119, 172, 59, 0.08);
  border-radius: 6px 6px 0 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.cn-vbar-fill {
  width: 100%;
  background: linear-gradient(180deg, #77AC3B 0%, #5E8B2D 100%);
  border-radius: 6px 6px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 4px;
}

.cn-vbar-fill.coral {
  background: linear-gradient(180deg, #E06D53 0%, #C4553D 100%);
}

.cn-vbar-fill.teal {
  background: linear-gradient(180deg, #3A9B8F 0%, #2A796F 100%);
}

.cn-vbar-fill.amber {
  background: linear-gradient(180deg, #E5983B 0%, #C67E28 100%);
}

.cn-vbar-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  margin-top: 8px;
  white-space: nowrap;
}

/* Horizontal Bar List */
.cn-hbar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cn-hbar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cn-hbar-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: 8px;
}

.cn-hbar-item-name {
  font-weight: 700;
  color: #0F172A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-hbar-item-val {
  font-weight: 800;
  color: #77AC3B;
  white-space: nowrap;
}

.cn-hbar-track {
  width: 100%;
  height: 8px;
  background: #F1F5F9;
  border-radius: 4px;
  overflow: hidden;
}

.cn-hbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #77AC3B 0%, #9BCB5C 100%);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.cn-hbar-fill.coral {
  background: linear-gradient(90deg, #E06D53 0%, #F09A85 100%);
}

.cn-hbar-fill.teal {
  background: linear-gradient(90deg, #3A9B8F 0%, #68C1B6 100%);
}

/* Compact Review Cards */
.cn-review-card-compact {
  background: #FFFFFF;
  border: 1px solid var(--theme-line, #E2E8F0);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cn-review-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  border-color: rgba(119, 172, 59, 0.4);
}

.cn-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cn-review-author-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cn-review-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #77AC3B 0%, #3A9B8F 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}

.cn-review-name {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.cn-review-role {
  font-size: 11px;
  color: #64748B;
}

.cn-review-stars {
  color: #F59E0B;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

.cn-review-text {
  font-size: 12.5px;
  color: #334155;
  line-height: 1.5;
  margin: 0;
}

/* Step-by-step process indicators */
.cn-process-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.cn-process-step-item {
  background: #FFFFFF;
  border: 1px solid var(--theme-line, #E2E8F0);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.cn-process-step-item:hover {
  transform: translateY(-2px);
  border-color: #77AC3B;
  box-shadow: 0 4px 14px rgba(119, 172, 59, 0.12);
}

.cn-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #77AC3B;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 8px;
}

.cn-step-title {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 4px;
}

.cn-step-desc {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   Live Admissions Alert Visual Highlight (Subtle Glowing Border)
   ========================================================================== */
.cn-live-alert-highlight {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid rgba(224, 109, 83, 0.45) !important;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(224, 109, 83, 0.12), 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.cn-live-alert-highlight:hover {
  border-color: var(--coral, #E06D53) !important;
  box-shadow: 0 0 26px rgba(224, 109, 83, 0.22), 0 6px 24px rgba(0, 0, 0, 0.06);
}

@keyframes subtleAlertGlow {
  0%, 100% {
    box-shadow: 0 0 16px rgba(224, 109, 83, 0.12), 0 4px 18px rgba(0, 0, 0, 0.03);
    border-color: rgba(224, 109, 83, 0.38);
  }
  50% {
    box-shadow: 0 0 24px rgba(224, 109, 83, 0.26), 0 4px 22px rgba(0, 0, 0, 0.05);
    border-color: rgba(224, 109, 83, 0.75);
  }
}

.cn-live-alert-pulsing {
  animation: subtleAlertGlow 3.5s ease-in-out infinite;
}

/* ==========================================================================
   VISUAL & ALIGNMENT ENHANCEMENTS ACROSS ALL 16 FIELDS
   ========================================================================== */

/* 1. SUBHEADING VISIBILITY: Crisp, sharp, distinct across all 16 fields */
#coursesView .section-subtitle,
#collegesView .section-subtitle,
#domainsView .section-subtitle,
#examsView .section-subtitle,
#materialsView .section-subtitle,
#reviewsView .section-subtitle,
#rankingsView .section-subtitle,
#careersView .section-subtitle,
#placementsView .section-subtitle,
#jobsView .section-subtitle,
#internshipsView .section-subtitle,
#admissionsView .section-subtitle,
#scholarshipsView .section-subtitle,
#facilitiesView .section-subtitle,
#entrancePrepView .section-subtitle,
#reviewsCompareView .section-subtitle,
.courses-intro-block .section-subtitle,
.page-top .section-subtitle {
  color: #1E293B !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  max-width: 820px !important;
  margin: 12px auto 0 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

/* 2. LEFT & RIGHT SPACING: Consistent side padding across all views */
#coursesView > .inner-page,
#collegesView > .inner-page,
#domainsView > .inner-page,
#examsView > .inner-page,
#materialsView > .inner-page,
#reviewsView > .inner-page,
#rankingsView > .inner-page,
#careersView > .inner-page,
#placementsView > .inner-page,
#jobsView > .inner-page,
#internshipsView > .inner-page,
#admissionsView > .inner-page,
#scholarshipsView > .inner-page,
#facilitiesView > .inner-page,
#entrancePrepView > .inner-page,
#reviewsCompareView > .inner-page,
.inner-page,
.page-container {
  padding-left: clamp(16px, 2.5vw, 32px) !important;
  padding-right: clamp(16px, 2.5vw, 32px) !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 3. BETWEEN-CONTENT SPACING: Breathing room between cards, blocks & grids */
.courses-discovery-container {
  gap: 26px !important;
  padding-bottom: 70px !important;
}

.category-card-block {
  margin-bottom: 22px !important;
}

.colleges-discovery-filter-card {
  margin-bottom: 22px !important;
}

.college-grid,
.rankings-grid,
.careers-grid,
.placements-grid,
.jobs-grid,
.internships-grid,
.admissions-grid,
.scholarships-grid,
.facilities-grid,
.reviews-grid {
  gap: 22px !important;
}

.survey-split-layout {
  gap: 24px !important;
  margin-top: 18px !important;
}

.cn-roadmap-block {
  margin-bottom: 24px !important;
}

.roadmap-career-cards,
.roadmap-curriculum-panel,
.roadmap-domains-matrix {
  margin-top: 16px !important;
}

.user-remarks-panel {
  margin-top: 22px !important;
}

/* 4. FOOTER PRESENTATION & NEAT ALIGNMENT */
.site-footer {
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}

.footer-main {
  padding: 50px 5.2% 36px !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 1.2fr 1.2fr !important;
  gap: 32px !important;
  align-items: start !important;
}

.footer-heading {
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 12px !important;
}

.footer-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.footer-nav-list li a {
  color: #475569 !important;
  font-size: 13px !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

.footer-nav-list li a:hover {
  color: #77AC3B !important;
}

.footer-bottom-bar {
  border-top: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  padding: 16px 5.2% !important;
}

.footer-bottom-inner {
  max-width: 1360px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

/* 5. WHITE BACKGROUND OVERLAY: ~10% Reduced Opacity for Background Visibility */
.courses-search-section,
.colleges-discovery-filter-card,
.category-card-block,
.college-card,
.survey-split-layout,
.survey-left-col,
.survey-right-col,
.detail-block,
.pathway-filter-bar,
.user-remarks-panel,
.cn-roadmap-block,
.cn-review-card-compact,
.card,
.exam-card,
.domain-card,
.material-card,
.rankings-card,
.career-card,
.placement-card,
.job-card,
.internship-card,
.admission-card,
.scholarship-card,
.facility-card,
.compare-card {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
   HEADER NAVIGATION MENU DROPDOWN & HAMBURGER INTERACTION
   ========================================================================== */

.header-menu-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Animated Hamburger Icon */
.header-menu-btn {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid var(--border-color, #E2E8F0) !important;
  border-radius: 10px !important;
  background: var(--card-background, #FFFFFF) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  outline: none !important;
}

.header-menu-btn:hover {
  border-color: #3B82F6 !important;
  background: #F8FAFC !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
}

.header-menu-btn:active {
  transform: scale(0.95) !important;
}

.header-menu-btn span {
  display: block !important;
  width: 17px !important;
  height: 2px !important;
  background: #475569 !important;
  border-radius: 2px !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background 0.2s ease !important;
  transform-origin: center !important;
}

/* Hamburger Open -> 'X' Close Animation */
.header-menu-wrap.open .header-menu-btn,
.header-menu-btn.open {
  border-color: #3B82F6 !important;
  background: #EFF6FF !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22) !important;
}

.header-menu-wrap.open .header-menu-btn span:nth-child(1),
.header-menu-btn.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
  background: #2563EB !important;
}

.header-menu-wrap.open .header-menu-btn span:nth-child(2),
.header-menu-btn.open span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

.header-menu-wrap.open .header-menu-btn span:nth-child(3),
.header-menu-btn.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
  background: #2563EB !important;
}

/* Compact Clean Header Dropdown Menu Panel */
.header-menu-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 190px !important;
  width: 200px !important;
  padding: 6px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  gap: 3px !important;
  animation: hmpSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes hmpSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.header-menu-wrap.open .header-menu-panel {
  display: flex !important;
}

.header-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #1E293B !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.header-menu-item:hover {
  background: #F1F5F9 !important;
  color: #2563EB !important;
  transform: translateX(2px) !important;
}

.header-menu-item:active {
  transform: scale(0.98) !important;
}

.hmi-icon {
  font-size: 17px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.hmi-text {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: inherit !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 480px) {
  .header-menu-panel {
    right: 0 !important;
  }
}

/* ==========================================================================
   NAVBAR EXACT DIMENSIONS + SPACING + ALIGNMENT OVERRIDES
   ========================================================================== */
.site-header {
  width: 100% !important;
  height: 76px !important; /* 72–80px */
  min-height: 76px !important;
  max-height: 76px !important;
  padding: 0 28px !important; /* 20–32px */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-logo-img {
  width: auto !important;
  max-width: 80px !important; /* 70–80px */
  height: 58px !important; /* 55–65px */
  min-height: 55px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  display: block !important;
}

.header-search-wrap {
  flex: 0 1 380px !important;
  width: 380px !important; /* 350–420px */
  max-width: 420px !important;
  min-width: 240px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 0 0 20px !important; /* 18–24px gap LOGO <-> SEARCH */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ai-entry {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 44px !important; /* 42–48px */
  background: #FFFFFF !important;
  border: 1.5px solid #2563EB !important;
  border-radius: 22px !important; /* 20–24px */
  padding: 0 5px 0 14px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ai-entry:focus-within,
.ai-entry:hover {
  border-color: #1D4ED8 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

.ai-entry input[type="search"],
#headerSearch {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  color: #0F172A !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.header-tagline-wrap {
  display: flex !important;
  align-items: center !important;
  margin-left: 16px !important;
  margin-right: auto !important;
  flex-shrink: 0 !important;
}

.header-future-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
}

.header-future-stars em {
  font-style: italic !important;
  font-weight: 700 !important;
  color: inherit !important;
  letter-spacing: 0.01em !important;
}

.header-future-stars .fs-star {
  font-size: 11px !important;
  font-style: normal !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 2px !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) !important;
}

.header-future-stars:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #2563EB !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1) !important;
}

@media (max-width: 1024px) {
  .header-future-stars {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
}

@media (max-width: 860px) {
  .header-tagline-wrap {
    display: none !important;
  }
}

.header-right-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important; /* 8–12px */
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.custom-menu {
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* Base Pill Button */
.header-pill-btn {
  height: 44px !important; /* 42–48px */
  background: #FFFFFF !important;
  color: #1E293B !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
}

/* 5.1 SELECT YOUR COLLEGE */
.goal-menu .goal-trigger,
.goal-menu .menu-trigger,
.goal-menu .header-pill-btn {
  height: 44px !important; /* 42–48px */
  width: 190px !important; /* 180–200px */
  min-width: 180px !important;
  max-width: 200px !important;
  padding: 0 14px !important;
  border: 1.5px solid #3B82F6 !important;
  border-radius: 12px !important; /* 10–14px */
  justify-content: space-between !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

.goal-menu .goal-trigger:hover,
.goal-menu .menu-trigger:hover,
.goal-menu .header-pill-btn:hover {
  border-color: #2563EB !important;
  background: #F8FAFC !important;
  color: #2563EB !important;
}

/* 5.2 EXPLORE */
.explore-menu .explore-trigger,
.explore-menu .menu-trigger,
.explore-menu .header-pill-btn {
  height: 44px !important; /* 42–48px */
  width: 120px !important; /* 110–130px */
  min-width: 110px !important;
  max-width: 130px !important;
  padding: 0 14px !important;
  border: 1.5px solid #3B82F6 !important;
  border-radius: 12px !important; /* 10–14px */
  justify-content: space-between !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

.explore-menu .explore-trigger:hover,
.explore-menu .menu-trigger:hover,
.explore-menu .header-pill-btn:hover {
  border-color: #2563EB !important;
  background: #F8FAFC !important;
  color: #2563EB !important;
}

/* 5.3 LANGUAGE */
.language-menu .language-trigger,
.language-menu .menu-trigger,
.language-menu .header-pill-btn {
  height: 44px !important; /* 42–48px */
  width: 66px !important; /* 60–70px */
  min-width: 60px !important;
  max-width: 70px !important;
  padding: 0 10px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important; /* 10–14px */
  justify-content: space-between !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

.language-menu .language-trigger:hover,
.language-menu .menu-trigger:hover,
.language-menu .header-pill-btn:hover {
  border-color: #3B82F6 !important;
  background: #F8FAFC !important;
}

/* 5.4 TIME */
.live-time {
  height: 44px !important; /* 42–48px */
  width: 78px !important; /* 70–85px */
  min-width: 70px !important;
  max-width: 85px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important; /* 8–12px */
  background: #FFFFFF !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 0 8px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* 5.5 PROFILE AVATAR */
.profile-menu {
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.profile-avatar-btn {
  width: 42px !important; /* 38–44px */
  height: 42px !important; /* 38–44px */
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7A8754 0%, #B85D19 100%) !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}

.profile-avatar-btn:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14) !important;
}

.avatar-letter {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

/* 5.6 MAIN NAVIGATION MENU (HAMBURGER) */
.header-menu-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.header-menu-btn {
  width: 44px !important; /* 42–48px */
  height: 44px !important; /* 42–48px */
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important; /* 10–14px */
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.header-menu-btn:hover {
  border-color: #3B82F6 !important;
  background: #F8FAFC !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12) !important;
}

.header-menu-btn span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #334155 !important;
  border-radius: 1px !important;
  transition: all 0.2s ease !important;
}

.category-nav {
  position: relative !important;
  width: 100% !important;
  height: 52px !important; /* 48–56px */
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  z-index: 90 !important;
  margin: 0 !important;
  padding: 8px 20px !important; /* 8–12px top/bottom, 16–24px horizontal */
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.nav-inner {
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important; /* 6–10px */
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #CBD5E1 transparent !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.nav-inner::-webkit-scrollbar {
  height: 3px !important;
}

.nav-inner::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 4px !important;
}

.nav-inner a {
  height: 36px !important; /* 32–38px */
  padding: 0 14px !important; /* 12–16px */
  border-radius: 9px !important; /* 8–10px */
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
}

.nav-inner a:hover {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background: #EFF6FF !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

.nav-inner a.active,
.nav-inner a[data-active="true"] {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background: #EFF6FF !important;
  font-weight: 700 !important;
}

.nav-status {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #1E293B !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 4px 10px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
}

/* ==========================================================================
   UNIFIED 16-FIELD SEARCH RESULTS & DETAILS MODAL STYLING
   ========================================================================== */

#searchView {
  width: 100% !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  padding: 0 0 80px !important;
}

#searchView .inner-page {
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 36px) !important;
  box-sizing: border-box !important;
}

#searchView .page-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  padding: 32px 0 24px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  flex-wrap: wrap !important;
}

#searchView .page-top h1 {
  font-size: clamp(26px, 3.2vw, 36px) !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}

#searchView .page-top h1 em {
  font-style: normal !important;
  color: #15803D !important;
}

#searchView .page-top .eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #15803D !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
}

#searchView .page-top .section-subtitle {
  font-size: 14px !important;
  color: #64748B !important;
  margin: 0 !important;
  max-width: 680px !important;
  line-height: 1.5 !important;
}

#searchView .result-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 999px !important;
  padding: 6px 8px 6px 18px !important;
  min-width: 320px !important;
  max-width: 480px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#searchView .result-search:focus-within {
  border-color: #15803D !important;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15) !important;
}

#searchView .result-search span {
  font-size: 16px !important;
  color: #64748B !important;
}

#searchView .result-search input {
  background: transparent !important;
  border: none !important;
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  outline: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#searchView .result-search input::placeholder {
  color: #94A3B8 !important;
}

#searchView .result-search button {
  background: #15803D !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(21, 128, 61, 0.25) !important;
}

#searchView .result-search button:hover {
  opacity: 0.92 !important;
  transform: scale(1.02) !important;
}

#searchView .breadcrumbs {
  margin: 18px 0 24px !important;
  font-size: 12.5px !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#searchView .breadcrumbs a {
  color: #64748B !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

#searchView .breadcrumbs a:hover {
  color: #15803D !important;
}

/* Category Filter Tabs */
#searchView .result-tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

#searchView .result-tabs button {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
}

#searchView .result-tabs button small {
  background: #F1F5F9 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

#searchView .result-tabs button:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

#searchView .result-tabs button.active {
  background: #15803D !important;
  color: #FFFFFF !important;
  border-color: #15803D !important;
}

#searchView .result-tabs button.active small {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

#searchView .result-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 18px !important;
  color: #64748B !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Results Main & Uniform Cards */
#searchView .results-main {
  width: 100% !important;
}

#searchView .search-results-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.result-card.search-uniform-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
  position: relative !important;
}

.result-card.search-uniform-card:hover {
  transform: translateY(-2px) !important;
  border-color: #94A3B8 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

.result-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.result-type {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
}

.result-type.amber { background: #FEF3C7 !important; color: #B45309 !important; border: 1px solid #FDE68A !important; }
.result-type.blue { background: #EFF6FF !important; color: #1D4ED8 !important; border: 1px solid #BFDBFE !important; }
.result-type.coral { background: #FEF2F2 !important; color: #B91C1C !important; border: 1px solid #FECACA !important; }
.result-type.teal { background: #F0FDF4 !important; color: #15803D !important; border: 1px solid #BBF7D0 !important; }

.result-info {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.result-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.result-icon.amber { background: #FEF3C7 !important; color: #B45309 !important; }
.result-icon.blue { background: #EFF6FF !important; color: #1D4ED8 !important; }
.result-icon.coral { background: #FEF2F2 !important; color: #B91C1C !important; }
.result-icon.teal { background: #F0FDF4 !important; color: #15803D !important; }

.result-details {
  flex: 1 !important;
  min-width: 0 !important;
}

.result-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 4px !important;
  line-height: 1.35 !important;
}

.result-sub {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #15803D !important;
  margin: 0 0 6px !important;
  line-height: 1.4 !important;
}

.result-desc {
  font-size: 13.5px !important;
  color: #475569 !important;
  margin: 0 0 10px !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.result-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
}

.result-meta span {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

.result-actions-row {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid #F1F5F9 !important;
}

.result-action.primary-result-btn {
  background: #15803D !important;
  color: #FFFFFF !important;
  border: 1px solid #14532D !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(21, 128, 61, 0.2) !important;
  transition: all 0.2s ease !important;
}

.result-action.primary-result-btn:hover {
  background: #166534 !important;
  transform: translateY(-1px) !important;
}

.official-portal-btn {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.official-portal-btn:hover {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}

.related-searches {
  margin-top: 36px !important;
  padding: 20px 24px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.related-searches strong {
  font-size: 13px !important;
  color: #0F172A !important;
  margin-right: 6px !important;
}

.related-searches button {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.related-searches button:hover {
  background: #F0FDF4 !important;
  color: #15803D !important;
  border-color: #15803D !important;
}

@media (max-width: 768px) {
  #searchView .page-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  #searchView .result-search {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .result-info {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .result-actions-row {
    justify-content: stretch !important;
  }
  .result-action.primary-result-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   CAMPNOVA MENTORS & CAPTCHA STYLING
   ========================================================================== */

/* 1. Header Glow Box */
.mentors-header-glow-box {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(119, 172, 59, 0.38) !important;
  box-shadow: 0 0 18px rgba(119, 172, 59, 0.12), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  text-align: left !important;
  transition: all 0.25s ease !important;
}

.mentors-header-glow-box:hover {
  border-color: rgba(119, 172, 59, 0.55) !important;
  box-shadow: 0 0 24px rgba(119, 172, 59, 0.18), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* 2. LinkedIn-Style Mentor Cards */
.mentor-linkedin-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: center !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  cursor: pointer !important;
}

.mentor-linkedin-card:hover {
  transform: translateY(-4px) !important;
  border-color: #77AC3B !important;
  box-shadow: 0 8px 24px rgba(119, 172, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.mentor-card-details-btn:hover {
  background: #F8FAFC !important;
  border-color: #77AC3B !important;
  color: #15803D !important;
}

.mentor-card-details-btn:hover span:last-child {
  transform: translateX(4px) !important;
  transition: transform 0.2s ease !important;
}

/* Mentor Social Media Icon Buttons */
.mentor-social-icons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.mentor-social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.mentor-social-icon-btn.instagram {
  background: #FFF0F6;
  border-color: #FFD6E7;
  color: #E1306C;
}

.mentor-social-icon-btn.instagram:hover:not(.is-disabled) {
  background: #E1306C;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(225, 48, 108, 0.3);
}

.mentor-social-icon-btn.linkedin {
  background: #EBF4FB;
  border-color: #C8E1F8;
  color: #0A66C2;
}

.mentor-social-icon-btn.linkedin:hover:not(.is-disabled) {
  background: #0A66C2;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.3);
}

.mentor-social-icon-btn.facebook {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1877F2;
}

.mentor-social-icon-btn.facebook:hover:not(.is-disabled) {
  background: #1877F2;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.3);
}

.mentor-social-icon-btn.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  filter: grayscale(70%) !important;
}

#modalMentorMoreDetailsToggle:hover {
  color: #15803D !important;
}
#modalMentorMoreDetailsToggle:focus {
  outline: none;
}

/* 3. CAPTCHA Challenge Styling */
#captchaSvgContainer svg {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

#captchaCodeInput {
  text-align: center !important;
  letter-spacing: 3px !important;
  font-family: monospace, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* 4. Footer Attribution Text */
.footer-attribution-wrap {
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid #E2E8F0 !important;
}

.footer-attribution-text {
  font-size: 12.5px !important;
  color: #64748B !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  display: inline-block !important;
}

/* ==========================================================================
   THECAMPUSNOVA DEDICATED MOBILE-ONLY RESPONSIVE SYSTEM (<= 767px)
   ABSOLUTE ISOLATION: DESKTOP LAYOUT (>= 768px) REMAINS 100% UNTOUCHED
   ========================================================================== */
@media (max-width: 767px) {
  /* 1. Global Box-Sizing & Viewport Boundary */
  *, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100%;
  }

  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  #app,
  .site-main,
  .view,
  .inner-page,
  .home-view-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Consistent Global Section Spacing & Side Padding (14px - 18px) */
  /* Consistent Global Section Spacing & Side Padding (10px - 12px for maximum usable width) */
  .section,
  .hero-section,
  .goal-section,
  .stream-section,
  .colleges-section,
  .domain-section,
  .internship-hub-section,
  .stats-strip,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(10px, 2.8vw, 12px) !important;
    padding-right: clamp(10px, 2.8vw, 12px) !important;
    box-sizing: border-box !important;
  }

  /* 2. Topline Strip */
  .topline {
    font-size: 11px !important;
    padding: 6px 14px !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }
  .topline-right {
    display: none !important;
  }

  /* 3. Mobile Navbar - Static logo, single horizontal row for controls, zero overlap */
  /* 3. Mobile Navbar - Static logo, single horizontal row for controls, zero overlap */
  .site-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px clamp(10px, 2.8vw, 12px) 10px clamp(10px, 2.8vw, 12px) !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 0 !important;
    background: #FFFFFF !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Row 1 Left: Brand Logo (STATIC, small, compact, directly to the left of Explore) */
  .brand.header-brand {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    margin-right: 8px !important; /* Small clean gap between logo and Explore button */
    padding: 0 !important;
    height: 38px !important;
  }

  .header-logo-img {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Row 1 Right: [ Explore ] [ EN ] [ Login ] [ Menu ] in the SAME horizontal header row */
  .header-right-controls {
    order: 2 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  /* Hide Desktop-Only Menus from Header Bar */
  .goal-menu,
  .live-time,
  .header-menu-panel {
    display: none !important;
  }

  /* ========================================================================
     EXPLORE BUTTON: COMPACT ALIGNMENT IN SINGLE ROW
     ======================================================================== */
  .explore-menu {
    display: inline-flex !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .explore-menu .explore-trigger {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #93C5FD !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08) !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .explore-menu .explore-trigger:active,
  .explore-menu.open .explore-trigger {
    background: #EFF6FF !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
  }

  .explore-menu .explore-trigger .pill-icon.green-icon {
    width: 14px !important;
    height: 14px !important;
    color: #16A34A !important;
    fill: #16A34A !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  .explore-menu .explore-trigger .pill-btn-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    display: inline !important;
    line-height: 1 !important;
  }

  .explore-menu .explore-trigger .pill-caret {
    width: 10px !important;
    height: 10px !important;
    color: #64748B !important;
    display: block !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
  }

  .explore-menu.open .explore-trigger .pill-caret {
    transform: rotate(180deg) !important;
    color: #2563EB !important;
  }

  /* ========================================================================
     16-FIELD EXPLORE DROPDOWN: MATCHING EXACT REFERENCE HERO CONTENT BOX
     Starts at same left position, ends at same right position, generous width
     ======================================================================== */
  .explore-panel,
  .menu-panel.explore-panel,
  .custom-menu .explore-panel,
  .explore-menu .explore-panel {
    position: fixed !important;
    top: clamp(54px, 8.5vh, 62px) !important;
    left: clamp(14px, 4vw, 18px) !important;
    right: clamp(14px, 4vw, 18px) !important;
    width: auto !important;
    max-width: calc(100vw - 2 * clamp(14px, 4vw, 18px)) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: min(440px, calc(100dvh - 75px)) !important;
    margin: 0 auto !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
    z-index: 100000 !important;
    padding: 12px 12px 14px 12px !important;
    display: none !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  .explore-menu.open .explore-panel,
  .custom-menu.open .explore-panel,
  .explore-menu.open #explorePanel,
  .custom-menu.open #explorePanel {
    display: block !important;
  }

  .explore-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4px 10px 4px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  .explore-panel-header span {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #15803D !important;
  }

  .explore-panel-header small {
    font-size: 11px !important;
    color: #64748B !important;
    font-weight: 700 !important;
    background: #F1F5F9 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
  }

  .explore-bg-slider {
    display: none !important;
  }

  /* Balanced 2-Column Grid (8 rows of 2, generous readable width matching reference box) */
  .explore-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .explore-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
    overflow: hidden !important;
  }

  .explore-item:active {
    background: #F0FDF4 !important;
    border-color: #86EFAC !important;
  }

  .exp-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 13px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    flex-shrink: 0 !important;
  }

  .exp-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .exp-text strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Compact secondary detail on mobile */
  .exp-text small {
    display: none !important;
  }

  /* ========================================================================
     LANGUAGE BUTTON (EN) - COMFORTABLE TAP TARGET & SINGLE ROW ALIGNMENT
     ======================================================================== */
  .language-menu {
    display: inline-flex !important;
    position: relative !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  .language-menu .header-pill-btn {
    width: auto !important;
    min-width: 40px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    box-sizing: border-box !important;
  }
  .language-menu .pill-btn-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
  }
  .language-menu .pill-caret {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    color: #64748B !important;
  }

  /* Language Dropdown Panel */
  .language-menu .language-panel {
    position: fixed !important;
    top: clamp(54px, 8.5vh, 62px) !important;
    right: 10px !important;
    left: auto !important;
    width: min(290px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 80px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 14px !important;
    z-index: 100000 !important;
    background: #FFFFFF !important;
    padding: 10px !important;
    display: none !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .language-menu.open .language-panel {
    display: flex !important;
  }

  .language-panel-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 6px 8px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #475569 !important;
  }

  .language-panel-header small {
    font-size: 10.5px !important;
    color: #15803D !important;
    font-weight: 800 !important;
  }

  .language-panel-scroll {
    max-height: min(250px, calc(100dvh - 170px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 !important;
  }

  .lang-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  .lang-item.active {
    background: #F0FDF4 !important;
    color: #15803D !important;
    font-weight: 800 !important;
  }

  .lang-item-code {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748B !important;
  }

  .lang-item.active .lang-item-code {
    color: #15803D !important;
  }

  .language-others-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    border-top: 1px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #15803D !important;
    cursor: pointer !important;
  }

  /* ========================================================================
     LOGIN BUTTON: INCREASED USABLE WIDTH & EASY TO TAP
     ======================================================================== */
  .profile-menu {
    display: inline-flex !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-login-btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Profile Avatar Button */
  .profile-avatar-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* ========================================================================
     HAMBURGER MENU BUTTON: COMFORTABLE TOUCH TARGET
     ======================================================================== */
  .header-menu-wrap {
    display: inline-flex !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Row 2: Full-Width Dedicated Mobile Search Bar */
  .header-search-wrap {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 6px 0 0 0 !important;
  }

  .ai-entry {
    width: 100% !important;
    height: 42px !important;
    border-radius: 10px !important;
    padding: 0 8px 0 34px !important;
    background: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .ai-entry .search-svg {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: #64748B !important;
  }

  .ai-entry input {
    width: 100% !important;
    height: 100% !important;
    font-size: 13.5px !important;
    color: #0F172A !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
  }

  .ai-entry input::placeholder {
    font-size: 12.5px !important;
    color: #64748B !important;
  }

  .ai-trigger {
    height: 30px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
  }

  .ai-button-label {
    display: inline !important;
    font-size: 11px !important;
  }

  /* 4. Mobile Navigation Drawer & Backdrop */
  .mobile-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }

  .mobile-drawer-backdrop.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: min(84vw, 320px) !important;
    height: 100% !important;
    height: 100dvh !important;
    background: #FFFFFF !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.22) !important;
    z-index: 99999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-drawer.open {
    transform: translateX(0) !important;
  }

  .drawer-nav-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    text-decoration: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
  }

  .drawer-nav-item:active {
    background: #F1F5F9 !important;
    color: #15803D !important;
  }

  /* 5. Category Navigation Bar (Pill Carousel) - Starts clearly below navbar */
  .category-nav {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 8px clamp(10px, 2.8vw, 12px) !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    position: relative !important;
    clear: both !important;
    z-index: 90 !important;
    margin-top: 0 !important;
  }

  .nav-inner {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
    width: 100% !important;
  }

  .nav-inner::-webkit-scrollbar {
    display: none !important;
  }

  .nav-inner a {
    flex-shrink: 0 !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-status {
    display: none !important;
  }

  /* 6. Hero Section */
  .hero-section {
    padding: 20px clamp(14px, 4vw, 18px) 24px clamp(14px, 4vw, 18px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-copy .eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #15803D !important;
    margin: 0 !important;
  }

  .hero-rotator-h1,
  .hero-rotator-h1 .hero-h1-slide {
    font-size: clamp(1.45rem, 5.5vw, 1.95rem) !important;
    line-height: 1.25 !important;
    min-height: 2.5em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
  }

  .hero-text {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin: 0 !important;
  }

  .hero-search {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 4px 0 12px !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }

  .hero-search input {
    flex: 1 1 auto !important;
    font-size: 13.5px !important;
    min-width: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #0F172A !important;
  }

  .hero-search input::placeholder {
    font-size: 12.5px !important;
    color: #64748B !important;
  }

  .hero-search button#searchButton {
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .quick-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    margin-top: 2px !important;
  }

  .quick-links span {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #64748B !important;
  }

  .quick-links button {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
    min-height: 28px !important;
    background: #F1F5F9 !important;
    color: #1E293B !important;
    border: 1px solid #CBD5E1 !important;
  }

  /* 7. College Discovery Card */
  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .hero-ad-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  }

  .hero-ad-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
  }

  .hero-ad-badge {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }

  .hero-ad-verified {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .hero-ad-kicker {
    font-size: 10.5px !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
    color: #15803D !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  .hero-ad-title {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
    color: #0F172A !important;
  }

  .hero-ad-desc {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #475569 !important;
    margin: 0 0 12px !important;
  }

  .hero-ad-highlights {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .hero-ad-metric {
    padding: 8px 6px !important;
    text-align: center !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
  }

  .hero-ad-metric strong {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    display: block !important;
  }

  .hero-ad-metric small {
    font-size: 10px !important;
    color: #64748B !important;
  }

  .hero-ad-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 14px !important;
  }

  .hero-ad-tags span {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    background: #EEF2F6 !important;
    color: #1E293B !important;
  }

  .hero-ad-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .hero-ad-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    color: #15803D !important;
  }

  .hero-ad-btn {
    width: 100% !important;
    height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 8. Mobile Stats Section */
  .stats-strip {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 14px clamp(14px, 4vw, 18px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    margin: 16px auto !important;
  }

  .stats-strip > div:not(.strip-quote) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    text-align: center !important;
    min-height: 72px !important;
  }

  .stats-strip > div:not(.strip-quote) strong {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.1 !important;
  }

  .stats-strip > div:not(.strip-quote) small {
    font-size: 11.5px !important;
    color: #64748B !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
  }

  .strip-quote {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #475569 !important;
    padding: 8px 12px !important;
    margin-top: 4px !important;
    line-height: 1.45 !important;
  }

  /* 9. Goal Grid */
  .goal-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .goal-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .goal-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 14px 12px !important;
    min-height: 105px !important;
    border-radius: 12px !important;
    text-align: left !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .goal-symbol {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .goal-card strong {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
    display: block !important;
    margin-bottom: 2px !important;
  }

  .goal-card small {
    font-size: 11px !important;
    color: #64748B !important;
    line-height: 1.35 !important;
    display: block !important;
  }

  .tiny-arrow {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 14px !important;
    color: #94A3B8 !important;
  }

  /* 10. Education Streams */
  .stream-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .section-heading {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    margin-bottom: 16px !important;
  }

  .section-heading h2 {
    font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .step-count {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #15803D !important;
  }

  .stream-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .stream-list {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }

  .stream-list::-webkit-scrollbar {
    display: none !important;
  }

  .stream-item {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .stream-detail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* ========================================================================
     TOP 20 COLLEGES IN INDIA (MOBILE ONLY: COMPACT HEIGHT & WIDER VIEWPORT)
     ======================================================================== */
  .colleges-section,
  #homeCollegesSection {
    padding-left: clamp(10px, 2.8vw, 12px) !important;
    padding-right: clamp(10px, 2.8vw, 12px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .colleges-section .college-grid,
  #topCollegeGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .top-college-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .top-college-card .college-thumb {
    height: 125px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .top-college-card .college-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .top-college-card .top-college-body {
    padding: 12px 14px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
  }

  .top-college-card .top-college-body h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    margin: 0 0 2px 0 !important;
  }

  .top-college-card .top-college-body > small {
    font-size: 11.5px !important;
    color: #64748B !important;
    margin-bottom: 5px !important;
    display: block !important;
  }

  .top-college-card .college-rating {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #334155 !important;
    margin: 2px 0 4px 0 !important;
  }

  .top-college-card .college-course,
  .top-college-card .college-placement {
    font-size: 12px !important;
    color: #1E293B !important;
    margin: 2px 0 !important;
    line-height: 1.3 !important;
  }

  .top-college-card .college-view {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 8px !important;
    background: #65A30D !important;
    color: #FFFFFF !important;
    border: none !important;
    cursor: pointer !important;
  }

  .top-college-card .further-details-trigger {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 6px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    cursor: pointer !important;
  }

  /* ========================================================================
     PLACEMENT INTELLIGENCE & COMPANY PREP (MOBILE: FULL VISIBILITY & NO CLIPPING)
     ======================================================================== */
  .placement-section {
    padding-left: clamp(10px, 2.8vw, 12px) !important;
    padding-right: clamp(10px, 2.8vw, 12px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .placement-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
  }

  .placement-filter-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .placement-pill-btn {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .placement-college-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  .company-prep-grid,
  #placementCompanyGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .company-prep-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
  }

  .company-card-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .company-title-wrap h3 {
    font-size: 16px !important;
    margin: 0 !important;
    color: #0F172A !important;
  }

  .company-title-wrap small {
    font-size: 11.5px !important;
    color: #64748B !important;
  }

  .priority-tag {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .company-meta-block strong {
    font-size: 11px !important;
    display: block !important;
    margin-bottom: 3px !important;
    color: #475569 !important;
  }

  .company-meta-block span {
    font-size: 12px !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    color: #1E293B !important;
  }

  .company-skill-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .company-skill-tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }

  .quant-priority-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    font-size: 11.5px !important;
    width: 100% !important;
  }

  .quant-tag {
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .company-card-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 4px !important;
    width: 100% !important;
  }

  .prep-guide-btn {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .reaction-btn-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .reaction-pill-btn {
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
  }

  /* 11. Internship / Opportunity Cards */
  .internship-hub-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .internship-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .internship-filter-pills {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    width: 100% !important;
  }

  .internship-filter-pills::-webkit-scrollbar {
    display: none !important;
  }

  .internship-pill-btn {
    flex-shrink: 0 !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  .internship-selects-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .internship-select {
    width: 100% !important;
    height: 40px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
  }

  .internship-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .internship-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .internship-card-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 2px !important;
  }

  .internship-company-badge {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .internship-company-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .internship-role-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
  }

  .internship-company-name {
    font-size: 12px !important;
    color: #64748B !important;
    font-weight: 600 !important;
  }

  .internship-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  .stipend-tag {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #15803D !important;
    background: #DCFCE7 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }

  .workmode-tag,
  .duration-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #F1F5F9 !important;
    color: #334155 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }

  .internship-details-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    border: 1px solid #E2E8F0 !important;
  }

  .internship-card-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  .deadline-chip {
    font-size: 11.5px !important;
    color: #64748B !important;
  }

  .internship-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .internship-details-btn {
    height: 40px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .internship-portal-btn {
    height: 40px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  /* 12. Courses Discovery Page & Cards */
  .courses-top-nav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .courses-back-home-link {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  .courses-top-eyebrow {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 60% !important;
  }

  .heading-flank-visual-row {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .heading-side-visual {
    display: none !important;
  }

  .courses-heading-wrap {
    width: 100% !important;
    text-align: center !important;
  }

  .courses-heading-wrap h1 {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
  }

  .courses-search-card {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
  }

  .courses-search-row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .courses-search-box {
    width: 100% !important;
    height: 42px !important;
  }

  .courses-search-box input {
    font-size: 14px !important;
    width: 100% !important;
  }

  .courses-filter-chips {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    width: 100% !important;
  }

  .courses-filter-chips::-webkit-scrollbar {
    display: none !important;
  }

  .courses-filter-chip {
    flex-shrink: 0 !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  .category-accordion-header {
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .category-header-left {
    width: 100% !important;
    gap: 10px !important;
  }

  .category-header-right {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .category-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .course-group-wrapper {
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .course-group-header-label {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  .subfields-accordion-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .subfield-card {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .subfield-trigger {
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .subfield-name {
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }

  .subfield-tagline {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .subfield-direct-view-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 32px !important;
    margin-right: 8px !important;
  }

  .subfield-programs-container {
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .program-item-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
  }

  .program-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .program-title-wrap {
    width: 100% !important;
  }

  .program-title {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    color: #0F172A !important;
    word-wrap: break-word !important;
  }

  .program-meta-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 4px !important;
  }

  .program-badge {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
  }

  .program-header-row > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .program-toggle-detail-btn {
    width: 100% !important;
    height: 38px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 8px !important;
  }

  .program-detail-panel {
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #F8FAFC !important;
  }

  .program-quick-metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .program-metric-box {
    padding: 8px 10px !important;
  }

  .program-explore-colleges-btn {
    width: 100% !important;
    height: 42px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
  }

  /* 13. Full Roadmap & 19-Field Detail View - Wider Content Utilization */
  #detailView .inner-page,
  #coursesView,
  #collegesView,
  #domainsView,
  #examsView,
  #materialsView,
  #reviewsView,
  #rankingsView,
  #careersView,
  #placementsView,
  #jobsView,
  #internshipsView,
  #admissionsView,
  #scholarshipsView,
  #facilitiesView,
  #entrancePrepView,
  #reviewsCompareView,
  #mentorsView,
  #eventsView,
  #newsView,
  .inner-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(10px, 2.8vw, 12px) !important;
    padding-right: clamp(10px, 2.8vw, 12px) !important;
    box-sizing: border-box !important;
  }

  #detailView .detail-heading {
    text-align: left !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  #detailView .detail-heading h1 {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    text-align: left !important;
    line-height: 1.25 !important;
    margin: 0 0 8px 0 !important;
  }

  #detailView .section-subtitle,
  #detailView .detail-heading p {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 4px 0 12px 0 !important;
    display: block !important;
  }

  #detailView .detail-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  #detailView .detail-tags span {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
  }

  #detailView .detail-block {
    padding: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #detailView .detail-block h2 {
    font-size: 17px !important;
  }

  #detailView .detail-block h3 {
    font-size: 15.5px !important;
  }

  #detailView .overview-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #detailView .year-tabs {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  #detailView .year-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #detailView .year-tabs button {
    flex: 1 0 auto !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    min-height: 36px !important;
  }

  .subject-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .cn-subject-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    border-radius: 10px !important;
  }

  /* 14. Colleges Discovery & Custom Filters */
  .colleges-discovery-filter-card {
    padding: 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
  }

  .colleges-filter-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .colleges-search-input-wrap {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    flex: none !important;
  }

  .colleges-custom-dropdown-wrap {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    position: relative !important;
  }

  .colleges-dropdown-trigger {
    width: 100% !important;
    height: 42px !important;
  }

  .colleges-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 200 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  }

  .colleges-filter-reset-btn {
    width: 100% !important;
    height: 40px !important;
    justify-content: center !important;
  }

  /* 15. Search & Explore Results Page */
  #searchView .page-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #searchView .page-top h1 {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    margin: 0 !important;
  }

  #searchView .result-search {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }

  #searchView .result-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  #searchView .result-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #searchView .result-tabs button {
    flex-shrink: 0 !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .result-card.search-uniform-card {
    padding: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .result-actions-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .primary-result-btn {
    width: 100% !important;
    height: 40px !important;
    justify-content: center !important;
  }

  /* 16. All 19 Module Cards & Grids (Single-Column Mobile Stack) */
  .college-grid,
  .domain-grid,
  .exam-grid,
  .material-grid,
  .review-grid,
  .mentors-grid,
  .grid-cards,
  .events-grid,
  .news-grid,
  .pathways-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .college-card,
  .domain-card,
  .mentor-linkedin-card,
  .material-card,
  .event-card,
  .news-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .college-card-img,
  .mentor-card-img,
  .event-card-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  /* Horizontal Filter Pills Bars */
  .career-priority-bar,
  .sub-filter-row,
  .filter-pills-bar,
  .tabs-header {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 4px 0 8px 0 !important;
    width: 100% !important;
  }

  .career-priority-bar::-webkit-scrollbar,
  .sub-filter-row::-webkit-scrollbar,
  .filter-pills-bar::-webkit-scrollbar,
  .tabs-header::-webkit-scrollbar {
    display: none !important;
  }

  .career-priority-pill,
  .filter-pill {
    flex-shrink: 0 !important;
    min-height: 38px !important;
    white-space: nowrap !important;
  }

  /* 17. Mobile Forms & Touch Optimization */
  .modal-input,
  .further-details-form input,
  .further-details-form select,
  .user-login-form input,
  .user-signup-form input {
    height: 44px !important;
    font-size: 16px !important; /* Prevents auto-zoom on mobile safari/chrome */
    border-radius: 8px !important;
    width: 100% !important;
  }

  .primary-button,
  .secondary-button,
  .colleges-filter-clear-btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .further-details-form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 18. Mobile Modals / Bottom Sheets */
  .further-details-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 10000 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .further-details-modal.open {
    display: flex !important;
  }

  .further-details-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90dvh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
    border-bottom: none !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .compact-dialog {
    width: 100% !important;
  }

  /* 19. Tables & Data Responsiveness */
  .table-responsive-wrapper,
  .table-scroll-container,
  .comparison-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 12px !important;
  }

  /* 20. Site Footer */
  .site-footer {
    padding: 28px clamp(10px, 2.8vw, 12px) 20px clamp(10px, 2.8vw, 12px) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .footer-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 14px 0 0 0 !important;
  }

  /* 21. UNIFIED 16-FIELD MOBILE WIDTH & CARD CONTAINER CONSISTENCY */
  #coursesView > .inner-page,
  #collegesView > .inner-page,
  #domainsView > .inner-page,
  #examsView > .inner-page,
  #materialsView > .inner-page,
  #reviewsView > .inner-page,
  #rankingsView > .inner-page,
  #careersView > .inner-page,
  #placementsView > .inner-page,
  #jobsView > .inner-page,
  #internshipsView > .inner-page,
  #admissionsView > .inner-page,
  #scholarshipsView > .inner-page,
  #facilitiesView > .inner-page,
  #entrancePrepView > .inner-page,
  #reviewsCompareView > .inner-page,
  #searchView > .inner-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Unified Grid Containers across 16 Fields */
  .courses-discovery-container,
  .colleges-cards-grid,
  .college-grid,
  .domains-cards-grid,
  .exams-cards-grid,
  .materials-cards-grid,
  .reviews-grid,
  .rankings-grid,
  .careers-grid,
  .placements-grid,
  .jobs-grid,
  .internships-grid,
  .admissions-grid,
  .scholarships-grid,
  .facilities-grid,
  .prep-cards-grid,
  .compare-cards-grid,
  .survey-split-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Unified Cards across all 16 Fields */
  .category-card-block,
  .colleges-discovery-filter-card,
  .college-card,
  .domain-card,
  .exam-card,
  .material-card,
  .review-card,
  .ranking-card,
  .career-card,
  .placement-card,
  .job-card,
  .internship-card,
  .admission-card,
  .scholarship-card,
  .facility-card,
  .prep-card,
  .compare-card,
  .cn-roadmap-block,
  .detail-block,
  .survey-left-col,
  .survey-right-col {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header triggers & expandable contents inside cards */
  .category-header-trigger {
    padding: 16px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .category-body-container {
    padding: 0 14px 16px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent any horizontal overflow from badges, tag pills, action rows */
  .category-programs-list,
  .program-subcard-item,
  .program-header-row,
  .course-badges-wrap,
  .internship-meta-row,
  .card-tags-row,
  .filter-pills-row,
  .action-buttons-group {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }

  .program-header-row > div {
    max-width: 100% !important;
    word-break: break-word !important;
  }
}

/* ==========================================================================
   SUB-BREAKPOINTS FOR COMPACT AND NARROW PHONES
   ========================================================================== */
@media (max-width: 480px) {
  .hero-ad-highlights {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .internship-selects-row {
    grid-template-columns: 1fr !important;
  }
  .program-header-row > div:last-child {
    grid-template-columns: 1fr !important;
  }
  .header-right-controls {
    gap: 6px !important;
  }
  .explore-menu .explore-trigger {
    padding: 0 8px !important;
    gap: 4px !important;
  }
  .header-login-btn {
    padding: 0 12px !important;
  }
}

@media (max-width: 360px) {
  .brand.header-brand {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    margin-right: 8px !important;
    height: 38px !important;
  }
  .header-logo-img {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    object-fit: contain !important;
  }
  .header-right-controls {
    gap: 4px !important;
  }
  .explore-menu .explore-trigger {
    padding: 0 6px !important;
    gap: 3px !important;
  }
  .explore-menu .explore-trigger .pill-btn-text {
    font-size: 11px !important;
  }
  .explore-menu .explore-trigger .pill-icon.green-icon {
    width: 13px !important;
    height: 13px !important;
  }
  .language-menu .header-pill-btn {
    min-width: 38px !important;
    padding: 0 5px !important;
    font-size: 11px !important;
  }
  .header-login-btn {
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }
  .header-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  .explore-panel,
  .menu-panel.explore-panel,
  .custom-menu .explore-panel,
  .explore-menu .explore-panel {
    left: 14px !important;
    right: 14px !important;
    max-width: calc(100vw - 28px) !important;
    padding: 10px 10px 12px 10px !important;
    border-radius: 16px !important;
  }
  .explore-item {
    padding: 5px 6px !important;
    min-height: 36px !important;
    gap: 5px !important;
  }
  .exp-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
  .exp-text strong {
    font-size: 11px !important;
  }
  .goal-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-strip {
    grid-template-columns: 1fr !important;
  }
  .hero-ad-highlights {
    grid-template-columns: 1fr !important;
  }
  .internship-card-actions {
    grid-template-columns: 1fr !important;
  }
  .program-quick-metrics-grid {
    grid-template-columns: 1fr !important;
  }
}