@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap");

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #1E2A38;
}

[hidden] {
  display: none !important;
}

.results-page {
  min-height: calc(100vh - 90px);
  padding: 32px 6% 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(243, 246, 252, 0.95), rgba(243, 246, 252, 0.75)),
    repeating-linear-gradient(
      0deg,
      rgba(14, 37, 61, 0.06) 0px,
      rgba(14, 37, 61, 0.06) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(14, 37, 61, 0.06) 0px,
      rgba(14, 37, 61, 0.06) 1px,
      transparent 1px,
      transparent 28px
    );
}

.results-fullpage {
  width: min(980px, 100%);
}

.results-shell {
  background: #ffffff;
  border: 1px solid rgba(16, 35, 54, 0.18);
  border-radius: 26px;
  padding: 30px 28px 34px;
  box-shadow: 0 28px 70px rgba(12, 26, 40, 0.18);
  font-family: "Manrope", "Segoe UI", "Segoe UI Variable", sans-serif;
  position: relative;
}

.results-shell::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(19, 41, 63, 0.08);
  border-radius: 20px;
  pointer-events: none;
}

.results-headline {
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0.4px;
  color: #102740;
}

.results-lead {
  margin: 0 auto 18px;
  max-width: 540px;
  text-align: center;
  color: #43556d;
  font-size: 1.02rem;
  line-height: 1.5;
  padding: 14px 18px;
  border: 1px solid rgba(18, 42, 64, 0.16);
  border-radius: 14px;
  background: #f7f9fc;
}

.results-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 auto 18px;
  max-width: 520px;
}

.results-toggle-btn {
  border: 1px solid rgba(18, 42, 64, 0.2);
  background: #ffffff;
  color: #1e3348;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.results-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(17, 34, 52, 0.15);
}

.results-toggle-btn.is-active {
  background: #102a42;
  color: #ffffff;
  border-color: #102a42;
  box-shadow: 0 10px 22px rgba(10, 26, 41, 0.2);
}

.results-note {
  margin: 0 auto 22px;
  max-width: 620px;
  text-align: center;
  color: #1f3a55;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 14px;
  background: #eef3f8;
  border: 1px solid rgba(18, 42, 64, 0.12);
}

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

.results-card {
  border: 1px solid rgba(16, 37, 58, 0.2);
  border-radius: 18px;
  padding: 18px 16px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(13, 27, 42, 0.08);
}

.results-score {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  border: 1px solid rgba(16, 37, 58, 0.2);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #122d46;
  background: #f3f6fb;
}

.results-card-info h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #102740;
}

.results-card-info p {
  margin: 0;
  color: #4a5f76;
  font-size: 0.96rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .results-page {
    padding: 24px 5% 40px;
  }

  .results-shell {
    padding: 24px 20px 26px;
  }

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

@media (min-width: 901px) {
  #presentation-open-btn {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .results-toggle {
    grid-template-columns: 1fr;
  }

  .results-grid {
    grid-template-columns: 1fr;
  }

  .results-score {
    width: 72px;
    height: 72px;
    font-size: 1.4rem;
  }
}

@media (max-width: 900px) {
  header {
    padding: 16px 5%;
  }

  .hero-header {
    min-height: auto;
    --logo-size: 180px;
  }

  .hero {
    padding: 40px 6% 28px;
  }

  .hero-info-grid {
    grid-template-columns: 1fr;
  }

  .hero-image img {
    aspect-ratio: 16 / 9;
  }

  .levels {
    padding: 44px 6%;
  }

  .header-actions {
    position: static;
    margin-top: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-subscription {
    grid-template-columns: 1fr;
  }

  .profile-extras-grid {
    grid-template-columns: 1fr;
  }

  .profile-modal-card,
  .achievements-modal-card,
  .leaderboard-modal-card {
    width: min(94vw, 560px);
    max-height: 92vh;
  }

  .results-modal-card {
    padding: 0 20px 28px;
  }

  .results-modal-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 80px;
  }

  .results-modal-tile:nth-child(3n + 2) {
    --tile-offset: 0px;
  }

  .results-modal-subtitle--spaced {
    margin-top: 110px;
  }
}

@media (max-width: 640px) {
  header {
    padding: 12px 5%;
  }

  header .btn {
    position: static;
    padding: 10px 16px;
    font-size: 1rem;
  }

  .hero-header {
    --logo-size: 140px;
  }

  .hero-header.is-compact {
    padding: 10px 6%;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .btn {
    padding: 8px 12px;
    font-size: 0.95rem;
  }

  .hero-info-card h3 {
    font-size: 1.5rem;
  }

  .hero-info-card p {
    font-size: 0.98rem;
  }

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

  .levels h2 {
    font-size: 1.85rem;
  }

  .knowledge-test-note {
    font-size: 1.35rem;
  }

  .knowledge-test-btn {
    width: 100%;
    max-width: 320px;
  }

  .profile-mentor-card {
    padding: 12px 14px;
  }

  .profile-mentor-avatar {
    width: 52px;
    height: 52px;
  }

  .achievements-modal-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .achievements-modal-head-right {
    flex-wrap: wrap;
  }

  .leaderboard-modal-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .leaderboard-modal-close {
    align-self: center;
  }

  .results-modal-tiles {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .results-modal-tile {
    transform: translateY(0);
  }

  .results-modal-subtitle--spaced {
    margin-top: 40px;
  }
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 8%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
  overflow: clip;
  --header-bg-image: url("../../assets/images/space_2.jpg");
  background-color: var(--header-bg-color, #ffffff);
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--header-bg-image);
  background-size: cover;
  background-position: center 80%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Light theme — swap the night-sky "space.png" cosmic backdrop for a bright
   daytime counterpart: a custom-generated sunrise-over-Earth banner
   ("sky.png", same 2.5:1 framing as space.png) so every header keeps its
   brand identity (planet curve + open sky for the logo) but feels airy
   and light instead of dark. */
[data-theme="light"] header {
  --header-bg-image: url("../../assets/images/sky.jpg");
}

/* Shift the crop window of "sky.png" downward so the Earth's curve
   (framed along the bottom edge of the source artwork) peeks into view
   instead of being cropped off by the default center-anchored "cover". */
[data-theme="light"] header::before {
  background-position: center bottom;
}

header > * {
  position: relative;
  z-index: 1;
}

.hero-header {
  position: sticky;
  top: 0;
  /* !important + a clearly-dominant value: reports of the quick-links row
     (now normal in-flow content on desktop, no longer a separate fixed
     bar) painting ON TOP of this sticky header mid-scroll instead of
     disappearing behind it like every other block, on a real device —
     not reproducible headless, and the DOM/z-index math here says the
     header (was z-index:20, no !important) should already win, but
     leave zero room for doubt rather than chase an unreproducible
     compositing quirk further. Stays below 998/999 (#mobile-nav-backdrop /
     #mobile-nav-drawer), which must still cover the header when opened. */
  z-index: 960 !important;
  --header-bg-color: #e3e7ec;
  --header-max-vh: 45;
  --header-min-px: 90;
  min-height: calc(var(--header-max-vh) * 1vh);
  --logo-size-max: 252;
  --logo-size-min: 95;
  --logo-size: 252px;
  overflow: clip;
  will-change: transform;
  transform: translateZ(0);
  transition: min-height 0.45s ease, padding 0.45s ease, box-shadow 0.45s ease;
}

.hero-header::before {
  transition: opacity 0.45s ease;
}

/* ── Shooting stars canvas ── */
.header-comet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── Levitation keyframe ── */
@keyframes levitate {
  0%   { transform: translateY(0px) rotate(var(--lm-rotate, 0deg)); }
  50%  { transform: translateY(-14px) rotate(var(--lm-rotate, 0deg)); }
  100% { transform: translateY(0px) rotate(var(--lm-rotate, 0deg)); }
}

/* ── Landmarks layer ── */
.header-landmarks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.landmark {
  position: absolute;
  width: auto;
  opacity: 0.88;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  animation: levitate var(--lm-dur, 4s) ease-in-out infinite;
  animation-delay: var(--lm-delay, 0s);
  transition: opacity 0.5s ease, scale 0.5s ease;
  will-change: transform;
}

/* Each statue: own rotation, speed and delay */
.lm-1 { left:  2%;  top: 8%;  height: 155px; --lm-rotate: -3deg; --lm-dur: 4.2s; --lm-delay: 0s;    }
.lm-2 { left: 18%;  top: 28%; height: 105px; --lm-rotate:  2deg; --lm-dur: 3.6s; --lm-delay: -1.1s; }
.lm-3 { left: 42%;  top:  4%; height: 185px; --lm-rotate: -1deg; --lm-dur: 5.0s; --lm-delay: -0.6s; }
.lm-4 { right: 15%; top: 22%; height: 115px; --lm-rotate:  3deg; --lm-dur: 3.9s; --lm-delay: -1.8s; }
.lm-5 { right:  1%; top: 10%; height: 150px; --lm-rotate: -2deg; --lm-dur: 4.5s; --lm-delay: -0.3s; }

/* On scroll — fade and shrink */
.hero-header.is-compact .landmark {
  opacity: 0;
  scale: 0.1;
}

/* Earth at the bottom of the header */
.header-earth {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.hero-header.is-compact .header-earth {
  opacity: 0;
  transform: translateX(-50%) translateY(40px);
}

.logo {
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
  transition: font-size 0.45s ease;
  font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  letter-spacing: 0.3px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: var(--logo-size, 95px);
  width: auto;
  display: block;
  transition: height 0.45s ease;
}
.hero-header .logo img {
  will-change: height;
}

/* Dark theme gets the white-outlined CitizenX mark - the plain black
   artwork (correct on this site's light backgrounds) reads as almost
   invisible against a dark header, same reasoning as the certificate's
   own logo_citizen_x_white.png (see certificate.js). content: url()
   swaps the rendered image while every existing size/layout rule above
   keeps applying, since the <img> is still a normal replaced element.
   Uses its own logo_citizen_x_white_thin.png rather than reusing the
   certificate's file: the header renders the logo far larger (the
   certificate draws it at a fixed 118px tall - see certificate.js -
   while the header can run past 250px), so the certificate's outline
   was scaled up to a visibly thick ring here. A thinner outline reads
   as too faint at the certificate's small size, so this is a separate
   asset rather than a shared one - tried sharing first, thinning it
   for the header made it nearly invisible on the certificate. */
[data-theme="dark"] .logo img {
  content: url("../../assets/images/logo_citizen_x_white_thin.png");
}

.level-header,
.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.article-reader-body .level-header,
/* User feedback: the lesson video page felt cramped with the header
   permanently pinned above a tall video player - let it scroll away like
   the article reader already does, rather than eating vertical space the
   whole time. */
.lesson-player-body .level-header {
  position: relative;
}

.level-header {
  min-height: 72px;
  padding: 8px 8%;
  --logo-size: 72px;
  --header-bg-color: #ffffff;
}

.admin-header {
  min-height: 72px;
  padding: 8px 8%;
  --logo-size: 72px;
  --header-bg-color: #e3e7ec;
}

/* Comet canvas for course/lesson/admin/results headers — same look as the
   homepage header, scaled down to suit the slimmer bar */
.level-header-comet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.level-header .btn {
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 900px) {
  .level-header .btn {
    padding: 16px 36px;
    font-size: 1.15rem;
  }
}

.level-header .btn:hover {
  transform: translateY(-50%);
}

.level-header .logo {
  position: relative;
  z-index: 2;
}

header .btn {
  position: absolute;
  right: 4%;
  top: 14px;
  background: #ffffff;
  color: #1E2A38;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
}

.header-actions {
  position: absolute;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions-left {
  left: 4%;
  right: auto;
}

.header-actions-right {
  right: 4%;
  left: auto;
}

.header-actions .btn {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header-actions .btn[hidden] {
  display: none !important;
}

.header-actions #admin-panel-btn,
.header-actions #profile-btn {
  position: relative;
  top: auto;
  transform: none;
}

/* Show these header buttons immediately if the <head> pre-paint script (or
   the real updateLoginButton() check right after) says the user is logged
   in with a matching role - avoids "Login" + a beat of nothing, then
   Mentor/Admin panel/Classes popping in, on every single page load. The ID
   selectors here out-specificity .header-actions .btn[hidden] above even
   though it's also !important, so this wins regardless of whether the
   hidden attribute is still physically on the element.
   Desktop only: below 721px these same buttons get hidden again once
   logged in anyway (see .mobile-logged-in rules in admin-quiz-news.css -
   the drawer covers Profile/Students/Admin/Classes there), so there's
   nothing worth pre-empting on mobile. */
@media (min-width: 721px) {
  html[data-auth="in"] .header-actions #profile-btn {
    display: inline-flex !important;
  }
  html[data-auth="in"][data-role="mentor"] .header-actions #mentor-students-btn {
    display: inline-flex !important;
  }
  html[data-auth="in"][data-role="school_admin"] .header-actions #school-admin-btn {
    display: inline-flex !important;
  }
  html[data-auth="in"][data-role="admin"] .header-actions #admin-panel-btn {
    display: inline-flex !important;
  }
}

@media (min-width: 901px) {
  .hero-header .header-actions.header-actions-right #admin-panel-btn {
    position: relative;
    top: 0;
  }
}

.profile-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}

.profile-modal.is-open {
  display: flex;
}

.profile-modal-card {
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #f4f7fb;
  border-radius: 20px;
  border: 1px solid #cfdae6;
  padding: 14px;
  box-shadow: 0 28px 64px rgba(10, 25, 50, 0.22);
}

.team-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1300;
}

.team-modal.is-open {
  display: flex;
}

.team-modal-card {
  width: 100vw;
  height: 100dvh;
  background: #ffffff;
  border-radius: 0;
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.team-modal-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px
    max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid #e2eaf3;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

.team-modal-topbar-spacer {
  min-width: 120px;
}

.team-modal-topbar-center {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.team-modal-logo {
  height: 54px;
  width: auto;
  display: block;
  object-fit: contain;
}

.team-modal-count {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #102a42, #184a7a);
  color: #ffffff;
}

.team-modal-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
}

.team-modal-edit-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 900 !important;
}

.team-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(180deg, rgba(243, 246, 252, 0.85), rgba(243, 246, 252, 0.65)),
    repeating-linear-gradient(
      0deg,
      rgba(14, 37, 61, 0.05) 0px,
      rgba(14, 37, 61, 0.05) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(14, 37, 61, 0.05) 0px,
      rgba(14, 37, 61, 0.05) 1px,
      transparent 1px,
      transparent 28px
    );
}

.team-card-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.team-card-actions .btn {
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 900;
  border: 1px solid rgba(16, 35, 54, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: #15314f;
}

.team-card-actions .team-card-more-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(217, 119, 6, 0.26);
}

.team-card-actions .team-card-delete-btn {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  border-color: transparent;
}

.admin-team-mini-delete {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 22px rgba(185, 28, 28, 0.22);
}

.team-member-card {
  width: min(860px, 100%);
  max-height: 92vh;
  padding: 12px 12px 16px;
}

.team-member-modal {
  z-index: 1400;
}

.team-member-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px 6px 6px;
}

.team-member-avatar {
  width: 206px;
  height: 206px;
  border-radius: 50%;
  border: 3px solid #1f3a52;
  background: linear-gradient(135deg, #e7edf3, #cfd8e2);
  flex: 0 0 206px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b4e72;
  font-weight: 900;
  font-size: 2.1rem;
  box-shadow: 0 4px 18px rgba(15,42,69,.15);
}

.team-member-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.team-member-hero-text {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.team-member-header {
  margin: 0;
  color: #132943;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.15;
}

.team-member-subheader {
  margin: 0;
  color: #24415f;
  font-size: 1.02rem;
  line-height: 1.45;
}

.team-member-section {
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid #cfdae6;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

.team-member-section-title {
  margin: 0 0 10px;
  color: #143456;
}

.team-member-achievements {
  margin: 0;
  padding-left: 18px;
  color: #31475c;
  line-height: 1.55;
}

.admin-team-edit-grid {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  margin-top: 14px;
}

.admin-team-edit-avatar {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: center;
}

#admin-team-edit-avatar-preview,
.admin-team-edit-avatar-fallback {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid #d9e1ee;
  background: #f3f6fb;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #1c2a4a;
  object-fit: cover;
}

.admin-team-edit-avatar-fallback {
  font-size: 2rem;
}

.admin-team-edit-fields {
  display: grid;
  gap: 10px;
}

.admin-team-edit-textarea {
  resize: vertical;
}

.admin-team-edit-flag-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

.admin-team-edit-flag-preview {
  flex-shrink: 0;
}

#admin-team-edit-flag-preview,
#admin-organization-flag-preview,
.admin-team-edit-flag-fallback {
  width: 64px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid #d9e1ee;
  background: #f3f6fb;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: #1c2a4a;
  object-fit: cover;
}

.admin-team-edit-flag-controls {
  display: grid;
  gap: 6px;
  flex: 1;
}

@media (max-width: 700px) {
  .team-member-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .team-member-avatar {
    width: 176px;
    height: 176px;
    flex-basis: 176px;
  }
  .admin-team-edit-grid {
    grid-template-columns: 1fr;
  }
}

.achievements-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1250;
}

.achievements-modal.is-open {
  display: flex;
}

.achievements-modal-card {
  width: min(580px, 100%);
  max-height: 88vh;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #cfdae6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-theme="dark"] .achievements-modal-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.achievements-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 10px;
  flex-shrink: 0;
}

.achievements-modal-header h3 {
  margin: 0;
  color: #143456;
  font-size: 1.35rem;
}

[data-theme="dark"] .achievements-modal-header h3 {
  color: #e8f0fa;
}

.achievements-modal-head-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.achievements-xp-pill {
  background: linear-gradient(135deg, #f0c96a, #f5a623);
  color: #5a3a00;
  font-weight: 800;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.achievements-level-pill {
  background: linear-gradient(135deg, #6a7cf0, #8a5cf5);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

[data-theme="dark"] .achievements-level-pill {
  background: linear-gradient(135deg, #4d5bd9, #6f3fd1);
}

.achievements-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 12px;
  flex-shrink: 0;
}

.achievements-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #dde9f5;
  overflow: hidden;
}

[data-theme="dark"] .achievements-progress-track {
  background: rgba(255, 255, 255, 0.1);
}

.achievements-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2e7d55, #56c992);
  transition: width 0.5s ease;
  width: 0%;
}

.achievements-progress-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: #4a6a8a;
  white-space: nowrap;
}

[data-theme="dark"] .achievements-progress-count {
  color: #8db0d0;
}

.achievements-tabs {
  display: flex;
  gap: 6px;
  padding: 0 18px 12px;
  flex-shrink: 0;
  overflow-x: auto;
}

.ach-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #cfdae6;
  background: transparent;
  color: #4a6a8a;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ach-tab:hover {
  background: #eaf2ff;
  border-color: #a0bfdf;
}

.ach-tab.is-active {
  background: #143456;
  color: #fff;
  border-color: #143456;
}

[data-theme="dark"] .ach-tab {
  border-color: rgba(255, 255, 255, 0.15);
  color: #8db0d0;
}

[data-theme="dark"] .ach-tab:hover {
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .ach-tab.is-active {
  background: #1e4a8a;
  border-color: #2d6abf;
  color: #e8f0fa;
}

.achievements-modal-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 18px 18px;
  overflow-y: auto;
  flex: 1;
}

@media (max-width: 480px) {
  .achievements-modal-list {
    grid-template-columns: 1fr;
  }
}

.ach-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #7a8a9b;
  font-size: 0.9rem;
  padding: 24px 0;
}

.achievements-modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.achievements-leaderboard-btn {
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: none;
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
  color: #ffffff;
  font-weight: 700;
}

.achievements-leaderboard-btn:hover {
  filter: brightness(1.04);
}

.leaderboard-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1260;
}

.leaderboard-modal.is-open {
  display: flex;
}

.leaderboard-modal-card {
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #dce8f6;
  padding: 0;
  box-shadow: 0 20px 48px rgba(16, 38, 74, 0.14);
}

[data-theme="dark"] .leaderboard-modal-card {
  background: linear-gradient(160deg, #0f1e35 0%, #091525 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
}

.leaderboard-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5edf8;
  border-radius: 20px 20px 0 0;
}

[data-theme="dark"] .leaderboard-modal-header {
  background: linear-gradient(135deg, #0a1628 0%, #0e2d5a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.leaderboard-modal-header h3 {
  margin: 0;
  color: #143456;
  font-size: 1rem;
  font-weight: 800;
}

[data-theme="dark"] .leaderboard-modal-header h3 {
  color: #ffffff;
}

.leaderboard-modal-close {
  box-shadow: none;
  padding: 5px 12px;
  font-size: 0.8rem;
}

[data-theme="dark"] .leaderboard-modal-close {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: none !important;
}

[data-theme="dark"] .leaderboard-modal-close:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: none !important;
}

.leaderboard-scope-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  flex-shrink: 0;
}

.leaderboard-scope-tabs[hidden] {
  display: none;
}

.leaderboard-scope-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #cfdae6;
  background: transparent;
  color: #4a6a8a;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.leaderboard-scope-tab:hover {
  background: #eaf2ff;
  border-color: #a0bfdf;
}

.leaderboard-scope-tab.is-active {
  background: #143456;
  color: #fff;
  border-color: #143456;
}

[data-theme="dark"] .leaderboard-scope-tab {
  border-color: rgba(255, 255, 255, 0.15);
  color: #8db0d0;
}

[data-theme="dark"] .leaderboard-scope-tab:hover {
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .leaderboard-scope-tab.is-active {
  background: #1e4a8a;
  border-color: #2d6abf;
  color: #e8f0fa;
}

.leaderboard-modal-list {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid #e2ecf8;
  border-left: 4px solid #dde8f5;
  background: #f8fafd;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-size: 0.9rem;
  cursor: pointer;
}

.leaderboard-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 38, 74, 0.1);
}

.leaderboard-row:focus {
  outline: 3px solid rgba(47, 167, 255, 0.4);
  outline-offset: 2px;
}

.leaderboard-row.is-you {
  border-left-color: #3b82f6;
  background: #eff6ff;
  border-color: #bdd8ff;
  border-left-color: #3b82f6;
}

.leaderboard-row.is-top-1 {
  border-left-color: #f59e0b;
  background: #fffbee;
  border-color: #fde68a;
  border-left-color: #f59e0b;
}

.leaderboard-row.is-top-2 {
  border-left-color: #94a3b8;
  background: #f8fafc;
  border-color: #e2e8f0;
  border-left-color: #94a3b8;
}

.leaderboard-row.is-top-3 {
  border-left-color: #d97706;
  background: #fff8f0;
  border-color: #fed7aa;
  border-left-color: #d97706;
}

.leaderboard-rank {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #3a5a7a;
  min-width: 52px;
}

.leaderboard-rank-text {
  min-width: 28px;
}

.leaderboard-medal {
  font-size: 1.05rem;
}

.leaderboard-name {
  flex: 1;
  font-weight: 700;
  color: #1a3456;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leaderboard-name-text {
  font-size: 0.92rem;
}

.leaderboard-meta {
  font-size: 0.75rem;
  color: #6a8aaa;
  font-weight: 500;
}

.leaderboard-points {
  font-weight: 800;
  font-size: 0.82rem;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  padding: 4px 10px;
  border-radius: 999px;
  min-width: 72px;
  text-align: center;
}

.leaderboard-row.is-top-1 .leaderboard-points {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.leaderboard-row.is-top-2 .leaderboard-points {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.leaderboard-row.is-top-3 .leaderboard-points {
  background: #ffedd5;
  border-color: #fed7aa;
  color: #9a3412;
}

/* dark theme rows */
[data-theme="dark"] .leaderboard-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  border-left-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .leaderboard-row:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .leaderboard-row.is-you {
  border-color: rgba(59, 130, 246, 0.3);
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.06);
}

[data-theme="dark"] .leaderboard-row.is-top-1 {
  border-color: rgba(245, 158, 11, 0.25);
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}

[data-theme="dark"] .leaderboard-row.is-top-2 {
  border-color: rgba(148, 163, 184, 0.2);
  border-left-color: #94a3b8;
  background: rgba(148, 163, 184, 0.04);
}

[data-theme="dark"] .leaderboard-row.is-top-3 {
  border-color: rgba(217, 119, 6, 0.22);
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.05);
}

[data-theme="dark"] .leaderboard-rank {
  color: #6a8aaa;
}

[data-theme="dark"] .leaderboard-name {
  color: #cfe2f3;
}

[data-theme="dark"] .leaderboard-meta {
  color: #4a6a8a;
}

[data-theme="dark"] .leaderboard-points {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.22);
  color: #34d399;
}

[data-theme="dark"] .leaderboard-row.is-top-1 .leaderboard-points {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fbbf24;
}

[data-theme="dark"] .leaderboard-row.is-top-2 .leaderboard-points {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.22);
  color: #94a3b8;
}

[data-theme="dark"] .leaderboard-row.is-top-3 .leaderboard-points {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.28);
  color: #fdba74;
}

/* ── Leaderboard podium (top 3 staircase) ── */
.leaderboard-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px 0;
  position: relative;
  background: radial-gradient(ellipse 90% 70% at 50% 110%, rgba(245, 158, 11, 0.07) 0%, transparent 70%);
}

.leaderboard-podium::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 2px at 10% 20%, rgba(245, 158, 11, 0.55) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 90% 14%, rgba(245, 158, 11, 0.45) 0%, transparent 100%),
    radial-gradient(circle 1px at 52% 8%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 28% 32%, rgba(255, 255, 255, 0.25) 0%, transparent 100%),
    radial-gradient(circle 1px at 74% 26%, rgba(245, 158, 11, 0.35) 0%, transparent 100%),
    radial-gradient(circle 1px at 18% 55%, rgba(255, 255, 255, 0.15) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 82% 50%, rgba(245, 158, 11, 0.25) 0%, transparent 100%);
  opacity: 0.6;
}

.podium-slot {
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  transition: filter 0.15s ease;
}

.podium-slot:hover {
  filter: brightness(1.06);
}

.podium-slot:focus {
  outline: 3px solid rgba(47, 167, 255, 0.4);
  outline-offset: 2px;
}

.podium-crown {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 4px;
}

.podium-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 8px;
  width: 100%;
}

.podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  border: 3px solid;
  flex-shrink: 0;
}

.podium-1st .podium-avatar {
  width: 60px;
  height: 60px;
  font-size: 1.3rem;
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  border-color: #f59e0b;
  color: #92400e;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.podium-2nd .podium-avatar {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-color: #94a3b8;
  color: #475569;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.15);
}

.podium-3rd .podium-avatar {
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  border-color: #d97706;
  color: #9a3412;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
}

.podium-slot.is-you .podium-avatar {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

.podium-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a3456;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
  box-sizing: border-box;
}

.podium-xp {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
}

.podium-1st .podium-xp {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.podium-2nd .podium-xp {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.podium-3rd .podium-xp {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}

.podium-step {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 10px 0 0;
  font-size: 1.35rem;
  position: relative;
  overflow: hidden;
}

.podium-step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

.podium-1st .podium-step {
  height: 80px;
  background: linear-gradient(180deg,
    #fef08a 0%,
    #fcd34d 18%,
    #f59e0b 55%,
    #d97706 85%,
    #b45309 100%);
  box-shadow: 0 -4px 16px rgba(245, 158, 11, 0.45), 0 4px 8px rgba(180, 83, 9, 0.35);
}

.podium-2nd .podium-step {
  height: 56px;
  background: linear-gradient(180deg,
    #f8fafc 0%,
    #e2e8f0 18%,
    #94a3b8 55%,
    #64748b 85%,
    #475569 100%);
  box-shadow: 0 -4px 14px rgba(148, 163, 184, 0.4), 0 4px 8px rgba(71, 85, 105, 0.3);
}

.podium-3rd .podium-step {
  height: 40px;
  background: linear-gradient(180deg,
    #fed7aa 0%,
    #fdba74 18%,
    #d97706 55%,
    #c2410c 85%,
    #9a3412 100%);
  box-shadow: 0 -4px 12px rgba(217, 119, 6, 0.4), 0 4px 8px rgba(154, 52, 18, 0.3);
}

.leaderboard-rest {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px 12px;
}

/* dark theme podium */
[data-theme="dark"] .podium-name {
  color: #d0e4ff;
}

[data-theme="dark"] .podium-1st .podium-avatar {
  background: linear-gradient(135deg, #451a03, #78350f);
  border-color: #d97706;
  color: #fde68a;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22);
}

[data-theme="dark"] .podium-2nd .podium-avatar {
  background: linear-gradient(135deg, #1e293b, #334155);
  border-color: #64748b;
  color: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .podium-3rd .podium-avatar {
  background: linear-gradient(135deg, #431407, #7c2d12);
  border-color: #c2410c;
  color: #fed7aa;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
}

[data-theme="dark"] .podium-1st .podium-xp {
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.28);
}

[data-theme="dark"] .podium-2nd .podium-xp {
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .podium-3rd .podium-xp {
  background: rgba(217, 119, 6, 0.14);
  color: #fed7aa;
  border-color: rgba(217, 119, 6, 0.25);
}

[data-theme="dark"] .podium-1st .podium-step {
  background: linear-gradient(180deg,
    #fcd34d 0%,
    #f59e0b 22%,
    #d97706 55%,
    #b45309 85%,
    #7c2d12 100%);
  box-shadow: 0 -4px 20px rgba(245, 158, 11, 0.6), 0 4px 10px rgba(124, 45, 18, 0.45);
}

[data-theme="dark"] .podium-2nd .podium-step {
  background: linear-gradient(180deg,
    #94a3b8 0%,
    #64748b 22%,
    #475569 55%,
    #334155 85%,
    #1e293b 100%);
  box-shadow: 0 -4px 16px rgba(148, 163, 184, 0.3), 0 4px 8px rgba(30, 41, 59, 0.5);
}

[data-theme="dark"] .podium-3rd .podium-step {
  background: linear-gradient(180deg,
    #fb923c 0%,
    #c2410c 22%,
    #9a3412 55%,
    #7c2d12 85%,
    #431407 100%);
  box-shadow: 0 -4px 14px rgba(194, 65, 12, 0.5), 0 4px 8px rgba(67, 20, 7, 0.45);
}

/* ── Calendar modal ── */
.calendar-modal {
  position: fixed;
  inset: 0;
  background: rgba(9, 22, 35, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1250;
}

.calendar-modal.is-open {
  display: flex;
}

.calendar-modal-card {
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: #ffffff;
  border: none;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 24px 64px rgba(8, 21, 70, 0.22), 0 4px 16px rgba(8, 21, 70, 0.08);
}

.calendar-modal-header {
  background: linear-gradient(135deg, #1a3560 0%, #2563EB 100%);
  border-radius: 24px 24px 0 0;
  padding: 18px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.calendar-modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
}

.calendar-modal-close {
  border: none;
  background: rgba(255,255,255,0.2);
  font-size: 1.1rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}