/* ═══════════════════════════════════════════════════════════
   CAF SHARED DESIGN TOKENS
   Single source of truth for all CAFsessor / CAFnizer pages.
   Page-level :root blocks reference these via var(--caf-*).
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Brand: green ── */
  --caf-green:          #007a3d;
  --caf-green-l:        #00a34f;
  --caf-green-dark:     #00472a;       /* dark text green — used in style.css */
  --caf-green-dim:      rgba(0, 122, 61, 0.10);

  /* ── Brand: gold & navy ── */
  --caf-gold:           #d4a574;
  --caf-navy:           #0f1724;
  --caf-navy-2:         #172033;

  /* ── Surface / background ── */
  --caf-bg:             #f0f4f3;
  --caf-surface:        #ffffff;
  --caf-surface-soft:   #f9faf9;
  --caf-surface-glass:  rgba(255, 255, 255, 0.58);

  /* ── Text ── */
  --caf-text:           #172033;
  --caf-muted:          #64748b;

  /* ── Border ── */
  --caf-border:         #e5ede9;
  --caf-border-dim:     rgba(0, 0, 0, 0.08);

  /* ── Radius ── */
  --caf-radius-sm:      8px;
  --caf-radius-md:      14px;
  --caf-radius-lg:      20px;
  --caf-radius-pill:    999px;

  /* ── Shadow ── */
  --caf-shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.06);
  --caf-shadow-md:      0 10px 30px rgba(0, 0, 0, 0.10);

  /* ── Spacing ── */
  --caf-space-xs:       4px;
  --caf-space-sm:       8px;
  --caf-space-md:       16px;
  --caf-space-lg:       24px;
  --caf-space-xl:       32px;

  /* ── Touch target (mobile a11y) ── */
  --caf-touch-target:   44px;

  /* ── Legacy aliases — preserve existing style.css consumers ── */
  --surface:            rgba(255, 255, 255, 0.58);
  --surface-strong:     rgba(255, 255, 255, 0.64);
  --text-dark:          rgba(5, 32, 15, 0.78);
  --text-muted:         rgba(5, 32, 15, 0.58);
  --shadow:             0 18px 42px rgba(0, 0, 0, 0.08);
  --shadow-light:       0 3px 18px rgba(0, 0, 0, 0.055);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  background: #f4faf6;
  color: var(--text-dark);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("images/caf/caf-hq-1.webp") center center / cover no-repeat;
  filter: saturate(1.06) contrast(1.06) brightness(1.04);
  opacity: 0.42;
  transform: scale(1.01);
  z-index: 0;
}

/* Per-page background variants using the 3 authentic CAF HQ photos */
body.page-auth::before     { background-image: url("images/caf/caf-hq-2.webp"); }
body.page-home::before     { background-image: url("images/caf/caf-hq-3.webp"); }
body.cafnizer-page::before { background-image: url("images/caf/caf-hq-1.webp"); }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(238, 249, 243, 0.58) 48%, rgba(255, 255, 255, 0.78) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.3));
  z-index: 0;
}

/* On mobile, disable the CSS filter and scale on body::before.
   The filter creates an additional GPU compositing layer that is expensive
   on low-memory devices. Opacity reduced slightly to compensate. */
@media (max-width: 768px) {
  body::before {
    filter: none;
    opacity: 0.28;
    transform: none;
  }
}

body a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

[id] {
  scroll-margin-top: 82px;
}

#departments,
#about,
#guest-access {
  scroll-margin-top: 88px;
}

[hidden],
.is-authenticated .auth-only,
.is-authenticated .guest-only,
.is-authenticated .auth-section {
  display: none !important;
}

.member-only {
  display: none !important;
}

.is-authenticated .member-only {
  display: block !important;
}

.is-authenticated .member-only.member-grid {
  display: grid !important;
}

.is-authenticated .hero-actions.member-only {
  display: flex !important;
}

/* Index page layout */
.page-shell {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px 72px;
  position: relative;
  z-index: 1;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 24px 0;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 3px solid var(--caf-green);
  box-shadow: var(--shadow-light);
  position: relative;
  z-index: 100;
}

.brand {
  font-size: 1.4rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--caf-green-dark);
  text-decoration: none;
  transition: opacity 0.3s ease;
  letter-spacing: -0.5px;
}

.brand:hover {
  opacity: 0.9;
}

.brand-logo {
  height: 100px;
  width: 100px;
  border-radius: 12px;
  object-fit: contain;
  background: white;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  color: var(--caf-green-dark);
  font-size: 0.95rem;
  border: 2px solid var(--caf-green);
}

.site-nav a:hover {
  background: var(--caf-green);
  border-color: var(--caf-green);
  color: white;
  transform: translateY(-2px);
}

.site-nav a:hover {
  background: rgba(0, 122, 61, 0.12);
  color: var(--caf-green-dark);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
  padding: 64px 0 48px;
}

.hero-copy {
  padding: 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(12px);
}

.eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 12px 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.2), rgba(212, 165, 116, 0.2));
  color: var(--caf-green-dark);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 122, 61, 0.2);
}

.hero-copy h1 {
  font-size: clamp(3.2rem, 5vw, 4.8rem);
  line-height: 1;
  margin-bottom: 24px;
  color: var(--caf-green-dark);
  font-weight: 900;
  letter-spacing: -1px;
}

.hero-copy p {
  max-width: 660px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.hero-card h2 {
  margin-bottom: 14px;
}

.hero-card p,
.hero-card li {
  color: var(--text-dark);
}

.hero-card ul {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-card li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-left: 4px;
}

.hero-card li::before {
  content: "\2713";
  color: var(--caf-green);
}

.cards-section {
  padding: 28px 0 24px;
}

.cards-section h2,
.about-section h2,
.auth-card h2 {
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  margin-bottom: 32px;
  color: var(--caf-green-dark);
  font-weight: 900;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.68);
  border: 2px solid rgba(0, 122, 61, 0.1);
  border-radius: 20px;
  padding: 28px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(10px);
}

.feature-card:hover {
  border-color: var(--caf-green);
  box-shadow: 0 12px 32px rgba(0, 122, 61, 0.15);
  transform: translateY(-4px);
}

.feature-card h3 {
  margin-bottom: 8px;
  color: var(--caf-green-dark);
  font-size: 1.2rem;
}

.feature-card p {
  color: var(--text-muted);
  line-height: 1.7;
}

.dept-badge {
  width: 100%;
  height: 120px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.12), rgba(0, 122, 61, 0.24));
}

.about-section {
  padding: 36px 0 44px;
}

.about-copy p {
  color: var(--text-muted);
  line-height: 1.85;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.image-card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.image-card img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.access-section,
.member-welcome {
  margin: 28px 0;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(12px);
}

.access-section .section-heading p,
.member-welcome .section-heading p {
  max-width: 860px;
  color: var(--text-muted);
  line-height: 1.75;
}

.access-grid,
.member-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.access-card,
.member-tool {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 32px rgba(0, 43, 24, 0.075);
}

.access-card > span {
  align-self: start;
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(0, 122, 61, 0.09);
  color: var(--caf-green-dark);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.access-card h3 {
  color: var(--caf-green-dark);
  font-size: 1.35rem;
}

.access-card ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.access-card li {
  display: flex;
  gap: 10px;
  color: var(--text-muted);
  line-height: 1.5;
}

.access-card li::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.4);
}

.access-card.is-preview {
  position: relative;
  overflow: hidden;
}

.access-card.is-preview::after {
  content: "Preview only";
  position: absolute;
  top: 20px;
  right: 20px;
  max-width: 94px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(5, 32, 15, 0.08);
  color: rgba(5, 32, 15, 0.54);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.access-card.is-member {
  border-color: rgba(0, 122, 61, 0.3);
  background:
    linear-gradient(135deg, rgba(0, 122, 61, 0.08), rgba(212, 165, 116, 0.12)),
    rgba(255, 255, 255, 0.9);
}

.access-card .btn {
  align-self: end;
  justify-self: start;
  min-width: 0;
  padding: 10px 14px;
  font-size: 0.84rem;
}

.member-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.member-tool {
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.member-tool:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 122, 61, 0.34);
}

.member-tool strong {
  color: var(--caf-green-dark);
}

.member-tool span {
  color: var(--text-muted);
  line-height: 1.55;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-visual img {
  width: 100%;
  max-height: 520px;
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0, 122, 61, 0.25);
}

.about-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 28px;
}

.about-figure {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-figure img {
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 360px;
}

.about-figure figcaption {
  padding: 18px 20px;
  font-size: 0.95rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.95);
}

.platform-section {
  padding: 34px 0;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.platform-grid article {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 32px rgba(0, 43, 24, 0.075);
}

.platform-grid span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.1);
  color: var(--caf-green-dark);
  font-weight: 900;
  font-size: 0.78rem;
}

.platform-grid h3 {
  color: var(--caf-green-dark);
}

.platform-grid p {
  color: var(--text-muted);
  line-height: 1.7;
}

.auth-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 32px 0 24px;
}

.auth-column {
  background: rgba(255, 255, 255, 0.68);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.login-panel {
  background: linear-gradient(180deg, rgba(0, 122, 61, 0.08), rgba(255, 255, 255, 0.96));
}

.register-panel {
  background: var(--surface-strong);
}

.auth-column h2 {
  margin-bottom: 16px;
}

.auth-column p {
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.75;
}

.auth-column form label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.auth-column form input,
.auth-column form select {
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fbfbfb;
  color: var(--text-dark);
  font-size: 0.96rem;
}

.auth-column form input:focus,
.auth-column form select:focus {
  outline: none;
  border-color: var(--caf-green);
  box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.12);
}

.dept-link {
  margin-top: auto;
  align-self: flex-start;
  align-items: center;
  margin-bottom: 0;
}

.department-hero > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.department-hero h1 {
  color: var(--caf-green-dark);
  font-weight: 900;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.1;
}

.department-hero p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.department-hero img {
  width: 100%;
  border-radius: 28px;
  object-fit: cover;
  min-height: 320px;
  box-shadow: var(--shadow);
}

.department-details {
  display: grid;
  gap: 24px;
  margin-bottom: 28px;
}

.department-details article {
  background: rgba(255, 255, 255, 0.68);
  border: 2px solid rgba(0, 122, 61, 0.1);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.department-details article:hover {
  border-color: var(--caf-green);
  box-shadow: 0 12px 32px rgba(0, 122, 61, 0.12);
}

.department-details h2 {
  margin-bottom: 20px;
  color: var(--caf-green-dark);
  font-weight: 800;
  font-size: 1.3rem;
}

.department-details ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.department-details li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.department-details li::before {
  content: "•";
  color: var(--caf-green);
  font-size: 1.2rem;
  line-height: 1;
}

.course-list {
  margin-bottom: 32px;
}

.referee-clip-library {
  margin: 28px 0 34px;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.72), rgba(255, 255, 255, 0.58));
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.clip-library-header {
  display: grid;
  gap: 8px;
  max-width: 880px;
  margin-bottom: 22px;
}

.clip-library-kicker {
  color: var(--division-accent, #64748b);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.clip-library-header h2 {
  margin: 0;
  color: #172033;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.08;
}

.clip-library-header p {
  margin: 0;
  color: #334155;
  font-size: 0.98rem;
  line-height: 1.7;
}

.clip-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.clip-filters label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clip-filters select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(100, 116, 139, 0.26);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #162033;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.clip-topic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 22px;
}

.clip-topic-pills button {
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: #26364f;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 850;
  min-height: 34px;
  padding: 7px 12px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.clip-topic-pills button:hover,
.clip-topic-pills button.is-active {
  background: var(--division-accent, #64748b);
  border-color: var(--division-accent, #64748b);
  color: #fff;
  transform: translateY(-1px);
}

.referee-clip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.referee-clip-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 210px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.referee-clip-card[hidden] {
  display: none;
}

.referee-clip-card video {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border-radius: 14px;
  background: #0f172a;
  object-fit: cover;
}

.referee-clip-card div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.referee-clip-card span {
  color: var(--division-accent, #64748b);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referee-clip-card h3 {
  margin: 0;
  color: #132033;
  font-size: 1.02rem;
  line-height: 1.25;
}

.referee-clip-card p {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.55;
}

.referee-clip-card small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.clip-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #243248;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
}

.clip-select input {
  width: 15px;
  height: 15px;
  accent-color: var(--division-accent, #64748b);
}

.referee-topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
}

.referee-topic-cloud span {
  padding: 6px 9px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: #334155;
  font-size: 0.74rem;
  font-weight: 800;
}

.referee-workshop-panel {
  margin: 30px 0 38px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(241, 245, 249, 0.62));
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.09);
  backdrop-filter: blur(14px);
}

.referee-workshop-panel.is-locked {
  position: relative;
}

.referee-workshop-panel.is-locked .workshop-grid,
.referee-workshop-panel.is-locked .trend-video-strip,
.referee-workshop-panel.is-locked .video-test-results {
  opacity: 0.62;
}

.referee-workshop-panel.is-locked input,
.referee-workshop-panel.is-locked select,
.referee-workshop-panel.is-locked button {
  cursor: not-allowed;
}

.workshop-lock-note {
  width: fit-content;
  max-width: 760px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #334155;
  font-size: 0.88rem;
  font-weight: 800;
}

.workshop-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.82fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.playlist-builder-card,
.qr-test-card,
.expert-decision-card,
.video-test-results,
.trend-video-strip article {
  min-width: 0;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.playlist-builder-card,
.qr-test-card,
.expert-decision-card,
.video-test-results {
  padding: 18px;
}

.tool-card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.tool-card-header > span {
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--division-accent, #64748b);
  color: #fff;
  font-weight: 950;
}

.tool-card-header h3 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 1rem;
  line-height: 1.25;
}

.tool-card-header p {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.55;
}

.playlist-builder-card label {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.playlist-builder-card input,
.playlist-builder-card select,
.qr-test-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #172033;
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 750;
}

.playlist-summary {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(100, 116, 139, 0.08);
}

.playlist-summary strong {
  color: #172033;
  font-size: 0.95rem;
}

.playlist-summary small {
  color: #64748b;
  font-weight: 750;
}

.selected-playlist {
  display: grid;
  gap: 7px;
  min-height: 42px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.selected-playlist li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
}

.selected-playlist li span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.12);
  color: #172033;
}

.selected-playlist .is-muted {
  color: #64748b;
}

.qr-code {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 3px;
  width: min(100%, 218px);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 6px rgba(248, 250, 252, 0.9);
}

.qr-code span {
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.08);
}

.qr-code span.is-filled {
  background: #172033;
}

.qr-code img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
}

.qr-fallback {
  display: none;
  grid-column: 1 / -1;
  align-self: end;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.workshop-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.expert-decision-list {
  display: grid;
  gap: 10px;
}

.expert-decision-list div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(100, 116, 139, 0.08);
}

.expert-decision-list strong {
  color: #172033;
  font-size: 0.9rem;
}

.expert-decision-list small {
  color: #475569;
  line-height: 1.45;
}

.trend-video-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.trend-video-strip article {
  padding: 16px;
}

.trend-video-strip span {
  color: var(--division-accent, #64748b);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trend-video-strip h3 {
  margin: 6px 0;
  color: #172033;
  font-size: 0.98rem;
}

.trend-video-strip p {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.55;
}

.video-test-results {
  margin-top: 16px;
}

.video-test-results .table-wrap {
  overflow-x: auto;
}

.video-test-results table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
}

.video-test-results th,
.video-test-results td {
  padding: 12px;
  border-bottom: 1px solid rgba(100, 116, 139, 0.14);
  text-align: left;
  color: #334155;
  font-size: 0.86rem;
}

.video-test-results th {
  background: rgba(100, 116, 139, 0.1);
  color: #172033;
  font-weight: 950;
}

.video-test-results td {
  background: rgba(255, 255, 255, 0.54);
  font-weight: 750;
}

.cafnizer-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 28px 0 34px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(241, 245, 249, 0.62));
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.cafnizer-entry h2 {
  margin: 6px 0 8px;
  color: #172033;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.cafnizer-entry p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

.cafnizer-page main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  min-width: 0;
}

html:has(body.cafnizer-page),
body.cafnizer-page {
  overflow-x: hidden;
}

.cafnizer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 22px;
  align-items: stretch;
  margin: 28px 0 4px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(241, 245, 249, 0.66)),
    url("images/caf/Caf background.jpeg") center / cover;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.09);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.cafnizer-hero > div {
  min-width: 0;
}

.cafnizer-hero h1 {
  margin: 8px 0 12px;
  color: #172033;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.04;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cafnizer-hero p {
  max-width: 820px;
  color: #334155;
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.cafnizer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cafnizer-status-panel {
  display: grid;
  gap: 12px;
}

.cafnizer-status-panel article {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 96px;
  padding: 18px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.cafnizer-status-panel span {
  color: var(--division-accent, #64748b);
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}

.cafnizer-status-panel small {
  color: #475569;
  font-size: 0.82rem;
  font-weight: 850;
}

.cafnizer-access-note {
  padding: 12px 14px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  color: #334155;
  font-weight: 850;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.cafnizer-access-note.is-saved {
  border-color: rgba(22, 145, 89, 0.34);
  background: rgba(229, 247, 239, 0.88);
  color: #0f5132;
}

.cafnizer-personal-panel {
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid rgba(0, 122, 61, 0.24);
  border-radius: 20px;
  background: #0f1724;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.personal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.personal-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.personal-grid h3 {
  margin: 0 0 10px;
  color: #172033;
  font-size: 0.98rem;
}

.cafnizer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

.cafnizer-card {
  min-width: 0;
  max-width: 100%;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(12px);
}

.cafnizer-editor-hidden {
  display: none !important;
}

.cafnizer-primary-card {
  grid-column: 1 / -1;
  order: -1;
}

.cafnizer-card h2 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}

.cafnizer-form,
.cafnizer-field {
  display: grid;
  gap: 12px;
}

.cafnizer-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0;
}

.cafnizer-form label,
.cafnizer-field {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cafnizer-form input,
.cafnizer-form select,
.cafnizer-form textarea,
.cafnizer-field select,
.cafnizer-card > input {
  width: 100%;
  min-height: 42px;
  margin-top: 7px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #172033;
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 750;
  text-align: center;
}

.cafnizer-form textarea {
  min-height: 92px;
  padding: 12px;
  text-align: left;
  resize: vertical;
}

.cafnizer-form input[type="file"] {
  padding: 9px 12px;
  text-align: left;
}

.cafnizer-workshop-summary {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.cafnizer-workshop-summary strong {
  display: block;
  margin-top: 5px;
  color: #0f2f24;
  font-size: 1.02rem;
}

.cafnizer-workshop-summary small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-weight: 800;
}

.summary-status {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(22, 145, 89, 0.12);
  color: #0f5132;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.summary-status.is-muted {
  background: rgba(100, 116, 139, 0.10);
  color: #64748b;
}

.cafnizer-workshop-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.cafnizer-workshop-summary dl div {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.78);
}

.cafnizer-workshop-summary dt {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.cafnizer-workshop-summary dd {
  margin: 3px 0 0;
  color: #1e293b;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.cafnizer-form input:disabled,
.cafnizer-form select:disabled,
.cafnizer-form textarea:disabled,
.cafnizer-card button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.cafnizer-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.participant-picker {
  display: grid;
  align-content: start;
  min-height: 92px;
  gap: 8px;
  margin-top: 8px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
}

.cafnizer-form .participant-search,
.participant-search {
  width: 100%;
  min-height: 36px;
  margin: 0;
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: #172033;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 0 10px;
  text-align: left;
}

.participant-options {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.participant-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(100, 116, 139, 0.08);
  cursor: pointer;
  text-transform: none;
}

.participant-option input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--division-accent, #64748b);
}

.participant-option span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.participant-option strong {
  color: #172033;
  font-size: 0.84rem;
  line-height: 1.2;
}

.participant-option small {
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.participant-links {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.participant-links div {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(100, 116, 139, 0.08);
}

.participant-links strong {
  color: #172033;
  font-size: 0.82rem;
}

.participant-links small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.participant-links input {
  margin: 0;
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#communication-list,
.cafnizer-list,
.participant-links,
.workshop-actions {
  min-width: 0;
}

.cafnizer-list a,
#communication-list a,
.workshop-actions a,
.participant-links input {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.fixed-data-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.45;
}

.cafnizer-day-preview {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.cafnizer-day-preview > div {
  display: grid;
  gap: 4px;
}

.cafnizer-day-preview strong {
  color: #172033;
  font-size: 0.92rem;
}

.cafnizer-day-preview small,
.cafnizer-day-preview p {
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

.cafnizer-day-preview ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cafnizer-day-preview li {
  display: grid;
  grid-template-columns: 98px 86px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.08);
  color: #172033;
  font-size: 0.84rem;
  font-weight: 800;
}

.cafnizer-day-preview li span {
  color: var(--division-accent, #64748b);
  font-weight: 950;
}

.cafnizer-day-preview li small {
  grid-column: 3;
  display: block;
  font-weight: 700;
}

.cafnizer-day-preview li strong,
.program-sequence {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(100, 116, 139, 0.12);
  color: #172033;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.cafnizer-day-preview li.has-overlap,
.program-draft-item.has-overlap {
  border: 1px solid rgba(185, 28, 28, 0.24);
  background: rgba(254, 242, 242, 0.72);
}

.cafnizer-day-preview li.has-overlap strong,
.program-draft-item.has-overlap .program-sequence {
  background: rgba(185, 28, 28, 0.12);
  color: #991b1b;
}

.program-sequence {
  margin-bottom: 2px;
}

.program-draft-item .program-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding: 0;
  background: transparent;
}

.program-draft-item .program-item-actions .btn {
  min-width: 82px;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.78rem;
}

.cafnizer-list div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(100, 116, 139, 0.08);
}

.cafnizer-list strong {
  color: #172033;
  font-size: 0.9rem;
}

.cafnizer-list small,
.cafnizer-list p {
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

.cafnizer-qr {
  margin-top: 14px;
}

.cafnizer-table-wrap {
  overflow-x: auto;
}

.cafnizer-table-wrap table {
  min-width: 820px;
}

.cafnizer-table-wrap .cafnizer-users-admin-table {
  min-width: 1040px;
}

/* ── Users admin table: full visual styling ── */
.cafnizer-users-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cafnizer-users-admin-table thead th {
  background: rgba(0, 122, 61, 0.07);
  border-top: 2px solid rgba(0, 122, 61, 0.14);
  border-bottom: 2px solid rgba(0, 122, 61, 0.14);
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #007a3d;
  text-align: left;
  white-space: nowrap;
}

.cafnizer-users-admin-table tbody tr {
  border-bottom: 1px solid #f0f4f2;
  transition: background 0.12s;
}

.cafnizer-users-admin-table tbody tr:hover {
  background: #f4faf6;
}

.cafnizer-users-admin-table tbody tr:nth-child(even) {
  background: #fafcfb;
}

.cafnizer-users-admin-table tbody tr:nth-child(even):hover {
  background: #eef8f2;
}

.cafnizer-users-admin-table td {
  padding: 10px 14px;
  vertical-align: middle;
  color: #334155;
}

.cafnizer-users-admin-table td select {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 8px;
  background: #fff;
  color: #172033;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cafnizer-users-admin-table td select:focus {
  outline: none;
  border-color: rgba(0, 122, 61, 0.50);
  box-shadow: 0 0 0 3px rgba(0, 122, 61, 0.10);
}

.cafnizer-table-wrap th,
.cafnizer-table-wrap td {
  white-space: nowrap;
}

.cafnizer-table-wrap td strong,
.cafnizer-table-wrap td small {
  display: block;
}

.cafnizer-table-wrap td small {
  margin-top: 2px;
  color: #64748b;
  font-size: 0.72rem;
}

.cafnizer-user-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cafnizer-user-toolbar input {
  flex: 1 1 320px;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: #172033;
  font-size: 0.9rem;
  font-weight: 750;
}

.cafnizer-user-toolbar span {
  flex: 0 0 auto;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 900;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.danger-action {
  border-color: rgba(190, 24, 24, 0.22) !important;
  color: #991b1b !important;
}

.danger-action:hover,
.danger-action:focus-visible {
  background: rgba(190, 24, 24, 0.1) !important;
}

@media (max-width: 1180px) {
  .referee-clip-grid {
    grid-template-columns: 1fr;
  }

  .workshop-grid,
  .trend-video-strip,
  .cafnizer-hero,
  .cafnizer-entry,
  .personal-grid {
    grid-template-columns: 1fr;
  }

  .cafnizer-entry .btn {
    width: fit-content;
  }
}

@media (max-width: 760px) {
  .referee-clip-library {
    border-radius: 18px;
    padding: 18px;
  }

  .referee-workshop-panel {
    border-radius: 18px;
    padding: 18px;
  }

  .clip-filters {
    grid-template-columns: 1fr;
  }

  .referee-clip-card {
    grid-template-columns: 1fr;
  }

  .referee-clip-card video {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  .workshop-actions {
    grid-template-columns: 1fr;
  }

  .qr-code {
    width: min(100%, 190px);
  }

  .cafnizer-hero,
  .cafnizer-card,
  .cafnizer-entry {
    border-radius: 18px;
  }

  .cafnizer-hero {
    padding: 18px;
  }

  .cafnizer-form .form-row {
    grid-template-columns: 1fr;
  }

  .cafnizer-entry .btn,
  .cafnizer-actions .btn {
    width: 100%;
  }

  .cafnizer-user-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cafnizer-user-toolbar input {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
  }

  .cafnizer-user-toolbar span {
    width: 100%;
  }
}

.course-card:hover {
  border-color: var(--caf-green);
  box-shadow: 0 12px 32px rgba(0, 122, 61, 0.15);
  transform: translateY(-4px);
}

.course-card h3 {
  margin-bottom: 8px;
  color: var(--caf-green-dark);
  font-weight: 800;
  font-size: 1.1rem;
}

.course-date {
  color: var(--caf-green-dark);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.05em
}

.course-card h3 {
  margin-bottom: 6px;
}

.course-date {
  color: var(--caf-green-dark);
  font-weight: 700;
}

.apply-section {
  background: rgba(255, 255, 255, 0.66);
  border-radius: 28px;
  padding: 34px;
  box-shadow: inset 0 0 0 1px rgba(0, 122, 61, 0.08);
  backdrop-filter: blur(10px);
}

.apply-cta-card {
  text-align: center;
  padding: 8px 0;
}

.apply-cta-card h2 {
  font-size: 1.5rem;
  color: var(--text-dark, #1a2e22);
  margin: 0 0 10px;
}

.apply-cta-card > p {
  color: var(--text-muted, #6b7280);
  margin: 0 auto 28px;
  max-width: 480px;
}

.apply-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.department-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.department-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fbfbfb;
  color: var(--text-dark);
  font-size: 0.96rem;
}

/* Course and quiz styles */
.course-hero {
  margin: 28px 0;
}

.course-hero h1 {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  margin-bottom: 6px;
}

.course-video {
  margin: 18px 0;
}

.stage-block {
  margin: 22px 0;
  background: var(--surface);
  border-radius: 20px;
  padding: 18px;
}

.quiz-question { margin-bottom: 12px; }
.quiz-p { font-weight: 600; margin-bottom: 8px; }
.quiz-option { display: block; margin: 6px 0; }
.stage-result { margin-top: 12px; color: var(--caf-green-dark); font-weight: 700; }

.final-test { margin: 28px 0; }

/* Responsive for course pages */
@media (max-width: 900px) {
  .course-video video { max-height: 320px; }
  .course-hero { padding-right: 0; }
}

@media (max-width: 980px) {
  .department-hero,
  .course-grid {
    grid-template-columns: 1fr;
  }
}

/* Auth page styles */
.auth-page {
  min-height: 100vh;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 59, 24, 0.42);
  backdrop-filter: blur(2px);
}

.auth-page > * {
  position: relative;
  z-index: 1;
}

.auth-header {
  max-width: 980px;
  width: 100%;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
}

.auth-header h1 {
  font-size: clamp(2rem, 3vw, 3rem);
  margin-bottom: 8px;
}

.auth-header p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 660px;
}

.auth-grid {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.form-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  padding: 36px;
  box-shadow: var(--shadow);
}

.form-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.form-switch h2 {
  font-size: 1.65rem;
}

.form-switch a {
  color: var(--caf-green-dark);
  font-weight: 600;
}

.form-card label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.form-card input,
.form-card select {
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fbfbfb;
  color: var(--text-dark);
  font-size: 0.96rem;
}

.form-card input:focus,
.form-card select:focus {
  outline: none;
  border-color: var(--caf-green);
  box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.12);
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.checkbox-label input {
  width: auto;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 40px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--caf-green), var(--caf-green-dark));
  color: white;
  box-shadow: 0 4px 16px rgba(0, 122, 61, 0.25);
  font-weight: 800;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 122, 61, 0.35);
  background: var(--caf-green);
  color: white;
}

.btn-secondary {
  background: #ffffff;
  color: var(--caf-green-dark);
  border: 2px solid var(--caf-green);
}

.btn-secondary:hover {
  background: rgba(0, 122, 61, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 122, 61, 0.15);
}

@media (max-width: 1100px) {
  .hero,
  .auth-grid {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 760px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .site-nav a {
    min-width: 0;
  }

  .site-nav > .user-badge-wrap {
    flex: 1 1 100%;
    width: 100%;
  }

  .user-badge {
    min-width: 0;
    max-width: 100%;
  }

  .user-badge-text {
    min-width: 0;
  }

  .user-badge-name {
    max-width: 120px;
  }

  .site-nav a:hover {
    transform: none;
  }
}

@media (max-width: 560px) {
  .hero-copy h1 {
    font-size: 2.4rem;
  }

  .hero-card,
  .form-card,
  .feature-card {
    padding: 24px;
  }
}

/* Shared logged-in header */
.user-badge-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 122, 61, 0.24);
  border-radius: 999px;
  background: #fff;
  color: var(--caf-green-dark);
  text-decoration: none;
  font-weight: 800;
  box-shadow: var(--shadow-light);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 122, 61, 0.28);
  background: #f3f7f1;
}

.user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--caf-green), var(--caf-green-dark));
  font-size: 0.85rem;
}

.user-badge-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-badge-text {
  display: grid;
  gap: 2px;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
}

.user-badge-text small {
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-link {
  min-width: auto;
  padding: 10px 16px;
}

.site-nav > .user-badge-wrap {
  flex-shrink: 1;
  max-width: 240px;
}

.site-nav > .user-badge-wrap + .logout-link,
.site-nav > .user-badge-wrap ~ .logout-link {
  flex-shrink: 0;
}

.notification-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 30;
}

.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(0, 122, 61, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--caf-green-dark);
  box-shadow: 0 10px 22px rgba(0, 43, 24, 0.08);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.notification-bell-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: #c91f37;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
}

.notification-bell:hover,
.notification-bell:focus-visible,
.notification-bell[aria-expanded="true"] {
  background: rgba(0, 122, 61, 0.1);
  border-color: rgba(0, 122, 61, 0.32);
  box-shadow: 0 14px 28px rgba(0, 43, 24, 0.12);
  transform: translateY(-1px);
}

.notification-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(0, 122, 61, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 54px rgba(0, 43, 24, 0.16);
  backdrop-filter: blur(14px);
}

.notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 122, 61, 0.1);
}

.notification-panel-head strong {
  color: var(--caf-green-dark);
  font-size: 0.98rem;
}

.notification-panel-head span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.notification-list {
  display: grid;
  max-height: 360px;
  overflow: auto;
}

.notification-item,
.notification-empty {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid rgba(0, 122, 61, 0.08);
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font: inherit;
}

.notification-item:hover,
.notification-item:focus-visible {
  background: rgba(0, 122, 61, 0.06);
}

.notification-item.is-unread {
  background: rgba(0, 122, 61, 0.08);
}

.notification-type {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  font-size: 0.68rem;
  font-weight: 950;
}

.notification-item strong {
  color: var(--caf-ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

.notification-item small,
.notification-empty {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.notification-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px;
  background: rgba(0, 122, 61, 0.07);
  color: var(--caf-green-dark);
  font-size: 0.82rem;
  font-weight: 950;
  text-decoration: none;
}

.site-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 310px;
  z-index: 50;
}

.site-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-search-box {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid rgba(0, 122, 61, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(0, 43, 24, 0.07);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.site-search:focus-within .site-search-box {
  border-color: rgba(0, 122, 61, 0.42);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 28px rgba(0, 43, 24, 0.12);
}

.site-search input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 9px 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--caf-green-dark);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.site-search input::placeholder {
  color: rgba(5, 32, 15, 0.48);
}

.site-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 0;
  border-left: 1px solid rgba(0, 122, 61, 0.12);
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.site-search-submit:hover,
.site-search-submit:focus-visible {
  background: var(--caf-green);
  color: #fff;
}

.site-search-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(420px, calc(100vw - 28px));
  z-index: 120;
  max-height: min(420px, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(0, 122, 61, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 54px rgba(0, 43, 24, 0.16);
  backdrop-filter: blur(14px);
}

.site-search-result,
.site-search-empty {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid rgba(0, 122, 61, 0.08);
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}

.site-search-result:hover,
.site-search-result:focus-visible {
  background: rgba(0, 122, 61, 0.06);
}

.site-search-result strong {
  color: var(--caf-green-dark);
  font-size: 0.88rem;
  line-height: 1.3;
}

.site-search-result span,
.site-search-empty {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.cafnizer-nav-character {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 98px;
  min-height: 34px;
  padding: 5px 10px !important;
  border: 1px solid rgba(0, 122, 61, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--caf-green-dark) !important;
  font-size: 0.74rem !important;
  font-weight: 950 !important;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 43, 24, 0.08);
  white-space: nowrap;
}

.cafnizer-nav-character:hover,
.cafnizer-nav-character:focus-visible {
  background: rgba(0, 122, 61, 0.1) !important;
  transform: translateY(-1px);
}

.cafnizer-mini-face {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0, 122, 61, 0.36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 65% 38%, rgba(255, 255, 255, 0.96) 0 8px, transparent 9px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 247, 239, 0.96));
  box-shadow: inset 0 -2px 0 rgba(0, 122, 61, 0.1);
}

.cafnizer-mini-face::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: -5px;
  height: 9px;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(255, 255, 255, 0.35) 30% 42%, transparent 42%),
    var(--caf-green);
}

.cafnizer-mini-whistle {
  position: absolute;
  right: -7px;
  bottom: 1px;
  width: 10px;
  height: 7px;
  border: 2px solid var(--caf-gold);
  border-radius: 6px;
  background: #fff;
}

.cafnizer-mini-clipboard {
  position: absolute;
  right: -8px;
  top: -5px;
  width: 10px;
  height: 13px;
  border: 1px solid rgba(0, 122, 61, 0.55);
  border-radius: 2px;
  background:
    linear-gradient(var(--caf-green), var(--caf-green)) 3px 4px / 5px 1px no-repeat,
    linear-gradient(var(--caf-green), var(--caf-green)) 3px 7px / 5px 1px no-repeat,
    #fff9df;
  transform: rotate(8deg);
}

.cafnizer-mini-eye {
  position: absolute;
  top: 8px;
  width: 4px;
  height: 3px;
  border: 1px solid var(--caf-green-dark);
  border-radius: 50%;
  background: #fff;
}

.cafnizer-mini-eye.left {
  left: 5px;
}

.cafnizer-mini-eye.right {
  right: 5px;
}

.cafnizer-mini-smile {
  position: absolute;
  left: 7px;
  bottom: 6px;
  width: 10px;
  height: 4px;
  border-bottom: 2px solid var(--caf-green-dark);
  border-radius: 0 0 8px 8px;
}

.cafnizer-mini-tie {
  position: absolute;
  left: 10px;
  bottom: -5px;
  width: 4px;
  height: 8px;
  border-radius: 0 0 3px 3px;
  background: var(--caf-gold);
  clip-path: polygon(50% 0, 100% 38%, 65% 100%, 35% 100%, 0 38%);
}

.cafnizer-mini-check {
  position: absolute;
  width: 5px;
  height: 3px;
  border-left: 2px solid var(--caf-green);
  border-bottom: 2px solid var(--caf-green);
  transform: rotate(-45deg);
}

.cafnizer-mini-check.one {
  left: -6px;
  top: 3px;
}

.cafnizer-mini-check.two {
  left: -4px;
  bottom: 2px;
}

/* Role dashboard */
.dashboard-hero {
  margin: 28px 0;
  padding: 36px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(232, 245, 238, 0.72));
  border: 1px solid rgba(0, 122, 61, 0.14);
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(12px);
}

.dashboard-hero h1 {
  color: var(--caf-green-dark);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  margin-bottom: 10px;
}

.dashboard-hero p {
  color: var(--text-muted);
  line-height: 1.7;
}

.command-center {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 22px;
}

.command-center article {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-light);
}

.command-center span {
  display: block;
  color: var(--caf-green-dark);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 950;
  line-height: 1;
}

.command-center p {
  margin-top: 8px;
  color: var(--text-muted);
  font-weight: 800;
}

.dashboard-section {
  margin: 28px 0;
  padding: 28px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 18px;
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(10px);
}

.dashboard-grid,
.dashboard-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.dashboard-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 14px;
  box-shadow: var(--shadow-light);
  min-width: 0;
}

.dashboard-card h3 {
  color: var(--caf-green-dark);
  font-size: 1.1rem;
}

.dashboard-card p,
.dashboard-empty {
  color: var(--text-muted);
  line-height: 1.65;
}

.role-tools-panel {
  padding: 22px;
}

.role-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.role-tool-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  min-height: 112px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 43, 24, 0.055);
}

.role-tool-card strong {
  color: var(--caf-green-dark);
  font-size: 0.98rem;
}

.role-tool-card span {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.excellence-grid,
.course-study-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.smart-card {
  align-content: start;
}

.smart-list,
.pathway-list,
.badge-grid,
.leaderboard-list,
.notes-list {
  display: grid;
  gap: 10px;
}

.smart-list a,
.pathway-list > div,
.badge-grid > div,
.leaderboard-list > div,
.notes-list > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 122, 61, 0.12);
  background: rgba(255, 255, 255, 0.76);
  color: inherit;
  text-decoration: none;
}

.smart-list a:hover,
.pathway-list a:hover {
  border-color: rgba(0, 122, 61, 0.34);
  background: rgba(245, 252, 248, 0.94);
}

.smart-list span,
.smart-list small,
.pathway-list p,
.pathway-list span,
.badge-grid span,
.badge-grid small,
.leaderboard-list small,
.notes-list small {
  color: var(--text-muted);
}

.pathway-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  color: var(--caf-green-dark);
  font-weight: 800;
  text-decoration: none;
  border-top: 1px solid rgba(0, 122, 61, 0.1);
}

.badge-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.badge-grid > div {
  min-height: 118px;
  border-color: rgba(0, 0, 0, 0.08);
}

.badge-grid > div.earned {
  border-color: rgba(198, 160, 64, 0.42);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.92), rgba(255, 255, 255, 0.9));
}

.leaderboard-list > div {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.leaderboard-list b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.1);
  color: var(--caf-green-dark);
}

.leaderboard-list span {
  display: grid;
  gap: 2px;
  font-weight: 850;
}

.assistant-card textarea,
.course-notes-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}

.assistant-answer {
  min-height: 86px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(0, 122, 61, 0.07);
  color: var(--caf-green-dark);
  line-height: 1.65;
  font-weight: 750;
}

.kora-assistant {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  display: block;
  width: 66px;
  min-height: 74px;
  pointer-events: none;
}

.kora-assistant.is-left-side {
  justify-items: start;
}

.kora-assistant.is-right-side {
  justify-items: end;
}

.kora-assistant.is-positioned {
  right: auto;
  bottom: auto;
}

.kora-assistant.is-dragging {
  transition: none;
  user-select: none;
}

.kora-assistant.drag-reaction .kora-face {
  animation: cafssesor-carry 0.42s ease-in-out infinite alternate;
}

.kora-assistant.drag-reaction .kora-eye.left,
.kora-assistant.drag-reaction .kora-eye.right {
  height: 7px;
  transform: translateY(3px);
}

.kora-assistant.drag-reaction .kora-ball,
.kora-assistant.drag-reaction .kora-book {
  opacity: 1;
}

.kora-assistant * {
  pointer-events: auto;
}

.kora-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  display: flex;
  align-items: start;
  gap: 8px;
  max-width: min(320px, calc(100vw - 44px));
  width: max-content;
  padding: 12px 14px;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: var(--caf-green-dark);
  box-shadow: 0 14px 34px rgba(0, 43, 24, 0.13);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(14px);
}

.kora-assistant.is-left-side .kora-bubble {
  left: 0;
  right: auto;
  border-radius: 14px 14px 14px 4px;
  transform-origin: left bottom;
}

.kora-assistant.is-right-side .kora-bubble {
  left: auto;
  right: 0;
  border-radius: 14px 14px 4px 14px;
  transform-origin: right bottom;
}

.kora-bubble-text {
  display: block;
  max-width: min(270px, calc(100vw - 86px));
}

.kora-bubble-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 122, 61, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--caf-green-dark);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.kora-assistant.is-hovering .kora-bubble,
.kora-assistant.is-open .kora-bubble {
  opacity: 1;
  transform: translateY(0);
}

.kora-face {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 82px;
  min-height: 92px;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  transform: scale(0.8);
  transform-origin: bottom center;
}

.kora-assistant.is-dragging .kora-face {
  cursor: grabbing;
}

.kora-book,
.kora-ball {
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.kora-book {
  left: -15px;
  top: 31px;
  width: 28px;
  height: 22px;
  border-radius: 3px 8px 8px 3px;
  background:
    linear-gradient(90deg, transparent 0 45%, rgba(255, 255, 255, 0.78) 45% 50%, transparent 50% 100%),
    linear-gradient(135deg, #007a3d, #00472a);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 16px rgba(0, 43, 24, 0.18);
  transform: rotate(-16deg);
}

.kora-book::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -8px;
  height: 13px;
  border-radius: 0 0 16px 16px;
  border-bottom: 4px solid #007a3d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  background: transparent;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.72);
}

.kora-ball {
  right: -11px;
  top: 38px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background:
    conic-gradient(from 18deg at 50% 50%, transparent 0 12%, rgba(5, 32, 15, 0.9) 12% 15%, transparent 15% 32%, rgba(5, 32, 15, 0.9) 32% 35%, transparent 35% 52%, rgba(5, 32, 15, 0.9) 52% 55%, transparent 55% 72%, rgba(5, 32, 15, 0.9) 72% 75%, transparent 75% 92%, rgba(5, 32, 15, 0.9) 92% 95%, transparent 95%),
    radial-gradient(circle at 50% 50%, #05200f 0 17%, transparent 18%),
    radial-gradient(circle at 30% 28%, #05200f 0 8%, transparent 9%),
    radial-gradient(circle at 72% 34%, #05200f 0 8%, transparent 9%),
    radial-gradient(circle at 35% 76%, #05200f 0 8%, transparent 9%),
    radial-gradient(circle at 74% 75%, #05200f 0 8%, transparent 9%),
    #fff;
  border: 2px solid rgba(5, 32, 15, 0.34);
  box-shadow: 0 8px 16px rgba(0, 43, 24, 0.18);
}

.kora-head {
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 22px 22px 24px 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.42) 23%, transparent 24%),
    linear-gradient(135deg, #008f50, #00472a);
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(0, 43, 24, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.kora-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 62px;
  height: 16px;
  border-radius: 4px;
  background: #062416;
  border: 3px solid #fff;
  transform: translateX(-50%) rotate(-5deg);
  box-shadow: 0 6px 16px rgba(0, 43, 24, 0.18);
}

.kora-cap {
  position: absolute;
  left: 50%;
  top: -33px;
  width: 82px;
  height: 28px;
  transform: translateX(-50%) rotate(-5deg);
  clip-path: polygon(50% 0, 100% 42%, 50% 82%, 0 42%);
  background: linear-gradient(135deg, #05200f, #0a3a23);
  border-radius: 3px;
  box-shadow: 0 10px 20px rgba(0, 43, 24, 0.18);
}

.kora-cap::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -13px;
  width: 3px;
  height: 22px;
  background: var(--caf-gold);
  box-shadow: 0 18px 0 -6px var(--caf-gold);
}

.kora-head::after {
  content: "AI";
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.kora-gown {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 44px;
  height: 24px;
  transform: translateX(-50%);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 62% 78%, 50% 100%, 38% 78%, 0 100%);
  background: linear-gradient(135deg, #05200f, #0b3d25);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-top: 0;
  box-shadow: 0 9px 16px rgba(0, 43, 24, 0.15);
}

.kora-eye {
  position: absolute;
  top: 27px;
  width: 9px;
  height: 13px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.22);
  transition: height 0.16s ease, transform 0.16s ease;
}

.kora-glasses {
  position: absolute;
  left: 50%;
  top: 23px;
  z-index: 3;
  width: 48px;
  height: 18px;
  transform: translateX(-50%);
  pointer-events: none;
}

.kora-glasses::before,
.kora-glasses::after {
  content: "";
  position: absolute;
  top: 0;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(5, 32, 15, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.kora-glasses::before {
  left: 0;
}

.kora-glasses::after {
  right: 0;
}

.kora-glasses {
  background: linear-gradient(90deg, transparent 0 43%, rgba(5, 32, 15, 0.9) 43% 57%, transparent 57% 100%);
}

.kora-eye.left {
  left: 20px;
}

.kora-eye.right {
  right: 20px;
}

.kora-smile {
  position: absolute;
  left: 50%;
  top: 43px;
  width: 24px;
  height: 13px;
  border-bottom: 4px solid #fff;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.kora-face:hover .kora-head,
.kora-assistant.is-open .kora-head {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 22px 52px rgba(0, 43, 24, 0.28);
}

.kora-assistant.trick-wave .kora-head {
  animation: cafresor-wave 1.1s ease-in-out 2;
}

.kora-assistant.trick-hop .kora-face {
  animation: cafresor-hop 0.9s ease-in-out 2;
}

.kora-assistant.trick-peek .kora-eye.left,
.kora-assistant.trick-peek .kora-eye.right {
  animation: cafresor-peek 0.9s ease-in-out 3;
}

.kora-assistant.trick-spin .kora-head {
  animation: cafresor-spin 1.25s ease-in-out 1;
}

.kora-assistant.trick-think .kora-head {
  animation: cafresor-think 1.4s ease-in-out 2;
}

.kora-assistant.trick-dance .kora-face {
  animation: cafresor-dance 1.2s ease-in-out 2;
}

.kora-assistant.trick-fly {
  animation: cafssesor-fly-page 7.3s ease-in-out 1;
}

.kora-assistant.trick-fly .kora-bubble,
.kora-assistant.trick-fly .kora-panel {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.kora-assistant.trick-fly .kora-face {
  animation: cafssesor-fly-wiggle 0.72s ease-in-out 10;
}

.kora-assistant.trick-fly .kora-head {
  animation: cafssesor-funny-rotate 1.05s ease-in-out 7;
}

.kora-assistant.trick-fly .kora-book,
.kora-assistant.trick-fly .kora-ball,
.kora-face:hover .kora-book,
.kora-face:hover .kora-ball {
  opacity: 1;
}

.kora-assistant.trick-fly .kora-ball {
  animation: cafssesor-ball-spin 0.7s linear infinite;
}

.kora-assistant.trick-fly .kora-book {
  animation: cafssesor-book-flap 0.55s ease-in-out infinite;
}

@keyframes cafssesor-fly-page {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  12% {
    transform: translate(-16vw, -18vh) scale(1.02) rotate(-12deg);
  }
  32% {
    transform: translate(-54vw, -42vh) scale(1.06) rotate(18deg);
  }
  52% {
    transform: translate(-82vw, -20vh) scale(1.02) rotate(-16deg);
  }
  72% {
    transform: translate(-44vw, -58vh) scale(1.08) rotate(14deg);
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes cafssesor-fly-wiggle {
  0%,
  100% {
    transform: scale(0.8) translateY(0) rotate(0deg);
  }
  50% {
    transform: scale(0.8) translateY(-8px) rotate(14deg);
  }
}

@keyframes cafssesor-funny-rotate {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-14deg) translateY(-2px);
  }
  50% {
    transform: rotate(10deg) translateY(2px);
  }
  75% {
    transform: rotate(18deg) translateY(-3px);
  }
}

@keyframes cafssesor-ball-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cafssesor-book-flap {
  0%,
  100% {
    transform: rotate(-16deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(-4px);
  }
}

@keyframes cafssesor-carry {
  0% {
    transform: scale(0.8) rotate(-4deg) translateY(-2px);
  }
  100% {
    transform: scale(0.8) rotate(5deg) translateY(3px);
  }
}

@keyframes cafresor-wave {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-8deg) translateY(-2px);
  }
  75% {
    transform: rotate(8deg) translateY(-2px);
  }
}

@keyframes cafresor-hop {
  0%,
  100% {
    transform: scale(0.8) translateY(0);
  }
  35% {
    transform: scale(0.8) translateY(-13px);
  }
  60% {
    transform: scale(0.8) translateY(2px);
  }
}

@keyframes cafresor-peek {
  0%,
  100% {
    height: 13px;
    transform: translateY(0);
  }
  50% {
    height: 5px;
    transform: translateY(4px);
  }
}

@keyframes cafresor-spin {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  45% {
    transform: rotate(8deg) scale(1.06);
  }
  70% {
    transform: rotate(-6deg) scale(1.03);
  }
}

@keyframes cafresor-think {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-7deg);
  }
}

@keyframes cafresor-dance {
  0%,
  100% {
    transform: scale(0.8) translateX(0) rotate(0deg);
  }
  25% {
    transform: scale(0.8) translateX(-6px) rotate(-5deg);
  }
  50% {
    transform: scale(0.8) translateX(6px) rotate(5deg);
  }
  75% {
    transform: scale(0.8) translateX(-3px) rotate(-3deg);
  }
}

.kora-face:hover .kora-eye {
  height: 7px;
  transform: translateY(3px);
}

.kora-name {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--caf-green-dark);
  font-size: 0.64rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(0, 43, 24, 0.12);
}

.kora-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: min(390px, calc(100vw - 28px));
  min-width: 260px;
  min-height: 220px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(0, 43, 24, 0.2);
  backdrop-filter: blur(18px);
}

.kora-assistant.is-left-side .kora-panel {
  left: 0;
  right: auto;
}

.kora-assistant.is-right-side .kora-panel {
  left: auto;
  right: 0;
}

.kora-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--caf-green), var(--caf-green-dark));
  color: #fff;
}

.kora-panel header strong,
.kora-panel header span {
  display: block;
}

.kora-panel header span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.7rem;
  font-weight: 750;
}

.kora-close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
}

.kora-messages {
  display: grid;
  gap: 10px;
  max-height: 310px;
  min-height: 120px;
  overflow: auto;
  padding: 16px;
}

.kora-message {
  width: fit-content;
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.5;
  font-size: 0.72rem;
}

.kora-message.assistant {
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  border: 1px solid rgba(0, 122, 61, 0.12);
}

.kora-message.user {
  justify-self: end;
  background: var(--caf-green);
  color: #fff;
}

.kora-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 12px;
}

.kora-quick button {
  padding: 7px 9px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.06);
  color: var(--caf-green-dark);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 850;
  cursor: pointer;
}

.kora-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid rgba(0, 122, 61, 0.1);
  background: rgba(245, 252, 248, 0.78);
}

.kora-form input {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(0, 122, 61, 0.16);
  border-radius: 10px;
  font: inherit;
  font-size: 0.82rem;
}

.kora-form button {
  padding: 10px 13px;
  border: 0;
  border-radius: 10px;
  background: var(--caf-green);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.catalog-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.catalog-filters input,
.catalog-filters select,
.assignment-card input,
.assignment-card textarea,
.assignment-card input[type="file"],
.discussion-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text-dark);
  font: inherit;
}

.catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-meta span,
.status-pill {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  font-size: 0.78rem;
  font-weight: 850;
}

.locked-pill {
  background: rgba(159, 29, 29, 0.08);
  color: #8d1d1d;
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.timeline-list a {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(130px, 0.45fr) 1fr minmax(110px, 0.4fr);
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 122, 61, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  text-decoration: none;
}

.timeline-list time,
.timeline-list small {
  color: var(--text-muted);
  font-weight: 750;
}

.timeline-list strong {
  color: var(--caf-green-dark);
}

.approval-card {
  margin-top: 18px;
}

.onboarding-panel {
  background:
    linear-gradient(135deg, rgba(0, 122, 61, 0.08), rgba(212, 165, 116, 0.1)),
    rgba(255, 255, 255, 0.78);
}

.pinned-post {
  border-color: rgba(212, 165, 116, 0.42) !important;
  background: rgba(255, 250, 235, 0.82) !important;
}

.verify-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.verify-grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.78);
}

.verify-grid strong {
  color: var(--caf-green-dark);
}

.verify-grid span,
.certificate-code {
  color: var(--text-muted);
}

.certificate-code {
  width: fit-content;
  margin: 10px auto 18px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.08);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 800;
}

.course-study-tools {
  margin: 24px 0;
}

.course-notes-card .section-heading,
.assistant-card .section-heading {
  margin-bottom: 0;
}

.stat-card span {
  color: var(--caf-green-dark);
  font-size: 2.4rem;
  font-weight: 900;
}

.dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: start;
}

.dashboard-split > * {
  min-width: 0;
}

.dashboard-form {
  display: grid;
  gap: 12px;
  padding: 22px;
  background: rgba(0, 122, 61, 0.04);
  border: 1px solid rgba(0, 122, 61, 0.12);
  border-radius: 14px;
}

.dashboard-form label {
  color: var(--caf-green-dark);
  font-weight: 800;
  font-size: 0.92rem;
}

.dashboard-form input,
.dashboard-form select,
.dashboard-form textarea,
.form-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  color: var(--text-dark);
  font: inherit;
}

.dashboard-form input:focus,
.dashboard-form select:focus,
.dashboard-form textarea:focus {
  outline: none;
  border-color: var(--caf-green);
  box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.1);
}

.dashboard-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-checkbox {
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 122, 61, 0.12);
}

.builder-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 122, 61, 0.16);
}

.builder-panel h3 {
  color: var(--caf-green-dark);
}

.planned-upload-slots {
  display: grid;
  gap: 14px;
}

.planned-upload-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 122, 61, 0.12);
}

.planned-upload-group h4 {
  color: var(--caf-green-dark);
}

.planned-upload-group label {
  display: grid;
  gap: 6px;
}

.planned-question-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(0, 122, 61, 0.045);
  border: 1px solid rgba(0, 122, 61, 0.12);
}

.planned-question-row h4 {
  color: var(--caf-green-dark);
}

.add-more-panel {
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.08), rgba(255, 255, 255, 0.9));
}

.add-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.add-more-grid .btn {
  width: 100%;
  min-width: 0;
}

.compact-form {
  margin-top: 18px;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 18px;
  max-width: 100%;
  min-width: 0;
}

.dashboard-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.dashboard-table th,
.dashboard-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 122, 61, 0.1);
  text-align: left;
  vertical-align: middle;
}

.dashboard-table th {
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-table select {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 122, 61, 0.18);
}

.table-btn {
  min-width: auto;
  padding: 8px 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.status-active {
  background: rgba(0, 122, 61, 0.1);
  color: var(--caf-green-dark);
}

.status-deactivated {
  background: rgba(160, 44, 44, 0.1);
  color: #8f2525;
}

.danger-btn {
  border-color: rgba(160, 44, 44, 0.24) !important;
  color: #8f2525 !important;
}

.danger-btn:hover,
.danger-btn:focus-visible {
  background: rgba(160, 44, 44, 0.1) !important;
  color: #651818 !important;
}

.manage-course-list {
  display: grid;
  gap: 14px;
}

.manage-course-card {
  box-shadow: none;
}

.builder-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.builder-stats span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  font-size: 0.82rem;
  font-weight: 800;
}

.pathway-course-list {
  display: grid;
  gap: 12px;
}

.pathway-course-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 170px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(0, 122, 61, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.pathway-course-row strong,
.pathway-course-row small {
  display: block;
}

.pathway-course-row strong {
  margin-top: 7px;
  color: var(--caf-green-dark);
}

.pathway-course-row small {
  margin-top: 4px;
  color: var(--text-muted);
}

.pathway-course-row label {
  display: grid;
  gap: 6px;
  color: var(--caf-green-dark);
  font-size: 0.78rem;
  font-weight: 850;
}

.mini-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 122, 61, 0.045);
}

.mini-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-muted);
  line-height: 1.4;
}

.mini-list small {
  color: var(--text-muted);
}

.course-quality {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(0, 122, 61, 0.055);
}

.course-quality strong,
.course-quality b {
  color: var(--caf-green-dark);
}

.course-quality span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.course-quality .mini-progress {
  grid-column: 1 / -1;
  margin: 0;
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--caf-green-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
}

.invite-result {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(0, 122, 61, 0.08);
  border: 1px solid rgba(0, 122, 61, 0.16);
}

.invite-result input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  border-radius: 10px;
  color: var(--caf-green-dark);
  font: inherit;
}

/* Professional course page */
.course-empty,
.course-hero,
.course-section,
.stage-block,
.final-test {
  margin: 28px 0;
}

.course-empty {
  display: grid;
  gap: 16px;
  align-items: start;
  padding: 48px;
  background: var(--surface-strong);
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 18px;
  box-shadow: var(--shadow-light);
}

.course-hero {
  padding: 38px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(234, 247, 239, 0.72));
  border: 1px solid rgba(0, 122, 61, 0.14);
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(12px);
}

.course-hero h1 {
  max-width: 960px;
  margin-bottom: 14px;
  color: var(--caf-green-dark);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 900;
}

.course-hero p {
  max-width: 780px;
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 1.05rem;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.course-meta span,
.section-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.1);
  color: var(--caf-green-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.course-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.course-details-grid article {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 122, 61, 0.12);
}

.course-details-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--caf-green-dark);
}

.course-details-grid p,
.course-details-grid li {
  color: var(--text-muted);
  line-height: 1.6;
}

.course-details-grid ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.section-heading,
.stage-header {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.section-heading h2,
.stage-header h2,
.stage-header h3 {
  color: var(--caf-green-dark);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.course-videos,
.course-content-blocks,
.stage-media {
  display: grid;
  gap: 18px;
}

.course-videos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-video {
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--surface-strong);
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 14px;
  box-shadow: var(--shadow-light);
}

.video-copy {
  display: grid;
  gap: 8px;
}

.course-video h3 {
  color: var(--caf-green-dark);
  font-size: 1.1rem;
}

.course-video p,
.stage-learning p {
  color: var(--text-muted);
  line-height: 1.7;
}

.course-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #06150c;
  object-fit: cover;
}

.course-content-block {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: var(--surface-strong);
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 14px;
  box-shadow: var(--shadow-light);
}

.course-content-block video,
.course-content-block audio {
  width: 100%;
}

.course-content-block video {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #06150c;
  object-fit: cover;
}

.course-block-image {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0, 122, 61, 0.05);
  border: 1px solid rgba(0, 122, 61, 0.12);
}

.course-document {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-radius: 12px;
  background: rgba(0, 122, 61, 0.06);
  border: 1px solid rgba(0, 122, 61, 0.14);
}

.block-quiz {
  background: rgba(0, 122, 61, 0.035);
}

.stage-block,
.final-test {
  padding: 28px;
  background: var(--surface-strong);
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 18px;
  box-shadow: var(--shadow-light);
}

.stage-content {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: start;
}

.stage-learning,
.stage-quiz {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(0, 122, 61, 0.045);
  border: 1px solid rgba(0, 122, 61, 0.1);
}

.stage-learning h4,
.stage-quiz h4,
.stage-links h4 {
  color: var(--caf-green-dark);
  font-size: 1rem;
}

.stage-media {
  grid-column: 1 / -1;
}

.stage-quiz {
  grid-column: 1 / -1;
  background: #fff;
}

.quiz-question {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  border-radius: 14px;
  background: #fbfdfc;
  box-shadow: 0 8px 20px rgba(0, 43, 24, 0.045);
}

.quiz-p {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-dark);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.5;
}

.quiz-p > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--caf-green), var(--caf-green-dark));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0, 122, 61, 0.28);
}

.quiz-options {
  display: grid;
  gap: 10px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.quiz-option:hover {
  transform: translateY(-1px);
}

.quiz-option:has(input:checked) {
  border-color: var(--caf-green) !important;
  background-color: rgba(0, 122, 61, 0.08) !important;
  box-shadow: 0 6px 16px rgba(0, 122, 61, 0.14);
}

.quiz-option span {
  font-weight: 650;
  color: var(--text-dark);
  line-height: 1.45;
}

.quiz-option:has(input:checked) span {
  color: var(--caf-green-dark);
  font-weight: 800;
}

.quiz-option input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 122, 61, 0.35);
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.quiz-option input[type="radio"]::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--caf-green), var(--caf-green-dark));
  transform: scale(0);
  transition: transform 0.12s ease;
}

.quiz-option input[type="radio"]:checked {
  border-color: var(--caf-green);
}

.quiz-option input[type="radio"]:checked::before {
  transform: scale(1);
}

.quiz-option input[type="radio"]:focus-visible {
  outline: 2px solid rgba(0, 122, 61, 0.45);
  outline-offset: 2px;
}

.assessment-timer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 122, 61, 0.08), rgba(212, 165, 116, 0.12)),
    #fff;
  box-shadow: 0 12px 24px rgba(0, 43, 24, 0.06);
}

.assessment-timer strong {
  display: block;
  margin-top: 6px;
  color: var(--caf-green-dark);
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.assessment-timer p {
  max-width: 520px;
  color: var(--text-muted);
  font-weight: 750;
  line-height: 1.45;
  text-align: right;
}

.assessment-timer.is-warning {
  border-color: rgba(180, 34, 34, 0.28);
  background:
    linear-gradient(135deg, rgba(180, 34, 34, 0.08), rgba(212, 165, 116, 0.12)),
    #fff;
}

.assessment-timer.is-warning strong {
  color: #9f1d1d;
}

.assessment-timer.is-finished {
  border-color: rgba(0, 122, 61, 0.22);
  background:
    linear-gradient(135deg, rgba(0, 122, 61, 0.07), rgba(212, 165, 116, 0.1)),
    rgba(255, 255, 255, 0.58);
}

.assessment-timer.is-finished strong {
  color: var(--caf-green-dark);
  font-size: 1.25rem;
}

.question-time-hint {
  display: inline-flex;
  width: fit-content;
  margin: -2px 0 8px 16px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(0, 122, 61, 0.07);
  color: var(--caf-green-dark);
  font-size: 0.74rem;
  font-weight: 850;
}

@media (max-width: 760px) {
  .assessment-timer {
    align-items: flex-start;
    flex-direction: column;
  }

  .assessment-timer p {
    max-width: none;
    text-align: left;
  }
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 122, 61, 0.1);
}

.quiz-question textarea {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 122, 61, 0.16);
  font: inherit;
  resize: vertical;
}

.stage-result {
  min-height: 24px;
  color: var(--caf-green-dark);
  font-weight: 900;
}

.stage-links ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.stage-links a {
  color: var(--caf-green-dark);
  font-weight: 700;
}

.final-quiz {
  max-width: 980px;
}

@media (max-width: 900px) {
  .course-videos,
  .stage-content,
  .dashboard-grid,
  .dashboard-course-grid,
  .role-tools-grid,
  .dashboard-split,
  .dashboard-form-grid,
  .course-details-grid,
  .add-more-grid,
  .builder-stats,
  .pathway-course-row {
    grid-template-columns: 1fr;
  }

  .course-hero,
  .stage-block,
  .final-test,
  .course-empty,
  .dashboard-section,
  .dashboard-hero {
    padding: 24px;
  }
}

@media (max-width: 560px) {
  .user-badge-name {
    max-width: 96px;
  }

  .course-meta span {
    width: 100%;
  }
}

/* Professional CAF E-Learning design pass */
:root {
  --caf-ink: rgba(3, 33, 18, 0.88);
  --caf-line: rgba(0, 122, 61, 0.16);
  --caf-panel: rgba(255, 255, 255, 0.82);
  --caf-panel-strong: rgba(255, 255, 255, 0.9);
  --caf-panel-soft: rgba(244, 250, 246, 0.76);
}

body {
  line-height: 1.5;
}

.page-shell {
  max-width: 1440px;
  padding: 0 32px 80px;
}

.site-header {
  position: sticky;
  top: 0;
  margin: 0 -32px;
  padding: 14px 32px;
  border-bottom: 1px solid rgba(0, 122, 61, 0.2);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 30px rgba(0, 43, 24, 0.08);
}

.brand {
  gap: 12px;
  font-size: 1.08rem;
  letter-spacing: 0;
}

.brand-logo {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 22px rgba(0, 43, 24, 0.12);
}

.site-nav {
  gap: 10px;
}

.site-nav a,
.logout-link {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 122, 61, 0.22);
  background: rgba(255, 255, 255, 0.58);
  color: var(--caf-green-dark);
  font-size: 0.9rem;
  box-shadow: none;
}

.site-nav a:hover {
  background: rgba(0, 122, 61, 0.1);
  border-color: rgba(0, 122, 61, 0.34);
  transform: none;
}

.btn {
  min-height: 44px;
  min-width: auto;
  padding: 12px 20px;
  border-radius: 999px;
  letter-spacing: 0;
}

.btn-primary {
  background: linear-gradient(135deg, #007a3d, #005b34);
  box-shadow: 0 12px 24px rgba(0, 94, 50, 0.18);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 122, 61, 0.28);
}

.eyebrow,
.section-kicker,
.course-meta span {
  border: 1px solid rgba(0, 122, 61, 0.16);
  background: rgba(0, 122, 61, 0.075);
  letter-spacing: 0.08em;
}

.hero {
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
  gap: 32px;
  padding: 54px 0 34px;
}

.hero-copy,
.dashboard-hero,
.course-hero,
.department-hero,
.auth-header {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(243, 250, 246, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 50px rgba(0, 43, 24, 0.1);
}

.hero-copy h1 {
  max-width: 820px;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  letter-spacing: 0;
  color: var(--caf-ink);
}

.hero-copy p {
  max-width: 760px;
  font-size: 1.05rem;
}

.hero-visual img,
.department-hero img,
.about-figure,
.image-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 44px rgba(0, 43, 24, 0.12);
}

.image-gallery {
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  gap: 14px;
  opacity: 0.96;
}

.image-card img {
  aspect-ratio: 16 / 10;
}

.cards-section,
.about-section,
.course-list {
  padding: 34px 0;
}

.cards-section h2,
.about-section h2,
.course-list h2,
.section-heading h2,
.dashboard-hero h1,
.course-hero h1,
.department-hero h1 {
  color: var(--caf-ink);
  letter-spacing: 0;
}

.cards-grid,
.course-grid,
.dashboard-course-grid {
  gap: 18px;
}

.feature-card,
.course-card,
.dashboard-card,
.department-details article,
.auth-column,
.form-card,
.stage-block,
.final-test,
.course-content-block,
.course-video,
.apply-section,
.dashboard-section,
.profile-card {
  border-radius: 14px;
  border: 1px solid var(--caf-line);
  background: var(--caf-panel);
  box-shadow: 0 14px 32px rgba(0, 43, 24, 0.075);
}

.feature-card,
.course-card,
.dashboard-card {
  min-height: auto;
}

.feature-card {
  gap: 14px;
}

.feature-card .btn,
.course-card .btn,
.dashboard-card .btn {
  align-self: start;
}

.feature-card:hover,
.course-card:hover,
.department-details article:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 122, 61, 0.34);
  box-shadow: 0 18px 38px rgba(0, 43, 24, 0.11);
}

.dept-img,
.feature-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

.about-row,
.department-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.7fr);
  gap: 24px;
  align-items: center;
}

.department-hero {
  padding: 28px;
  margin: 32px 0;
}

.department-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-page {
  align-items: flex-start;
  padding-top: 42px;
}

.auth-grid,
.auth-section {
  gap: 20px;
}

.form-card,
.auth-column {
  border-radius: 16px;
}

input,
select,
textarea {
  font-family: inherit;
}

.password-field {
  position: relative;
  display: grid;
  align-items: center;
  margin-bottom: 14px;
}

.password-field input {
  margin-bottom: 0;
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.075);
  color: var(--caf-green-dark);
  font: inherit;
  font-size: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.password-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.password-toggle::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: rotate(-42deg);
  transition: width 0.16s ease, opacity 0.16s ease;
}

.password-toggle.is-visible::after {
  width: 20px;
  opacity: 1;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: rgba(0, 122, 61, 0.14);
  box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.08);
}

.password-toggle:active {
  transform: translateY(-50%) scale(0.94);
}

@media (max-width: 768px) {
  .password-toggle {
    width: 44px;
    height: 44px;
    right: 4px;
  }
}

.form-card input,
.form-card select,
.auth-column form input,
.auth-column form select,
.dashboard-form input,
.dashboard-form select,
.dashboard-form textarea,
.department-form textarea,
.department-form input,
.department-form select {
  border-radius: 10px;
  border: 1px solid rgba(0, 92, 48, 0.16);
  background: rgba(255, 255, 255, 0.82);
}

.dashboard-form,
.builder-panel,
.stage-learning,
.stage-quiz,
.quiz-question,
.mini-list,
.planned-upload-group,
.planned-question-row {
  border-radius: 12px;
  border: 1px solid rgba(0, 122, 61, 0.12);
  background: rgba(255, 255, 255, 0.64);
}

.dashboard-form h3,
.builder-panel h3,
.form-switch h2,
.auth-column h2,
.dashboard-card h3,
.feature-card h3,
.course-card h3 {
  letter-spacing: 0;
  color: var(--caf-ink);
}

.dashboard-form label,
.form-card label,
.auth-column form label,
.department-form label {
  color: rgba(3, 33, 18, 0.72);
  font-weight: 750;
}

.course-search-bar {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}

.course-search-bar label {
  color: rgba(3, 33, 18, 0.72);
  font-weight: 800;
}

.course-search-bar input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 92, 48, 0.16);
  background: rgba(255, 255, 255, 0.84);
  padding: 12px 14px;
  font: inherit;
}

.compact-search {
  margin-top: 12px;
}

.course-progress-card,
.course-step-panel {
  margin: 24px 0;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(0, 43, 24, 0.075);
}

.progress-summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 14px;
}

.progress-summary h2 {
  color: var(--caf-green-dark);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-top: 8px;
}

.progress-summary > span {
  color: var(--text-muted);
  font-weight: 800;
}

.progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.12);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--caf-green), var(--caf-gold));
  transition: width 0.25s ease;
}

.course-step-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.course-step-tabs button {
  min-height: 58px;
  border: 1px solid rgba(0, 122, 61, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--caf-green-dark);
  font-weight: 850;
  cursor: pointer;
}

.course-step-tabs button span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.12);
}

.course-step-tabs button.active {
  border-color: var(--caf-green);
  background: rgba(0, 122, 61, 0.1);
}

.course-step-tabs button.complete {
  border-color: rgba(0, 122, 61, 0.38);
  background: rgba(0, 122, 61, 0.14);
}

.course-step-tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.course-step-panel {
  display: grid;
  gap: 18px;
}

.course-step-panel video,
.course-step-panel audio {
  width: 100%;
}

.course-step-panel video {
  max-height: 520px;
  border-radius: 14px;
  background: #03150b;
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.step-actions .stage-result {
  color: var(--text-muted);
  font-weight: 700;
}

.mini-progress {
  display: grid;
  gap: 7px;
  margin: 8px 0 4px;
}

.mini-progress span {
  color: var(--caf-green-dark);
  font-size: 0.88rem;
  font-weight: 850;
}

.mini-progress div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.12);
}

.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--caf-green), var(--caf-gold));
}

.student-picker,
.access-picker {
  display: grid;
  gap: 10px;
  max-height: 300px;
  overflow: auto;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.64);
}

.picker-heading,
.student-check span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.student-check {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
}

.student-check small,
.participant-list small {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.meeting-room {
  padding: 28px 0 64px;
}

.meeting-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
}

.meeting-stage,
.meeting-side .dashboard-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 32px rgba(0, 43, 24, 0.075);
}

.meeting-stage {
  overflow: hidden;
}

.meeting-video-preview {
  position: relative;
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px;
  color: white;
  background: linear-gradient(135deg, #07361f, #03150b);
}

.meeting-video-preview h1,
.meeting-video-preview p {
  max-width: 720px;
  position: relative;
  z-index: 2;
}

.meeting-video-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-placeholder {
  position: absolute;
  inset: auto 28px 28px 28px;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.meeting-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
}

.meeting-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.participant-list,
.meeting-chat {
  display: grid;
  gap: 10px;
  max-height: 220px;
  overflow: auto;
}

.participant-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.chat-form input {
  border-radius: 10px;
  border: 1px solid rgba(0, 92, 48, 0.16);
  padding: 10px 12px;
  font: inherit;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.analytics-split {
  align-items: start;
}

.analytics-actions {
  margin: 18px 0;
}

.compact-table {
  overflow-x: auto;
}

.activity-feed {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}

.activity-feed > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 122, 61, 0.055);
  border: 1px solid rgba(0, 122, 61, 0.1);
}

.activity-feed span,
.activity-feed small {
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .meeting-main {
    grid-template-columns: 1fr;
  }

  .meeting-video-preview {
    min-height: 380px;
  }

  .analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-grid,
  .command-center,
  .excellence-grid,
  .course-study-tools,
  .access-grid,
  .member-grid,
  .verify-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-filters,
  .timeline-list a {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .platform-grid,
  .command-center,
  .excellence-grid,
  .course-study-tools,
  .badge-grid,
  .access-grid,
  .member-grid,
  .verify-grid,
  .catalog-filters,
  .timeline-list a {
    grid-template-columns: 1fr;
  }

  .kora-assistant {
    right: 12px;
    bottom: 12px;
  }

  .kora-face {
    width: 68px;
    min-height: 78px;
  }

  .kora-head {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .kora-eye {
    top: 23px;
  }

  .kora-eye.left {
    left: 16px;
  }

  .kora-eye.right {
    right: 16px;
  }

  .kora-smile {
    top: 36px;
  }

  .kora-panel {
    width: calc(100vw - 24px);
  }

  .kora-messages {
    max-height: 260px;
  }
}

.dashboard-form input::placeholder,
.dashboard-form textarea::placeholder,
.form-card input::placeholder,
.auth-column input::placeholder {
  color: rgba(5, 32, 15, 0.38);
}

.table-wrap h3 {
  margin: 12px 0;
  color: var(--caf-ink);
}

.dashboard-table {
  border: 1px solid rgba(0, 122, 61, 0.13);
}

.dashboard-table th {
  background: rgba(0, 122, 61, 0.1);
}

.dashboard-table td {
  background: rgba(255, 255, 255, 0.52);
}

.dashboard-table tr:hover td {
  background: rgba(245, 252, 248, 0.84);
}

.builder-stats span,
.course-meta span {
  color: var(--caf-green-dark);
}

.user-badge {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 122, 61, 0.18);
}

.course-videos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stage-content {
  grid-template-columns: 1fr;
}

.quiz-option {
  border-color: rgba(0, 122, 61, 0.13);
  background: rgba(255, 255, 255, 0.78);
}

.profile-hero {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.88), rgba(0, 71, 42, 0.88));
  box-shadow: 0 18px 50px rgba(0, 43, 24, 0.12);
}

.hero-visual,
.department-hero,
.image-card,
.about-figure,
.feature-card {
  position: relative;
  overflow: hidden;
}

.hero-visual img,
.department-hero img,
.image-card img,
.about-figure img,
.dept-img,
.feature-card img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.04) brightness(0.99);
}

.department-hero img {
  aspect-ratio: 16 / 10;
  max-height: 430px;
}

.hero-visual img,
.about-figure img {
  aspect-ratio: 16 / 10;
}

.image-card::after,
.about-figure::after,
.department-hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 74, 42, 0.08));
}

.department-hero {
  position: relative;
}

.department-hero > div,
.department-hero img {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .hero,
  .about-row,
  .department-hero,
  .department-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-shell {
    padding: 0 18px 56px;
  }

  .site-header {
    margin: 0 -18px;
    padding: 14px 18px;
  }

  .brand-logo {
    width: 54px;
    height: 54px;
  }

  .hero-copy,
  .dashboard-hero,
  .course-hero,
  .department-hero,
  .dashboard-section {
    padding: 22px;
  }
}

.division-strategy,
.department-goals,
.division-profile {
  padding: 34px 0;
}

.division-profile {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: stretch;
}

.division-profile article,
.profile-metrics {
  border-radius: 16px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 34px rgba(0, 43, 24, 0.075);
  backdrop-filter: blur(10px);
}

.division-profile article {
  padding: 28px;
}

.division-profile article span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.division-profile h2 {
  margin-bottom: 12px;
  color: var(--caf-green-dark);
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  line-height: 1.2;
}

.division-profile p {
  color: var(--text-muted);
  line-height: 1.78;
}

.profile-metrics {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.profile-metrics div {
  display: grid;
  gap: 5px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(0, 122, 61, 0.07);
}

.profile-metrics strong {
  color: var(--caf-green-dark);
  font-size: 1rem;
}

.profile-metrics small {
  color: var(--text-muted);
  line-height: 1.45;
}

.dept-img {
  aspect-ratio: 16 / 10;
  min-height: 210px;
  object-fit: cover;
}

.strategy-grid,
.goals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.strategy-grid article,
.goals-grid article {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 100%;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 34px rgba(0, 43, 24, 0.075);
  backdrop-filter: blur(10px);
}

.strategy-grid article span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.1);
  color: var(--caf-green-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.strategy-grid h3,
.goals-grid h3 {
  color: var(--caf-green-dark);
  font-size: 1.06rem;
  line-height: 1.35;
}

.strategy-grid p,
.goals-grid p {
  color: var(--text-muted);
  line-height: 1.72;
}

.values-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(0, 122, 61, 0.12);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(0, 43, 24, 0.06);
}

.values-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  font-size: 0.88rem;
  font-weight: 800;
}

@media (max-width: 1120px) {
  .division-profile,
  .strategy-grid,
  .goals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .division-profile,
  .strategy-grid,
  .goals-grid {
    grid-template-columns: 1fr;
  }

  .strategy-grid article,
  .goals-grid article {
    padding: 20px;
  }
}

/* Final department page layout pass */
main > .department-hero,
main > .division-profile,
main > .department-details,
main > .department-goals,
main > .course-list,
main > .apply-section {
  width: 100%;
  max-width: 100%;
}

main > .department-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 26px;
  align-items: stretch;
  margin: 28px 0 22px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
}

main > .department-hero > div {
  min-width: 0;
  justify-content: center;
}

main > .department-hero h1,
main > .department-hero p,
.division-profile h2,
.division-profile p,
.department-details h2,
.department-details p,
.department-details li,
.goals-grid h3,
.goals-grid p,
.course-card h3,
.course-card p,
.apply-section p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

main > .department-hero h1 {
  font-size: clamp(2.15rem, 4vw, 3.45rem);
  line-height: 1.08;
}

main > .department-hero p {
  max-width: 760px;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}

main > .department-hero img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 460px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
}

main > .division-profile {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px 0 30px;
}

main > .division-profile article,
main > .division-profile .profile-metrics {
  min-width: 0;
}

main > .division-profile article {
  padding: clamp(22px, 3vw, 30px);
}

main > .department-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 30px;
}

main > .department-details article,
.goals-grid article,
.course-card {
  min-width: 0;
  overflow: hidden;
}

main > .department-details article {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
}

main > .department-details h2 {
  margin-bottom: 14px;
  line-height: 1.25;
}

main > .department-details p,
main > .department-details li {
  color: var(--text-muted);
  line-height: 1.72;
}

main > .department-details ul {
  gap: 12px;
}

main > .department-details li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
}

main > .department-details li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  border-radius: 999px;
  background: var(--caf-green);
}

main > .department-goals {
  padding: 18px 0 34px;
}

main > .department-goals .section-heading {
  margin-bottom: 16px;
}

.goals-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.goals-grid article {
  padding: clamp(20px, 2vw, 24px);
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

main > .course-list .course-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-card {
  display: flex;
  flex-direction: column;
}

main > .course-list .course-card {
  gap: 14px;
  min-height: 100%;
  padding: clamp(22px, 2.4vw, 30px);
}

main > .course-list .course-card p {
  line-height: 1.72;
}

.course-card .btn {
  margin-top: auto;
}

main > .apply-section {
  margin-top: 10px;
}

@media (max-width: 1180px) {
  main > .department-hero,
  main > .division-profile {
    grid-template-columns: 1fr;
  }

  main > .department-hero img {
    height: auto;
    max-height: none;
  }

  main > .department-details,
  .goals-grid,
  main > .course-list .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  main > .department-hero {
    padding: 20px;
    margin-top: 18px;
  }

  main > .department-hero img {
    min-height: 220px;
  }

  main > .department-details,
  .goals-grid,
  main > .course-list .course-grid {
    grid-template-columns: 1fr;
  }

  main > .division-profile {
    padding-top: 8px;
  }
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 4px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--caf-green-dark);
  box-shadow: 0 8px 20px rgba(0, 43, 24, 0.06);
  backdrop-filter: blur(10px);
}

.language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--caf-green-dark);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.language-option:hover {
  background: rgba(0, 122, 61, 0.08);
}

.language-option.is-active {
  background: var(--caf-green);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 91, 50, 0.2);
}

.language-flag {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.14);
  vertical-align: middle;
  line-height: 0;
}

.language-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.language-name {
  line-height: 1;
  white-space: nowrap;
}

.auth-header .language-switcher {
  margin-left: auto;
}

html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .site-header,
html[dir="rtl"] .site-nav,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .dashboard-actions,
html[dir="rtl"] .form-row,
html[dir="rtl"] .language-switcher {
  direction: rtl;
}

html[dir="rtl"] .site-nav {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .brand,
html[dir="rtl"] .user-badge,
html[dir="rtl"] .checkbox-label,
html[dir="rtl"] main > .department-details li,
html[dir="rtl"] .student-check span {
  direction: rtl;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}

html[dir="rtl"] .course-card .btn,
html[dir="rtl"] .feature-card .btn,
html[dir="rtl"] .dashboard-card .btn {
  align-self: flex-end;
}

@media (max-width: 760px) {
  .language-switcher {
    width: auto;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .language-option {
    flex: 0 1 auto;
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* Professional CAF header and language control */
.site-header {
  position: sticky;
  top: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 62px;
  padding-top: 5px;
  padding-bottom: 5px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(245, 252, 248, 0.3)),
    rgba(255, 255, 255, 0.32);
  border-bottom: 1px solid rgba(0, 92, 48, 0.07);
  box-shadow: 0 10px 26px rgba(0, 43, 24, 0.035);
  backdrop-filter: blur(5px);
  transition: min-height 0.18s ease, padding 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.site-header:hover,
.site-header:focus-within {
  gap: 16px;
  min-height: 78px;
  padding-top: 10px;
  padding-bottom: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(245, 252, 248, 0.86)),
    rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(0, 92, 48, 0.18);
  box-shadow: 0 14px 34px rgba(0, 43, 24, 0.1);
}

.site-header::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--caf-green), var(--caf-gold), var(--caf-green-dark));
  opacity: 0.48;
}

.brand {
  flex: 0 0 auto;
  min-width: fit-content;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(0, 122, 61, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 10px 22px rgba(0, 43, 24, 0.035);
  font-size: 0.78rem;
  white-space: nowrap;
  letter-spacing: 0;
  transition: gap 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, font-size 0.18s ease;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(0, 122, 61, 0.18);
  box-shadow: 0 10px 24px rgba(0, 43, 24, 0.12);
  transition: width 0.18s ease, height 0.18s ease, padding 0.18s ease, border-radius 0.18s ease;
}

.site-nav {
  flex: 1 1 auto;
  /* wrap (not nowrap): the logged-in nav (Departments, CAFnizer, About,
     CAFlirary, Medical Dashboard, Dashboard, user badge, Logout, flags) can
     exceed its column's width at narrower desktop widths. With nowrap and
     no flex-shrink, the overflow spilled left past nav's own column and
     collided with the priority (home/notifications) icons. Wrap lets excess
     items drop to a second line inside nav's own box instead — a taller
     row, never an overlap. No effect when content already fits one line. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(0, 122, 61, 0.11);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transition: gap 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.site-header:hover .brand,
.site-header:focus-within .brand {
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 26px rgba(0, 43, 24, 0.08);
  font-size: 1.08rem;
}

.site-header:hover .brand-logo,
.site-header:focus-within .brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  padding: 6px;
}

.site-header:hover .site-nav,
.site-header:focus-within .site-nav {
  gap: 5px;
  padding: 5px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.site-nav a:not(.btn),
.site-nav span > a {
  flex: 0 0 auto;
  min-width: 82px;
  min-height: 24px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(3, 33, 18, 0.78);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
  transition: min-height 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, background 0.18s ease, color 0.18s ease, font-size 0.18s ease, transform 0.18s ease;
}

.site-header:hover .site-nav a:not(.btn),
.site-header:focus-within .site-nav a:not(.btn),
.site-header:hover .site-nav span > a,
.site-header:focus-within .site-nav span > a {
  min-height: 34px;
  min-width: auto;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.site-nav a:not(.btn):hover,
.site-nav span > a:hover {
  border-color: rgba(0, 122, 61, 0.2);
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  transform: translateY(-1px);
}

.site-nav .btn,
#auth-link {
  min-width: 96px;
  min-height: 24px;
  padding: 5px 10px !important;
  border-radius: 8px;
  border: 1px solid rgba(0, 92, 48, 0.12);
  box-shadow: 0 8px 16px rgba(0, 91, 50, 0.1);
  font-size: 0.62rem;
  white-space: nowrap;
  transition: min-height 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, box-shadow 0.18s ease, font-size 0.18s ease;
}

.site-header:hover .site-nav .btn,
.site-header:focus-within .site-nav .btn,
.site-header:hover #auth-link,
.site-header:focus-within #auth-link {
  min-height: 34px;
  min-width: auto;
  padding: 8px 12px !important;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0, 91, 50, 0.16);
  font-size: 0.8rem;
}


@media (max-width: 980px) {
  .site-header {
    position: sticky;
    top: 0;
    min-height: auto;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .brand {
    width: 100%;
  }

  .brand-logo {
    width: 54px;
    height: 54px;
  }

  .site-nav {
    justify-content: center;
  }

  .language-switcher {
    width: auto;
    justify-content: center;
  }

  .language-option {
    flex: 0 0 auto;
  }
}

/* Division color system */
.theme-technology {
  --division-color: #f26a21;
  --division-color-dark: #a94000;
  --division-soft: rgba(242, 106, 33, 0.12);
  --division-line: rgba(242, 106, 33, 0.28);
  --division-glow: rgba(242, 106, 33, 0.18);
}

.theme-refereeing {
  --division-color: #7a818c;
  --division-color-dark: #3f4650;
  --division-soft: rgba(122, 129, 140, 0.14);
  --division-line: rgba(122, 129, 140, 0.32);
  --division-glow: rgba(63, 70, 80, 0.16);
}

.theme-health {
  --division-color: #d92332;
  --division-color-dark: #8b1019;
  --division-soft: rgba(217, 35, 50, 0.11);
  --division-line: rgba(217, 35, 50, 0.28);
  --division-glow: rgba(217, 35, 50, 0.18);
}

.theme-women {
  --division-color: #8e44ad;
  --division-color-dark: #57256f;
  --division-soft: rgba(142, 68, 173, 0.12);
  --division-line: rgba(142, 68, 173, 0.3);
  --division-glow: rgba(142, 68, 173, 0.18);
}

.theme-coaching {
  --division-color: #1f74d1;
  --division-color-dark: #0f3f7a;
  --division-soft: rgba(31, 116, 209, 0.12);
  --division-line: rgba(31, 116, 209, 0.3);
  --division-glow: rgba(31, 116, 209, 0.18);
}

.theme-strategy {
  --division-color: #0f8a55;
  --division-color-dark: #06442d;
  --division-soft: rgba(15, 138, 85, 0.11);
  --division-line: rgba(15, 138, 85, 0.28);
  --division-glow: rgba(15, 138, 85, 0.16);
}

.division-theme .eyebrow,
.division-theme .section-kicker,
.feature-card[class*="theme-"] .dept-link {
  background: var(--division-soft);
  border-color: var(--division-line);
  color: var(--division-color-dark);
}

.division-theme main > .department-hero,
.feature-card[class*="theme-"] {
  border-color: var(--division-line);
  box-shadow: 0 18px 42px var(--division-glow);
}

.division-theme main > .department-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64)),
    linear-gradient(135deg, var(--division-soft), rgba(255, 255, 255, 0));
}

.division-theme main > .department-hero::before,
.feature-card[class*="theme-"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--division-color), var(--division-color-dark));
  z-index: 2;
}

.division-theme main > .department-hero h1,
.division-theme .division-profile h2,
.division-theme .department-details h2,
.division-theme .department-goals h2,
.division-theme .course-list h2,
.feature-card[class*="theme-"] h3 {
  color: var(--division-color-dark);
}

.division-theme .division-profile article,
.division-theme .profile-metrics,
.division-theme .department-details article,
.division-theme .goals-grid article,
.division-theme .course-card,
.division-theme .apply-section {
  border-color: var(--division-line);
}

.division-theme .profile-metrics div,
.division-theme .strategy-grid article span,
.division-theme .goals-grid article,
.division-theme .course-date {
  background: var(--division-soft);
}

.division-theme .profile-metrics strong,
.division-theme .goals-grid h3,
.division-theme .course-date {
  color: var(--division-color-dark);
}

.division-theme main > .department-details li::before,
.division-theme main > .department-details li::before {
  background: var(--division-color);
}

.division-theme .btn-primary,
.division-theme .course-card .btn,
.division-theme .department-form .btn {
  background: linear-gradient(135deg, var(--division-color), var(--division-color-dark));
  border-color: transparent;
  box-shadow: 0 10px 22px var(--division-glow);
}

.division-theme .btn-primary:hover,
.division-theme .course-card .btn:hover,
.division-theme .department-form .btn:hover {
  background: var(--division-color-dark);
}

.feature-card[class*="theme-"] {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.68)),
    linear-gradient(135deg, var(--division-soft), rgba(255, 255, 255, 0));
  overflow: hidden;
}

.feature-card[class*="theme-"] .dept-img {
  border: 1px solid var(--division-line);
}

.feature-card[class*="theme-"] .dept-link {
  color: var(--division-color-dark);
}

.feature-card[class*="theme-"] .dept-link:hover {
  background: var(--division-color);
  border-color: var(--division-color);
  color: #fff;
}

/* Homepage gallery polish */
.image-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.image-gallery .image-card {
  height: clamp(220px, 23vw, 330px);
  border-radius: 16px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.image-gallery .image-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12);
  transition: transform 0.35s ease;
}

.image-gallery .image-card:hover img {
  transform: scale(1.18);
}

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

  .image-gallery .image-card {
    height: clamp(220px, 52vw, 360px);
  }
}

/* Professional authentication page */
.auth-modern {
  display: block;
  min-height: 100vh;
  padding: clamp(18px, 3vw, 34px);
  overflow: auto;
}

.auth-modern::before {
  background:
    linear-gradient(135deg, rgba(0, 71, 42, 0.2), rgba(255, 255, 255, 0.38)),
    rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(1px);
}

.auth-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  gap: clamp(18px, 2vw, 28px);
  width: min(1240px, 100%);
  margin: 0 auto;
  align-items: stretch;
}

.auth-visual-panel,
.auth-content-panel {
  min-width: 0;
  border-radius: 22px;
  border: 1px solid rgba(0, 122, 61, 0.16);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 24px 60px rgba(0, 43, 24, 0.14);
  overflow: hidden;
}

.auth-visual-panel {
  position: sticky;
  top: 24px;
  min-height: calc(100vh - 68px);
  color: #fff;
}

.auth-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
}

.auth-visual-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 43, 24, 0.1), rgba(0, 43, 24, 0.62)),
    linear-gradient(90deg, rgba(0, 43, 24, 0.58), rgba(0, 43, 24, 0.08));
}

.auth-logo-card,
.auth-visual-copy {
  position: relative;
  z-index: 1;
}

.auth-logo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 24px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.82);
  color: var(--caf-green-dark);
  box-shadow: 0 18px 42px rgba(0, 43, 24, 0.18);
  backdrop-filter: blur(12px);
}

.auth-logo-card img {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  object-fit: contain;
  background: #fff;
}

.auth-logo-card strong,
.auth-logo-card span {
  display: block;
  line-height: 1.15;
}

.auth-logo-card strong {
  font-size: 1rem;
}

.auth-logo-card span {
  margin-top: 3px;
  color: rgba(0, 71, 42, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

.auth-visual-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 30px;
  display: grid;
  gap: 12px;
  max-width: 620px;
}

.auth-visual-copy span {
  width: fit-content;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-visual-copy h1 {
  font-size: clamp(2rem, 3.3vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.auth-visual-copy p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
}

.auth-content-panel {
  padding: clamp(20px, 2.6vw, 34px);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
}

.auth-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 8px;
  border: 1px solid rgba(0, 122, 61, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(0, 43, 24, 0.06);
}

.auth-mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--caf-green-dark);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 950;
}

.auth-mini-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(0, 122, 61, 0.14);
}

.auth-top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}

.auth-top-actions .btn {
  min-width: auto;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.74rem;
}

.auth-language-slot {
  display: inline-flex;
}

.auth-language-slot .language-switcher {
  width: auto;
}

.auth-language-slot:empty {
  display: none;
}

.auth-modern .auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: none;
  gap: 0;
}

.auth-modern #signup {
  display: none;
}

.auth-modern .form-card {
  padding: clamp(22px, 3vw, 34px);
  border-radius: 18px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(0, 43, 24, 0.08);
}

.auth-form-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  margin: 0 auto 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0, 122, 61, 0.12);
}

.auth-form-hero h1 {
  color: var(--caf-green-dark);
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  line-height: 1.04;
  margin: 8px 0 10px;
}

.auth-form-hero p {
  max-width: 520px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.auth-modern .register-card {
  max-height: 72vh;
  overflow: auto;
  padding-right: clamp(22px, 3vw, 34px);
}

.auth-modern .form-switch {
  align-items: flex-start;
  gap: 14px;
}

.auth-modern .form-switch h2 {
  color: var(--caf-green-dark);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.auth-modern .form-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 122, 61, 0.08);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 900;
}

.auth-modern .muted {
  margin: 0 0 18px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(0, 122, 61, 0.06);
  color: rgba(3, 33, 18, 0.62);
  font-size: 0.84rem;
  font-weight: 800;
}

.auth-modern .form-card label {
  margin-bottom: 7px;
  font-size: 0.86rem;
  font-weight: 850;
}

.auth-modern .form-card input,
.auth-modern .form-card select {
  min-height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.auth-modern .password-field input,
.secure-update-form .password-field input,
.form-card .password-field input {
  margin-bottom: 0;
}

.auth-modern .checkbox-label {
  align-items: flex-start;
  margin: 10px 0;
  line-height: 1.45;
}

.auth-modern .btn-primary {
  width: 100%;
  margin-top: 10px;
}

.auth-register-prompt {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.06), rgba(212, 165, 116, 0.09));
  text-align: center;
}

.auth-register-prompt span {
  color: rgba(3, 33, 18, 0.68);
  font-size: 0.9rem;
  font-weight: 850;
}

.auth-register-prompt .btn {
  width: 100%;
  border-color: rgba(0, 122, 61, 0.24);
  background: rgba(255, 255, 255, 0.88);
  color: var(--caf-green-dark);
}

.auth-register-prompt .btn:hover {
  background: rgba(0, 122, 61, 0.1);
}

/* Global glass polish: keep content readable while letting the CAF background breathe. */
.hero-copy,
.department-hero,
.dashboard-hero,
.course-hero,
.auth-header,
.access-section,
.member-welcome,
.access-card,
.member-tool,
.department-card,
.feature-card,
.dashboard-section,
.dashboard-card,
.command-center article,
.course-video,
.course-content-block,
.course-step-panel,
.stage-block,
.final-test,
.stage-quiz,
.quiz-question,
.builder-panel,
.planned-upload-group,
.planned-question-row,
.pathway-course-row,
.profile-card,
.account-section,
.secure-update-panel,
.form-card,
.auth-column,
.auth-logo-card,
.auth-modern .form-card {
  background-color: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(12px);
}

.dashboard-card,
.course-video,
.course-content-block,
.stage-block,
.final-test,
.quiz-question,
.builder-panel,
.pathway-course-row,
.profile-card,
.form-card,
.auth-column,
.auth-modern .form-card {
  border-color: rgba(0, 122, 61, 0.16);
  box-shadow: 0 12px 28px rgba(0, 43, 24, 0.055);
}

.smart-list a,
.pathway-list > div,
.badge-grid > div,
.leaderboard-list > div,
.notes-list > div,
.mini-list,
.course-document,
.quiz-option,
.assessment-timer,
.table-wrap,
.catalog-meta span,
.status-pill,
.auth-register-prompt .btn {
  background-color: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(10px);
}

.stage-learning,
.block-quiz,
.course-block-image,
.builder-stats span,
.auth-modern .muted,
.password-toggle {
  background-color: rgba(0, 122, 61, 0.055);
}

.form-card input,
.form-card select,
.auth-column form input,
.auth-column form select,
.dashboard-form input,
.dashboard-form select,
.dashboard-form textarea,
.department-form textarea,
.auth-modern .form-card input,
.auth-modern .form-card select,
.secure-update-form input {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

@media (max-width: 1040px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-visual-panel {
    position: relative;
    top: auto;
    min-height: 420px;
  }

  .auth-modern .register-card {
    max-height: none;
  }
}

@media (max-width: 620px) {
  .auth-modern {
    padding: 14px;
  }

  .auth-top-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-top-actions,
  .auth-top-actions .btn,
  .auth-top-actions .auth-language-slot {
    width: 100%;
  }

  .auth-top-actions .btn {
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .auth-top-actions .language-switcher {
    width: 100%;
  }

  .auth-visual-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: auto;
    padding: 18px;
    gap: 18px;
  }

  .auth-logo-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 12px;
    align-items: center;
    overflow-wrap: anywhere;
  }

  .auth-logo-card img {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
  }

  .auth-logo-card div {
    min-width: 0;
  }

  .auth-logo-card strong,
  .auth-logo-card span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .auth-visual-copy {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    gap: 10px;
    max-width: 100%;
  }

  .auth-visual-copy h1 {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 1.05;
  }

  .auth-visual-copy p {
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}

/* CAF premium platform polish */
:where(a, button, input, select, textarea) {
  outline-offset: 3px;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(212, 165, 116, 0.62);
}

::selection {
  background: rgba(0, 122, 61, 0.22);
  color: var(--caf-green-dark);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::after {
  background:
    linear-gradient(180deg, rgba(248, 253, 250, 0.28), rgba(238, 249, 243, 0.42) 48%, rgba(255, 255, 255, 0.62) 100%),
    radial-gradient(circle at 18% 18%, rgba(0, 122, 61, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.2));
}

.page-shell {
  padding-left: clamp(16px, 2.3vw, 32px);
  padding-right: clamp(16px, 2.3vw, 32px);
}

.section-heading {
  gap: 10px;
}

.section-heading h2,
.dashboard-hero h1,
.course-hero h1,
.department-hero h1,
.hero-copy h1,
.auth-form-hero h1 {
  letter-spacing: 0;
  text-wrap: balance;
}

.section-heading p,
.hero-copy p,
.dashboard-hero p,
.course-hero p,
.department-hero p,
.dashboard-card p,
.course-card p,
.access-card li,
.member-tool span {
  text-wrap: pretty;
}

.hero-copy,
.department-hero,
.dashboard-hero,
.course-hero,
.access-section,
.member-welcome,
.dashboard-section,
.dashboard-card,
.course-card,
.access-card,
.member-tool,
.course-step-panel,
.stage-block,
.final-test,
.course-video,
.course-content-block,
.builder-panel,
.form-card,
.auth-column,
.profile-card {
  border-radius: 14px;
  border-color: rgba(0, 92, 48, 0.14);
  box-shadow:
    0 18px 42px rgba(0, 43, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.dashboard-card,
.course-card,
.access-card,
.member-tool,
.course-step-panel,
.builder-panel,
.pathway-course-row,
.smart-list a,
.pathway-list > div,
.notes-list > div,
.leaderboard-list > div,
.badge-grid > div {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.dashboard-card:hover,
.course-card:hover,
.access-card:hover,
.member-tool:hover,
.smart-list a:hover,
.pathway-list > div:hover,
.notes-list > div:hover,
.leaderboard-list > div:hover,
.badge-grid > div:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 122, 61, 0.28);
  box-shadow:
    0 22px 50px rgba(0, 43, 24, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.btn,
.link-btn,
.table-btn,
button {
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn {
  min-width: 0;
  min-height: 38px;
  gap: 8px;
  border-width: 1px;
  border-radius: 9px;
  box-shadow: none;
  white-space: nowrap;
}

.btn-primary {
  background:
    linear-gradient(135deg, rgba(0, 122, 61, 0.96), rgba(0, 71, 42, 0.98));
  border-color: rgba(0, 92, 48, 0.28);
  box-shadow: 0 12px 24px rgba(0, 91, 50, 0.18);
}

.btn-primary:hover {
  background:
    linear-gradient(135deg, rgba(0, 143, 80, 0.98), rgba(0, 71, 42, 1));
  box-shadow: 0 16px 30px rgba(0, 91, 50, 0.22);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(0, 122, 61, 0.2);
  color: var(--caf-green-dark);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(0, 122, 61, 0.08);
  border-color: rgba(0, 122, 61, 0.32);
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--caf-green-dark);
  font-weight: 900;
  cursor: pointer;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  border-radius: 10px;
  border-color: rgba(0, 92, 48, 0.16);
  color: rgba(5, 32, 15, 0.82);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 122, 61, 0.42);
  box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.08);
}

input::placeholder,
textarea::placeholder {
  color: rgba(5, 32, 15, 0.38);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
  min-height: 46px;
  text-align: center;
  text-align-last: center;
  line-height: 1.35;
}

textarea {
  min-height: 96px;
  text-align: center;
  line-height: 1.55;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"] {
  text-align: center;
}

select option {
  text-align: left;
}

.account-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, auto);
  gap: 14px;
  align-items: center;
}

.account-label {
  color: rgba(5, 32, 15, 0.72);
  font-weight: 850;
}

.account-change-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: 170px;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--caf-green-dark);
  font-size: 0.88rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.account-change-btn:hover,
.account-change-btn:focus-visible {
  background: rgba(0, 122, 61, 0.09);
  border-color: rgba(0, 122, 61, 0.32);
}

.secure-update-form label,
.secure-update-panel h3,
.secure-update-panel p {
  text-align: center;
}

.dashboard-form,
.compact-form,
.auth-column form,
.form-card form {
  gap: 12px;
}

.dashboard-form label,
.auth-column form label,
.form-card label,
.department-form label {
  color: rgba(5, 32, 15, 0.72);
  letter-spacing: 0;
}

.site-header {
  border-bottom-width: 1px;
}

.site-nav a:not(.btn),
.site-nav span > a,
.language-option {
  letter-spacing: 0;
}

.language-switcher {
  box-shadow:
    0 8px 18px rgba(0, 43, 24, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.dashboard-table {
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.34);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dashboard-table th {
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
}

.dashboard-table td {
  background: rgba(255, 255, 255, 0.42);
}

.dashboard-table tr:hover td {
  background: rgba(0, 122, 61, 0.055);
}

.catalog-meta span,
.status-pill,
.builder-stats span,
.section-kicker,
.eyebrow {
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.course-step-tabs button {
  border-radius: 10px;
}

.course-step-tabs button.active {
  box-shadow:
    0 12px 26px rgba(0, 91, 50, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.quiz-option {
  min-height: 42px;
}

.quiz-option:hover {
  border-color: rgba(0, 122, 61, 0.25);
  background-color: rgba(0, 122, 61, 0.045);
}

.assessment-timer strong {
  letter-spacing: 0;
}

.hero-visual img,
.department-hero img,
.course-block-image,
.profile-photo img {
  box-shadow: 0 18px 38px rgba(0, 43, 24, 0.1);
}

@media (max-width: 980px) {
  html {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    max-width: 100%;
  }

  .site-header,
  .site-nav {
    max-width: 100%;
  }

  .site-nav {
    overflow: hidden;
  }

  .language-switcher {
    min-height: 28px;
    padding: 2px;
    gap: 2px;
  }

  .language-option {
    min-height: 24px;
    padding: 3px 5px;
    font-size: 0.62rem;
  }

  .language-name {
    display: none;
  }
}

@media (max-width: 760px) {
  .btn {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }

  .account-item {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 8px;
  }

  .account-label {
    text-align: center;
  }

  .account-change-btn {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
  }

  .dashboard-actions,
  .hero-actions,
  .profile-actions,
  .secure-update-actions {
    gap: 10px;
  }

  .section-heading h2,
  .dashboard-hero h1,
  .course-hero h1,
  .department-hero h1,
  .hero-copy h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }
}

.course-empty .btn,
.certificate-verify .btn,
.meeting-room-empty .btn,
#verify-root .btn,
#meeting-root .course-empty .btn {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
}

.course-empty .dashboard-actions .btn {
  justify-self: start;
}

.site-nav .notification-panel a,
.site-nav .notification-panel button {
  min-width: 0;
  min-height: 0;
  padding: 13px 16px;
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  white-space: normal;
  transform: none;
}

.site-nav .notification-panel .notification-view-all {
  min-height: 40px;
  padding: 10px;
  border-radius: 0;
  font-size: 0.82rem;
}

.site-nav .site-search-results a,
.site-nav .site-search-results .site-search-empty {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 13px 15px !important;
  border: 0;
  border-bottom: 1px solid rgba(0, 122, 61, 0.08);
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  transform: none;
}

.site-nav .site-search-results a:hover,
.site-nav .site-search-results a:focus-visible {
  background: rgba(0, 122, 61, 0.06);
  color: inherit;
  transform: none;
}

/* ── Search result isolation ──────────────────────────────────────────────────
   .site-nav a:not(.btn) rules (compact size, focus-within expansion, responsive
   flex sizing) all match <a class="site-search-result"> elements too. These
   overrides use higher specificity + !important to stop that style bleed, which
   caused animated height jumps and broken grid layout inside the dropdown.    */
.site-header .site-nav .site-search-results a,
.site-header:hover .site-nav .site-search-results a,
.site-header:focus-within .site-nav .site-search-results a {
  display: grid !important;
  flex: none !important;
  align-items: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 13px 15px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 122, 61, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--caf-green-dark) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.15s ease !important;
}

.site-header .site-nav .site-search-results a:hover,
.site-header:hover .site-nav .site-search-results a:hover,
.site-header:focus-within .site-nav .site-search-results a:hover,
.site-header .site-nav .site-search-results a:focus-visible,
.site-header:hover .site-nav .site-search-results a:focus-visible,
.site-header:focus-within .site-nav .site-search-results a:focus-visible {
  background: rgba(0, 122, 61, 0.06) !important;
  border-color: transparent !important;
  transform: none !important;
}

.site-nav .site-search-results a strong {
  display: block;
  color: var(--caf-green-dark);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.3;
}

.site-nav .site-search-results a span {
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.45;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .site-header,
  .site-header:hover,
  .site-header:focus-within {
    flex-wrap: wrap;
    gap: 10px;
    min-height: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .site-header .brand,
  .site-header:hover .brand,
  .site-header:focus-within .brand {
    flex: 1 1 100%;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
  }

  .site-header .brand-logo,
  .site-header:hover .brand-logo,
  .site-header:focus-within .brand-logo {
    width: 50px;
    height: 50px;
    padding: 5px;
  }

  .site-nav,
  .site-header:hover .site-nav,
  .site-header:focus-within .site-nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    overflow: visible;
    padding: 6px;
  }

  .site-search {
    flex: 1 1 100%;
    max-width: 560px;
  }

  .cafnizer-nav-character {
    order: -3;
    flex: 1 1 150px;
    max-width: 220px;
    min-height: 36px;
    font-size: 0.78rem !important;
  }

  .site-nav a:not(.btn),
  .site-nav span > a,
  .site-header:hover .site-nav a:not(.btn),
  .site-header:focus-within .site-nav a:not(.btn),
  .site-header:hover .site-nav span > a,
  .site-header:focus-within .site-nav span > a,
  .site-nav .btn,
  #auth-link,
  .site-header:hover .site-nav .btn,
  .site-header:focus-within .site-nav .btn,
  .site-header:hover #auth-link,
  .site-header:focus-within #auth-link {
    flex: 1 1 120px;
    max-width: 190px;
    min-height: 34px;
    padding: 8px 10px !important;
    font-size: 0.78rem;
    white-space: normal;
    text-align: center;
    transform: none;
  }

  .notification-wrap {
    flex: 0 0 38px;
    order: -3;
  }

  .user-badge-wrap {
    flex: 1 1 calc(100% - 52px);
    max-width: calc(100% - 52px);
    order: -2;
  }

  .user-badge {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .user-badge-name {
    max-width: min(260px, 42vw);
  }

  .language-switcher {
    flex: 0 1 224px;
    max-width: 224px;
    order: 10;
    justify-self: center;
  }

  .site-nav > a[href="#"].logout-link,
  .site-nav > a[href="dashboard.html"].logout-link {
    flex: 1 1 180px;
    max-width: 260px;
  }

  html[dir="rtl"] .site-nav {
    direction: rtl;
  }
}

@media (max-width: 760px) {
  .page-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-header,
  .site-header:hover,
  .site-header:focus-within {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin-left: -14px;
    margin-right: -14px;
    padding: 8px 14px 10px;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(245, 252, 248, 0.82)),
      rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(0, 43, 24, 0.08);
  }

  .site-header .brand,
  .site-header:hover .brand,
  .site-header:focus-within .brand {
    flex: 1 1 100%;
    justify-content: center;
    width: 100%;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 12px;
    font-size: 0.92rem;
  }

  .site-header .brand-logo,
  .site-header:hover .brand-logo,
  .site-header:focus-within .brand-logo {
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 10px;
  }

  .site-nav,
  .site-header:hover .site-nav,
  .site-header:focus-within .site-nav {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 5px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.58);
  }

  .site-search {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .cafnizer-nav-character {
    order: -3;
    flex: 1 1 calc(50% - 6px);
    min-width: 128px;
    max-width: 100%;
    min-height: 38px;
  }

  .site-search-results {
    left: 50%;
    width: min(420px, calc(100vw - 28px));
    transform: translateX(-50%);
  }

  .site-nav a:not(.btn),
  .site-nav span > a,
  .site-header:hover .site-nav a:not(.btn),
  .site-header:focus-within .site-nav a:not(.btn),
  .site-header:hover .site-nav span > a,
  .site-header:focus-within .site-nav span > a,
  .site-nav .btn,
  #auth-link,
  .site-header:hover .site-nav .btn,
  .site-header:focus-within .site-nav .btn,
  .site-header:hover #auth-link,
  .site-header:focus-within #auth-link {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 88px;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 8px !important;
    border-radius: 9px;
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
    transform: none;
  }

  .notification-wrap {
    flex: 0 0 38px;
    order: -1;
  }

  .notification-bell {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .site-search-submit {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  .user-badge-wrap {
    flex: 1 1 auto;
    min-width: 118px;
    max-width: calc(100% - 48px);
    order: -1;
  }

  .user-badge {
    width: 100%;
    min-height: 34px;
    padding: 5px 8px;
    gap: 7px;
    border-radius: 10px;
  }

  .user-avatar {
    width: 28px;
    height: 28px;
  }

  .user-badge-name {
    max-width: 120px;
    font-size: 0.76rem;
  }

  .user-badge-text small {
    font-size: 0.62rem;
  }

  .language-switcher {
    flex: 0 1 70%;
    order: 10;
    width: 70%;
    max-width: 230px;
    min-height: 30px;
    padding: 3px;
    border-radius: 10px;
  }

  .language-option {
    flex: 1 1 0;
    min-height: 26px;
    padding: 4px 5px;
    font-size: 0.62rem;
  }

  html[dir="rtl"] .site-nav {
    direction: rtl;
  }

  html[dir="rtl"] .notification-wrap {
    order: -3;
  }

  html[dir="rtl"] .user-badge-wrap {
    order: -2;
    flex: 1 1 calc(100% - 48px);
    max-width: calc(100% - 48px);
  }

  html[dir="rtl"] .user-badge {
    justify-content: center;
    min-width: 0;
  }

  html[dir="rtl"] .site-nav .logout-link {
    flex: 1 1 calc(50% - 6px);
    min-width: 108px;
  }
}

.site-nav .cafnizer-nav-character,
.site-header:hover .site-nav .cafnizer-nav-character,
.site-header:focus-within .site-nav .cafnizer-nav-character {
  display: inline-flex !important;
  flex: 0 0 auto;
  min-width: 104px;
  max-width: 150px;
  min-height: 34px;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .site-nav .cafnizer-nav-character,
  .site-header:hover .site-nav .cafnizer-nav-character,
  .site-header:focus-within .site-nav .cafnizer-nav-character {
    order: -3;
    flex: 1 1 150px;
    max-width: 220px;
  }
}

@media (max-width: 760px) {
  .site-nav .site-search,
  .site-header:hover .site-nav .site-search,
  .site-header:focus-within .site-nav .site-search {
    order: -4;
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .site-nav .cafnizer-nav-character,
  .site-header:hover .site-nav .cafnizer-nav-character,
  .site-header:focus-within .site-nav .cafnizer-nav-character {
    order: -3;
    flex: 1 1 calc(50% - 6px);
    min-width: 128px;
    max-width: 100%;
    min-height: 38px;
  }
}

/* Final compact language control override */
.language-switcher {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 0 0 120px;
  width: 120px;
  max-width: 120px;
}

.language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.language-name {
  display: inline-block;
  font-weight: 950;
}

/* ── Mobile: flags-only, no text labels ── */
@media (max-width: 760px) {
  .language-switcher {
    flex: 0 0 96px;
    width: 96px;
    max-width: 96px;
    min-height: 28px;
    padding: 3px;
    gap: 2px;
  }

  .language-option {
    flex: 1 1 0;
    min-height: 22px;
    min-width: 0;
    padding: 3px 4px;
    gap: 0;
    font-size: 0;
  }

  .language-flag {
    width: 18px;
    height: 12px;
  }

  .language-name {
    display: none;
  }
}

@media (max-width: 480px) {
  .language-switcher {
    flex: 0 0 84px;
    width: 84px;
    max-width: 84px;
    padding: 2px;
  }

  .language-option {
    padding: 2px 3px;
  }

  .language-flag {
    width: 16px;
    height: 11px;
  }
}


/* ════════════════════════════════════════════════════════
   CAFsessor Ecosystem Section
════════════════════════════════════════════════════════ */
.ecosystem-section {
  padding: 40px 0 48px;
}

/* Solid white block so background image doesn't bleed through */
.ecosystem-section-inner {
  background: rgba(255,255,255,0.97);
  border-radius: 28px;
  padding: 52px 40px 56px;
  border: 1px solid rgba(0,122,61,0.10);
  box-shadow: 0 8px 48px rgba(0,43,24,0.09);
}

.ecosystem-section-inner .section-heading h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  color: #0f1724;
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .ecosystem-grid { grid-template-columns: 1fr; }
}

.ecosystem-card {
  background: #fff;
  border-radius: 20px;
  padding: 34px 30px 30px;
  box-shadow: 0 6px 28px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .2s, transform .2s;
}
.ecosystem-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.ecosystem-card--learn { border-top: 4px solid #007a3d; }
.ecosystem-card--ops   { border-top: 4px solid #1d4ed8; }
.ecosystem-card--ai    { border-top: 4px solid #7c3aed; opacity: .92; }

/* Consistent icon container for both SVG and emoji */
.eco-icon {
  font-size: 2.4rem;
  line-height: 1;
  height: 64px;
  display: flex;
  align-items: center;
}
.eco-icon svg { display: block; }

.ecosystem-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f1724;
  margin: 0;
  line-height: 1.2;
}

.eco-role {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin: 0;
}

.ecosystem-card--learn .eco-role { color: #007a3d; }
.ecosystem-card--ops   .eco-role { color: #1d4ed8; }
.ecosystem-card--ai    .eco-role { color: #7c3aed; }

.ecosystem-card > p {
  font-size: .95rem;
  color: #374151;
  margin: 0;
  line-height: 1.65;
}

.eco-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.eco-features li {
  font-size: .9rem;
  color: #374151;
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}

.eco-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
}

.ecosystem-card--learn .eco-features li::before { color: #007a3d; }
.ecosystem-card--ops   .eco-features li::before { color: #1d4ed8; }
.ecosystem-card--ai    .eco-features li::before { color: #7c3aed; }

.eco-cta { align-self: flex-start; margin-top: 4px; }

.ecosystem-soon {
  display: inline-block;
  padding: 9px 20px;
  background: rgba(124,58,237,.08);
  color: #7c3aed;
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .4px;
  margin-top: 4px;
  align-self: flex-start;
}

@media (max-width: 640px) {
  .ecosystem-grid { gap: 16px; }
  .ecosystem-card { padding: 24px; }
}

/* ════════════════════════════════════════════════════════
   Executive KPI Dashboard Section
════════════════════════════════════════════════════════ */
.exec-kpi-section { margin-bottom: 0; }

.section-desc {
  font-size: .85rem;
  color: #6b7280;
  margin: 4px 0 0;
}

.exec-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.exec-kpi-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid rgba(0,122,61,.1);
}

.exec-kpi-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #007a3d;
  line-height: 1.1;
  margin-bottom: 4px;
}

.exec-kpi-card p {
  font-size: .8rem;
  color: #6b7280;
  margin: 0;
  font-weight: 500;
}

.exec-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 4px;
}

.exec-chart-card { padding: 20px; }
.exec-chart-card h3 { margin: 0 0 14px; font-size: .95rem; color: #374151; }

.exec-chart-wrap {
  position: relative;
  height: 200px;
}

@media (max-width: 600px) {
  .exec-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .exec-charts-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   CAFnizer Operations Assistant — Amina widget
═══════════════════════════════════════════════ */
#caf-asst-root {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
}

.caf-asst-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #007a3d;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 6px 24px rgba(0,122,61,0.38), 0 2px 8px rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}
.caf-asst-btn:hover { transform: scale(1.07); box-shadow: 0 10px 32px rgba(0,122,61,0.48), 0 4px 12px rgba(0,0,0,0.18); }
.caf-asst-btn.is-open { background: #005c2e; }

.caf-asst-btn-icon svg { width: 56px; height: 56px; display: block; border-radius: 50%; }

.caf-asst-notify {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #e53e3e;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
}

.caf-asst-panel {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 320px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,122,61,0.12);
  overflow: hidden;
  animation: asst-slide-in 0.22s ease-out;
}
@keyframes asst-slide-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.caf-asst-header {
  background: linear-gradient(135deg, #007a3d, #00a34f);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.caf-asst-hdr-avatar svg { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.10); }
.caf-asst-hdr-text { flex: 1; min-width: 0; }
.caf-asst-hdr-text strong { display: block; font-size: 14px; font-weight: 900; color: #fff; }
.caf-asst-hdr-text span   { display: block; font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 600; }
.caf-asst-hdr-text small  { display: block; font-size: 9.5px; color: rgba(255,255,255,0.50); margin-top: 1px; }

.caf-asst-x {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.30);
  background: transparent;
  color: rgba(255,255,255,0.80);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}
.caf-asst-x:hover { background: rgba(255,255,255,0.15); }

.caf-asst-body { padding: 14px 16px 8px; }

.caf-asst-msg {
  background: #f0f9f4;
  border: 1px solid #c6e8d4;
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 12px;
  position: relative;
}
.caf-asst-msg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00a34f;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.caf-asst-msg p { font-size: 12.5px; color: #1a3d2a; line-height: 1.5; margin: 0; display: inline; }

.caf-asst-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.caf-asst-qbtn {
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(0,122,61,0.07);
  color: #007a3d;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(0,122,61,0.18);
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.caf-asst-qbtn:hover { background: #007a3d; color: #fff; border-color: #007a3d; }

.caf-asst-divider { height: 1px; background: #f0f4f3; margin: 4px 0 10px; }

.caf-asst-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 6px;
}
.caf-asst-links a {
  font-size: 11px;
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.12s;
}
.caf-asst-links a:hover { color: #007a3d; }

.caf-asst-footer {
  background: #f8fafc;
  border-top: 1px solid #f0f4f3;
  padding: 8px 16px;
  font-size: 10.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.caf-asst-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  /* Stack Amina above kora on mobile so they don't overlap */
  #caf-asst-root { bottom: 96px; right: 14px; }
  .kora-assistant { right: 14px; bottom: 14px; }
}
@media (max-width: 600px) {
  #caf-asst-root {
    bottom: max(80px, env(safe-area-inset-bottom) + 72px) !important;
    right: 12px;
    left: auto;
  }
  .caf-asst-btn {
    width: 58px;
    height: 58px;
  }
  .caf-asst-btn-icon svg {
    width: 50px;
    height: 50px;
  }
  .caf-asst-panel {
    position: fixed !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 28px) !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    box-sizing: border-box;
  }
  .caf-asst-header,
  .caf-asst-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .caf-asst-quick { gap: 6px 10px; }
  .caf-asst-qbtn { flex: 1 1 48%; min-width: 0; }
}

@media (max-width: 480px) {
  #caf-asst-root { bottom: 96px; right: 12px; }
  .kora-assistant { right: 12px; bottom: 12px; }
  .caf-asst-panel { width: calc(100vw - 24px); right: 0; }
}

/* ═══════════════════════════════════════════════
   CAFnizer Avatar (generated SVG)
═══════════════════════════════════════════════ */
.cafnizer-avatar {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  flex-shrink: 0;
}
.cafnizer-avatar-sm  { width: 32px;  height: 32px;  }
.cafnizer-avatar-md  { width: 40px;  height: 40px;  }
.cafnizer-avatar-lg  { width: 56px;  height: 56px;  }
.cafnizer-avatar-xl  { width: 80px;  height: 80px;  }

/* ═══════════════════════════════════════════════
   CAFnizer Overview page
═══════════════════════════════════════════════ */
.caf-ov-hero {
  background: linear-gradient(135deg, #005c2e 0%, #007a3d 60%, #00a34f 100%);
  color: #fff;
  padding: 64px 40px;
  text-align: center;
}
.caf-ov-hero h1 { font-size: 2.6rem; font-weight: 950; letter-spacing: -0.02em; margin-bottom: 12px; }
.caf-ov-hero p  { font-size: 1.1rem; opacity: 0.80; max-width: 560px; margin: 0 auto 32px; }

.caf-ov-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.caf-ov-stat {
  flex: 1;
  min-width: 120px;
  padding: 24px 20px;
  border-right: 1px solid rgba(255,255,255,0.14);
  text-align: center;
}
.caf-ov-stat:last-child { border-right: none; }
.caf-ov-stat-n { font-size: 2.8rem; font-weight: 950; line-height: 1; display: block; }
.caf-ov-stat-l { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.70; margin-top: 4px; display: block; }

.caf-ov-section { padding: 56px 40px; }
.caf-ov-section-title { font-size: 1.5rem; font-weight: 900; color: #172033; margin-bottom: 8px; }
.caf-ov-section-sub   { font-size: 0.95rem; color: #64748b; margin-bottom: 32px; }

.caf-ov-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.caf-ov-zone-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}
.caf-ov-zone-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.caf-ov-zone-name { font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: 14px; }
.caf-ov-zone-num  { font-size: 2.2rem; font-weight: 950; color: #172033; line-height: 1; }
.caf-ov-zone-lbl  { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

.caf-ov-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.caf-ov-feature {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.caf-ov-feature-icon { font-size: 2rem; }
.caf-ov-feature-title { font-size: 1rem; font-weight: 800; color: #172033; }
.caf-ov-feature-desc  { font-size: 0.85rem; color: #64748b; line-height: 1.5; }

.caf-ov-cta {
  background: #f0f9f4;
  border-top: 1px solid #c6e8d4;
  padding: 48px 40px;
  text-align: center;
}
.caf-ov-cta h2 { font-size: 1.6rem; font-weight: 900; color: #172033; margin-bottom: 10px; }
.caf-ov-cta p  { color: #64748b; margin-bottom: 24px; }
.caf-ov-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .caf-ov-hero { padding: 40px 20px; }
  .caf-ov-hero h1 { font-size: 1.8rem; }
  .caf-ov-section { padding: 36px 20px; }
  .caf-ov-stat { min-width: 100px; padding: 16px 12px; }
  .caf-ov-stat-n { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════
   Workshop Progress Timeline
═══════════════════════════════════════════════ */
.ws-progress-timeline {
  background: #0f1724;
  border: 1px solid rgba(212, 165, 116, 0.18);
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 20px;
}
.ws-pt-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
}
.ws-pt-steps {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ws-pt-steps::-webkit-scrollbar { display: none; }

.ws-pt-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 80px;
  position: relative;
}
.ws-pt-step::before {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(-50% + 18px);
  right: calc(50% + 18px);
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}
.ws-pt-step:first-child::before { display: none; }

.ws-pt-step.done::before  { background: #d4a574; }
.ws-pt-step.active::before { background: linear-gradient(to right, #d4a574, rgba(212,165,116,0.28)); }

.ws-pt-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 1;
  position: relative;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ws-pt-step.done  .ws-pt-icon { background: rgba(212,165,116,0.16); border-color: #d4a574; }
.ws-pt-step.active .ws-pt-icon { background: #d4a574; border-color: #d4a574; box-shadow: 0 0 0 3px rgba(212,165,116,0.22); }

.ws-pt-name {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.32);
  text-align: center;
  line-height: 1.3;
}
.ws-pt-step.done   .ws-pt-name { color: #d4a574; }
.ws-pt-step.active .ws-pt-name { color: #f5d49a; font-weight: 900; }

.ws-pt-check { font-size: 11px; font-weight: 900; color: #d4a574; }
.ws-pt-step.active .ws-pt-check { color: #1a1208; }

@media (max-width: 600px) {
  .ws-pt-step { min-width: 60px; }
  .ws-pt-icon { width: 30px; height: 30px; font-size: 14px; }
  .ws-pt-name { font-size: 9.5px; }
}

/* KPI trend badges */
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
}
.kpi-trend.up   { background: rgba(34,197,94,0.12);  color: #16a34a; }
.kpi-trend.down { background: rgba(239,68,68,0.10);  color: #dc2626; }
.kpi-trend.flat { background: rgba(100,116,139,0.10); color: #64748b; }

/* ── Assistant visibility management ──────────────────────────────────── */
.kora-assistant.is-hidden,
#caf-asst-root.is-hidden { display: none !important; }

/* ═══════════════════════════════════════════════
   QA Sprint — Mobile / Tablet / Desktop fixes
   (2026-06-21)
═══════════════════════════════════════════════ */

/* Africa map responsive */
.afmap-shell { min-width: 0; }
.afmap-shell [style*="display:grid"][style*="grid-template-columns:repeat(5"] {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 768px) {
  .afmap-shell [style*="display:flex"][style*="min-height:520px"] {
    flex-direction: column !important;
  }
  .afmap-shell [style*="width:200px"] {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 10px !important;
  }
  .afmap-leg-btn { width: auto !important; }
  .afmap-shell [style*="display:grid"][style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .afmap-shell [style*="display:grid"][style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #afmap-zone-btns { display: none !important; } /* too crowded on small phones */
}

/* Cafnizer assistant panel — prevent off-screen on narrow phones */
@media (max-width: 430px) {
  .caf-asst-panel {
    width: calc(100vw - 20px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: 80px !important;
  }
}

/* Auth form — no horizontal scroll on very small screens */
@media (max-width: 390px) {
  .dashboard-form-grid { grid-template-columns: 1fr !important; }
  .register-step-panel { padding: 0 !important; }
}

/* Cafnizer workshop — accommodation table responsive */
@media (max-width: 768px) {
  #tab-accommodation .cc-table-wrap { overflow-x: auto; }
  #tab-accommodation .cc-table th,
  #tab-accommodation .cc-table td { white-space: nowrap; font-size: 11px; padding: 7px 8px; }
}

/* Role badge — prevent wrapping */
@media (max-width: 480px) {
  .badge { white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* Bottom nav guard — never let floating assistants cover it */
@media (max-width: 768px) {
  .site-bottom-nav ~ #caf-asst-root { bottom: 72px !important; }
  .site-bottom-nav ~ .kora-assistant { bottom: 72px !important; }
}

/* Activity reminder banner — slide up animation */
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Passport / profile card — mobile professional */
@media (max-width: 480px) {
  .passport-card,
  .profile-card { border-radius: 12px !important; }
  .passport-card img,
  .profile-photo { width: 72px !important; height: 72px !important; }
}

/* Prevent tables from breaking the mobile layout */
.cc-table-wrap { max-width: 100%; }
@media (max-width: 600px) {
  .cc-table td:nth-child(n+6),
  .cc-table th:nth-child(n+6) { display: none; }
}

/* Workshop quick-action grid — compact on mobile */
@media (max-width: 480px) {
  .ws-quick-actions { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .ws-quick-action { padding: 10px 6px !important; }
  .qa-icon { font-size: 18px !important; }
  .qa-label { font-size: 10px !important; }
  .qa-sub { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE NAV CLEANUP  < 768 px
   Logout moves into the user badge dropdown — hide from primary nav
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Compact logout on mobile — keep visible but smaller */
  .site-nav .logout-link { font-size: 0.72rem !important; padding: 6px 10px !important; min-width: auto !important; min-height: auto !important; }

  /* Compact nav on mobile — keep only a few items */
  .site-nav a:not(.btn):not(.cafnizer-nav-character):not(.user-badge-wrap a) {
    font-size: 0.78rem;
    padding: 7px 10px;
    min-height: 36px;
  }

  /* Notification panel: full-width on mobile */
  .notification-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 64px !important;
    width: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE USER BADGE MENU — logout row below avatar
══════════════════════════════════════════════════════════ */
.user-badge-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,122,61,.18);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,43,24,.16);
  min-width: 180px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 1200;
}
.user-badge-menu.is-open { display: block; }
.user-badge-menu a,
.user-badge-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--caf-green-dark, #0a3d20);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 1px solid rgba(0,122,61,.08);
  text-align: left;
}
.user-badge-menu a:last-child,
.user-badge-menu button:last-child { border-bottom: none; }
.user-badge-menu a:hover,
.user-badge-menu button:hover { background: rgba(0,122,61,.06); }
.user-badge-menu .menu-logout { color: #dc2626; }
.user-badge-wrap { position: relative; }

/* ══════════════════════════════════════════════════════════
   CAFsessor MOBILE BOTTOM SHEET
   On screens < 768 px the kora panel slides up from bottom
══════════════════════════════════════════════════════════ */
.kora-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 998;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.kora-mobile-backdrop.is-visible { display: block; }

@media (max-width: 767px) {
  /* When open on mobile, panel becomes a bottom sheet */
  .kora-assistant.is-mobile-sheet .kora-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: min(76vh, calc(100vh - 92px));
    border-radius: 20px 20px 0 0 !important;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* slide-up animation */
    animation: kora-sheet-up .28s ease;
  }
  @keyframes kora-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .kora-assistant.is-mobile-sheet .kora-messages {
    flex: 1;
    max-height: none;
    overflow-y: auto;
  }
  .kora-assistant.is-mobile-sheet .kora-form {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  /* Hide bubble text on mobile when sheet is open (no room) */
  .kora-assistant.is-mobile-sheet .kora-bubble { display: none; }
  /* Face button stays visible at bottom-right as trigger */
  .kora-assistant.is-mobile-sheet.is-open .kora-face { opacity: 0.5; pointer-events: none; }
}

/* ══════════════════════════════════════════════════════════
   CAFlirary top-bar back button
══════════════════════════════════════════════════════════ */
.caflib-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 20px;
  background: rgba(0,122,61,.1);
  color: #007a3d;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(0,122,61,.18);
  white-space: nowrap;
  flex-shrink: 0;
}
.caflib-back-btn:hover { background: rgba(0,122,61,.18); }

/* ══════════════════════════════════════════════════════════
   SAFETY: Never render assistant content inline in page body
══════════════════════════════════════════════════════════ */
.amina-inline,
.assistant-inline-debug,
.raw-assistant-links,
#amina-inline,
#assistant-inline,
.cafnizer-assistant-inline,
.caf-assistant-inline,
.kora-inline,
.kora-assistant-inline { display: none !important; }

/* ══════════════════════════════════════════════════════════
   GLOBAL MOBILE READABILITY POLISH
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Stronger overlay behind cards for background images */
  .hero-section::before,
  .dashboard-hero::before,
  .page-hero::before {
    background: rgba(10, 20, 40, 0.55) !important;
  }

  /* No floating assistant in vertical middle of screen */
  #caf-asst-root { bottom: max(80px, env(safe-area-inset-bottom) + 72px) !important; }

  /* Floating grey button protection: hide on long-form pages */
  .cafnizer-form-page #caf-asst-root,
  .cafnizer-form-page .kora-assistant { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   CAF PULSE (cafnizer-dashboard.html) MOBILE POLISH
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Chart height caps */
  #chart-activity { max-height: 180px !important; }
  .charts-row canvas { max-height: 180px !important; }
  /* Donut */
  #chart-roles { max-width: 220px !important; max-height: 220px !important; margin: 0 auto; display: block; }
  /* Zone grid — 2 col on mobile */
  .zone-grid {
    grid-template-areas:
      "unaf    unaf"
      "wafua   wafub"
      "cecafa  cecafa"
      "uniffac cosafa" !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .zb-stat-n { font-size: 14px !important; }
  .zb-name { font-size: 8.5px !important; }
  /* Charts row single column */
  .charts-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .bottom-row { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ══════════════════════════════════════════════════════════
   CAFLIRARY CAROUSEL — first card not cut off
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Add leading padding so first card is fully visible */
  .content-row { padding-left: 16px !important; padding-right: 16px !important; }
  /* Ensure content area doesn't push under bottom nav */
  .lib-main, .lib-content { padding-bottom: calc(var(--bnav, 60px) + 16px) !important; }
  /* Bottom nav: consolidate 6 items to 5 */
  .bottom-nav .bn-item:nth-child(5) { display: none; }
}

/* ══════════════════════════════════════════════════════════
   CAFNIZER-PASSPORT MOBILE — full-width guaranteed
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* passport.html standalone — ensure no leftover sidebar gap */
  body:has(.passport-body) .main,
  body:has(.passport-body) { margin-left: 0 !important; }
  .passport-body { grid-template-columns: 1fr !important; gap: 12px !important; }
  /* Profile banner compact on mobile */
  .profile-banner { height: 120px !important; }
  /* Section card full width */
  .sec { width: 100% !important; }
  /* Topbar: wrap buttons on mobile */
  body:has(.passport-body) .topbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 8px 12px; gap: 6px; }
  body:has(.passport-body) .tb-right { flex-wrap: wrap; gap: 4px; width: 100%; }
  body:has(.passport-body) .tb-btn { font-size: 10px; height: 28px; padding: 0 8px; }
}

/* ══════════════════════════════════════════════════════════
   SPRINT: CAFnizer branding + layout polish
══════════════════════════════════════════════════════════ */

/* CAFnizer-specific header identity */
.cafnizer-site-header .brand {
  font-weight: 800;
  font-size: 17px;
}
.cafnizer-site-header .site-nav a[style*="Main Site"],
.cafnizer-site-header .site-nav a[style*="Platform login"] {
  opacity: 0.65;
  font-size: 12px;
}

/* Sidebar logo icon: SVG avatar mode */
.sb-logo-icon svg {
  display: block;
}

/* Workshop progress timeline — polished card */
.ws-progress-timeline {
  background: #0f1724;
  border: 1px solid rgba(212,165,116,0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  padding: 12px 16px 14px;
}
.ws-pt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ws-pt-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #d4a574;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.ws-pt-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  background: #d4a574;
  border-radius: 2px;
  flex-shrink: 0;
}
.ws-pt-pct {
  font-size: 10px;
  font-weight: 800;
  color: #d4a574;
  background: rgba(212,165,116,0.14);
  padding: 2px 7px;
  border-radius: 20px;
}
.ws-pt-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
  margin-top: 7px;
}
.ws-pt-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b8860b, #d4a574, #f0c98a);
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}

/* ── Responsive tables — horizontal scroll + condensed mobile ── */
/* All cafnizer table wrappers must scroll, never squeeze */
.cc-table-wrap,
.cafnizer-table-wrap,
.role-block .role-table { overflow-x: auto; }

/* Desktop spacing */
@media (min-width: 601px) {
  .cc-table th, .cc-table td { padding: 10px 14px; }
  .cafnizer-table-wrap th, .cafnizer-table-wrap td { padding: 10px 14px; }
  .role-table th, .role-table td { padding: 9px 12px; }
}

/* Mobile: compact text, keep all columns scrollable */
@media (max-width: 600px) {
  .cc-table { min-width: 520px; }
  .cc-table th, .cc-table td { font-size: 11px; padding: 8px 10px; white-space: nowrap; }
  .cafnizer-table-wrap table { min-width: 480px; }
  .cafnizer-table-wrap th,
  .cafnizer-table-wrap td { font-size: 11px; padding: 7px 10px; white-space: nowrap; }
  .role-table { min-width: 460px; }
  .role-table th, .role-table td { font-size: 11px; padding: 7px 10px; white-space: nowrap; }
  /* Wrap the role-block table inside its container */
  .role-block { overflow-x: auto; }
}

/* ── Ecosystem section card polish ── */
.ecosystem-card .eco-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
}
.ecosystem-card .eco-icon svg {
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,122,61,0.18));
}

/* ── CAFnizer grid — collapse to 1 col on tablets and below ── */
@media (max-width: 900px) {
  .cafnizer-grid { grid-template-columns: 1fr; }
}

/* ── CAFnizer hero — no overflow on small screens ── */
@media (max-width: 600px) {
  .cafnizer-hero {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    margin: 16px 0;
  }
  .cafnizer-status-panel { grid-template-columns: repeat(3, 1fr); }
}

/* ── Ensure no duplicate floating assistants ── */
.cafnizer-page .kora-assistant { display: none !important; }

/* ══════════════════════════════════════════════════════════
   CAFNIZER MOBILE BOTTOM NAV
══════════════════════════════════════════════════════════ */
.cafnizer-bnav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  height: 60px;
  background: #fff;
  border-top: 1px solid #e0e9e4;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
}
@media (max-width: 768px) {
  .cafnizer-bnav { display: flex; }
  /* Push page content above bottom nav */
  .cafnizer-page main,
  .cafnizer-page .page-shell > main { padding-bottom: 72px; }
  /* Sidebar-based cafnizer pages need the same push */
  .sidebar ~ .main { padding-bottom: 72px; }
  .sidebar ~ .content { padding-bottom: 72px; }
}
.cafnizer-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: #6b8f7e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: color .15s;
  padding: 6px 4px;
}
.cafnizer-bnav-item:hover,
.cafnizer-bnav-item.active { color: #007a3d; }
.cafnizer-bnav-icon {
  font-size: 20px;
  line-height: 1;
}
.cafnizer-bnav-item.active .cafnizer-bnav-icon {
  transform: scale(1.12);
}

/* ── More drawer (appears above bottom nav on mobile) ── */
.bnav-more-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 410;
  background: rgba(0,0,0,.45);
}
.bnav-more-drawer.open { display: block; }
.bnav-more-sheet {
  position: absolute;
  bottom: 60px;
  left: 0; right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 12px 10px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.14);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.bnav-more-drawer.open .bnav-more-sheet { transform: translateY(0); }
body:has(.bnav-more-drawer.open) #caf-asst-root {
  display: none !important;
}
.bnav-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bnav-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 4px;
  text-decoration: none;
  color: #0f172a;
  border-radius: 12px;
  background: rgba(0,122,61,.06);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  transition: background .15s, color .15s;
}
.bnav-more-item:hover { background: rgba(0,122,61,.14); color: #007a3d; }
.bnav-more-icon { font-size: 22px; line-height: 1; }

/* ══════════════════════════════════════════════════════════
   CAFNIZER GLOBAL MOBILE — applies to ALL cafnizer-page bodies
   (supplements page-specific inline styles)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar hiding — catches any naming variant */
  .cafnizer-page .sidebar,
  .cafnizer-page .caf-sidebar,
  .cafnizer-page .dashboard-sidebar { display: none !important; }

  /* Main/content fill full width */
  .cafnizer-page .main,
  .cafnizer-page .page-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Profile/passport/participant card responsive */
  .cafnizer-page .passport-card,
  .cafnizer-page .profile-card,
  .cafnizer-page .participant-card,
  .cafnizer-page .access-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Card grids go single column */
  .cafnizer-page .passport-grid,
  .cafnizer-page .profile-grid,
  .cafnizer-page .participant-profile-grid { grid-template-columns: 1fr !important; }

  /* Top nav: hide all cafnizer site-nav links except Main Site on mobile */
  .cafnizer-page .cafnizer-site-header .site-nav { background: none !important; border: none !important; box-shadow: none !important; padding: 2px 0 !important; gap: 0 !important; }
  .cafnizer-page .cafnizer-site-header .site-nav a:not([href="index.html"]) { display: none !important; }
  .cafnizer-page .cafnizer-site-header .site-nav a[href="index.html"] { font-size: 12px !important; color: #f5d17b !important; padding: 4px 8px !important; border-radius: 6px !important; white-space: nowrap; }

  /* Touch-friendly inputs */
  .cafnizer-page input,
  .cafnizer-page select,
  .cafnizer-page textarea { min-height: 44px !important; font-size: 16px !important; }

  /* Decorative mascots hidden */
  .cafnizer-page .decorative-mascot,
  .cafnizer-page .card-mascot,
  .cafnizer-page [class*="mascot-card"],
  .cafnizer-page [class*="card-mascot"] { display: none !important; }

  /* Scroll margin for last fields and save buttons */
  .cafnizer-page .save-btn,
  .cafnizer-page .primary-btn { scroll-margin-bottom: 150px; }
}

/* Empty state card for manager tables */
.cafnizer-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  text-align: center;
  gap: 10px;
  background: #f8faf9;
  border: 1.5px dashed #c8ddd5;
  border-radius: 14px;
  margin: 8px 0;
}
.cafnizer-empty-state .ces-icon { font-size: 36px; }
.cafnizer-empty-state .ces-title {
  font-size: 14px; font-weight: 700; color: #1a2e22;
}
.cafnizer-empty-state .ces-sub {
  font-size: 12px; color: #6b8f7e; max-width: 300px; line-height: 1.5;
}
.cafnizer-empty-state .ces-action {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  background: #007a3d; color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 12px; font-weight: 700;
  cursor: pointer; text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   CAFNIZER DASHBOARD PAGE — RESPONSIVE LAYOUT
   Scoped to body.cafnizer-dashboard-page so desktop view
   is never affected on other pages.
══════════════════════════════════════════════════════════ */

body.cafnizer-dashboard-page {
  overflow-x: hidden;
  background: #f6faf8;
}

/* Kill the site-wide 4K photo pseudo-elements for app pages with their own design */
body.cafnizer-page::before,
body.cafnizer-page::after,
body.cafnizer-dashboard-page::before,
body.cafnizer-dashboard-page::after,
body.caflirary-page::before,
body.caflirary-page::after,
body.certificates-page::before,
body.certificates-page::after,
body.passport-page::before,
body.passport-page::after,
body.caf-nexus-page::before,
body.caf-nexus-page::after {
  display: none !important;
}

body.cafnizer-dashboard-page *,
body.cafnizer-dashboard-page *::before,
body.cafnizer-dashboard-page *::after {
  box-sizing: border-box;
}

/* Shell / main area */
body.cafnizer-dashboard-page .main,
body.cafnizer-dashboard-page .dashboard-shell,
body.cafnizer-dashboard-page .caf-dashboard-shell,
body.cafnizer-dashboard-page .app-shell,
body.cafnizer-dashboard-page .main-shell {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
}

body.cafnizer-dashboard-page .content,
body.cafnizer-dashboard-page .dashboard-main,
body.cafnizer-dashboard-page .main-content,
body.cafnizer-dashboard-page .content-area {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Top bar */
body.cafnizer-dashboard-page .topbar,
body.cafnizer-dashboard-page .dashboard-topbar,
body.cafnizer-dashboard-page .caf-topbar,
body.cafnizer-dashboard-page .header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.cafnizer-dashboard-page .tb-right,
body.cafnizer-dashboard-page .topbar-actions,
body.cafnizer-dashboard-page .header-actions,
body.cafnizer-dashboard-page .top-nav,
body.cafnizer-dashboard-page .quick-links,
body.cafnizer-dashboard-page .header-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

body.cafnizer-dashboard-page .topbar-actions a,
body.cafnizer-dashboard-page .header-actions a,
body.cafnizer-dashboard-page .top-nav a,
body.cafnizer-dashboard-page .quick-links a,
body.cafnizer-dashboard-page .header-links a {
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overview / pulse grid */
body.cafnizer-dashboard-page .overview-grid,
body.cafnizer-dashboard-page .dashboard-grid,
body.cafnizer-dashboard-page .operations-grid,
body.cafnizer-dashboard-page .pulse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Amina AI panel */
body.cafnizer-dashboard-page .caf-asst-panel,
body.cafnizer-dashboard-page .amina-panel,
body.cafnizer-dashboard-page .amina-card,
body.cafnizer-dashboard-page .ai-assistant-panel,
body.cafnizer-dashboard-page #aminaPanel,
body.cafnizer-dashboard-page #aminaAssistantPanel {
  max-width: min(360px, calc(100vw - 24px));
  min-width: 0;
}

body.cafnizer-dashboard-page .caf-asst-btn,
body.cafnizer-dashboard-page .amina-launcher,
body.cafnizer-dashboard-page #aminaLauncher,
body.cafnizer-dashboard-page .ai-assistant-launcher {
  width: 56px;
  height: 56px;
}

/* ── Tablet 1100px ───────────────────────────────────────── */
@media (max-width: 1100px) {
  body.cafnizer-dashboard-page .overview-grid,
  body.cafnizer-dashboard-page .dashboard-grid,
  body.cafnizer-dashboard-page .operations-grid,
  body.cafnizer-dashboard-page .pulse-grid {
    grid-template-columns: 1fr;
  }

  body.cafnizer-dashboard-page .caf-asst-panel,
  body.cafnizer-dashboard-page .amina-panel,
  body.cafnizer-dashboard-page .amina-card,
  body.cafnizer-dashboard-page .ai-assistant-panel,
  body.cafnizer-dashboard-page #aminaPanel,
  body.cafnizer-dashboard-page #aminaAssistantPanel {
    max-width: 100%;
    width: min(360px, calc(100vw - 24px));
  }

  body.cafnizer-dashboard-page .tb-right,
  body.cafnizer-dashboard-page .topbar-actions,
  body.cafnizer-dashboard-page .header-actions,
  body.cafnizer-dashboard-page .top-nav,
  body.cafnizer-dashboard-page .quick-links,
  body.cafnizer-dashboard-page .header-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    justify-content: flex-start;
  }
}

/* ── Mobile 768px ───────────────────────────────────────── */
@media (max-width: 768px) {
  body.cafnizer-dashboard-page {
    padding: 0;
  }

  body.cafnizer-dashboard-page .sidebar,
  body.cafnizer-dashboard-page .caf-sidebar,
  body.cafnizer-dashboard-page .dashboard-sidebar {
    display: none;
  }

  body.cafnizer-dashboard-page .content,
  body.cafnizer-dashboard-page .dashboard-main,
  body.cafnizer-dashboard-page .main-content,
  body.cafnizer-dashboard-page .content-area {
    padding: 14px;
    padding-bottom: 92px;
    margin-left: 0 !important;
    width: 100%;
  }

  body.cafnizer-dashboard-page .topbar,
  body.cafnizer-dashboard-page .dashboard-topbar,
  body.cafnizer-dashboard-page .caf-topbar,
  body.cafnizer-dashboard-page .header-bar {
    padding: 8px 14px;
    gap: 8px;
  }

  body.cafnizer-dashboard-page .tb-date,
  body.cafnizer-dashboard-page .topbar-date,
  body.cafnizer-dashboard-page .current-date,
  body.cafnizer-dashboard-page .date-pill {
    display: none;
  }

  body.cafnizer-dashboard-page .caf-asst-btn,
  body.cafnizer-dashboard-page .amina-launcher,
  body.cafnizer-dashboard-page #aminaLauncher,
  body.cafnizer-dashboard-page .ai-assistant-launcher {
    width: 50px;
    height: 50px;
    bottom: 86px;
    right: 14px;
  }
}

/* ── Small 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
  body.cafnizer-dashboard-page h1 {
    font-size: 22px;
    line-height: 1.1;
  }

  body.cafnizer-dashboard-page .kpi-row,
  body.cafnizer-dashboard-page .stat-grid,
  body.cafnizer-dashboard-page .stats-grid,
  body.cafnizer-dashboard-page .cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  body.cafnizer-dashboard-page .topbar-actions a,
  body.cafnizer-dashboard-page .header-actions a,
  body.cafnizer-dashboard-page .top-nav a,
  body.cafnizer-dashboard-page .quick-links a,
  body.cafnizer-dashboard-page .header-links a,
  body.cafnizer-dashboard-page .tb-btn {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════
   CAF SHARED COMPONENT LAYER  (Sprint C · Step 2)
   All classes consume tokens from the :root block at the top.
   Safe to add alongside existing page-specific classes —
   all names are namespaced .caf-* to avoid collisions.
   ═══════════════════════════════════════════════════════════ */

/* ── Layout helpers ─────────────────────────────────────── */
.caf-page {
  min-height: 100vh;
  background: var(--caf-bg);
  color: var(--caf-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
}

.caf-container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--caf-space-lg);
}

.caf-section {
  margin-bottom: var(--caf-space-xl);
}

/* ── Card ────────────────────────────────────────────────── */
.caf-card {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  box-shadow: var(--caf-shadow-sm);
}

/* Panel: structured head + body */
.caf-panel {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  overflow: hidden;
}
.caf-panel-head {
  padding: var(--caf-space-md) var(--caf-space-lg);
  border-bottom: 1px solid var(--caf-border);
}
.caf-panel-body {
  padding: var(--caf-space-md) var(--caf-space-lg);
}

/* KPI / stat card — top accent bar, hover lift */
.caf-kpi-card {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  padding: var(--caf-space-md) var(--caf-space-lg);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s;
}
.caf-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--caf-kpi-accent, var(--caf-green));
  border-radius: var(--caf-radius-sm) var(--caf-radius-sm) 0 0;
}
.caf-kpi-card:hover {
  box-shadow: var(--caf-shadow-md);
  transform: translateY(-1px);
}

/* Clickable action card */
.caf-action-card {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  padding: var(--caf-space-md) var(--caf-space-lg);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.caf-action-card:hover {
  border-color: var(--caf-green);
  box-shadow: var(--caf-shadow-sm);
  transform: translateY(-1px);
}

/* ── Buttons ─────────────────────────────────────────────── */
.caf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--caf-space-sm);
  min-height: var(--caf-touch-target); /* 44px — mobile a11y */
  padding: 0 var(--caf-space-lg);
  border-radius: var(--caf-radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.13s, border-color 0.13s, color 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.caf-button:focus-visible {
  outline: 2px solid var(--caf-green);
  outline-offset: 3px;
}
.caf-button:disabled,
.caf-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.caf-button-primary {
  background: var(--caf-green);
  color: #fff;
  border-color: var(--caf-green);
}
.caf-button-primary:hover { background: var(--caf-green-l); border-color: var(--caf-green-l); }
.caf-button-primary:active { background: var(--caf-green-dark); border-color: var(--caf-green-dark); }

/* Secondary */
.caf-button-secondary {
  background: var(--caf-surface);
  color: var(--caf-text);
  border-color: var(--caf-border);
}
.caf-button-secondary:hover {
  border-color: var(--caf-green);
  color: var(--caf-green);
  background: var(--caf-green-dim);
}
.caf-button-secondary:active { background: rgba(0, 122, 61, 0.14); }

/* Ghost */
.caf-button-ghost {
  background: var(--caf-green-dim);
  color: var(--caf-green);
  border-color: rgba(0, 122, 61, 0.22);
}
.caf-button-ghost:hover { background: rgba(0, 122, 61, 0.17); border-color: var(--caf-green); }
.caf-button-ghost:active { background: rgba(0, 122, 61, 0.24); }

/* Compact inline variant */
.caf-button-sm {
  min-height: 32px;
  padding: 0 var(--caf-space-md);
  font-size: 12px;
  border-radius: 7px;
}

/* Retry — same look as secondary but with a ↺ hint via CSS */
.caf-retry-button::before {
  content: '↺';
  font-size: 15px;
  margin-right: 2px;
}

/* ── Badges ──────────────────────────────────────────────── */
.caf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--caf-radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.caf-badge-success {
  background: rgba(0, 122, 61, 0.10);
  color: var(--caf-green);
  border: 1px solid rgba(0, 122, 61, 0.22);
}
.caf-badge-warning {
  background: rgba(217, 119, 6, 0.10);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.22);
}
.caf-badge-danger {
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.22);
}
.caf-badge-neutral {
  background: rgba(100, 116, 139, 0.10);
  color: var(--caf-muted);
  border: 1px solid rgba(100, 116, 139, 0.18);
}
.caf-badge-info {
  background: rgba(8, 145, 178, 0.10);
  color: #0891b2;
  border: 1px solid rgba(8, 145, 178, 0.22);
}

/* ── Empty state ─────────────────────────────────────────── */
.caf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--caf-space-xl) var(--caf-space-lg);
  gap: var(--caf-space-sm);
}
.caf-empty-state .caf-empty-icon {
  font-size: 38px;
  line-height: 1;
  opacity: 0.45;
  margin-bottom: var(--caf-space-xs);
}
.caf-empty-state h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--caf-text);
  margin: 0;
}
.caf-empty-state p {
  font-size: 13px;
  color: var(--caf-muted);
  max-width: 300px;
  margin: 0;
  line-height: 1.6;
}

/* ── Error state ─────────────────────────────────────────── */
.caf-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--caf-space-xl) var(--caf-space-lg);
  gap: var(--caf-space-sm);
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--caf-radius-md);
}
.caf-error-state h3 {
  font-size: 14px;
  font-weight: 800;
  color: #b91c1c;
  margin: 0;
}
.caf-error-state p {
  font-size: 13px;
  color: var(--caf-muted);
  max-width: 280px;
  margin: 0;
  line-height: 1.5;
}

/* ── Skeleton / loading shimmer ──────────────────────────── */
/* Uses transform:translateX on ::after — GPU Composite only, no Paint */
@keyframes caf-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.caf-skeleton,
.caf-skeleton-line,
.caf-skeleton-circle {
  background: var(--caf-border);
  position: relative;
  overflow: hidden;
}
.caf-skeleton::after,
.caf-skeleton-line::after,
.caf-skeleton-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  will-change: transform;  /* promotes to own GPU layer → Composite only */
  animation: caf-shimmer 1.5s ease-in-out infinite;
}
.caf-skeleton       { border-radius: var(--caf-radius-sm); }
.caf-skeleton-line  { height: 13px; border-radius: var(--caf-radius-pill); }
.caf-skeleton-line + .caf-skeleton-line { margin-top: var(--caf-space-sm); }
.caf-skeleton-line.short  { width: 55%; }
.caf-skeleton-line.medium { width: 78%; }
.caf-skeleton-circle { border-radius: 50%; }

.caf-loading-card {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  padding: var(--caf-space-md) var(--caf-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--caf-space-sm);
}

/* Respect reduced motion — stop shimmer, keep muted appearance */
@media (prefers-reduced-motion: reduce) {
  .caf-skeleton::after,
  .caf-skeleton-line::after,
  .caf-skeleton-circle::after { animation: none; opacity: 0; }
  .caf-skeleton,
  .caf-skeleton-line,
  .caf-skeleton-circle { opacity: 0.55; }
}

/* ── Global focus-visible improvement ────────────────────── */
:focus-visible {
  outline: 2px solid var(--caf-green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Mobile button tap targets ───────────────────────────── */
@media (max-width: 768px) {
  .caf-container { padding-inline: var(--caf-space-md); }
  /* Anything using caf-button already gets 44px from the base rule */
}

/* ── Sprint C Step 5: Shared mobile polish ───────────────── */
@media (max-width: 768px) {
  /* Action cards act as tappable buttons — needs touch target */
  .caf-action-card { min-height: var(--caf-touch-target); }
  /* Prevent long text (names, emails) from overflowing card boundaries */
  .caf-card, .caf-action-card { overflow-wrap: break-word; word-break: break-word; }
  /* Empty states: tighter padding on mobile */
  .caf-empty-state { padding: 24px 16px; }
  .caf-empty-state h3 { word-break: break-word; }
}
@media (max-width: 430px) {
  .caf-container { padding-inline: 12px; }
  /* KPI grid: 2-column max on very narrow screens */
  .caf-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — Modern flag dropdown
   ═══════════════════════════════════════════════════════════════════════════ */

.language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 500;
}

/* Toggle button */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid rgba(0, 122, 61, 0.28);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  user-select: none;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--caf-green);
  box-shadow: 0 2px 12px rgba(0, 122, 61, 0.15);
}

.lang-flag {
  font-size: 18px;
  line-height: 1;
}

.lang-label {
  font-size: 13px;
}

.lang-arrow {
  transition: transform 0.22s ease;
  opacity: 0.65;
  margin-left: 2px;
}

/* Dropdown panel */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(0, 122, 61, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;

  /* Hidden state */
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.lang-dropdown.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* Individual language option */
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}

.lang-option:hover {
  background: rgba(0, 122, 61, 0.08);
  color: var(--caf-green-dark);
}

.lang-option.active {
  background: rgba(0, 122, 61, 0.12);
  color: var(--caf-green-dark);
  font-weight: 700;
}

.lang-option .lang-flag {
  font-size: 20px;
}

/* RTL overrides for the dropdown */
html[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
}

html[dir="rtl"] .lang-option {
  text-align: right;
}

html[dir="rtl"] .lang-btn {
  flex-direction: row-reverse;
}

/* Mobile: keep switcher visible but slightly smaller */
@media (max-width: 600px) {
  .lang-btn { padding: 6px 10px; font-size: 12px; }
  .lang-label { display: none; }       /* show flag-only on very small screens */
  .lang-dropdown { min-width: 130px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COURSE CARDS — Division pages layout fix
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid container */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* Individual card — flex column so btn pushes to bottom */
.course-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 122, 61, 0.14);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 122, 61, 0.14);
  border-color: rgba(0, 122, 61, 0.32);
}

.course-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--caf-green-dark);
  line-height: 1.35;
  margin: 0;
}

.course-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;                /* takes up remaining space → pushes btn down */
}

.course-card .course-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--caf-green);
  letter-spacing: 0.02em;
}

/* Button always at bottom */
.course-card .btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 9px 20px;
  font-size: 13px;
}

/* Section header */
.course-list h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--caf-green-dark);
  margin-bottom: 18px;
}

/* RTL course card adjustments */
html[dir="rtl"] .course-card h3,
html[dir="rtl"] .course-card p,
html[dir="rtl"] .course-card .course-date {
  text-align: right;
}

html[dir="rtl"] .course-card .btn {
  align-self: flex-end;
}

/* Mobile: single column */
@media (max-width: 640px) {
  .course-grid {
    grid-template-columns: 1fr;
  }

.course-card {
    padding: 18px;
  }
}

/* Stabilization: compact language selector, passport directory, assistant guards */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.language-switcher.compact-language-switcher,
.site-nav .language-switcher.compact-language-switcher,
.auth-header .language-switcher.compact-language-switcher,
.auth-language-slot .language-switcher.compact-language-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  border: 1px solid rgba(0,122,61,.14) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.06) !important;
  backdrop-filter: blur(10px) !important;
}

.language-switcher.compact-language-switcher .language-option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.28) !important;
  border-radius: 999px !important;
  background-color: rgba(255,255,255,.98) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(15,23,42,.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.language-switcher.compact-language-switcher .language-option[data-value="en"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><rect width="60" height="40" fill="%23b22234"/><g fill="%23fff"><rect width="60" height="4.6"/><rect y="9.2" width="60" height="4.6"/><rect y="18.4" width="60" height="4.6"/><rect y="27.6" width="60" height="4.6"/><rect y="36.8" width="60" height="3.2"/></g><rect width="26" height="21" fill="%233c3b6e"/></svg>') !important;
}

.language-switcher.compact-language-switcher .language-option[data-value="fr"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><rect width="20" height="40" fill="%230055A4"/><rect x="20" width="20" height="40" fill="%23fff"/><rect x="40" width="20" height="40" fill="%23EF4135"/></svg>') !important;
}

.language-switcher.compact-language-switcher .language-option[data-value="ar"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><rect width="60" height="40" fill="%23CE1126"/><rect y="13.3" width="60" height="13.4" fill="%23fff"/><rect y="26.7" width="60" height="13.3" fill="%23000"/></svg>') !important;
}

.language-switcher.compact-language-switcher .language-option:hover {
  border-color: rgba(0,122,61,.34) !important;
  transform: translateY(-1px) !important;
}

.language-switcher.compact-language-switcher .language-option.is-active {
  border-color: var(--caf-green) !important;
  box-shadow: 0 0 0 2px rgba(0,122,61,.10), 0 2px 6px rgba(15,23,42,.08) !important;
}

/* The circle's own background-image already shows the full flag (see
   [data-value] rules above) — the old text badge ("US"/"FR"/"ع") sat on top
   and covered most of the small circle, which is exactly why the Egypt flag
   read as a blank/white dot instead of showing its red/white/black bands. */
.language-switcher.compact-language-switcher .language-flag {
  display: none !important;
}

.language-switcher.compact-language-switcher .language-name {
  display: none !important;
}

@media (max-width: 768px) {
  .language-switcher.compact-language-switcher,
  .site-nav .language-switcher.compact-language-switcher,
  .auth-header .language-switcher.compact-language-switcher,
  .auth-language-slot .language-switcher.compact-language-switcher {
    gap: 4px !important;
    padding: 4px 5px !important;
    border-radius: 12px !important;
    max-width: calc(100vw - 16px) !important;
  }

  .language-switcher.compact-language-switcher .language-option {
    width: 29px !important;
    height: 29px !important;
  }

  .language-switcher.compact-language-switcher .language-flag {
    min-width: 16px !important;
    font-size: 9px !important;
    padding: 1px 4px !important;
  }
}

html:not([dir="rtl"]) body,
html:not([dir="rtl"]) .site-nav,
html:not([dir="rtl"]) .auth-header { direction: ltr; }

.passport-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.passport-directory-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: #e5fff2;
}

.passport-directory-cover {
  height: 58px;
  background: linear-gradient(135deg, var(--pdc, #007a3d), rgba(255,255,255,.12));
}

.passport-directory-main {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 0 12px;
  margin-top: -22px;
  position: relative;
  z-index: 1;
}

.passport-directory-avatar {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #092216;
  flex: 0 0 auto;
}

.passport-directory-info { min-width: 0; padding-bottom: 2px; }
.passport-directory-info h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  overflow-wrap: anywhere;
}
.passport-directory-info p,
.passport-directory-info span {
  display: block;
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(229,255,242,.68);
}

.passport-directory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 0;
}
.passport-directory-meta span {
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(229,255,242,.76);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.passport-directory-actions { padding: 12px; }

body:has(#participant-directory-section) #caf-asst-root:not(.is-open),
body:has(#participant-directory-section) .kora-assistant:not(.is-open),
body:has(#referee-data-table) #caf-asst-root:not(.is-open),
body:has(#referee-data-table) .kora-assistant:not(.is-open),
body:has(.lib-grid) .kora-assistant:not(.is-open),
body:has(.passport-body) #caf-asst-root:not(.is-open) {
  right: 18px !important;
  bottom: 88px !important;
  max-width: 64px !important;
}

@media (max-width: 768px) {
  .language-select {
    width: 58px !important;
    min-width: 58px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
  .passport-directory-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  #caf-asst-root:not(.is-open),
  .kora-assistant:not(.is-open) {
    bottom: 82px !important;
    right: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE NAV POLISH — language size, nav wrapping, no collision
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Disable hover-expand on touch — avoids layout shifts when tapping nav */
  .site-header:hover,
  .site-header:focus-within {
    min-height: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    gap: 6px !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.92), rgba(245,252,248,0.86)),
      rgba(255,255,255,0.88) !important;
  }

  .site-header:hover .brand,
  .site-header:focus-within .brand {
    font-size: 0.78rem !important;
    gap: 6px !important;
    padding: 4px 8px 4px 4px !important;
  }

  .site-header:hover .brand-logo,
  .site-header:focus-within .brand-logo {
    width: 42px !important;
    height: 42px !important;
    padding: 4px !important;
  }

  .site-header:hover .site-nav a:not(.btn),
  .site-header:focus-within .site-nav a:not(.btn),
  .site-header:hover .site-nav span > a,
  .site-header:focus-within .site-nav span > a {
    font-size: 0.68rem !important;
    padding: 5px 7px !important;
    min-height: 0 !important;
  }

  .site-header:hover .site-nav .btn,
  .site-header:focus-within .site-nav .btn,
  .site-header:hover #auth-link,
  .site-header:focus-within #auth-link {
    font-size: 0.68rem !important;
    padding: 5px 8px !important;
    min-height: 0 !important;
  }

  /* Nav must wrap so items don't overflow horizontally */
  .site-nav {
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  /* Remove enforced min-width that causes overflow on narrow phones */
  .site-nav a:not(.btn),
  .site-nav span > a {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Language switcher — compact circle buttons on mobile */
  .language-switcher.compact-language-switcher,
  .site-nav .language-switcher.compact-language-switcher,
  .auth-header .language-switcher.compact-language-switcher {
    flex: 0 0 auto !important;
    width: auto !important;
    gap: 3px !important;
    padding: 3px 4px !important;
  }

  .language-switcher.compact-language-switcher .language-option {
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Fixed-width override from earlier blocks — reset on mobile */
  .language-switcher:not(.compact-language-switcher) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* User badge — keep readable but compact */
  .user-badge {
    padding: 5px 9px !important;
  }

  .user-badge-name {
    max-width: 90px !important;
  }

  .user-avatar {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 480px) {
  /* Nav links tighter on very small phones */
  .site-nav a:not(.btn),
  .site-nav span > a {
    font-size: 0.68rem !important;
    padding: 5px 7px !important;
  }

  .site-nav .btn,
  #auth-link {
    font-size: 0.68rem !important;
    padding: 5px 8px !important;
    min-width: 0 !important;
  }

  .language-switcher.compact-language-switcher .language-option {
    width: 24px !important;
    height: 24px !important;
  }
}

/* CAFsessor intro/end brand refresh */
:root {
  --caf-green-dark: #062a22;
  --caf-gold-glow: #d4c143;
  --caf-ink: #04111f;
  --caf-ink-2: #08241f;
  --caf-navy: #04111f;
  --caf-navy-2: #08241f;
  --caf-bg: #eef4f1;
  --caf-text: #10231f;
  --caf-muted: #5e756d;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 163, 79, 0.13), transparent 28%),
    linear-gradient(180deg, #eef4f1 0%, #f8fbf9 46%, #eef4f1 100%);
}

body::after {
  background:
    linear-gradient(180deg, rgba(4, 17, 31, 0.05), rgba(238, 244, 241, 0.58) 42%, rgba(255, 255, 255, 0.82) 100%),
    radial-gradient(circle at 50% 7%, rgba(212, 193, 67, 0.16), transparent 32%),
    linear-gradient(90deg, rgba(4, 17, 31, 0.1), rgba(255, 255, 255, 0.18) 48%, rgba(4, 17, 31, 0.06));
}

.site-header,
.site-header:hover,
.site-header:focus-within {
  border-bottom-color: rgba(212, 193, 67, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(4, 17, 31, 0.92), rgba(8, 36, 31, 0.9) 58%, rgba(0, 122, 61, 0.86)),
    rgba(4, 17, 31, 0.92) !important;
  box-shadow: 0 18px 42px rgba(4, 17, 31, 0.2) !important;
}

.brand,
.site-header .brand,
.site-header:hover .brand,
.site-header:focus-within .brand {
  color: #f5d17b !important;
  border-color: rgba(212, 193, 67, 0.24) !important;
  background: rgba(4, 17, 31, 0.38) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.brand-logo,
.site-header .brand-logo,
.site-header:hover .brand-logo,
.site-header:focus-within .brand-logo,
.auth-logo-card img,
.auth-mini-brand img {
  background:
    radial-gradient(circle at 50% 40%, rgba(212, 193, 67, 0.2), transparent 58%),
    #04111f !important;
  border: 1px solid rgba(212, 193, 67, 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(0, 163, 79, 0.16),
    0 0 26px rgba(212, 193, 67, 0.26),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

.site-nav,
.site-header .site-nav,
.site-header:hover .site-nav,
.site-header:focus-within .site-nav {
  border-color: rgba(212, 193, 67, 0.2) !important;
  background: rgba(4, 17, 31, 0.24) !important;
}

.site-nav a:not(.btn),
.site-nav span > a,
.site-nav a,
.logout-link {
  color: #f5d17b !important;
  border-color: rgba(212, 193, 67, 0.2) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}

.site-nav a:hover,
.site-nav span > a:hover,
.logout-link:hover {
  background: rgba(0, 163, 79, 0.24) !important;
  border-color: rgba(212, 193, 67, 0.48) !important;
  color: #fff3bf !important;
}

.notification-bell,
.site-nav-priority .notification-bell {
  border-color: rgba(212, 193, 67, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(212, 193, 67, 0.16), rgba(181, 112, 60, 0.12)),
    rgba(4, 17, 31, 0.46) !important;
  color: #f5d17b !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 243, 191, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

.notification-bell:hover,
.notification-bell:focus-visible,
.notification-bell[aria-expanded="true"] {
  background:
    linear-gradient(135deg, rgba(212, 193, 67, 0.22), rgba(0, 163, 79, 0.22)),
    rgba(4, 17, 31, 0.62) !important;
  border-color: rgba(245, 209, 123, 0.72) !important;
  color: #fff3bf !important;
  transform: translateY(0) scale(1.02);
}

.site-nav .btn-primary,
.site-nav #auth-link,
.site-header:hover .site-nav .btn-primary,
.site-header:focus-within .site-nav .btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #062a22 0%, #007a3d 58%, #00a34f 100%) !important;
  border-color: rgba(212, 193, 67, 0.34) !important;
}

.site-nav .btn-primary:hover,
.site-nav #auth-link:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #08241f 0%, #008f50 58%, #d4a574 100%) !important;
}

.site-header .site-nav > a.cafnizer-nav-character,
.site-header:hover .site-nav > a.cafnizer-nav-character,
.site-header:focus-within .site-nav > a.cafnizer-nav-character {
  color: #f5d17b !important;
  background:
    linear-gradient(135deg, rgba(212, 193, 67, 0.16), rgba(181, 112, 60, 0.1)),
    rgba(4, 17, 31, 0.46) !important;
  border-color: rgba(212, 193, 67, 0.32) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 243, 191, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.16) !important;
}

.site-header .site-nav > a.cafnizer-nav-character:hover,
.site-header .site-nav > a.cafnizer-nav-character:focus-visible {
  color: #fff3bf !important;
  background: linear-gradient(135deg, #062a22, #007a3d) !important;
  border-color: rgba(245, 209, 123, 0.72) !important;
}

.site-header .site-nav > a.cafnizer-nav-character .cafnizer-mini-text,
.site-header:hover .site-nav > a.cafnizer-nav-character .cafnizer-mini-text,
.site-header:focus-within .site-nav > a.cafnizer-nav-character .cafnizer-mini-text {
  color: inherit !important;
  text-shadow: none !important;
}

.site-header .site-nav > .btn-secondary,
.site-header .site-nav > .logout-link,
.site-header:hover .site-nav > .btn-secondary,
.site-header:hover .site-nav > .logout-link,
.site-header:focus-within .site-nav > .btn-secondary,
.site-header:focus-within .site-nav > .logout-link {
  color: #f5d17b !important;
  background: rgba(4, 17, 31, 0.46) !important;
  border-color: rgba(212, 193, 67, 0.28) !important;
}

.site-header .site-nav > .btn-secondary:hover,
.site-header .site-nav > .logout-link:hover {
  color: #fff3bf !important;
  background: linear-gradient(135deg, #062a22, #007a3d) !important;
}

.site-nav .notification-panel a,
.site-nav .notification-panel button,
.site-nav .user-badge-menu a,
.site-nav .user-badge-menu button,
.site-nav .site-search-results a,
.site-nav .site-search-results .site-search-empty {
  color: #10231f !important;
  text-shadow: none !important;
}

/* Desktop: give the search bar its own guaranteed lane in the header (logo | search | nav
   links/CTA) instead of leaving it squeezed as just the first item inside the right-aligned
   nav. A dedicated grid column means it can never overlap the links, regardless of how many
   are visible or how wide their labels render. site.js inserts .site-search as a direct
   sibling of .site-nav (between .brand and .site-nav) so grid auto-placement lines them up
   in that order. */
@media (min-width: 1101px) {
  .site-header,
  .site-header:hover,
  .site-header:focus-within {
    display: grid;
    grid-template-columns: auto minmax(140px, 210px) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    gap: 12px;
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
    /* Break out of .page-shell's centered max-width so the header's
       background spans the full viewport edge-to-edge, matching the
       footer (which is a full-bleed sibling of .page-shell, not bound by
       its max-width). Viewport-relative margin math instead of left/right
       positioning, since position:sticky already uses top/left offsets.
       Padding restores the same content inset the old page-shell-width
       bleed (margin:0 -32px; padding:14px 32px) used to give it. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 32px;
    padding-right: 32px;
  }

  .site-header > .brand {
    grid-column: 1;
  }

  .site-header .brand,
  .site-header:hover .brand,
  .site-header:focus-within .brand {
    gap: 8px;
    padding: 4px 12px 4px 5px;
    font-size: 0.96rem;
  }

  .site-header .brand-logo,
  .site-header:hover .brand-logo,
  .site-header:focus-within .brand-logo {
    width: 46px;
    height: 46px;
    padding: 5px;
    border-radius: 12px;
  }

  .site-header .site-search {
    grid-column: 2;
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  /* .site-nav-priority and .site-nav used to share grid-column:3, relying on
     nav's flex-end alignment to leave empty space on the left for the bell
     icon. That broke once the logged-in nav grew (Medical Dashboard,
     Dashboard, user badge, Logout, flags): nav content nearly filled the
     shared column, so the first link rendered directly under the bell.
     Dedicated, adjacent columns make the overlap impossible regardless of
     how wide nav's content gets. */
  .site-header .site-nav-priority {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }

  .site-header .site-nav {
    grid-column: 4;
    grid-row: 1;
    margin-left: 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    /* Drop the separate pill/box container around the whole link cluster —
       each item (Departments, CAFnizer, About, CAFlirary, Login/Register,
       flags) already has its own pill styling, so the extra enclosing box
       just added an empty-looking dark rectangle to the left of them once
       they were right-aligned within this wide grid column. */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .site-nav a:not(.btn),
  .site-nav span > a,
  .site-header:hover .site-nav a:not(.btn),
  .site-header:focus-within .site-nav a:not(.btn),
  .site-header:hover .site-nav span > a,
  .site-header:focus-within .site-nav span > a {
    min-width: 0;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 0.72rem;
    line-height: 1;
  }

  .site-nav .btn,
  #auth-link,
  .site-header:hover .site-nav .btn,
  .site-header:focus-within .site-nav .btn,
  .site-header:hover #auth-link,
  .site-header:focus-within #auth-link {
    min-height: 38px;
    padding: 8px 14px !important;
    border-radius: 12px;
    font-size: 0.72rem;
  }

  .user-badge {
    gap: 9px;
    padding: 5px 10px !important;
    border-radius: 16px;
  }

  .user-avatar {
    width: 30px;
    height: 30px;
  }

  .user-badge-name {
    max-width: 138px;
    font-size: 0.78rem;
  }

  .user-badge-text small {
    display: none;
  }

  .language-switcher.compact-language-switcher,
  .site-nav .language-switcher.compact-language-switcher {
    gap: 5px !important;
    padding: 4px 6px !important;
    width: 96px !important;
    min-width: 96px !important;
    border-color: rgba(212, 193, 67, 0.44) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(135deg, rgba(212, 193, 67, 0.2), rgba(181, 112, 60, 0.16)),
      rgba(4, 17, 31, 0.78) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 243, 191, 0.08),
      0 10px 24px rgba(0, 0, 0, 0.18) !important;
  }

  .language-switcher.compact-language-switcher:hover,
  .site-nav .language-switcher.compact-language-switcher:hover {
    border-color: rgba(245, 209, 123, 0.7) !important;
    background:
      linear-gradient(135deg, rgba(212, 193, 67, 0.24), rgba(0, 163, 79, 0.18)),
      rgba(4, 17, 31, 0.84) !important;
  }

  .language-switcher.compact-language-switcher .language-option {
    width: 28px !important;
    height: 28px !important;
    border-width: 1.5px !important;
    border-color: rgba(212, 193, 67, 0.5) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.28),
      0 1px 4px rgba(0, 0, 0, 0.18) !important;
  }

  .language-switcher.compact-language-switcher .language-option:hover {
    border-color: rgba(245, 209, 123, 0.9) !important;
    transform: translateY(0) scale(1.04) !important;
  }

  .language-switcher.compact-language-switcher .language-option.is-active {
    border-color: #f5d17b !important;
    box-shadow:
      0 0 0 2px rgba(212, 193, 67, 0.26),
      0 2px 8px rgba(0, 0, 0, 0.22) !important;
  }
}

.btn-primary,
.caf-asst-btn {
  background: linear-gradient(135deg, #04111f 0%, #007a3d 54%, #00a34f 100%);
  border-color: rgba(212, 193, 67, 0.28);
  box-shadow: 0 14px 30px rgba(0, 91, 50, 0.24), 0 0 20px rgba(212, 193, 67, 0.16);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #08241f 0%, #008f50 58%, #d4a574 100%);
}

.eyebrow,
.section-kicker,
.course-meta span,
.tag {
  color: #007a3d;
  border-color: rgba(212, 165, 116, 0.28);
  background: rgba(0, 122, 61, 0.08);
}

.hero-copy,
.dashboard-hero,
.course-hero,
.department-hero,
.dashboard-section,
.form-card,
.auth-modern .form-card,
.dashboard-card,
.course-card,
.access-card,
.department-card {
  border-color: rgba(0, 122, 61, 0.16);
  box-shadow: 0 18px 44px rgba(4, 17, 31, 0.08);
}

.hero-visual {
  isolation: isolate;
  overflow: visible;
}

.hero-visual picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: clamp(360px, 34vw, 520px);
  border-radius: 18px;
  overflow: hidden;
  background: #04111f;
  box-shadow:
    0 24px 70px rgba(4, 17, 31, 0.2),
    inset 0 0 0 1px rgba(245, 209, 123, 0.18);
}

.hero-visual picture > img {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 34vw, 520px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.42) brightness(0.58) contrast(0.98);
  transform: scale(1.02);
}

.hero-visual picture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 18px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(245, 209, 123, 0.2), rgba(245, 209, 123, 0.05) 24%, rgba(4, 17, 31, 0.64) 76%),
    linear-gradient(135deg, rgba(4, 17, 31, 0.58), rgba(0, 122, 61, 0.18) 44%, rgba(4, 17, 31, 0.58));
}

.hero-logo-scene {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 4;
  width: clamp(270px, 32vw, 470px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.96;
  transform: translate3d(-50%, -50%, 0);
  animation: heroLogoFloatCentered 7s ease-in-out infinite;
}

.hero-logo-scene::before,
.hero-logo-scene::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-logo-scene::before {
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(245, 209, 123, 0.28);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(245, 209, 123, 0.12) 50%, transparent 50.2%),
    linear-gradient(30deg, transparent 49.8%, rgba(245, 209, 123, 0.1) 50%, transparent 50.2%),
    linear-gradient(150deg, transparent 49.8%, rgba(245, 209, 123, 0.1) 50%, transparent 50.2%),
    conic-gradient(from 25deg, transparent 0 18deg, rgba(255, 239, 170, 0.36) 32deg, transparent 68deg, rgba(0, 163, 79, 0.14) 126deg, transparent 174deg, rgba(245, 209, 123, 0.26) 238deg, transparent 306deg),
    radial-gradient(circle at 34% 22%, rgba(255, 248, 198, 0.16), rgba(245, 209, 123, 0.07) 40%, transparent 70%);
  box-shadow:
    0 0 80px rgba(245, 209, 123, 0.18),
    inset 0 0 42px rgba(245, 209, 123, 0.08);
  animation: heroLogoRotate 10s linear infinite;
}

.hero-logo-scene::after {
  inset: 10%;
  z-index: 2;
  border: 1px solid rgba(245, 209, 123, 0.34);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent 58%),
    radial-gradient(circle, rgba(245, 209, 123, 0.16), transparent 66%);
  box-shadow:
    0 0 56px rgba(245, 209, 123, 0.18),
    0 18px 76px rgba(0, 0, 0, 0.42),
    inset 0 0 38px rgba(245, 209, 123, 0.1);
  animation: heroLogoPulse 4.8s ease-in-out infinite;
}

.hero-logo-card {
  position: relative;
  z-index: 5;
  width: 46%;
  height: 46%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: clamp(8px, 1.2vw, 16px);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 248, 198, 0.34), rgba(245, 209, 123, 0.13) 38%, rgba(0, 122, 61, 0.08) 78%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 60%),
    #04111f;
  border: 2px solid rgba(245, 209, 123, 0.54);
  box-shadow:
    0 0 76px rgba(245, 209, 123, 0.18),
    0 18px 76px rgba(0, 0, 0, 0.46),
    inset 0 0 40px rgba(245, 209, 123, 0.08);
}

.hero-logo-card img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: contrast(1.18) saturate(1.08) brightness(1.03);
}

.hero-logo-halo,
.hero-logo-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.hero-logo-halo {
  z-index: 0;
  background:
    radial-gradient(circle, rgba(245, 209, 123, 0.26), transparent 58%),
    conic-gradient(from 0deg, transparent 0 28deg, rgba(245, 209, 123, 0.5) 44deg, transparent 76deg, rgba(0, 163, 79, 0.25) 138deg, transparent 190deg, rgba(245, 209, 123, 0.36) 250deg, transparent 318deg);
  filter: blur(3px);
  opacity: 0.76;
  transform: scale(1.24);
  animation: heroLogoRotate 12s linear reverse infinite;
}

.hero-logo-orbit {
  z-index: 3;
  border: 1px solid rgba(245, 209, 123, 0.24);
  box-shadow: inset 0 0 24px rgba(245, 209, 123, 0.12), 0 0 28px rgba(0, 122, 61, 0.12);
}

.hero-logo-orbit-a {
  inset: 15%;
  animation: heroLogoRotate 7.2s linear reverse infinite;
}

.hero-logo-orbit-b {
  inset: 28%;
  border-color: rgba(0, 163, 79, 0.18);
  animation: heroLogoPulse 4.6s ease-in-out infinite;
}

.hero-logo-branch {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 38%;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(245, 209, 123, 0.04), rgba(245, 209, 123, 0.64) 42%, rgba(245, 209, 123, 0.3));
  box-shadow: 0 0 16px rgba(245, 209, 123, 0.34), 0 0 32px rgba(0, 163, 79, 0.14);
  opacity: 0.9;
}

.hero-logo-branch::before,
.hero-logo-branch::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}

.hero-logo-branch::before {
  left: 27%;
  width: 5px;
  height: 5px;
  background: rgba(245, 209, 123, 0.7);
  box-shadow: 0 0 14px rgba(245, 209, 123, 0.58);
}

.hero-logo-branch::after {
  right: 0;
  width: 8px;
  height: 8px;
  background: rgba(245, 209, 123, 0.82);
  box-shadow: 0 0 18px rgba(245, 209, 123, 0.68);
}

.hero-logo-branch-top {
  width: 42%;
  transform: rotate(-90deg);
}

.hero-logo-branch-left {
  width: 40%;
  transform: rotate(200deg);
}

.hero-logo-branch-right {
  width: 42%;
  transform: rotate(-20deg);
}

.hero-logo-branch-bottom-left {
  width: 42%;
  transform: rotate(142deg);
}

.hero-logo-branch-bottom-right {
  width: 42%;
  transform: rotate(38deg);
}

.hero-logo-branch-women {
  width: 39%;
  transform: rotate(226deg);
  opacity: 0.72;
}

.hero-logo-branch-strategy {
  width: 40%;
  transform: rotate(-46deg);
  opacity: 0.72;
}

.hero-logo-branch-tech {
  width: 36%;
  transform: rotate(166deg);
  opacity: 0.68;
}

.hero-logo-branch-coaching {
  width: 36%;
  transform: rotate(14deg);
  opacity: 0.68;
}

.hero-logo-label,
.hero-logo-title,
.hero-logo-tagline {
  position: absolute;
  z-index: 8;
  color: #f5d17b;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(245, 209, 123, 0.34), 0 2px 12px rgba(0, 0, 0, 0.72);
}

.hero-logo-label {
  z-index: 11;
  min-width: 70px;
  padding: 5px 12px 6px;
  border: 1px solid rgba(245, 209, 123, 0.26);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 36, 31, 0.82), rgba(4, 17, 31, 0.72));
  font-size: clamp(9px, 0.72vw, 12px);
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  opacity: 0.92;
  transform-origin: center;
  scale: 1;
  translate: 0 0;
  transition: scale 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, translate 0.35s ease;
}

/* Each label dodges outward, out of the mascot's way, at the exact moment his 18s
   tour (heroGoldMascotFlight / heroGoldPointerAim) brings him and the wand to it. */
.hero-logo-label-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: heroLabelDodgeTop 18s ease-in-out infinite;
}

.hero-logo-label-left {
  top: 35.5%;
  left: 2.5%;
  min-width: 48px;
  animation: heroLabelDodgeLeft 18s ease-in-out infinite;
}

.hero-logo-label-right {
  top: 35.5%;
  right: 0.5%;
  animation: heroLabelDodgeRight 18s ease-in-out infinite;
}

.hero-logo-label-bottom-left {
  left: 5.5%;
  bottom: 16%;
  animation: heroLabelDodgeBottomLeft 18s ease-in-out infinite;
}

.hero-logo-label-bottom-right {
  right: 7%;
  bottom: 16%;
  animation: heroLabelDodgeBottomRight 18s ease-in-out infinite;
}

.hero-logo-label-women {
  top: 16%;
  left: 11%;
  min-width: 68px;
  animation: heroLabelDodgeWomen 18s ease-in-out infinite;
}

.hero-logo-label-strategy {
  top: 16%;
  right: 6.5%;
  min-width: 78px;
  animation: heroLabelDodgeStrategy 18s ease-in-out infinite;
}

.hero-logo-label-tech {
  left: 1.5%;
  bottom: 34%;
  min-width: 92px;
  animation: heroLabelDodgeTech 18s ease-in-out infinite;
}

.hero-logo-label-coaching {
  right: 2%;
  bottom: 34%;
  min-width: 82px;
  animation: heroLabelDodgeCoaching 18s ease-in-out infinite;
}

.hero-logo-title {
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  color: #f5d17b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.hero-logo-tagline {
  left: 50%;
  bottom: 1%;
  width: 92%;
  transform: translateX(-50%);
  font-size: clamp(8px, 0.82vw, 13px);
  line-height: 1.2;
  letter-spacing: 2px;
  color: rgba(245, 209, 123, 0.88);
}

.hero-gold-cafsessor {
  position: absolute;
  left: 50%;
  top: 20%;
  z-index: 15;
  width: clamp(42px, 5.2vw, 72px);
  height: clamp(54px, 6.4vw, 88px);
  pointer-events: none;
  filter:
    drop-shadow(0 0 14px rgba(245, 209, 123, 0.42))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34));
  transform-origin: 50% 78%;
  animation: heroGoldMascotFlight 18s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.hero-gold-flight {
  position: absolute;
  inset: 20% -36% 20% -28%;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(245, 209, 123, 0.28), transparent);
  filter: blur(7px);
  opacity: 0.72;
}

.hero-gold-arm {
  position: absolute;
  top: 66%;
  z-index: 7;
  width: 54px;
  height: 10px;
  transform-origin: 12% 50%;
}

/* Right shoulder: raised while a right-side branch (Strategy, CAFnizer, Coaching, Medical)
   is being presented; tucked away (opacity 0) the rest of the tour. */
.hero-gold-arm-right {
  left: 64%;
  animation:
    heroGoldPointerAim 18s cubic-bezier(0.45, 0, 0.2, 1) infinite,
    heroArmVisibleRight 18s ease-in-out infinite;
}

/* Left shoulder: raised for the left-side branches (Refereeing, Technology, AI, Women). */
.hero-gold-arm-left {
  left: 36%;
  animation:
    heroGoldPointerAim 18s cubic-bezier(0.45, 0, 0.2, 1) infinite,
    heroArmVisibleLeft 18s ease-in-out infinite;
}

.hero-gold-hand {
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 34% 28%, #ffe8a3, #c98f3e 62%, #7a4e1f 100%);
  border: 1px solid rgba(255, 232, 163, 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.hero-gold-pointer {
  position: absolute;
  left: 7px;
  top: 50%;
  width: 66px;
  height: 3px;
  transform: translateY(-50%);
  transform-origin: 0 50%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #4a2f14 0%, #7a4e1f 42%, #c98f3e 74%, #ffe8a3 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-gold-pointer::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, #fffbe8 0%, #ffe8a3 38%, rgba(245, 209, 123, 0.5) 62%, transparent 78%);
  box-shadow:
    0 0 10px 3px rgba(255, 244, 200, 0.75),
    0 0 22px 8px rgba(245, 209, 123, 0.4);
  animation: heroWandSpark 2.2s ease-in-out infinite;
}

.hero-gold-cap {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 4;
  width: 106%;
  height: 28%;
  transform: translateX(-50%) rotate(-7deg);
  clip-path: polygon(50% 0, 100% 42%, 50% 82%, 0 42%);
  background: linear-gradient(135deg, #ffdf7e, #a87113 58%, #3a2608);
  box-shadow: 0 0 12px rgba(245, 209, 123, 0.42);
}

.hero-gold-cap::after {
  content: "";
  position: absolute;
  right: 16%;
  bottom: -34%;
  width: 3px;
  height: 54%;
  border-radius: 999px;
  background: #ffe8a3;
  box-shadow: 0 12px 0 -4px #ffe8a3;
}

.hero-gold-head {
  position: absolute;
  left: 50%;
  top: 20%;
  z-index: 3;
  width: 78%;
  height: 62%;
  transform: translateX(-50%);
  border-radius: 30% 30% 34% 34%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88), rgba(255, 237, 176, 0.42) 18%, transparent 20%),
    linear-gradient(135deg, #f8ce60, #a66f12 64%, #5a3a08);
  border: 2px solid rgba(255, 238, 170, 0.78);
  box-shadow: inset 0 0 20px rgba(255, 241, 177, 0.22), 0 0 26px rgba(245, 209, 123, 0.3);
  animation: heroGoldMascotBob 2.6s ease-in-out infinite;
}

.hero-gold-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -19%;
  width: 86%;
  height: 20%;
  transform: translateX(-50%) rotate(-5deg);
  border-radius: 4px;
  background: linear-gradient(135deg, #1b1304, #6b470c);
  border: 2px solid rgba(255, 238, 170, 0.76);
}

.hero-gold-head::after {
  content: "AI";
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  color: rgba(255, 246, 198, 0.88);
  font-size: clamp(5px, 0.48vw, 7px);
  font-weight: 950;
}

.hero-gold-glasses {
  position: absolute;
  left: 50%;
  top: 35%;
  z-index: 5;
  width: 70%;
  height: 24%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0 43%, rgba(42, 26, 4, 0.95) 43% 57%, transparent 57% 100%);
}

.hero-gold-glasses::before,
.hero-gold-glasses::after {
  content: "";
  position: absolute;
  top: 0;
  width: 36%;
  height: 100%;
  border: 3px solid rgba(42, 26, 4, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.hero-gold-glasses::before {
  left: 0;
}

.hero-gold-glasses::after {
  right: 0;
}

.hero-gold-eye {
  position: absolute;
  top: 39%;
  z-index: 4;
  width: 12%;
  height: 14%;
  border-radius: 999px;
  background: #fff7cf;
  box-shadow: 0 0 8px rgba(255, 246, 198, 0.55);
}

.hero-gold-eye-left {
  left: 31%;
}

.hero-gold-eye-right {
  right: 31%;
}

.hero-gold-smile {
  position: absolute;
  left: 50%;
  top: 61%;
  width: 32%;
  height: 16%;
  border-bottom: 3px solid rgba(255, 247, 214, 0.92);
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.hero-gold-gown {
  position: absolute;
  left: 50%;
  bottom: -27%;
  width: 68%;
  height: 34%;
  transform: translateX(-50%);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 62% 78%, 50% 100%, 38% 78%, 0 100%);
  background: linear-gradient(135deg, #6a460a, #1d1404);
  border: 2px solid rgba(255, 238, 170, 0.68);
  border-top: 0;
}

.hero-gold-name {
  position: absolute;
  left: 50%;
  bottom: -16%;
  z-index: 6;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(4, 17, 31, 0.72);
  color: #ffe7a0;
  font-size: clamp(5px, 0.55vw, 8px);
  font-weight: 950;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

.hero-logo-sweep {
  position: absolute;
  z-index: 6;
  width: 7%;
  height: 142%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 239, 170, 0.52), transparent);
  filter: blur(7px);
  opacity: 0.52;
  transform: rotate(24deg) translateY(-28%);
  animation: heroLogoSweep 5.8s ease-in-out infinite;
}

.hero-logo-sweep-a {
  left: 29%;
  top: -20%;
}

.hero-logo-sweep-b {
  left: 66%;
  top: -28%;
  width: 4%;
  opacity: 0.34;
  animation-delay: -2.4s;
}

@keyframes heroLogoRotate {
  to { transform: rotate(360deg); }
}

@keyframes heroLogoFloatCentered {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); }
  50% { transform: translate3d(-50%, calc(-50% - 8px), 0) scale(1.02); }
}

@keyframes heroLogoPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.52; }
  50% { transform: scale(1.08); opacity: 0.9; }
}

@keyframes heroLogoSweep {
  0%, 100% { transform: rotate(24deg) translateY(-30%); opacity: 0.18; }
  45% { opacity: 0.58; }
  70% { transform: rotate(24deg) translateY(26%); opacity: 0.08; }
}

/* Label dodge/highlight set: each label rests at scale 1 / translate 0 and, right when the
   mascot's tour (see heroGoldMascotFlight) arrives beside it, glows and slides outward a few
   px to clear space for him and his wand, then settles back. */
@keyframes heroLabelDodgeTop {
  0%, 100% {
    scale: 1.14;
    color: #fff3bf;
    translate: 0 -4px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
  5%, 95% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
}

@keyframes heroLabelDodgeStrategy {
  0%, 6%, 14%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  10% {
    scale: 1.14;
    color: #fff3bf;
    translate: 4px -3px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

@keyframes heroLabelDodgeRight {
  0%, 16%, 24%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  20% {
    scale: 1.14;
    color: #fff3bf;
    translate: 5px -2px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

@keyframes heroLabelDodgeCoaching {
  0%, 26%, 34%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  30% {
    scale: 1.14;
    color: #fff3bf;
    translate: 14px -10px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

@keyframes heroLabelDodgeBottomRight {
  0%, 36%, 44%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  40% {
    scale: 1.14;
    color: #fff3bf;
    translate: 4px 3px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

@keyframes heroLabelDodgeBottomLeft {
  0%, 46%, 54%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  50% {
    scale: 1.14;
    color: #fff3bf;
    translate: -4px 3px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

@keyframes heroLabelDodgeTech {
  0%, 56%, 64%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  60% {
    scale: 1.14;
    color: #fff3bf;
    translate: -4px 2px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

@keyframes heroLabelDodgeLeft {
  0%, 66%, 74%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  70% {
    scale: 1.14;
    color: #fff3bf;
    translate: -5px -2px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

@keyframes heroLabelDodgeWomen {
  0%, 76%, 84%, 100% {
    scale: 1;
    color: #f5d17b;
    translate: 0 0;
    box-shadow: 0 0 18px rgba(245, 209, 123, 0.14), inset 0 0 12px rgba(245, 209, 123, 0.08);
  }
  80% {
    scale: 1.14;
    color: #fff3bf;
    translate: -4px -4px;
    box-shadow: 0 0 28px rgba(245, 209, 123, 0.46), inset 0 0 18px rgba(245, 209, 123, 0.2);
  }
}

/* Clockwise tour: mascot glides directly and calmly between each branch label in turn (top ->
   strategy -> right -> coaching -> bottom-right -> bottom-left -> tech -> left -> women -> top),
   staying small next to the text so he never covers it. No wide detours: each move is a short,
   direct glide to the next label, so he never crosses back over words he already passed. Wand
   is always aimed at whichever branch he is currently beside. */
@keyframes heroGoldMascotFlight {
  0%, 100% { left: 50%; top: 20%; transform: translate(-50%, -50%) rotate(-4deg) scale(0.72); }
  10% { left: 76.1%; top: 29.6%; transform: translate(-50%, -50%) rotate(4deg) scale(0.75); }
  20% { left: 79.7%; top: 41.3%; transform: translate(-50%, -50%) rotate(-3deg) scale(0.72); }
  30% { left: 87%; top: 68%; transform: translate(-50%, -50%) rotate(5deg) scale(0.6); }
  40% { left: 75.8%; top: 70.4%; transform: translate(-50%, -50%) rotate(-4deg) scale(0.72); }
  50% { left: 27%; top: 66%; transform: translate(-50%, -50%) rotate(4deg) scale(0.75); }
  60% { left: 27%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg) scale(0.72); }
  70% { left: 21.5%; top: 41.3%; transform: translate(-50%, -50%) rotate(5deg) scale(0.75); }
  80% { left: 26.6%; top: 29.6%; transform: translate(-50%, -50%) rotate(-4deg) scale(0.72); }
  90% { left: 40.6%; top: 23.8%; transform: translate(-50%, -50%) rotate(3deg) scale(0.73); }
}

@keyframes heroGoldPointerAim {
  0%, 100% { transform: rotate(-90deg); }
  10% { transform: rotate(-38deg); }
  20% { transform: rotate(-16deg); }
  30% { transform: rotate(18deg); }
  40% { transform: rotate(38deg); }
  50% { transform: rotate(143deg); }
  60% { transform: rotate(162deg); }
  70% { transform: rotate(197deg); }
  80% { transform: rotate(221deg); }
  90% { transform: rotate(250deg); }
}

/* Right arm shows only while presenting the right-side branches (Strategy, CAFnizer,
   Coaching, Medical); left arm takes over for the left-side branches. */
@keyframes heroArmVisibleRight {
  0%, 40% { opacity: 1; }
  44% { opacity: 0; }
  86% { opacity: 0; }
  90%, 100% { opacity: 1; }
}

@keyframes heroArmVisibleLeft {
  0%, 40% { opacity: 0; }
  44% { opacity: 1; }
  86% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@keyframes heroWandSpark {
  0%, 100% { opacity: 0.72; transform: translateY(-50%) scale(0.9); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
}

@keyframes heroGoldMascotBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-2px); }
}

@media (max-width: 980px) {
  .hero-visual picture,
  .hero-visual picture > img {
    min-height: clamp(320px, 55vw, 430px);
  }

  .hero-logo-scene {
    width: clamp(230px, 52vw, 360px);
    opacity: 0.84;
  }
}

@media (max-width: 760px) {
  .hero-visual picture,
  .hero-visual picture > img {
    min-height: 300px;
  }

  .hero-logo-scene {
    width: min(82vw, 300px);
  }

  .hero-logo-card {
    padding: 8px;
  }

  .hero-logo-label {
    min-width: 42px;
    padding: 4px 8px;
    font-size: 8px;
  }

  .hero-logo-label-tech,
  .hero-logo-label-coaching {
    min-width: 56px;
  }

  .hero-gold-cafsessor {
    width: 44px;
    height: 58px;
  }

  .hero-gold-arm {
    width: 38px;
    height: 8px;
  }

  .hero-gold-hand {
    width: 8px;
    height: 8px;
  }

  .hero-gold-pointer {
    width: 46px;
  }

  .hero-gold-pointer::after {
    width: 9px;
    height: 9px;
  }

  .hero-logo-title {
    bottom: 8%;
    font-size: 24px;
  }

  .hero-logo-tagline {
    bottom: 1%;
    font-size: 7px;
    letter-spacing: 1px;
  }
}

.auth-visual-panel::after {
  background:
    linear-gradient(180deg, rgba(4, 17, 31, 0.14), rgba(4, 17, 31, 0.76)),
    radial-gradient(circle at 28% 20%, rgba(212, 193, 67, 0.24), transparent 34%),
    linear-gradient(90deg, rgba(4, 17, 31, 0.74), rgba(8, 36, 31, 0.2));
}

.auth-logo-card {
  border-color: rgba(212, 193, 67, 0.34);
  background: rgba(4, 17, 31, 0.72);
  color: #f0f4f2;
}

.auth-logo-card span {
  color: rgba(212, 165, 116, 0.92);
}

.auth-top-nav {
  border-color: rgba(212, 193, 67, 0.16);
}

.auth-mini-brand {
  color: var(--caf-green-dark);
}

/* Removed: a pre-brand-refresh light theme for .cafnizer-page headers that
   partially fought the site-wide dark navy/gold header theme (its !important
   on .site-nav's background won over the newer rules, leaving a pale white
   nav strip on an otherwise dark header on cafnizer-auth.html/cafnizer.html).
   The unscoped .site-header/.brand/.site-nav rules already give every page
   the same dark navy/gold look, so this override is dropped rather than
   updated to match — one fewer place for the two themes to diverge again. */

.page-shell,
.auth-page,
.caf-footer {
  position: relative;
  z-index: 1;
}

.caf-shine-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.caf-shine-star {
  position: absolute;
  top: -8vh;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  opacity: 0;
  background: #ffe066;
  box-shadow:
    0 0 8px rgba(255, 224, 102, 0.95),
    0 0 18px rgba(245, 158, 11, 0.55),
    0 0 32px rgba(212, 165, 116, 0.34);
  animation: cafGoldFall var(--duration) linear var(--delay) infinite;
}

.caf-shine-star::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 210, 0.72), transparent 54%);
  transform: scale(0.75);
}

.caf-shine-star.is-glint {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.caf-shine-star.is-glint::before,
.caf-shine-star.is-glint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 102, 0.98), transparent);
  filter: drop-shadow(0 0 8px #ffe066) drop-shadow(0 0 14px rgba(245, 158, 11, 0.68));
  transform: translate(-50%, -50%);
}

.caf-shine-star.is-glint::before {
  width: calc(var(--size) * 4.8);
  height: 1px;
}

.caf-shine-star.is-glint::after {
  width: 1px;
  height: calc(var(--size) * 4.8);
  background: linear-gradient(180deg, transparent, rgba(255, 224, 102, 0.98), transparent);
}

@keyframes cafGoldFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10vh, 0) scale(0.6) rotate(0deg);
  }
  10% {
    opacity: var(--alpha);
  }
  55% {
    opacity: calc(var(--alpha) * 0.85);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 116vh, 0) scale(1.05) rotate(170deg);
  }
}

@media (max-width: 760px) {
  .caf-shine-field {
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caf-shine-field {
    display: none;
  }
}

/* ============================================================
   Mobile nav: compact app-style bar (logo + search icon + menu
   icon) with search and links opening as dropdown panels, in
   place of the old always-expanded, multi-row stacked nav.
   Applies site-wide since .site-header/.site-nav/.site-search
   are shared markup injected by site.js on every page.
   ============================================================ */

.site-nav-toggle,
.site-search-toggle,
.site-search-close {
  display: none;
}

/* The priority row (home link + notifications) holds real content on every
   screen size — only its mobile packaging (icon sizing, order) is special-
   cased below, so it must not collapse to nothing on desktop. */
.site-nav-priority {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-nav-priority .site-nav-home {
  order: 0;
}

.site-nav-priority .notification-wrap {
  order: 1;
}

.site-nav-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0, 122, 61, 0.18);
  background: rgba(255, 255, 255, 0.72);
  color: var(--caf-green-dark);
  box-shadow: 0 10px 22px rgba(0, 43, 24, 0.08);
}

.site-nav-home-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The header itself renders as a dark navy/green surface (see the brand-
   refresh rules), so match the home icon to the same gold-on-navy language
   as the rest of the nav instead of the light green/white default above. */
.site-nav-home {
  border-color: rgba(212, 193, 67, 0.3) !important;
  background: rgba(4, 17, 31, 0.4) !important;
  color: #f5d17b !important;
}

@media (max-width: 760px) {
  /* Guarded by :has(.site-nav-toggle): the compact single-row bar only applies
     on pages where site.js actually built the hamburger toggle. A handful of
     standalone pages (e.g. cafnizer-auth.html) render .site-header/.site-nav
     without loading site.js, so they keep the older always-visible wrapped
     nav below instead of collapsing into an unreachable hidden drawer. */
  .site-header:has(.site-nav-toggle),
  .site-header:has(.site-nav-toggle):hover,
  .site-header:has(.site-nav-toggle):focus-within {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    position: sticky;
    top: 0;
    /* position:sticky always creates its own stacking context, so the
       drawer's z-index:320 is scoped inside the header, not the page root —
       it was losing to .site-nav-backdrop (z-index:310, appended straight
       to <body>) because the *header itself* only had z-index:100 at the
       root level. Raising the header above the backdrop lets the drawer
       (already stacked above the header's other children) actually receive
       clicks instead of the backdrop intercepting every tap on it. */
    z-index: 330;
    /* The pre-existing margin: 0 -14px (meant to bleed the header edge-to-
       edge past .page-shell's 14px padding) shifts the box left correctly
       but leaves width:auto short on the right by the same 14px — force
       the width explicitly instead of relying on the browser to solve it.
       max-width:100% (set elsewhere for this breakpoint) would otherwise
       cap this calc() straight back down to the un-bled width. */
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
    max-width: calc(100% + 28px);
    /* backdrop-filter (set elsewhere for the header's frosted-glass look)
       establishes a containing block for position:fixed descendants, same
       as transform/filter. Combined with the header's own position:sticky,
       that made the fixed full-height drawer compute its position against
       the header's pre-stick document offset instead of the real viewport —
       it looked fine at scrollY:0, then drifted up by exactly the scroll
       distance as soon as the page scrolled (e.g. after tapping an in-page
       link like #departments), landing off-screen above the viewport. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-header:has(.site-nav-toggle) .brand,
  .site-header:has(.site-nav-toggle):hover .brand,
  .site-header:has(.site-nav-toggle):focus-within .brand {
    /* Shrink-to-fit instead of growing to fill the row — the logo + short
       title shouldn't claim more width than their own content needs, so
       there's room for the icon row. min-width:0 still lets it shrink
       (with ellipsis) if the viewport is extremely narrow. */
    flex: 0 1 auto;
    width: auto;
    max-width: 55%;
    justify-content: flex-start;
    min-width: 0;
  }

  .site-header .brand span,
  .site-header .brand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Search collapses to a single icon button until tapped open. */
  .site-search {
    order: 3;
    position: static;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .site-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(212, 193, 67, 0.32);
    background: rgba(4, 17, 31, 0.4);
    color: #f5d17b;
    cursor: pointer;
    padding: 0;
  }

  .site-search-toggle-icon {
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .site-search-box {
    display: none;
  }

  /* Search opens inline in the compact bar itself (not as a dropdown below
     it) — the priority icons (home/notifications) step aside to give the
     now-narrower input room to sit directly in the row next to the
     hamburger and logo. Only the results list still drops down below the
     header, since a list of matches can't fit in a single row. */
  .site-header:has(.site-search.is-open) .site-nav-priority {
    display: none;
  }

  .site-search.is-open {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
  }

  .site-search.is-open .site-search-toggle {
    display: none;
  }

  .site-search.is-open .site-search-box {
    display: flex;
    width: 100%;
    min-height: 38px;
  }

  .site-search.is-open .site-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
  }

  .site-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 100%;
    border: 0;
    border-left: 1px solid rgba(212, 193, 67, 0.2);
    background: transparent;
    color: #f5d17b;
    cursor: pointer;
  }

  .site-search-close-icon {
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .site-search-results {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 8px;
  }

  /* Priority row: the handful of controls that should never be buried in the
     collapsed drawer — the home link and (once logged in) notifications. */
  .site-nav-priority {
    order: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    /* Pulls itself (and search, right after it) to the right edge, so the
       header reads as two groups: [hamburger][logo] .... [icons], instead
       of everything bunched together right after the shrunk brand block. */
    margin-left: auto;
  }

  .site-nav-home {
    width: 38px;
    height: 38px;
  }

  .site-nav-home-icon {
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .site-nav-priority .notification-wrap {
    flex: 0 0 auto;
    order: 1;
  }

  .site-nav-priority .notification-bell {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  /* Hamburger menu holding every other nav item (links, language switcher,
     user badge, login/logout) as a dropdown panel. Positioned first (like
     the Facebook app's menu icon) rather than after the icon cluster. */
  .site-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: -1;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(212, 193, 67, 0.32);
    background: rgba(4, 17, 31, 0.4);
    color: #f5d17b;
    cursor: pointer;
    padding: 0;
  }

  .site-nav-toggle-icon,
  .site-nav-toggle-icon::before,
  .site-nav-toggle-icon::after {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .site-nav-toggle-icon {
    position: relative;
  }

  .site-nav-toggle-icon::before,
  .site-nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .site-nav-toggle-icon::before {
    top: -6px;
  }

  .site-nav-toggle-icon::after {
    top: 6px;
  }

  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon {
    background: transparent;
  }

  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* Facebook-app style: the drawer is a fixed, full-height panel that slides
     in from the left edge of the SCREEN (not a dropdown below the header),
     over a dimmed backdrop. It stays in the DOM/layout at all times — shown
     or hidden purely via transform — so the slide can transition smoothly;
     visibility/pointer-events keep it inert and untabbable while closed. */
  .site-header:has(.site-nav-toggle) .site-nav,
  .site-header:has(.site-nav-toggle):hover .site-nav,
  .site-header:has(.site-nav-toggle):focus-within .site-nav {
    order: 5;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    margin-top: 0;
    width: min(86vw, 340px);
    max-width: calc(100vw - 52px);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow-y: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 18px 14px 28px;
    padding-top: max(18px, env(safe-area-inset-top));
    border-radius: 0 16px 16px 0;
    background:
      linear-gradient(160deg, #04111f, #08241f) !important;
    border: 1px solid rgba(212, 193, 67, 0.28);
    border-color: rgba(212, 193, 67, 0.28) !important;
    border-left: 0;
    box-shadow: 12px 0 46px rgba(0, 0, 0, 0.4);
    z-index: 320;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
  }

  .site-header:has(.site-nav-toggle) .site-nav.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .site-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 310;
    background: rgba(4, 10, 8, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s;
  }

  .site-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.nav-drawer-open {
    overflow: hidden;
  }

  /* The drawer's align-items:stretch is right for link rows, but it fights
     the language switcher's own compact sizing: since .compact-language-
     switcher sets width:auto (needed so it doesn't get stretched to some
     other wrong fixed width), stretch would blow it up to the full drawer
     width, which in turn inflates each flex:1 flag button — cropping their
     background-image flags down to a sliver (this is why the Egypt flag's
     white middle band was all that showed). Keep it at its own natural size. */
  .site-header:has(.site-nav-toggle) .site-nav .language-switcher {
    align-self: center;
  }

  /* flex:0 0 auto (not 1 1 auto) — this is a vertical column now (the full-
     height side drawer), not the old horizontal dropdown row. flex-grow:1
     here would let each link/button stretch to absorb all of the drawer's
     leftover height instead of sitting naturally sized at the top. */
  .site-header:has(.site-nav-toggle) .site-nav a:not(.btn),
  .site-header:has(.site-nav-toggle) .site-nav span > a,
  .site-header:has(.site-nav-toggle) .site-nav .btn,
  .site-header:has(.site-nav-toggle) #auth-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    max-width: none;
    min-height: 44px;
    width: 100%;
    padding: 10px 12px !important;
    border-radius: 12px;
    border: 1px solid rgba(212, 193, 67, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f7e8b6 !important;
    font-size: 0.9rem;
    font-weight: 850;
    white-space: normal;
    overflow: visible;
    text-align: left;
    box-shadow: none;
    text-shadow: none;
  }

  .site-header:has(.site-nav-toggle) .site-nav a:not(.btn):hover,
  .site-header:has(.site-nav-toggle) .site-nav span > a:hover,
  .site-header:has(.site-nav-toggle) .site-nav .btn:hover,
  .site-header:has(.site-nav-toggle) #auth-link:hover {
    background: rgba(212, 193, 67, 0.16);
    border-color: rgba(212, 193, 67, 0.34);
    color: #fff8dc !important;
    transform: none;
  }

  .site-header:has(.site-nav-toggle) .site-nav > a.cafnizer-nav-character,
  .site-header:has(.site-nav-toggle) .cafnizer-nav-character {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    min-height: 46px;
    border-radius: 14px !important;
    border-color: rgba(212, 193, 67, 0.24) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff8dc !important;
    box-shadow: none;
  }

  .site-header:has(.site-nav-toggle) .cafnizer-nav-character .cafnizer-mini-text {
    color: #fff8dc;
    text-shadow: none;
  }

  .site-header:has(.site-nav-toggle) .site-nav > .user-badge-wrap {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    overflow: visible;
  }

  .site-header:has(.site-nav-toggle) .site-nav .user-badge {
    width: 100%;
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 14px;
    border-color: rgba(212, 193, 67, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #f7e8b6;
    box-shadow: none;
  }

  .site-header:has(.site-nav-toggle) .site-nav .user-badge-name {
    max-width: none;
    color: #fff8dc;
  }

  .site-header:has(.site-nav-toggle) .site-nav .user-badge-text small {
    color: rgba(247, 232, 182, 0.76);
  }

  .site-header:has(.site-nav-toggle) .site-nav .user-badge-menu {
    position: static;
    display: grid;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-header:has(.site-nav-toggle) .site-nav .user-badge-menu a,
  .site-header:has(.site-nav-toggle) .site-nav .user-badge-menu button {
    min-height: 42px;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(212, 193, 67, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: #f7e8b6 !important;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    text-align: left;
  }

  .site-header:has(.site-nav-toggle) .site-nav .user-badge-menu .menu-logout {
    color: #fecaca !important;
  }

  .site-header:has(.site-nav-toggle) .site-nav > .logout-link {
    display: none;
  }

  /* Deliberately no width/flex override for .language-switcher here — the
     existing "flags-only" mobile rules above already size it to a compact
     96px pill with three equal-width flag buttons. Stretching it full-width
     (as an earlier version of this rule did) let each button's flex-basis:0
     grow far past its intended ~32px, which is what caused the Egypt flag's
     background-image to crop down to almost nothing but its white band. */
}

/* Match the gold nav-link theme: the search bar reads as one of the header's
   navy-glass surfaces with gold text instead of a plain white input. */
.site-search-box {
  background: rgba(4, 17, 31, 0.4);
  border-color: rgba(212, 193, 67, 0.3);
}

.site-search:focus-within .site-search-box {
  background: rgba(4, 17, 31, 0.62);
  border-color: rgba(212, 193, 67, 0.56);
}

.site-search input {
  color: #f5d17b;
  caret-color: #f5d17b;
  -webkit-text-fill-color: #f5d17b;
}

.site-search input::placeholder {
  color: rgba(245, 209, 123, 0.55);
  -webkit-text-fill-color: rgba(245, 209, 123, 0.55);
}

.site-search input::selection {
  background: rgba(245, 209, 123, 0.28);
  color: #fff8d8;
  -webkit-text-fill-color: #fff8d8;
}

.site-search-submit {
  border-left-color: rgba(212, 193, 67, 0.24);
  background: transparent;
  color: #f5d17b;
}

.site-search-submit:hover,
.site-search-submit:focus-visible {
  background: rgba(212, 193, 67, 0.18);
  color: #fff3bf;
}