/* ========================= RESET & BASE ========================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue: #167db5;
  --blue-dark: #0f5f8c;
  --blue-light: #38bdf8;
  --sidebar-bg: #1e3a5f;
  --sidebar-w: 260px;
  --bg: #f0f4f8;
  --white: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --green: #059669;
  --amber: #d97706;
  --red: #dc2626;
  --purple: #7c3aed;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
}

/* Big titles use League Spartan across the site */
h1, h2, .logo-text, .nav-links a, .hero-title,
.features-section h2, .about-text h2, .story-section h2, .team-section h2,
.guests-section h2, .dash-header h1, #courses h1, #leaderboard h1, #profile h1,
.lv-header h1, .vl-info h2, .quiz-header h2, .modal-box h2, .results-title,
.stat-value, .cc-title, .barn-btn, .btn-primary, .btn-ghost {
  font-family: 'Montserrat', sans-serif;
}

/* Cursive accent style, reused anywhere we want a "learn deca"-style flourish */
.script-accent, .hero-script {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
}

.hidden { display: none !important; }

/* ========================= LANDING NAV ========================= */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; height: 68px;
  background: #0b1a2e;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 40px; z-index: 1000;
}
.nav-logo { color: white; font-size: 22px; font-weight: 800; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: white; text-decoration: none; font-weight: 800; font-size: 22px; transition: color 0.2s; }
.nav-links a:hover { color: white; }
.nav-login-btn {
  background: var(--blue); color: white; border: none;
  padding: 10px 20px; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 14px; font-family: inherit;
  transition: background 0.2s;
}
.nav-login-btn:hover { background: var(--blue-dark); }

#landingPage { padding-top: 68px; }

/* ========================= LANDING HERO ========================= */
.landing-hero {
  background: #0b1a2e;
  padding: 140px 40px 110px;
  text-align: center; color: white;
}
.hero-title {
  font-size: 80px; font-weight: 900; line-height: 1;
  max-width: 900px; margin: 0 auto;
}
.hero-script {
  color: #38bdf8;
  font-size: 60px;
  display: inline-block;
  margin-top: 10px;
}
.hero-subtitle {
  margin-top: 28px; font-size: 20px; color: rgba(255,255,255,0.75);
  max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5;
}
.hero-btns { margin-top: 40px; display: flex; gap: 16px; justify-content: center; align-items: center; }
.btn-primary {
  background: var(--blue); color: white; border: none;
  padding: 14px 28px; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 700; font-family: inherit;
  transition: all 0.2s; display: inline-block; text-decoration: none;
}
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.btn-ghost {
  color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.3);
  padding: 14px 28px; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 600; font-family: inherit;
  text-decoration: none; transition: all 0.2s;
}
.btn-ghost:hover { color: white; border-color: white; }
.hero-stats {
  margin-top: 60px; display: flex; gap: 48px; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 600;
}
.hero-stats .hs span { display: block; font-size: 28px; font-weight: 800; color: white; margin-bottom: 4px; }

/* ========================= FEATURES ========================= */
.features-section { padding: 100px 60px; max-width: 1200px; margin: 0 auto; }
.features-section h2 { font-size: 48px; font-weight: 800; text-align: center; margin-bottom: 52px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
  background: white; border-radius: var(--radius-lg); padding: 32px;
  border: 1px solid var(--border); transition: all 0.2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feat-icon { font-size: 36px; margin-bottom: 16px; }
.feature-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.feature-card p { color: var(--muted); line-height: 1.6; font-size: 14px; }

/* ========================= ABOUT ========================= */
.about-section { background: #0b1a2e; padding: 100px 60px; }
.about-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text h2 { font-size: 44px; font-weight: 800; color: white; margin-bottom: 20px; }
.about-text p { color: rgba(255,255,255,0.65); font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
.about-text .btn-primary { margin-top: 12px; }
.about-visual { display: flex; justify-content: center; }
.animal-showcase {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06); border-radius: var(--radius-lg);
  padding: 32px 28px; flex-wrap: wrap; justify-content: center;
}
.animal-tier { text-align: center; }
.animal-tier span { font-size: 40px; display: block; margin-bottom: 6px; }
.animal-tier small { color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 600; }
.arrow { color: rgba(255,255,255,0.3); font-size: 24px; font-weight: 300; }

/* ========================= LANDING FOOTER ========================= */
.landing-footer { background: #070f1c; padding: 30px 40px; text-align: center; color: rgba(255,255,255,0.4); font-size: 14px; }

/* ========================= PORTAL LAYOUT ========================= */
#portal { display: flex; min-height: 100vh; }

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg);
  position: fixed; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; padding: 24px 16px;
  z-index: 200; transition: transform 0.3s;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
}
.logo-icon {
  width: 28px;
  height: 28px;
}
.logo-text { color: white; font-size: 20px; font-weight: 800; }

.sidebar-nav { display: flex; flex-direction: column; gap: 6px; }
.nav-btn {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: none; color: rgba(255,255,255,0.65);
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; font-family: inherit;
  transition: all 0.2s; text-align: left;
}
.nav-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.nav-btn.active { background: rgba(255,255,255,0.15); color: white; }
.nav-icon { font-size: 18px; }

.sidebar-animal {
  margin-top: auto; background: rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 16px; display: flex; gap: 12px; align-items: center;
  margin-bottom: 12px;
}
.sa-emoji { font-size: 32px; }
.sa-info { flex: 1; min-width: 0; }
.sa-name { color: white; font-weight: 700; font-size: 14px; }
.sa-xp { color: rgba(255,255,255,0.5); font-size: 11px; margin: 3px 0; }
.sa-bar { height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
.sa-fill { height: 100%; background: #38bdf8; border-radius: 999px; transition: width 0.5s; }





.logout-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; color: rgba(255,255,255,0.4);
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  transition: all 0.2s;
}
.logout-btn:hover { background: rgba(255,0,0,0.1); color: #f87171; }

/* MAIN */
.main { margin-left: var(--sidebar-w); flex: 1; padding: 40px 44px; min-height: 100vh; }
.mobile-header { display: none; }

/* ========================= TAB CONTENT ========================= */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ========================= DASHBOARD ========================= */
.dash-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 28px;
}
.dash-header h1 { font-size: 38px; font-weight: 900; }
.dash-sub { color: var(--muted); margin-top: 4px; font-size: 15px; }
.barn-btn {
  background: var(--blue); color: white; border: none;
  padding: 12px 22px; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; font-family: inherit;
  white-space: nowrap; transition: background 0.2s;
}
.barn-btn:hover { background: var(--blue-dark); }

/* STATS */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px;
}
.stat-card {
  background: white; border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow); text-align: center;
}
.stat-icon { font-size: 28px; margin-bottom: 10px; }
.stat-value { font-size: 32px; font-weight: 900; color: var(--text); }
.stat-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; }

/* DASH TWO COL */
.dash-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.dash-right { display: flex; flex-direction: column; gap: 20px; }

/* ANIMAL CARD */
.animal-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; justify-content: space-between; align-items: center;
  border: 2px solid #f59e0b;
}
.ac-left { display: flex; gap: 16px; align-items: center; }
.ac-emoji { font-size: 52px; }
.ac-name { font-size: 22px; font-weight: 800; }
.ac-tagline { color: #92400e; font-size: 13px; font-style: italic; margin: 3px 0; }
.ac-level { font-size: 13px; font-weight: 700; color: #b45309; }
.ac-right { text-align: center; }
.ac-next-label { font-size: 11px; color: #92400e; font-weight: 700; margin-bottom: 4px; }
.ac-next-emoji { font-size: 32px; }
.ac-next-name { font-size: 12px; color: #b45309; font-weight: 600; }
.xp-bar-row {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 14px 0 8px;
}
.xp-bar-outer { height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.xp-bar-inner { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); border-radius: 999px; transition: width 0.6s ease; }

.section-title { font-size: 20px; font-weight: 800; margin-bottom: 16px; }

/* FEATURED COURSES (PASTURES) */
#featuredCourses { display: flex; flex-direction: column; gap: 12px; }
.pasture-row {
  background: white; border-radius: var(--radius); padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow); cursor: pointer; transition: all 0.2s;
  border: 1px solid var(--border);
}
.pasture-row:hover { transform: translateX(4px); border-color: var(--blue); }
.pasture-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.pasture-info { flex: 1; min-width: 0; }
.pasture-title { font-size: 15px; font-weight: 700; }
.pasture-pct { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pasture-bar-outer { height: 5px; background: var(--border); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.pasture-bar-inner { height: 100%; border-radius: 999px; }
.pasture-arrow { color: var(--muted); font-size: 18px; }

/* WIDGET */
.widget {
  background: white; border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.widget-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 800; margin-bottom: 18px;
}
.widget-badge {
  background: #fef3c7; color: #92400e; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 700;
}

/* STREAK */
.streak-days { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.streak-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.streak-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700;
  color: var(--muted);
}
.streak-circle.done { background: #fef3c7; color: #d97706; border: 2px solid #f59e0b; }
.streak-circle.today { background: var(--blue); color: white; border: 2px solid var(--blue-dark); }
.streak-day-label { font-size: 10px; color: var(--muted); font-weight: 600; }
.streak-count-box {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 36px; font-weight: 900; margin: 4px 0 8px;
}
.streak-msg { text-align: center; font-size: 13px; color: var(--muted); }

/* BADGES */
.badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.badge-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 24px; position: relative;
}
.badge-icon-wrap.locked { filter: grayscale(1); opacity: 0.4; }
.badge-icon-wrap.unlocked { background: #fef3c7; border: 2px solid #f59e0b; }
.badge-name { font-size: 10px; color: var(--muted); font-weight: 600; line-height: 1.2; }
.badge-msg { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ========================= COURSES PAGE ========================= */
#courses h1 { font-size: 38px; font-weight: 900; margin-bottom: 6px; }
.page-sub { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.course-search-row { margin-bottom: 20px; }
.search-wrap {
  position: relative; max-width: 560px;
}
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; }
#courseSearch {
  width: 100%; padding: 12px 16px 12px 42px;
  border: 2px solid var(--border); border-radius: 12px;
  font-size: 15px; font-family: inherit; outline: none;
  transition: border 0.2s;
}
#courseSearch:focus { border-color: var(--blue); }
.category-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.cat-btn {
  background: white; border: 2px solid var(--border); border-radius: 999px;
  padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 700;
  font-family: inherit; transition: all 0.2s; color: var(--muted);
}
.cat-btn:hover, .cat-btn.active { background: var(--blue); border-color: var(--blue); color: white; }

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.course-card-new {
  background: white; border-radius: var(--radius-lg); padding: 0;
  box-shadow: var(--shadow); transition: all 0.2s; overflow: hidden;
  border: 1px solid var(--border); cursor: pointer;
}
.course-card-new:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cc-top { height: 6px; }
.cc-body { padding: 24px; }
.cc-tags { display: flex; gap: 8px; margin-bottom: 14px; }
.cc-category {
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 4px 10px; background: transparent; border: 1.5px solid;
}
.cc-level {
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 4px 10px;
}
.cc-level.beginner { background: #dcfce7; color: #166534; }
.cc-level.intermediate { background: #fef9c3; color: #854d0e; }
.cc-level.advanced { background: #fee2e2; color: #991b1b; }
.cc-title { font-size: 20px; font-weight: 800; margin-bottom: 10px; line-height: 1.2; }
.cc-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
.cc-meta { display: flex; gap: 16px; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 18px; }
.cc-progress-bar { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.cc-progress-fill { height: 100%; border-radius: 999px; }
.cc-footer { display: flex; justify-content: space-between; align-items: center; }
.cc-pct { font-size: 13px; font-weight: 700; color: var(--muted); }
.cc-start { color: var(--blue); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 4px; }

/* ========================= LESSON VIEW ========================= */
.lesson-view-wrap { max-width: 900px; }
.lv-back {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-weight: 700; cursor: pointer;
  font-size: 14px; margin-bottom: 24px; transition: color 0.2s;
}
.lv-back:hover { color: var(--text); }
.lv-header { margin-bottom: 28px; }
.lv-header h1 { font-size: 32px; font-weight: 900; margin-bottom: 8px; }
.lv-desc { color: var(--muted); font-size: 15px; }
.lessons-list { display: flex; flex-direction: column; gap: 12px; }
.lesson-row {
  background: white; border-radius: var(--radius); padding: 18px 22px;
  border: 1.5px solid var(--border); display: flex; align-items: center;
  gap: 16px; cursor: pointer; transition: all 0.2s;
}
.lesson-row:hover { border-color: var(--blue); background: #f0f9ff; }
.lesson-row.done { border-color: #86efac; background: #f0fdf4; }
.lr-status { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.lr-status.pending { background: var(--border); }
.lr-status.completed { background: #dcfce7; color: #166534; }
.lr-info { flex: 1; }
.lr-title { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.lr-meta { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lr-xp { background: #fef3c7; color: #92400e; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; }
.lr-arrow { color: var(--muted); }

/* ========================= VIDEO LESSON ========================= */
.video-lesson-wrap, .quiz-wrap { max-width: 860px; }
.vl-back, .quiz-back {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-weight: 700; cursor: pointer;
  font-size: 14px; margin-bottom: 24px;
}
.vl-back:hover, .quiz-back:hover { color: var(--text); }
.video-container {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-bottom: 24px;
}
.video-container iframe { display: block; width: 100%; height: 480px; border: none; }
.vl-info { background: white; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.vl-info h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.vl-meta { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.complete-btn {
  background: var(--green); color: white; border: none;
  padding: 14px 28px; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 700; font-family: inherit; transition: all 0.2s;
}
.complete-btn:hover { background: #047857; transform: translateY(-1px); }
.complete-btn:disabled { background: #86efac; color: #166534; cursor: default; transform: none; }

/* ========================= QUIZ ========================= */
.quiz-header { background: white; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); margin-bottom: 24px; }
.quiz-header h2 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.quiz-progress-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.quiz-pbar-outer { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.quiz-pbar-inner { height: 100%; background: var(--blue); border-radius: 999px; transition: width 0.4s; }
.quiz-question-card { background: white; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.question-text { font-size: 20px; font-weight: 700; margin-bottom: 28px; line-height: 1.4; }
.options-list { display: flex; flex-direction: column; gap: 12px; }
.option-btn {
  background: var(--bg); border: 2px solid var(--border); border-radius: 12px;
  padding: 16px 20px; cursor: pointer; font-size: 16px; font-weight: 600;
  font-family: inherit; text-align: left; transition: all 0.2s; line-height: 1.4;
}
.option-btn:hover:not(:disabled) { border-color: var(--blue); background: #f0f9ff; }
.option-btn.correct { border-color: var(--green); background: #dcfce7; color: #166534; }
.option-btn.wrong { border-color: var(--red); background: #fee2e2; color: #991b1b; }
.option-btn:disabled { cursor: default; }
.explanation-box {
  margin-top: 20px; background: #f0f9ff; border-radius: 12px;
  padding: 18px 20px; border-left: 4px solid var(--blue);
  font-size: 14px; color: var(--text); line-height: 1.6; display: none;
}
.explanation-box.show { display: block; }
.next-btn {
  margin-top: 24px; background: var(--blue); color: white; border: none;
  padding: 14px 32px; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 700; font-family: inherit; display: none;
  transition: background 0.2s;
}
.next-btn.show { display: inline-block; }
.next-btn:hover { background: var(--blue-dark); }
.quiz-results {
  background: white; border-radius: var(--radius-lg); padding: 48px;
  box-shadow: var(--shadow); text-align: center; max-width: 600px; margin: 0 auto;
}
.results-emoji { font-size: 72px; margin-bottom: 20px; }
.results-title { font-size: 32px; font-weight: 900; margin-bottom: 12px; }
.results-score { font-size: 20px; color: var(--muted); margin-bottom: 28px; }
.results-xp { font-size: 28px; font-weight: 800; color: #d97706; margin-bottom: 32px; }
.results-btns { display: flex; gap: 16px; justify-content: center; }

/* ========================= LEADERBOARD ========================= */
#leaderboard h1 { font-size: 38px; font-weight: 900; margin-bottom: 6px; }
.lb-tabs { display: flex; gap: 10px; margin-bottom: 28px; }
.lb-tab {
  background: white; border: 2px solid var(--border); border-radius: 999px;
  padding: 10px 22px; cursor: pointer; font-size: 14px; font-weight: 700;
  font-family: inherit; transition: all 0.2s;
}
.lb-tab.active { background: var(--blue); border-color: var(--blue); color: white; }
.leaderboard-list { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.lb-row {
  background: white; border-radius: var(--radius); padding: 16px 22px;
  display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow);
  border: 1px solid var(--border); transition: all 0.2s;
}
.lb-row.you { border: 2px solid var(--blue); background: #f0f9ff; }
.lb-rank { font-size: 20px; font-weight: 900; width: 36px; text-align: center; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.lb-rank.gold { color: #f59e0b; }
.lb-rank.silver { color: #94a3b8; }
.lb-rank.bronze { color: #d97706; }
.lb-avatar { font-size: 24px; }
.lb-info { flex: 1; }
.lb-name { font-size: 16px; font-weight: 700; }
.lb-chapter { font-size: 12px; color: var(--muted); }
.lb-val { font-size: 20px; font-weight: 900; color: var(--blue); }
.lb-unit { font-size: 12px; color: var(--muted); font-weight: 600; }
.lb-loading { text-align: center; padding: 60px; color: var(--muted); font-size: 18px; }
.lb-pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 18px; padding-top: 14px;
}
.lb-page-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: white; border: 2px solid var(--border); cursor: pointer;
  font-size: 20px; font-weight: 700; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.lb-page-btn:hover:not(:disabled) { border-color: var(--blue); background: #f0f9ff; }
.lb-page-btn:disabled { opacity: 0.3; cursor: default; color: var(--muted); }
.lb-page-label { font-size: 13px; font-weight: 700; color: var(--muted); }

/* ========================= PROFILE ========================= */
#profile h1 { font-size: 38px; font-weight: 900; margin-bottom: 24px; }
.profile-card {
  background: white; border-radius: var(--radius-lg); padding: 32px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: var(--shadow); margin-bottom: 24px; border: 1px solid var(--border);
}
.profile-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--blue); display: flex; align-items: center;
  justify-content: center; font-size: 32px; font-weight: 900;
  color: white; flex-shrink: 0; overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 26px; font-weight: 900; }
.profile-email { color: var(--muted); font-size: 14px; margin-top: 4px; }
.profile-level { color: var(--blue); font-size: 14px; font-weight: 700; margin-top: 6px; }
.profile-stats { margin-bottom: 24px; }
.profile-edit-widget { margin-bottom: 20px; }
.profile-edit-widget h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.form-group input {
  width: 100%; max-width: 400px; padding: 12px 14px;
  border: 2px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit; outline: none; transition: border 0.2s;
}
.form-group input:focus { border-color: var(--blue); }
.badges-grid-large { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.badge-item-large {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.badge-icon-lg {
  width: 72px; height: 72px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.badge-icon-lg.locked { background: var(--border); filter: grayscale(1); opacity: 0.35; }
.badge-icon-lg.unlocked { background: #fef3c7; border: 2px solid #f59e0b; }
.badge-name-lg { font-size: 12px; font-weight: 700; color: var(--muted); }
.completed-list { display: flex; flex-direction: column; gap: 10px; }
.completed-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.completed-item:last-child { border-bottom: none; }

/* ========================= XP TOAST ========================= */
.xp-toast {
  position: fixed; bottom: 30px; right: 30px; z-index: 9999;
  background: #1e293b; color: white; border-radius: 999px;
  padding: 14px 28px; font-size: 20px; font-weight: 900;
  box-shadow: var(--shadow-lg); animation: toastIn 0.4s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: none; } }

/* ========================= MODALS ========================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 9000;
  backdrop-filter: blur(4px);
}
.modal-box {
  background: white; border-radius: 28px; padding: 52px 48px;
  text-align: center; max-width: 400px; width: 90%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}
.modal-emoji { font-size: 80px; margin-bottom: 20px; }
.badge-modal-icon {
  width: 90px; height: 90px; margin: 0 auto 20px;
  color: var(--amber);
}
.badge-modal-icon svg { width: 100%; height: 100%; }
.modal-box h2 { font-size: 32px; font-weight: 900; margin-bottom: 12px; }
.modal-animal { font-size: 28px; font-weight: 800; color: var(--blue); margin-bottom: 12px; }
.modal-box p { color: var(--muted); font-size: 16px; margin-bottom: 28px; }

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1100px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-two-col { grid-template-columns: 1fr; }
  .dash-right { grid-column: 1; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding: 20px; }
  .mobile-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; background: var(--sidebar-bg); color: white;
    font-size: 18px; font-weight: 800; margin: -20px -20px 20px;
  }
  .hamburger { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
  .hero-title { font-size: 44px; }
  .hero-script { font-size: 34px; }
  .features-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }
  .course-grid { grid-template-columns: 1fr; }
  .badges-grid-large { grid-template-columns: repeat(3, 1fr); }
}

.story-section {
  padding: 100px 8%;
  background: #10233b;
  text-align: center;
}

.story-container {
  max-width: 850px;
  margin: 0 auto;
}

.story-section h2 {
  font-size: 3rem;
  color: white;
  margin-bottom: 30px;
}

.story-section p {
  color: #b6c2d1;
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

.team-section {
  padding: 100px 8%;
  background: #0c1d33;
  text-align: center;
}

.team-section h2 {
  color: white;
  font-size: 3rem;
  margin-bottom: 60px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.team-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 30px;
  transition: 0.3s ease;

  display: flex;
  flex-direction: column;
  height: 100%;
}

.team-card:hover {
  transform: translateY(-6px);
}

.team-card img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
  margin-bottom: 20px;
}

.team-card h3 {
  color: white;
  margin-bottom: 8px;
}

.team-card span {
  color: #4ea6ff;
  font-weight: 600;
  display: block;
  margin-bottom: 15px;
}

.team-card p {
  color: #b6c2d1;
  line-height: 1.6;
}

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

/* ========================= FEATURED GUESTS ========================= */
.guests-section {
  padding: 100px 8%;
  background: #10233b;
  text-align: center;
}
.guests-sub {
  color: #b6c2d1;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  max-width: 640px;
  margin: -30px auto 50px;
}
.guests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.guest-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 30px;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.guest-card:hover { transform: translateY(-6px); }
.guest-card img {
  width: 130px; height: 130px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 20px;
}
.guest-card h3 { color: white; margin-bottom: 6px; }
.guest-role {
  color: #4ea6ff; font-weight: 600; font-size: 13px;
  display: block; margin-bottom: 15px;
}
.guest-card p { color: #b6c2d1; line-height: 1.6; font-size: 14px; }

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

.nav-logo {
    display: flex;
    align-items: center;   /* Vertically centers everything */
    gap: 12px;
}

.logo-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.logo-text {
    color: white;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;        /* Prevents the text from sitting too low */
    margin: 0;
}

/* ========================= ICONS (SVG, not emoji) ========================= */
.icon-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }
.icon-svg svg { width: 100%; height: 100%; display: block; }

.pasture-icon svg, .cc-icon svg { width: 22px; height: 22px; }
.pasture-icon, .cc-icon { display: flex; align-items: center; justify-content: center; }

.cc-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
}

.lr-status svg { width: 16px; height: 16px; }
.lr-meta .lr-type-icon { width: 14px; height: 14px; display: inline-flex; }
.lr-meta .lr-type-icon svg { width: 100%; height: 100%; }

.badge-icon-wrap svg, .badge-icon-lg svg { width: 26px; height: 26px; }
.badge-icon-lg svg { width: 34px; height: 34px; }
.badge-icon-wrap.unlocked, .badge-icon-lg.unlocked { color: #b45309; }
.badge-icon-wrap.locked, .badge-icon-lg.locked { color: var(--muted); }

.streak-header-icon { width: 16px; height: 16px; display: inline-flex; vertical-align: -3px; color: #d97706; }
.streak-header-icon svg { width: 100%; height: 100%; }

.lb-rank svg { width: 20px; height: 20px; }
.lb-rank.gold svg, .lb-rank.silver svg, .lb-rank.bronze svg { display: block; }

/* ========================= ADMIN PANEL ========================= */
.admin-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.admin-course-list { display: flex; flex-direction: column; gap: 8px; }
.admin-course-btn {
  background: white; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 16px; text-align: left; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; transition: all 0.15s;
}
.admin-course-btn:hover { border-color: var(--blue); }
.admin-course-btn.active { background: var(--blue); border-color: var(--blue); color: white; }
.admin-course-btn .admin-course-sub { display: block; font-size: 11px; font-weight: 600; opacity: 0.7; margin-top: 2px; }

.admin-panel-body { background: white; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.admin-lesson-block { border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.admin-lesson-block.quiz-block { background: #f8fafc; }
.admin-lesson-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.admin-lesson-head h4 { font-size: 15px; font-weight: 800; }
.admin-field-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.admin-field-row input, .admin-field-row select {
  padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 13px; flex: 1; min-width: 140px;
}
.admin-btn-sm {
  background: var(--blue); color: white; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background 0.15s;
}
.admin-btn-sm:hover { background: var(--blue-dark); }
.admin-btn-sm.danger { background: var(--red); }
.admin-btn-sm.danger:hover { background: #b91c1c; }
.admin-btn-sm.ghost { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }

.admin-question-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.admin-question-card .admin-field-row input { min-width: 100px; }
.admin-add-question-form { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 10px; }
.admin-add-question-form textarea {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 13px; margin-bottom: 8px; resize: vertical;
}
.admin-option-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.admin-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.admin-subtabs { display: flex; gap: 10px; margin-bottom: 20px; }
.admin-subtab-btn {
  background: white; border: 2px solid var(--border); border-radius: 999px;
  padding: 8px 20px; cursor: pointer; font-size: 13px; font-weight: 700;
  font-family: inherit; transition: all 0.2s;
}
.admin-subtab-btn.active { background: var(--blue); border-color: var(--blue); color: white; }
.admin-kpi-form textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 13px; margin-bottom: 10px; resize: vertical;
}
.admin-kpi-form input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13px; margin-bottom: 10px; }
.admin-seed-banner {
  background: #fef3c7; border: 1.5px solid #f59e0b; border-radius: 12px;
  padding: 16px 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}

/* ========================= STUDY PLANNER ========================= */
.planner-form-widget { max-width: 560px; margin-bottom: 28px; }
.planner-form-widget select {
  width: 100%; max-width: 400px; padding: 12px 14px;
  border: 2px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit; outline: none; transition: border 0.2s;
  background: white;
}
.planner-form-widget select:focus, .planner-form-widget input:focus { border-color: var(--blue); }

.planner-summary {
  background: white; border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 20px;
}
.planner-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.planner-summary-stat { text-align: center; }
.planner-summary-stat .val { font-size: 24px; font-weight: 900; color: var(--blue); }
.planner-summary-stat .lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.planner-warning {
  background: #fef3c7; border: 1.5px solid #f59e0b; border-radius: 12px;
  padding: 14px 18px; font-size: 14px; color: #92400e; margin-top: 16px;
}
.planner-ontrack {
  background: #dcfce7; border: 1.5px solid #22c55e; border-radius: 12px;
  padding: 14px 18px; font-size: 14px; color: #166534; margin-top: 16px;
}
.planner-weeks { display: flex; flex-direction: column; gap: 14px; }
.planner-week-card {
  background: white; border-radius: var(--radius); padding: 18px 22px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.planner-week-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.planner-week-head h4 { font-size: 15px; font-weight: 800; }
.planner-week-dates { font-size: 12px; color: var(--muted); font-weight: 600; }
.planner-week-items { display: flex; flex-direction: column; gap: 6px; }
.planner-week-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.planner-week-item .icon-svg { color: var(--blue); }

/* ========================= PERFORMANCE ANALYTICS ========================= */
.analytics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.analytics-course-row {
  background: white; border-radius: var(--radius); padding: 16px 20px;
  border: 1px solid var(--border); margin-bottom: 10px;
}
.analytics-course-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.analytics-unit-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.analytics-unit-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border); }
.analytics-unit-row:first-child { border-top: none; }
.analytics-score-pill { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; margin-left: auto; }
.analytics-score-pill.good { background: #dcfce7; color: #166534; }
.analytics-score-pill.mid { background: #fef9c3; color: #854d0e; }
.analytics-score-pill.low { background: #fee2e2; color: #991b1b; }
.analytics-xp-chart { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 14px; }
.analytics-xp-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.analytics-xp-bar { width: 100%; background: linear-gradient(180deg, var(--blue-light), var(--blue)); border-radius: 6px 6px 0 0; min-height: 3px; }
.analytics-xp-label { font-size: 10px; color: var(--muted); font-weight: 600; }
.rec-card {
  background: white; border-radius: var(--radius); padding: 16px 20px;
  border: 1px solid var(--border); display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px;
}
.rec-card .icon-svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.rec-card-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.rec-card-desc { font-size: 13px; color: var(--muted); }

/* ========================= KPI DATABASE ========================= */
.kpi-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.kpi-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; }
.kpi-list-item {
  background: white; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 16px; text-align: left; cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.kpi-list-item:hover { border-color: var(--blue); }
.kpi-list-item.active { background: var(--blue); border-color: var(--blue); color: white; }
.kpi-list-item .kpi-cluster-tag { display: block; font-size: 11px; font-weight: 600; opacity: 0.7; margin-top: 2px; }
.kpi-detail { background: white; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.kpi-detail h2 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.kpi-detail .kpi-cluster-tag { color: var(--blue); font-size: 13px; font-weight: 700; }
.kpi-section { margin-top: 22px; }
.kpi-section h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 8px; }
.kpi-section p { font-size: 14px; line-height: 1.6; color: var(--text); }

/* ========================= BOOKMARKS ========================= */
.bookmark-btn {
  background: transparent; border: none; cursor: pointer; color: var(--muted);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; flex-shrink: 0; transition: all 0.15s;
}
.bookmark-btn:hover { background: var(--bg); color: var(--blue); }
.bookmark-btn.active { color: #d97706; }
.bookmark-btn svg { width: 18px; height: 18px; }
.kpi-detail-head { display: flex; justify-content: space-between; align-items: center; }
.kpi-list-item { position: relative; padding-right: 40px; }
.kpi-bookmark-dot { position: absolute; right: 14px; top: 14px; color: #d97706; width: 14px; height: 14px; }
.kpi-bookmark-dot svg { width: 100%; height: 100%; }
.bookmark-group-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin: 16px 0 8px; }
.bookmark-group-label:first-child { margin-top: 0; }
.bookmark-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; font-weight: 600;
}
.bookmark-row:last-child { border-bottom: none; }
.bookmark-row:hover { color: var(--blue); }
.bookmark-row .icon-svg { color: var(--blue); flex-shrink: 0; }
.bookmark-row-sub { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 600; }

/* ========================= ADMIN MEMBERS ========================= */
.admin-subtabs { flex-wrap: wrap; }
.admin-members-table { display: flex; flex-direction: column; gap: 2px; max-height: 640px; overflow-y: auto; }
/* AFTER */
.admin-members-row {
  display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 1fr 0.6fr 0.9fr; gap: 10px;
  padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); align-items: center;
}
.admin-members-head { font-weight: 800; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; }

/* ========================= EXAM CTA + PRACTICE EXAM ========================= */
.exam-cta {
  background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid var(--blue-light);
  border-radius: var(--radius-lg); padding: 20px 24px; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; margin-bottom: 24px;
}
.exam-cta-title { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; color: var(--blue-dark); }
.exam-cta-desc { font-size: 13px; color: var(--muted); margin-top: 4px; }
.exam-setup-wrap { max-width: 560px; }
.exam-setup-card { background: white; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.exam-setup-card h2 { font-size: 24px; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.exam-setup-card select, .exam-setup-card input {
  width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit; outline: none; background: white;
}
.exam-header { background: white; border-radius: var(--radius-lg); padding: 20px 28px; box-shadow: var(--shadow); margin-bottom: 24px; }
.exam-timer { font-weight: 900; font-size: 16px; color: var(--blue); font-variant-numeric: tabular-nums; }
.exam-timer-low { color: var(--red); }
.exam-nav-row { display: flex; justify-content: space-between; margin-top: 24px; }
.option-btn.selected { border-color: var(--blue); background: #f0f9ff; }

/* ========================= CALENDAR ========================= */
.calendar-event-card {
  background: white; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px;
  display: flex; gap: 18px; align-items: flex-start; box-shadow: var(--shadow); border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
}
.calendar-event-card.deadline { border-left-color: var(--red); }
.calendar-event-date { text-align: center; flex-shrink: 0; width: 54px; }
.ced-month { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.ced-day { font-size: 26px; font-weight: 900; }
.calendar-event-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.calendar-event-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.calendar-event-type { border-radius: 999px; padding: 2px 10px; background: #dbeafe; color: var(--blue-dark); }
.calendar-event-type.deadline { background: #fee2e2; color: #991b1b; }
.calendar-event-desc { font-size: 13px; color: var(--text); }

/* ========================= BLOG ========================= */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-card { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.blog-cover { width: 100%; height: 180px; object-fit: cover; display: block; }
.blog-card-body { padding: 22px; }
.blog-meta { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.blog-card-body h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.blog-card-body p { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 14px; white-space: pre-line; }
.blog-video { border-radius: 12px; overflow: hidden; }
.blog-video iframe { width: 100%; height: 220px; border: none; display: block; }
.blog-reel-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 700; text-decoration: none; font-size: 14px; }
/* ADD THIS */
.blog-post-view { max-width: 720px; margin: 0 auto; }
.blog-post-body { font-size: 18px; line-height: 1.95; color: var(--text); }
.blog-post-body p { margin-bottom: 24px; }
.blog-post-body p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .blog-post-body { font-size: 16.5px; line-height: 1.85; }
  .blog-post-body p { margin-bottom: 20px; }
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* ========================= CHECKLIST PROGRESS BARS =========================
   Kept because the Prepared Event AI tab and the motion layer reuse these
   classes. Harmless if unused elsewhere. */
.checklist-progress-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 10px; }
.checklist-pbar-outer { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 8px 0 20px; }
.checklist-pbar-inner { height: 100%; background: var(--green); border-radius: 999px; transition: width 0.3s; }
/* =========================================================================
   FARM4GLASS — MOTION & CELEBRATION LAYER
   Append this to the END of style.css. Every rule here is additive:
   no existing selector is redefined in a way that changes a resting state.
   Same fonts, same colors, same layout — things just move now.
   ========================================================================= */

/* ---------- keyframes ---------- */
@keyframes f4g-rise      { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes f4g-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes f4g-pop       { 0% { opacity: 0; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes f4g-modal-in  { 0% { opacity: 0; transform: scale(.86) translateY(18px); } 65% { opacity: 1; transform: scale(1.03) translateY(0); } 100% { transform: scale(1); } }
@keyframes f4g-shake     { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes f4g-shimmer   { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(220%); } }
@keyframes f4g-pulse     { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,125,181,.45); } 50% { box-shadow: 0 0 0 7px rgba(22,125,181,0); } }
@keyframes f4g-ring      { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes f4g-burst     { 0% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.6); } }
@keyframes f4g-grow      { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes f4g-sheen     { 0% { transform: translateX(-140%) skewX(-18deg); } 22%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes f4g-dots      { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes f4g-notice-in { 0% { opacity: 0; transform: translateY(16px) scale(.95); } 100% { opacity: 1; transform: none; } }

/* ---------- page + card entrances ---------- */
.tab-content.active { animation: f4g-rise .3s cubic-bezier(.2,.7,.3,1) both; }

.course-grid .course-card-new,
.features-grid .feature-card { animation: f4g-rise .38s cubic-bezier(.2,.7,.3,1) both; }
.course-grid .course-card-new:nth-child(1),  .features-grid .feature-card:nth-child(1) { animation-delay: .02s; }
.course-grid .course-card-new:nth-child(2),  .features-grid .feature-card:nth-child(2) { animation-delay: .05s; }
.course-grid .course-card-new:nth-child(3),  .features-grid .feature-card:nth-child(3) { animation-delay: .08s; }
.course-grid .course-card-new:nth-child(4),  .features-grid .feature-card:nth-child(4) { animation-delay: .11s; }
.course-grid .course-card-new:nth-child(5),  .features-grid .feature-card:nth-child(5) { animation-delay: .14s; }
.course-grid .course-card-new:nth-child(6),  .features-grid .feature-card:nth-child(6) { animation-delay: .17s; }
.course-grid .course-card-new:nth-child(n+7) { animation-delay: .2s; }

.stats-grid .stat-card { animation: f4g-rise .34s cubic-bezier(.2,.7,.3,1) both; }
.stats-grid .stat-card:nth-child(2) { animation-delay: .05s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: .1s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: .15s; }

.pasture-row, .lesson-row, .lb-row { animation: f4g-fade .28s ease both; }

/* ---------- hover / press feedback ---------- */
.stat-card { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.btn-primary, .barn-btn, .complete-btn, .next-btn, .admin-btn-sm, .nav-login-btn, .cat-btn, .lb-tab {
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn-primary:hover, .barn-btn:hover  { box-shadow: 0 10px 24px rgba(22,125,181,.28); }
.complete-btn:hover                   { box-shadow: 0 10px 24px rgba(5,150,105,.28); }
.btn-primary:active, .barn-btn:active, .complete-btn:active,
.next-btn:active, .admin-btn-sm:active, .nav-login-btn:active { transform: translateY(1px) scale(.985); }

.lesson-row { transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s; }
.lesson-row:hover { transform: translateX(3px); }

.badge-item, .badge-item-large { transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.badge-item:hover, .badge-item-large:hover { transform: translateY(-3px) scale(1.04); }

/* ---------- sidebar active indicator ---------- */
.nav-btn { position: relative; }
.nav-btn.active::before {
  content: ""; position: absolute; left: 2px; top: 22%; bottom: 22%; width: 3px;
  border-radius: 2px; background: var(--blue-light);
  animation: f4g-grow .26s cubic-bezier(.2,.8,.2,1) both;
}

/* ========================= ADVISOR DASHBOARD BUTTON ========================= */
.nav-btn.advisor-btn {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-weight: 800;
}
.nav-btn.advisor-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  color: #fff;
}
.nav-btn.advisor-btn.active {
  background: #f59e0b;
  color: #1e293b;
  border-color: #f59e0b;
}

/* portal v2 restyles .nav-btn later in the file, so override again here */
#portal .nav-btn.advisor-btn { background: rgba(245, 158, 11, 0.18); color: #92400e; border-color: rgba(245, 158, 11, 0.4); }
#portal .nav-btn.advisor-btn:hover { background: rgba(245, 158, 11, 0.3); color: #78350f; }
#portal .nav-btn.advisor-btn.active { background: #f59e0b; color: #1e293b; box-shadow: 0 8px 20px rgba(245,158,11,.3); }

/* ---------- progress bar shimmer ---------- */
.xp-bar-inner, .pasture-bar-inner, .cc-progress-fill,
.quiz-pbar-inner, .checklist-pbar-inner, .sa-fill { position: relative; overflow: hidden; }
.xp-bar-inner::after, .pasture-bar-inner::after, .cc-progress-fill::after,
.quiz-pbar-inner::after, .checklist-pbar-inner::after, .sa-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-120%); animation: f4g-shimmer 2.8s ease-in-out infinite;
}

/* ---------- streak + badges ---------- */
.streak-circle.today { animation: f4g-pulse 2.2s ease-in-out infinite; }
.badge-icon-wrap.unlocked, .badge-icon-lg.unlocked { position: relative; overflow: hidden; }
.badge-icon-wrap.unlocked::after, .badge-icon-lg.unlocked::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: f4g-sheen 5.5s ease-in-out infinite;
}

/* ---------- quiz answer feedback ---------- */
.option-btn.correct { animation: f4g-pop .36s cubic-bezier(.18,1.25,.4,1) both; }
.option-btn.wrong   { animation: f4g-shake .38s ease both; }
.explanation-box.show { animation: f4g-rise .26s ease both; }
.next-btn.show        { animation: f4g-pop .3s cubic-bezier(.18,1.25,.4,1) both; }
.quiz-results         { animation: f4g-modal-in .5s cubic-bezier(.18,1.25,.4,1) both; }

/* ---------- toast + modals ---------- */
.xp-toast { animation: f4g-pop .45s cubic-bezier(.18,1.35,.4,1) both; }
.modal-overlay { animation: f4g-fade .22s ease both; }
.modal-box     { animation: f4g-modal-in .48s cubic-bezier(.18,1.25,.4,1) both; }
.modal-emoji, .badge-modal-icon { position: relative; }
.modal-emoji::after, .badge-modal-icon::after {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 2px solid var(--blue-light); opacity: 0;
  animation: f4g-ring 1.8s ease-out infinite;
}
.badge-modal-icon::after { border-color: var(--amber); }

/* ---------- confetti (geometric shapes only — no emoji) ---------- */
.f4g-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
.f4g-confetti i {
  position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: 0;
  animation: f4g-burst .95s cubic-bezier(.15,.6,.3,1) forwards;
}
.f4g-confetti i.round { border-radius: 50%; }
.f4g-confetti i.bar   { width: 4px; height: 15px; border-radius: 2px; }

/* ---------- milestone notice ---------- */
.f4g-notice {
  position: fixed; left: 30px; bottom: 30px; z-index: 9999; max-width: 320px;
  background: var(--sidebar-bg); color: #fff; border-radius: var(--radius);
  padding: 14px 20px; box-shadow: var(--shadow-lg);
  animation: f4g-notice-in .4s cubic-bezier(.18,1.25,.4,1) both;
}
.f4g-notice-title { font-weight: 800; font-size: 15px; }
.f4g-notice-sub   { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 3px; }
.f4g-notice.out   { opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
@media (max-width: 768px) { .f4g-notice { left: 16px; right: 16px; max-width: none; } }

/* ---------- number tick ---------- */
.stat-value.f4g-ticking { color: var(--blue); }

/* =========================================================================
   PREPARED EVENT AI
   Reuses .widget / .form-group / .planner-* wherever possible; these are the
   few extra pieces that tab needs.
   ========================================================================= */
.pe-layout { display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .pe-layout { grid-template-columns: 1fr; } }

.pe-drop {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 28px 20px;
  text-align: center; cursor: pointer; background: var(--bg);
  transition: border-color .2s, background .2s, transform .15s;
}
.pe-drop:hover, .pe-drop.drag { border-color: var(--blue); background: #f0f9ff; transform: translateY(-2px); }
.pe-drop .icon-svg { width: 26px; height: 26px; color: var(--blue); }
.pe-drop-title { font-weight: 800; font-size: 15px; margin-top: 8px; }
.pe-drop-sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pe-file {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 12px; font-size: 13px; font-weight: 600;
  animation: f4g-pop .3s cubic-bezier(.18,1.25,.4,1) both;
}
.pe-file .icon-svg { color: var(--green); }
.pe-file-size { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 12px; }

.pe-thinking { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.pe-thinking span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: f4g-dots 1.2s infinite; }
.pe-thinking span:nth-child(2) { animation-delay: .15s; }
.pe-thinking span:nth-child(3) { animation-delay: .3s; }

.pe-score-banner {
  border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 20px;
  border: 2px solid var(--green); background: #dcfce7; color: #166534;
  animation: f4g-modal-in .5s cubic-bezier(.18,1.25,.4,1) both;
}
.pe-score-banner.flagged { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.pe-score-num { font-size: 34px; font-weight: 900; line-height: 1.1; }
.pe-score-label { font-size: 13px; font-weight: 700; margin-top: 2px; }
.pe-score-note { font-size: 13px; margin-top: 10px; line-height: 1.5; }

.pe-flag {
  display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px;
}
.pe-flag.fail    { border-left-color: var(--red); }
.pe-flag.unclear { border-left-color: var(--amber); }
.pe-flag.pass    { border-left-color: var(--green); }
.pe-flag-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.pe-flag-body  { font-size: 13px; color: var(--muted); line-height: 1.55; }
.pe-flag-fix   { font-size: 13px; color: var(--text); line-height: 1.55; margin-top: 6px; }
.pe-flag-pts {
  margin-left: auto; flex-shrink: 0; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 800; background: #fee2e2; color: #991b1b;
}
.pe-flag.pass .pe-flag-pts    { background: #dcfce7; color: #166534; }
.pe-flag.unclear .pe-flag-pts { background: #fef9c3; color: #854d0e; }

.pe-section-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px; }
.pe-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pe-section-name { font-weight: 700; font-size: 14px; }
.pe-level-pill { margin-left: auto; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 800; }
.pe-level-pill.exceeds { background: #dcfce7; color: #166534; }
.pe-level-pill.meets   { background: #dbeafe; color: var(--blue-dark); }
.pe-level-pill.below   { background: #fef9c3; color: #854d0e; }
.pe-level-pill.little  { background: #fee2e2; color: #991b1b; }

.pe-list { display: flex; flex-direction: column; gap: 8px; }
.pe-list-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.pe-list-row .icon-svg { color: var(--blue); flex-shrink: 0; margin-top: 3px; }

.pe-disclaimer {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  border-top: 1px solid var(--border); margin-top: 24px; padding-top: 14px;
}

.pe-history-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; cursor: pointer;
}
.pe-history-row:last-child { border-bottom: none; }
.pe-history-row:hover { color: var(--blue); }
.pe-history-meta { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .f4g-confetti { display: none !important; }
}
/* =========================================================================
   FARM4GLASS — LANDING PAGE (v2)
   Scoped to #landingPage, so the signed-in portal is untouched.
   Blue stays the brand color. No emoji. Montserrat throughout.
   ========================================================================= */

/* ---------- canvas ---------- */
#landingPage {
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(180deg, #f7fbff 0%, #eaf2fb 26%, #d3e5f6 58%, #a9cde9 82%, #7fb4dd 100%);
  color: #0a1a2b;
}

/* animated aurora blobs */
#landingPage .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#landingPage .aurora span {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
}
#landingPage .aurora .a1 {
  width: 620px; height: 620px; top: -140px; right: -120px;
  background: radial-gradient(circle, #38bdf8, transparent 70%);
  animation: f4g-drift 18s ease-in-out infinite;
}
#landingPage .aurora .a2 {
  width: 520px; height: 520px; top: 44%; left: -160px;
  background: radial-gradient(circle, #167db5, transparent 70%);
  animation: f4g-drift 22s ease-in-out infinite reverse;
}
#landingPage .aurora .a3 {
  width: 480px; height: 480px; bottom: -120px; right: 18%;
  background: radial-gradient(circle, #7dd3fc, transparent 70%);
  animation: f4g-drift 26s ease-in-out infinite;
}
@keyframes f4g-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -50px) scale(1.12); }
  66%      { transform: translate(-45px, 40px) scale(.94); }
}

/* glossy floating shapes */
#landingPage .float-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
#landingPage .float-shapes span {
  position: absolute; display: block;
  background: linear-gradient(145deg, #a5e3ff 0%, #38bdf8 30%, #167db5 62%, #0f5f8c 100%);
  box-shadow: 0 30px 70px rgba(15,95,140,.38), inset 0 -14px 30px rgba(255,255,255,.4);
  animation: f4g-bob 9s ease-in-out infinite;
}
#landingPage .float-shapes .s1 { width: 128px; height: 92px; left: 46%; top: 92px; border-radius: 50% / 28%; --r: -18deg; }
#landingPage .float-shapes .s2 { width: 186px; height: 94px; right: 3%; top: 78vh; border-radius: 100px 100px 24px 24px; --r: 24deg; animation-delay: 1.4s; }
#landingPage .float-shapes .s3 { width: 72px; height: 72px; left: 5%; top: 62vh; border-radius: 50%; animation-delay: 2.6s; }
#landingPage .float-shapes .s4 { width: 40px; height: 40px; left: 16%; top: 20vh; border-radius: 50%; animation-delay: .8s; opacity: .9; }
@keyframes f4g-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-26px) rotate(var(--r, 0deg)); }
}
@media (max-width: 900px) { #landingPage .float-shapes { display: none; } }

#landingPage > section, #landingPage > nav, #landingPage > footer, #landingPage > .marquee {
  position: relative; z-index: 2;
}

/* ---------- nav ---------- */
#landingPage .top-nav {
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(1.7) blur(16px);
  border-bottom: 1px solid rgba(15,95,140,.10);
  padding: 0 6%;
}
#landingPage .top-nav .nav-links a { color: #0a1a2b; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
#landingPage .top-nav .nav-links a:hover { color: var(--blue); }
#landingPage .top-nav .logo-text { color: #0a1a2b; font-size: 20px; }
#landingPage .top-nav .nav-login-btn {
  background: #0a1a2b; border-radius: 999px; padding: 11px 22px; font-size: 14px;
}
#landingPage .top-nav .nav-login-btn:hover { background: #17334f; transform: translateY(-1px); }

/* ---------- shared bits ---------- */
#landingPage .section-tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-dark);
  background: rgba(255,255,255,.75); border: 1px solid rgba(22,125,181,.22);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 20px;
}
#landingPage .section-tag.light {
  color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3);
}
#landingPage .section-head { max-width: 1180px; margin: 0 auto 52px; }
#landingPage .section-head.center { text-align: center; }
#landingPage .section-head h2 {
  font-size: clamp(36px, 5vw, 60px); font-weight: 900; letter-spacing: -.035em;
  line-height: 1.02; color: #0a1a2b;
}

#landingPage .btn-primary {
  background: #0a1a2b; color: #fff; border-radius: 999px; padding: 17px 36px;
  font-size: 16px; box-shadow: 0 16px 34px rgba(10,26,43,.24);
}
#landingPage .btn-primary:hover { background: #17334f; transform: translateY(-2px); }
#landingPage .btn-ghost {
  color: #0a1a2b; border: 1.5px solid rgba(10,26,43,.2); border-radius: 999px;
  padding: 16px 32px; background: rgba(255,255,255,.5);
}
#landingPage .btn-ghost:hover { border-color: #0a1a2b; background: #fff; }

/* ---------- HERO ---------- */
#landingPage .landing-hero {
  background: transparent; color: #0a1a2b; text-align: left;
  max-width: 1280px; margin: 0 auto; padding: 92px 6% 96px;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center;
  min-height: 84vh;
}
#landingPage .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(22,125,181,.24);
  color: var(--blue-dark); font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 26px;
  animation: f4g-rise .6s cubic-bezier(.2,.7,.3,1) both;
}
#landingPage .hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(5,150,105,.6); animation: f4g-ping 2s infinite;
}
@keyframes f4g-ping {
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(5,150,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}

/* kinetic headline — each word rises in */
#landingPage .hero-title {
  font-size: clamp(54px, 8vw, 112px); font-weight: 900;
  letter-spacing: -.045em; line-height: .92; margin: 0; max-width: none;
}
#landingPage .hero-title .w {
  display: inline-block;
  animation: f4g-word-in .8s cubic-bezier(.16,1,.3,1) both;
}
#landingPage .hero-title .w:nth-child(1) { animation-delay: .05s; }
#landingPage .hero-title .w:nth-child(2) { animation-delay: .13s; color: var(--blue); }
#landingPage .hero-title .w:nth-child(3) { animation-delay: .21s; }
#landingPage .hero-title .hero-script {
  display: block; margin-top: 8px; font-size: clamp(40px, 5.4vw, 76px);
  animation-delay: .32s;
  background: linear-gradient(100deg, #167db5, #38bdf8, #0f5f8c, #167db5);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: f4g-word-in .8s .32s cubic-bezier(.16,1,.3,1) both, f4g-sweep 7s linear infinite 1.1s;
}
@keyframes f4g-word-in {
  from { opacity: 0; transform: translateY(46px) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes f4g-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

#landingPage .hero-subtitle {
  margin: 28px 0 0; max-width: 540px; color: #23415e;
  font-size: 19px; line-height: 1.65; text-align: left;
  animation: f4g-rise .7s .42s cubic-bezier(.2,.7,.3,1) both;
}
#landingPage .hero-btns {
  justify-content: flex-start; margin-top: 36px;
  animation: f4g-rise .7s .5s cubic-bezier(.2,.7,.3,1) both;
}

#landingPage .hero-stats-row {
  display: flex; gap: 40px; margin-top: 52px; flex-wrap: wrap;
  animation: f4g-rise .7s .6s cubic-bezier(.2,.7,.3,1) both;
}
#landingPage .hs-item { display: flex; flex-direction: column; }
#landingPage .hs-num {
  font-size: 36px; font-weight: 900; letter-spacing: -.03em; color: var(--blue-dark); line-height: 1;
}
#landingPage .hs-lbl { font-size: 12px; font-weight: 700; color: #4a6c8c; margin-top: 6px; letter-spacing: .02em; }

/* hero visual */
#landingPage .hero-visual { position: relative; min-height: 500px; }
#landingPage .hero-photo {
  position: absolute; border-radius: 50%; overflow: hidden;
  border: 7px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 70px rgba(15,95,140,.3);
  animation: f4g-bob 10s ease-in-out infinite;
}
#landingPage .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#landingPage .hero-photo.p1 { width: 310px; height: 310px; right: 4%; top: 0; }
#landingPage .hero-photo.p2 { width: 240px; height: 240px; right: 34%; bottom: 6%; animation-delay: 1.9s; }

#landingPage .hero-badge {
  position: absolute; right: 0; bottom: 18%;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.95); border-radius: 20px;
  padding: 16px 20px; min-width: 210px;
  box-shadow: 0 22px 50px rgba(15,95,140,.24);
  animation: f4g-bob 8s ease-in-out infinite .6s;
}
#landingPage .hb-top { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #4a6c8c; }
#landingPage .hb-main { font-size: 17px; font-weight: 800; color: #0a1a2b; margin: 5px 0 10px; }
#landingPage .hb-bar { height: 7px; border-radius: 999px; background: rgba(22,125,181,.16); overflow: hidden; }
#landingPage .hb-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  width: 0; animation: f4g-fill 2.6s cubic-bezier(.2,.8,.2,1) 1s forwards;
}
@keyframes f4g-fill { to { width: 72%; } }

@media (max-width: 1000px) {
  #landingPage .landing-hero { grid-template-columns: 1fr; padding: 76px 7% 72px; min-height: 0; }
  #landingPage .hero-visual { min-height: 330px; }
  #landingPage .hero-photo.p1 { width: 196px; height: 196px; right: 2%; }
  #landingPage .hero-photo.p2 { width: 150px; height: 150px; right: 44%; }
  #landingPage .hero-badge { bottom: 4%; left: 0; right: auto; }
}

/* ---------- MARQUEE ---------- */
#landingPage .marquee {
  background: #0a1a2b; padding: 20px 0; overflow: hidden;
  transform: rotate(-1.2deg) scale(1.03); margin: 10px 0 90px;
}
#landingPage .marquee-track {
  display: flex; align-items: center; gap: 30px; width: max-content;
  animation: f4g-marquee 34s linear infinite;
}
#landingPage .marquee-track span {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; white-space: nowrap;
}
#landingPage .marquee-track i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-light); flex-shrink: 0; }
@keyframes f4g-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- FEATURES (bento) ---------- */
#landingPage .features-section { padding: 20px 6% 110px; max-width: 1280px; margin: 0 auto; background: transparent; }
#landingPage .features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto;
}
#landingPage .feature-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 26px; padding: 34px;
  box-shadow: 0 16px 44px rgba(15,95,140,.13);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s;
}
#landingPage .feature-card.wide { grid-column: span 2; }
#landingPage .feature-card:hover {
  transform: translateY(-8px); box-shadow: 0 30px 70px rgba(15,95,140,.24); background: rgba(255,255,255,.95);
}
#landingPage .feature-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
#landingPage .feature-card:hover::before { width: 100%; }
#landingPage .fc-num {
  display: block; font-size: 13px; font-weight: 900; letter-spacing: .1em;
  color: var(--blue); margin-bottom: 14px;
}
#landingPage .feature-card h3 { font-size: 22px; font-weight: 800; color: #0a1a2b; margin-bottom: 10px; letter-spacing: -.02em; }
#landingPage .feature-card p { color: #3d5f80; font-size: 14.5px; line-height: 1.65; }
#landingPage .feature-card.accent {
  background: linear-gradient(150deg, #167db5, #0f5f8c);
  border-color: rgba(255,255,255,.2);
}
#landingPage .feature-card.accent h3 { color: #fff; }
#landingPage .feature-card.accent p { color: rgba(255,255,255,.85); }
#landingPage .feature-card.accent .fc-num { color: var(--blue-light); }
@media (max-width: 900px) {
  #landingPage .features-grid { grid-template-columns: 1fr; }
  #landingPage .feature-card.wide { grid-column: span 1; }
}

/* ---------- ABOUT ---------- */
#landingPage .about-section {
  background: linear-gradient(135deg, #0f5f8c 0%, #167db5 52%, #38bdf8 130%);
  border-radius: 44px; max-width: 1180px; margin: 0 auto 110px; padding: 84px 64px;
  box-shadow: 0 36px 90px rgba(15,95,140,.32); position: relative; overflow: hidden;
}
#landingPage .about-section::after {
  content: ""; position: absolute; width: 460px; height: 460px; right: -120px; top: -140px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
  animation: f4g-drift 20s ease-in-out infinite;
}
#landingPage .about-inner { position: relative; z-index: 1; }
#landingPage .about-text h2 { color: #fff; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.035em; line-height: 1.04; }
#landingPage .about-text p { color: rgba(255,255,255,.85); }
#landingPage .about-section .btn-primary { background: #fff; color: #0a1a2b; box-shadow: 0 16px 34px rgba(0,0,0,.18); }
#landingPage .about-section .btn-primary:hover { background: #eaf5fd; }
#landingPage .animal-showcase {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(8px);
}
#landingPage .at-dot {
  display: block; width: 26px; height: 26px; margin: 0 auto 8px; border-radius: 50%;
  background: linear-gradient(145deg, #a5e3ff, #167db5);
  box-shadow: inset 0 -4px 8px rgba(255,255,255,.4);
}
#landingPage .at-dot.big { width: 40px; height: 40px; box-shadow: 0 0 0 6px rgba(255,255,255,.22), inset 0 -5px 10px rgba(255,255,255,.4); }
@media (max-width: 900px) {
  #landingPage .about-section { border-radius: 28px; padding: 56px 26px; margin: 0 16px 80px; }
}

/* ---------- STORY ---------- */
#landingPage .story-section { background: transparent; padding: 0 6% 110px; text-align: left; }
#landingPage .story-container { max-width: 860px; margin: 0 auto; }
#landingPage .story-section h2 {
  font-size: clamp(34px, 4.6vw, 54px); color: #0a1a2b; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 28px;
}
#landingPage .story-section p { color: #3d5f80; font-size: 17px; line-height: 1.8; margin-bottom: 20px; }
#landingPage .story-mission {
  border-left: 4px solid var(--blue); padding-left: 22px;
  font-size: 19px !important; font-weight: 700; color: #0a1a2b !important;
}

/* ---------- TEAM + GUESTS ---------- */
#landingPage .team-section,
#landingPage .guests-section { background: transparent; padding: 0 6% 110px; }
#landingPage .team-grid,
#landingPage .guests-grid { max-width: 1180px; margin: 0 auto; gap: 22px; }
#landingPage .team-card,
#landingPage .guest-card {
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 26px; padding: 34px;
  box-shadow: 0 16px 44px rgba(15,95,140,.13);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
#landingPage .team-card:hover,
#landingPage .guest-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(15,95,140,.24); }
#landingPage .team-card img,
#landingPage .guest-card img {
  width: 132px; height: 132px; border: 4px solid #fff;
  box-shadow: 0 0 0 3px rgba(22,125,181,.35), 0 14px 30px rgba(15,95,140,.2);
}
#landingPage .team-card h3,
#landingPage .guest-card h3 { color: #0a1a2b; font-size: 20px; font-weight: 800; }
#landingPage .team-card span,
#landingPage .guest-role { color: var(--blue); font-size: 13px; }
#landingPage .team-card p,
#landingPage .guest-card p { color: #3d5f80; font-size: 14px; line-height: 1.7; }
#landingPage .guests-sub { color: #3d5f80; margin: 14px auto 0; }

/* ---------- FINAL CTA ---------- */
#landingPage .cta-section { padding: 0 6% 100px; }
#landingPage .cta-inner {
  max-width: 1180px; margin: 0 auto; text-align: center;
  background: rgba(255,255,255,.8); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.95); border-radius: 40px; padding: 76px 40px;
  box-shadow: 0 26px 70px rgba(15,95,140,.18);
}
#landingPage .cta-inner h2 {
  font-size: clamp(34px, 4.8vw, 58px); font-weight: 900; letter-spacing: -.035em; color: #0a1a2b;
}
#landingPage .cta-inner p { color: #3d5f80; font-size: 18px; margin: 16px 0 34px; }

/* ---------- FOOTER ---------- */
#landingPage .landing-footer {
  background: transparent; color: #2c4a68; font-size: 13px;
  border-top: 1px solid rgba(15,95,140,.16); padding: 28px 6%;
}

/* ---------- SCROLL REVEAL ---------- */
#landingPage .reveal { opacity: 0; transform: translateY(34px); }
#landingPage .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  #landingPage .aurora span,
  #landingPage .float-shapes span,
  #landingPage .hero-photo,
  #landingPage .hero-badge,
  #landingPage .marquee-track,
  #landingPage .hero-title .w,
  #landingPage .hero-title .hero-script { animation: none !important; }
  #landingPage .hero-title .hero-script { color: var(--blue); -webkit-text-fill-color: var(--blue); }
  #landingPage .reveal { opacity: 1; transform: none; }
  #landingPage .hb-bar span { width: 72%; }
}
/* =========================================================================
   FARM4GLASS — STUDY PORTAL (v2)
   Brings the landing page aesthetic inside: blue gradient canvas, glass
   cards, pill controls, tighter typography.

   Scoped to #portal, so the landing page is untouched. No markup changes
   needed — every selector already exists in your HTML.
   ========================================================================= */

/* ---------- canvas ---------- */
#portal {
  background:
    radial-gradient(900px 620px at 82% -6%, rgba(56,189,248,.16), transparent 62%),
    radial-gradient(760px 560px at 6% 52%, rgba(22,125,181,.10), transparent 62%),
    linear-gradient(180deg, #f7fbff 0%, #eef5fc 40%, #e3eefa 100%);
  background-attachment: fixed;
}
#portal .main { background: transparent; }

/* ---------- sidebar: deep blue gradient, pill nav ---------- */
#portal .sidebar {
  background: linear-gradient(170deg, #0a1a2b 0%, #0f5f8c 62%, #167db5 130%);
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 22px 14px;
}
#portal .sidebar-logo { border-bottom: 1px solid rgba(255,255,255,.14); }
#portal .logo-text { letter-spacing: -.02em; }

#portal .nav-btn {
  border-radius: 999px; padding: 11px 16px; font-size: 14.5px;
  color: rgba(255,255,255,.72); letter-spacing: -.01em;
}
#portal .nav-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
#portal .nav-btn.active {
  background: rgba(255,255,255,.95); color: #0a1a2b; font-weight: 800;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
#portal .nav-btn.active::before { display: none; }

#portal .sidebar-animal {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); border-radius: 20px;
}
#portal .logout-btn { border-radius: 999px; }

/* ---------- typography ---------- */
#portal h1 { letter-spacing: -.035em; color: #0a1a2b; }
#portal .section-title { letter-spacing: -.02em; color: #0a1a2b; font-size: 21px; }
#portal .page-sub { color: #4a6c8c; font-size: 15.5px; }
#portal .dash-header h1 { font-size: clamp(32px, 3.6vw, 44px); }

/* ---------- glass card treatment (everything shares it) ---------- */
#portal .stat-card,
#portal .widget,
#portal .course-card-new,
#portal .pasture-row,
#portal .lesson-row,
#portal .lb-row,
#portal .quiz-header,
#portal .quiz-question-card,
#portal .quiz-results,
#portal .vl-info,
#portal .profile-card,
#portal .planner-summary,
#portal .planner-week-card,
#portal .analytics-course-row,
#portal .rec-card,
#portal .kpi-detail,
#portal .kpi-list-item,
#portal .admin-panel-body,
#portal .admin-course-btn,
#portal .calendar-event-card,
#portal .blog-card,
#portal .pe-section-card,
#portal .pe-flag,
#portal .exam-setup-card,
#portal .exam-header {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(15,95,140,.12);
}
#portal .stat-card,
#portal .widget,
#portal .course-card-new,
#portal .quiz-question-card,
#portal .quiz-results,
#portal .profile-card,
#portal .planner-summary,
#portal .kpi-detail,
#portal .admin-panel-body,
#portal .exam-setup-card { border-radius: 26px; }
#portal .pasture-row,
#portal .lesson-row,
#portal .lb-row,
#portal .planner-week-card,
#portal .analytics-course-row,
#portal .rec-card,
#portal .calendar-event-card,
#portal .pe-flag,
#portal .pe-section-card,
#portal .kpi-list-item,
#portal .admin-course-btn { border-radius: 18px; }

#portal .stat-card:hover,
#portal .course-card-new:hover,
#portal .blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 62px rgba(15,95,140,.2);
  background: rgba(255,255,255,.96);
}

/* ---------- stats ---------- */
#portal .stat-value { font-size: 38px; letter-spacing: -.035em; color: #0a1a2b; }
#portal .stat-label {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #4a6c8c;
}

/* ---------- animal / level card: blue instead of amber ---------- */
#portal .animal-card {
  background: linear-gradient(140deg, #0f5f8c 0%, #167db5 58%, #38bdf8 130%);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(15,95,140,.28);
  position: relative; overflow: hidden;
}
#portal .animal-card::after {
  content: ""; position: absolute; width: 300px; height: 300px; right: -90px; top: -110px;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 68%);
}
#portal .ac-name { color: #fff; font-size: 24px; letter-spacing: -.02em; }
#portal .ac-tagline { color: rgba(255,255,255,.82); }
#portal .ac-level { color: #cbe9fb; }
#portal .ac-next-label { color: rgba(255,255,255,.7); }
#portal .ac-next-name { color: #fff; font-weight: 700; }

/* ---------- buttons: pills ---------- */
#portal .btn-primary,
#portal .barn-btn,
#portal .next-btn {
  background: linear-gradient(135deg, #167db5, #0f5f8c);
  border-radius: 999px; padding: 14px 30px;
  box-shadow: 0 14px 30px rgba(15,95,140,.28);
}
#portal .btn-primary:hover,
#portal .barn-btn:hover,
#portal .next-btn:hover {
  background: linear-gradient(135deg, #1f92cf, #12699a);
  transform: translateY(-2px);
}
#portal .complete-btn {
  background: linear-gradient(135deg, #059669, #047857);
  border-radius: 999px; padding: 14px 30px;
  box-shadow: 0 14px 30px rgba(5,150,105,.28);
}
#portal .admin-btn-sm { border-radius: 999px; padding: 9px 18px; }
#portal .admin-btn-sm:not(.danger):not(.ghost) { background: linear-gradient(135deg, #167db5, #0f5f8c); }
#portal .admin-btn-sm.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }

/* pill tabs + filters */
#portal .cat-btn,
#portal .lb-tab,
#portal .admin-subtab-btn {
  background: rgba(255,255,255,.8); border: 1px solid rgba(15,95,140,.16);
  border-radius: 999px; color: #4a6c8c; backdrop-filter: blur(8px);
}
#portal .cat-btn:hover,
#portal .lb-tab:hover,
#portal .admin-subtab-btn:hover { border-color: var(--blue); color: var(--blue-dark); background: #fff; }
#portal .cat-btn.active,
#portal .lb-tab.active,
#portal .admin-subtab-btn.active {
  background: #0a1a2b; border-color: #0a1a2b; color: #fff;
  box-shadow: 0 10px 22px rgba(10,26,43,.22);
}

/* ---------- inputs ---------- */
#portal input[type="text"],
#portal input[type="number"],
#portal input[type="date"],
#portal input[type="file"],
#portal select,
#portal textarea,
#portal #courseSearch {
  border-radius: 14px; border: 1.5px solid rgba(15,95,140,.18);
  background: rgba(255,255,255,.9);
}
#portal input:focus,
#portal select:focus,
#portal textarea:focus,
#portal #courseSearch:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(22,125,181,.14);
  outline: none;
}
#portal .form-group label {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #4a6c8c;
}

/* ---------- course cards: accent bar sweep like the landing bento ---------- */
#portal .course-card-new { position: relative; overflow: hidden; }
#portal .course-card-new::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; z-index: 2;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
#portal .course-card-new:hover::before { width: 100%; }
#portal .cc-title { font-size: 21px; letter-spacing: -.02em; color: #0a1a2b; }
#portal .cc-desc { color: #4a6c8c; }
#portal .cc-icon { border-radius: 16px; }

/* ---------- lesson rows ---------- */
#portal .lesson-row:hover { border-color: var(--blue); background: rgba(240,249,255,.95); }
#portal .lesson-row.done { border-color: rgba(134,239,172,.9); background: rgba(240,253,244,.9); }
#portal .lr-title { letter-spacing: -.01em; }
#portal .lr-xp {
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border-radius: 999px;
}

/* ---------- leaderboard ---------- */
#portal .lb-row.you {
  border: 2px solid var(--blue);
  background: linear-gradient(135deg, rgba(240,249,255,.98), rgba(219,234,254,.9));
}
#portal .lb-val { font-size: 22px; letter-spacing: -.02em; }
#portal .lb-avatar { font-size: 13px; font-weight: 800; color: var(--blue-dark); }

/* ---------- profile ---------- */
#portal .profile-avatar {
  background: linear-gradient(140deg, #167db5, #0f5f8c);
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 14px 30px rgba(15,95,140,.24);
}
#portal .profile-name { letter-spacing: -.03em; }

/* ---------- KPI database ---------- */
#portal .kpi-list-item.active {
  background: linear-gradient(135deg, #167db5, #0f5f8c);
  border-color: transparent; color: #fff;
  box-shadow: 0 12px 26px rgba(15,95,140,.26);
}
#portal .kpi-detail h2 { letter-spacing: -.03em; }
#portal .kpi-section h4 { color: var(--blue-dark); letter-spacing: .1em; }

/* ---------- planner / analytics ---------- */
#portal .planner-summary-stat .val { font-size: 28px; letter-spacing: -.03em; }
#portal .planner-ontrack,
#portal .planner-warning { border-radius: 16px; }
#portal .analytics-score-pill { border-radius: 999px; }
#portal .analytics-xp-bar { border-radius: 8px 8px 0 0; }

/* ---------- exam ---------- */
#portal .exam-cta {
  background: linear-gradient(135deg, #0f5f8c, #167db5 60%, #38bdf8 130%);
  border: 1px solid rgba(255,255,255,.2); border-radius: 26px;
  box-shadow: 0 24px 56px rgba(15,95,140,.26);
}
#portal .exam-cta-title { color: #fff; }
#portal .exam-cta-desc { color: rgba(255,255,255,.82); }
#portal .exam-cta .btn-primary { background: #fff; color: #0a1a2b; }
#portal .exam-cta .btn-primary:hover { background: #eaf5fd; }

/* ---------- quiz ---------- */
#portal .option-btn {
  background: rgba(255,255,255,.9); border-radius: 16px;
  border: 2px solid rgba(15,95,140,.14);
}
#portal .option-btn:hover:not(:disabled) { border-color: var(--blue); background: #f0f9ff; }
#portal .question-text { letter-spacing: -.02em; }
#portal .results-title { letter-spacing: -.03em; font-size: 34px; }
#portal .results-xp {
  background: linear-gradient(135deg, #167db5, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- calendar / blog ---------- */
#portal .calendar-event-card { border-left-width: 5px; }
#portal .blog-card { border-radius: 26px; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
#portal .blog-card-body h3 { letter-spacing: -.02em; }

/* ---------- prepared event AI ---------- */
#portal .pe-drop { border-radius: 20px; border-color: rgba(15,95,140,.22); background: rgba(255,255,255,.6); }
#portal .pe-drop:hover { background: #fff; }
#portal .pe-score-banner { border-radius: 26px; }
#portal .pe-level-pill { border-radius: 999px; }

/* ---------- modals + toast ---------- */
#portal .modal-box, .modal-box { border-radius: 32px; }
.xp-toast {
  background: linear-gradient(135deg, #0a1a2b, #0f5f8c);
  border-radius: 999px; box-shadow: 0 20px 44px rgba(10,26,43,.32);
}

/* ---------- mobile header ---------- */
#portal .mobile-header {
  background: linear-gradient(120deg, #0a1a2b, #0f5f8c);
  border-radius: 0 0 22px 22px;
}

/* ---------- empty / loading states ---------- */
#portal .admin-empty-state,
#portal .lb-loading { color: #6b8aa8; }

/* =========================================================================
   FARM4GLASS — MOBILE & iOS LAYER
   Paste this at the VERY END of style.css (after the portal v2 block).

   Additive only. Every rule is inside a max-width media query or is a
   safe-area/overflow guard, so nothing about the desktop look changes.
   Same colors, same fonts, same components — they just stop getting cut off.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. GLOBAL GUARDS
   ------------------------------------------------------------------------- */

/* Stop iOS from inflating text in landscape */
html { -webkit-text-size-adjust: 100%; }

/* Nothing should ever push the page wider than the phone */
body { overflow-x: hidden; }
img, iframe, video, canvas, table { max-width: 100%; }

/* A flex child (.main) will happily grow past its parent unless told not to.
   This is what lets a wide grid inside the portal blow out the whole page. */
.main { min-width: 0; }

/* 100vh on iOS Safari doesn't account for the URL bar, so the bottom of the
   page sits below the fold. 100dvh does. */
@supports (height: 100dvh) {
  body, #portal, .main { min-height: 100dvh; }
}

/* Notch + home bar. Requires viewport-fit=cover in the meta tag. */
.top-nav {
  height: auto;
  min-height: calc(68px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
#landingPage { padding-top: calc(68px + env(safe-area-inset-top)); }

/* -------------------------------------------------------------------------
   1. LANDING NAV — HAMBURGER
   The three-line button is created by the JS snippet; these are its styles.
   ------------------------------------------------------------------------- */

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .top-nav { position: fixed; }
  #landingPage .top-nav { padding-left: 18px; padding-right: 12px; }

  .nav-logo { gap: 9px; }
  .nav-logo .logo-icon { width: 32px; height: 32px; }
  #landingPage .top-nav .logo-text { font-size: 17px; }

  /* the button itself — 44px tap target, three bars that fold into an X */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 0 10px;
    background: none; border: none; cursor: pointer; flex-shrink: 0;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2.5px; border-radius: 2px;
    background: #0a1a2b;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s;
  }
  .top-nav.open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .top-nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .top-nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* the panel that expands underneath */
  .top-nav .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 20px 16px;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(1.7) blur(16px);
    border-bottom: 1px solid rgba(15,95,140,.12);
    box-shadow: 0 18px 40px rgba(15,95,140,.18);
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .34s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  }
  .top-nav.open .nav-links {
    max-height: 75vh; opacity: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #landingPage .top-nav .nav-links a {
    font-size: 16px; padding: 15px 2px;
    border-bottom: 1px solid rgba(15,95,140,.09);
  }
  .top-nav .nav-links .nav-login-btn {
    width: 100%; margin-top: 14px; padding: 14px; font-size: 15px;
  }

  /* fallback: if the login button sits outside .nav-links in the HTML,
     keep it compact so it still fits beside the hamburger */
  .top-nav > .nav-login-btn {
    margin-left: auto; margin-right: 4px;
    padding: 9px 16px; font-size: 13px;
  }
}

/* -------------------------------------------------------------------------
   2. LANDING PAGE
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {
  #landingPage .landing-hero { padding: 40px 20px 56px; gap: 30px; }
  #landingPage .hero-eyebrow { margin-bottom: 20px; font-size: 12px; }
  #landingPage .hero-title { font-size: clamp(38px, 11.5vw, 58px); letter-spacing: -.03em; }
  #landingPage .hero-title .hero-script { font-size: clamp(30px, 9vw, 46px); }
  #landingPage .hero-subtitle { font-size: 16px; margin-top: 20px; line-height: 1.6; }

  #landingPage .hero-btns { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; }
  #landingPage .hero-btns .btn-primary,
  #landingPage .hero-btns .btn-ghost { width: 100%; text-align: center; padding: 15px 20px; }

  #landingPage .hero-stats-row { gap: 22px 30px; margin-top: 34px; }
  #landingPage .hs-num { font-size: 27px; }

  /* THE BIG ONE: the hero photos and badge are position:absolute, and
     #landingPage has overflow-x:hidden — so on a phone they were being
     clipped off the right edge. Put them back in normal flow. */
  #landingPage .hero-visual {
    position: static; min-height: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 16px;
  }
  #landingPage .hero-photo {
    position: static; inset: auto;
    width: 40vw; height: 40vw; max-width: 168px; max-height: 168px;
    border-width: 5px; flex-shrink: 0;
  }
  #landingPage .hero-badge {
    position: static; inset: auto;
    flex-basis: 100%; min-width: 0; width: 100%;
  }

  /* section rhythm */
  #landingPage .features-section,
  #landingPage .story-section,
  #landingPage .team-section,
  #landingPage .guests-section,
  #landingPage .cta-section { padding-left: 20px; padding-right: 20px; padding-bottom: 68px; }
  #landingPage .section-head { margin-bottom: 34px; }
  #landingPage .section-head h2 { font-size: clamp(28px, 8.5vw, 42px); }
  #landingPage .section-tag { margin-bottom: 16px; font-size: 11px; padding: 6px 13px; }

  #landingPage .feature-card,
  #landingPage .team-card,
  #landingPage .guest-card { padding: 24px; border-radius: 20px; }
  #landingPage .feature-card h3 { font-size: 19px; }

  #landingPage .about-section { padding: 48px 22px; margin: 0 16px 68px; border-radius: 24px; }
  #landingPage .animal-showcase { padding: 22px 16px; gap: 10px; }

  #landingPage .story-section p { font-size: 16px; line-height: 1.75; }
  #landingPage .story-mission { font-size: 17px !important; padding-left: 16px; }

  #landingPage .marquee { margin: 6px 0 60px; padding: 15px 0; }
  #landingPage .marquee-track span { font-size: 17px; }
  #landingPage .marquee-track { gap: 22px; }

  #landingPage .cta-inner { padding: 48px 22px; border-radius: 26px; }
  #landingPage .cta-inner p { font-size: 16px; }

  #landingPage .team-card img,
  #landingPage .guest-card img { width: 108px; height: 108px; }
}

/* -------------------------------------------------------------------------
   3. PORTAL — LAYOUTS WITH NO MOBILE FALLBACK
   These fixed-pixel grid columns were the other source of horizontal cutoff.
   ------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .kpi-layout   { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: repeat(2, 1fr); }
  .planner-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .kpi-list { max-height: 320px; }
  .admin-members-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-members-row { min-width: 600px; }
  .admin-option-inputs { grid-template-columns: 1fr; }
  .admin-field-row input,
  .admin-field-row select { min-width: 0; }
}

/* -------------------------------------------------------------------------
   4. PORTAL — SIDEBAR, SCRIM, HEADER
   ------------------------------------------------------------------------- */

/* scrim behind the open sidebar (element is created by the JS snippet) */
.f4g-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10,26,43,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.f4g-scrim.show { opacity: 1; pointer-events: auto; }
body.f4g-locked { overflow: hidden; }

@media (min-width: 769px) { .f4g-scrim { display: none; } }

@media (max-width: 768px) {
  #portal .sidebar {
    width: min(84vw, 300px);
    padding-top: calc(22px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 0 60px rgba(10,26,43,.45);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  #portal .sidebar-nav { flex-shrink: 0; }
  #portal .nav-btn { padding: 13px 16px; }

  .main { padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }

  #portal .mobile-header {
    margin: -16px -16px 16px;
    padding: calc(13px + env(safe-area-inset-top)) 14px 13px;
    font-size: 16px; gap: 8px;
  }

  /* the portal hamburger — three bars instead of a glyph */
  .hamburger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 0 10px;
    flex-shrink: 0; font-size: 0;
  }
  .hamburger span {
    display: block; width: 22px; height: 2.5px; border-radius: 2px;
    background: #fff;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s;
  }
  .sidebar.open ~ .main .hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .sidebar.open ~ .main .hamburger span:nth-child(2) { opacity: 0; }
  .sidebar.open ~ .main .hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* -------------------------------------------------------------------------
   5. PORTAL — CONTENT
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* iOS zooms the page whenever you focus an input under 16px */
  input, select, textarea, #courseSearch { font-size: 16px !important; }

  /* background-attachment: fixed is buggy on iOS Safari (jumps + scaling) */
  #portal { background-attachment: scroll; }

  /* headings */
  #portal h1, #courses h1, #leaderboard h1, #profile h1 { font-size: 28px; }
  #portal .dash-header h1 { font-size: 28px; }
  #portal .section-title { font-size: 18px; }
  .page-sub, .dash-sub { font-size: 14px; }

  /* dashboard header stacks so the button stops pushing the title out */
  .dash-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 22px; }
  .barn-btn { width: 100%; }

  /* stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 18px 12px; }
  #portal .stat-value { font-size: 26px; }
  #portal .stat-label { font-size: 10px; letter-spacing: .05em; }

  /* level card */
  .animal-card { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .ac-left { flex: 1 1 100%; }
  .ac-emoji { font-size: 42px; }
  #portal .ac-name { font-size: 21px; }
  .ac-right { flex: 1 1 100%; text-align: left; display: flex; align-items: center; gap: 10px; }
  .ac-next-label { margin-bottom: 0; }

  /* widgets */
  .widget { padding: 18px; }
  .widget-header { font-size: 15px; margin-bottom: 14px; }

  .streak-days { gap: 4px; }
  .streak-circle { width: 32px; height: 32px; font-size: 12px; }
  .streak-day-label { font-size: 9px; }
  .streak-count-box { font-size: 30px; }

  .badges-grid { gap: 8px; }
  .badge-icon-wrap { width: 46px; height: 46px; border-radius: 12px; }
  .badge-name { font-size: 9px; }

  /* courses */
  .cat-btn { padding: 7px 14px; font-size: 12px; }
  .category-filters { gap: 8px; margin-bottom: 20px; }
  .cc-body { padding: 20px; }
  #portal .cc-title { font-size: 19px; }
  .search-wrap { max-width: none; }

  /* lessons + video */
  .lesson-row { padding: 15px 16px; gap: 12px; }
  .lr-title { font-size: 15px; }
  .video-container iframe { height: auto; aspect-ratio: 16 / 9; }
  .blog-video iframe { height: auto; aspect-ratio: 16 / 9; }
  .vl-info { padding: 20px; }
  .complete-btn { width: 100%; }

  /* quiz */
  .quiz-header, .quiz-question-card { padding: 20px; }
  .quiz-header h2 { font-size: 21px; }
  .question-text { font-size: 17px; margin-bottom: 20px; }
  .option-btn { padding: 14px 16px; font-size: 15px; }
  .next-btn { width: 100%; }
  .quiz-results { padding: 34px 20px; }
  .results-emoji { font-size: 54px; }
  #portal .results-title { font-size: 26px; }
  .results-btns { flex-direction: column; }
  .results-btns .btn-primary,
  .results-btns .btn-ghost { width: 100%; text-align: center; }

  /* exam */
  .exam-cta { flex-direction: column; align-items: stretch; padding: 18px; gap: 14px; }
  .exam-cta .btn-primary { width: 100%; text-align: center; }
  .exam-header { padding: 16px 18px; }
  .exam-nav-row { gap: 10px; }

  /* leaderboard */
  .lb-row { padding: 14px 16px; gap: 12px; }
  .lb-rank { width: 26px; font-size: 17px; }
  .lb-name { font-size: 15px; }
  #portal .lb-val { font-size: 18px; }

  /* profile */
  .profile-card { flex-direction: column; text-align: center; padding: 24px; gap: 16px; }
  .badges-grid-large { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .badge-icon-lg { width: 58px; height: 58px; border-radius: 15px; }
  .form-group input,
  .planner-form-widget select { max-width: 100%; }

  /* planner + analytics */
  .planner-form-widget { max-width: none; }
  .planner-week-card { padding: 16px 18px; }
  .analytics-course-row { padding: 14px 16px; }

  /* KPI */
  .kpi-detail { padding: 22px; }
  .kpi-detail h2 { font-size: 21px; }

  /* prepared event AI */
  .pe-flag { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .pe-flag-pts { margin-left: 0; }
  .pe-score-banner { padding: 20px; }

  /* modals + toast */
  .modal-box { padding: 36px 24px; }
  .modal-emoji { font-size: 56px; }
  .modal-box h2 { font-size: 24px; }
  .modal-box p { font-size: 15px; margin-bottom: 22px; }

  .xp-toast {
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    text-align: center; font-size: 17px; padding: 13px 20px;
  }
  .f4g-notice { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------------------------
   6. SMALL PHONES (iPhone SE / mini, 375px and under)
   ------------------------------------------------------------------------- */

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 16px 8px; }
  .streak-circle { width: 28px; height: 28px; font-size: 11px; }
  .streak-days { gap: 3px; }
  .badges-grid-large { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid, .planner-summary-grid { grid-template-columns: 1fr; }
  #landingPage .hero-photo { width: 42vw; height: 42vw; }
}


/* =========================================================================
   FARM4GLASS — FARM ACCENTS
   Paste at the END of style.css (after the mobile layer).

   Three accents, nothing more. Blue stays the brand color, Montserrat stays,
   no emoji. Each block is labelled — delete any one you don't like and the
   other two keep working.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ACCENT 1 — Barn watermark on the level card
   A big pale barn sitting behind your animal, on the blue gradient card.
   ------------------------------------------------------------------------- */

#portal .animal-card::before {
  content: "";
  position: absolute; right: -6px; bottom: -20px;
  width: 165px; height: 165px; z-index: 0;
  pointer-events: none; opacity: .13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V11l4-3.5L12 4l5 3.5 4 3.5v10Z'/%3E%3Cpath d='M10 21v-6.5h4V21'/%3E%3Cpath d='m10 14.5 4 6.5M14 14.5l-4 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* keep the text and animal above the watermark */
#portal .animal-card .ac-left,
#portal .animal-card .ac-right { position: relative; z-index: 1; }

@media (max-width: 768px) {
  #portal .animal-card::before { width: 120px; height: 120px; right: -12px; bottom: -22px; }
}

/* -------------------------------------------------------------------------
   ACCENT 2 — Wheat sprig on the landing eyebrows
   Slots into the pill labels you already have above each section heading.
   ------------------------------------------------------------------------- */

#landingPage .section-tag {
  display: inline-flex; align-items: center; gap: 8px;
}
#landingPage .section-tag::before {
  content: ""; width: 13px; height: 13px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M12 12c-2.2 0-4-1.8-4-4 2.2 0 4 1.8 4 4Z'/%3E%3Cpath d='M12 12c2.2 0 4-1.8 4-4-2.2 0-4 1.8-4 4Z'/%3E%3Cpath d='M12 7.5c-2.2 0-4-1.8-4-4 2.2 0 4 1.8 4 4Z'/%3E%3Cpath d='M12 7.5c2.2 0 4-1.8 4-4-2.2 0-4 1.8-4 4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
#landingPage .section-tag.light::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M12 12c-2.2 0-4-1.8-4-4 2.2 0 4 1.8 4 4Z'/%3E%3Cpath d='M12 12c2.2 0 4-1.8 4-4-2.2 0-4 1.8-4 4Z'/%3E%3Cpath d='M12 7.5c-2.2 0-4-1.8-4-4 2.2 0 4 1.8 4 4Z'/%3E%3Cpath d='M12 7.5c2.2 0 4-1.8 4-4-2.2 0-4 1.8-4 4Z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   ACCENT 3 — Pasture hills above the landing footer
   Uses the blue you already end the page on, so it reads as rolling field
   rather than a stock wave divider.
   ------------------------------------------------------------------------- */

#landingPage .landing-footer {
  position: relative;
  border-top: none;
  padding-top: 72px;
}
#landingPage .landing-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 58px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V36c130-22 235 6 360 3s185-27 305-25 195 27 300 23 145-17 235-11v34Z' fill='%23ffffff' fill-opacity='.5'/%3E%3Cpath d='M0 60V46c150-16 250 8 380 5s195-21 315-19 190 22 290 18 130-12 215-7v17Z' fill='%23ffffff' fill-opacity='.42'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
}

@media (max-width: 700px) {
  #landingPage .landing-footer { padding-top: 54px; }
  #landingPage .landing-footer::before { height: 40px; }
}


/* =========================================================================
   FARM4GLASS — HOME PAGE FARM SCENE
   Paste at the VERY END of style.css (after the FARM ACCENTS block).

   Picks up the numbering from your existing accents. Everything is scoped
   to #landingPage and drawn with pseudo-elements, so: no HTML changes, the
   portal is untouched, blue stays the brand color, Montserrat stays, no
   emoji. Each block is labelled — delete any one and the others keep
   working.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ACCENT 4 — Barn behind the hero
   A big pale barn (gambrel roof, cupola, double doors) peeking up from
   behind the hero photos. Watermark opacity, so it reads as texture.
   ------------------------------------------------------------------------- */

#landingPage .landing-hero { position: relative; }
#landingPage .landing-hero::before {
  content: "";
  position: absolute; right: 2%; bottom: -8px; z-index: 0;
  width: clamp(190px, 24vw, 330px); aspect-ratio: 120 / 100;
  pointer-events: none; opacity: .10;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' fill='%230a1a2b'%3E%3Cpath d='M60 4 66 8V16h-2l30 20 18 22V96H8V58L26 36l30-20h-2V8ZM44 96V70c0-4 3-7 7-7h6v33ZM63 96V63h6c4 0 7 3 7 7v26ZM60 30 68 38 60 46 52 38Z' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* -------------------------------------------------------------------------
   ACCENT 5 — Bee drifting across the hero
   Amber body, navy stripes, translucent wings. The flight path is written
   in % of the bee's own size, so it scales down with the bee on a phone.
   ------------------------------------------------------------------------- */

#landingPage .landing-hero::after {
  content: "";
  position: absolute; right: 9%; top: 13%; z-index: 3;
  width: clamp(32px, 3.4vw, 46px); aspect-ratio: 110 / 80;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 80' fill='%230a1a2b'%3E%3Cellipse cx='46' cy='17' rx='19' ry='8.5' fill='%23ffffff' fill-opacity='0.75' transform='rotate(-20 46 17)'/%3E%3Cellipse cx='63' cy='20' rx='15' ry='7' fill='%23ffffff' fill-opacity='0.75' transform='rotate(-4 63 20)'/%3E%3Cellipse cx='54' cy='44' rx='25' ry='17' fill='%23f5b820'/%3E%3Crect x='45' y='30' width='7' height='28' rx='3.5' fill='%230a1a2b'/%3E%3Crect x='61' y='31' width='7' height='26' rx='3.5' fill='%230a1a2b'/%3E%3Cpolygon points='30,36 12,44 30,52' fill='%230a1a2b'/%3E%3Ccircle cx='80' cy='42' r='12' fill='%230a1a2b'/%3E%3Crect x='80' y='16' width='3' height='13' rx='1.5' fill='%230a1a2b' transform='rotate(-28 81 29)'/%3E%3Crect x='88' y='18' width='3' height='13' rx='1.5' fill='%230a1a2b' transform='rotate(12 89 31)'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 6px 10px rgba(15,95,140,.28));
  animation: f4g-bee 24s ease-in-out infinite;
}
@keyframes f4g-bee {
  0%   { transform: translate(0, 0)            rotate(-6deg); }
  12%  { transform: translate(-180%, 60%)      rotate(4deg); }
  26%  { transform: translate(-420%, -30%)     rotate(-5deg); }
  40%  { transform: translate(-260%, 180%)     rotate(6deg); }
  55%  { transform: translate(-560%, 250%)     rotate(-4deg); }
  70%  { transform: translate(-300%, 90%)      rotate(5deg); }
  85%  { transform: translate(-90%, -60%)      rotate(-3deg); }
  100% { transform: translate(0, 0)            rotate(-6deg); }
}

/* -------------------------------------------------------------------------
   ACCENT 6 — Cow and goat grazing on the pasture hills
   Sits on top of the hill divider you already have above the footer.
   Nudge the two percentages if you want them further apart.
   ------------------------------------------------------------------------- */

#landingPage .landing-footer::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 50px;
  pointer-events: none; opacity: .24;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 92' fill='%230a1a2b'%3E%3Crect x='17' y='28' width='5' height='32' rx='2.5' transform='rotate(-12 20 28)'/%3E%3Cellipse cx='15' cy='62' rx='5' ry='7.5'/%3E%3Crect x='22' y='26' width='72' height='38' rx='17'/%3E%3Crect x='30' y='56' width='12' height='28' rx='6'/%3E%3Crect x='48' y='56' width='12' height='28' rx='6'/%3E%3Crect x='70' y='56' width='12' height='28' rx='6'/%3E%3Crect x='86' y='56' width='12' height='28' rx='6'/%3E%3Cellipse cx='44' cy='64' rx='9' ry='7'/%3E%3Crect x='92' y='32' width='30' height='30' rx='13'/%3E%3Cellipse cx='122' cy='54' rx='13' ry='10.5'/%3E%3Cellipse cx='95' cy='35' rx='10' ry='4.5' transform='rotate(-34 95 35)'/%3E%3Cpolygon points='103,36 102,24 108,23 110,36'/%3E%3Cpolygon points='112,36 115,25 120,27 118,38'/%3E%3C/svg%3E")  no-repeat 17% bottom / auto 30px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 92' fill='%230a1a2b'%3E%3Cpolygon points='32,36 27,25 38,32'/%3E%3Crect x='30' y='32' width='58' height='28' rx='13'/%3E%3Crect x='36' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='50' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='68' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='80' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='78' y='18' width='16' height='28' rx='8'/%3E%3Crect x='86' y='12' width='30' height='20' rx='9'/%3E%3Cellipse cx='116' cy='26' rx='8' ry='6.5'/%3E%3Cpolygon points='99,30 110,30 104,44'/%3E%3Cpolygon points='92,15 77,4 74,10 89,20'/%3E%3Cpolygon points='98,17 85,3 81,8 94,21'/%3E%3Cellipse cx='99' cy='29' rx='10' ry='4' transform='rotate(28 99 29)'/%3E%3C/svg%3E") no-repeat 79% bottom / auto 26px;
}

/* -------------------------------------------------------------------------
   ACCENT 7 — Goat on the "about" card
   White silhouette in the bottom-right corner of the blue gradient panel.
   ------------------------------------------------------------------------- */

#landingPage .about-section::before {
  content: "";
  position: absolute; right: 26px; bottom: 14px; z-index: 0;
  width: 160px; aspect-ratio: 140 / 92;
  pointer-events: none; opacity: .13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 92' fill='%23ffffff'%3E%3Cpolygon points='32,36 27,25 38,32'/%3E%3Crect x='30' y='32' width='58' height='28' rx='13'/%3E%3Crect x='36' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='50' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='68' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='80' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='78' y='18' width='16' height='28' rx='8'/%3E%3Crect x='86' y='12' width='30' height='20' rx='9'/%3E%3Cellipse cx='116' cy='26' rx='8' ry='6.5'/%3E%3Cpolygon points='99,30 110,30 104,44'/%3E%3Cpolygon points='92,15 77,4 74,10 89,20'/%3E%3Cpolygon points='98,17 85,3 81,8 94,21'/%3E%3Cellipse cx='99' cy='29' rx='10' ry='4' transform='rotate(28 99 29)'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* -------------------------------------------------------------------------
   ACCENT 8 — Fence rail along the bottom of the closing CTA
   Two rails and a pointed post, tiling across the card.
   ------------------------------------------------------------------------- */

#landingPage .cta-inner { position: relative; overflow: hidden; }
#landingPage .cta-inner::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  pointer-events: none; opacity: .11;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 44' fill='%230a1a2b'%3E%3Crect x='0' y='13' width='96' height='5' rx='2.5'/%3E%3Crect x='0' y='27' width='96' height='5' rx='2.5'/%3E%3Cpolygon points='43.5,6 48,1 52.5,6'/%3E%3Crect x='43.5' y='5' width='9' height='39' rx='2'/%3E%3C/svg%3E") repeat-x center bottom / 96px 44px;
}

/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {
  #landingPage .landing-hero::before { width: 150px; right: -8px; opacity: .07; }
  #landingPage .landing-hero::after  { width: 30px; right: 7%; top: 9%; }
  #landingPage .landing-footer::after {
    height: 38px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 92' fill='%230a1a2b'%3E%3Crect x='17' y='28' width='5' height='32' rx='2.5' transform='rotate(-12 20 28)'/%3E%3Cellipse cx='15' cy='62' rx='5' ry='7.5'/%3E%3Crect x='22' y='26' width='72' height='38' rx='17'/%3E%3Crect x='30' y='56' width='12' height='28' rx='6'/%3E%3Crect x='48' y='56' width='12' height='28' rx='6'/%3E%3Crect x='70' y='56' width='12' height='28' rx='6'/%3E%3Crect x='86' y='56' width='12' height='28' rx='6'/%3E%3Cellipse cx='44' cy='64' rx='9' ry='7'/%3E%3Crect x='92' y='32' width='30' height='30' rx='13'/%3E%3Cellipse cx='122' cy='54' rx='13' ry='10.5'/%3E%3Cellipse cx='95' cy='35' rx='10' ry='4.5' transform='rotate(-34 95 35)'/%3E%3Cpolygon points='103,36 102,24 108,23 110,36'/%3E%3Cpolygon points='112,36 115,25 120,27 118,38'/%3E%3C/svg%3E")  no-repeat 14% bottom / auto 22px,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 92' fill='%230a1a2b'%3E%3Cpolygon points='32,36 27,25 38,32'/%3E%3Crect x='30' y='32' width='58' height='28' rx='13'/%3E%3Crect x='36' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='50' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='68' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='80' y='54' width='9' height='30' rx='4.5'/%3E%3Crect x='78' y='18' width='16' height='28' rx='8'/%3E%3Crect x='86' y='12' width='30' height='20' rx='9'/%3E%3Cellipse cx='116' cy='26' rx='8' ry='6.5'/%3E%3Cpolygon points='99,30 110,30 104,44'/%3E%3Cpolygon points='92,15 77,4 74,10 89,20'/%3E%3Cpolygon points='98,17 85,3 81,8 94,21'/%3E%3Cellipse cx='99' cy='29' rx='10' ry='4' transform='rotate(28 99 29)'/%3E%3C/svg%3E") no-repeat 82% bottom / auto 19px;
  }
  #landingPage .about-section::before { width: 108px; right: 14px; bottom: 10px; opacity: .11; }
  #landingPage .cta-inner::after { height: 34px; background-size: 74px 34px; }
}

/* -------------------------------------------------------------------------
   REDUCED MOTION — the bee parks itself
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #landingPage .landing-hero::after { animation: none !important; }
}



/* =========================================================================
   FARM4GLASS — WALKING ANIMALS + FIVE-FOUNDER GRID
   Paste at the VERY END of style.css (after the HOME PAGE FARM SCENE block).

   Same rules as before: #landingPage only, no changes to the portal, blue
   stays the brand color, no emoji. ACCENT 9 needs no HTML change; the team
   grid rule goes with the two new cards in index.html.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ACCENT 9 — Cow and goat walking along the top of the marquee
   The bar keeps its overflow clipping via clip-path instead of overflow,
   with the top side left open (-78px) so the animals can stand above it.
   They inherit the bar's -1.2deg tilt, so they stay glued to it.
   ------------------------------------------------------------------------- */

#landingPage .marquee {
  overflow: visible;
  clip-path: inset(-78px 0 0 0);
}

#landingPage .marquee::before,
#landingPage .marquee::after {
  content: "";
  position: absolute; left: 0; z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 5px 9px rgba(15,95,140,.26));
}

/* the cow — slower, out in front */
#landingPage .marquee::before {
  bottom: calc(100% - 4px);
  width: 84px; aspect-ratio: 142 / 92;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 92'%3E%3Crect x='17' y='28' width='5' height='32' rx='2.5' fill='%230a1a2b' transform='rotate(-12 20 28)'/%3E%3Cellipse cx='15' cy='62' rx='5' ry='7.5' fill='%230a1a2b'/%3E%3Crect x='30' y='50' width='12' height='34' rx='6' fill='%230a1a2b'/%3E%3Crect x='48' y='50' width='12' height='34' rx='6' fill='%230a1a2b'/%3E%3Crect x='70' y='50' width='12' height='34' rx='6' fill='%230a1a2b'/%3E%3Crect x='86' y='50' width='12' height='34' rx='6' fill='%230a1a2b'/%3E%3Cellipse cx='44' cy='62' rx='9' ry='8' fill='%23f0a6b4'/%3E%3Crect x='22' y='26' width='72' height='38' rx='17' fill='%23fdf4e3'/%3E%3Cellipse cx='46' cy='38' rx='13' ry='9' fill='%230a1a2b'/%3E%3Cellipse cx='70' cy='52' rx='9' ry='7' fill='%230a1a2b'/%3E%3Crect x='92' y='32' width='30' height='30' rx='13' fill='%23fdf4e3'/%3E%3Cellipse cx='123' cy='55' rx='11' ry='9' fill='%23f0a6b4'/%3E%3Cellipse cx='96' cy='34' rx='8.5' ry='4' fill='%230a1a2b' transform='rotate(-34 96 34)'/%3E%3Cpolygon points='103,36 102,24 108,23 110,36' fill='%23f5b820'/%3E%3Cpolygon points='112,36 115,25 120,27 118,38' fill='%23f5b820'/%3E%3C/svg%3E");
  animation: f4g-walk-cow 36s linear infinite,
             f4g-gait 0.66s ease-in-out infinite;
}

/* the goat — quicker, catches up and passes */
#landingPage .marquee::after {
  bottom: calc(100% - 3px);
  width: 64px; aspect-ratio: 140 / 92;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 92'%3E%3Crect x='36' y='48' width='9' height='36' rx='4.5' fill='%230a1a2b'/%3E%3Crect x='50' y='48' width='9' height='36' rx='4.5' fill='%230a1a2b'/%3E%3Crect x='68' y='48' width='9' height='36' rx='4.5' fill='%230a1a2b'/%3E%3Crect x='80' y='48' width='9' height='36' rx='4.5' fill='%230a1a2b'/%3E%3Cpolygon points='32,36 27,25 38,32' fill='%23c8862a'/%3E%3Crect x='30' y='32' width='58' height='28' rx='13' fill='%23e9a63b'/%3E%3Crect x='78' y='18' width='16' height='28' rx='8' fill='%23e9a63b'/%3E%3Crect x='86' y='12' width='30' height='20' rx='9' fill='%23e9a63b'/%3E%3Cellipse cx='116' cy='26' rx='8' ry='6.5' fill='%23fdf4e3'/%3E%3Cpolygon points='99,30 110,30 104,44' fill='%23fdf4e3'/%3E%3Cpolygon points='92,15 77,4 74,10 89,20' fill='%230a1a2b'/%3E%3Cpolygon points='98,17 85,3 81,8 94,21' fill='%230a1a2b'/%3E%3Cellipse cx='99' cy='29' rx='10' ry='4' fill='%23c8862a' transform='rotate(28 99 29)'/%3E%3C/svg%3E");
  animation: f4g-walk-goat 27s linear infinite 5s,
             f4g-gait 0.5s ease-in-out infinite;
}

@keyframes f4g-walk-cow  { from { translate: -16vw 0; } to { translate: 108vw 0; } }
@keyframes f4g-walk-goat { from { translate: -14vw 0; } to { translate: 110vw 0; } }
@keyframes f4g-gait      { 0%, 100% { rotate: -1.8deg; } 50% { rotate: 1.8deg; } }

@media (max-width: 700px) {
  #landingPage .marquee::before { width: 58px; }
  #landingPage .marquee::after  { width: 46px; }
}

/* they stop and stand still if the visitor asks for less motion */
@media (prefers-reduced-motion: reduce) {
  #landingPage .marquee::before { animation: none !important; translate: 16vw 0; rotate: 0deg; }
  #landingPage .marquee::after  { animation: none !important; translate: 64vw 0; rotate: 0deg; }
}

/* -------------------------------------------------------------------------
   FIVE FOUNDERS — meet the founders grid
   Your grid is locked to three columns, so a fourth and fifth card would
   sit left-aligned in a half-empty row. Flex wrapping keeps three per row
   and centers the leftover two underneath.
   ------------------------------------------------------------------------- */

#landingPage .team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
#landingPage .team-card {
  flex: 0 1 calc(33.333% - 15px);
  max-width: 360px;
  min-width: 0;
}

@media (max-width: 900px) {
  #landingPage .team-card { flex: 0 1 100%; }
}


/* =========================================================================
   FARM4GLASS — KPI-BASED STUDY PLANNER
   ========================================================================= */

.pl-progress-row {
  display: flex; justify-content: space-between; font-size: 13px;
  font-weight: 700; color: var(--muted); margin: 18px 0 8px;
}

.pl-shaky { margin-bottom: 20px; }
.pl-shaky-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-shaky-item {
  background: #fef3c7; border: 1.5px solid #f59e0b; color: #92400e;
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; text-align: left; transition: all .15s;
}
.pl-shaky-item:hover { background: #fde68a; }

.pl-week-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-dark); margin: 24px 0 10px;
}
.pl-week-label:first-child { margin-top: 4px; }

.pl-session {
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.92); border-radius: 22px;
  box-shadow: 0 14px 38px rgba(15,95,140,.12);
  padding: 22px 24px; margin-bottom: 14px;
}
.pl-session.done { border-color: rgba(134,239,172,.9); background: rgba(240,253,244,.9); }

.pl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pl-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  background: linear-gradient(135deg, #167db5, #0f5f8c); color: #fff;
}
.pl-session.done .pl-num { background: #dcfce7; color: #166534; }
.pl-num svg { width: 16px; height: 16px; }
.pl-head-info { flex: 1; min-width: 0; }
.pl-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.pl-date { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

.pl-block-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-dark); margin: 20px 0 10px;
}
.pl-block-label .icon-svg { width: 14px; height: 14px; }

.pl-kpis { display: flex; flex-direction: column; gap: 8px; }
.pl-kpi {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1.5px solid rgba(15,95,140,.16); border-left: 4px solid rgba(15,95,140,.3);
  border-radius: 14px; padding: 10px 14px; background: rgba(255,255,255,.7);
}
.pl-kpi.solid { border-left-color: var(--green); background: rgba(240,253,244,.75); }
.pl-kpi.shaky { border-left-color: #f59e0b; background: rgba(254,243,199,.6); }
.pl-kpi-title {
  flex: 1; min-width: 180px; background: none; border: none; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer; line-height: 1.45;
}
.pl-kpi-title:hover { color: var(--blue); }
.pl-kpi-code {
  display: inline-block; font-size: 11px; font-weight: 800; color: var(--blue);
  background: rgba(22,125,181,.1); border-radius: 6px; padding: 2px 6px; margin-right: 8px;
}
.pl-conf { display: flex; gap: 6px; flex-shrink: 0; }
.pl-conf-btn {
  background: transparent; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: 11.5px; font-weight: 700; font-family: inherit;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.pl-conf-btn:hover { border-color: var(--blue); color: var(--blue); }
.pl-conf-btn.on.solid { background: var(--green); border-color: var(--green); color: #fff; }
.pl-conf-btn.on.shaky { background: #f59e0b; border-color: #f59e0b; color: #fff; }

.pl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.9); border: 1.5px solid rgba(15,95,140,.18);
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  font-family: inherit; color: var(--text); cursor: pointer; transition: all .15s;
}
.pl-link:hover { border-color: var(--blue); color: var(--blue-dark); background: #fff; }
.pl-link .icon-svg { color: var(--blue); }

.pl-empty { font-size: 13px; color: var(--muted); font-style: italic; }

.pl-rp {
  border: 1.5px dashed rgba(15,95,140,.22); border-radius: 16px;
  padding: 18px 20px; background: rgba(240,249,255,.5);
}
.pl-rp-meta { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 12px; line-height: 1.5; }
.pl-rp-scenario { font-size: 14.5px; line-height: 1.65; margin-bottom: 16px; }
.pl-rp-label {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-dark); margin-bottom: 7px;
}
.pl-rp-pis, .pl-rp-check { margin: 0 0 16px 18px; }
.pl-rp-pis li, .pl-rp-check li { font-size: 13.5px; line-height: 1.6; margin-bottom: 5px; }
.pl-rp-pis li { font-weight: 600; }
.pl-rp-check li { color: var(--muted); }

@media (max-width: 768px) {
  .pl-session { padding: 18px 16px; border-radius: 18px; }
  .pl-kpi { padding: 12px; }
  .pl-conf { width: 100%; }
  .pl-conf-btn { flex: 1; }
  .pl-links { flex-direction: column; }
  .pl-link { justify-content: flex-start; }
  .pl-rp { padding: 16px 14px; }
}


/* =========================================================================
   FARM4GLASS — STUDY PLANNER (mode picker + step sessions)
   Paste at the VERY END of style.css. Additive only — every selector here
   is new, so nothing above it changes. Reuses .widget, .form-group,
   .planner-summary, .planner-warning and .xp-bar-* so the planner still
   matches the rest of the portal.
   ========================================================================= */

/* ---------- "What do you want to study for?" picker ---------- */

.pl-mode-label-row {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-dark); margin-bottom: 12px;
}
.pl-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.pl-mode {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.92); border-radius: 22px;
  box-shadow: 0 14px 38px rgba(15,95,140,.12);
  padding: 20px 22px; cursor: pointer; font-family: inherit;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}
.pl-mode:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(15,95,140,.2); }
.pl-mode.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(22,125,181,.16), 0 20px 46px rgba(15,95,140,.2);
}
/* an event the student hasn't set on their Profile yet */
.pl-mode.empty { opacity: .72; }
.pl-mode-label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.pl-mode-value { font-size: 15.5px; font-weight: 800; color: #0a1a2b; line-height: 1.35; letter-spacing: -.01em; }
.pl-mode.empty .pl-mode-value { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.pl-mode-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* ---------- plan summary ---------- */

.pl-summary-sub { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.pl-progress-row {
  display: flex; justify-content: space-between; font-size: 13px;
  font-weight: 700; color: var(--muted); margin: 18px 0 8px;
}

.pl-shaky { margin-bottom: 20px; }
.pl-shaky-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-shaky-item {
  background: #fef3c7; border: 1.5px solid #f59e0b; color: #92400e;
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; text-align: left; transition: all .15s;
}
.pl-shaky-item:hover { background: #fde68a; }

/* ---------- sessions ---------- */

.pl-week-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-dark); margin: 24px 0 10px;
}
.pl-week-label:first-child { margin-top: 4px; }

.pl-session {
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.92); border-radius: 22px;
  box-shadow: 0 14px 38px rgba(15,95,140,.12);
  padding: 22px 24px; margin-bottom: 14px;
}
.pl-session.done { border-color: rgba(134,239,172,.9); background: rgba(240,253,244,.9); }
.pl-session.final { border-color: rgba(22,125,181,.35); }

.pl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.pl-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  background: linear-gradient(135deg, #167db5, #0f5f8c); color: #fff;
}
.pl-session.done .pl-num { background: #dcfce7; color: #166534; }
.pl-num svg { width: 16px; height: 16px; }
.pl-head-info { flex: 1; min-width: 0; }
.pl-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.pl-date { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* block headings inside a session — .pl-step is the numbered roleplay walk */
.pl-block-label, .pl-step {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-dark); margin: 20px 0 10px;
}
.pl-block-label .icon-svg { width: 14px; height: 14px; }
.pl-step { color: var(--blue); }
.pl-step::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: var(--blue); flex-shrink: 0;
}

/* ---------- performance indicator rows ---------- */

.pl-kpis { display: flex; flex-direction: column; gap: 8px; }
.pl-kpi {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1.5px solid rgba(15,95,140,.16); border-left: 4px solid rgba(15,95,140,.3);
  border-radius: 14px; padding: 10px 14px; background: rgba(255,255,255,.7);
}
.pl-kpi.solid { border-left-color: var(--green); background: rgba(240,253,244,.75); }
.pl-kpi.shaky { border-left-color: #f59e0b; background: rgba(254,243,199,.6); }
.pl-kpi-title {
  flex: 1; min-width: 180px; background: none; border: none; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer; line-height: 1.45;
}
.pl-kpi-title:hover { color: var(--blue); }
.pl-kpi-code {
  display: inline-block; font-size: 11px; font-weight: 800; color: var(--blue);
  background: rgba(22,125,181,.1); border-radius: 6px; padding: 2px 6px; margin-right: 8px;
}
.pl-conf { display: flex; gap: 6px; flex-shrink: 0; }
.pl-conf-btn {
  background: transparent; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: 11.5px; font-weight: 700; font-family: inherit;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.pl-conf-btn:hover { border-color: var(--blue); color: var(--blue); }
.pl-conf-btn.on.solid { background: var(--green); border-color: var(--green); color: #fff; }
.pl-conf-btn.on.shaky { background: #f59e0b; border-color: #f59e0b; color: #fff; }

/* ---------- links out to a unit, exam, or the checker ---------- */

.pl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.9); border: 1.5px solid rgba(15,95,140,.18);
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  font-family: inherit; color: var(--text); cursor: pointer; transition: all .15s;
}
.pl-link:hover { border-color: var(--blue); color: var(--blue-dark); background: #fff; }
.pl-link .icon-svg { color: var(--blue); }

.pl-empty { font-size: 13px; color: var(--muted); font-style: italic; }

/* ---------- roleplay card ---------- */

.pl-rp {
  border: 1.5px dashed rgba(15,95,140,.22); border-radius: 16px;
  padding: 18px 20px; background: rgba(240,249,255,.5);
}
.pl-rp-meta { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 12px; line-height: 1.5; }
.pl-rp-scenario { font-size: 14.5px; line-height: 1.65; margin-bottom: 16px; }
.pl-rp-label {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-dark); margin-bottom: 7px;
}
.pl-rp-pis, .pl-rp-check { margin: 0 0 16px 18px; }
.pl-rp-pis li, .pl-rp-check li { font-size: 13.5px; line-height: 1.6; margin-bottom: 5px; }
.pl-rp-pis li { font-weight: 600; }
.pl-rp-check li { color: var(--muted); }

/* ---------- prepared event section card ---------- */

.pl-written {
  border: 1.5px solid rgba(15,95,140,.16); border-left: 4px solid var(--blue);
  border-radius: 16px; padding: 16px 20px; margin-bottom: 10px;
  background: rgba(255,255,255,.7);
}
.pl-written-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.pl-written-goal { font-size: 13.5px; line-height: 1.6; color: var(--text); margin-bottom: 10px; }
.pl-written .pl-rp-check { margin-bottom: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .pl-modes { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pl-session { padding: 18px 16px; border-radius: 18px; }
  .pl-mode { padding: 18px; border-radius: 18px; }
  .pl-kpi { padding: 12px; }
  .pl-conf { width: 100%; }
  .pl-conf-btn { flex: 1; }
  .pl-links { flex-direction: column; }
  .pl-link { justify-content: flex-start; }
  .pl-rp { padding: 16px 14px; }
  .pl-written { padding: 14px 16px; }
}

/* =========================================================================
   CALENDAR — multi-day events, custom types, info links
   Append to the end of style.css. Everything here is additive; no existing
   rule is changed.
   ========================================================================= */

/* Custom (admin-typed) event types get a neutral pill rather than a new
   colour, so the calendar stays readable as the type list grows. */
.calendar-event-card.custom {
  border-left-color: var(--muted, #4a6c8c);
}
.calendar-event-type.custom {
  background: rgba(74, 108, 140, .12);
  color: var(--muted, #4a6c8c);
}

/* Multi-day date badge. The day number shrinks to fit "12–14". */
.ced-day-range {
  font-size: .78em;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ced-through {
  font-size: 11px;
  font-weight: 700;
  opacity: .75;
  margin-top: 2px;
  white-space: nowrap;
}

/* Live marker for an event running today. */
.calendar-event-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--green, #059669);
}
.calendar-event-now::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* "Learn more" link on an event card. */
.calendar-event-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 13px;
  border: 1px solid rgba(22, 125, 181, .3);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue, #167db5);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.calendar-event-link:hover {
  background: rgba(22, 125, 181, .08);
  border-color: rgba(22, 125, 181, .5);
}
.calendar-event-link .icon-svg {
  width: 15px;
  height: 15px;
}

/* Paired date inputs in the admin form. */
.admin-inline-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 160px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #4a6c8c);
}
.admin-optional {
  font-weight: 500;
  opacity: .7;
}
.admin-field-hint {
  font-size: 12px;
  color: var(--muted, #4a6c8c);
  margin: -4px 0 4px;
}

@media (max-width: 560px) {
  .admin-inline-label { flex: 1 1 100%; }
}


/* =========================================================================
   PRACTICE ROLEPLAYS
   Append to the end of style.css.
   ========================================================================= */

.rp-event-icon {
  background: rgba(22, 125, 181, .13);
  color: var(--blue, #167db5);
}
.rp-area-icon {
  background: rgba(245, 158, 11, .14);
  color: #f59e0b;
}

.rp-search-wrap {
  position: relative;
  max-width: 520px;
  margin-bottom: 22px;
}
.rp-search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted);
  display: flex; pointer-events: none;
}
.rp-search-icon svg { width: 100%; height: 100%; }
#rpSearchBox {
  width: 100%;
  padding: 15px 20px 15px 48px;
  border: 2px solid var(--border);
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15,95,140,.08);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#rpSearchBox:focus {
  border-color: var(--blue);
  box-shadow: 0 6px 22px rgba(22,125,181,.16);
}
@media (max-width: 768px) {
  .rp-search-wrap { max-width: none; }
}

/* An event with nothing in it yet reads as available but empty, rather than
   being hidden — students can see the library is growing. */
.rp-event-card.rp-empty { opacity: .55; }
.rp-event-card.rp-empty:hover { opacity: .8; }

.rp-event-head { margin: 18px 0 20px; }
.rp-event-head h2 { margin-bottom: 4px; }

/* ---- search results ---- */

.rp-hits-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #4a6c8c);
  margin: 4px 0 12px;
}

.rp-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(22, 125, 181, .16);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rp-hit:hover {
  background: rgba(22, 125, 181, .06);
  border-color: rgba(22, 125, 181, .4);
}
.rp-hit .icon-svg { flex: 0 0 auto; width: 18px; height: 18px; opacity: .7; }
.rp-hit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rp-hit-title { font-size: 14px; font-weight: 600; }
.rp-hit-sub { font-size: 12px; color: var(--muted, #4a6c8c); }
.rp-hit-arrow { flex: 0 0 auto; color: var(--muted, #4a6c8c); font-size: 18px; }

/* ---- roleplay list + PDF viewer ---- */

.rp-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 22px;
  align-items: start;
}

.rp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
}

.rp-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(22, 125, 181, .16);
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rp-list-item:hover { background: rgba(22, 125, 181, .06); }
.rp-list-item.active {
  border-color: var(--blue, #167db5);
  background: rgba(22, 125, 181, .1);
  font-weight: 600;
}
.rp-list-item .icon-svg { flex: 0 0 auto; width: 17px; height: 17px; opacity: .7; }
.rp-list-title { min-width: 0; }

.rp-viewer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rp-viewer-title { font-size: 18px; font-weight: 700; }
.rp-viewer-desc { font-size: 14px; color: var(--muted, #4a6c8c); margin-top: 4px; }

.rp-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  text-decoration: none;
  font-size: 14px;
  padding: 10px 18px;
}
.rp-open-btn .icon-svg { width: 16px; height: 16px; }

.rp-frame {
  display: block;
  width: 100%;
  height: 74vh;
  min-height: 460px;
  border: 1px solid rgba(22, 125, 181, .18);
  border-radius: 13px;
  background: #fff;
}

@media (max-width: 900px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-list { max-height: none; }
  /* Drive's preview is unusable at phone height — shorter frame, and the
     "Open in new tab" button becomes the real way in. */
  .rp-frame { height: 60vh; min-height: 340px; }
  .rp-open-btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   FARM4GLASS — GUEST SPEAKER VIDEOS
   PASTE THIS AT THE VERY END OF style.css.
   -------------------------------------------------------------------------
   Additive only — every selector here is new, so nothing above it changes.
   The cards borrow the same glass surface, radii and blue the portal already
   uses, so the tab reads as part of the site rather than a bolt-on.

   Once this is in, guest-speakers.css is dead weight — delete it and remove
   its <link> tag from index.html.

   The admin panel needs nothing here; it reuses your existing .admin-layout,
   .admin-course-list and .admin-kpi-form styles.
   ========================================================================= */

.gs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  align-items: start;
}

/* A card with its player open takes the full row, so the video is watchable
   instead of squeezed into a third of the screen. */
.gs-card.gs-open { grid-column: 1 / -1; }

.gs-card {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 26px;
  box-shadow: 0 14px 38px rgba(15,95,140,.12);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.gs-card:hover { transform: translateY(-5px); box-shadow: 0 28px 62px rgba(15,95,140,.2); }
.gs-card.gs-open:hover { transform: none; }

/* ---------- thumbnail ---------- */

.gs-thumb {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: none; padding: 0; margin: 0; cursor: pointer;
  background-color: #0a1a2b;
  background-size: cover; background-position: center;
  position: relative;
}
.gs-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,26,43,.1), rgba(10,26,43,.55));
  transition: background .25s;
}
.gs-thumb:hover::after { background: linear-gradient(160deg, rgba(10,26,43,.05), rgba(10,26,43,.35)); }

/* No YouTube thumbnail to pull (a Drive video, or no video) — fall back to
   the brand gradient rather than an empty black box. */
.gs-thumb-blank { background-image: linear-gradient(140deg, #0f5f8c 0%, #167db5 58%, #38bdf8 130%); }
.gs-thumb-static { cursor: default; }
.gs-thumb-static::after { background: none; }

.gs-thumb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); color: var(--blue-dark);
  box-shadow: 0 12px 28px rgba(10,26,43,.32);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.gs-thumb-play .icon-svg { width: 26px; height: 26px; }
.gs-thumb:hover .gs-thumb-play { transform: translate(-50%, -50%) scale(1.08); }

/* ---------- player ---------- */

.gs-player { width: 100%; aspect-ratio: 16 / 9; background: #0a1a2b; }
.gs-player iframe { display: block; width: 100%; height: 100%; border: none; }

/* ---------- card body ---------- */

.gs-card-body { padding: 22px 24px 24px; }
.gs-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #0a1a2b; margin-bottom: 4px; }
.gs-role { font-size: 13.5px; font-weight: 700; color: var(--blue); line-height: 1.45; }

.gs-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.gs-area-tag {
  background: rgba(22,125,181,.11); color: var(--blue-dark);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
}
.gs-recorded { font-size: 12px; font-weight: 600; color: var(--muted); }

.gs-desc { font-size: 14px; line-height: 1.65; color: #3d5f80; margin-top: 14px; }

.gs-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }

.gs-play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #167db5, #0f5f8c); color: #fff;
  border: none; border-radius: 999px; padding: 10px 20px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,95,140,.26);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.gs-play-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(15,95,140,.3); }
.gs-play-btn:active { transform: translateY(1px) scale(.985); }

/* The takeaways doc gets the amber treatment the site already uses for XP and
   badges, so it reads as study material next to the blue watch button rather
   than a second video button. */
.gs-notes-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1.5px solid rgba(245,158,11,.55); color: #92400e;
  border-radius: 999px; padding: 9px 18px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: all .15s;
}
.gs-notes-link:hover { background: #fde68a; border-color: #f59e0b; }
.gs-notes-link .icon-svg { color: #b45309; }

.gs-open-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.9); border: 1.5px solid rgba(15,95,140,.18);
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700;
  color: var(--text); text-decoration: none; transition: all .15s;
}
.gs-open-link:hover { border-color: var(--blue); color: var(--blue-dark); background: #fff; }
.gs-open-link .icon-svg { color: var(--blue); }

/* ---------- keyboard focus ---------- */

.gs-thumb:focus-visible,
.gs-play-btn:focus-visible,
.gs-notes-link:focus-visible,
.gs-open-link:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 3px;
}

/* ---------- mobile ---------- */

@media (max-width: 768px) {
  .gs-grid { grid-template-columns: 1fr; gap: 16px; }
  .gs-card { border-radius: 20px; }
  .gs-card:hover { transform: none; }
  .gs-card-body { padding: 18px 18px 20px; }
  .gs-name { font-size: 18px; }
  .gs-thumb-play { width: 48px; height: 48px; }
  .gs-thumb-play .icon-svg { width: 22px; height: 22px; }
  .gs-actions { flex-direction: column; align-items: stretch; }
  .gs-play-btn, .gs-notes-link, .gs-open-link { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-card, .gs-thumb-play, .gs-play-btn { transition: none !important; }
}


/* =========================================================================
   FARM4GLASS — LEADERBOARD: TOP 10 + YOUR RANK
   PASTE THIS AT THE VERY END OF style.css.
   -------------------------------------------------------------------------
   The rows themselves already have styles. These are the section labels and
   the "your rank" block that sits under the top 10.
   ========================================================================= */

.lb-top-label,
.lb-your-rank-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-dark);
  margin-bottom: 10px;
}

/* A visible break, so your own row never reads as 11th place. */
.lb-your-rank {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1.5px dashed rgba(15,95,140,.25);
}

.lb-your-rank-inline {
  font-size: 14.5px; line-height: 1.6; color: #3d5f80;
  background: rgba(255,255,255,.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(15,95,140,.14);
  border-radius: 18px; padding: 16px 20px;
}
.lb-your-rank-inline strong { color: var(--blue-dark); font-weight: 800; }

.lb-your-rank-empty {
  font-size: 14px; line-height: 1.6; color: var(--muted);
  background: rgba(255,255,255,.6);
  border: 1px dashed rgba(15,95,140,.2);
  border-radius: 18px; padding: 16px 20px;
}

@media (max-width: 768px) {
  .lb-your-rank { margin-top: 20px; padding-top: 18px; }
  .lb-your-rank-inline, .lb-your-rank-empty { padding: 14px 16px; font-size: 13.5px; }
}