:root {
  --showcase-primary: #16824f;
  --showcase-primary-dark: #10663d;
  --showcase-primary-soft: #e9f7ef;
  --showcase-secondary: #f4f7f4;
  --showcase-surface: #ffffff;
  --showcase-surface-alt: #f8fbf8;
  --showcase-border: #dfe9e2;
  --showcase-border-strong: #c7d8cb;
  --showcase-text: #173326;
  --showcase-text-soft: #5f786b;
  --showcase-shadow: 0 18px 45px rgba(19, 53, 35, 0.08);
  --showcase-shadow-soft: 0 10px 30px rgba(19, 53, 35, 0.06);
  --showcase-radius-xl: 28px;
  --showcase-radius-lg: 22px;
  --showcase-radius-md: 16px;
  --showcase-radius-sm: 12px;
}

body {
  background:
    radial-gradient(circle at top left, rgba(22, 130, 79, 0.08), transparent 26%),
    linear-gradient(180deg, #f7faf7 0%, #eff5ef 100%);
  color: var(--showcase-text);
}

.ilearnzed-navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(26, 72, 42, 0.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(22, 42, 28, 0.05);
}

.ilearnzed-navbar .navbar-brand,
.ilearnzed-navbar .nav-link,
.ilearnzed-navbar .dropdown-toggle {
  color: var(--showcase-text) !important;
}

.ilearnzed-navbar .nav-link.active,
.ilearnzed-navbar .nav-link:hover {
  color: var(--showcase-primary) !important;
}

.courses-page,
.student-dashboard-page,
.notifications-page,
.enrollments-container {
  position: relative;
}

.courses-page::before,
.student-dashboard-page::before,
.notifications-page::before,
.enrollments-container::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 220px;
  background: linear-gradient(180deg, rgba(22, 130, 79, 0.08), rgba(22, 130, 79, 0));
  pointer-events: none;
}

.courses-page {
  background: transparent !important;
  padding-bottom: 5rem;
}

.courses-hero {
  background: transparent !important;
  padding: 2.25rem 0 1.5rem !important;
}

.courses-hero::before {
  opacity: 0;
}

.hero-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 247, 240, 0.98));
  border: 1px solid rgba(22, 130, 79, 0.12);
  border-radius: 32px;
  box-shadow: var(--showcase-shadow);
  text-align: left !important;
  padding: 2.25rem !important;
}

.hero-title,
.courses-page .hero-title {
  color: #173326 !important;
  font-size: clamp(2.4rem, 4vw, 3.5rem) !important;
  line-height: 1.05;
}

.hero-subtitle,
.courses-page .hero-subtitle {
  color: var(--showcase-text-soft) !important;
  max-width: 760px;
  margin: 0 0 1.5rem !important;
}

.stats-bar {
  justify-content: flex-start !important;
}

.stat-item {
  background: #fff !important;
  color: var(--showcase-text) !important;
  border: 1px solid var(--showcase-border) !important;
  box-shadow: var(--showcase-shadow-soft);
}

.stat-item i {
  color: var(--showcase-primary) !important;
}

.search-wrapper {
  background: #fff !important;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--showcase-shadow-soft);
}

.search-input,
.filter-select,
.tab-pill,
.modal-search input {
  font-family: 'Inter', system-ui, sans-serif !important;
}

.filters-bar,
.secondary-filters,
.filter-group.level-tabs {
  background: transparent !important;
}

.tab-pill,
.filter-select {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 999px !important;
  color: var(--showcase-text) !important;
  box-shadow: none !important;
}

.tab-pill.active,
.tab-pill[style*="background: #10b45c"] {
  background: var(--showcase-primary) !important;
  color: #fff !important;
  border-color: var(--showcase-primary) !important;
}

.courses-content .course-card,
.enrollments-container .course-card,
.student-dashboard-page .course-card,
.revision-hero + .container .item-card,
.revision-hero + .container .resource-card-clean,
.notifications-page .notification-card,
.messenger-container .conversation-panel,
.messenger-container .chat-panel,
.main-container .post-card,
.main-container .create-post,
.main-container .latest-news-card,
.main-container .trending-section,
.main-container .suggested-peers-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(24, 74, 45, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: var(--showcase-shadow-soft) !important;
}

.courses-content .course-card:hover,
.student-dashboard-page .course-card:hover,
.enrollments-container .course-card:hover,
.revision-hero + .container .item-card:hover,
.revision-hero + .container .resource-card-clean:hover,
.notifications-page .notification-card:hover,
.main-container .post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--showcase-shadow) !important;
}

.courses-content .course-card img,
.enrollments-container .course-card img,
.revision-hero + .container .preview-image,
.main-container .post-media,
.main-container .post-video {
  border-radius: 20px 20px 0 0;
}

.courses-content .course-card-body,
.enrollments-container .course-card-body,
.student-dashboard-page .course-card-body,
.revision-hero + .container .resource-card-content {
  padding: 1.1rem 1.2rem 1.25rem !important;
}

.courses-page .cta-banner,
.courses-page .newsletter-card,
.student-dashboard-page .dashboard-header,
.student-dashboard-page .info-banner,
.revision-hero,
.notifications-page .notifications-wrapper,
.enrollments-header,
.messenger-container {
  border-radius: 28px !important;
  border: 1px solid rgba(22, 130, 79, 0.12) !important;
  box-shadow: var(--showcase-shadow) !important;
}

.courses-page .cta-banner,
.student-dashboard-page .dashboard-header,
.revision-hero {
  background:
    radial-gradient(circle at top right, rgba(22, 130, 79, 0.16), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #edf7ef 100%) !important;
}

.courses-page .btn,
.courses-page .btn-primary,
.student-dashboard-page .btn-dashboard-action.btn-primary,
.student-dashboard-page .btn-dashboard-action,
.revision-hero + .container .btn-modern.btn-primary-modern,
.notifications-page .btn,
.enrollments-container .action-btn,
.messenger-container .new-message-btn,
.messenger-container .send-button {
  border-radius: 999px !important;
  box-shadow: none !important;
}

.student-dashboard-page {
  background: transparent !important;
}

.student-dashboard-page .dashboard-header {
  padding: 2rem 2.25rem !important;
}

.student-dashboard-page .dashboard-header::before {
  height: 6px !important;
  background: linear-gradient(90deg, #0f6f40, #20a35d, #60c689) !important;
}

.student-dashboard-page .dashboard-title-section h1,
.student-dashboard-page .dashboard-card-header h5,
.notifications-page h1,
.enrollments-header h1,
.messenger-container h2 {
  color: var(--showcase-text) !important;
}

.student-dashboard-page .dashboard-card,
.student-dashboard-page .quick-actions a,
.student-dashboard-page .submission-item,
.student-dashboard-page .announcement-item {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(24, 74, 45, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: var(--showcase-shadow-soft) !important;
}

.student-dashboard-page .quick-actions a {
  padding: 1rem 1.1rem;
}

.revision-hero {
  margin-top: 1.25rem;
  padding: 2rem 0 1.5rem !important;
}

.revision-hero .container,
.revision-hero + .container {
  max-width: 1280px;
}

.revision-hero + .container .stats-grid,
.revision-hero + .container .resource-grid {
  gap: 1rem !important;
}

.revision-hero + .container .stat-card-clean,
.revision-hero + .container .tabs-container {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(24, 74, 45, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: var(--showcase-shadow-soft) !important;
}

.revision-hero + .container .tabs-nav {
  background: #eff6f0 !important;
  border-radius: 999px !important;
  padding: 0.4rem !important;
}

.revision-hero + .container .tab-btn,
.notifications-page .filter-pill {
  border-radius: 999px !important;
}

.revision-hero + .container .tab-btn.active {
  background: var(--showcase-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.main-container.feed-shell {
  gap: 20px !important;
  padding-top: 1.25rem !important;
}

.main-container .newsfeed-container > .container,
.main-container .latest-news-sidebar {
  width: 100%;
}

.main-container .create-post-form,
.main-container .post-header,
.main-container .post-actions,
.main-container .comment-form {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.main-container .create-post,
.main-container .post-card {
  overflow: hidden;
}

.main-container .create-post-btn,
.main-container .action-btn.liked,
.main-container .action-btn:hover {
  background: var(--showcase-primary) !important;
  color: #fff !important;
}

.main-container .post-author,
.main-container .post-content,
.main-container .post-time {
  color: var(--showcase-text) !important;
}

.main-container .post-time,
.main-container .suggested-peer-role,
.main-container .trending-topic-meta {
  color: var(--showcase-text-soft) !important;
}

.notifications-page {
  background: transparent !important;
  padding: 2rem 1rem 4rem !important;
}

.notifications-page .notifications-wrapper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 243, 0.98)) !important;
  max-width: 1100px;
  margin: 0 auto;
}

.notifications-page .notification-card.unread {
  border-left: 4px solid var(--showcase-primary) !important;
  background: #f4fcf6 !important;
}

.notifications-page .empty-state,
.enrollments-container .empty-state,
.revision-hero + .container .empty-state,
.messenger-container .chat-empty {
  background: #fbfdfb !important;
  border: 1px dashed var(--showcase-border-strong) !important;
  border-radius: 22px !important;
}

.enrollments-container {
  background: transparent !important;
  padding: 1.5rem 1rem 4rem !important;
}

.enrollments-header {
  background: linear-gradient(145deg, #ffffff, #eef8f1) !important;
}

.enrollments-container .course-grid {
  gap: 1.25rem !important;
}

.enrollments-container .progress-bar {
  background: #e7f1e9 !important;
  border-radius: 999px !important;
}

.enrollments-container .progress-bar-fill {
  background: linear-gradient(90deg, #16824f, #34b56f) !important;
  border-radius: 999px !important;
}

.messenger-container {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 240, 0.98)) !important;
  border-radius: 32px !important;
  overflow: hidden;
}

.messenger-container .sidebar-panel {
  background: rgba(248, 252, 248, 0.94) !important;
  border-right: 1px solid rgba(24, 74, 45, 0.08) !important;
}

.messenger-container .conversation-item,
.messenger-container .message-bubble,
.messenger-container .message-input-wrapper,
.messenger-container .chat-header {
  border-color: rgba(24, 74, 45, 0.08) !important;
}

.messenger-container .conversation-item.active {
  background: #edf8f0 !important;
}

.messenger-container .message-bubble.sent {
  background: linear-gradient(135deg, #16824f, #21935b) !important;
}

.messenger-container .message-bubble.received,
.messenger-container .message-input-wrapper,
.messenger-container .chat-header {
  background: #fff !important;
}

@media (max-width: 1024px) {
  .hero-content,
  .student-dashboard-page .dashboard-header,
  .notifications-page .notifications-wrapper,
  .enrollments-header,
  .messenger-container {
    border-radius: 24px !important;
  }

  .main-container.feed-shell {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 1.35rem !important;
  }

  .courses-hero {
    padding: 1rem 0 0.75rem !important;
  }

  .student-dashboard-page,
  .notifications-page,
  .enrollments-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .student-dashboard-page .dashboard-header-content,
  .student-dashboard-page .dashboard-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .student-dashboard-page .dashboard-title-section h1,
  .hero-title {
    font-size: 2rem !important;
  }

  .revision-hero + .container .tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }

  .messenger-container {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}