/* ============================================================
   PITMC Learning Portal — shared stylesheet
   Palette pulled from the PITMC brand deck:
   Dark green #1B5E20, darker #0D1B0E, gold #F9A825, mid-green #4CAF50
   ============================================================ */

:root {
  --dark-green: #1B5E20;
  --darker-green: #0D1B0E;
  --mid-green: #4CAF50;
  --light-green: #C8E6C9;
  --pale-green: #F1F8E9;
  --gold: #F9A825;
  --gold-dark: #F57F17;
  --text-dark: #1A3A1E;
  --gray-text: #6B7280;
  --gray-border: #CBD1DA;
  --white: #FFFFFF;
  --bg: #F9FBF9;
  --danger: #C62828;
  --radius: 10px;
  --plum: #6B2470;
  --plum-soft: #9D4EDD;
  --olive-deep: #38480F;
  --olive-black: #16220A;
  --body-font: 'Inter', -apple-system, "Segoe UI", Calibri, Arial, sans-serif;
  --heading-font: 'Fraunces', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--text-dark);
  line-height: 1.5;
}

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

h1, h2, h3 { font-family: var(--heading-font); margin: 0 0 .4em; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  font-size: .95rem;
  transition: transform .1s ease, opacity .15s ease;
}
.btn:hover { opacity: .92; }
.btn:active { transform: scale(.98); }
.btn-gold { background: var(--gold); color: var(--darker-green); }
/* Course review modal (member/reviews.php) */
.review-stars-static { font-size: 1.1rem; letter-spacing: 1px; margin: .3rem 0; }
.review-stars-static .star-filled { color: var(--gold); }
.review-stars-static .star-empty { color: #D8D8D8; }
.review-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(13,27,14,.55);
  align-items: center; justify-content: center; z-index: 200; padding: 1rem;
}
.review-modal-overlay.review-modal-open { display: flex; }
.review-modal {
  background: #fff; border-radius: 16px; padding: 2rem; max-width: 480px; width: 100%;
  position: relative; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.review-modal-close {
  position: absolute; top: .8rem; right: 1rem; background: none; border: none;
  font-size: 1.5rem; color: var(--gray-text); cursor: pointer; line-height: 1;
}
.review-modal h2 { font-size: 1.4rem; color: var(--darker-green); margin-bottom: .3rem; }
.review-modal-course-title { color: var(--gray-text); font-size: .9rem; margin-bottom: 1rem; }
.review-stars-input { font-size: 2.2rem; letter-spacing: .3rem; margin-bottom: 1.2rem; cursor: pointer; }
.review-stars-input .review-star { color: #D8D8D8; transition: color .1s ease; }
.review-stars-input .review-star.star-filled { color: var(--gold); }
.review-modal textarea {
  width: 100%; border: 1.5px solid #9CA3AF; border-radius: 8px; padding: .7rem .9rem;
  font-size: .95rem; font-family: var(--body-font); resize: vertical; margin-bottom: 1.2rem;
}
.review-modal-actions { display: flex; justify-content: center; gap: 1rem; }
.need-help-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 150;
  background: var(--dark-green); color: #fff; border: none; border-radius: 999px;
  padding: .9rem 1.4rem; font-weight: 700; font-size: .95rem; font-family: var(--body-font);
  box-shadow: 0 8px 24px rgba(13,27,14,.35); cursor: pointer;
}
.need-help-btn:hover { background: var(--darker-green); }
@media (max-width: 600px) {
  .need-help-btn { bottom: 16px; right: 16px; padding: .75rem 1.1rem; font-size: .85rem; }
}
.btn-outline { background: transparent; border-color: var(--dark-green); color: var(--dark-green); }
.btn-outline-white { background: transparent; border-color: var(--white); color: var(--white); }
.btn-green { background: var(--mid-green); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-sm { padding: .18rem .45rem; font-size: .5625rem; border-radius: 5px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- Top navbar (public site) ---------- */
.navbar {
  background: var(--dark-green);
  color: var(--white);
  padding: 1rem 0;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: nowrap; }
.navbar-right { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; flex-wrap: wrap; }
.navbar .brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.3rem; letter-spacing: 2px; min-width: 0; flex-shrink: 1; }
.navbar .brand .logo-badge {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gold);
  color: var(--darker-green); display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-family: var(--heading-font);
}
.navbar nav a { margin: 0 .8rem; opacity: .95; }
.navbar nav a:hover { opacity: 1; text-decoration: underline; }
.navbar .actions a { margin-left: 0; }

/* ---------- Hero ---------- */
.hero {
  background: var(--darker-green);
  color: var(--white);
  text-align: center;
  padding: 3.5rem 1.5rem;
}
.hero .eyebrow { color: var(--gold); font-weight: 700; letter-spacing: 1px; }
.hero h1 { font-size: 2.6rem; margin: .5rem 0; }
.hero p.tagline { font-style: italic; color: var(--light-green); margin-bottom: 1.6rem; }
.hero .actions .btn { margin: 0 .4rem; }

/* ---------- Hero split layout with photo carousel ---------- */
.hero-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  text-align: left;
  padding: 3rem 4vw;
}
.hero-split .hero-text { flex: 1 1 420px; min-width: 280px; }
.hero-split .hero-text .actions { margin-top: 1.4rem; }
.hero-split .hero-text .actions .btn { margin: 0 .6rem 0 0; }
.hero-carousel { flex: 1 1 420px; min-width: 280px; max-width: 520px; }
.carousel {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  aspect-ratio: 4 / 3;
  background: var(--darker-green);
}
.carousel-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.carousel-slide.active { opacity: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(13,27,14,.85));
  color: #fff; padding: 2.2rem 1.2rem .9rem; font-size: .9rem; font-weight: 600;
}
.carousel-dots {
  position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 2;
}
.carousel-dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5);
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.carousel-dot.active { background: var(--gold); transform: scale(1.25); }
.carousel-placeholder {
  aspect-ratio: 4/3; border-radius: 14px; background: var(--pale-green);
  border: 2px dashed var(--light-green); display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--mid-green); gap: .5rem;
}
.carousel-placeholder span { font-size: 2.6rem; }
.carousel-placeholder p { margin: 0; font-size: .9rem; }

@media (max-width: 900px) {
  .hero-split { flex-direction: column; text-align: center; padding: 2.5rem 1.5rem; }
  .hero-split .hero-text .actions .btn { margin: .3rem; }
}

/* ---------- About / vision-mission-goal ---------- */
.about-section { background: var(--dark-green); color: var(--white); padding: 2.5rem 1.5rem; }
.about-section .section-label { text-align: center; color: var(--gold); letter-spacing: 2px; font-weight: 700; margin-bottom: 1.2rem; }
.vmg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.vmg-card { border: 1.5px solid var(--gold); border-radius: 6px; padding: 1.4rem; text-align: center; }
.vmg-card h3 { color: var(--gold); letter-spacing: 1px; font-family: inherit; }
.vmg-card p { color: var(--light-green); font-size: .92rem; }

/* ---------- Contact ---------- */
.contact-section { background: var(--pale-green); padding: 2.5rem 1.5rem; }
.contact-section .section-label { text-align: center; color: var(--dark-green); font-weight: 700; letter-spacing: 2px; margin-bottom: 1.4rem; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.contact-grid .label { font-weight: 700; }
.contact-grid .value { color: var(--mid-green); font-size: .9rem; }

/* ---------- Footer (public) ---------- */
.site-footer { background: var(--darker-green); color: var(--white); text-align: center; padding: 2rem 1.5rem; }
.site-footer .btn { margin: 0 .3rem; }
.site-footer small { display: block; margin-top: 1rem; color: #9CA3AF; font-size: .78rem; }
.site-footer a.forgot { display: block; margin-top: .8rem; text-decoration: underline; color: var(--light-green); font-size: .85rem; }

/* ---------- Zoomable image magnifying-glass badge ---------- */
.zoom-wrap { position: relative; display: block; }
.zoom-badge {
  position: absolute; bottom: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; pointer-events: none;
}

/* ---------- Auth forms (login/register) ---------- */
.auth-wrap {
  min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.auth-card {
  background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius);
  padding: 2.2rem; width: 100%; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.auth-card h2 { color: var(--dark-green); text-align: center; }
.auth-card .sub { text-align: center; color: var(--gray-text); font-size: .9rem; margin-bottom: 1.4rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .65rem .8rem; border: 1.5px solid #9CA3AF; border-radius: 6px; font-size: .95rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--mid-green); }
.field-with-vis { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.field-with-vis .field { flex: 1; min-width: 220px; margin-bottom: 0; }
.vis-toggle { display: flex; gap: .7rem; align-items: center; font-size: .78rem; color: var(--gray-text); padding-bottom: .6rem; white-space: nowrap; }
.vis-toggle label { display: flex; align-items: center; gap: .25rem; font-weight: 600; cursor: pointer; }
.vis-toggle input[type="radio"] { accent-color: var(--mid-green); margin: 0; }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.field-grid-2 .field-span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .field-grid-2 { grid-template-columns: 1fr; } }
.alert { padding: .75rem 1rem; border-radius: 6px; font-size: .88rem; margin-bottom: 1rem; transition: opacity .6s ease; }

/* Universal "successfully saved" toast — every admin save action uses this */
.pa-toast {
  position: fixed; right: 20px; z-index: 999; min-width: 240px; max-width: 380px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); font-weight: 700; font-size: .92rem;
  animation: pa-toast-in .3s ease;
}
@keyframes pa-toast-in {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.alert-error { background: #FDECEA; color: var(--danger); border: 1px solid #F5C6C4; }
.alert-success { background: var(--pale-green); color: var(--dark-green); border: 1px solid var(--light-green); }
.input-error { border-color: var(--danger) !important; background: #FFF5F5; }
.auth-card .switch { text-align: center; margin-top: 1rem; font-size: .88rem; color: var(--gray-text); }

/* ---------- App shell (member/admin, with sidebar) ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; background: var(--dark-green); color: var(--white); flex-shrink: 0;
  display: flex; flex-direction: column;
}
.sidebar.admin-sidebar { background: var(--darker-green); border-right: 1px solid #1a3a1e; }
.sidebar .brand { padding: 1.3rem 1.2rem; font-weight: 800; letter-spacing: 1px; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar nav { flex: 1; padding: .8rem 0; }
.sidebar nav a {
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; font-size: .92rem; opacity: .88;
}
.sidebar nav a:hover, .sidebar nav a.active { opacity: 1; background: rgba(255,255,255,.08); border-left: 3px solid var(--gold); }
.sidebar .logout-link { padding: 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; opacity: .8; }

.app-main { flex: 1; min-width: 0; }
.topbar {
  background: var(--white); border-bottom: 1px solid var(--gray-border);
  padding: .9rem 1.6rem; display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
}
.topbar .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--darker-green);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .78rem;
}
.page-content { padding: 1.8rem; }
.page-content h1 { color: var(--text-dark); font-size: 1.7rem; }

/* ---------- Stat cards ---------- */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.2rem 0 1.6rem; }
.stats-row.stats-4 { grid-template-columns: repeat(4, 1fr); }
.stat-card {
  background: var(--pale-green); border: 1px solid var(--light-green); border-radius: 12px;
  padding: 1.2rem; text-align: center; box-shadow: 0 2px 10px rgba(27,94,32,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(27,94,32,.12); }
.stat-card .num { font-size: 1.9rem; font-weight: 800; color: var(--gold-dark); }
.stat-card .num.purple { color: #7B1FA2; }
.stat-card .num.green { color: var(--mid-green); }
.stat-card .num.blue { color: #1976D2; }
.stat-card .num.gold { color: var(--gold-dark, #F9A825); }
.stat-card .lbl { font-size: .85rem; color: var(--gray-text); }

/* dark variant for admin */
.stat-card.dark { background: #14241a; border-color: #2E4A30; }
.stat-card.dark .lbl { color: var(--light-green); }

/* ---------- Course cards ---------- */
.course-card {
  background: var(--white); border: 1px solid var(--gray-border); border-radius: 14px;
  padding: 1.2rem; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow .15s ease;
}
.course-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); }

/* connected list of courses (admin) — one continuous card, rows divided by lines */
.course-list-row { padding: 1.1rem 0; border-bottom: 1px solid var(--gray-border); }
.course-list-row:last-child { border-bottom: none; padding-bottom: 0; }
.course-list-row:first-child { padding-top: 0; }
.course-card h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.course-card .meta { color: var(--mid-green); font-size: .85rem; margin-bottom: .7rem; }
.progress-bar { background: var(--light-green); border-radius: 999px; height: 8px; overflow: hidden; flex: 1; }
.progress-bar > span { display: block; height: 100%; background: var(--mid-green); border-radius: 999px; }
.progress-row { display: flex; align-items: center; gap: .8rem; }
.progress-row .pct { font-weight: 800; color: var(--mid-green); font-size: .85rem; width: 3rem; }

/* ---------- Tables (admin) ---------- */
table.data-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 8px; overflow: hidden; }
table.data-table th, table.data-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--gray-border); font-size: .92rem; }
table.data-table th { background: var(--pale-green); color: var(--dark-green); font-weight: 700; }
table.data-table-compact th, table.data-table-compact td { padding: .2rem .5rem; font-size: .6875rem; line-height: 1.25; }
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-active { background: #E8F5E9; color: var(--mid-green); }
.badge-pending { background: #FFF3E0; color: var(--gold-dark); }

/* Admin: "Select Position" pending-approval control */
.select-position { position: relative; display: inline-block; }
.select-position summary { list-style: none; cursor: pointer; }
.select-position summary::-webkit-details-marker { display: none; }
.select-position-menu {
  margin-top: 4px; background: #fff; border: 1px solid var(--gray-border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.15); padding: .4rem; display: flex; flex-direction: column; gap: .25rem;
  min-width: 150px;
}
.select-position-menu button {
  text-align: left; padding: .35rem .6rem; border-radius: 7px; border: none; background: none;
  font-size: .72rem; font-weight: 600; color: var(--darker-green); cursor: pointer;
}
.select-position-menu button:hover { background: var(--pale-green); }

/* plain text-link style action buttons for the Members table — no button
   chrome (background/border), just small colored text like the Activity
   History log, per client request */
.pa-action-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-size: .68rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.pa-action-link.pa-link-danger { color: var(--danger, #D32F2F); }
.pa-action-link.pa-link-gold { color: var(--gold-dark); }
.pa-action-link.pa-link-green { color: var(--mid-green); }
.pa-action-link:hover { text-decoration: underline; }
select.pa-action-link { -webkit-appearance: auto; appearance: auto; cursor: pointer; }

.dismissible-notice {
  position: relative; background: var(--pale-green); border: 1px solid var(--light-green);
  border-radius: 10px; padding: .8rem 2.2rem .8rem 1rem; font-size: .88rem; color: var(--dark-green);
  margin-bottom: 1rem;
}
.dismissible-notice-close {
  position: absolute; top: .5rem; right: .6rem; background: none; border: none;
  font-size: 1.2rem; line-height: 1; color: var(--dark-green); opacity: .6; cursor: pointer;
}
.dismissible-notice-close:hover { opacity: 1; }
.badge-suspended { background: #FDECEA; color: var(--danger); }

.card-box { background: var(--white); border: 1px solid var(--gray-border); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.card-box h2 { font-size: 1.15rem; color: var(--dark-green); }

/* FB-style member profile card */
.pa-profile-card {
  display: flex; gap: 1.3rem; align-items: flex-start; background: var(--white);
  border: 1px solid var(--gray-border); border-radius: 16px; padding: 1.5rem;
  margin: 1rem 0 1.4rem; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.pa-profile-photo {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--darker-green); color: var(--gold); font-weight: 800; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.pa-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.pa-profile-info { flex: 1; min-width: 0; }
.pa-profile-bio { color: var(--text-dark); font-size: .92rem; line-height: 1.5; margin: 0 0 .8rem; }
.pa-profile-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .82rem; color: var(--gray-text); }
@media (max-width: 600px) {
  .pa-profile-card { flex-direction: column; align-items: center; text-align: center; }
  .pa-profile-meta { justify-content: center; }
}

/* member search + filter rows */
.pa-member-search { display: flex; gap: .4rem; margin-bottom: .6rem; }
.pa-member-search input[type="text"] {
  flex: 1; max-width: 420px; padding: .35rem .7rem; border-radius: 7px; border: 1px solid var(--gray-border);
  font-size: .72rem;
}
.pa-filter-row { display: flex; gap: .3rem; flex-wrap: wrap; padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid var(--gray-border); }

/* course-type choice cards (Add New Course, step 1) */
.course-type-choice {
  display: flex; align-items: center; gap: .6rem;
  background: var(--pale-green); border: 1.5px solid var(--light-green); border-radius: 10px;
  padding: .6rem .9rem; cursor: pointer; text-align: left; font-family: inherit;
  width: 190px; transition: border-color .15s ease, transform .15s ease;
}
.course-type-choice:hover { border-color: var(--mid-green); transform: translateY(-2px); }
.course-type-choice strong { display: block; color: var(--dark-green); font-size: .86rem; line-height: 1.3; }
.course-type-choice small { display: block; color: var(--gray-text); font-size: .72rem; }

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .vmg-grid, .contact-grid { grid-template-columns: 1fr; }
  .stats-row, .stats-row.stats-4 { grid-template-columns: repeat(2, 1fr); }
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
  .sidebar .brand, .sidebar .logout-link { display: none; }
  .sidebar nav { display: flex; padding: 0; }
  .sidebar nav a { border-left: none !important; white-space: nowrap; }
  .navbar .container { flex-wrap: wrap; }
  .navbar-right { width: 100%; order: 3; flex-direction: column; align-items: center; margin-top: .6rem; margin-left: 0; }
  .navbar nav { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; }
  .hero h1 { font-size: 1.9rem; }
}

/* ============================================================
   LIGHT EDITORIAL HOMEPAGE THEME (PITMC-style redesign)
   ============================================================ */
:root {
  --ink: #1F2937;
  --sage: #AFC96B;
  --sage-dark: #8FAF52;
  --cream: #FAF8F0;
  --card-sage: #E7ECE6;
}
body.site-light { background: var(--cream); color: var(--ink); }

/* ---------- Light navbar ---------- */
.navbar-light { background: linear-gradient(120deg, var(--sage), var(--sage-dark)); color: var(--dark-green); padding: .9rem 0; }
.navbar-light .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand-light { display: flex; align-items: center; gap: .7rem; }
.brand-light .brand-text { display: flex; flex-direction: row; align-items: center; gap: .7rem; line-height: 1.15; }
.brand-light .brand-text strong { font-size: 3rem; font-weight: 900; letter-spacing: .5px; color: #ffffff; }
.brand-light .brand-text small { font-size: 1.05rem; font-weight: 400; color: #000000; white-space: nowrap; display: block; margin-top: 0; }
.logo-badge-light { background: var(--darker-green); color: var(--gold); }
.navbar-light nav a { color: var(--darker-green); font-weight: 600; margin: 0 .7rem; }
.navbar-light nav a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .navbar-burger {
    display: block; background: none; border: none; font-size: 1.5rem; line-height: 1;
    color: var(--darker-green); cursor: pointer; padding: .3rem .5rem; order: 2; margin-left: auto;
  }
  .navbar-light .container { flex-wrap: wrap; }
  .navbar-light .navbar-right {
    order: 3; flex-direction: column; align-items: flex-start; width: 100%;
    max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease;
    margin-top: 0;
  }
  .navbar-light .navbar-right.nav-open { max-height: 500px; opacity: 1; margin-top: .8rem; }
  .navbar-light nav {
    width: 100%; display: flex; flex-direction: column; gap: .2rem;
  }
  .navbar-light nav a {
    margin: 0; font-size: .9rem; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); width: 100%;
  }
  .navbar-light .actions { margin-top: .6rem; }
  .brand-light .brand-text { flex-direction: column; align-items: flex-start; gap: 0; }
  .brand-light .brand-text small { display: block; font-size: .68rem; white-space: normal; line-height: 1.25; color: #000000; margin-top: .1rem; max-width: 220px; }
  .brand-logo-wrap { width: 40px !important; height: 40px !important; }
  .brand-logo-wrap img, .brand-logo-wrap svg { width: 40px !important; height: 40px !important; }
  .brand-light .brand-text strong { font-size: 1.3rem !important; }
}
@media (min-width: 901px) {
  .navbar-burger { display: none; }
}
.btn-pill { border-radius: 999px; padding: .55rem 1.1rem; font-weight: 700; font-size: .85rem; }
.btn-blue { background: #2E7BD6; color: #fff; }
.btn-green-solid { background: var(--mid-green); color: #fff; }
.btn-dark-green { background: var(--dark-green); color: #fff; }
.btn-dark-green-solid { background: var(--dark-green); color: #fff; border-radius: 999px; }
.btn-white-outline { background: transparent; border: 2px solid #fff; color: #fff; border-radius: 999px; }
.btn-white-outline-dark { background: #fff; border: 1.5px solid var(--gray-border); color: var(--dark-green); border-radius: 999px; }
.btn-outline-dark { background: transparent; border: 1.5px solid var(--dark-green); color: var(--dark-green); border-radius: 999px; }

/* ---------- Light hero (split, big photo) ---------- */
.hero-light {
  padding: 4.5rem 0 4rem;
  background:
    radial-gradient(ellipse 900px 500px at 88% -10%, rgba(175,201,107,.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, rgba(107,36,112,.06), transparent 55%),
    var(--cream);
}
.hero-light-grid { display: flex; align-items: center; gap: 3.5rem; flex-wrap: wrap; }
.hero-light-text { flex: 1 1 420px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--body-font);
  font-size: .78rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 1.1rem;
}
.hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-dark); display: inline-block; }
.hero-light-text h1 { font-family: var(--heading-font); font-size: 3.4rem; font-weight: 700; color: var(--dark-green); line-height: 1.08; letter-spacing: -.5px; margin-bottom: 1.2rem; }
.hero-light-text p { color: #4B5A4D; font-size: 1.1rem; line-height: 1.65; margin-bottom: 2rem; max-width: 480px; }
.hero-cta-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.hero-link-cta {
  display: inline-block; color: var(--dark-green); font-weight: 700; font-size: .9rem; text-decoration: none;
  border: 2px solid var(--sage); border-radius: 999px; padding: .7rem 1.4rem;
}
.hero-link-cta:hover { border-color: var(--dark-green); }
.hero-light-photo { flex: 1 1 420px; position: relative; max-width: 560px; }
.hero-light-photo img { width: 100%; border-radius: 16px; display: block; aspect-ratio: 4/3; object-fit: cover; }
.hero-motif { position: absolute; top: -3.5rem; right: -3.5rem; width: 130px; height: 130px; color: var(--gold); opacity: .3; z-index: 0; pointer-events: none; }
.photo-placeholder {
  position: relative; z-index: 1; aspect-ratio: 4/3; border-radius: 16px;
  background: linear-gradient(160deg, var(--card-sage) 0%, #DCE6D4 100%);
  border: 1.5px solid rgba(27,94,32,.18); display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #4B5A4D; gap: .5rem; text-align: center; padding: 1rem;
}
.photo-placeholder span { font-size: 2.2rem; opacity: .7; }
.photo-placeholder p { font-family: var(--body-font); font-size: .85rem; margin: 0; }
.hero-badge {
  position: absolute; z-index: 2; background: rgba(255,255,255,.97); border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .78rem; font-weight: 700; color: var(--dark-green);
  box-shadow: 0 8px 20px rgba(13,27,14,.18); border: 1px solid rgba(27,94,32,.08);
}
.hero-badge-tl { top: -.8rem; left: -.8rem; }
.hero-badge-br { bottom: -.8rem; right: -.8rem; }

/* ---------- Mission / Vision dark bands ---------- */
.mission-band { background: var(--dark-green); color: #fff; padding: 3.5rem 0; }
.mission-band.mission-band-alt { background: var(--darker-green); }
.two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12rem; align-items: start; }
.two-col.two-col-reverse { grid-template-columns: 1.4fr 1fr; }
.two-col h2 { font-family: var(--heading-font); font-size: 2rem; }
.two-col p { color: var(--light-green); line-height: 1.7; }

/* ---------- Programs section ---------- */
.programs-section { padding: 4rem 0; background: var(--cream); }
.section-heading-light { text-align: center; margin-bottom: 2.2rem; }
.section-heading-light h2 { font-family: var(--heading-font); font-size: 2rem; color: var(--dark-green); }
.section-heading-light p { color: var(--gray-text); max-width: 560px; margin: .6rem auto 0; }
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.program-card { background: var(--card-sage); border-radius: 14px; padding: 1.2rem; text-align: left; }
.program-photo { aspect-ratio: 16/10; border-radius: 10px; margin-bottom: 1rem; background-size: cover; background-position: center; }
.program-photo-1 { background: linear-gradient(135deg, #8FA98F, #5C7A5C); }
.program-photo-2 { background: linear-gradient(135deg, #9FB3C8, #5E7998); }
.program-photo-3 { background: linear-gradient(135deg, #C9B98F, #9C8757); }
.program-card h3 { color: var(--dark-green); font-size: 1.1rem; margin-bottom: .5rem; }
.program-card p { color: #4B5A4D; font-size: .9rem; margin-bottom: 1rem; }

/* ---------- Stats section ---------- */
.stats-section { background: var(--card-sage); padding: 3.5rem 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stat-card-light { text-align: left; }
.stat-photo { aspect-ratio: 16/10; border-radius: 10px; margin-bottom: 1rem; }
.stat-photo-1 { background: linear-gradient(135deg, #7EA37E, #3F5F41); }
.stat-photo-2 { background: linear-gradient(135deg, #8FAF9A, #4C6E58); }
.stat-photo-3 { background: linear-gradient(135deg, #A6B98C, #6B7E52); }
.stat-card-light h3 { font-family: var(--heading-font); font-size: 1.7rem; color: var(--dark-green); margin-bottom: .3rem; }
.stat-card-light p { color: #4B5A4D; font-size: .88rem; line-height: 1.5; }

/* ---------- Team section ---------- */
.team-section { padding: 4rem 0; background: var(--cream); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; text-align: center; }
.team-card img, .team-photo-placeholder {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem;
}
.team-photo-placeholder {
  background: var(--pale-green); color: var(--dark-green); font-weight: 800; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}
.team-card h4 { color: var(--dark-green); margin-bottom: .2rem; }
.team-card p { color: var(--gray-text); font-size: .85rem; }

/* ---------- Volunteer form section ---------- */
.volunteer-section { background: var(--cream); padding: 4rem 0; }
.volunteer-form { max-width: 560px; margin: 0 auto; }
.volunteer-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.volunteer-form .field { margin-bottom: 1.1rem; }
.volunteer-form label { display: block; font-size: .85rem; color: var(--dark-green); font-weight: 700; margin-bottom: .35rem; }
.volunteer-form input, .volunteer-form select, .volunteer-form textarea {
  width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--gray-border); border-radius: 8px; font-size: .95rem; background: #fff;
}

/* ---------- Light footer ---------- */
.site-footer-light { background: var(--cream); }
.footer-photo {
  height: 90px; background: linear-gradient(135deg, #8FA96B, #4F6B3C);
  background-size: cover; background-position: center;
}
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding: 2.2rem 1.5rem; }
.footer-logo { display: flex; align-items: center; gap: .8rem; }
.footer-contact { color: var(--gray-text); font-size: .9rem; }
.footer-social { display: flex; gap: .8rem; font-size: 1.3rem; }
.site-footer-light small { display: block; text-align: center; color: var(--gray-text); font-size: .78rem; padding-bottom: .5rem; }

@media (max-width: 900px) {
  .hero-light-text h1 { font-size: 2.1rem; }
  .hero-motif { display: none; }
  .two-col, .two-col.two-col-reverse { grid-template-columns: 1fr; text-align: center; }
  .program-grid, .stat-grid { grid-template-columns: 1fr; }
  .volunteer-form .field-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .mission-gallery-wrap { max-width: 90% !important; width: 90% !important; }
}

/* ---------- Login role-choice screen ---------- */
.role-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.role-choice-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  border: 2px solid var(--gray-border); border-radius: 12px; padding: 1.6rem 1rem;
  color: var(--text-dark); transition: border-color .15s ease, transform .15s ease;
}
.role-choice-card:hover { border-color: #2E7BD6; transform: translateY(-2px); }
.role-choice-card.role-choice-student:hover { border-color: var(--mid-green); }
.role-choice-icon { font-size: 2.2rem; }
.role-choice-card strong { font-size: 1.05rem; }
.role-choice-card span:last-child { font-size: .8rem; color: var(--gray-text); }
@media (max-width: 500px) {
  .role-choice-grid { grid-template-columns: 1fr; }
}

/* ---------- Settings hub grid ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.settings-card {
  display: flex; align-items: flex-start; gap: .9rem;
  background: var(--white); border: 1px solid var(--gray-border); border-radius: 10px;
  padding: 1.2rem; color: var(--text-dark); transition: border-color .15s ease, transform .15s ease;
}
.settings-card:hover { border-color: var(--mid-green); transform: translateY(-2px); }
.settings-card-icon { font-size: 1.6rem; }
.settings-card h3 { font-size: 1rem; margin-bottom: .25rem; color: var(--dark-green); }
.settings-card p { font-size: .82rem; color: var(--gray-text); margin: 0; }

/* ---------- Social-style member profile header ---------- */
.profile-header-card {
  position: relative;
  background: linear-gradient(135deg, var(--dark-green), var(--darker-green));
  border-radius: 14px;
  padding: 3.5rem 1.5rem 1.8rem;
  text-align: center;
  margin-bottom: 1.4rem;
  color: #fff;
}
.profile-header-photo {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  margin: 0 auto .8rem; display: block;
}
.profile-header-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--darker-green); font-weight: 800; font-size: 2rem;
}
.profile-header-card h2 { color: #fff; margin: 0 0 .4rem; font-size: 1.4rem; }
.profile-header-badge { font-size: .8rem; padding: .3rem .9rem; }
.profile-header-location { color: var(--light-green); font-size: .85rem; margin-top: .6rem; }
.profile-header-bio { color: #E8F0E8; font-size: .9rem; font-style: italic; max-width: 480px; margin: .8rem auto 0; }

/* ---------- Topbar clickable user dropdown ---------- */
.topbar-user-menu { position: relative; }
.topbar-user-menu summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  padding: .3rem .5rem; border-radius: 8px; user-select: none;
}
.topbar-user-menu summary::-webkit-details-marker { display: none; }
.topbar-user-menu summary:hover { background: var(--pale-green); }
.topbar-user-menu[open] summary { background: var(--pale-green); }
.topbar-dropdown {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--gray-border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); min-width: 170px; overflow: hidden;
}
.topbar-dropdown a {
  display: block; padding: .7rem 1rem; font-size: .9rem; color: var(--text-dark);
}
.topbar-dropdown a:hover { background: var(--pale-green); }
.topbar-dropdown a + a { border-top: 1px solid var(--gray-border); }

/* ---------- Star rating ---------- */
.star-rating { display: inline-flex; align-items: baseline; gap: .3rem; font-size: .82rem; }
.star-rating-icons { color: var(--gold); letter-spacing: 1px; }
.star-rating-num { color: var(--gray-text); font-weight: 600; }

/* ---------- Udemy-style course card rows ---------- */
.udemy-section-title { font-size: 1.15rem; color: var(--text-dark); margin: 1.6rem 0 .8rem; }
.udemy-row {
  display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .6rem;
  scroll-snap-type: x proximity;
}
.udemy-row::-webkit-scrollbar { height: 8px; }
.udemy-row::-webkit-scrollbar-thumb { background: var(--light-green); border-radius: 4px; }
.udemy-card {
  flex: 0 0 220px; scroll-snap-align: start;
  background: var(--white); border: 1px solid var(--gray-border); border-radius: 10px;
  overflow: hidden; color: var(--text-dark); transition: transform .15s ease, box-shadow .15s ease;
  display: block;
}
.udemy-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.udemy-card-locked { cursor: not-allowed; opacity: .85; }
.udemy-card-thumb { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--pale-green); }
.udemy-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.udemy-card-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.udemy-card-lock {
  position: absolute; inset: 0; background: rgba(13,27,14,.55);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.udemy-card-body { padding: .8rem; }
.udemy-card-title {
  font-weight: 700; font-size: .88rem; line-height: 1.3; margin-bottom: .25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.udemy-card-instructor { font-size: .78rem; color: var(--gray-text); margin-bottom: .3rem; }
.udemy-card-meta { font-size: .75rem; color: var(--gray-text); margin-top: .3rem; }
.udemy-card-locked-label { font-size: .78rem; color: var(--gold-dark); font-weight: 700; margin-top: .4rem; }

/* ============================================================
   UDEMY-STYLE MEMBER APP LAYOUT (top nav, replaces sidebar)
   ============================================================ */
body.udemy-body { background: var(--bg); }
.udemy-app { min-height: 100vh; display: flex; flex-direction: column; }

.udemy-nav {
  background: linear-gradient(120deg, var(--sage), var(--sage-dark));
  padding-bottom: .2rem;
  box-shadow: 0 4px 16px rgba(27,94,32,.15);
}
.udemy-nav-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .85rem 1.6rem;
  flex-wrap: wrap;
}
.udemy-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.udemy-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.udemy-logo-text strong { font-weight: 900; font-size: 1.3rem; color: var(--dark-green); letter-spacing: .5px; }
.udemy-logo-text small { font-weight: 600; font-size: .6rem; color: #2E4A30; max-width: 230px; display: block; margin-top: .1rem; }
.udemy-nav-links { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; flex: 1; }
.udemy-nav-links a { font-size: .95rem; font-weight: 700; color: var(--darker-green); white-space: nowrap; }
.udemy-nav-links a.active { font-weight: 800; text-decoration: underline; }
.udemy-nav-links a:hover { opacity: .75; }
.udemy-nav-icons { display: flex; align-items: center; gap: .8rem; }
.udemy-icon-btn { font-size: 1.1rem; cursor: pointer; }
.udemy-icon-btn-plain { background: none; border: none; padding: 0; line-height: 1; }
.udemy-notif-badge {
  position: absolute; top: -6px; right: -8px; background: #E53935; color: #fff;
  font-size: .65rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1;
}
.udemy-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--gold);
  color: var(--darker-green); font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 2px solid rgba(255,255,255,.6);
}

.udemy-announcement-bar {
  position: relative; background: rgba(13,27,14,.18);
  height: 40px; display: flex; align-items: center; overflow: hidden;
}
.udemy-marquee-track {
  display: inline-flex; width: max-content; white-space: nowrap; animation: udemy-marquee 25s linear infinite;
}
.udemy-marquee-text {
  color: #FFFFFF; font-weight: 700; font-size: 1.05rem; padding-right: 4rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
@keyframes udemy-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.udemy-welcome { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.5rem 1.4rem; }
.udemy-welcome-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--darker-green); color: var(--gold);
  font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  border: 2px solid rgba(255,255,255,.7); flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.udemy-welcome-name { font-weight: 700; color: var(--darker-green); font-size: 1.05rem; }
.udemy-welcome-status { font-size: .8rem; color: var(--dark-green); opacity: .75; }

/* shared dropdown, triggered by hamburger or avatar */
.udemy-dropdown {
  display: none; position: absolute; top: 64px; right: 1.2rem; z-index: 50;
  background: #fff; border: 1px solid var(--gray-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); min-width: 220px; overflow: hidden;
}
.udemy-dropdown.udemy-dropdown-open { display: block; }
.udemy-dropdown-header { padding: .9rem 1rem; border-bottom: 1px solid var(--gray-border); background: var(--pale-green); }
.udemy-dropdown-header div { font-size: .8rem; color: var(--gray-text); }
.udemy-dropdown a, .udemy-dropdown-static {
  display: block; padding: .65rem 1rem; font-size: .88rem; color: var(--text-dark);
}
.udemy-dropdown-static { color: var(--mid-green); font-weight: 700; }
.udemy-dropdown a:hover { background: var(--pale-green); }
.udemy-dropdown a + a, .udemy-dropdown-static + a { border-top: 1px solid var(--gray-border); }
#udemyNotifDropdown { top: calc(100% + 8px); right: auto; left: 0; min-width: 260px; }

.udemy-content { flex: 1; background: var(--bg); padding: 1.6rem 1.8rem; min-width: 0; }
.udemy-content h1 { color: var(--text-dark); font-size: 1.5rem; margin-bottom: 1rem; }

.udemy-shell { display: flex; flex: 1; align-items: stretch; }
.udemy-sidebar {
  width: 275px; flex-shrink: 0; background: var(--white);
  padding: 1.6rem 1.1rem; border-right: 1px solid var(--gray-border);
}
.udemy-sidebar-hello {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; margin-bottom: 1.4rem;
  padding-top: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray-border);
}
.udemy-sidebar-photo-link { position: relative; display: inline-block; margin-bottom: .6rem; text-decoration: none; }
.udemy-sidebar-photo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--pale-green); box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
}
.udemy-sidebar-photo-initials {
  background: var(--mid-green); color: #fff; font-weight: 800; font-size: 2rem;
}
.udemy-sidebar-photo-edit {
  position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--dark-green); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.udemy-sidebar-photo-link:hover .udemy-sidebar-photo { opacity: .85; }
.udemy-welcome-name { font-weight: 800; color: var(--darker-green); font-size: 1.15rem; }
.udemy-sidebar-tier-badge {
  display: inline-block; margin-top: .35rem; background: var(--mid-green); color: #fff;
  font-size: .72rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; letter-spacing: .3px;
}
.udemy-sidebar-count-badge {
  margin-left: auto; background: #E53935; color: #fff; font-size: .72rem; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px;
}
.udemy-sidebar-nav { display: flex; flex-direction: column; gap: .3rem; }
.udemy-sidebar-nav a {
  display: flex; align-items: center; gap: .75rem; padding: .85rem .95rem; border-radius: 10px;
  color: #3B4A3D; font-weight: 700; font-size: 1.05rem; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.udemy-sidebar-nav a:hover { background: var(--pale-green); }
.udemy-sidebar-nav a.active { background: var(--mid-green); color: #fff; box-shadow: 0 4px 10px rgba(76,175,80,.35); }

.udemy-sidebar-group { margin: 0; }
.udemy-sidebar-group summary {
  display: flex; align-items: center; gap: .75rem; padding: .85rem .95rem; border-radius: 10px;
  color: #3B4A3D; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none;
  transition: background .15s ease, color .15s ease;
}
.udemy-sidebar-group summary::-webkit-details-marker { display: none; }
.udemy-sidebar-group summary::after { content: '▸'; margin-left: auto; font-size: .75rem; transition: transform .15s ease; }
.udemy-sidebar-group[open] summary::after { transform: rotate(90deg); }
.udemy-sidebar-group summary:hover { background: var(--pale-green); }
.udemy-sidebar-group summary.active { background: var(--mid-green); color: #fff; box-shadow: 0 4px 10px rgba(76,175,80,.35); }
.udemy-sidebar-subnav { display: flex; flex-direction: column; padding: .2rem 0 .3rem 1.7rem; gap: .1rem; }
.udemy-sidebar-subnav a {
  display: block; padding: .55rem .8rem; border-radius: 8px; color: #3B4A3D;
  font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .15s ease;
}
.udemy-sidebar-subnav a:hover { background: var(--pale-green); }
@media (max-width: 900px) {
  .udemy-shell { flex-direction: column; }
  .udemy-sidebar { width: 100%; }
}

/* Shared "no thumbnail yet" placeholder — same look everywhere (admin + member) */
.thumb-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pale-green), var(--light-green));
}
.thumb-placeholder span { font-size: 1.6rem; opacity: .55; }

/* Community chat bubbles */
.chat-bubble-row { display: flex; align-items: flex-start; gap: .6rem; max-width: 80%; }
.chat-bubble-row.chat-bubble-mine { flex-direction: row-reverse; margin-left: auto; }
.chat-bubble-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--darker-green); color: var(--gold);
  font-weight: 800; font-size: .72rem; display: flex; align-items: center; justify-content: center;
}
.chat-bubble { background: var(--pale-green); border-radius: 12px; padding: .55rem .8rem; }
.chat-bubble-mine .chat-bubble { background: var(--gold); }
.chat-bubble-name { font-weight: 700; font-size: .76rem; color: var(--dark-green); margin-bottom: .15rem; }
.chat-bubble-mine .chat-bubble-name { color: var(--darker-green); }
.chat-bubble-text { font-size: .88rem; color: var(--text-dark); word-break: break-word; }
.chat-bubble-meta { font-size: .7rem; color: var(--gray-text); margin-top: .2rem; }
.chat-bubble-mine .chat-bubble-meta { text-align: right; }

/* Dashboard — organized course sections by category */
.dash-course-section { margin-bottom: 1.8rem; }
.dash-course-section-title { font-size: 1rem; color: var(--dark-green); margin-bottom: .8rem; }
.dash-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.dash-course-card {
  display: block; background: var(--white); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: box-shadow .15s ease, transform .15s ease;
  color: var(--text-dark);
}
.dash-course-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.dash-course-card-locked { cursor: not-allowed; opacity: .85; }
.dash-course-thumb { position: relative; aspect-ratio: 16/9; background: var(--pale-green); overflow: hidden; }
.dash-course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-course-lock {
  position: absolute; top: .5rem; right: .5rem; background: rgba(0,0,0,.6); color: #fff;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.dash-course-info { padding: .8rem .9rem; }
.dash-course-title {
  font-weight: 700; font-size: .92rem; line-height: 1.3; margin-bottom: .3rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-course-meta { font-size: .76rem; color: var(--gray-text); }
.dash-course-price { font-size: .85rem; font-weight: 700; color: var(--gold-dark); margin-top: .4rem; }

/* Training Program page — tabs, section headers, enrolled/category badges */
.training-tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.training-tab {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; cursor: pointer; border: 1px solid var(--gray-border);
  background: var(--white); color: var(--text-dark); transition: all .15s ease;
}
.training-tab:hover { background: var(--pale-green); }
.training-tab.active { background: var(--dark-green); color: #fff; border-color: var(--dark-green); }

.training-section-header {
  display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border-radius: 10px;
  margin-bottom: 1rem; border: 1px solid transparent;
}
.training-section-header.cat-free { background: #EAF2FF; border-color: #C7DDFF; }
.training-section-header.cat-premium { background: #FFF6E3; border-color: #FBE3AE; }
.training-section-header.cat-other { background: var(--pale-green); border-color: var(--light-green); }
.training-section-icon { font-size: 1.4rem; line-height: 1; }
.training-section-text { flex: 1; }
.training-section-title { font-weight: 700; font-size: .95rem; color: var(--text-dark); margin: 0; }
.training-section-desc { font-size: .78rem; color: var(--gray-text); margin: .1rem 0 0; }
.training-section-viewall { font-size: .8rem; font-weight: 700; color: var(--dark-green); white-space: nowrap; }

.dash-course-badge {
  position: absolute; top: .5rem; left: .5rem; font-size: .66rem; font-weight: 800; letter-spacing: .03em;
  padding: .2rem .55rem; border-radius: 999px; text-transform: uppercase; color: #fff;
}
.dash-course-badge.cat-free { background: #2563EB; }
.dash-course-badge.cat-premium { background: var(--gold-dark); }
.dash-course-badge.cat-other { background: var(--mid-green); }
.dash-course-badge.enrolled { position: absolute; top: .5rem; right: .5rem; left: auto; background: var(--dark-green); }
.dash-course-category-label { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-text); }
.dash-course-instructor { font-size: .78rem; color: var(--gray-text); margin: .1rem 0 .3rem; }
.dash-course-rating { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-dark); margin-bottom: .2rem; }
.dash-course-rating .stars { color: var(--gold-dark); }
.dash-course-lessons-row { display: flex; align-items: center; gap: .7rem; font-size: .74rem; color: var(--gray-text); margin-top: .2rem; }
.dash-course-enroll-btn {
  margin-top: .6rem; display: inline-block; width: 100%; text-align: center; padding: .45rem 0;
  border-radius: 8px; font-size: .82rem; font-weight: 700; background: var(--dark-green); color: #fff;
}
.dash-course-enroll-btn.locked { background: var(--gray-border); color: var(--gray-text); }

/* simplified course card: thumbnail + title only */
.udemy-card-simple {
  flex: 0 0 150px; scroll-snap-align: start; display: block; color: var(--text-dark);
  transition: transform .2s ease;
}
.udemy-card-simple:hover { transform: translateY(-3px); }
.udemy-card-simple .udemy-card-thumb {
  aspect-ratio: 1/1; border-radius: 12px; overflow: hidden;
  background: var(--pale-green); box-shadow: 0 4px 14px rgba(27,94,32,.15);
  transition: box-shadow .2s ease;
}
.udemy-card-simple .udemy-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06);
}
.udemy-card-simple:hover .udemy-card-thumb { box-shadow: 0 8px 22px rgba(27,94,32,.28); }
.udemy-card-simple .udemy-card-title {
  text-align: center; font-weight: 700; font-size: .85rem; margin-top: .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.udemy-card-price { text-align: center; font-size: .82rem; font-weight: 700; color: var(--dark-green); margin-top: .15rem; }
.udemy-card-price-free { color: var(--mid-green); }

@media (max-width: 900px) {
  .udemy-nav-links { display: none; }
  .udemy-content { padding: 1.2rem; }
}
@media (max-width: 600px) {
  .udemy-nav-top { flex-wrap: nowrap; gap: .5rem; padding: .65rem .9rem; }
  .udemy-logo-text small { display: none; }
  .udemy-nav-icons { gap: .5rem; flex-shrink: 0; }
  .udemy-icon-btn { font-size: .85rem; }
  .udemy-avatar { width: 28px; height: 28px; font-size: .68rem; border-width: 1.5px; }
}

/* ---------- Two-column courses layout (main + My learning sidebar) ---------- */
.udemy-page-title { font-size: 1.25rem; font-weight: 800; color: var(--text-dark); margin-bottom: .8rem; }
.udemy-two-col { display: flex; gap: 1.6rem; align-items: flex-start; }
.udemy-main-col { flex: 1; min-width: 0; }
.udemy-side-col { width: 230px; flex-shrink: 0; }
.udemy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (max-width: 900px) {
  .udemy-two-col { flex-direction: column; }
  .udemy-side-col { width: 100%; }
}

/* ============================================================
   NEW ADMIN PANEL LAYOUT (sidebar with dropdowns + topbar)
   ============================================================ */
body.pa-body { background: #F4F6F4; }
.pa-shell { display: flex; height: 100vh; overflow: hidden; }

.pa-sidebar {
  width: 250px; flex-shrink: 0; display: flex; flex-direction: column; height: 100%;
  background: var(--white); border-right: 1px solid var(--gray-border);
  transition: transform .25s ease; z-index: 40;
}
.pa-sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: .625rem 1.2rem; background: linear-gradient(160deg, var(--sage) 0%, var(--sage-dark) 100%); border-bottom: 2px solid var(--sage-dark); min-height: 62px; box-sizing: border-box; }
.pa-brand-name { color: #fff; font-weight: 900; font-size: 1.4rem; line-height: 1.1; }
.pa-brand-sub { color: rgba(13,27,14,.6); font-size: .7rem; }

.pa-nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; }
.pa-nav-link {
  display: flex; align-items: center; gap: .8rem; padding: .8rem .85rem; border-radius: 10px;
  color: rgba(13,27,14,.85); font-size: 1rem; font-weight: 600; cursor: pointer;
  list-style: none; margin-bottom: .3rem;
}
.pa-nav-link::-webkit-details-marker { display: none; }
.pa-nav-link:hover { background: var(--pale-green); }
.pa-nav-active { background: linear-gradient(135deg, var(--darker-green), var(--dark-green)) !important; color: var(--gold) !important; }
.pa-nav-icon { width: 22px; text-align: center; flex-shrink: 0; font-size: 1.05rem; }
.pa-nav-caret { margin-left: auto; opacity: .5; transition: transform .2s ease; }
.pa-nav-group[open] > summary .pa-nav-caret { transform: rotate(90deg); }
.pa-nav-count-badge {
  background: #E53935; color: #fff; font-size: .7rem; font-weight: 800; min-width: 18px; height: 18px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; margin-left: .5rem;
}
.pa-nav-group[open] > summary .pa-nav-count-badge { margin-left: .5rem; }
.pa-nav-count-inline { color: #E53935; font-weight: 700; font-size: .78rem; }

/* Admin Messages: Messenger-style inbox */
.pa-inbox-layout { display: flex; gap: 1.2rem; align-items: flex-start; }
.pa-inbox-list {
  width: 300px; flex-shrink: 0; background: #fff; border: 1px solid var(--gray-border);
  border-radius: 14px; overflow: hidden; max-height: 560px; overflow-y: auto;
}
.pa-inbox-item {
  display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem;
  text-decoration: none; border-bottom: 1px solid var(--gray-border); position: relative;
}
.pa-inbox-item:hover { background: var(--pale-green); }
.pa-inbox-item-active { background: var(--pale-green); }
.pa-inbox-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--darker-green); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem;
  flex-shrink: 0;
}
.pa-inbox-item-body { min-width: 0; flex: 1; }
.pa-inbox-item-name { font-size: .92rem; color: var(--text-dark); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-inbox-item-preview { font-size: .8rem; color: var(--gray-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-inbox-item-unread .pa-inbox-item-name,
.pa-inbox-item-unread .pa-inbox-item-preview { font-weight: 800; color: var(--darker-green); }
.pa-inbox-dot { width: 9px; height: 9px; border-radius: 50%; background: #1877F2; flex-shrink: 0; }
.pa-inbox-thread { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .pa-inbox-layout { flex-direction: column; }
  .pa-inbox-list { width: 100%; max-height: 260px; }
}
.pa-nav-children { margin: .1rem 0 .3rem 1.9rem; display: flex; flex-direction: column; }
.pa-nav-children a { color: rgba(13,27,14,.7); font-size: .9rem; padding: .55rem .6rem; border-radius: 8px; }
.pa-nav-children a:hover { background: rgba(255,255,255,.35); color: var(--darker-green); }

.pa-sidebar-footer { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; border-top: 1px solid rgba(0,0,0,.1); }
.pa-footer-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--darker-green), var(--dark-green)); color: var(--gold);
  font-weight: 800; font-size: .78rem; display: flex; align-items: center; justify-content: center;
}
.pa-footer-avatar-photo { object-fit: cover; background: none; }
.pa-footer-info { flex: 1; min-width: 0; }
.pa-footer-name { color: var(--darker-green); font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-footer-email { color: rgba(13,27,14,.55); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-footer-position {
  display: inline-block; margin-top: .15rem; padding: .12rem .5rem; border-radius: 10px;
  background: var(--pale-green); color: var(--dark-green); font-size: .65rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pa-footer-logout { color: rgba(13,27,14,.6); font-size: 1rem; flex-shrink: 0; }

.pa-mobile-overlay { display: none; }

.pa-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.pa-topbar {
  background: linear-gradient(160deg, var(--sage) 0%, var(--sage-dark) 100%); border-bottom: 2px solid var(--sage-dark);
  flex-shrink: 0; padding: .9rem 1.4rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
}
.pa-hamburger { display: none; background: none; border: none; font-size: 1.3rem; color: var(--text-dark); cursor: pointer; }
.pa-topbar-title { min-width: 0; }
.pa-topbar-title h1 { font-size: 1.15rem; color: var(--text-dark); font-weight: 800; margin: 0; }
.pa-topbar-date { font-size: .78rem; color: var(--darker-green); opacity: .8; }
.pa-topbar-orgpill {
  grid-column: 2; justify-self: center; text-align: center;
  color: var(--darker-green); font-weight: 600; font-style: normal;
  font-size: 1.25rem; letter-spacing: .2px; line-height: 1.2; white-space: nowrap;
}
.pa-greeting { font-size: 1.4rem; font-weight: 800; color: var(--text-dark); margin: 0 0 1rem; }
.pa-topbar-actions { display: flex; align-items: center; gap: .6rem; grid-column: 3; }
.pa-icon-btn {
  width: 36px; height: 36px; border-radius: 10px; background: var(--pale-green); display: flex;
  align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; list-style: none;
}
.pa-icon-btn::-webkit-details-marker { display: none; }
.pa-user-menu { position: relative; }
.pa-topbar-avatar {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; list-style: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--darker-green);
  font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center;
}
.pa-topbar-avatar::-webkit-details-marker { display: none; }
.pa-user-dropdown {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 50; min-width: 210px;
  background: #fff; border: 1px solid var(--gray-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15); overflow: hidden;
}
.pa-user-dropdown-header { padding: .8rem 1rem; background: var(--pale-green); border-bottom: 1px solid var(--gray-border); }
.pa-user-dropdown-header div { font-size: .78rem; color: var(--gray-text); }
.pa-user-dropdown a { display: block; padding: .65rem 1rem; font-size: .87rem; color: var(--text-dark); }
.pa-user-dropdown a:hover { background: var(--pale-green); }
.pa-user-dropdown a + a { border-top: 1px solid var(--gray-border); }

.pa-content { flex: 1; overflow-y: auto; padding: 1.5rem 1.6rem; }
.pa-content h1 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--text-dark); }

@media (max-width: 900px) {
  .pa-hamburger { display: block; }
  .pa-sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
  .pa-sidebar.pa-sidebar-open { transform: translateX(0); }
  .pa-mobile-overlay.pa-overlay-open {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39;
  }
}

/* new stat cards for redesigned dashboard */
.pa-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.pa-stat-card { background: #fff; border: 1px solid var(--gray-border); border-radius: 14px; padding: 1.1rem 1.2rem; transition: box-shadow .15s ease, transform .15s ease; }
a.pa-stat-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.14) !important; transform: translateY(-3px); border-color: var(--mid-green) !important; }
.pa-stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .8rem; }
.pa-stat-label { font-size: .82rem; color: var(--gray-text); font-weight: 600; }
.pa-stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.pa-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); margin-bottom: .2rem; }
.pa-stat-sub { font-size: .74rem; color: var(--gray-text); }

/* dashboard chart + activity layout */
.pa-dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; margin-bottom: 1.4rem; align-items: stretch; }
.pa-dash-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; margin-bottom: 1.4rem; align-items: stretch; }
.pa-revenue-total { font-size: 1.3rem; font-weight: 800; color: var(--dark-green); margin-bottom: .6rem; }
.pa-revenue-total span { font-size: .7rem; font-weight: 600; color: var(--gray-text); }
@media (max-width: 1100px) {
  .pa-dash-grid-3 { grid-template-columns: 1fr; }
}
.pa-chart-box, .pa-activity-box { margin: 0; }
.pa-bar-chart { display: flex; align-items: flex-end; gap: 1rem; height: 180px; padding-top: .5rem; }
.pa-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.pa-bar-value { font-size: .78rem; font-weight: 700; color: var(--dark-green); margin-bottom: .3rem; }
.pa-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--pale-green); border-radius: 6px; overflow: hidden; }
.pa-bar-fill { width: 100%; background: linear-gradient(180deg, var(--gold), var(--dark-green)); border-radius: 6px 6px 0 0; transition: height .4s ease; }
.pa-bar-label { font-size: .74rem; color: var(--gray-text); margin-top: .5rem; font-weight: 600; }
.pa-bar-chart-compact { height: 130px; }
.pa-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.pa-legend-item { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--gray-text); font-weight: 600; }
.pa-legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.pa-activity-row { display: flex; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--gray-border); }
.pa-activity-row:last-of-type { border-bottom: none; }
.pa-activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: .4rem; flex-shrink: 0; }
.pa-activity-text { font-size: .76rem; color: var(--text-dark); }
.pa-activity-time { font-size: .68rem; color: var(--gray-text); margin-top: .1rem; }

/* ============================================================
   "Momentum Dashboard"-style panel components — dark pill
   headers, olive-toned charts, horizontal severity bars, gauge
   ============================================================ */
.pa-pill-header {
  display: inline-block; background: #1E2430; color: #fff; font-weight: 700; font-size: .82rem;
  letter-spacing: .3px; padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1rem;
}
.pa-panel { background: #F3F5E9; border-radius: 16px; padding: 1.3rem; }

/* olive-scale bar chart (replaces gold->green gradient with sequential olive shades) */
.pa-bar-fill-olive { width: 100%; border-radius: 6px 6px 0 0; transition: height .4s ease; }

/* horizontal severity bars (e.g. Course Enrollment Overview) */
.pa-hbar-row { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; }
.pa-hbar-label { width: 140px; flex-shrink: 0; font-size: .82rem; font-weight: 600; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-hbar-track { flex: 1; background: var(--pale-green); border-radius: 6px; height: 22px; overflow: hidden; }
.pa-hbar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; justify-content: flex-end; padding-right: .5rem; color: #fff; font-size: .74rem; font-weight: 700; white-space: nowrap; transition: width .4s ease; }

/* gauge (half-circle) chart */
.pa-gauge-wrap { text-align: center; }
.pa-gauge-value { font-size: 2.1rem; font-weight: 800; color: var(--dark-green); margin-top: -2.6rem; }
.pa-gauge-label { font-size: .78rem; color: var(--gray-text); margin-top: .3rem; }


@media (max-width: 900px) {
  .pa-dash-grid { grid-template-columns: 1fr; }
}

/* ---------- Sidebar upgrade CTA section (Become a Member / Apply for Affiliate) ---------- */
.sidebar-upgrade-section {
  margin: 1rem 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sidebar-upgrade-btn {
  display: block;
  text-align: center;
  padding: .6rem .8rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
}
.sidebar-upgrade-btn-active { background: var(--gold); color: var(--darker-green); }
.sidebar-upgrade-btn-active:hover { opacity: .9; }
.sidebar-upgrade-btn-disabled { background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); cursor: not-allowed; }
.sidebar-upgrade-btn-done { background: rgba(255,255,255,.1); color: var(--light-green); }


/* Static mission gallery (below Support Our Mission buttons) */
.mission-gallery-section { padding: 1rem 0 3rem; }
.mission-gallery-wrap { width: 100%; }
.mission-gallery { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: #fff; }
.mission-gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.mission-gallery-slide.active { opacity: 1; pointer-events: auto; }
.mission-gallery-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mission-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--dark-green); font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.mission-gallery-arrow:hover { background: #fff; }
.mission-gallery-prev { left: .8rem; }
.mission-gallery-next { right: .8rem; }