.hmc-home {
  --orange-50: #fff4f3;
  --orange-100: #ffe5e3;
  --orange-200: #ffcbc5;
  --orange-300: #ffb4aa;
  --orange-400: #ff9788;
  --orange-500: #ff775d;
  --orange-600: #ff5303;
  --orange-700: #c13c00;

  --ink-50: #e4e8ef;
  --ink-100: #c9d2df;
  --ink-200: #97aac2;
  --ink-300: #6f8095;
  --ink-400: #4c5867;
  --ink-500: #2d353f;
  --ink-600: #101419;
  --ink-700: #0e1116;

  --teal-300: #3aefde;
  --teal-600: #2ec4b6;
  --teal-800: #115f58;

  --page: #ffffff;
  --surface: #fffdfc;

  min-height: 100vh;

  color: var(--ink-400);
  background: var(--page);

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.hmc-home *,
.hmc-home *::before,
.hmc-home *::after {
  box-sizing: border-box;
}

.hmc-home a {
  color: inherit;
  text-decoration: none;
}

.hmc-home button {
  font: inherit;
}

.hmc-shell {
  width:
    min(
      1240px,
      calc(100% - 48px)
    );

  margin-inline: auto;
}

/* ======================================================
   HERO HEADER
   Navigation is part of the hero composition
   ====================================================== */

.hmc-header {
  position: fixed;
  z-index: 200;

  top: 0;
  right: 0;
  left: 0;

  width: 100%;

  border-bottom:
    1px solid
    rgba(255, 203, 197, 0.22);

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.hmc-main {
  padding-top: 0;
}

.hmc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 88px;
  gap: 28px;
}

.hmc-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
}

.hmc-logo {
  flex: 0 0 auto;

  width: 118px;
  height: 56px;

  object-fit: contain;
  object-position: left center;
}

.hmc-brand-copy {
  display: grid;
  gap: 2px;
}

.hmc-brand-copy strong {
  color:
    var(--ink-600);

  font-size: 14px;
  font-weight: 600;
}

.hmc-brand-copy small {
  color:
    var(--ink-400);

  font-size: 8px;
  font-weight: 500;
  letter-spacing:
    0.14em;
}

.hmc-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;

  font-size: 13px;
  font-weight: 700;
}

.hmc-nav-links a {
  position: relative;

  padding:
    8px 0;

  color:
    var(--ink-400);

  transition:
    color 160ms ease;
}

.hmc-nav-links a::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  border-radius:
    999px;

  background:
    var(--orange-600);

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform 160ms ease;
}

.hmc-nav-links a:hover {
  color:
    var(--ink-600);
}

.hmc-nav-links a:hover::after,
.hmc-nav-links a.is-current::after {
  transform:
    scaleX(1);
}

.hmc-nav-links a.is-current {
  color:
    var(--orange-400);
}

.hmc-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hmc-sign-in {
  padding:
    11px 10px;

  color:
    var(--ink-500);

  font-size: 13px;
  font-weight: 500;
}

.hmc-sign-in:hover {
  color:
    var(--orange-700);
}

.hmc-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 44px;

  padding:
    0 18px;

  border:
    1px solid
    var(--orange-600);

  border-radius:
    12px;

  color:
    #ffffff !important;

  background:
    var(--orange-600);

  font-size: 13px;
  font-weight: 500;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.12);

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.hmc-header-cta:hover {
  border-color:
    var(--orange-700);

  background:
    var(--orange-700);

  box-shadow:
    0 10px 24px
    rgba(255, 83, 3, 0.18);
}

.hmc-menu-button {
  display: none;
  place-items: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border:
    1px solid
    rgba(201, 210, 223, 0.84);

  border-radius:
    12px;

  color:
    var(--ink-600);

  background:
    rgba(255, 255, 255, 0.84);

  cursor: pointer;

  box-shadow:
    0 6px 18px
    rgba(16, 20, 25, 0.05);
}

.hmc-mobile-overlay {
  position: fixed;
  z-index: 280;

  inset: 0;

  visibility: hidden;

  width: 100%;
  height: 100%;

  padding: 0;
  border: 0;

  background:
    rgba(16, 20, 25, 0.30);

  opacity: 0;

  cursor: default;

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.hmc-mobile-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

.hmc-mobile-drawer {
  position: fixed;
  z-index: 300;

  top: 0;
  right: 0;

  display: flex;
  flex-direction: column;

  width:
    min(
      88vw,
      380px
    );

  height: 100dvh;

  overflow-y: auto;

  border-left:
    1px solid
    rgba(255, 203, 197, 0.44);

  background:
    #fffdfc;

  box-shadow:
    -22px 0 60px
    rgba(16, 20, 25, 0.14);

  overscroll-behavior:
    contain;

  transform:
    translateX(104%);

  transition:
    transform 220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

.hmc-mobile-drawer.is-open {
  transform:
    translateX(0);
}

.hmc-mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding:
    20px 20px
    18px;

  border-bottom:
    1px solid
    var(--orange-100);
}

.hmc-mobile-drawer-brand {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 0;
}

.hmc-mobile-drawer-brand img {
  flex: 0 0 auto;

  width: 58px;
  height: 38px;

  object-fit: contain;
}

.hmc-mobile-drawer-brand > span {
  display: grid;
  gap: 2px;

  min-width: 0;
}

.hmc-mobile-drawer-brand strong {
  overflow: hidden;

  color:
    var(--ink-600);

  font-size: 11px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.hmc-mobile-drawer-brand small {
  color:
    var(--ink-300);

  font-size: 6px;
  letter-spacing:
    0.12em;
}

.hmc-mobile-close {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  padding: 0;

  border:
    1px solid
    var(--ink-50);

  border-radius:
    11px;

  color:
    var(--ink-600);

  background:
    #ffffff;

  cursor: pointer;
}

.hmc-mobile-drawer-body {
  flex: 1;

  padding:
    28px 20px;
}

.hmc-mobile-menu-label {
  margin:
    0 0 12px;

  color:
    var(--orange-700);

  font-size: 8px;
  font-weight: 600;
  letter-spacing:
    0.18em;
}

.hmc-mobile-nav {
  display: grid;
}

.hmc-mobile-nav a {
  display: grid;
  grid-template-columns:
    30px
    minmax(0, 1fr)
    20px;

  align-items: center;
  gap: 10px;

  min-height: 62px;

  border-bottom:
    1px solid
    var(--ink-50);

  color:
    var(--ink-500);
}

.hmc-mobile-nav a small {
  color:
    var(--ink-200);

  font-size: 9px;
  font-weight: 600;
}

.hmc-mobile-nav a span {
  font-size: 15px;
  font-weight: 550;
}

.hmc-mobile-nav a svg {
  color:
    var(--ink-300);
}

.hmc-mobile-nav a.is-current {
  color:
    var(--orange-700);
}

.hmc-mobile-nav a.is-current small,
.hmc-mobile-nav a.is-current svg {
  color:
    var(--orange-600);
}

.hmc-mobile-drawer-actions {
  display: grid;
  grid-template-columns:
    1fr
    1.25fr;

  gap: 10px;

  padding:
    18px 20px
    max(
      22px,
      env(
        safe-area-inset-bottom
      )
    );

  border-top:
    1px solid
    var(--orange-100);

  background:
    var(--ink-600);
}

.hmc-mobile-signin,
.hmc-mobile-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 46px;

  border-radius:
    12px;

  font-size: 12px;
  font-weight: 500;
}

.hmc-mobile-signin {
  border:
    1px solid
    rgba(228, 232, 239, 0.30);

  color:
    #ffffff !important;

  background:
    transparent;
}

.hmc-mobile-create {
  border:
    1px solid
    var(--orange-600);

  color:
    #ffffff !important;

  background:
    var(--orange-600);
}

/* ======================================================
   APPROVED HERO DIRECTION
   Full-page composition, no presentation canvas
   ====================================================== */

.hmc-hero {
  position: relative;
  isolation: isolate;

  min-height: 100svh;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 7% 82%,
      rgba(255, 83, 3, 0.24) 0%,
      rgba(255, 119, 93, 0.15) 20%,
      rgba(255, 151, 136, 0.07) 36%,
      transparent 56%
    ),
    radial-gradient(
      circle at 51% 78%,
      rgba(255, 203, 197, 0.15) 0%,
      rgba(255, 229, 227, 0.07) 32%,
      transparent 56%
    ),
    radial-gradient(
      circle at 91% 69%,
      rgba(151, 170, 194, 0.13) 0%,
      rgba(201, 210, 223, 0.08) 28%,
      transparent 54%
    ),
    linear-gradient(
      128deg,
      #ffffff 0%,
      #fffdfc 50%,
      #fff9f7 72%,
      #f8f9fb 100%
    );
}

.hmc-hero-content {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: flex-start;

  min-height: 100svh;

  padding:
    clamp(
      238px,
      29vh,
      292px
    )
    0
    clamp(
      66px,
      7vh,
      88px
    );
}

.hmc-hero-copy {
  position: relative;
  z-index: 6;

  width:
    min(
      49%,
      570px
    );
}

.hmc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin:
    0 0 26px;

  padding:
    8px 14px;

  border:
    1px solid
    rgba(201, 210, 223, 0.72);

  border-radius:
    999px;

  color:
    var(--ink-400);

  background:
    rgba(255, 255, 255, 0.58);

  font-size: 9px;
  font-weight: 600;
  letter-spacing:
    0.18em;

  backdrop-filter:
    blur(10px);
}

.hmc-kicker::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    var(--ink-500);

  box-shadow:
    0 0 0 5px
    rgba(76, 88, 103, 0.05);
}

.hmc-hero h1 {
  max-width: 560px;

  margin: 0;

  color:
    var(--ink-600);

  font-weight: 700;
  line-height: 0.98;
  letter-spacing:
    -0.045em;
}

.hmc-title-main {
  display: block;

  font-size:
    clamp(
      40px,
      4.35vw,
      56px
    );

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  font-style: normal;
  font-weight: 500;
}

.hmc-title-accent {
  display: block;

  margin-top: 2px;

  color:
    var(--orange-600);

  font-size:
    clamp(
      41px,
      4.5vw,
      58px
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-style: italic;
  font-weight: 500;
  letter-spacing:
    -0.04em;
}

.hmc-hero-description {
  max-width: 520px;

  margin:
    24px 0 0;

  color:
    var(--ink-400);

  font-size:
    clamp(
      14px,
      1.05vw,
      16px
    );

  line-height: 1.68;
}

.hmc-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 28px;
}

/* ======================================================
   APPROVED CAPSULE BUTTONS
   ====================================================== */

.hmc-pill {
  display: inline-grid;

  grid-template-columns:
    minmax(0, 1fr)
    42px;

  align-items: center;
  gap: 8px;

  min-width: 190px;
  height: 52px;

  padding:
    5px
    6px
    5px
    18px;

  border-radius:
    999px;

  font-size: 13px;
  font-weight: 500;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.hmc-pill > span {
  color:
    #ffffff !important;

  text-align: center;
  white-space: nowrap;
}

.hmc-pill > i {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border:
    1px solid
    rgba(201, 210, 223, 0.92);

  border-radius:
    50%;

  color:
    var(--ink-600);

  background:
    #ffffff;

  box-shadow:
    0 5px 14px
    rgba(16, 20, 25, 0.10);

  font-style: normal;
}

.hmc-pill--primary {
  border:
    1px solid
    var(--orange-600);

  background:
    var(--orange-600);

  box-shadow:
    0 12px 24px
    rgba(255, 83, 3, 0.14);
}

.hmc-pill--primary:hover {
  border-color:
    var(--orange-700);

  background:
    var(--orange-700);

  box-shadow:
    0 14px 28px
    rgba(255, 83, 3, 0.19);
}

.hmc-pill--secondary {
  border:
    1px solid
    var(--ink-600);

  background:
    var(--ink-600);

  box-shadow:
    0 12px 24px
    rgba(16, 20, 25, 0.12);
}

.hmc-pill--secondary:hover {
  border-color:
    var(--ink-500);

  background:
    var(--ink-500);

  box-shadow:
    0 14px 28px
    rgba(16, 20, 25, 0.16);
}

.hmc-pill--secondary-inverse {
  border-color:
    var(--ink-50);

  background:
    transparent;
}

.hmc-hero-note {
  margin:
    24px 0 0;

  color:
    rgba(111, 128, 149, 0.78);

  font-size: 9px;
  font-weight: 600;
  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}

/* ======================================================
   SOFT RIGHT-SIDE PATTERN
   Deliberately around 50% visual strength
   ====================================================== */

.hmc-hero-art {
  position: absolute;
  z-index: 1;

  top: 80px;
  right: -8%;
  bottom: 0;

  width:
    min(
      62%,
      880px
    );

  overflow: hidden;

  opacity: 0.38;

  pointer-events: none;
}

.hmc-modern-glow {
  position: absolute;

  top: 2%;
  right: 1%;

  width: 92%;
  aspect-ratio: 1;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 36% 48%,
      rgba(255, 203, 197, 0.28) 0%,
      rgba(255, 229, 227, 0.18) 30%,
      rgba(201, 210, 223, 0.16) 52%,
      rgba(151, 170, 194, 0.07) 68%,
      transparent 75%
    );

  filter:
    blur(2px);
}

.hmc-modern-arc {
  position: absolute;

  border-style:
    solid;

  border-radius:
    50%;
}

.hmc-modern-arc--outer {
  top: 10%;
  right: -38%;

  width: 112%;
  aspect-ratio: 1;

  border-width:
    44px;

  border-color:
    rgba(255, 255, 255, 0.48);

  box-shadow:
    0 0 0 1px
    rgba(255, 203, 197, 0.25);
}

.hmc-modern-arc--middle {
  top: 24%;
  right: -27%;

  width: 88%;
  aspect-ratio: 1;

  border-width:
    58px;

  border-color:
    rgba(201, 210, 223, 0.34);
}

.hmc-modern-arc--inner {
  top: 39%;
  right: -14%;

  width: 63%;
  aspect-ratio: 1;

  border-width:
    44px;

  border-color:
    rgba(255, 151, 136, 0.12);
}

.hmc-modern-orbit {
  position: absolute;

  border:
    1px solid
    rgba(111, 128, 149, 0.34);

  border-radius:
    50%;
}

.hmc-modern-orbit--one {
  top: 12%;
  right: -31%;

  width: 104%;
  aspect-ratio: 1;
}

.hmc-modern-orbit--two {
  top: 31%;
  right: -17%;

  width: 76%;
  aspect-ratio: 1;

  border-style:
    dashed;

  border-color:
    rgba(255, 83, 3, 0.16);
}

.hmc-modern-dot {
  position: absolute;

  border-radius:
    50%;

  box-shadow:
    0 10px 24px
    rgba(16, 20, 25, 0.05);
}

.hmc-modern-dot--one {
  top: 25%;
  right: 29%;

  width: 42px;
  height: 42px;

  background:
    linear-gradient(
      145deg,
      var(--orange-200),
      var(--orange-500)
    );

  opacity: 0.58;
}

.hmc-modern-dot--two {
  top: 57%;
  left: 21%;

  width: 38px;
  height: 38px;

  background:
    linear-gradient(
      145deg,
      var(--ink-50),
      var(--ink-200)
    );

  opacity: 0.48;
}

.hmc-hero-side-note {
  position: absolute;

  top: 24%;
  left: 23%;

  display: flex;
  align-items: flex-start;
  gap: 16px;

  color:
    var(--ink-300);
}

.hmc-hero-side-note > span {
  width: 1px;
  height: 116px;

  background:
    rgba(111, 128, 149, 0.55);
}

.hmc-hero-side-note p {
  margin: 8px 0 0;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing:
    0.18em;
}


/* ======================================================
   HERO RESPONSIVE
   ====================================================== */

@media (max-width: 1100px) {
  .hmc-nav-links,
  .hmc-nav-actions {
    display: none;
  }

  .hmc-menu-button {
    display: grid;
  }

  .hmc-hero {
    position: relative;
    top: auto;
  }

  .hmc-hero-content {
    min-height:
      760px;

    padding:
      190px 0
      68px;
  }

  .hmc-hero-copy {
    width:
      min(
        62%,
        580px
      );
  }

  .hmc-hero-art {
    right: -14%;
    width: 64%;

    opacity: 0.38;
  }
}

@media (max-width: 760px) {

  .hmc-nav {
    min-height: 72px;
  }

  .hmc-logo {
    width: 82px;
    height: 42px;
  }

  .hmc-brand-copy strong {
    font-size: 11px;
  }

  .hmc-brand-copy small {
    font-size: 7px;
  }

  .hmc-nav-actions {
    display: none;
  }

  .hmc-menu-button {
    display: grid;
  }

  .hmc-hero {
    min-height: auto;
  }

  .hmc-hero-content {
    min-height:
      720px;

    padding:
      138px 0
      62px;
  }

  .hmc-hero-copy {
    width: 100%;
  }

  .hmc-title-main,
  .hmc-title-accent {
    font-size:
      clamp(
        34px,
        9.5vw,
        44px
      );
  }

  .hmc-hero-description {
    max-width:
      500px;

    font-size:
      13px;
  }

  .hmc-hero-art {
    top: 74px;
    right: -210px;
    bottom: auto;

    width: 500px;
    height: 370px;

    opacity: 0.24;
  }

  .hmc-hero-side-note {
    display: none;
  }
}

@media (max-width: 520px) {
  .hmc-hero-content {
    min-height:
      690px;

    padding:
      126px 0
      56px;
  }

  .hmc-kicker {
    margin-bottom:
      20px;

    padding:
      7px 11px;

    font-size:
      7px;
  }

  .hmc-title-main,
  .hmc-title-accent {
    font-size:
      clamp(
        30px,
        9vw,
        38px
      );
  }

  .hmc-hero-description {
    margin-top:
      18px;

    font-size:
      12px;
  }

  .hmc-hero-actions {
    align-items: stretch;
    flex-direction: column;

    margin-top:
      24px;
  }

  .hmc-pill {
    width: 100%;
    min-width: 0;
  }

  .hmc-hero-note {
    margin-top:
      20px;

    font-size: 8px;
    letter-spacing:
      0.15em;
  }

  .hmc-hero-art {
    right: -240px;

    width: 500px;
    height: 320px;

    opacity: 0.18;
  }
}


/* ======================================================
   DESKTOP STICKY HERO
   Next sections slide over the hero to shorten perceived scroll
   ====================================================== */

@media (min-width: 1101px) {
  .hmc-hero {
    position: sticky;

    top: 0;
    z-index: 1;
  }

  .hmc-section,
  .hmc-footer {
    position: relative;
    z-index: 3;
  }

  #how {
    box-shadow:
      0 -22px 48px
      rgba(16, 20, 25, 0.08);
  }
}

/* ======================================================
   SHARED SECTIONS
   ====================================================== */

.hmc-section {
  padding:
    82px 0;

  scroll-margin-top:
    88px;
}

.hmc-section--dark {
  color:
    var(--ink-50);

  background:
    var(--ink-600);
}

.hmc-section-heading {
  max-width: 640px;

  margin-bottom: 36px;
}

.hmc-section-heading > p,
.hmc-trust-intro > div > p {
  margin:
    0 0 10px;

  color:
    var(--orange-700);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.17em;
}

.hmc-section--dark
.hmc-section-heading > p {
  color:
    var(--orange-700);
}

.hmc-section-heading h2,
.hmc-trust-intro h2 {
  margin: 0;

  color: var(--ink-600);

  font-size:
    clamp(
      36px,
      4.4vw,
      54px
    );

  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hmc-section--dark
.hmc-section-heading h2 {
  color:
    var(--ink-50);
}

.hmc-section-heading > span {
  display: block;

  margin-top: 14px;

  color:
    var(--ink-400);

  line-height: 1.7;
}

.hmc-section--dark
.hmc-section-heading > span {
  color:
    var(--ink-200);
}

/* how it works */

.hmc-steps {
  display: grid;
  grid-template-columns:
    repeat(5, 1fr);

  gap: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(201, 210, 223, 0.22);

  border-radius: 22px;

  background:
    transparent;
}

.hmc-steps article {
  min-height: 198px;

  padding:
    34px 26px;

  border-right:
    1px solid
    rgba(201, 210, 223, 0.16);

  background:
    var(--ink-600);

  transition:
    background-color 160ms ease;
}

.hmc-steps article:last-child {
  border-right: 0;
}

.hmc-steps article:hover {
  background:
    #161c23;
}

.hmc-steps strong {
  color:
    var(--orange-400);

  font-size: 28px;
  font-weight: 650;
}

.hmc-steps h3 {
  margin:
    16px 0 7px;

  color:
    var(--ink-50);

  font-size: 14px;
  font-weight: 600;
}

.hmc-steps p {
  margin: 0;

  color:
    var(--ink-200);

  font-size: 12px;
  line-height: 1.6;
}

/* ======================================================
   CLICKABLE MENTOR TABS
   ====================================================== */

.hmc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 26px;
}

.hmc-tabs button {
  min-height: 42px;

  padding:
    0 16px;

  border:
    1px solid
    var(--ink-100);

  border-radius: 999px;

  color:
    var(--ink-500);

  background:
    var(--surface);

  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.hmc-tabs button:hover {
  border-color:
    var(--ink-600);

  color: #ffffff;

  background:
    var(--ink-600);
}

.hmc-tabs button.is-active {
  border-color:
    var(--ink-600);

  color: #ffffff;

  background:
    var(--ink-600);
}

.hmc-mentor-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;
}

.hmc-mentor-card {
  display: flex;
  flex-direction: column;

  min-height: 238px;
  padding: 24px;

  border:
    1px solid
    var(--ink-50);

  border-top:
    3px solid
    var(--orange-600);

  border-radius: 18px;

  background:
    var(--surface);

  box-shadow:
    0 8px 26px
    rgba(16, 20, 25, 0.045);
}

.hmc-mentor-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hmc-avatar {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  color:
    var(--ink-600);

  background:
    var(--orange-100);

  font-size: 12px;
  font-weight: 600;
}

.hmc-mentor-card-top strong {
  display: block;

  color:
    var(--ink-600);

  font-weight: 600;
}

.hmc-mentor-card-top small {
  display: block;

  margin-top: 3px;

  color:
    var(--orange-700);

  font-size: 11px;
  font-weight: 500;
}

.hmc-mentor-card > p {
  margin:
    18px 0;

  color:
    var(--ink-400);

  font-size: 13px;
  line-height: 1.65;
}

.hmc-mentor-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  margin-top: auto;
  padding-top: 14px;

  border-top:
    1px solid
    var(--ink-50);

  color:
    var(--ink-300);

  font-size: 10px;
}

.hmc-request-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding:
    0 14px;

  border:
    1px solid
    var(--ink-600);

  border-radius: 999px;

  color: #ffffff !important;
  background:
    var(--ink-600);

  font-size: 11px;
  font-weight: 500;

  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.hmc-request-button:hover {
  border-color:
    var(--ink-500);

  background:
    var(--ink-500);
}

/* ======================================================
   TRUST UI
   ====================================================== */

.hmc-trust {
  color:
    var(--ink-50);

  background:
    linear-gradient(
      135deg,
      var(--ink-600) 0%,
      var(--ink-500) 100%
    );
}

.hmc-trust-intro {
  max-width: 780px;
  margin-bottom: 32px;
}

.hmc-trust-intro > p {
  margin:
    0 0 10px;

  color:
    var(--orange-400);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.17em;
}

.hmc-trust-intro h2 {
  margin: 0;

  color:
    var(--ink-50);

  font-size:
    clamp(
      32px,
      4vw,
      48px
    );

  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hmc-trust-intro > span {
  display: block;

  max-width: 680px;
  margin-top: 14px;

  color:
    var(--ink-100);

  font-size: 16px;
  line-height: 1.7;
}

.hmc-trust-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 12px;
}

.hmc-trust-card {
  min-height: 158px;
  padding: 20px;

  border:
    1px solid
    rgba(228, 232, 239, 0.10);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.05);

  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.hmc-trust-card:hover {
  border-color:
    rgba(255, 151, 136, 0.32);

  background:
    rgba(255, 255, 255, 0.075);
}

.hmc-trust-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  color:
    var(--ink-600);

  background:
    var(--teal-600);

  box-shadow:
    0 8px 18px
    rgba(46, 196, 182, 0.16);
}

.hmc-trust-card h3 {
  margin:
    18px 0 7px;

  color:
    var(--ink-50);

  font-size: 13px;
  font-weight: 600;
}

.hmc-trust-card p {
  margin: 0;

  color:
    var(--ink-100);

  font-size: 11px;
  line-height: 1.6;
}

/* accountability */

.hmc-rating-grid {
  display: grid;
  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;
}

.hmc-rating-grid article {
  padding: 24px;

  border:
    1px solid
    var(--ink-50);

  border-radius: 18px;

  background:
    var(--surface);
}

.hmc-rating-grid small {
  color:
    var(--ink-300);
}

.hmc-rating-grid article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 16px;
}

.hmc-rating-grid article > div span {
  padding:
    7px 11px;

  border-radius: 999px;

  color:
    var(--ink-500);

  background:
    var(--ink-50);

  font-size: 10px;
  font-weight: 500;
}

/* CTA */

.hmc-cta-section {
  padding-bottom: 72px;
}

.hmc-cta {
  padding: 54px;

  border-radius: 28px;

  color:
    var(--ink-50);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 83, 3, 0.28),
      transparent 25rem
    ),
    var(--ink-600);
}

.hmc-cta h2 {
  max-width: 680px;

  margin: 0;

  color:
    var(--ink-50);

  font-size:
    clamp(
      32px,
      4vw,
      50px
    );

  font-weight: 700;
  letter-spacing: -0.04em;
}

.hmc-cta > p {
  max-width: 580px;

  margin:
    16px 0 28px;

  color:
    var(--ink-200);

  line-height: 1.7;
}

/* ======================================================
   SECONDARY FOOTER
   ====================================================== */

.hmc-footer {
  padding:
    48px 0 28px;

  color:
    var(--ink-100);

  background:
    var(--ink-600);
}

.hmc-footer-grid {
  display: grid;
  grid-template-columns:
    1.3fr
    repeat(3, 1fr);

  gap: 38px;

  padding-bottom: 34px;
}

.hmc-footer .hmc-brand-copy strong {
  color:
    var(--ink-50);
}

.hmc-footer .hmc-brand-copy small {
  color:
    var(--ink-200);
}

.hmc-footer-brand > p {
  max-width: 310px;

  margin:
    16px 0 0;

  color:
    var(--ink-200);

  font-size: 12px;
  line-height: 1.65;
}

.hmc-footer-grid > div:not(:first-child) {
  display: grid;
  align-content: start;
  gap: 9px;
}

.hmc-footer h4 {
  margin:
    0 0 5px;

  color:
    var(--ink-50);

  font-size: 12px;
  font-weight: 600;
}

.hmc-footer-grid a {
  color:
    var(--ink-100);

  font-size: 12px;
  font-weight: 400;

  transition:
    color 150ms ease;
}

.hmc-footer-grid a:hover {
  color:
    var(--orange-400);
}

.hmc-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(228, 232, 239, 0.10);

  color:
    var(--ink-200);

  font-size: 10px;
}

/* ======================================================
   GENTLE SCROLL REVEAL
   no hero scroll button
   ====================================================== */

.hmc-reveal {
  opacity: 1;
  transform: none;
}


/* Safe entrance motion: never hides page sections */
.hmc-hero-copy,
.hmc-orbit {
  animation: hmc-enter 520ms ease both;
}

.hmc-orbit {
  animation-delay: 80ms;
}

@keyframes hmc-enter {
  from {
    opacity: 0.01;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1100px) {
  .hmc-nav-links {
    display: none;
  }

  .hmc-hero-grid {
    grid-template-columns:
      1fr;

    gap: 28px;

    min-height: auto;

    padding:
      50px 0
      44px;
  }

  .hmc-orbit {
    width:
      min(
        100%,
        480px
      );
  }

  .hmc-steps {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .hmc-mentor-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .hmc-trust-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .hmc-footer-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .hmc-shell {
    width:
      min(
        calc(100% - 32px),
        1240px
      );
  }

  .hmc-nav {
    min-height: 68px;
  }

  .hmc-logo {
    width: 82px;
    height: 42px;
  }

  .hmc-brand-copy strong {
    font-size: 11px;
  }

  .hmc-brand-copy small {
    font-size: 7px;
  }

  .hmc-nav-actions {
    display: none;
  }

  .hmc-menu-button {
    display: grid;
  }

  .hmc-hero-grid {
    padding:
      38px 0
      34px;
  }

  .hmc-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hmc-pill {
    width: 100%;
  }

  .hmc-orbit-copy,
  .hmc-orbit-dots {
    display: none;
  }

  .hmc-section {
    padding:
      58px 0;
  }

  .hmc-tabs {
    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: 8px;

    scrollbar-width: none;
  }

  .hmc-tabs::-webkit-scrollbar {
    display: none;
  }

  .hmc-tabs button {
    flex: 0 0 auto;
  }

  .hmc-steps,
  .hmc-mentor-grid,
  .hmc-trust-grid,
  .hmc-rating-grid,
  .hmc-footer-grid {
    grid-template-columns: 1fr;
  }

  .hmc-cta {
    padding:
      38px 24px;
  }

  .hmc-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}


@media (max-width: 420px) {
  .hmc-mobile-drawer {
    width:
      min(
        92vw,
        360px
      );
  }

  .hmc-mobile-drawer-actions {
    grid-template-columns: 1fr;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .hmc-home *,
  .hmc-home *::before,
  .hmc-home *::after {
    animation:
      none !important;

    transition-duration:
      0.001ms !important;
  }

}


/* ======================================================
   V10 — DARK TECHNICAL GRID HERO
   Buildly-inspired pattern using Mentor Connect colours
   ====================================================== */

.hmc-hero {
  position: relative !important;
  isolation: isolate;

  min-height: 100svh;

  overflow: hidden;

  background-color:
    #030405 !important;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 52% 18%,
      rgba(255, 83, 3, 0.24) 0%,
      rgba(255, 119, 93, 0.12) 18%,
      rgba(255, 151, 136, 0.055) 32%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 52% 36%,
      rgba(76, 88, 103, 0.48) 0%,
      rgba(45, 53, 63, 0.34) 32%,
      rgba(16, 20, 25, 0.18) 52%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #101419 0%,
      #080b0f 48%,
      #030405 100%
    ) !important;

  background-size:
    54px 54px,
    54px 54px,
    auto,
    auto,
    auto !important;

  background-position:
    center top,
    center top,
    center top,
    center top,
    center !important;
}

/* Fade the grid out towards the bottom and edges */
.hmc-hero::before {
  content: "";

  position: absolute;
  z-index: 0;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 4, 5, 0.02) 0%,
      rgba(3, 4, 5, 0.10) 45%,
      rgba(3, 4, 5, 0.58) 78%,
      #030405 100%
    ),
    radial-gradient(
      ellipse at center top,
      transparent 0%,
      transparent 45%,
      rgba(3, 4, 5, 0.12) 70%,
      rgba(3, 4, 5, 0.42) 100%
    );
}

/* Soft orange focal glow behind the content */
.hmc-hero::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: -8%;
  left: 50%;

  width: 62%;
  height: 70%;

  transform:
    translateX(-50%);

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 83, 3, 0.18) 0%,
      rgba(255, 119, 93, 0.075) 30%,
      rgba(255, 151, 136, 0.025) 50%,
      transparent 72%
    );

  filter:
    blur(18px);
}

/* Old orbit artwork is not used in this version */
.hmc-hero-art {
  display: none !important;
}

.hmc-hero-content {
  position: relative;
  z-index: 2;
}

/* ======================================================
   HERO TYPOGRAPHY ON DARK BACKGROUND
   ====================================================== */

.hmc-kicker {
  color:
    var(--orange-200) !important;

  border-color:
    rgba(255, 151, 136, 0.30) !important;

  background:
    rgba(255, 83, 3, 0.08) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.025);
}

.hmc-kicker::before {
  background:
    var(--orange-500) !important;

  box-shadow:
    0 0 0 5px
    rgba(255, 83, 3, 0.09) !important;
}

.hmc-title-main {
  color:
    #f5f7fa !important;
}

.hmc-title-accent {
  color:
    var(--orange-500) !important;

  text-shadow:
    0 10px 30px
    rgba(255, 83, 3, 0.12);
}

.hmc-hero-description {
  color:
    var(--ink-100) !important;
}

.hmc-hero-note {
  color:
    var(--ink-200) !important;
}

/* ======================================================
   HERO BUTTONS
   ====================================================== */

.hmc-pill--primary {
  border-color:
    var(--orange-600) !important;

  background:
    var(--orange-600) !important;

  box-shadow:
    0 10px 26px
    rgba(255, 83, 3, 0.22) !important;
}

.hmc-pill--primary:hover {
  border-color:
    var(--orange-500) !important;

  background:
    var(--orange-500) !important;

  box-shadow:
    0 14px 34px
    rgba(255, 83, 3, 0.28) !important;
}

.hmc-pill--secondary {
  border-color:
    rgba(201, 210, 223, 0.28) !important;

  background:
    rgba(16, 20, 25, 0.82) !important;

  box-shadow:
    0 10px 26px
    rgba(0, 0, 0, 0.24) !important;

  backdrop-filter:
    blur(10px);
}

.hmc-pill--secondary:hover {
  border-color:
    rgba(201, 210, 223, 0.46) !important;

  background:
    rgba(45, 53, 63, 0.92) !important;
}

.hmc-pill > i {
  border-color:
    rgba(201, 210, 223, 0.26) !important;

  background:
    #ffffff !important;
}

/* ======================================================
   HEADER ON DARK GRID HERO
   ====================================================== */

.hmc-header {
  border-bottom:
    1px solid
    rgba(201, 210, 223, 0.10) !important;

  background:
    rgba(8, 11, 15, 0.78) !important;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.12) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.hmc-brand-copy strong,
.hmc-nav-links a,
.hmc-sign-in {
  color:
    var(--ink-50) !important;
}

.hmc-brand-copy small {
  color:
    var(--ink-200) !important;
}

.hmc-nav-links a:hover {
  color:
    #ffffff !important;
}

.hmc-nav-links a.is-current {
  color:
    var(--orange-400) !important;
}

.hmc-menu-button {
  border-color:
    rgba(201, 210, 223, 0.20) !important;

  color:
    #ffffff !important;

  background:
    rgba(16, 20, 25, 0.74) !important;
}

/* ======================================================
   RESPONSIVE GRID
   ====================================================== */

@media (max-width: 1100px) {
  .hmc-hero {
    background-size:
      46px 46px,
      46px 46px,
      auto,
      auto,
      auto !important;
  }
}

@media (max-width: 760px) {
  .hmc-hero {
    background-size:
      38px 38px,
      38px 38px,
      auto,
      auto,
      auto !important;
  }

  .hmc-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(3, 4, 5, 0.02) 0%,
        rgba(3, 4, 5, 0.16) 48%,
        rgba(3, 4, 5, 0.72) 82%,
        #030405 100%
      );
  }

  .hmc-hero::after {
    top: 2%;

    width: 92%;
    height: 48%;

    opacity: 0.82;
  }

  .hmc-title-main,
  .hmc-title-accent {
    text-shadow:
      0 8px 24px
      rgba(0, 0, 0, 0.16);
  }
}


/* ======================================================
   V11 — CENTERED HERO + ALTERNATING SECTION BACKGROUNDS
   ====================================================== */

/* ---------- HERO CONTENT: CENTERED ---------- */

.hmc-hero-content {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  min-height: 100svh !important;

  padding:
    clamp(
      190px,
      24vh,
      245px
    )
    0
    clamp(
      78px,
      9vh,
      108px
    ) !important;
}

.hmc-hero-copy {
  width:
    min(
      100%,
      780px
    ) !important;

  margin-inline:
    auto !important;

  text-align:
    center !important;
}

.hmc-kicker {
  margin:
    0 auto
    26px !important;
}

.hmc-hero h1 {
  max-width:
    760px !important;

  margin-inline:
    auto !important;

  text-align:
    center !important;
}

.hmc-title-main,
.hmc-title-accent {
  text-align:
    center !important;
}

.hmc-hero-description {
  max-width:
    660px !important;

  margin:
    24px auto 0 !important;

  text-align:
    center !important;
}

.hmc-hero-actions {
  justify-content:
    center !important;
}

.hmc-hero-note {
  text-align:
    center !important;
}

/* ---------- DARK HERO GRID ---------- */

.hmc-hero {
  background-color:
    #030405 !important;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.052) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 83, 3, 0.24) 0%,
      rgba(255, 119, 93, 0.12) 20%,
      rgba(255, 151, 136, 0.045) 36%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 50% 35%,
      rgba(76, 88, 103, 0.44) 0%,
      rgba(45, 53, 63, 0.30) 34%,
      rgba(16, 20, 25, 0.16) 54%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #101419 0%,
      #080b0f 48%,
      #030405 100%
    ) !important;

  background-size:
    54px 54px,
    54px 54px,
    auto,
    auto,
    auto !important;
}

/* ---------- ALTERNATING SECTION RHYTHM ---------- */

/*
  1. Hero          = dark
  2. How it works  = white
  3. Find mentor   = dark
  4. Trust         = white
  5. Accountability = dark
  6. CTA area      = white
*/

/* HOW IT WORKS — WHITE */

#how {
  color:
    var(--ink-500) !important;

  background:
    #ffffff !important;

  box-shadow:
    none !important;
}

#how .hmc-section-heading > p {
  color:
    var(--orange-700) !important;
}

#how .hmc-section-heading h2 {
  color:
    var(--ink-600) !important;
}

#how .hmc-section-heading > span {
  color:
    var(--ink-400) !important;
}

#how .hmc-steps {
  border:
    1px solid
    var(--ink-50) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 14px 38px
    rgba(16, 20, 25, 0.045);
}

#how .hmc-steps article {
  border-right:
    1px solid
    var(--ink-50) !important;

  color:
    var(--ink-500) !important;

  background:
    #ffffff !important;
}

#how .hmc-steps article:last-child {
  border-right:
    0 !important;
}

#how .hmc-steps article:hover {
  background:
    #fff8f7 !important;
}

#how .hmc-steps article > span {
  color:
    var(--orange-500) !important;
}

#how .hmc-steps article h3 {
  color:
    var(--ink-600) !important;
}

#how .hmc-steps article p {
  color:
    var(--ink-400) !important;
}

/* FIND A MENTOR — DARK */

#mentors {
  color:
    var(--ink-50) !important;

  background:
    var(--ink-600) !important;
}

#mentors .hmc-section-heading > p {
  color:
    var(--orange-400) !important;
}

#mentors .hmc-section-heading h2 {
  color:
    #ffffff !important;
}

#mentors .hmc-section-heading > span {
  color:
    var(--ink-200) !important;
}

/* Mentor category tabs on dark */
#mentors .hmc-mentor-tabs button {
  border-color:
    rgba(201, 210, 223, 0.18) !important;

  color:
    var(--ink-100) !important;

  background:
    rgba(255, 255, 255, 0.04) !important;
}

#mentors .hmc-mentor-tabs button:hover {
  border-color:
    rgba(255, 151, 136, 0.44) !important;

  color:
    #ffffff !important;
}

#mentors .hmc-mentor-tabs button.is-active {
  border-color:
    var(--orange-600) !important;

  color:
    #ffffff !important;

  background:
    var(--orange-600) !important;
}

/* Mentor cards stay readable, slightly lifted */
#mentors .hmc-mentor-card {
  border-color:
    rgba(201, 210, 223, 0.14) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 16px 40px
    rgba(0, 0, 0, 0.16) !important;
}

/* TRUST & SAFETY — WHITE */

#trust {
  color:
    var(--ink-500) !important;

  background:
    #ffffff !important;
}

#trust .hmc-section-heading > p {
  color:
    var(--orange-700) !important;
}

#trust .hmc-section-heading h2 {
  color:
    var(--ink-600) !important;
}

#trust .hmc-section-heading > span {
  color:
    var(--ink-400) !important;
}

#trust .hmc-trust-card {
  border:
    1px solid
    var(--ink-50) !important;

  color:
    var(--ink-500) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 12px 34px
    rgba(16, 20, 25, 0.045) !important;
}

#trust .hmc-trust-card h3 {
  color:
    var(--ink-600) !important;
}

#trust .hmc-trust-card p {
  color:
    var(--ink-400) !important;
}

/* ACCOUNTABILITY — DARK */

#accountability {
  color:
    var(--ink-50) !important;

  background:
    var(--ink-600) !important;
}

#accountability .hmc-section-heading > p {
  color:
    var(--orange-400) !important;
}

#accountability .hmc-section-heading h2 {
  color:
    #ffffff !important;
}

#accountability .hmc-section-heading > span {
  color:
    var(--ink-200) !important;
}

#accountability .hmc-accountability-card {
  border-color:
    rgba(201, 210, 223, 0.16) !important;

  background:
    #161c23 !important;
}

#accountability .hmc-accountability-card p,
#accountability .hmc-accountability-card span {
  color:
    var(--ink-100) !important;
}

/* ---------- KEEP CTA/FOOTER SEPARATED ---------- */

.hmc-cta-section {
  background:
    #ffffff !important;
}

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

@media (max-width: 1100px) {
  .hmc-hero-content {
    min-height:
      760px !important;

    padding:
      170px 0
      74px !important;
  }

  .hmc-hero-copy {
    max-width:
      680px !important;
  }
}

@media (max-width: 760px) {
  .hmc-hero-content {
    min-height:
      700px !important;

    padding:
      130px 0
      62px !important;
  }

  .hmc-hero-copy {
    width:
      100% !important;

    padding-inline:
      4px;
  }

  .hmc-title-main,
  .hmc-title-accent {
    text-align:
      center !important;
  }

  .hmc-hero-actions {
    align-items:
      stretch !important;

    flex-direction:
      column !important;

    width:
      min(
        100%,
        390px
      );

    margin:
      24px auto 0 !important;
  }

  .hmc-hero-note {
    margin-top:
      20px !important;
  }
}

@media (max-width: 520px) {
  .hmc-hero-content {
    min-height:
      670px !important;

    padding:
      116px 0
      54px !important;
  }

  .hmc-kicker {
    margin-bottom:
      20px !important;
  }
}


/* ======================================================
   V12 — ORANGE TECH GRID + DUAL-STATE FIXED HEADER
   ====================================================== */

/* ---------- HERO: ORANGE-DOMINANT TECHNICAL GRID ---------- */

.hmc-hero {
  position: sticky !important;
  top: 0;

  min-height: 100svh;

  overflow: hidden;

  background-color:
    #030405 !important;

  background-image:
    linear-gradient(
      rgba(255, 151, 136, 0.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 151, 136, 0.075) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 17%,
      rgba(255, 83, 3, 0.42) 0%,
      rgba(255, 83, 3, 0.24) 18%,
      rgba(255, 119, 93, 0.12) 34%,
      rgba(255, 151, 136, 0.045) 48%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 50% 33%,
      rgba(75, 18, 0, 0.44) 0%,
      rgba(47, 8, 0, 0.34) 34%,
      rgba(16, 20, 25, 0.22) 56%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #101419 0%,
      #080b0f 48%,
      #030405 100%
    ) !important;

  background-size:
    54px 54px,
    54px 54px,
    auto,
    auto,
    auto !important;

  background-position:
    center top,
    center top,
    center top,
    center top,
    center !important;
}

.hmc-hero::before {
  content: "";

  position: absolute;
  z-index: 0;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 4, 5, 0.02) 0%,
      rgba(3, 4, 5, 0.04) 35%,
      rgba(3, 4, 5, 0.30) 68%,
      rgba(3, 4, 5, 0.86) 100%
    ),
    radial-gradient(
      ellipse at center top,
      transparent 0%,
      transparent 46%,
      rgba(3, 4, 5, 0.10) 72%,
      rgba(3, 4, 5, 0.38) 100%
    );
}

.hmc-hero::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: -10%;
  left: 50%;

  width: 68%;
  height: 72%;

  transform:
    translateX(-50%);

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 83, 3, 0.24) 0%,
      rgba(255, 119, 93, 0.11) 30%,
      rgba(255, 151, 136, 0.035) 52%,
      transparent 74%
    );

  filter:
    blur(18px);
}

.hmc-hero-art {
  display: none !important;
}

/* ---------- CENTERED HERO CONTENT ---------- */

.hmc-hero-content {
  position: relative;
  z-index: 2;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  min-height: 100svh !important;

  padding:
    clamp(
      205px,
      25vh,
      255px
    )
    0
    clamp(
      78px,
      9vh,
      108px
    ) !important;
}

.hmc-hero-copy {
  width:
    min(
      100%,
      860px
    ) !important;

  margin-inline:
    auto !important;

  text-align:
    center !important;
}

.hmc-kicker {
  margin:
    0 auto
    24px !important;

  color:
    var(--orange-100) !important;

  border:
    1px solid
    rgba(255, 151, 136, 0.30) !important;

  background:
    rgba(255, 83, 3, 0.085) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.025);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.hmc-kicker::before {
  background:
    var(--orange-500) !important;

  box-shadow:
    0 0 0 5px
    rgba(255, 83, 3, 0.10) !important;
}

.hmc-hero h1 {
  max-width:
    840px !important;

  margin:
    0 auto !important;

  text-align:
    center !important;
}

.hmc-title-main {
  color:
    #ffffff !important;

  font-size:
    clamp(
      46px,
      5.3vw,
      68px
    ) !important;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-style:
    normal !important;

  font-weight:
    700 !important;

  line-height:
    0.98 !important;

  letter-spacing:
    -0.05em !important;

  text-align:
    center !important;
}

.hmc-title-accent {
  display: block;

  margin-top:
    7px !important;

  color:
    var(--orange-400) !important;

  font-size:
    clamp(
      42px,
      4.7vw,
      60px
    ) !important;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-style:
    normal !important;

  font-weight:
    650 !important;

  line-height:
    1 !important;

  letter-spacing:
    -0.045em !important;

  text-align:
    center !important;

  text-shadow:
    0 12px 34px
    rgba(255, 83, 3, 0.16);
}

.hmc-hero-description {
  max-width:
    660px !important;

  margin:
    24px auto 0 !important;

  color:
    var(--ink-100) !important;

  font-size:
    clamp(
      14px,
      1.05vw,
      16px
    ) !important;

  line-height:
    1.7 !important;

  text-align:
    center !important;
}

.hmc-hero-actions {
  justify-content:
    center !important;

  gap:
    14px !important;

  margin-top:
    30px !important;
}

.hmc-hero-note {
  color:
    var(--ink-200) !important;

  text-align:
    center !important;
}

/* ---------- GLASS HERO BUTTONS ---------- */

.hmc-pill--glass-primary,
.hmc-pill--glass-secondary {
  border:
    1px solid
    rgba(255, 255, 255, 0.20) !important;

  background:
    rgba(255, 255, 255, 0.075) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.10),
    0 12px 34px
    rgba(0, 0, 0, 0.20) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.hmc-pill--glass-primary {
  border-color:
    rgba(255, 151, 136, 0.42) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 83, 3, 0.28),
      rgba(255, 119, 93, 0.09)
    ) !important;
}

.hmc-pill--glass-secondary {
  border-color:
    rgba(201, 210, 223, 0.24) !important;

  background:
    linear-gradient(
      135deg,
      rgba(76, 88, 103, 0.28),
      rgba(16, 20, 25, 0.22)
    ) !important;
}

.hmc-pill--glass-primary:hover {
  border-color:
    rgba(255, 151, 136, 0.70) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 83, 3, 0.40),
      rgba(255, 119, 93, 0.14)
    ) !important;
}

.hmc-pill--glass-secondary:hover {
  border-color:
    rgba(228, 232, 239, 0.42) !important;

  background:
    linear-gradient(
      135deg,
      rgba(76, 88, 103, 0.42),
      rgba(16, 20, 25, 0.28)
    ) !important;
}

.hmc-pill--glass-primary > span,
.hmc-pill--glass-secondary > span {
  color:
    #ffffff !important;
}

.hmc-pill--glass-primary > i,
.hmc-pill--glass-secondary > i {
  border:
    1px solid
    rgba(255, 255, 255, 0.24) !important;

  color:
    var(--ink-600) !important;

  background:
    rgba(255, 255, 255, 0.90) !important;

  box-shadow:
    0 5px 18px
    rgba(0, 0, 0, 0.15) !important;
}

/* ======================================================
   FIXED HEADER: HERO MODE
   Buildly-inspired floating glass navigation
   ====================================================== */

.hmc-header {
  position: fixed !important;
  z-index: 300 !important;

  top: 0;
  right: 0;
  left: 0;

  width: 100%;

  padding:
    16px 0 0;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transition:
    padding 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.hmc-header .hmc-nav {
  padding-inline:
    18px;

  transition:
    min-height 180ms ease,
    border-color 180ms ease,
    border-radius 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.hmc-header.is-hero .hmc-nav {
  min-height:
    72px;

  border:
    1px solid
    rgba(255, 151, 136, 0.24);

  border-radius:
    20px 20px
    0 0;

  background:
    linear-gradient(
      135deg,
      rgba(16, 20, 25, 0.64),
      rgba(45, 53, 63, 0.34)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06),
    0 14px 36px
    rgba(0, 0, 0, 0.14);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.hmc-header.is-hero
.hmc-brand-copy strong,
.hmc-header.is-hero
.hmc-nav-links a,
.hmc-header.is-hero
.hmc-sign-in {
  color:
    var(--ink-50) !important;
}

.hmc-header.is-hero
.hmc-brand-copy small {
  color:
    var(--ink-200) !important;
}

.hmc-header.is-hero
.hmc-nav-links a.is-current {
  color:
    var(--orange-300) !important;
}

.hmc-header.is-hero
.hmc-header-cta {
  border:
    1px solid
    rgba(255, 151, 136, 0.34) !important;

  background:
    rgba(255, 83, 3, 0.18) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.08),
    0 10px 26px
    rgba(0, 0, 0, 0.16) !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

/* ======================================================
   FIXED HEADER: SCROLLED MODE
   Light header while page sections pass underneath
   ====================================================== */

.hmc-header.is-scrolled {
  padding:
    0 !important;

  border-bottom:
    1px solid
    rgba(255, 203, 197, 0.52) !important;

  background:
    rgba(255, 253, 252, 0.94) !important;

  box-shadow:
    0 10px 30px
    rgba(16, 20, 25, 0.06) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.hmc-header.is-scrolled
.hmc-nav {
  min-height:
    72px;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;
}

.hmc-header.is-scrolled
.hmc-brand-copy strong,
.hmc-header.is-scrolled
.hmc-nav-links a,
.hmc-header.is-scrolled
.hmc-sign-in {
  color:
    var(--ink-500) !important;
}

.hmc-header.is-scrolled
.hmc-brand-copy small {
  color:
    var(--ink-300) !important;
}

.hmc-header.is-scrolled
.hmc-nav-links a.is-current {
  color:
    var(--orange-700) !important;
}

.hmc-header.is-scrolled
.hmc-header-cta {
  border-color:
    var(--orange-600) !important;

  background:
    var(--orange-600) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.14) !important;
}

/* ---------- SECTION RHYTHM ---------- */

#how {
  background:
    #ffffff !important;
}

#mentors {
  background:
    var(--ink-600) !important;
}

#trust {
  background:
    #ffffff !important;
}

#accountability {
  background:
    var(--ink-600) !important;
}

.hmc-cta-section {
  background:
    #ffffff !important;
}

/* ---------- PAGE SECTIONS ABOVE STICKY HERO ---------- */

.hmc-section,
.hmc-footer {
  position: relative;
  z-index: 4;
}

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

@media (max-width: 1100px) {
  .hmc-hero {
    position:
      relative !important;

    top:
      auto !important;

    background-size:
      46px 46px,
      46px 46px,
      auto,
      auto,
      auto !important;
  }

  .hmc-header {
    padding:
      10px 0 0;
  }

  .hmc-header.is-hero
  .hmc-nav {
    min-height:
      64px;

    border-radius:
      16px 16px
      0 0;
  }

  .hmc-header.is-scrolled
  .hmc-nav {
    min-height:
      64px;
  }

  .hmc-menu-button {
    border:
      1px solid
      rgba(255, 255, 255, 0.18) !important;

    color:
      #ffffff !important;

    background:
      rgba(255, 255, 255, 0.07) !important;

    backdrop-filter:
      blur(14px);
  }

  .hmc-header.is-scrolled
  .hmc-menu-button {
    border-color:
      var(--ink-50) !important;

    color:
      var(--ink-600) !important;

    background:
      #ffffff !important;
  }

  .hmc-hero-content {
    min-height:
      760px !important;

    padding:
      168px 0
      74px !important;
  }

  .hmc-hero-copy {
    max-width:
      700px;
  }
}

@media (max-width: 760px) {
  .hmc-hero {
    background-size:
      38px 38px,
      38px 38px,
      auto,
      auto,
      auto !important;
  }

  .hmc-hero-content {
    min-height:
      720px !important;

    padding:
      138px 0
      62px !important;
  }

  .hmc-title-main {
    font-size:
      clamp(
        34px,
        9.5vw,
        44px
      ) !important;
  }

  .hmc-title-accent {
    font-size:
      clamp(
        31px,
        8.7vw,
        40px
      ) !important;
  }

  .hmc-hero-actions {
    align-items:
      stretch !important;

    flex-direction:
      column !important;

    width:
      min(
        100%,
        390px
      );

    margin:
      24px auto 0 !important;
  }
}

@media (max-width: 520px) {
  .hmc-hero-content {
    min-height:
      690px !important;

    padding:
      126px 0
      56px !important;
  }

  .hmc-kicker {
    font-size:
      7px !important;

    letter-spacing:
      0.14em !important;
  }
}


/* ======================================================
   V13 — TWO-LINE FLOWING HERO STATEMENT
   ====================================================== */

.hmc-hero h1 {
  max-width:
    900px !important;

  margin:
    0 auto !important;

  color:
    #ffffff !important;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size:
    clamp(
      46px,
      5.25vw,
      68px
    ) !important;

  font-style:
    normal !important;

  font-weight:
    700 !important;

  line-height:
    1.03 !important;

  letter-spacing:
    -0.048em !important;

  text-align:
    center !important;

  text-wrap:
    balance;
}

.hmc-title-main {
  display: inline !important;
}

.hmc-title-accent {
  display: inline !important;
}

.hmc-title-accent-inline {
  display: inline;

  color:
    var(--orange-400);

  font: inherit;

  font-weight:
    700;

  letter-spacing:
    inherit;

  text-shadow:
    0 12px 34px
    rgba(255, 83, 3, 0.16);
}

@media (max-width: 760px) {
  .hmc-hero h1 {
    max-width:
      540px !important;

    font-size:
      clamp(
        34px,
        9.2vw,
        44px
      ) !important;

    line-height:
      1.06 !important;
  }
}

@media (max-width: 520px) {
  .hmc-hero h1 {
    max-width:
      360px !important;

    font-size:
      clamp(
        31px,
        8.8vw,
        38px
      ) !important;
  }
}


/* ======================================================
   V14 — HERO NAV RADIUS + DISTINCT SCROLLED NAV
   ====================================================== */

/* Shared transition */
.hmc-header,
.hmc-header .hmc-nav {
  transition:
    top 180ms ease,
    padding 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    border-radius 180ms ease,
    box-shadow 180ms ease,
    min-height 180ms ease;
}

/* ------------------------------------------------------
   HERO MODE
   Floating dark glass navigation with equal corner radius
   ------------------------------------------------------ */

.hmc-header.is-hero {
  top: 0;

  padding:
    16px 0 0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}

.hmc-header.is-hero .hmc-nav {
  min-height:
    72px !important;

  border:
    1px solid
    rgba(255, 151, 136, 0.24) !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(16, 20, 25, 0.68),
      rgba(75, 18, 0, 0.26)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06),
    0 16px 38px
    rgba(0, 0, 0, 0.16) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

/* ------------------------------------------------------
   SCROLLED MODE
   Different fixed navigation once hero is left behind
   ------------------------------------------------------ */

.hmc-header.is-scrolled {
  top: 0;

  padding:
    10px 0 !important;

  border:
    0 !important;

  background:
    rgba(255, 255, 255, 0.88) !important;

  box-shadow:
    0 8px 30px
    rgba(16, 20, 25, 0.06) !important;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}

.hmc-header.is-scrolled .hmc-nav {
  min-height:
    62px !important;

  border:
    1px solid
    rgba(201, 210, 223, 0.72) !important;

  border-radius:
    16px !important;

  background:
    rgba(255, 255, 255, 0.90) !important;

  box-shadow:
    0 10px 26px
    rgba(16, 20, 25, 0.055) !important;
}

.hmc-header.is-scrolled
.hmc-brand-copy strong,
.hmc-header.is-scrolled
.hmc-nav-links a,
.hmc-header.is-scrolled
.hmc-sign-in {
  color:
    var(--ink-500) !important;
}

.hmc-header.is-scrolled
.hmc-brand-copy small {
  color:
    var(--ink-300) !important;
}

.hmc-header.is-scrolled
.hmc-nav-links a.is-current {
  color:
    var(--orange-700) !important;
}

.hmc-header.is-scrolled
.hmc-nav-links a::after {
  background:
    var(--orange-600) !important;
}

.hmc-header.is-scrolled
.hmc-header-cta {
  border:
    1px solid
    var(--orange-600) !important;

  color:
    #ffffff !important;

  background:
    var(--orange-600) !important;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.14) !important;
}

/* Keep the mobile/tablet menu aligned to both header states */
@media (max-width: 1100px) {
  .hmc-header.is-hero {
    padding:
      10px 0 0 !important;
  }

  .hmc-header.is-hero .hmc-nav {
    min-height:
      64px !important;

    border-radius:
      16px !important;
  }

  .hmc-header.is-scrolled {
    padding:
      8px 0 !important;
  }

  .hmc-header.is-scrolled .hmc-nav {
    min-height:
      60px !important;

    border-radius:
      14px !important;
  }
}


/* ======================================================
   V15 — FIXED HEADER OUTSIDE HERO
   ====================================================== */

/*
  The header now lives outside the hero in JSX.
  Keep the hero in normal document flow so its bottom can
  trigger the header mode change correctly.
*/
.hmc-hero {
  position:
    relative !important;

  top:
    auto !important;

  z-index:
    1 !important;
}

/* Header must live above every homepage section. */
.hmc-header {
  position:
    fixed !important;

  z-index:
    1000 !important;

  top:
    0 !important;

  right:
    0 !important;

  left:
    0 !important;
}

/* Ensure later content scrolls underneath the fixed header. */
.hmc-main,
.hmc-section,
.hmc-footer {
  position:
    relative;
}

/* HERO NAV: floating dark glass rectangle */
.hmc-header.is-hero {
  padding:
    16px 0 0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}

.hmc-header.is-hero
.hmc-nav {
  min-height:
    72px !important;

  border:
    1px solid
    rgba(255, 151, 136, 0.26) !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(16, 20, 25, 0.74),
      rgba(75, 18, 0, 0.30)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06),
    0 16px 38px
    rgba(0, 0, 0, 0.16) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

/* SCROLLED NAV: visibly different light fixed state */
.hmc-header.is-scrolled {
  padding:
    8px 0 !important;

  background:
    rgba(255, 255, 255, 0.92) !important;

  border-bottom:
    1px solid
    rgba(255, 203, 197, 0.46) !important;

  box-shadow:
    0 10px 34px
    rgba(16, 20, 25, 0.08) !important;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}

.hmc-header.is-scrolled
.hmc-nav {
  min-height:
    62px !important;

  border:
    1px solid
    rgba(201, 210, 223, 0.78) !important;

  border-radius:
    16px !important;

  background:
    rgba(255, 255, 255, 0.96) !important;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.045) !important;
}

/* Explicit light-state colours */
.hmc-header.is-scrolled
.hmc-brand-copy strong,
.hmc-header.is-scrolled
.hmc-nav-links a,
.hmc-header.is-scrolled
.hmc-sign-in {
  color:
    var(--ink-500) !important;
}

.hmc-header.is-scrolled
.hmc-brand-copy small {
  color:
    var(--ink-300) !important;
}

.hmc-header.is-scrolled
.hmc-nav-links a.is-current {
  color:
    var(--orange-700) !important;
}

.hmc-header.is-scrolled
.hmc-header-cta {
  border-color:
    var(--orange-600) !important;

  color:
    #ffffff !important;

  background:
    var(--orange-600) !important;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.16) !important;
}

/* Mobile drawer always stays above both header states. */
.hmc-mobile-overlay {
  z-index:
    1100 !important;
}

.hmc-mobile-drawer {
  z-index:
    1200 !important;
}

@media (max-width: 1100px) {
  .hmc-hero {
    position:
      relative !important;
  }

  .hmc-header.is-hero {
    padding:
      10px 0 0 !important;
  }

  .hmc-header.is-scrolled {
    padding:
      7px 0 !important;
  }

  .hmc-header.is-scrolled
  .hmc-menu-button {
    border-color:
      var(--ink-50) !important;

    color:
      var(--ink-600) !important;

    background:
      #ffffff !important;
  }
}


/* ======================================================
   V16 — CLEAN GLASS SCROLLED NAV
   Remove double white layer and keep one glass surface
   ====================================================== */

.hmc-header.is-scrolled {
  padding:
    10px 0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}

.hmc-header.is-scrolled .hmc-nav {
  min-height:
    62px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.56) !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72),
      rgba(255, 248, 247, 0.58)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.72),
    0 12px 34px
    rgba(16, 20, 25, 0.08) !important;

  backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%) !important;
}

/* Keep text crisp on the glass surface */
.hmc-header.is-scrolled
.hmc-brand-copy strong,
.hmc-header.is-scrolled
.hmc-nav-links a,
.hmc-header.is-scrolled
.hmc-sign-in {
  color:
    var(--ink-500) !important;
}

.hmc-header.is-scrolled
.hmc-brand-copy small {
  color:
    var(--ink-300) !important;
}

.hmc-header.is-scrolled
.hmc-nav-links a.is-current {
  color:
    var(--orange-700) !important;
}

/* Create account stays strong but slightly softer */
.hmc-header.is-scrolled
.hmc-header-cta {
  border:
    1px solid
    rgba(255, 83, 3, 0.36) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 83, 3, 0.92),
      rgba(255, 119, 93, 0.90)
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.16) !important;
}

/* Tablet/mobile version */
@media (max-width: 1100px) {
  .hmc-header.is-scrolled {
    padding:
      8px 0 !important;
  }

  .hmc-header.is-scrolled .hmc-nav {
    min-height:
      60px !important;

    border-radius:
      15px !important;

    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.78),
        rgba(255, 248, 247, 0.64)
      ) !important;
  }

  .hmc-header.is-scrolled
  .hmc-menu-button {
    border:
      1px solid
      rgba(201, 210, 223, 0.72) !important;

    color:
      var(--ink-600) !important;

    background:
      rgba(255, 255, 255, 0.64) !important;

    box-shadow:
      none !important;

    backdrop-filter:
      blur(14px);

    -webkit-backdrop-filter:
      blur(14px);
  }
}


/* ======================================================
   V17 — FULL-WIDTH FIXED GLASS HEADER AFTER HERO
   ====================================================== */

/* HERO STATE stays as the floating rounded glass nav */
.hmc-header.is-hero {
  padding:
    16px 0 0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}

.hmc-header.is-hero .hmc-nav {
  min-height:
    72px !important;

  border:
    1px solid
    rgba(255, 151, 136, 0.26) !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(16, 20, 25, 0.74),
      rgba(75, 18, 0, 0.30)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06),
    0 16px 38px
    rgba(0, 0, 0, 0.16) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

/* ------------------------------------------------------
   SCROLLED STATE
   Full-width glass strip fixed across the page
   ------------------------------------------------------ */

.hmc-header.is-scrolled {
  position:
    fixed !important;

  z-index:
    1000 !important;

  top:
    0 !important;

  right:
    0 !important;

  left:
    0 !important;

  width:
    100% !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(255, 203, 197, 0.34) !important;

  background:
    rgba(255, 255, 255, 0.82) !important;

  box-shadow:
    0 8px 26px
    rgba(16, 20, 25, 0.07) !important;

  backdrop-filter:
    blur(24px)
    saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(145%) !important;
}

/*
  The inner nav is no longer another rounded glass card.
  It simply sits inside the full-width glass strip.
*/
.hmc-header.is-scrolled .hmc-nav {
  min-height:
    74px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}

/* Text on the light glass header */
.hmc-header.is-scrolled
.hmc-brand-copy strong,
.hmc-header.is-scrolled
.hmc-nav-links a,
.hmc-header.is-scrolled
.hmc-sign-in {
  color:
    var(--ink-500) !important;
}

.hmc-header.is-scrolled
.hmc-brand-copy small {
  color:
    var(--ink-300) !important;
}

.hmc-header.is-scrolled
.hmc-nav-links a.is-current {
  color:
    var(--orange-700) !important;
}

.hmc-header.is-scrolled
.hmc-nav-links a::after {
  background:
    var(--orange-600) !important;
}

/* Keep CTA strong and readable */
.hmc-header.is-scrolled
.hmc-header-cta {
  border:
    1px solid
    var(--orange-600) !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--orange-600),
      var(--orange-500)
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.16) !important;
}

/* ------------------------------------------------------
   PREVENT SECTION TITLES FROM LANDING UNDER THE HEADER
   ------------------------------------------------------ */

.hmc-section,
#how,
#mentors,
#trust,
#accountability {
  scroll-margin-top:
    94px !important;
}

/*
  This gives the page a small visual safety zone when
  a section reaches the top during manual scrolling.
*/
.hmc-section > .hmc-shell {
  position:
    relative;
}

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

@media (max-width: 1100px) {
  .hmc-header.is-hero {
    padding:
      10px 0 0 !important;
  }

  .hmc-header.is-hero .hmc-nav {
    min-height:
      64px !important;

    border-radius:
      16px !important;
  }

  .hmc-header.is-scrolled {
    min-height:
      66px;

    background:
      rgba(255, 255, 255, 0.86) !important;

    backdrop-filter:
      blur(22px)
      saturate(140%) !important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(140%) !important;
  }

  .hmc-header.is-scrolled .hmc-nav {
    min-height:
      66px !important;
  }

  .hmc-header.is-scrolled
  .hmc-menu-button {
    border:
      1px solid
      rgba(201, 210, 223, 0.62) !important;

    color:
      var(--ink-600) !important;

    background:
      rgba(255, 255, 255, 0.66) !important;

    box-shadow:
      none !important;

    backdrop-filter:
      blur(12px);

    -webkit-backdrop-filter:
      blur(12px);
  }

  .hmc-section,
  #how,
  #mentors,
  #trust,
  #accountability {
    scroll-margin-top:
      82px !important;
  }
}


/* ======================================================
   V18 — REFINED HOW IT WORKS CARDS
   ====================================================== */

/* Soft warm section surface instead of plain white */
#how {
  background:
    linear-gradient(
      180deg,
      #fffdfc 0%,
      #fff8f7 100%
    ) !important;
}

/* Give the intro a little more breathing room */
#how .hmc-section-heading {
  max-width:
    780px;
}

#how .hmc-section-heading h2 {
  max-width:
    720px;

  color:
    var(--ink-600) !important;
}

#how .hmc-section-heading > span {
  max-width:
    690px;

  color:
    var(--ink-400) !important;
}

/* Turn the long segmented strip into individual cards */
#how .hmc-steps {
  display:
    grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap:
    14px !important;

  overflow:
    visible !important;

  margin-top:
    34px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

#how .hmc-steps article {
  position:
    relative;

  min-height:
    210px;

  overflow:
    hidden;

  padding:
    30px 24px
    26px !important;

  border:
    1px solid
    rgba(201, 210, 223, 0.72) !important;

  border-radius:
    18px !important;

  color:
    var(--ink-500) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 244, 243, 0.74) 100%
    ) !important;

  box-shadow:
    0 14px 34px
    rgba(16, 20, 25, 0.055) !important;

  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

/* Thin orange top accent */
#how .hmc-steps article::before {
  content: "";

  position:
    absolute;

  top:
    0;
  right:
    0;
  left:
    0;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(--orange-600),
      var(--orange-300)
    );
}

/* Soft corner glow, very restrained */
#how .hmc-steps article::after {
  content: "";

  position:
    absolute;

  top:
    -52px;
  right:
    -52px;

  width:
    120px;
  height:
    120px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 119, 93, 0.12) 0%,
      rgba(255, 151, 136, 0.05) 46%,
      transparent 72%
    );

  pointer-events:
    none;
}

#how .hmc-steps article:last-child {
  border-right:
    1px solid
    rgba(201, 210, 223, 0.72) !important;
}

#how .hmc-steps article:hover {
  border-color:
    rgba(255, 151, 136, 0.62) !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff4f3 100%
    ) !important;

  box-shadow:
    0 16px 38px
    rgba(16, 20, 25, 0.07) !important;
}

/* Step number */
#how .hmc-steps article > span {
  display:
    inline-flex;

  align-items:
    center;
  justify-content:
    center;

  min-width:
    46px;
  height:
    32px;

  margin-bottom:
    20px;

  padding:
    0 10px;

  border:
    1px solid
    var(--orange-200);

  border-radius:
    999px;

  color:
    var(--orange-700) !important;

  background:
    var(--orange-50);

  font-size:
    18px !important;

  font-weight:
    650 !important;
}

/* Card heading */
#how .hmc-steps article h3 {
  margin:
    0 0 10px;

  color:
    var(--ink-600) !important;

  font-size:
    15px;

  font-weight:
    650;
}

/* Card body copy */
#how .hmc-steps article p {
  margin:
    0;

  color:
    var(--ink-400) !important;

  font-size:
    13px;

  line-height:
    1.6;
}

/* Tablet */
@media (max-width: 1100px) {
  #how .hmc-steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  #how .hmc-steps article {
    min-height:
      190px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  #how .hmc-steps {
    grid-template-columns:
      1fr !important;

    gap:
      12px !important;
  }

  #how .hmc-steps article {
    min-height:
      auto;

    padding:
      24px 20px
      22px !important;
  }

  #how .hmc-steps article > span {
    margin-bottom:
      16px;
  }
}


/* ======================================================
   V19 — SAMPLE MENTOR PREVIEW CARDS
   Dummy homepage data, no mentorship actions
   ====================================================== */

#mentors {
  background:
    linear-gradient(
      145deg,
      #101419 0%,
      #0e1116 56%,
      #080b0f 100%
    ) !important;
}

/* Section heading */
#mentors .hmc-section-heading > p {
  color:
    var(--orange-400) !important;
}

#mentors .hmc-section-heading h2 {
  max-width:
    720px;

  color:
    #ffffff !important;
}

#mentors .hmc-section-heading > span {
  max-width:
    690px;

  color:
    var(--ink-100) !important;
}

/* Correct selector for the actual JSX tabs */
#mentors .hmc-tabs {
  margin-bottom:
    30px;
}

#mentors .hmc-tabs button {
  border:
    1px solid
    rgba(201, 210, 223, 0.16) !important;

  color:
    var(--ink-100) !important;

  background:
    rgba(255, 255, 255, 0.045) !important;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

#mentors .hmc-tabs button:hover {
  border-color:
    rgba(255, 151, 136, 0.44) !important;

  color:
    #ffffff !important;

  background:
    rgba(255, 83, 3, 0.08) !important;
}

#mentors .hmc-tabs button.is-active {
  border-color:
    rgba(255, 119, 93, 0.62) !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 83, 3, 0.28),
      rgba(255, 119, 93, 0.12)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06);
}

/* Grid */
#mentors .hmc-mentor-grid {
  gap:
    18px !important;
}

/* Secondary-colour mentor cards */
#mentors .hmc-mentor-card {
  position:
    relative;

  min-height:
    240px;

  overflow:
    hidden;

  padding:
    24px !important;

  border:
    1px solid
    rgba(201, 210, 223, 0.15) !important;

  border-top:
    2px solid
    rgba(255, 119, 93, 0.76) !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      145deg,
      rgba(45, 53, 63, 0.96) 0%,
      rgba(16, 20, 25, 0.98) 72%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025),
    0 18px 40px
    rgba(0, 0, 0, 0.18) !important;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

/* Very subtle orange ambient highlight */
#mentors .hmc-mentor-card::after {
  content: "";

  position:
    absolute;

  top:
    -70px;
  right:
    -70px;

  width:
    160px;
  height:
    160px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 83, 3, 0.11) 0%,
      rgba(255, 119, 93, 0.04) 46%,
      transparent 72%
    );

  pointer-events:
    none;
}

#mentors .hmc-mentor-card:hover {
  border-color:
    rgba(255, 151, 136, 0.34) !important;

  background:
    linear-gradient(
      145deg,
      rgba(76, 88, 103, 0.72) 0%,
      rgba(16, 20, 25, 0.98) 72%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.04),
    0 20px 44px
    rgba(0, 0, 0, 0.22) !important;
}

/* Avatar */
#mentors .hmc-avatar {
  border:
    1px solid
    rgba(255, 151, 136, 0.20);

  color:
    var(--orange-100) !important;

  background:
    rgba(255, 83, 3, 0.12) !important;
}

/* Mentor name */
#mentors .hmc-mentor-card-top strong {
  color:
    #ffffff !important;

  font-size:
    15px;
}

/* Mentor specialty */
#mentors .hmc-mentor-card-top small {
  color:
    var(--orange-300) !important;
}

/* Mentor description */
#mentors .hmc-mentor-card > p {
  color:
    var(--ink-100) !important;

  font-size:
    13px;

  line-height:
    1.65;
}

/* Bottom area now contains only a static preview badge */
#mentors .hmc-mentor-card-bottom {
  justify-content:
    flex-start !important;

  border-top:
    1px solid
    rgba(201, 210, 223, 0.12) !important;

  color:
    var(--ink-200) !important;
}

#mentors .hmc-sample-badge {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(201, 210, 223, 0.14);

  border-radius:
    999px;

  color:
    var(--ink-100);

  background:
    rgba(255, 255, 255, 0.045);

  font-size:
    9px;

  font-weight:
    550;

  letter-spacing:
    0.04em;
}

/* Old request link should never display on the homepage preview */
#mentors .hmc-request-button {
  display:
    none !important;
}

/* Tablet */
@media (max-width: 900px) {
  #mentors .hmc-mentor-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #mentors .hmc-mentor-grid {
    grid-template-columns:
      1fr !important;
  }

  #mentors .hmc-mentor-card {
    min-height:
      auto;

    padding:
      22px !important;
  }
}


/* ======================================================
   V20 — LAYERED DARK HOW-IT-WORKS CARD CONCEPT
   ====================================================== */

#how {
  position:
    relative;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 72%,
      rgba(255, 119, 93, 0.14),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      #fffdfc 0%,
      #fff8f7 100%
    ) !important;
}

/* Very soft decorative wash behind the card group */
#how::after {
  content: "";

  position:
    absolute;

  right:
    -140px;
  bottom:
    -180px;

  width:
    440px;
  height:
    440px;

  border:
    1px solid
    rgba(255, 151, 136, 0.14);

  border-radius:
    50%;

  pointer-events:
    none;
}

#how .hmc-shell {
  position:
    relative;
  z-index:
    1;
}

#how .hmc-section-heading {
  max-width:
    760px;
}

#how .hmc-section-heading h2 {
  max-width:
    700px;

  color:
    var(--ink-600) !important;
}

#how .hmc-section-heading > span {
  max-width:
    650px;

  color:
    var(--ink-400) !important;
}

/* Desktop fan / layered composition */
#how .hmc-steps {
  display:
    flex !important;

  align-items:
    stretch;

  justify-content:
    center;

  gap:
    0 !important;

  overflow:
    visible !important;

  margin-top:
    58px !important;

  padding:
    36px 28px
    54px;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

#how .hmc-step-card {
  position:
    relative;

  flex:
    0 0
    min(
      22%,
      240px
    );

  min-height:
    300px;

  margin-left:
    -18px;

  overflow:
    hidden;

  padding:
    28px 24px
    26px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.10) !important;

  border-radius:
    22px !important;

  color:
    var(--ink-50) !important;

  background:
    radial-gradient(
      circle at 70% 22%,
      rgba(255, 83, 3, 0.34) 0%,
      rgba(255, 119, 93, 0.15) 22%,
      transparent 42%
    ),
    linear-gradient(
      155deg,
      rgba(76, 88, 103, 0.94) 0%,
      rgba(45, 53, 63, 0.98) 34%,
      rgba(16, 20, 25, 1) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.05),
    0 20px 44px
    rgba(16, 20, 25, 0.14) !important;

  transform-origin:
    center bottom;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

#how .hmc-step-card:first-child {
  margin-left:
    0;

  z-index:
    1;

  transform:
    translateY(22px)
    rotate(-2deg);
}

#how .hmc-step-card:nth-child(2) {
  z-index:
    2;

  transform:
    translateY(8px)
    rotate(-1deg);
}

#how .hmc-step-card:nth-child(3) {
  z-index:
    5;

  transform:
    translateY(-12px);
}

#how .hmc-step-card:nth-child(4) {
  z-index:
    3;

  transform:
    translateY(8px)
    rotate(1deg);
}

#how .hmc-step-card:nth-child(5) {
  z-index:
    2;

  transform:
    translateY(22px)
    rotate(2deg);
}

/* Variation in glow placement so cards do not look duplicated */
#how .hmc-step-card:nth-child(2) {
  background:
    radial-gradient(
      circle at 36% 22%,
      rgba(255, 83, 3, 0.30) 0%,
      rgba(255, 119, 93, 0.13) 24%,
      transparent 44%
    ),
    linear-gradient(
      155deg,
      rgba(45, 53, 63, 0.98) 0%,
      rgba(16, 20, 25, 1) 100%
    ) !important;
}

#how .hmc-step-card:nth-child(3) {
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 83, 3, 0.42) 0%,
      rgba(255, 119, 93, 0.16) 25%,
      transparent 46%
    ),
    linear-gradient(
      155deg,
      rgba(75, 18, 0, 0.94) 0%,
      rgba(45, 53, 63, 0.98) 42%,
      rgba(16, 20, 25, 1) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06),
    0 24px 54px
    rgba(16, 20, 25, 0.18) !important;
}

#how .hmc-step-card:nth-child(4) {
  background:
    radial-gradient(
      circle at 66% 20%,
      rgba(255, 83, 3, 0.28) 0%,
      rgba(255, 119, 93, 0.12) 25%,
      transparent 44%
    ),
    linear-gradient(
      155deg,
      rgba(76, 88, 103, 0.92) 0%,
      rgba(16, 20, 25, 1) 100%
    ) !important;
}

#how .hmc-step-card:hover {
  border-color:
    rgba(255, 151, 136, 0.36) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.07),
    0 24px 50px
    rgba(16, 20, 25, 0.18) !important;
}

/* White icon tile from the inspiration */
#how .hmc-step-icon {
  display:
    grid;

  place-items:
    center;

  width:
    42px;
  height:
    42px;

  margin-bottom:
    34px;

  border:
    1px solid
    rgba(255, 255, 255, 0.70);

  border-radius:
    12px;

  color:
    var(--ink-600);

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.14);
}

#how .hmc-step-number {
  margin-bottom:
    8px;

  color:
    var(--orange-300);

  font-size:
    11px;

  font-weight:
    650;

  letter-spacing:
    0.14em;
}

#how .hmc-step-card h3 {
  margin:
    0 0 12px;

  color:
    #ffffff !important;

  font-size:
    17px;

  font-weight:
    600;
}

#how .hmc-step-card p {
  margin:
    0;

  color:
    var(--ink-100) !important;

  font-size:
    13px;

  line-height:
    1.65;
}

/* Remove older pseudo accents from previous version */
#how .hmc-step-card::before,
#how .hmc-step-card::after {
  content:
    none !important;
}

/* Tablet: clean grid, no overlap or rotation */
@media (max-width: 1100px) {
  #how .hmc-steps {
    display:
      grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      16px !important;

    padding:
      18px 0
      10px;
  }

  #how .hmc-step-card,
  #how .hmc-step-card:first-child,
  #how .hmc-step-card:nth-child(2),
  #how .hmc-step-card:nth-child(3),
  #how .hmc-step-card:nth-child(4),
  #how .hmc-step-card:nth-child(5) {
    width:
      auto;

    min-height:
      240px;

    margin-left:
      0;

    transform:
      none;
  }

  #how .hmc-step-card:last-child {
    grid-column:
      1 / -1;

    width:
      min(
        100%,
        520px
      );

    justify-self:
      center;
  }
}

/* Mobile: one clean stack */
@media (max-width: 640px) {
  #how .hmc-steps {
    grid-template-columns:
      1fr !important;

    gap:
      14px !important;

    margin-top:
      36px !important;
  }

  #how .hmc-step-card,
  #how .hmc-step-card:last-child {
    grid-column:
      auto;

    width:
      100%;

    min-height:
      auto;

    padding:
      24px 20px
      22px !important;
  }

  #how .hmc-step-icon {
    margin-bottom:
      24px;
  }
}


/* ======================================================
   V21 — SERVICE-STYLE HOW IT WORKS CARDS
   Informational only. No buttons.
   ====================================================== */

#how {
  position:
    relative;

  overflow:
    hidden;

  background:
    linear-gradient(
      180deg,
      #fffdfc 0%,
      #fff8f7 100%
    ) !important;
}

/* Remove old layered/fan presentation */
#how .hmc-steps {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap:
    18px !important;

  overflow:
    visible !important;

  margin-top:
    42px !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

#how .hmc-step-card,
#how .hmc-step-card:first-child,
#how .hmc-step-card:nth-child(2),
#how .hmc-step-card:nth-child(3),
#how .hmc-step-card:nth-child(4),
#how .hmc-step-card:nth-child(5) {
  position:
    relative;

  min-height:
    220px;

  margin:
    0 !important;

  overflow:
    hidden;

  padding:
    26px 24px !important;

  border:
    1px solid
    rgba(201, 210, 223, 0.74) !important;

  border-radius:
    18px !important;

  color:
    var(--ink-500) !important;

  background:
    linear-gradient(
      180deg,
      #fffdfc 0%,
      #fff4f3 100%
    ) !important;

  box-shadow:
    0 12px 30px
    rgba(16, 20, 25, 0.05) !important;

  transform:
    none !important;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

/* Featured first card using secondary colour */
#how .hmc-step-card:first-child {
  color:
    var(--ink-50) !important;

  border-color:
    rgba(201, 210, 223, 0.16) !important;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 83, 3, 0.24) 0%,
      rgba(255, 119, 93, 0.10) 22%,
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #2d353f 0%,
      #101419 72%
    ) !important;

  box-shadow:
    0 18px 38px
    rgba(16, 20, 25, 0.16) !important;
}

/* Bottom row placement */
#how .hmc-step-card:nth-child(4) {
  grid-column:
    1 / 2;
}

#how .hmc-step-card:nth-child(5) {
  grid-column:
    2 / 3;
}

/* Icon tile */
#how .hmc-step-icon {
  display:
    grid;

  place-items:
    center;

  width:
    42px;
  height:
    42px;

  margin-bottom:
    28px;

  border:
    1px solid
    rgba(255, 151, 136, 0.28);

  border-radius:
    12px;

  color:
    var(--orange-700);

  background:
    var(--orange-50);

  box-shadow:
    none;
}

#how .hmc-step-card:first-child
.hmc-step-icon {
  border-color:
    rgba(255, 255, 255, 0.12);

  color:
    var(--ink-600);

  background:
    rgba(255, 255, 255, 0.94);
}

/* Step number */
#how .hmc-step-number {
  margin-bottom:
    8px;

  color:
    var(--orange-600);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.15em;
}

#how .hmc-step-card:first-child
.hmc-step-number {
  color:
    var(--orange-300);
}

/* Card title */
#how .hmc-step-card h3 {
  margin:
    0 0 10px;

  color:
    var(--ink-600) !important;

  font-size:
    16px;

  font-weight:
    650;
}

#how .hmc-step-card:first-child h3 {
  color:
    #ffffff !important;
}

/* Card copy */
#how .hmc-step-card p {
  margin:
    0;

  color:
    var(--ink-400) !important;

  font-size:
    13px;

  line-height:
    1.65;
}

#how .hmc-step-card:first-child p {
  color:
    var(--ink-100) !important;
}

/* No buttons, links, or call-to-actions in these informational cards */
#how .hmc-step-card button,
#how .hmc-step-card a {
  display:
    none !important;
}

/* Subtle hover only */
#how .hmc-step-card:hover {
  border-color:
    rgba(255, 151, 136, 0.58) !important;

  box-shadow:
    0 14px 34px
    rgba(16, 20, 25, 0.07) !important;
}

#how .hmc-step-card:first-child:hover {
  border-color:
    rgba(255, 151, 136, 0.28) !important;

  box-shadow:
    0 20px 42px
    rgba(16, 20, 25, 0.18) !important;
}

/* Remove decorative pseudo-layers from old concept */
#how .hmc-step-card::before,
#how .hmc-step-card::after {
  content:
    none !important;
}

/* Tablet */
@media (max-width: 980px) {
  #how .hmc-steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  #how .hmc-step-card:nth-child(4),
  #how .hmc-step-card:nth-child(5) {
    grid-column:
      auto;
  }

  #how .hmc-step-card:last-child {
    grid-column:
      1 / -1;

    width:
      min(
        100%,
        520px
      );

    justify-self:
      center;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #how .hmc-steps {
    grid-template-columns:
      1fr !important;

    gap:
      14px !important;
  }

  #how .hmc-step-card,
  #how .hmc-step-card:last-child {
    grid-column:
      auto;

    width:
      100%;

    min-height:
      auto;

    padding:
      22px 20px !important;
  }

  #how .hmc-step-icon {
    margin-bottom:
      22px;
  }
}


/* ======================================================
   V22 — SERVICES-BOARD HOW IT WORKS
   Dark intro + large light process board
   No buttons / no clickable cards
   ====================================================== */

#how.hmc-how-section {
  position: relative;
  overflow: hidden;

  padding:
    82px 0 88px !important;

  color:
    var(--ink-500) !important;

  background:
    linear-gradient(
      180deg,
      #fffdfc 0%,
      #fff8f7 100%
    ) !important;
}

#how.hmc-how-section::before {
  content: "";

  position: absolute;

  top: -180px;
  left: -220px;

  width: 560px;
  height: 560px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(16, 20, 25, 0.06) 0%,
      rgba(16, 20, 25, 0.025) 46%,
      transparent 72%
    );

  pointer-events: none;
}

#how .hmc-how-layout {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(260px, 0.76fr)
    minmax(0, 1.75fr);

  gap: 22px;

  align-items: stretch;
}

/* ------------------------------------------------------
   LEFT INTRO PANEL
   ------------------------------------------------------ */

#how .hmc-how-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 530px;

  padding:
    42px 36px;

  border:
    1px solid
    rgba(201, 210, 223, 0.12);

  border-radius: 24px;

  color:
    #ffffff;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 83, 3, 0.18) 0%,
      rgba(255, 119, 93, 0.07) 24%,
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #2d353f 0%,
      #101419 68%,
      #080b0f 100%
    );

  box-shadow:
    0 18px 42px
    rgba(16, 20, 25, 0.14);
}

#how .hmc-how-eyebrow {
  margin:
    0 0 20px;

  color:
    var(--orange-300);

  font-size: 9px;
  font-weight: 700;
  letter-spacing:
    0.18em;
}

#how .hmc-how-intro h2 {
  max-width: 440px;

  margin: 0;

  color:
    #ffffff;

  font-size:
    clamp(
      34px,
      3.2vw,
      48px
    );

  font-weight: 700;
  line-height: 1.04;
  letter-spacing:
    -0.045em;
}

#how .hmc-how-copy {
  max-width: 420px;

  margin:
    22px 0 0;

  color:
    var(--ink-100);

  font-size: 14px;
  line-height: 1.7;
}

#how .hmc-how-points {
  display: grid;

  gap: 11px;

  margin-top: 34px;
}

#how .hmc-how-points span {
  position: relative;

  padding-left: 18px;

  color:
    var(--ink-100);

  font-size: 12px;
  line-height: 1.45;
}

#how .hmc-how-points span::before {
  content: "";

  position: absolute;

  top: 0.55em;
  left: 0;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--orange-500);

  box-shadow:
    0 0 0 4px
    rgba(255, 83, 3, 0.08);
}

/* ------------------------------------------------------
   RIGHT PROCESS BOARD
   ------------------------------------------------------ */

#how .hmc-how-board {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1px;

  min-height: 530px;

  overflow: hidden;

  padding: 1px;

  border:
    1px solid
    rgba(201, 210, 223, 0.76);

  border-radius: 24px;

  background:
    rgba(201, 210, 223, 0.54);

  box-shadow:
    0 18px 42px
    rgba(16, 20, 25, 0.08);
}

/* Subtle technical grid like the reference board */
#how .hmc-how-board::before {
  content: "";

  position: absolute;
  z-index: 0;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(201, 210, 223, 0.26) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(201, 210, 223, 0.26) 1px,
      transparent 1px
    );

  background-size:
    33.333% 50%;

  pointer-events: none;
}

/* Every cell sits above the board grid */
#how .hmc-how-summary-card,
#how .hmc-how-step-card {
  position: relative;
  z-index: 1;

  min-width: 0;

  padding:
    28px 24px;

  border: 0;

  background:
    rgba(255, 253, 252, 0.96);
}

/* ------------------------------------------------------
   SUMMARY CELL
   ------------------------------------------------------ */

#how .hmc-how-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    linear-gradient(
      160deg,
      #fff8f7 0%,
      #fffdfc 100%
    );
}

#how .hmc-how-summary-kicker {
  margin-bottom: 14px;

  color:
    var(--orange-700);

  font-size: 8px;
  font-weight: 700;
  letter-spacing:
    0.16em;
}

#how .hmc-how-summary-card h3 {
  max-width: 260px;

  margin: 0;

  color:
    var(--ink-600);

  font-size:
    clamp(
      21px,
      1.8vw,
      27px
    );

  font-weight: 650;
  line-height: 1.08;
  letter-spacing:
    -0.035em;
}

#how .hmc-how-summary-card p {
  max-width: 260px;

  margin:
    16px 0 0;

  color:
    var(--ink-400);

  font-size: 12px;
  line-height: 1.62;
}

/* ------------------------------------------------------
   STEP CELLS
   ------------------------------------------------------ */

#how .hmc-how-step-card {
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

#how .hmc-how-step-card:hover {
  background:
    #fff8f7;
}

/* Featured Schedule cell */
#how .hmc-how-step-card.is-featured {
  color:
    #ffffff;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(255, 83, 3, 0.30) 0%,
      rgba(255, 119, 93, 0.11) 26%,
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #2d353f 0%,
      #101419 72%
    );
}

#how .hmc-how-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 26px;
}

#how .hmc-how-step-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border:
    1px solid
    var(--orange-100);

  border-radius: 11px;

  color:
    var(--orange-700);

  background:
    var(--orange-50);
}

#how .hmc-how-step-top > span {
  color:
    var(--orange-500);

  font-size: 11px;
  font-weight: 700;
  letter-spacing:
    0.12em;
}

#how .hmc-how-step-card h3 {
  margin:
    0 0 10px;

  color:
    var(--ink-600);

  font-size: 15px;
  font-weight: 650;
}

#how .hmc-how-step-card p {
  margin: 0;

  color:
    var(--ink-400);

  font-size: 12px;
  line-height: 1.6;
}

/* Featured cell text */
#how .hmc-how-step-card.is-featured
.hmc-how-step-icon {
  border-color:
    rgba(255, 255, 255, 0.18);

  color:
    var(--ink-600);

  background:
    rgba(255, 255, 255, 0.94);
}

#how .hmc-how-step-card.is-featured
.hmc-how-step-top > span {
  color:
    var(--orange-300);
}

#how .hmc-how-step-card.is-featured h3 {
  color:
    #ffffff;
}

#how .hmc-how-step-card.is-featured p {
  color:
    var(--ink-100);
}

/* No interaction controls in process cells */
#how .hmc-how-board button,
#how .hmc-how-board a {
  display:
    none !important;
}

/* ------------------------------------------------------
   TABLET
   ------------------------------------------------------ */

@media (max-width: 1100px) {
  #how .hmc-how-layout {
    grid-template-columns:
      1fr;
  }

  #how .hmc-how-intro {
    min-height: auto;

    padding:
      34px 30px;
  }

  #how .hmc-how-board {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    min-height: auto;
  }

  #how .hmc-how-board::before {
    background-size:
      50% 33.333%;
  }

  #how .hmc-how-summary-card {
    min-height: 210px;
  }

  #how .hmc-how-step-card {
    min-height: 210px;
  }
}

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

@media (max-width: 640px) {
  #how.hmc-how-section {
    padding:
      60px 0 64px !important;
  }

  #how .hmc-how-intro {
    padding:
      28px 22px;

    border-radius: 18px;
  }

  #how .hmc-how-intro h2 {
    font-size:
      clamp(
        30px,
        9vw,
        38px
      );
  }

  #how .hmc-how-board {
    grid-template-columns:
      1fr;

    border-radius: 18px;
  }

  #how .hmc-how-board::before {
    display: none;
  }

  #how .hmc-how-summary-card,
  #how .hmc-how-step-card {
    min-height: auto;

    padding:
      24px 20px;
  }

  #how .hmc-how-step-top {
    margin-bottom: 20px;
  }
}


/* ======================================================
   V23 — ZIG-ZAG HOW IT WORKS JOURNEY
   ====================================================== */

#how.hmc-how-journey {
  position: relative;

  overflow: hidden;

  padding:
    88px 0 96px !important;

  color:
    var(--ink-500) !important;

  background:
    linear-gradient(
      180deg,
      #fffdfc 0%,
      #fff8f7 100%
    ) !important;
}

#how.hmc-how-journey::before {
  content: "";

  position: absolute;

  top: 18%;
  right: -160px;

  width: 420px;
  height: 420px;

  border:
    1px solid
    rgba(255, 151, 136, 0.16);

  border-radius: 50%;

  pointer-events: none;
}

#how.hmc-how-journey::after {
  content: "";

  position: absolute;

  bottom: -180px;
  left: -180px;

  width: 460px;
  height: 460px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 83, 3, 0.07) 0%,
      rgba(255, 119, 93, 0.025) 50%,
      transparent 72%
    );

  pointer-events: none;
}

#how.hmc-how-journey
.hmc-shell {
  position: relative;
  z-index: 1;
}

/* ---------- Section heading ---------- */

#how .hmc-how-journey-head {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(280px, 0.7fr);

  gap: 64px;

  align-items: end;

  margin-bottom: 68px;
}

#how .hmc-how-eyebrow {
  margin:
    0 0 16px;

  color:
    var(--orange-700);

  font-size: 9px;
  font-weight: 700;
  letter-spacing:
    0.18em;
}

#how .hmc-how-journey-head h2 {
  max-width: 760px;

  margin: 0;

  color:
    var(--ink-600);

  font-size:
    clamp(
      38px,
      4.1vw,
      56px
    );

  font-weight: 700;
  line-height: 1.04;
  letter-spacing:
    -0.045em;
}

#how .hmc-how-journey-copy {
  max-width: 430px;

  margin: 0;

  color:
    var(--ink-400);

  font-size: 14px;
  line-height: 1.7;
}

/* ---------- Main journey canvas ---------- */

#how .hmc-how-flow {
  position: relative;

  display: grid;

  gap: 4px;

  max-width: 1080px;

  margin:
    0 auto;

  padding:
    8px 0 24px;
}

/* vertical guide */
#how .hmc-how-flow::before {
  content: "";

  position: absolute;

  top: 36px;
  bottom: 70px;
  left: 50%;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 83, 3, 0.10),
      rgba(111, 128, 149, 0.28),
      rgba(255, 83, 3, 0.10)
    );

  transform:
    translateX(-50%);
}

#how .hmc-how-flow-item {
  position: relative;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  min-height: 154px;
}

/* ---------- Card ---------- */

#how .hmc-how-flow-card {
  position: relative;

  display: grid;

  grid-template-columns:
    46px minmax(0, 1fr);

  min-height: 136px;

  overflow: hidden;

  border:
    1px solid
    rgba(201, 210, 223, 0.72);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #fffdfc 0%,
      #fff4f3 100%
    );

  box-shadow:
    0 14px 32px
    rgba(16, 20, 25, 0.055);
}

#how .hmc-how-flow-item.is-left
.hmc-how-flow-card {
  grid-column: 1;

  width: calc(100% - 36px);

  justify-self: end;
}

#how .hmc-how-flow-item.is-right
.hmc-how-flow-card {
  grid-column: 2;

  width: calc(100% - 36px);

  justify-self: start;
}

/* Alternate subtle card tones */
#how .hmc-how-flow-item:nth-child(2n)
.hmc-how-flow-card {
  background:
    linear-gradient(
      145deg,
      #f7f8fa 0%,
      #e4e8ef 100%
    );
}

#how .hmc-how-flow-item:nth-child(3)
.hmc-how-flow-card {
  border-color:
    rgba(255, 151, 136, 0.36);

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(255, 83, 3, 0.14),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #fffdfc 0%,
      #fff4f3 100%
    );
}

/* side label */
#how .hmc-how-flow-side {
  display: flex;

  align-items: center;
  justify-content: center;

  color:
    #ffffff;

  background:
    var(--ink-600);
}

#how .hmc-how-flow-item:nth-child(odd)
.hmc-how-flow-side {
  background:
    linear-gradient(
      180deg,
      var(--orange-700),
      var(--orange-600)
    );
}

#how .hmc-how-flow-side span {
  writing-mode:
    vertical-rl;

  transform:
    rotate(180deg);

  font-size: 8px;
  font-weight: 700;
  letter-spacing:
    0.14em;
}

/* card content */
#how .hmc-how-flow-content {
  padding:
    22px 22px
    20px;
}

#how .hmc-how-flow-title {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 14px;
}

#how .hmc-how-flow-icon {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  border:
    1px solid
    rgba(255, 151, 136, 0.28);

  border-radius: 10px;

  color:
    var(--orange-700);

  background:
    var(--orange-50);
}

#how .hmc-how-flow-title h3 {
  margin: 0;

  color:
    var(--ink-600);

  font-size: 17px;
  font-weight: 650;
}

#how .hmc-how-flow-content > p {
  margin: 0;

  color:
    var(--ink-400);

  font-size: 12px;
  line-height: 1.65;
}

/* ---------- Connectors ---------- */

#how .hmc-how-flow-connector {
  position: absolute;

  top: 50%;

  width: 38px;
  height: 74px;

  pointer-events: none;
}

#how .hmc-how-flow-item.is-left
.hmc-how-flow-connector {
  right: calc(50% - 1px);
}

#how .hmc-how-flow-item.is-right
.hmc-how-flow-connector {
  left: calc(50% - 1px);
}

#how .hmc-how-flow-connector::before {
  content: "";

  position: absolute;

  top: 0;

  width: 36px;
  height: 56px;

  border-top:
    1px dashed
    rgba(111, 128, 149, 0.42);

  border-right:
    1px dashed
    rgba(111, 128, 149, 0.42);

}

#how .hmc-how-flow-item.is-left
.hmc-how-flow-connector::before {
  right: 0;

  border-radius:
    0 18px 0 0;
}

#how .hmc-how-flow-item.is-right
.hmc-how-flow-connector::before {
  left: 0;

  border-right: 0;

  border-left:
    1px dashed
    rgba(111, 128, 149, 0.42);

  border-radius:
    18px 0 0 0;
}

#how .hmc-how-flow-connector span {
  position: absolute;

  bottom: 10px;

  width: 7px;
  height: 7px;

  border-right:
    1.5px solid
    var(--orange-600);

  border-bottom:
    1.5px solid
    var(--orange-600);

  transform:
    rotate(45deg);
}

#how .hmc-how-flow-item.is-left
.hmc-how-flow-connector span {
  right: -3px;
}

#how .hmc-how-flow-item.is-right
.hmc-how-flow-connector span {
  left: -3px;
}

/* No buttons / links */
#how .hmc-how-flow button,
#how .hmc-how-flow a {
  display: none !important;
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  #how .hmc-how-journey-head {
    grid-template-columns: 1fr;

    gap: 20px;

    margin-bottom: 48px;
  }

  #how .hmc-how-journey-copy {
    max-width: 620px;
  }

  #how .hmc-how-flow {
    max-width: 760px;
  }

  #how .hmc-how-flow-item {
    grid-template-columns:
      1fr 1fr;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 680px) {
  #how.hmc-how-journey {
    padding:
      60px 0 66px !important;
  }

  #how .hmc-how-journey-head {
    margin-bottom: 38px;
  }

  #how .hmc-how-journey-head h2 {
    font-size:
      clamp(
        30px,
        9vw,
        40px
      );
  }

  #how .hmc-how-flow {
    gap: 14px;

    padding: 0;
  }

  #how .hmc-how-flow::before {
    top: 12px;
    bottom: 12px;
    left: 18px;
  }

  #how .hmc-how-flow-item {
    display: block;

    min-height: auto;

    padding-left: 34px;
  }

  #how .hmc-how-flow-item.is-left
  .hmc-how-flow-card,
  #how .hmc-how-flow-item.is-right
  .hmc-how-flow-card {
    width: 100%;

    margin: 0;

    justify-self: auto;
  }

  #how .hmc-how-flow-card {
    min-height: auto;

    grid-template-columns:
      40px minmax(0, 1fr);

    border-radius: 16px;
  }

  #how .hmc-how-flow-side span {
    font-size: 7px;
  }

  #how .hmc-how-flow-content {
    padding:
      19px 18px
      18px;
  }

  #how .hmc-how-flow-title {
    margin-bottom: 11px;
  }

  #how .hmc-how-flow-connector {
    display: none;
  }
}


/* ======================================================
   V24 — CLEAN ZIG-ZAG JOURNEY
   Solid page background + compact timeline
   ====================================================== */

/* ------------------------------------------------------
   SECTION
   ------------------------------------------------------ */

#how.hmc-how-journey {
  position: relative;

  overflow: hidden;

  padding:
    82px 0 88px !important;

  color:
    var(--ink-500) !important;

  /* No gradient on the body */
  background:
    #ffffff !important;
}

/* Remove decorative background circles from V23 */
#how.hmc-how-journey::before,
#how.hmc-how-journey::after {
  content:
    none !important;
}

/* ------------------------------------------------------
   HEADING
   ------------------------------------------------------ */

#how .hmc-how-journey-head {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(280px, 0.75fr);

  gap:
    54px;

  align-items:
    end;

  max-width:
    1120px;

  margin:
    0 auto 54px;
}

#how .hmc-how-eyebrow {
  margin:
    0 0 14px;

  color:
    var(--orange-700);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}

#how .hmc-how-journey-head h2 {
  max-width:
    700px;

  margin:
    0;

  color:
    var(--ink-600);

  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

  font-weight:
    700;

  line-height:
    1.04;

  letter-spacing:
    -0.045em;
}

#how .hmc-how-journey-copy {
  max-width:
    410px;

  margin:
    0;

  color:
    var(--ink-400);

  font-size:
    14px;

  line-height:
    1.7;
}

/* ------------------------------------------------------
   TIMELINE
   ------------------------------------------------------ */

#how .hmc-how-flow {
  position: relative;

  display: grid;

  gap:
    18px;

  max-width:
    980px;

  margin:
    0 auto;

  padding:
    6px 0;
}

/* One clean centre line */
#how .hmc-how-flow::before {
  content: "";

  position: absolute;

  top:
    28px;

  bottom:
    28px;

  left:
    50%;

  width:
    1px;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(111, 128, 149, 0.34) 0,
      rgba(111, 128, 149, 0.34) 5px,
      transparent 5px,
      transparent 10px
    );

  transform:
    translateX(-50%);
}

/* Each row uses left / centre / right */
#how .hmc-how-flow-item {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    76px
    minmax(0, 1fr);

  align-items:
    center;

  min-height:
    126px;
}

/* ------------------------------------------------------
   CARDS
   ------------------------------------------------------ */

#how .hmc-how-flow-card {
  position: relative;

  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr);

  width:
    min(
      100%,
      420px
    );

  min-height:
    118px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(201, 210, 223, 0.76);

  border-radius:
    16px;

  background:
    #fff8f7;

  box-shadow:
    0 10px 26px
    rgba(16, 20, 25, 0.045);
}

/* Left cards */
#how .hmc-how-flow-item.is-left
.hmc-how-flow-card {
  grid-column:
    1;

  justify-self:
    end;
}

/* Right cards */
#how .hmc-how-flow-item.is-right
.hmc-how-flow-card {
  grid-column:
    3;

  justify-self:
    start;

  background:
    #f7f8fa;
}

/* Schedule gets a slightly stronger accent */
#how .hmc-how-flow-item:nth-child(3)
.hmc-how-flow-card {
  border-color:
    rgba(255, 119, 93, 0.46);

  background:
    #fff4f3;
}

/* ------------------------------------------------------
   VERTICAL STEP LABEL
   ------------------------------------------------------ */

#how .hmc-how-flow-side {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    var(--ink-600);
}

#how .hmc-how-flow-item:nth-child(odd)
.hmc-how-flow-side {
  background:
    var(--orange-600);
}

#how .hmc-how-flow-side span {
  writing-mode:
    vertical-rl;

  transform:
    rotate(180deg);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    0.13em;
}

/* ------------------------------------------------------
   CARD CONTENT
   ------------------------------------------------------ */

#how .hmc-how-flow-content {
  padding:
    18px 20px;
}

#how .hmc-how-flow-title {
  display: flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    10px;
}

#how .hmc-how-flow-icon {
  display: grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    32px;

  height:
    32px;

  border:
    1px solid
    var(--orange-100);

  border-radius:
    9px;

  color:
    var(--orange-700);

  background:
    var(--orange-50);
}

#how .hmc-how-flow-title h3 {
  margin:
    0;

  color:
    var(--ink-600);

  font-size:
    16px;

  font-weight:
    650;
}

#how .hmc-how-flow-content > p {
  margin:
    0;

  color:
    var(--ink-400);

  font-size:
    12px;

  line-height:
    1.58;
}

/* ------------------------------------------------------
   CONNECTORS
   Short horizontal dotted connector to the centre rail
   ------------------------------------------------------ */

#how .hmc-how-flow-connector {
  position: absolute;

  top:
    50%;

  width:
    38px;

  height:
    1px;

  transform:
    translateY(-50%);

  pointer-events:
    none;
}

/* Left card → centre rail */
#how .hmc-how-flow-item.is-left
.hmc-how-flow-connector {
  right:
    calc(50% - 38px);
}

/* Right card ← centre rail */
#how .hmc-how-flow-item.is-right
.hmc-how-flow-connector {
  left:
    calc(50% - 38px);
}

#how .hmc-how-flow-connector::before {
  content: "";

  position: absolute;

  inset:
    0;

  border-top:
    1px dashed
    rgba(111, 128, 149, 0.42);
}

/* centre marker */
#how .hmc-how-flow-connector::after {
  content: "";

  position: absolute;

  top:
    50%;

  width:
    8px;

  height:
    8px;

  border:
    2px solid
    #ffffff;

  border-radius:
    50%;

  background:
    var(--orange-500);

  box-shadow:
    0 0 0 1px
    rgba(255, 83, 3, 0.24);

  transform:
    translateY(-50%);
}

#how .hmc-how-flow-item.is-left
.hmc-how-flow-connector::after {
  right:
    -4px;
}

#how .hmc-how-flow-item.is-right
.hmc-how-flow-connector::after {
  left:
    -4px;
}

/* Remove old arrow element */
#how .hmc-how-flow-connector span {
  display:
    none !important;
}

/* ------------------------------------------------------
   TABLET
   ------------------------------------------------------ */

@media (max-width: 980px) {
  #how .hmc-how-journey-head {
    grid-template-columns:
      1fr;

    gap:
      18px;

    margin-bottom:
      42px;
  }

  #how .hmc-how-journey-copy {
    max-width:
      620px;
  }

  #how .hmc-how-flow {
    max-width:
      760px;
  }

  #how .hmc-how-flow-item {
    grid-template-columns:
      minmax(0, 1fr)
      58px
      minmax(0, 1fr);
  }

  #how .hmc-how-flow-card {
    width:
      100%;
  }
}

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

@media (max-width: 680px) {
  #how.hmc-how-journey {
    padding:
      58px 0 64px !important;
  }

  #how .hmc-how-journey-head {
    margin-bottom:
      34px;
  }

  #how .hmc-how-journey-head h2 {
    font-size:
      clamp(
        30px,
        9vw,
        40px
      );
  }

  #how .hmc-how-flow {
    gap:
      14px;

    padding:
      0;
  }

  #how .hmc-how-flow::before {
    top:
      12px;

    bottom:
      12px;

    left:
      15px;
  }

  #how .hmc-how-flow-item {
    display:
      block;

    min-height:
      auto;

    padding-left:
      32px;
  }

  #how .hmc-how-flow-item.is-left
  .hmc-how-flow-card,
  #how .hmc-how-flow-item.is-right
  .hmc-how-flow-card {
    width:
      100%;

    justify-self:
      auto;
  }

  #how .hmc-how-flow-card {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    min-height:
      auto;

    border-radius:
      14px;
  }

  #how .hmc-how-flow-side span {
    font-size:
      6px;
  }

  #how .hmc-how-flow-content {
    padding:
      17px 16px;
  }

  #how .hmc-how-flow-title {
    margin-bottom:
      9px;
  }

  #how .hmc-how-flow-connector {
    display:
      none;
  }
}


/* ======================================================
   V25 — CENTERED HOW-IT-WORKS HEADING
   ====================================================== */

#how .hmc-how-journey-head {
  display: block !important;

  max-width:
    820px !important;

  margin:
    0 auto
    54px !important;

  text-align:
    center !important;
}

#how .hmc-how-eyebrow {
  margin:
    0 0 14px !important;

  text-align:
    center !important;
}

#how .hmc-how-journey-head h2 {
  max-width:
    760px !important;

  margin:
    0 auto !important;

  text-align:
    center !important;
}

#how .hmc-how-journey-copy {
  max-width:
    620px !important;

  margin:
    18px auto 0 !important;

  text-align:
    center !important;
}

@media (max-width: 680px) {
  #how .hmc-how-journey-head {
    margin-bottom:
      36px !important;
  }

  #how .hmc-how-journey-copy {
    margin-top:
      14px !important;
  }
}


/* ======================================================
   V26 — FIVE CLEAN HOW-IT-WORKS CARDS
   ====================================================== */

#how.hmc-how-cards-section {
  position: relative;

  overflow: hidden;

  padding:
    82px 0 90px !important;

  color:
    var(--ink-500) !important;

  background:
    #ffffff !important;
}

/* Remove any decorative backgrounds from previous versions */
#how.hmc-how-cards-section::before,
#how.hmc-how-cards-section::after {
  content:
    none !important;
}

/* ---------- CENTERED HEADING ---------- */

#how .hmc-how-cards-head {
  max-width:
    820px;

  margin:
    0 auto 48px;

  text-align:
    center;
}

#how .hmc-how-eyebrow {
  margin:
    0 0 14px;

  color:
    var(--orange-700);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-align:
    center;
}

#how .hmc-how-cards-head h2 {
  max-width:
    760px;

  margin:
    0 auto;

  color:
    var(--ink-600);

  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

  font-weight:
    700;

  line-height:
    1.04;

  letter-spacing:
    -0.045em;

  text-align:
    center;
}

#how .hmc-how-cards-copy {
  max-width:
    620px;

  margin:
    18px auto 0;

  color:
    var(--ink-400);

  font-size:
    14px;

  line-height:
    1.7;

  text-align:
    center;
}

/* ---------- FIVE CARD GRID ---------- */

#how .hmc-how-cards-grid {
  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap:
    16px;
}

/* ---------- CARD ---------- */

#how .hmc-how-card {
  position:
    relative;

  min-height:
    250px;

  padding:
    30px 24px 28px;

  border:
    1px solid
    var(--ink-50);

  border-radius:
    18px;

  background:
    #ffffff;

  box-shadow:
    0 10px 28px
    rgba(16, 20, 25, 0.045);

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

#how .hmc-how-card:hover {
  border-color:
    rgba(255, 151, 136, 0.52);

  box-shadow:
    0 14px 34px
    rgba(16, 20, 25, 0.065);
}

/* Accent line */
#how .hmc-how-card-accent {
  display:
    block;

  width:
    38px;

  height:
    4px;

  margin-bottom:
    28px;

  border-radius:
    999px;
}

/* Brand-based accent variations */
#how .hmc-how-card-accent--01 {
  background:
    var(--orange-600);
}

#how .hmc-how-card-accent--02 {
  background:
    var(--orange-400);
}

#how .hmc-how-card-accent--03 {
  background:
    var(--ink-400);
}

#how .hmc-how-card-accent--04 {
  background:
    var(--orange-300);
}

#how .hmc-how-card-accent--05 {
  background:
    var(--ink-600);
}

/* Step label */
#how .hmc-how-card-step {
  margin:
    0 0 12px;

  color:
    var(--orange-700);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.14em;
}

/* Card title */
#how .hmc-how-card h3 {
  margin:
    0 0 14px;

  color:
    var(--ink-600);

  font-size:
    20px;

  font-weight:
    700;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;
}

/* Card copy */
#how .hmc-how-card-copy {
  margin:
    0;

  color:
    var(--ink-400);

  font-size:
    13px;

  line-height:
    1.65;
}

/* No actions inside these cards */
#how .hmc-how-card button,
#how .hmc-how-card a {
  display:
    none !important;
}

/* ---------- TABLET ---------- */

@media (max-width: 1100px) {
  #how .hmc-how-cards-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #how .hmc-how-cards-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 560px) {
  #how.hmc-how-cards-section {
    padding:
      58px 0 64px !important;
  }

  #how .hmc-how-cards-head {
    margin-bottom:
      34px;
  }

  #how .hmc-how-cards-head h2 {
    font-size:
      clamp(
        30px,
        9vw,
        40px
      );
  }

  #how .hmc-how-cards-grid {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }

  #how .hmc-how-card {
    min-height:
      auto;

    padding:
      24px 20px 22px;
  }

  #how .hmc-how-card-accent {
    margin-bottom:
      22px;
  }
}


/* ======================================================
   V27 — LIGHT SECONDARY MENTOR PREVIEW CARDS
   No orange inside the cards
   ====================================================== */

/* Keep the section dark so the light cards have contrast */
#mentors {
  background:
    var(--ink-600) !important;
}

/* Card grid */
#mentors .hmc-mentor-grid {
  gap:
    18px !important;
}

/* Light secondary card surface */
#mentors .hmc-mentor-card {
  position:
    relative;

  min-height:
    238px;

  overflow:
    hidden;

  padding:
    24px !important;

  border:
    1px solid
    var(--ink-100) !important;

  border-radius:
    18px !important;

  background:
    #f7f8fa !important;

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.12) !important;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

/* Remove every orange decoration from the card */
#mentors .hmc-mentor-card::before,
#mentors .hmc-mentor-card::after {
  content:
    none !important;
}

/* Calm hover, no movement */
#mentors .hmc-mentor-card:hover {
  border-color:
    var(--ink-200) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 16px 36px
    rgba(0, 0, 0, 0.15) !important;
}

/* Avatar uses the secondary palette only */
#mentors .hmc-avatar {
  border:
    1px solid
    var(--ink-100) !important;

  color:
    var(--ink-600) !important;

  background:
    var(--ink-50) !important;
}

/* Mentor name */
#mentors .hmc-mentor-card-top strong {
  color:
    var(--ink-600) !important;

  font-size:
    15px;
}

/* Mentor specialty, no orange */
#mentors .hmc-mentor-card-top small {
  color:
    var(--ink-400) !important;

  font-weight:
    550;
}

/* Description */
#mentors .hmc-mentor-card > p {
  color:
    var(--ink-400) !important;

  font-size:
    13px;

  line-height:
    1.65;
}

/* Bottom divider */
#mentors .hmc-mentor-card-bottom {
  justify-content:
    flex-start !important;

  border-top:
    1px solid
    var(--ink-100) !important;

  color:
    var(--ink-300) !important;
}

/* Static sample badge, secondary palette only */
#mentors .hmc-sample-badge {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    0 10px;

  border:
    1px solid
    var(--ink-100) !important;

  border-radius:
    999px;

  color:
    var(--ink-500) !important;

  background:
    var(--ink-50) !important;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.04em;
}

/* Keep cards non-actionable */
#mentors .hmc-request-button {
  display:
    none !important;
}

/* Tablet */
@media (max-width: 900px) {
  #mentors .hmc-mentor-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #mentors .hmc-mentor-grid {
    grid-template-columns:
      1fr !important;
  }

  #mentors .hmc-mentor-card {
    min-height:
      auto;

    padding:
      22px !important;
  }
}


/* ======================================================
   V28 — FROSTED GLASS MENTOR CARDS
   Light white glass + secondary tint, no orange in cards
   ====================================================== */

/* Glass card surface */
#mentors .hmc-mentor-card {
  border:
    1px solid
    rgba(255, 255, 255, 0.46) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(247, 248, 250, 0.76) 55%,
      rgba(228, 232, 239, 0.70) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.82),
    0 16px 38px
    rgba(0, 0, 0, 0.14) !important;

  backdrop-filter:
    blur(18px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%);
}

/* Calm glass hover — no movement */
#mentors .hmc-mentor-card:hover {
  border-color:
    rgba(255, 255, 255, 0.66) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(247, 248, 250, 0.84) 58%,
      rgba(228, 232, 239, 0.76) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.92),
    0 18px 42px
    rgba(0, 0, 0, 0.16) !important;
}

/* Avatar also feels frosted, not orange */
#mentors .hmc-avatar {
  border:
    1px solid
    rgba(255, 255, 255, 0.72) !important;

  color:
    var(--ink-600) !important;

  background:
    rgba(255, 255, 255, 0.58) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.80);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

/* Strong readable text on translucent surface */
#mentors .hmc-mentor-card-top strong {
  color:
    var(--ink-600) !important;
}

#mentors .hmc-mentor-card-top small {
  color:
    var(--ink-400) !important;
}

#mentors .hmc-mentor-card > p {
  color:
    var(--ink-400) !important;
}

/* Softer divider */
#mentors .hmc-mentor-card-bottom {
  border-top:
    1px solid
    rgba(111, 128, 149, 0.18) !important;
}

/* Frosted static badge */
#mentors .hmc-sample-badge {
  border:
    1px solid
    rgba(111, 128, 149, 0.20) !important;

  color:
    var(--ink-500) !important;

  background:
    rgba(255, 255, 255, 0.48) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.64);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

/* Make sure old orange card effects never return */
#mentors .hmc-mentor-card::before,
#mentors .hmc-mentor-card::after {
  content:
    none !important;
}

#mentors .hmc-request-button {
  display:
    none !important;
}


/* ======================================================
   V29 — MODERN LIGHT GLASS MENTOR CARDS
   No orange inside the cards
   ====================================================== */

#mentors .hmc-mentor-card {
  position: relative;

  min-height:
    248px;

  overflow:
    hidden;

  padding:
    24px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.58) !important;

  border-radius:
    24px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(247, 248, 250, 0.90) 58%,
      rgba(228, 232, 239, 0.84) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.94),
    0 18px 46px
    rgba(0, 0, 0, 0.14) !important;

  backdrop-filter:
    blur(20px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(115%);

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

/* subtle cool highlight only */
#mentors .hmc-mentor-card::before {
  content: "";

  position: absolute;

  top:
    -70px;
  right:
    -70px;

  width:
    170px;
  height:
    170px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(151, 170, 194, 0.16) 0%,
      rgba(201, 210, 223, 0.08) 42%,
      transparent 72%
    );

  pointer-events: none;
}

#mentors .hmc-mentor-card::after {
  content: "";

  position: absolute;

  top: 0;
  left: 24px;
  right: 24px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.88),
      transparent
    );

  pointer-events: none;
}

#mentors .hmc-mentor-card:hover {
  border-color:
    rgba(255, 255, 255, 0.76) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(247, 248, 250, 0.94) 60%,
      rgba(228, 232, 239, 0.88) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 1),
    0 20px 52px
    rgba(0, 0, 0, 0.17) !important;
}

/* top row */
#mentors .hmc-mentor-card-top {
  display: flex;

  align-items: center;

  gap: 14px;
}

/* avatar */
#mentors .hmc-avatar {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width:
    52px;

  height:
    52px;

  border:
    1px solid
    rgba(201, 210, 223, 0.80) !important;

  border-radius:
    16px !important;

  color:
    var(--ink-600) !important;

  background:
    rgba(255, 255, 255, 0.76) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.88),
    0 8px 18px
    rgba(16, 20, 25, 0.06);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

/* mentor name */
#mentors .hmc-mentor-card-top strong {
  color:
    var(--ink-600) !important;

  font-size:
    15px;

  font-weight:
    650;
}

/* specialty as a small modern pill */
#mentors .hmc-mentor-card-top small {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  min-height:
    24px;

  margin-top:
    5px;

  padding:
    0 9px;

  border:
    1px solid
    rgba(151, 170, 194, 0.30);

  border-radius:
    999px;

  color:
    var(--ink-400) !important;

  background:
    rgba(228, 232, 239, 0.54);

  font-size:
    10px;

  font-weight:
    600;
}

/* description */
#mentors .hmc-mentor-card > p {
  margin-top:
    22px;

  color:
    var(--ink-400) !important;

  font-size:
    13px;

  line-height:
    1.68;
}

/* bottom divider */
#mentors .hmc-mentor-card-bottom {
  margin-top:
    auto;

  padding-top:
    18px;

  border-top:
    1px solid
    rgba(111, 128, 149, 0.16) !important;

  color:
    var(--ink-300) !important;
}

/* static sample badge */
#mentors .hmc-sample-badge {
  min-height:
    28px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(151, 170, 194, 0.26) !important;

  border-radius:
    999px;

  color:
    var(--ink-500) !important;

  background:
    rgba(255, 255, 255, 0.56) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.72);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.03em;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

/* never show mentor request action on homepage sample cards */
#mentors .hmc-request-button {
  display:
    none !important;
}

/* tablet */
@media (max-width: 900px) {
  #mentors .hmc-mentor-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* mobile */
@media (max-width: 620px) {
  #mentors .hmc-mentor-grid {
    grid-template-columns:
      1fr !important;
  }

  #mentors .hmc-mentor-card {
    min-height:
      auto;

    padding:
      22px !important;

    border-radius:
      20px !important;
  }

  #mentors .hmc-avatar {
    width:
      48px;

    height:
      48px;
  }
}


/* ======================================================
   V30 — REFINED TRUST & SAFETY
   White section, dark title, no teal/tick treatment
   ====================================================== */

#trust.hmc-trust {
  position: relative;

  overflow: hidden;

  padding:
    82px 0 88px !important;

  color:
    var(--ink-500) !important;

  background:
    #ffffff !important;
}

/* Remove old decorative/tertiary treatments */
#trust.hmc-trust::before,
#trust.hmc-trust::after {
  content:
    none !important;
}

/* ---------- INTRO ---------- */

#trust .hmc-trust-intro {
  max-width:
    820px;

  margin-bottom:
    42px;
}

#trust .hmc-trust-intro > p {
  margin:
    0 0 14px;

  color:
    var(--orange-700) !important;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}

#trust .hmc-trust-intro h2 {
  max-width:
    720px;

  margin:
    0;

  color:
    var(--ink-600) !important;

  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

  font-weight:
    700;

  line-height:
    1.04;

  letter-spacing:
    -0.045em;
}

#trust .hmc-trust-intro > span {
  display:
    block;

  max-width:
    680px;

  margin-top:
    18px;

  color:
    var(--ink-400) !important;

  font-size:
    14px;

  line-height:
    1.7;
}

/* ---------- GRID ---------- */

#trust .hmc-trust-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    16px;
}

/* ---------- CARDS ---------- */

#trust .hmc-trust-card {
  position:
    relative;

  min-height:
    210px;

  padding:
    24px;

  overflow:
    hidden;

  border:
    1px solid
    var(--ink-50) !important;

  border-radius:
    20px;

  color:
    var(--ink-500) !important;

  background:
    #f7f8fa !important;

  box-shadow:
    0 10px 28px
    rgba(16, 20, 25, 0.045) !important;

  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

#trust .hmc-trust-card::before {
  content: "";

  position:
    absolute;

  top:
    0;

  left:
    24px;

  width:
    42px;

  height:
    2px;

  background:
    var(--ink-300);

  opacity:
    0.72;
}

#trust .hmc-trust-card:hover {
  border-color:
    var(--ink-100) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 14px 34px
    rgba(16, 20, 25, 0.065) !important;
}

/* ---------- ICON TILE ---------- */

#trust .hmc-trust-icon {
  display:
    grid;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

  margin-bottom:
    26px;

  border:
    1px solid
    rgba(201, 210, 223, 0.14);

  border-radius:
    13px;

  color:
    #ffffff !important;

  background:
    var(--ink-600) !important;

  box-shadow:
    0 8px 20px
    rgba(16, 20, 25, 0.12);
}

/* Explicitly kill any inherited teal treatment */
#trust .hmc-trust-icon svg {
  color:
    #ffffff !important;

  stroke:
    currentColor;
}

/* ---------- TEXT ---------- */

#trust .hmc-trust-card h3 {
  margin:
    0 0 11px;

  color:
    var(--ink-600) !important;

  font-size:
    15px;

  font-weight:
    650;

  line-height:
    1.25;
}

#trust .hmc-trust-card p {
  margin:
    0;

  color:
    var(--ink-400) !important;

  font-size:
    12px;

  line-height:
    1.65;
}

/* ---------- TABLET ---------- */

@media (max-width: 1000px) {
  #trust .hmc-trust-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 600px) {
  #trust.hmc-trust {
    padding:
      58px 0 64px !important;
  }

  #trust .hmc-trust-intro {
    margin-bottom:
      32px;
  }

  #trust .hmc-trust-intro h2 {
    font-size:
      clamp(
        30px,
        9vw,
        40px
      );
  }

  #trust .hmc-trust-grid {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }

  #trust .hmc-trust-card {
    min-height:
      auto;

    padding:
      22px;

    border-radius:
      18px;
  }

  #trust .hmc-trust-icon {
    margin-bottom:
      20px;
  }
}


/* ======================================================
   V32 — CTA BUTTON ALIGNMENT FIX
   Keep CTA actions aligned with CTA copy
   ====================================================== */

.hmc-cta .hmc-hero-actions {
  justify-content:
    flex-start !important;

  align-items:
    center !important;

  flex-direction:
    row !important;

  width:
    auto !important;

  margin:
    28px 0 0 !important;
}

.hmc-cta .hmc-pill {
  width:
    auto !important;

  min-width:
    190px !important;
}

/* Tablet / mobile */
@media (max-width: 700px) {
  .hmc-cta .hmc-hero-actions {
    align-items:
      stretch !important;

    flex-direction:
      column !important;

    width:
      100% !important;
  }

  .hmc-cta .hmc-pill {
    width:
      100% !important;

    min-width:
      0 !important;
  }
}


/* ======================================================
   V33 — CTA USES HERO BACKGROUND
   Same technical-grid treatment as hero
   ====================================================== */

.hmc-cta {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  padding:
    54px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    28px;

  color:
    var(--ink-50);

  background-color:
    #030405 !important;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 70% 20%,
      rgba(255, 83, 3, 0.24) 0%,
      rgba(255, 119, 93, 0.12) 18%,
      rgba(255, 151, 136, 0.055) 32%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 58% 42%,
      rgba(76, 88, 103, 0.48) 0%,
      rgba(45, 53, 63, 0.34) 32%,
      rgba(16, 20, 25, 0.18) 52%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #101419 0%,
      #080b0f 48%,
      #030405 100%
    ) !important;

  background-size:
    54px 54px,
    54px 54px,
    auto,
    auto,
    auto !important;

  background-position:
    center,
    center,
    center,
    center,
    center !important;

  box-shadow:
    0 22px 56px
    rgba(16, 20, 25, 0.16);
}

/* Same hero-style fade over the technical grid */
.hmc-cta::before {
  content: "";

  position:
    absolute;

  z-index:
    0;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 4, 5, 0.02) 0%,
      rgba(3, 4, 5, 0.08) 48%,
      rgba(3, 4, 5, 0.28) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 0%,
      transparent 52%,
      rgba(3, 4, 5, 0.16) 78%,
      rgba(3, 4, 5, 0.34) 100%
    );
}

/* Hero-style focal glow */
.hmc-cta::after {
  content: "";

  position:
    absolute;

  z-index:
    0;

  top:
    -38%;

  right:
    -4%;

  width:
    64%;

  height:
    120%;

  pointer-events:
    none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 83, 3, 0.18) 0%,
      rgba(255, 119, 93, 0.075) 30%,
      rgba(255, 151, 136, 0.025) 50%,
      transparent 72%
    );

  filter:
    blur(18px);
}

/* Keep CTA content above the background layers */
.hmc-cta > * {
  position:
    relative;

  z-index:
    1;
}

.hmc-cta h2 {
  color:
    #ffffff !important;
}

.hmc-cta > p {
  color:
    var(--ink-100) !important;
}

/* Keep the CTA buttons aligned with the copy */
.hmc-cta .hmc-hero-actions {
  justify-content:
    flex-start !important;

  align-items:
    center !important;

  flex-direction:
    row !important;

  width:
    auto !important;

  margin:
    28px 0 0 !important;
}

@media (max-width: 700px) {
  .hmc-cta {
    padding:
      34px 24px;

    border-radius:
      22px;

    background-size:
      42px 42px,
      42px 42px,
      auto,
      auto,
      auto !important;
  }

  .hmc-cta .hmc-hero-actions {
    align-items:
      stretch !important;

    flex-direction:
      column !important;

    width:
      100% !important;
  }
}

/* =========================================================
   HOME RESPONSIVE
   Only adjusts:
   1. Hero + final CTA buttons
   2. Mobile/tablet spacing
   3. Smooth anchor scrolling

   Card layouts are intentionally NOT changed here.
   Home.css remains in control of the cards.
   ========================================================= */

html {
  scroll-behavior: smooth;
}

#top,
#how,
#mentors,
#trust,
#accountability {
  scroll-margin-top: 92px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 681px) and (max-width: 1100px) {
  .hmc-home .hmc-hero {
    min-height: auto !important;
  }

  .hmc-home .hmc-hero-content {
    min-height: auto !important;

    padding:
      126px 0
      48px !important;
  }

  .hmc-home .hmc-hero-copy {
    width: min(100%, 700px) !important;
    max-width: 700px !important;

    margin-inline: auto !important;

    text-align: center !important;
  }

  .hmc-home .hmc-hero h1 {
    max-width: 680px !important;

    margin-inline: auto !important;

    font-size:
      clamp(
        44px,
        7vw,
        58px
      ) !important;

    line-height: 1.04 !important;
  }

  .hmc-home .hmc-hero-description {
    max-width: 620px !important;

    margin:
      24px auto
      0 !important;
  }

  .hmc-home .hmc-hero .hmc-hero-actions,
  .hmc-home .hmc-cta .hmc-hero-actions {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 10px !important;

    width: min(100%, 410px) !important;
    max-width: 410px !important;

    margin:
      22px auto
      0 !important;
  }

  .hmc-home .hmc-hero .hmc-hero-actions .hmc-pill,
  .hmc-home .hmc-cta .hmc-hero-actions .hmc-pill {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 46px !important;

    grid-template-columns:
      minmax(0, 1fr)
      34px !important;

    padding:
      5px
      5px
      5px
      13px !important;

    font-size: 11px !important;
  }

  .hmc-home .hmc-hero-actions .hmc-pill > i {
    width: 34px !important;
    height: 34px !important;
  }

  .hmc-home .hmc-hero-note {
    text-align: center !important;
  }

  .hmc-home .hmc-hero-art {
    display: none !important;
  }

  .hmc-home .hmc-section {
    padding:
      54px 0 !important;
  }

  .hmc-home .hmc-cta {
    padding:
      34px
      28px !important;

    text-align: center !important;
  }
}

/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 680px) {
  .hmc-home .hmc-shell {
    width:
      min(
        calc(100% - 28px),
        1240px
      ) !important;
  }

  .hmc-home .hmc-nav {
    min-height: 68px !important;
  }

  .hmc-home .hmc-hero {
    min-height: auto !important;
  }

  .hmc-home .hmc-hero-content {
    display: block !important;

    min-height: auto !important;

    padding:
      116px 0
      42px !important;
  }

  .hmc-home .hmc-hero-copy {
    width: 100% !important;
    max-width: 100% !important;

    margin-inline: auto !important;

    text-align: center !important;
  }

  .hmc-home .hmc-kicker {
    margin:
      0 auto
      18px !important;
  }

  .hmc-home .hmc-hero h1 {
    max-width: 365px !important;

    margin-inline: auto !important;

    font-size:
      clamp(
        32px,
        9.2vw,
        40px
      ) !important;

    line-height: 1.08 !important;
  }

  .hmc-home .hmc-hero-description {
    max-width: 345px !important;

    margin:
      22px auto
      0 !important;

    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  /* Keep the two main CTA buttons on ONE line. */
  .hmc-home .hmc-hero .hmc-hero-actions,
  .hmc-home .hmc-cta .hmc-hero-actions {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 7px !important;

    width: min(100%, 292px) !important;
    max-width: 292px !important;

    margin:
      18px auto
      0 !important;
  }

  .hmc-home .hmc-hero .hmc-hero-actions .hmc-pill,
  .hmc-home .hmc-cta .hmc-hero-actions .hmc-pill {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      30px !important;

    gap: 4px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;

    padding:
      4px
      4px
      4px
      9px !important;

    border-radius: 999px !important;

    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  .hmc-home .hmc-hero-actions .hmc-pill > span {
    min-width: 0 !important;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hmc-home .hmc-hero-actions .hmc-pill > i {
    width: 30px !important;
    height: 30px !important;
  }

  .hmc-home .hmc-hero-actions .hmc-pill > i svg {
    width: 14px !important;
    height: 14px !important;
  }

  .hmc-home .hmc-hero-note {
    margin-top: 20px !important;

    text-align: center !important;
  }

  .hmc-home .hmc-hero-art {
    display: none !important;
  }

  /*
    Keep the cards exactly as Home.css designed them.
    Only reduce section spacing so the page feels lighter.
  */
  .hmc-home .hmc-section {
    padding:
      40px 0 !important;
  }

  .hmc-home .hmc-how-cards-head,
  .hmc-home .hmc-section-heading,
  .hmc-home .hmc-trust-intro {
    margin-bottom: 18px !important;
  }

  .hmc-home .hmc-cta-section {
    padding:
      34px 0
      38px !important;
  }

  .hmc-home .hmc-cta {
    padding:
      24px
      16px !important;

    border-radius: 18px !important;

    text-align: center !important;
  }

  .hmc-home .hmc-cta > p {
    max-width: 330px !important;

    margin-inline: auto !important;
  }

  .hmc-home .hmc-footer {
    padding-top: 32px !important;
  }
}

/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 380px) {
  .hmc-home .hmc-shell {
    width:
      min(
        calc(100% - 22px),
        1240px
      ) !important;
  }

  .hmc-home .hmc-hero .hmc-hero-actions,
  .hmc-home .hmc-cta .hmc-hero-actions {
    width: min(100%, 270px) !important;
    max-width: 270px !important;

    gap: 6px !important;
  }

  .hmc-home .hmc-hero .hmc-hero-actions .hmc-pill,
  .hmc-home .hmc-cta .hmc-hero-actions .hmc-pill {
    grid-template-columns:
      minmax(0, 1fr)
      28px !important;

    height: 40px !important;

    padding:
      4px
      4px
      4px
      8px !important;

    font-size: 9px !important;
  }

  .hmc-home .hmc-hero-actions .hmc-pill > i {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* =========================================================
   HOME — PUBLIC MENTOR + TESTIMONIAL DISCOVERY
   Production styling
   ========================================================= */

/* ---------------------------------------------------------
   MENTOR SECTION
   --------------------------------------------------------- */

#mentors {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(255, 83, 3, 0.09),
      transparent 34%
    ),
    #0d1218;
}

#mentors::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55),
      transparent 82%
    );
}

#mentors .hmc-shell {
  position: relative;
  z-index: 1;
}

#mentors .hmc-section-heading {
  max-width: 720px;
  margin: 0 0 28px;
}

#mentors .hmc-section-heading > p {
  color: #ff7a42;
}

#mentors .hmc-section-heading h2 {
  color: #ffffff;
}

#mentors .hmc-section-heading > span {
  color: #aeb8c6;
}

#mentors .hmc-tabs {
  margin: 0 0 24px;
}

#mentors .hmc-tabs button {
  border-color:
    rgba(255, 255, 255, 0.1);

  color: #cbd3dd;
  background:
    rgba(255, 255, 255, 0.045);
}

#mentors .hmc-tabs button:hover {
  border-color:
    rgba(255, 255, 255, 0.2);

  color: #ffffff;
  background:
    rgba(255, 255, 255, 0.075);
}

#mentors .hmc-tabs button.is-active {
  border-color:
    rgba(255, 122, 66, 0.72);

  color: #ffffff;
  background:
    rgba(255, 83, 3, 0.16);
}

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

#mentors .hmc-mentor-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 320px;
  padding: 22px;

  border: 1px solid #e6ebf0;
  border-radius: 20px;

  color: #17202a;
  background: #ffffff;

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.16);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

#mentors .hmc-mentor-card:hover {
  border-color:
    rgba(255, 122, 66, 0.38);

  transform:
    translateY(-3px);

  box-shadow:
    0 24px 58px
    rgba(0, 0, 0, 0.24);
}

#mentors .hmc-mentor-card--placeholder {
  border:
    1px dashed
    rgba(255, 255, 255, 0.16);

  color: #d8dee7;
  background:
    rgba(255, 255, 255, 0.035);

  box-shadow: none;
}

#mentors
  .hmc-mentor-card--placeholder:hover {
  border-color:
    rgba(255, 122, 66, 0.34);

  background:
    rgba(255, 255, 255, 0.05);

  box-shadow: none;
}

#mentors
  .hmc-mentor-card--placeholder
  .hmc-mentor-card-top
  strong {
  color: #f4f6f8;
}

#mentors
  .hmc-mentor-card--placeholder
  .hmc-mentor-card-top
  small,
#mentors
  .hmc-mentor-card--placeholder
  .hmc-mentor-placeholder-copy,
#mentors
  .hmc-mentor-card--placeholder
  .hmc-mentor-placeholder-link {
  color: #929eac;
}

#mentors
  .hmc-mentor-card--placeholder
  .hmc-public-mentor-tags
  span {
  border-color:
    rgba(255, 255, 255, 0.1);

  color: #aab4c0;
  background:
    rgba(255, 255, 255, 0.055);
}

#mentors
  .hmc-mentor-card--placeholder
  .hmc-mentor-card-bottom {
  border-top-color:
    rgba(255, 255, 255, 0.08);
}

#mentors
  .hmc-mentor-card--placeholder
  .hmc-sample-badge--placeholder {
  color: #aab4c0;
  background:
    rgba(255, 255, 255, 0.06);
}

#mentors .hmc-mentor-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

#mentors .hmc-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 52px;

  width: 52px;
  height: 52px;

  border-radius: 15px;

  font-size: 16px;
  font-weight: 800;
}

#mentors .hmc-avatar--initials {
  border: 1px solid #aee7de;

  color: #087f74;
  background: #e9faf7;
}

#mentors .hmc-avatar--placeholder {
  border: 1px solid #ffd8c8;

  color: #ff5303;
  background: #fff3ec;
}

#mentors .hmc-avatar-image {
  object-fit: cover;
}

#mentors .hmc-mentor-card-top strong {
  color: #101419;

  font-size: 15px;
  line-height: 1.3;
}

#mentors .hmc-mentor-card-top small {
  display: block;
  margin-top: 4px;

  color: #6e7b8b;

  font-size: 10px;
  line-height: 1.5;
}

#mentors .hmc-mentor-description {
  display: -webkit-box;
  overflow: hidden;

  margin-top: 18px;

  color: #536171;

  font-size: 12px;
  line-height: 1.75;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

#mentors .hmc-mentor-placeholder-copy {
  color: #6a7686;
}

#mentors .hmc-public-mentor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 16px;
  padding-bottom: 20px;
}

#mentors .hmc-public-mentor-tags span {
  padding: 6px 9px;

  border: 1px solid #e5eaf0;
  border-radius: 999px;

  color: #566474;
  background: #f6f8fa;

  font-size: 9px;
  font-weight: 700;
}

#mentors .hmc-mentor-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-top: auto;
  padding-top: 18px;

  border-top: 1px solid #e7ebef;
}

#mentors .hmc-sample-badge {
  display: inline-flex;
  align-items: center;

  padding: 6px 9px;

  border-radius: 999px;

  color: #3f4c59;
  background: #f4f7f9;

  font-size: 9px;
  font-weight: 750;
}

#mentors .hmc-sample-badge--placeholder {
  color: #5f6e7e;
  background: #eef2f6;
}

#mentors .hmc-mentor-connect-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;

  min-height: 36px;
  margin-left: auto;
  padding: 4px 0 4px 14px;

  border: 0;
  border-radius: 0;

  color: #0aa88f;
  background: transparent;

  font-size: 10px;
  font-weight: 750;
  text-decoration: none;

  transition:
    color 160ms ease,
    transform 160ms ease;
}

#mentors .hmc-mentor-connect-link:hover {
  color: #087f74;
  background: transparent;

  transform:
    translateX(2px);
}

#mentors
  .hmc-mentor-connect-link:focus-visible {
  outline:
    2px solid
    rgba(10, 168, 143, 0.28);

  outline-offset: 4px;
}

#mentors .hmc-mentor-placeholder-link {
  color: #8795a6;

  font-size: 10px;
  font-weight: 700;
}

.hmc-mentor-section-footer {
  display: flex;
  justify-content: center;

  margin-top: 28px;
}

.hmc-public-loading,
.hmc-public-empty {
  display: grid;
  justify-items: center;
  gap: 10px;

  width: 100%;
  padding: 38px 22px;

  border: 1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 18px;

  color: #c2cad4;
  background:
    rgba(255, 255, 255, 0.045);

  text-align: center;
}

.hmc-public-loading p,
.hmc-public-empty p {
  max-width: 520px;
  margin: 0;

  font-size: 13px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   TESTIMONIALS
   --------------------------------------------------------- */

.hmc-testimonials-section {
  background: #ffffff;
}

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

.hmc-testimonial-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 250px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 10px 28px
    rgba(16, 20, 25, 0.04);
}

.hmc-testimonial-quote {
  color: #ff5303;
}

.hmc-testimonial-stars {
  display: flex;
  align-items: center;
  gap: 3px;

  margin-top: 18px;

  color: #ff5303;
}

.hmc-testimonial-card > p {
  margin: 18px 0 24px;

  color: #2d353f;

  font-size: 14px;
  line-height: 1.75;
}

.hmc-testimonial-card footer {
  display: grid;
  gap: 4px;

  margin-top: auto;
  padding-top: 16px;

  border-top: 1px solid #e4e8ef;
}

.hmc-testimonial-card footer strong {
  color: #101419;

  font-size: 13px;
}

.hmc-testimonial-card footer span {
  color: #6f8095;

  font-size: 11px;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {
  #mentors .hmc-mentor-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  #mentors .hmc-section-heading {
    margin-bottom: 22px;
  }

  #mentors .hmc-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;

    padding-bottom: 2px;

    scrollbar-width: none;
  }

  #mentors .hmc-tabs::-webkit-scrollbar {
    display: none;
  }

  #mentors .hmc-tabs button {
    flex: 0 0 auto;
  }

  #mentors .hmc-mentor-grid {
    grid-template-columns: 1fr;
  }

  #mentors .hmc-mentor-card {
    min-height: 0;
    padding: 18px;
  }

  #mentors .hmc-mentor-card-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  #mentors .hmc-mentor-connect-link {
    width: 100%;
  }

  .hmc-mentor-section-footer {
    justify-content: stretch;
  }

  .hmc-mentor-section-footer .hmc-pill {
    width: 100%;
  }

  .hmc-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .hmc-testimonial-card {
    min-height: 0;
    padding: 20px;
  }
}


/* =========================================================
   FINAL MENTOR CARD OVERRIDES
   These rules intentionally use stronger selectors and
   !important because older Home.css mentor-card versions
   also use !important.
   ========================================================= */

/* Real mentor card: soft brand-tinted surface, not grey/glass */
#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) {
  border:
    1px solid
    rgba(10, 168, 143, 0.16) !important;

  background:
    #f2fbf8 !important;

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, 0.14) !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}

/* Do not allow old frosted-card decorations back in */
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)::before,
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)::after {
  content:
    none !important;
}

/* Mentor initials use the secondary teal colour */
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-avatar--initials {
  border:
    1px solid
    rgba(10, 168, 143, 0.22) !important;

  color:
    #087f74 !important;

  background:
    #dff7f1 !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}

/* Job title / organisation is plain text, aligned with the name */
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-mentor-card-top
  small {
  display: block !important;

  width: auto !important;
  margin:
    4px 0 0 !important;
  padding:
    0 !important;

  border:
    0 !important;
  border-radius:
    0 !important;

  color:
    #617181 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  font-size:
    10px !important;
  font-weight:
    550 !important;
  line-height:
    1.5 !important;
}

/* Mentorship area tags: compact, borderless, secondary-colour tint */
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-public-mentor-tags {
  gap:
    8px !important;

  margin-top:
    18px !important;
  padding-bottom:
    22px !important;
}

#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-public-mentor-tags
  span {
  min-height:
    28px;

  display:
    inline-flex;
  align-items:
    center;

  padding:
    0 10px !important;

  border:
    0 !important;
  border-radius:
    999px !important;

  color:
    #356a63 !important;

  background:
    #e2f5f0 !important;

  font-size:
    9px !important;
  font-weight:
    650 !important;
  letter-spacing:
    0 !important;
}

/* Footer divider gets proper breathing room */
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-mentor-card-bottom {
  justify-content:
    space-between !important;

  gap:
    18px !important;

  margin-top:
    auto !important;
  padding-top:
    18px !important;

  border-top:
    1px solid
    rgba(10, 168, 143, 0.14) !important;
}

/* Available-spaces status: small status chip with teal dot */
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-sample-badge {
  display:
    inline-flex !important;
  align-items:
    center !important;
  gap:
    7px !important;

  min-height:
    30px !important;

  padding:
    0 10px !important;

  border:
    0 !important;
  border-radius:
    999px !important;

  color:
    #33444f !important;

  background:
    rgba(255, 255, 255, 0.78) !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  font-size:
    9px !important;
  font-weight:
    700 !important;
  letter-spacing:
    0 !important;
}

#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-sample-badge::before {
  content:
    "";

  flex:
    0 0 7px;

  width:
    7px;
  height:
    7px;

  border-radius:
    50%;

  background:
    #0aa88f;
}

/* Tertiary action in the secondary brand colour */
#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-mentor-connect-link {
  display:
    inline-flex !important;
  align-items:
    center !important;
  justify-content:
    flex-end !important;
  gap:
    6px !important;

  min-height:
    36px !important;

  margin-left:
    auto !important;

  padding:
    4px 0 4px 12px !important;

  border:
    0 !important;
  border-radius:
    0 !important;

  color:
    #0aa88f !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  font-size:
    10px !important;
  font-weight:
    750 !important;
  text-decoration:
    none !important;
}

#mentors
  .hmc-mentor-card:not(.hmc-mentor-card--placeholder)
  .hmc-mentor-connect-link:hover {
  color:
    #087f74 !important;

  background:
    transparent !important;

  transform:
    translateX(2px);
}

/* Keep placeholder cards visually different from real mentor cards */
#mentors .hmc-mentor-card--placeholder {
  border:
    1px dashed
    rgba(255, 255, 255, 0.16) !important;

  background:
    rgba(255, 255, 255, 0.035) !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


/* =========================================================
   SECONDARY-COLOUR MENTOR CARD CORRECTION
   Website secondary = ink / charcoal, NOT teal.
   ========================================================= */

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) {
  border: 1px solid rgba(201, 210, 223, 0.55) !important;
  background: #f8f9fb !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-avatar--initials {
  border: 1px solid #dbe2ea !important;
  color: #101419 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-mentor-card-top small {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #6f8095 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-public-mentor-tags {
  gap: 8px !important;
  margin-top: 18px !important;
  padding-bottom: 22px !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-public-mentor-tags span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 999px !important;
  color: #2d353f !important;
  background: #ffffff !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-mentor-card-bottom {
  gap: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #dde3ea !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-sample-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 999px !important;
  color: #2d353f !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-sample-badge::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d353f;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-mentor-connect-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-height: 36px !important;
  margin-left: auto !important;
  padding: 4px 0 4px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #101419 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-mentor-connect-link:hover {
  color: #2d353f !important;
  background: transparent !important;
  transform: translateX(2px);
}

#mentors .hmc-mentor-card:not(.hmc-mentor-card--placeholder) .hmc-mentor-connect-link:focus-visible {
  outline: 2px solid rgba(45, 53, 63, 0.24);
  outline-offset: 4px;
}
.login-page {
  --login-orange-50: #fff4f3;
  --login-orange-100: #ffe5e3;
  --login-orange-200: #ffcbc5;
  --login-orange-300: #ffb4aa;
  --login-orange-400: #ff9788;
  --login-orange-500: #ff775d;
  --login-orange-600: #ff5303;
  --login-orange-700: #c13c00;

  --login-ink-50: #e4e8ef;
  --login-ink-100: #c9d2df;
  --login-ink-200: #97aac2;
  --login-ink-300: #6f8095;
  --login-ink-400: #4c5867;
  --login-ink-500: #2d353f;
  --login-ink-600: #101419;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  width: 100%;
  max-width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  margin: 0;

  overflow-x: hidden;

  color:
    var(--login-ink-400);

  background:
    #ffffff !important;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* =====================================================
   AUTH PAGE CANVAS
   Keep the browser/root canvas pure white on every size.
   This also covers mobile overscroll/bounce areas.
   ===================================================== */

html:has(.login-page),
body:has(.login-page),
body:has(.login-page) #root {
  background-color: #ffffff !important;
  background-image: none !important;
}

.login-page *,
.login-page *::before,
.login-page *::after {
  box-sizing: border-box;
}

.login-page a {
  text-decoration: none;
}

.login-page button,
.login-page input {
  font: inherit;
}

.login-page button,
.login-page a {
  touch-action: manipulation;
}

.login-page button {
  -webkit-tap-highlight-color:
    transparent;
}

/* =====================================================
   LEFT SIDE
   ===================================================== */

.login-form-side {
  display: flex;
  justify-content: center;

  grid-column: 1;

  width: 100%;
  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  background:
    #ffffff !important;
}

.login-form-inner {
  display: flex;
  flex-direction: column;

  width:
    min(
      100%,
      500px
    );

  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  padding:
    44px
    28px;

  margin-inline: auto;

  background:
    #ffffff !important;
}

.login-main-content {
  width: 100%;
  min-width: 0;
}

.login-brand-row {
  display: flex;
  align-items: center;

  margin-bottom: 58px;
}

.login-brand {
  display: flex;
  align-items: center;

  gap: 12px;
}

.login-brand img {
  display: block;

  width: 78px;
  height: 46px;

  object-fit: contain;
  object-position: left center;
}

.login-brand > span {
  display: grid;

  gap: 2px;
}

.login-brand strong {
  color:
    var(--login-ink-600);

  font-size: 15px;
  font-weight: 650;
}

.login-brand small {
  color:
    var(--login-ink-300);

  font-size: 8px;
  font-weight: 500;
  letter-spacing:
    0.14em;
}

/* =====================================================
   HEADING
   ===================================================== */

.login-heading {
  margin-bottom: 28px;
}

.login-heading > span {
  color:
    var(--login-orange-700);

  font-size: 9px;
  font-weight: 600;
  letter-spacing:
    0.16em;
}

.login-heading h1 {
  margin:
    8px 0 8px;

  color:
    var(--login-ink-600);

  font-size: 30px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing:
    -0.04em;
}

.login-heading p {
  max-width: 420px;

  margin: 0;

  color:
    var(--login-ink-400);

  font-size: 14px;
  line-height: 1.6;
}

.login-error {
  margin:
    0 0 14px;

  padding:
    11px 13px;

  border:
    1px solid
    #efc8cc;

  border-radius: 10px;

  color:
    #a23943;

  background:
    #fff2f3;

  font-size: 11px;
  line-height: 1.5;
}

/* =====================================================
   FORM
   ===================================================== */

.login-form {
  display: grid;

  width: 100%;

  gap: 16px;
}

.login-field {
  display: block;

  width: 100%;
  min-width: 0;
}

.login-field > span {
  display: block;

  margin-bottom: 7px;

  color:
    var(--login-ink-600);

  font-size: 13px;
  font-weight: 600;
}

.login-field input {
  display: block;

  width: 100%;
  min-width: 0;
  min-height: 46px;

  padding:
    0 13px;

  border:
    1px solid
    var(--login-ink-100);

  border-radius: 11px;

  outline: none;

  color:
    var(--login-ink-600);

  background:
    #ffffff;

  font-size: 14px;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.login-field input::placeholder {
  color:
    var(--login-ink-200);
}

.login-field input:focus,
.login-field input:focus-visible {
  border-color:
    var(--login-ink-400);

  outline: none;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.08);
}

/* =====================================================
   AUTOFILL
   ===================================================== */

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
  -webkit-text-fill-color:
    var(--login-ink-600) !important;

  -webkit-box-shadow:
    0 0 0 1000px
    #ffffff
    inset !important;

  box-shadow:
    0 0 0 1000px
    #ffffff
    inset !important;

  background:
    #ffffff !important;

  caret-color:
    var(--login-ink-600);
}

/* =====================================================
   PASSWORD
   ===================================================== */

.login-password-wrap {
  position: relative;

  width: 100%;
}

.login-password-wrap input {
  padding-right: 46px;
}

.login-password-wrap > button {
  position: absolute;

  top: 50%;
  right: 9px;

  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  color:
    var(--login-ink-300);

  background:
    transparent;

  cursor: pointer;

  transform:
    translateY(-50%);
}

.login-password-wrap > button:hover {
  color:
    var(--login-ink-600);

  background:
    #f7f8fa;
}

/* =====================================================
   OPTIONS
   ===================================================== */

.login-options {
  display: flex;
  justify-content: flex-end;

  margin-top: -3px;
}

.login-forgot {
  color:
    var(--login-orange-700);

  font-size: 13px;
  font-weight: 500;
}

.login-forgot:hover {
  text-decoration: underline;
}

/* =====================================================
   PRIMARY BUTTON
   ===================================================== */

.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;
  min-height: 48px;

  padding:
    0 16px;

  border:
    1px solid
    var(--login-orange-600);

  border-radius: 11px;

  color:
    #ffffff;

  background:
    var(--login-orange-600);

  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

  box-shadow:
    0 9px 22px
    rgba(255, 83, 3, 0.15);
}

.login-submit:hover:not(:disabled) {
  border-color:
    var(--login-orange-700);

  background:
    var(--login-orange-700);
}

.login-submit:disabled,
.login-google:disabled {
  opacity: 0.62;

  cursor: not-allowed;
}

/* =====================================================
   GOOGLE
   ===================================================== */

.login-divider {
  display: flex;
  align-items: center;

  gap: 12px;

  margin:
    16px 0;
}

.login-divider::before,
.login-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    var(--login-ink-50);
}

.login-divider span {
  color:
    var(--login-ink-300);

  font-size: 10px;
}

.login-google {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;
  min-height: 46px;

  padding:
    0 16px;

  border:
    1px solid
    var(--login-ink-100);

  border-radius: 11px;

  color:
    var(--login-ink-600);

  background:
    #ffffff;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.login-google:hover:not(:disabled) {
  border-color:
    var(--login-orange-200);

  box-shadow:
    0 6px 16px
    rgba(16, 20, 25, 0.05);
}

.login-account-copy {
  margin:
    15px 0 0;

  color:
    var(--login-ink-300);

  font-size: 14px;

  text-align: center;
}

.login-account-copy a {
  color:
    var(--login-orange-700);

  font-size: 14px;
  font-weight: 600;
}

/* =====================================================
   RESPONSIVE ADMIN ACCESS
   ===================================================== */

.login-responsive-utility,
.login-mobile-utility-footer {
  display: none;
}

/* =====================================================
   RIGHT VISUAL
   ===================================================== */

.login-visual-side {
  position: relative;

  grid-column: 2;

  display: flex;
  align-items: stretch;

  width: 100%;
  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;

  background:
    #ffffff;
}

.login-visual-canvas {
  position: relative;
  isolation: isolate;

  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;

  border-left:
    1px solid
    rgba(255, 203, 197, 0.72);

  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(255, 83, 3, 0.08),
      transparent 26rem
    ),
    #ffffff;
}

.login-visual-canvas::before,
.login-visual-canvas::after {
  position: absolute;

  content: "";

  border:
    1px solid
    rgba(255, 83, 3, 0.13);

  border-radius: 50%;

  pointer-events: none;
}

.login-visual-canvas::before {
  top: -140px;
  right: -150px;

  width: 330px;
  height: 330px;
}

.login-visual-canvas::after {
  right: -180px;
  bottom: -220px;

  width: 430px;
  height: 430px;
}

/* =====================================================
   ARTWORK
   ===================================================== */

.login-artwork {
  position: absolute;

  top:
    clamp(
      110px,
      12vh,
      150px
    );

  left: 50%;

  width:
    min(
      70%,
      510px
    );

  aspect-ratio: 1;

  transform:
    translateX(-50%);
}

.login-artwork-halo {
  position: absolute;

  inset: 10%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 180, 170, 0.28) 0%,
      rgba(255, 180, 170, 0.13) 36%,
      rgba(255, 180, 170, 0.04) 62%,
      transparent 72%
    );

  filter:
    blur(10px);
}

.login-artwork-orb {
  position: absolute;

  top: 21%;
  left: 23%;

  width: 54%;
  height: 54%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 27%,
      #ffe5e3 0%,
      #ffb4aa 20%,
      #ff775d 46%,
      #ff5303 73%,
      #c13c00 100%
    );

  box-shadow:
    0 30px 52px
    rgba(255, 83, 3, 0.19),
    inset -28px -24px 42px
    rgba(193, 60, 0, 0.18),
    inset 22px 18px 36px
    rgba(255, 255, 255, 0.34);
}

.login-artwork-orb::after {
  position: absolute;

  top: 11%;
  left: 15%;

  width: 42%;
  height: 28%;

  content: "";

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0.06) 68%,
      transparent 72%
    );

  filter:
    blur(4px);
}

.login-artwork-ring {
  position: absolute;

  border:
    1.5px solid
    rgba(255, 83, 3, 0.52);

  border-radius: 50%;
}

.login-artwork-ring--one {
  top: 24%;
  left: 8%;

  width: 85%;
  height: 48%;

  transform:
    rotate(-16deg);
}

.login-artwork-ring--two {
  inset: 8%;

  border-color:
    rgba(255, 83, 3, 0.20);

  transform:
    rotate(13deg);
}

.login-artwork-reflection {
  position: absolute;

  left: 26%;
  bottom: 10%;

  width: 48%;
  height: 18%;

  border-radius:
    50% 50% 46% 46%;

  background:
    linear-gradient(
      180deg,
      rgba(255, 83, 3, 0.24),
      rgba(255, 151, 136, 0.03)
    );

  filter:
    blur(10px);
}

.login-artwork-dot {
  position: absolute;

  border-radius: 50%;
}

.login-artwork-dot--one {
  top: 15%;
  right: 10%;

  width: 50px;
  height: 50px;

  background:
    linear-gradient(
      145deg,
      #ffe5e3,
      #ffb4aa
    );
}

.login-artwork-dot--two {
  left: 14%;
  bottom: 18%;

  width: 40px;
  height: 40px;

  background:
    linear-gradient(
      145deg,
      #fff4f3,
      #ffcbc5
    );
}

/* =====================================================
   SIDE NOTE
   ===================================================== */

.login-side-note {
  position: absolute;

  top: 46px;
  right: 34px;

  display: grid;

  gap: 4px;

  color:
    var(--login-orange-400);

  font-size: 8px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing:
    0.22em;
}

.login-side-note i {
  display: block;

  width: 30px;
  height: 2px;

  margin-top: 6px;

  background:
    var(--login-orange-600);
}

/* =====================================================
   VISUAL MESSAGE
   ===================================================== */

.login-right-message {
  position: absolute;

  right: 42px;

  bottom:
    clamp(
      150px,
      16vh,
      190px
    );

  left: 42px;

  text-align: center;
}

.login-right-message > p {
  margin: 0;

  color:
    var(--login-ink-600);

  font-size:
    clamp(
      17px,
      1.8vw,
      23px
    );

  font-weight: 600;
  letter-spacing:
    0.16em;
}

.login-right-message > span {
  display: block;

  width: 52px;
  height: 3px;

  margin:
    15px auto
    18px;

  border-radius: 999px;

  background:
    var(--login-orange-600);
}

.login-right-message > small {
  color:
    var(--login-ink-300);

  font-size:
    clamp(
      9px,
      0.95vw,
      12px
    );

  font-weight: 500;
  letter-spacing:
    0.20em;
}

/* =====================================================
   DESKTOP FOOTER
   Tertiary administrator action
   ===================================================== */

.login-visual-footer {
  position: absolute;

  right: 34px;
  bottom: 28px;
  left: 34px;

  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.login-visual-footer a {
  display: inline-flex;
  align-items: center;

  min-height: 32px;

  padding: 0;

  border: 0;

  color:
    var(--login-orange-700);

  background:
    transparent;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;

  cursor: pointer;

  transition:
    color 150ms ease,
    text-decoration-color 150ms ease;
}

.login-visual-footer a:hover,
.login-visual-footer a:focus-visible {
  color:
    var(--login-orange-600);

  text-decoration: underline;
  text-underline-offset: 4px;
}

.login-visual-footer small {
  color:
    var(--login-ink-300);

  font-size: 8px;
  font-weight: 400;
}

/* =====================================================
   TABLET AND MOBILE
   ===================================================== */

@media (max-width: 1000px) {
  .login-page {
    display: block;

    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;
    overflow-y: auto;

    background:
      #ffffff !important;
  }

  .login-form-side {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    overflow: visible;

    background:
      #ffffff !important;
  }

  .login-form-inner {
    width:
      min(
        100%,
        560px
      );

    min-height: 100dvh;

    padding:
      32px
      28px
      30px;

    overflow: visible;
  }

  .login-brand-row {
    flex: 0 0 auto;

    margin-bottom: 48px;
  }

  .login-heading {
    margin-bottom: 26px;
  }

  .login-field > span {
    margin-bottom: 7px;

    font-size: 14px;
    line-height: 1.35;
  }

  .login-heading p {
    font-size: 14px;
  }

  .login-forgot {
    font-size: 14px;
  }

  .login-field input {
    font-size: 16px;
  }

  .login-submit {
    font-size: 14px;
  }

  .login-google {
    font-size: 13px;
  }

  .login-account-copy,
  .login-account-copy a {
    font-size: 14px;
  }

  .login-visual-side {
    display: none;
  }

  /*
    Administrator access is deliberately separated from
    the member sign-in flow. It sits below the main login
    content so users scroll down to reach it.
  */

  .login-responsive-utility {
    display: block;

    flex: 0 0 auto;

    width: 100%;

    margin-top:
      clamp(
        170px,
        21vh,
        240px
      );

    padding-top: 0;
  }

  .login-responsive-utility-label {
    display: block;

    margin-bottom: 1px;

    color:
      var(--login-ink-300);

    font-size: 9px;
    font-weight: 400;
  }

  .login-admin-access {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 40px;

    padding: 0;

    border: 0;

    color:
      var(--login-orange-700);

    background:
      transparent;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }

  .login-admin-access:hover,
  .login-admin-access:focus-visible {
    color:
      var(--login-orange-600);

    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .login-responsive-utility > small {
    display: block;

    margin-top: 0;

    color:
      var(--login-ink-300);

    font-size: 8px;
    font-weight: 400;
  }

  /*
    Support the existing Login.jsx utility-footer class too.
  */

  .login-mobile-utility-footer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    gap: 1px;

    flex: 0 0 auto;

    width: 100%;

    margin-top:
      clamp(
        170px,
        21vh,
        240px
      );

    padding-top: 0;
  }

  .login-mobile-utility-footer a {
    display: inline-flex;
    align-items: center;

    min-height: 40px;

    padding: 0;

    border: 0;

    color:
      var(--login-orange-700);

    background:
      transparent;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }

  .login-mobile-utility-footer a:hover,
  .login-mobile-utility-footer a:focus-visible {
    color:
      var(--login-orange-600);

    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .login-mobile-utility-footer small {
    color:
      var(--login-ink-300);

    font-size: 8px;
    font-weight: 400;

    text-align: left;
  }
}

/* =====================================================
   TABLET BRAND SCALE
   ===================================================== */

@media (min-width: 641px) and (max-width: 1000px) {
  .login-brand {
    gap: 11px;
  }

  .login-brand img {
    width: 74px;
    height: 44px;
  }

  .login-brand strong {
    font-size: 14px;
  }

  .login-brand small {
    font-size: 8px;
  }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 640px) {
  .login-form-inner {
    width: 100%;
    max-width: none;

    padding:
      max(
        28px,
        env(safe-area-inset-top)
      )
      20px
      max(
        24px,
        env(safe-area-inset-bottom)
      );
  }

  .login-brand-row {
    margin-bottom: 48px;
  }

  .login-brand {
    gap: 10px;
  }

  .login-brand img {
    width: 68px;
    height: 40px;
  }

  .login-brand strong {
    font-size: 14px;
    font-weight: 650;
  }

  .login-brand small {
    font-size: 8px;
  }

  .login-heading {
    margin-bottom: 26px;
  }

  .login-heading > span {
    display: none;
  }

  .login-heading h1 {
    margin:
      0 0 6px;

    font-size: 26px;
    line-height: 1.15;
  }

  .login-heading p {
    max-width: 370px;

    font-size: 14px;
    line-height: 1.6;
  }

  .login-form {
    gap: 17px;
  }

  .login-field > span {
    margin-bottom: 7px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }

  .login-field input {
    min-height: 46px;

    border-radius: 10px;

    font-size: 16px;
  }

  .login-submit,
  .login-google {
    min-height: 48px;

    border-radius: 10px;
  }

  .login-submit {
    font-size: 14px;
  }

  .login-google {
    font-size: 13px;
  }

  .login-divider {
    margin:
      14px 0;
  }

  .login-account-copy {
    margin-top: 16px;

    font-size: 14px;
    line-height: 1.5;
  }

  .login-account-copy a {
    font-size: 14px;
  }

  .login-responsive-utility,
  .login-mobile-utility-footer {
    margin-top:
      clamp(
        220px,
        26vh,
        300px
      );
  }

  .login-responsive-utility-label {
    font-size: 9px;
  }

  .login-admin-access,
  .login-mobile-utility-footer a {
    min-height: 40px;

    font-size: 12px;
  }
}

/* =====================================================
   SHORT VIEWPORT FALLBACK
   ===================================================== */

@media
  (max-width: 1000px)
  and (max-height: 760px) {

  .login-responsive-utility,
  .login-mobile-utility-footer {
    margin-top: 120px;
  }
}

@media (max-width: 440px) {
  .login-mobile-utility-footer {
    align-items: flex-start;
    flex-direction: column;

    gap: 2px;
  }

  .login-mobile-utility-footer small {
    text-align: left;
  }
}

@media (max-width: 380px) {
  .login-form-inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  .login-heading h1 {
    font-size: 24px;
  }
}


/* =====================================================
   ADMIN ACCESS REMOVED FROM AUTH SCREEN
   Administrator access lives on the public website only.
   ===================================================== */

.login-responsive-utility,
.login-mobile-utility-footer,
.login-visual-footer {
  display: none !important;
}


html,
body,
#root,
.login-page,
.login-form-side,
.login-form-inner,
.login-visual-side,
.login-visual-canvas {
  background-color: #ffffff !important;
}

html,
body,
#root,
.login-page,
.login-form-side,
.login-form-inner {
  background-image: none !important;
}

.login-visual-canvas {
  background-image: none !important;
}


/* =====================================================
   AUTH ACCESS CLEANUP
   Administrator access remains on the public website only.
   ===================================================== */

.login-responsive-utility,
.login-mobile-utility-footer,
.login-visual-footer {
  display: none !important;
}


/* =====================================================
   GOOGLE BUTTON TYPOGRAPHY
   ===================================================== */

.login-google {
  font-size: 14px !important;
}

.login-google-text {
  display: inline-block;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.login-google svg {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 1000px) {
  .login-google,
  .login-google-text {
    font-size: 14px !important;
  }
}
.register-page {
  --register-orange-50: #fff4f3;
  --register-orange-100: #ffe5e3;
  --register-orange-200: #ffcbc5;
  --register-orange-300: #ffb4aa;
  --register-orange-400: #ff9788;
  --register-orange-500: #ff775d;
  --register-orange-600: #ff5303;
  --register-orange-700: #c13c00;

  --register-ink-50: #e4e8ef;
  --register-ink-100: #c9d2df;
  --register-ink-200: #97aac2;
  --register-ink-300: #6f8095;
  --register-ink-400: #4c5867;
  --register-ink-500: #2d353f;
  --register-ink-600: #101419;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  width: 100%;
  max-width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  margin: 0;

  overflow-x: hidden;

  color:
    var(--register-ink-400);

  background:
    #ffffff !important;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* =====================================================
   AUTH PAGE CANVAS
   Keep the browser/root canvas pure white on every size.
   This also covers mobile overscroll/bounce areas.
   ===================================================== */

html:has(.register-page),
body:has(.register-page),
body:has(.register-page) #root {
  background-color: #ffffff !important;
  background-image: none !important;
}

.register-page *,
.register-page *::before,
.register-page *::after {
  box-sizing: border-box;
}

.register-page a {
  text-decoration: none;
}

.register-page button,
.register-page input,
.register-page select {
  font: inherit;
}

.register-page button,
.register-page a {
  touch-action: manipulation;
}

/* =====================================================
   LEFT SIDE
   ===================================================== */

.register-form-side {
  display: flex;
  justify-content: center;

  grid-column: 1;

  width: 100%;
  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  background:
    #ffffff !important;
}

.register-form-inner {
  display: flex;
  flex-direction: column;

  width:
    min(
      100%,
      500px
    );

  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  padding:
    44px
    28px;

  margin-inline: auto;

  background:
    #ffffff !important;
}

.register-brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 18px;

  margin-bottom: 34px;
}

.register-brand {
  display: flex;
  align-items: center;

  gap: 12px;
}

.register-brand img {
  display: block;

  width: 78px;
  height: 46px;

  object-fit: contain;
  object-position: left center;
}

.register-brand > span {
  display: grid;

  gap: 2px;
}

.register-brand strong {
  color:
    var(--register-ink-600);

  font-size: 15px;
  font-weight: 650;
}

.register-brand small {
  color:
    var(--register-ink-300);

  font-size: 8px;
  font-weight: 500;
  letter-spacing:
    0.14em;
}

/* =====================================================
   HEADING
   ===================================================== */

.register-heading {
  margin-bottom: 46px;
}

.register-heading > span {
  color:
    var(--register-orange-700);

  font-size: 9px;
  font-weight: 600;
  letter-spacing:
    0.16em;
}

.register-heading h1 {
  margin:
    8px 0 8px;

  color:
    var(--register-ink-600);

  font-size: 31px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing:
    -0.045em;
}

.register-heading p {
  margin: 0;

  color:
    var(--register-ink-400);

  font-size: 14px;
  line-height: 1.6;
}

.register-error {
  margin:
    0 0 14px;

  padding:
    11px 13px;

  border:
    1px solid
    #efc8cc;

  border-radius:
    10px;

  color:
    #a23943;

  background:
    #fff2f3;

  font-size: 11px;
  line-height: 1.5;
}

/* =====================================================
   FORM
   ===================================================== */

.register-form {
  display: grid;
  grid-template-columns: 1fr;

  width: 100%;

  gap: 16px;
}

.register-field {
  display: block;

  width: 100%;
  min-width: 0;
}

.register-field > span {
  display: block;

  margin-bottom: 7px;

  color:
    var(--register-ink-600);

  font-size: 13px;
  font-weight: 600;
}

.register-field input,
.register-select-wrap select {
  display: block;

  width: 100%;
  min-width: 0;
  min-height: 46px;

  padding:
    0 13px;

  border:
    1px solid
    var(--register-ink-100);

  border-radius:
    11px;

  outline: none;

  color:
    var(--register-ink-600);

  background:
    #ffffff;

  font-size: 14px;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.register-field input::placeholder,
.register-select-wrap select:invalid {
  color:
    var(--register-ink-200);
}

.register-field input:hover,
.register-select-wrap select:hover {
  border-color:
    var(--register-ink-200);
}

.register-field input:focus,
.register-field input:focus-visible,
.register-select-wrap select:focus,
.register-select-wrap select:focus-visible {
  border-color:
    var(--register-ink-400);

  outline: none;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.08);
}

/* =====================================================
   DROPDOWN
   ===================================================== */

.register-select-wrap {
  position: relative;

  width: 100%;
}

.register-select-wrap select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 42px;

  cursor: pointer;
}

.register-select-wrap svg {
  position: absolute;

  top: 50%;
  right: 13px;

  color:
    var(--register-ink-400);

  pointer-events: none;

  transform:
    translateY(-50%);
}

/* =====================================================
   PASSWORD
   ===================================================== */

.register-password-wrap {
  position: relative;

  width: 100%;
}

.register-password-wrap input {
  padding-right: 44px;
}

.register-password-wrap > button {
  position: absolute;

  top: 50%;
  right: 10px;

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  color:
    var(--register-ink-300);

  background:
    transparent;

  cursor: pointer;

  transform:
    translateY(-50%);
}

.register-password-wrap > button:hover {
  color:
    var(--register-ink-600);

  background:
    #f7f8fa;
}

/* =====================================================
   TERMS
   ===================================================== */

.register-terms {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  color:
    var(--register-ink-400);

  font-size: 13px;
  line-height: 1.6;
}

.register-terms input {
  flex: 0 0 auto;

  width: 19px;
  height: 19px;

  margin:
    1px 0 0;

  accent-color:
    var(--register-orange-600);
}

.register-terms a {
  color:
    var(--register-orange-700);

  font-weight: 500;
}

/* =====================================================
   ACTIONS
   ===================================================== */

.register-submit {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;
  min-height: 48px;

  padding:
    0 16px;

  border:
    1px solid
    var(--register-orange-600);

  border-radius:
    11px;

  color:
    #ffffff;

  background:
    var(--register-orange-600);

  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

  box-shadow:
    0 9px 22px
    rgba(255, 83, 3, 0.15);
}

.register-submit:hover:not(:disabled) {
  border-color:
    var(--register-orange-700);

  background:
    var(--register-orange-700);
}

.register-submit:disabled,
.register-google:disabled {
  opacity: 0.62;

  cursor: not-allowed;
}

.register-divider {
  display: flex;
  align-items: center;

  gap: 12px;

  margin:
    16px 0;
}

.register-divider::before,
.register-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    var(--register-ink-50);
}

.register-divider span {
  color:
    var(--register-ink-300);

  font-size: 10px;
}

.register-google {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;
  min-height: 46px;

  padding:
    0 16px;

  border:
    1px solid
    var(--register-ink-100);

  border-radius:
    11px;

  color:
    var(--register-ink-600);

  background:
    #ffffff;

  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.register-google:hover:not(:disabled) {
  border-color:
    var(--register-orange-200);

  box-shadow:
    0 6px 16px
    rgba(16, 20, 25, 0.05);
}

.register-bottom-signin {
  margin:
    15px 0 0;

  color:
    var(--register-ink-300);

  font-size: 14px;

  text-align: center;
}

.register-bottom-signin a {
  color:
    var(--register-orange-700);

  font-size: 14px;
  font-weight: 600;
}

/* =====================================================
   RESPONSIVE UTILITY FOOTER
   ===================================================== */

.register-mobile-utility-footer {
  display: none;
}

/* =====================================================
   RIGHT SIDE
   ===================================================== */

.register-visual-side {
  position: relative;

  grid-column: 2;

  display: flex;
  align-items: stretch;

  width: 100%;
  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;

  background:
    #ffffff;
}

.register-visual-canvas {
  position: relative;
  isolation: isolate;

  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;

  border-left:
    1px solid
    rgba(255, 203, 197, 0.72);

  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(255, 180, 170, 0.17),
      transparent 26rem
    ),
    #ffffff;
}

.register-visual-canvas::before,
.register-visual-canvas::after {
  position: absolute;

  content: "";

  border:
    1px solid
    rgba(255, 83, 3, 0.13);

  border-radius: 50%;

  pointer-events: none;
}

.register-visual-canvas::before {
  top: -140px;
  right: -150px;

  width: 330px;
  height: 330px;
}

.register-visual-canvas::after {
  right: -180px;
  bottom: -220px;

  width: 430px;
  height: 430px;
}

/* =====================================================
   ARTWORK
   ===================================================== */

.register-artwork {
  position: absolute;

  top:
    clamp(
      90px,
      9vh,
      130px
    );

  left: 50%;

  width:
    min(
      70%,
      510px
    );

  aspect-ratio: 1;

  transform:
    translateX(-50%);
}

.register-artwork-halo {
  position: absolute;

  inset: 10%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 180, 170, 0.28) 0%,
      rgba(255, 180, 170, 0.13) 36%,
      rgba(255, 180, 170, 0.04) 62%,
      transparent 72%
    );

  filter:
    blur(10px);
}

.register-artwork-orb {
  position: absolute;

  top: 21%;
  left: 23%;

  width: 54%;
  height: 54%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 27%,
      #ffe5e3 0%,
      #ffb4aa 20%,
      #ff775d 46%,
      #ff5303 73%,
      #c13c00 100%
    );

  box-shadow:
    0 30px 52px
    rgba(255, 83, 3, 0.19),
    inset -28px -24px 42px
    rgba(193, 60, 0, 0.18),
    inset 22px 18px 36px
    rgba(255, 255, 255, 0.34);
}

.register-artwork-orb::after {
  position: absolute;

  top: 11%;
  left: 15%;

  width: 42%;
  height: 28%;

  content: "";

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0.06) 68%,
      transparent 72%
    );

  filter:
    blur(4px);
}

.register-artwork-ring {
  position: absolute;

  border:
    1.5px solid
    rgba(255, 83, 3, 0.52);

  border-radius: 50%;
}

.register-artwork-ring--one {
  top: 24%;
  left: 8%;

  width: 85%;
  height: 48%;

  transform:
    rotate(-16deg);
}

.register-artwork-ring--two {
  inset: 8%;

  border-color:
    rgba(255, 83, 3, 0.20);

  transform:
    rotate(13deg);
}

.register-artwork-reflection {
  position: absolute;

  left: 26%;
  bottom: 10%;

  width: 48%;
  height: 18%;

  border-radius:
    50% 50% 46% 46%;

  background:
    linear-gradient(
      180deg,
      rgba(255, 83, 3, 0.24),
      rgba(255, 151, 136, 0.03)
    );

  filter:
    blur(10px);
}

.register-artwork-dot {
  position: absolute;

  border-radius: 50%;
}

.register-artwork-dot--one {
  top: 15%;
  right: 10%;

  width: 50px;
  height: 50px;

  background:
    linear-gradient(
      145deg,
      #ffe5e3,
      #ffb4aa
    );
}

.register-artwork-dot--two {
  left: 14%;
  bottom: 18%;

  width: 40px;
  height: 40px;

  background:
    linear-gradient(
      145deg,
      #fff4f3,
      #ffcbc5
    );
}

/* =====================================================
   SIDE NOTE
   ===================================================== */

.register-side-note {
  position: absolute;

  top: 46px;
  right: 34px;

  display: grid;

  gap: 4px;

  color:
    var(--register-orange-400);

  font-size: 8px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing:
    0.22em;
}

.register-side-note i {
  display: block;

  width: 30px;
  height: 2px;

  margin-top: 6px;

  background:
    var(--register-orange-600);
}

/* =====================================================
   MESSAGE
   ===================================================== */

.register-right-message {
  position: absolute;

  right: 42px;

  bottom:
    clamp(
      150px,
      16vh,
      190px
    );

  left: 42px;

  text-align: center;
}

.register-right-message > p {
  margin: 0;

  color:
    var(--register-ink-600);

  font-size:
    clamp(
      18px,
      2vw,
      25px
    );

  font-weight: 600;
  letter-spacing:
    0.17em;
}

.register-right-message > span {
  display: block;

  width: 52px;
  height: 3px;

  margin:
    15px auto
    18px;

  border-radius: 999px;

  background:
    var(--register-orange-600);
}

.register-right-message > small {
  color:
    var(--register-ink-300);

  font-size:
    clamp(
      9px,
      0.95vw,
      12px
    );

  font-weight: 500;
  letter-spacing:
    0.20em;
}

/* =====================================================
   DESKTOP FOOTER
   Tertiary administrator action
   ===================================================== */

.register-visual-footer {
  position: absolute;

  right: 34px;
  bottom: 28px;
  left: 34px;

  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.register-visual-footer a {
  display: inline-flex;
  align-items: center;

  min-height: 38px;

  padding: 0;

  border: 0;

  color:
    var(--register-orange-700);

  background:
    transparent;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;

  cursor: pointer;

  transition:
    color 150ms ease,
    text-decoration-color 150ms ease;
}

.register-visual-footer a:hover,
.register-visual-footer a:focus-visible {
  color:
    var(--register-orange-600);

  text-decoration: underline;
  text-underline-offset: 4px;
}

.register-visual-footer small {
  color:
    var(--register-ink-300);

  font-size: 8px;
  font-weight: 400;

  text-align: right;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1000px) {
  .register-page {
    display: block;

    background:
      #ffffff !important;
  }

  .register-form-side {
    min-height: 100dvh;

    background:
      #ffffff !important;
  }

  .register-form-inner {
    width:
      min(
        100%,
        560px
      );

    min-height: auto;

    padding:
      26px
      28px
      26px;
  }

  .register-brand-row {
    margin-bottom: 26px;
  }

  .register-heading {
    margin-bottom: 28px;
  }

  .register-field > span {
    margin-bottom: 7px;

    font-size: 14px;
    line-height: 1.35;
  }

  .register-heading p {
    font-size: 14px;
  }

  .register-field input,
  .register-select-wrap select {
    font-size: 16px;
  }

  .register-terms {
    font-size: 13px;
    line-height: 1.6;
  }

  .register-submit,
  .register-google {
    font-size: 14px;
  }

  .register-bottom-signin,
  .register-bottom-signin a {
    font-size: 14px;
  }

  .register-visual-side {
    display: none;
  }

  .register-mobile-utility-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    width: 100%;

    margin-top:
      clamp(
        140px,
        18vh,
        220px
      );

    padding-top: 12px;
  }

  .register-mobile-utility-footer a {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    padding: 0;

    border: 0;

    color:
      var(--register-orange-700);

    background:
      transparent;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }

  .register-mobile-utility-footer a:hover,
  .register-mobile-utility-footer a:focus-visible {
    color:
      var(--register-orange-600);

    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .register-mobile-utility-footer small {
    color:
      var(--register-ink-300);

    font-size: 9px;
    font-weight: 400;

    text-align: right;
  }
}

/* =====================================================
   TABLET BRAND SCALE
   ===================================================== */

@media (min-width: 641px) and (max-width: 1000px) {
  .register-brand {
    gap: 11px;
  }

  .register-brand img {
    width: 74px;
    height: 44px;
  }

  .register-brand strong {
    font-size: 14px;
  }

  .register-brand small {
    font-size: 8px;
  }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 640px) {
  .register-form-inner {
    width: 100%;
    max-width: none;

    padding:
      max(
        18px,
        env(safe-area-inset-top)
      )
      20px
      max(
        22px,
        env(safe-area-inset-bottom)
      );
  }

  .register-brand-row {
    margin-bottom: 44px;
  }

  .register-brand {
    gap: 10px;
  }

  .register-brand img {
    width: 68px;
    height: 40px;
  }

  .register-brand strong {
    font-size: 14px;
    font-weight: 650;
  }

  .register-brand small {
    font-size: 8px;
  }

  .register-heading {
    margin-top: 0;

    margin-bottom: 28px;

    text-align: left;
  }

  .register-heading > span {
    display: none;
  }

  .register-heading h1 {
    margin:
      0 0 7px;

    font-size: 28px;
    line-height: 1.15;
  }

  .register-heading p {
    font-size: 14px;
    line-height: 1.6;
  }

  .register-form {
    gap: 18px;
  }

  .register-field > span {
    margin-bottom: 7px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }

  .register-field input,
  .register-select-wrap select {
    min-height: 46px;

    padding:
      0 12px;

    border-radius: 10px;

    font-size: 16px;
  }

  .register-select-wrap select {
    padding-right: 40px;
  }

  .register-password-wrap input {
    padding-right: 44px;
  }

  .register-terms {
    font-size: 13px;
    line-height: 1.6;
  }

  .register-submit,
  .register-google {
    min-height: 48px;

    border-radius: 10px;

    font-size: 14px;
  }

  .register-divider {
    margin:
      14px 0;
  }

  .register-bottom-signin {
    margin-top: 16px;

    font-size: 14px;
    line-height: 1.5;
  }

  .register-bottom-signin a {
    font-size: 14px;
  }

  .register-mobile-utility-footer {
    margin-top:
      clamp(
        170px,
        22vh,
        260px
      );

    padding-top: 8px;
  }

  .register-mobile-utility-footer a {
    min-height: 42px;

    font-size: 13px;
  }
}

@media (max-width: 440px) {
  .register-mobile-utility-footer {
    align-items: flex-start;
    flex-direction: column;

    gap: 1px;
  }

  .register-mobile-utility-footer small {
    text-align: left;
  }
}

@media (max-width: 380px) {
  .register-form-inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  .register-heading h1 {
    font-size: 26px;
  }
}

/* =====================================================
   AUTOFILL
   ===================================================== */

.register-field input:-webkit-autofill,
.register-field input:-webkit-autofill:hover,
.register-field input:-webkit-autofill:focus,
.register-field input:-webkit-autofill:active {
  -webkit-text-fill-color:
    var(--register-ink-600) !important;

  caret-color:
    var(--register-ink-600);

  -webkit-box-shadow:
    0 0 0 1000px
    #ffffff
    inset !important;

  box-shadow:
    0 0 0 1000px
    #ffffff
    inset !important;

  border-color:
    var(--register-ink-100) !important;
}

/* =====================================================
   MENTOR TO MENTEE ACCOUNT HANDOFF
   ===================================================== */

.register-account-context {
  margin-top: 18px;

  padding:
    11px
    12px;

  border:
    1px solid
    #e4e8ef;

  border-radius: 9px;

  color:
    #4c5867;

  background:
    #f8f9fb;
}

.register-account-context strong {
  display: block;

  color:
    #101419;

  font-size: 10px;
  font-weight: 600;
}

.register-account-context p {
  margin:
    4px 0 0;

  font-size: 9px;
  line-height: 1.5;
}

.register-field > small {
  display: block;

  margin-top: 6px;

  color:
    #6f8095;

  font-size: 9px;
  line-height: 1.5;
}

.register-select-wrap select:disabled {
  color:
    #2d353f !important;

  background:
    #f8f9fb !important;

  cursor:
    not-allowed;

  opacity: 1;
}


/* =====================================================
   ADMIN ACCESS REMOVED FROM AUTH SCREEN
   Administrator access lives on the public website only.
   ===================================================== */

.register-mobile-utility-footer,
.register-visual-footer {
  display: none !important;
}


html,
body,
#root,
.register-page,
.register-form-side,
.register-form-inner,
.register-visual-side,
.register-visual-canvas {
  background-color: #ffffff !important;
}

html,
body,
#root,
.register-page,
.register-form-side,
.register-form-inner {
  background-image: none !important;
}

.register-visual-canvas {
  background-image: none !important;
}


@media (max-width: 1000px) {
  .register-field > small {
    font-size: 12px;
    line-height: 1.55;
  }
}

/* =====================================================
   AUTH ACCESS CLEANUP
   Administrator access remains on the public website only.
   ===================================================== */

.register-mobile-utility-footer,
.register-visual-footer {
  display: none !important;
}
/* =========================================================
   MENTOR REGISTER
   Approved mentor invitation registration.
   White canvas + orange primary + neutral secondary.
   ========================================================= */

.mentor-register-page {
  --mentor-register-orange:
    #ff5303;
  --mentor-register-orange-dark:
    #c13c00;
  --mentor-register-ink:
    #101419;
  --mentor-register-ink-2:
    #2d353f;
  --mentor-register-text:
    #4c5867;
  --mentor-register-muted:
    #6f8095;
  --mentor-register-border:
    #d7dee7;
  --mentor-register-border-soft:
    #e4e8ef;

  width: 100%;
  min-height: 100vh;

  margin: 0;

  color:
    var(--mentor-register-text);
  background: #ffffff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.mentor-register-page *,
.mentor-register-page *::before,
.mentor-register-page *::after {
  box-sizing: border-box;
}

.mentor-register-page a {
  text-decoration: none;
}

.mentor-register-shell {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(360px, 0.95fr);

  width: 100%;
  min-height: 100vh;

  background: #ffffff;
}

/* =========================================================
   LEFT / FORM SIDE
   ========================================================= */

.mentor-register-form-side {
  width: min(100%, 620px);

  margin-inline: auto;

  padding:
    38px
    44px
    54px;
}

.mentor-register-brand {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  color: inherit;
}

.mentor-register-brand img {
  width: 62px;
  height: 40px;

  object-fit: contain;
}

.mentor-register-brand > span {
  display: grid;

  gap: 2px;
}

.mentor-register-brand strong {
  color:
    var(--mentor-register-ink);

  font-size: 13px;
  font-weight: 600;
}

.mentor-register-brand small {
  color:
    var(--mentor-register-muted);

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.mentor-register-heading {
  margin-top: 54px;
}

.mentor-register-heading > span {
  display: block;

  color:
    var(--mentor-register-orange);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.mentor-register-heading h1 {
  max-width: 500px;

  margin:
    8px 0 10px;

  color:
    var(--mentor-register-ink);

  font-size:
    clamp(
      30px,
      4vw,
      40px
    );

  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.mentor-register-heading p {
  max-width: 500px;

  margin: 0;

  color:
    var(--mentor-register-text);

  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   APPROVAL / EMAIL NOTICES
   ========================================================= */

.mentor-register-approved-notice,
.mentor-register-email-notice {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 22px;
  padding: 13px 14px;

  border-radius: 11px;
}

.mentor-register-approved-notice {
  border: 1px solid #ffcbc5;

  background: #fffaf9;
}

.mentor-register-approved-notice
> svg {
  flex: 0 0 auto;

  margin-top: 1px;

  color:
    var(--mentor-register-orange);
}

.mentor-register-approved-notice strong {
  display: block;

  color:
    var(--mentor-register-ink);

  font-size: 11px;
  font-weight: 600;
}

.mentor-register-approved-notice p {
  margin: 4px 0 0;

  color:
    var(--mentor-register-text);

  font-size: 10px;
  line-height: 1.55;
}

.mentor-register-email-notice {
  border: 1px solid
    var(--mentor-register-border-soft);

  background: #f8f9fb;
}

.mentor-register-email-notice
> svg {
  flex: 0 0 auto;

  margin-top: 1px;

  color:
    var(--mentor-register-ink-2);
}

.mentor-register-email-notice p {
  margin: 0;

  color:
    var(--mentor-register-text);

  font-size: 10px;
  line-height: 1.6;
}

.mentor-register-email-notice strong {
  color:
    var(--mentor-register-ink);

  font-weight: 600;
}

/* =========================================================
   ERROR
   ========================================================= */

.mentor-register-error {
  margin:
    18px 0 0;

  padding:
    11px 13px;

  border: 1px solid #efc5c8;
  border-radius: 9px;

  color: #8c2f37;
  background: #fff7f7;

  font-size: 11px;
  line-height: 1.55;
}

/* =========================================================
   FORM
   ========================================================= */

.mentor-register-form {
  display: grid;

  gap: 17px;

  margin-top: 24px;
}

.mentor-register-field {
  display: block;

  min-width: 0;
}

.mentor-register-field
> span {
  display: block;

  margin-bottom: 7px;

  color:
    var(--mentor-register-ink);

  font-size: 11px;
  font-weight: 600;
}

.mentor-register-field
> span small {
  color:
    var(--mentor-register-muted);

  font-size: 9px;
  font-weight: 500;
}

.mentor-register-field
> small {
  display: block;

  margin-top: 6px;

  color:
    var(--mentor-register-muted);

  font-size: 9px;
  line-height: 1.5;
}

.mentor-register-field input {
  width: 100%;
  min-height: 46px;

  padding: 0 13px;

  border: 1px solid
    #c9d2df;
  border-radius: 9px;

  outline: none;

  color:
    var(--mentor-register-ink);
  background: #ffffff;

  font: inherit;
  font-size: 12px;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.mentor-register-field
input::placeholder {
  color: #97aac2;
}

.mentor-register-field
input:focus,
.mentor-register-field
input:focus-visible {
  border-color: #4c5867;

  outline: none;

  box-shadow:
    0 0 0 1px
    rgba(
      76,
      88,
      103,
      0.10
    );
}

.mentor-register-field
input:disabled {
  color: #8794a4;
  background: #f7f8fa;

  cursor: not-allowed;
}

.mentor-register-password-wrap {
  position: relative;
}

.mentor-register-password-wrap
input {
  padding-right: 44px;
}

.mentor-register-password-wrap
button {
  position: absolute;

  top: 50%;
  right: 9px;

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 7px;

  color:
    var(--mentor-register-muted);
  background: transparent;

  cursor: pointer;

  transform:
    translateY(-50%);
}

.mentor-register-password-wrap
button:hover:not(:disabled) {
  color:
    var(--mentor-register-ink);

  background: #f7f8fa;
}

.mentor-register-terms {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  color:
    var(--mentor-register-text);

  font-size: 10px;
  font-weight: 400;
  line-height: 1.55;

  cursor: pointer;
}

.mentor-register-terms
input {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  margin-top: 1px;

  accent-color:
    var(--mentor-register-orange);
}

.mentor-register-submit {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 46px;

  padding: 0 16px;

  border: 1px solid
    var(--mentor-register-orange);
  border-radius: 9px;

  color: #ffffff;
  background:
    var(--mentor-register-orange);

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
}

.mentor-register-submit:hover:not(:disabled) {
  border-color:
    var(--mentor-register-orange-dark);

  background:
    var(--mentor-register-orange-dark);
}

.mentor-register-submit:disabled {
  cursor: not-allowed;

  opacity: 0.6;
}

.mentor-register-sign-in-copy {
  margin:
    20px 0 0;

  color:
    var(--mentor-register-muted);

  font-size: 11px;
  text-align: center;
}

.mentor-register-sign-in-copy
a {
  color:
    var(--mentor-register-orange-dark);

  font-weight: 500;
}

/* =========================================================
   RIGHT INFORMATION SIDE
   ========================================================= */

.mentor-register-information-side {
  position: relative;

  display: grid;
  place-items: center;

  min-width: 0;
  min-height: 100vh;

  padding: 48px;

  overflow: hidden;

  border-left: 1px solid
    #e4e8ef;

  background: #101419;
}

.mentor-register-information-side::before,
.mentor-register-information-side::after {
  content: "";

  position: absolute;

  border: 1px solid
    rgba(
      255,
      83,
      3,
      0.28
    );

  border-radius: 50%;
}

.mentor-register-information-side::before {
  top: -90px;
  right: -110px;

  width: 290px;
  height: 290px;
}

.mentor-register-information-side::after {
  bottom: -160px;
  left: -130px;

  width: 390px;
  height: 390px;

  border-color:
    rgba(
      255,
      255,
      255,
      0.08
    );
}

.mentor-register-information-content {
  position: relative;
  z-index: 1;

  width: min(100%, 470px);
}

.mentor-register-information-content
> span {
  color: #ff8a5c;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.mentor-register-information-content
h2 {
  margin:
    11px 0 16px;

  color: #ffffff;

  font-size:
    clamp(
      30px,
      4vw,
      46px
    );

  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.mentor-register-information-content
p {
  max-width: 430px;

  margin: 0;

  color: #d7dee7;

  font-size: 13px;
  line-height: 1.75;
}

.mentor-register-information-line {
  width: 58px;
  height: 3px;

  margin:
    28px 0
    22px;

  border-radius: 999px;

  background:
    var(--mentor-register-orange);
}

.mentor-register-information-content
small {
  color: #97aac2;

  font-size: 10px;
  line-height: 1.6;
}

/* =========================================================
   VALIDATION / EMPTY STATE
   ========================================================= */

.mentor-register-state-card {
  width: min(520px, calc(100% - 32px));

  margin: 0 auto;

  padding: 34px;

  border: 1px solid
    #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 16px 44px
    rgba(16, 20, 25, 0.06);

  text-align: center;
}

.mentor-register-page:has(
  .mentor-register-state-card
) {
  display: grid;
  place-items: center;

  padding: 24px;
}

.mentor-register-state-icon {
  display: grid;
  place-items: center;

  width: 56px;
  height: 56px;

  margin: 0 auto 18px;

  border: 1px solid #ffcbc5;
  border-radius: 14px;

  color:
    var(--mentor-register-orange);
  background: #fffaf9;
}

.mentor-register-state-eyebrow {
  display: block;

  margin-bottom: 8px;

  color:
    var(--mentor-register-orange);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.mentor-register-state-card
h1 {
  margin: 0;

  color:
    var(--mentor-register-ink);

  font-size:
    clamp(
      26px,
      5vw,
      34px
    );

  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.mentor-register-state-card
> p {
  max-width: 420px;

  margin:
    14px auto 0;

  color:
    var(--mentor-register-text);

  font-size: 12px;
  line-height: 1.7;
}

.mentor-register-state-actions {
  display: grid;

  gap: 9px;

  margin-top: 24px;
}

.mentor-register-state-primary,
.mentor-register-state-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 0 14px;

  border-radius: 9px;

  font-size: 12px;
  font-weight: 500;
}

.mentor-register-state-primary {
  border: 1px solid
    var(--mentor-register-orange);

  color: #ffffff;
  background:
    var(--mentor-register-orange);
}

.mentor-register-state-secondary {
  border: 1px solid
    var(--mentor-register-border);

  color:
    var(--mentor-register-ink-2);
  background: #ffffff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .mentor-register-shell {
    grid-template-columns: 1fr;
  }

  .mentor-register-information-side {
    display: none;
  }

  .mentor-register-form-side {
    width: min(100%, 620px);

    min-height: 100vh;
  }
}

@media (max-width: 620px) {
  .mentor-register-form-side {
    width: 100%;

    padding:
      20px
      18px
      36px;
  }

  .mentor-register-brand img {
    width: 56px;
    height: 36px;
  }

  .mentor-register-heading {
    margin-top: 40px;
  }

  .mentor-register-heading h1 {
    font-size: 29px;
  }

  .mentor-register-state-card {
    width: 100%;

    padding:
      28px 20px;

    border-radius: 14px;
  }
}
/* =========================================================
   ADMIN LOGIN
   Centered, mature authentication screen.
   White + dark neutral + orange only.
   ========================================================= */

html,
body,
#root {
  min-height: 100%;
}

.admin-login-page {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 100vh;

  padding:
    40px 24px
    max(
      40px,
      env(safe-area-inset-bottom)
    );

  overflow: hidden;

  color: #101419;
  background: #ffffff;
}

/* ---------------------------------------------------------
   SUBTLE BACKGROUND PATTERN
   --------------------------------------------------------- */

.admin-login-pattern {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 83, 3, 0.055) 0,
      rgba(255, 83, 3, 0.055) 2px,
      transparent 2px,
      transparent 30px
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(16, 20, 25, 0.035) 0,
      rgba(16, 20, 25, 0.035) 1px,
      transparent 1px,
      transparent 26px
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfd 100%
    );

  background-size:
    46px 46px,
    40px 40px,
    100% 100%;

  opacity: 0.9;
}

.admin-login-page::before,
.admin-login-page::after {
  position: absolute;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  content: "";

  pointer-events: none;

  filter: blur(20px);
}

.admin-login-page::before {
  top: -150px;
  right: -110px;

  background:
    rgba(
      255,
      83,
      3,
      0.045
    );
}

.admin-login-page::after {
  bottom: -180px;
  left: -120px;

  background:
    rgba(
      16,
      20,
      25,
      0.035
    );
}

/* ---------------------------------------------------------
   SHELL
   --------------------------------------------------------- */

.admin-login-shell {
  position: relative;
  z-index: 1;

  width:
    min(
      100%,
      460px
    );
}

.admin-login-brand {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  width: fit-content;

  margin: 0 0 30px;

  color: inherit;
  text-decoration: none;
}

.admin-login-logo {
  flex: 0 0 auto;

  width: 44px;
  height: 44px;

  object-fit: contain;
}

.admin-login-brand > span {
  display: block;
}

.admin-login-brand strong,
.admin-login-brand small {
  display: block;
}

.admin-login-brand strong {
  color: #101419;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.admin-login-brand small {
  margin-top: 3px;

  color: #6f8095;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
}

.admin-login-card {
  width: 100%;

  padding: 34px 34px 32px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 18px 50px
    rgba(16, 20, 25, 0.07);
}

/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.admin-login-copy {
  margin-bottom: 28px;
}

.admin-login-eyebrow {
  display: block;

  margin-bottom: 9px;

  color: #ff5303;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.admin-login-copy h1 {
  margin: 0;

  color: #101419;

  font-size:
    clamp(
      30px,
      5vw,
      38px
    );
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.admin-login-copy p {
  margin: 10px 0 0;

  color: #4c5867;

  font-size: 14px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.admin-login-form {
  display: grid;

  gap: 18px;
}

.admin-login-form label {
  display: block;

  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.admin-login-form input {
  display: block;

  width: 100%;
  height: 46px;

  margin-top: 7px;
  padding: 0 13px;

  border: 1px solid #c9d2df;
  border-radius: 10px;

  outline: none;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;

  box-shadow: none;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.admin-login-form input:hover {
  border-color: #97aac2;
}

.admin-login-form input:focus,
.admin-login-form input:focus-visible {
  border-color: #4c5867;

  outline: none;

  box-shadow:
    0 0 0 1px
    rgba(
      76,
      88,
      103,
      0.10
    );
}

.admin-login-form input::placeholder {
  color: #97aac2;
}

.admin-login-form input:disabled {
  color: #8794a4;
  background: #f7f8fa;

  cursor: not-allowed;
}

/* ---------------------------------------------------------
   PASSWORD
   --------------------------------------------------------- */

.admin-password-field {
  position: relative;
}

.admin-password-field input {
  padding-right: 46px;
}

.admin-password-toggle {
  appearance: none;
  -webkit-appearance: none;

  position: absolute;

  top: 50%;
  right: 8px;

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  color: #6f8095;
  background: transparent;

  cursor: pointer;

  transform:
    translateY(-50%);
}

.admin-password-toggle:hover:not(:disabled) {
  color: #101419;
  background: #f7f8fa;
}

.admin-password-toggle:focus-visible {
  outline:
    1px solid
    rgba(
      76,
      88,
      103,
      0.28
    );

  outline-offset: 1px;
}

/* ---------------------------------------------------------
   ERROR
   --------------------------------------------------------- */

.admin-login-error {
  margin: -2px 0 0;
  padding: 11px 13px;

  border: 1px solid #ffcbc5;
  border-radius: 10px;

  color: #832600;
  background: #fff4f3;

  font-size: 12px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   PRIMARY ACTION
   --------------------------------------------------------- */

.admin-login-submit {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 100%;
  min-height: 44px;

  padding: 0 16px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;

  box-shadow: none;
  transform: none;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease;
}

.admin-login-submit:hover:not(:disabled) {
  border-color: #c13c00;

  background: #c13c00;
}

.admin-login-submit:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.25
    );

  outline-offset: 2px;
}

.admin-login-submit:disabled {
  cursor: not-allowed;

  opacity: 0.6;
}

/* ---------------------------------------------------------
   TERTIARY ACTION
   --------------------------------------------------------- */

.admin-forgot-link {
  display: block;

  width: fit-content;

  margin: 16px auto 0;

  color: #4c5867;

  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.admin-forgot-link:hover {
  color: #101419;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   RESTRICTED NOTICE
   --------------------------------------------------------- */

.admin-restricted-notice {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  margin-top: 24px;
  padding: 13px 14px;

  border: 1px solid #ffcbc5;
  border-radius: 11px;

  color: #4c5867;
  background: #fffaf9;

  font-size: 11px;
  line-height: 1.6;
}

.admin-restricted-notice svg {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #ff5303;
}

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

@media (max-width: 560px) {
  .admin-login-page {
    place-items: start center;

    padding:
      24px 16px
      max(
        32px,
        calc(
          24px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .admin-login-shell {
    margin-top: 8px;
  }

  .admin-login-brand {
    margin-bottom: 26px;
  }

  .admin-login-logo {
    width: 40px;
    height: 40px;
  }

  .admin-login-card {
    padding: 26px 20px;

    border-radius: 15px;
  }

  .admin-login-copy {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-login-form input,
  .admin-login-submit {
    transition: none;
  }
}
/* =========================================================
   AUTH CALLBACK
   White canvas + orange primary + neutral secondary.
   ========================================================= */

.auth-callback-page {
  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100vh;

  padding:
    32px 20px
    max(
      32px,
      env(safe-area-inset-bottom)
    );

  color: #101419;
  background: #ffffff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.auth-callback-page *,
.auth-callback-page *::before,
.auth-callback-page *::after {
  box-sizing: border-box;
}

.auth-callback-card {
  width: min(100%, 520px);

  padding: 34px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 16px 44px
    rgba(16, 20, 25, 0.06);

  text-align: center;
}

.auth-callback-brand {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 34px;

  color: inherit;
  text-decoration: none;
}

.auth-callback-brand img {
  width: 58px;
  height: 38px;

  object-fit: contain;
}

.auth-callback-brand > span {
  display: grid;

  gap: 2px;

  text-align: left;
}

.auth-callback-brand strong {
  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.auth-callback-brand small {
  color: #6f8095;

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.auth-callback-icon {
  display: grid;
  place-items: center;

  width: 56px;
  height: 56px;

  margin: 0 auto 18px;

  border: 1px solid #ffcbc5;
  border-radius: 14px;

  color: #ff5303;
  background: #fffaf9;
}

.auth-callback-icon--error {
  border-color: #efc5c8;

  color: #b74750;
  background: #fff7f7;
}

.auth-callback-spinner {
  animation:
    auth-callback-spin
    900ms linear infinite;
}

@keyframes auth-callback-spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-callback-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.auth-callback-card h1 {
  max-width: 420px;

  margin: 0 auto;

  color: #101419;

  font-size:
    clamp(
      28px,
      5vw,
      36px
    );

  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.auth-callback-card > p {
  max-width: 420px;

  margin:
    16px auto 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.7;
}

.auth-callback-primary-button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  margin-top: 24px;
  padding: 0 16px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
}

.auth-callback-primary-button:hover {
  border-color: #c13c00;

  background: #c13c00;
}

.auth-callback-primary-button:focus-visible,
.auth-callback-brand:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.25
    );

  outline-offset: 2px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .auth-callback-page {
    place-items: start center;

    padding:
      20px 16px
      max(
        28px,
        calc(
          20px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .auth-callback-card {
    margin-top: 18px;

    padding: 28px 20px;

    border-radius: 14px;
  }

  .auth-callback-brand {
    margin-bottom: 28px;
  }

  .auth-callback-brand img {
    width: 52px;
    height: 34px;
  }

  .auth-callback-card h1 {
    font-size: 28px;
  }

  .auth-callback-card > p {
    font-size: 12px;
  }
}
/* =========================================================
   COMPLETE PROFILE
   Compact membership verification form.
   White + dark neutral + orange only.
   ========================================================= */

.complete-profile-page {
  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100vh;

  padding:
    32px 20px
    max(
      32px,
      env(safe-area-inset-bottom)
    );

  color: #101419;
  background: #ffffff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.complete-profile-page *,
.complete-profile-page *::before,
.complete-profile-page *::after {
  box-sizing: border-box;
}

.complete-profile-page a {
  text-decoration: none;
}

.complete-profile-card {
  width: min(100%, 560px);

  padding: 32px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 16px 44px
    rgba(16, 20, 25, 0.055);
}

/* =========================================================
   BRAND
   ========================================================= */

.complete-profile-brand {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  width: fit-content;

  color: inherit;
}

.complete-profile-brand img {
  width: 58px;
  height: 38px;

  object-fit: contain;
}

.complete-profile-brand > span {
  display: grid;

  gap: 2px;
}

.complete-profile-brand strong {
  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.complete-profile-brand small {
  color: #6f8095;

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* =========================================================
   HEADING
   ========================================================= */

.complete-profile-heading {
  margin-top: 30px;
}

.complete-profile-heading > span {
  display: block;

  margin-bottom: 7px;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.complete-profile-heading h1 {
  margin: 0;

  color: #101419;

  font-size:
    clamp(
      28px,
      4vw,
      34px
    );

  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.complete-profile-heading p {
  max-width: 440px;

  margin: 9px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   FORM
   ========================================================= */

.complete-profile-form {
  display: grid;

  gap: 15px;

  margin-top: 24px;
}

.complete-profile-field {
  display: block;

  min-width: 0;
}

.complete-profile-field > span {
  display: block;

  margin-bottom: 6px;

  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

.complete-profile-field input,
.complete-profile-field select {
  width: 100%;
  min-height: 44px;

  padding:
    0
    12px;

  border: 1px solid #c9d2df;
  border-radius: 9px;

  outline: none;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 400;

  box-shadow: none;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.complete-profile-field input:hover:not(:disabled),
.complete-profile-field select:hover:not(:disabled) {
  border-color: #97aac2;
}

.complete-profile-field input:focus,
.complete-profile-field input:focus-visible,
.complete-profile-field select:focus,
.complete-profile-field select:focus-visible {
  border-color: #4c5867;

  outline: none;

  box-shadow:
    0 0 0 1px
    rgba(76, 88, 103, 0.10);
}

.complete-profile-field input::placeholder {
  color: #97aac2;
}

.complete-profile-field input:disabled,
.complete-profile-field select:disabled {
  color: #4c5867;
  background: #f8f9fb;

  cursor: not-allowed;

  opacity: 1;
}

.complete-profile-select-field {
  position: relative;
}

.complete-profile-select-field select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 40px;

  cursor: pointer;
}

.complete-profile-select-icon {
  position: absolute;

  top: 50%;
  right: 12px;

  color: #6f8095;

  pointer-events: none;

  transform:
    translateY(-50%);
}

/* =========================================================
   NOTICE / ERROR
   ========================================================= */

.complete-profile-notice {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 2px;
  padding: 11px 12px;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;
  background: #f8f9fb;
}

.complete-profile-notice > svg {
  flex: 0 0 auto;

  color: #2d353f;
}

.complete-profile-notice p {
  margin: 0;

  font-size: 10px;
  line-height: 1.5;
}

.complete-profile-error {
  margin: 0;

  padding: 10px 12px;

  border: 1px solid #efc5c8;
  border-radius: 8px;

  color: #8c2f37;
  background: #fff7f7;

  font-size: 10px;
  line-height: 1.55;
}

/* =========================================================
   SUBMIT
   ========================================================= */

.complete-profile-submit {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  padding: 0 16px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.complete-profile-submit:hover:not(:disabled) {
  border-color: #c13c00;

  background: #c13c00;
}

.complete-profile-submit:focus-visible {
  outline:
    1px solid
    rgba(76, 88, 103, 0.28);

  outline-offset: 2px;
}

.complete-profile-submit:disabled {
  cursor: not-allowed;

  opacity: 0.6;
}

/* =========================================================
   LOADING
   ========================================================= */

.complete-profile-loading {
  display: grid;
  place-items: center;

  gap: 10px;

  min-height: 220px;

  color: #4c5867;

  text-align: center;
}

.complete-profile-loading p {
  margin: 0;

  font-size: 11px;
}

/* =========================================================
   BROWSER AUTOFILL
   ========================================================= */

.complete-profile-field input:-webkit-autofill,
.complete-profile-field input:-webkit-autofill:hover,
.complete-profile-field input:-webkit-autofill:focus,
.complete-profile-field input:-webkit-autofill:active {
  -webkit-text-fill-color: #101419 !important;

  caret-color: #101419;

  -webkit-box-shadow:
    0 0 0 1000px
    #ffffff inset !important;

  box-shadow:
    0 0 0 1000px
    #ffffff inset !important;

  transition:
    background-color
    9999s
    ease-out
    0s;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 620px) {
  .complete-profile-page {
    place-items: start center;

    padding:
      16px
      14px
      max(
        28px,
        calc(
          16px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .complete-profile-card {
    width: 100%;

    padding:
      24px
      20px;

    border-radius: 14px;
  }

  .complete-profile-heading {
    margin-top: 26px;
  }

  .complete-profile-heading h1 {
    font-size: 29px;
  }

  .complete-profile-heading p {
    font-size: 10px;
  }
}
/* =========================================================
   MEMBERSHIP PENDING
   Centered status card.
   White + dark neutral + orange only.
   ========================================================= */

.membership-pending-page {
  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100vh;

  padding:
    32px 20px
    max(
      32px,
      env(safe-area-inset-bottom)
    );

  color: #101419;
  background: #ffffff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.membership-pending-page *,
.membership-pending-page *::before,
.membership-pending-page *::after {
  box-sizing: border-box;
}

.membership-pending-page a {
  text-decoration: none;
}

/* =========================================================
   CARD
   ========================================================= */

.membership-pending-card {
  width: min(100%, 560px);

  padding: 32px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 16px 44px
    rgba(16, 20, 25, 0.055);
}

/* =========================================================
   BRAND
   ========================================================= */

.membership-pending-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  width: 100%;

  color: inherit;
}

.membership-pending-brand img {
  width: 58px;
  height: 38px;

  object-fit: contain;
}

.membership-pending-brand > span {
  display: grid;

  gap: 2px;

  text-align: left;
}

.membership-pending-brand strong {
  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.membership-pending-brand small {
  color: #6f8095;

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* =========================================================
   CONTENT
   ========================================================= */

.membership-pending-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 38px;

  text-align: center;
}

.membership-pending-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.membership-pending-eyebrow--rejected {
  color: #b74750;
}

.membership-pending-content h1 {
  max-width: 460px;

  margin: 0;

  color: #101419;

  font-size:
    clamp(
      28px,
      4vw,
      34px
    );

  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -0.035em;

  overflow-wrap: anywhere;
}

.membership-pending-description {
  max-width: 455px;

  margin: 12px auto 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   NOTICE
   ========================================================= */

.membership-pending-notice {
  width: 100%;

  margin-top: 24px;
  padding: 12px 14px;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;
  background: #f8f9fb;

  text-align: center;
}

.membership-pending-notice--rejected {
  border-color: #efc5c8;

  color: #8c2f37;
  background: #fff7f7;
}

.membership-pending-notice p {
  margin: 0;

  font-size: 10px;
  line-height: 1.55;
}

/* =========================================================
   SIGN OUT
   ========================================================= */

.membership-sign-out-button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 132px;
  min-height: 42px;

  margin-top: 22px;
  padding: 0 18px;

  border: 1px solid #101419;
  border-radius: 9px;

  color: #ffffff;
  background: #101419;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;

  box-shadow: none;
  transform: none;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease;
}

.membership-sign-out-button:hover:not(:disabled) {
  border-color: #2d353f;

  color: #ffffff;
  background: #2d353f;
}

.membership-sign-out-button:focus-visible {
  outline:
    1px solid
    rgba(
      76,
      88,
      103,
      0.30
    );

  outline-offset: 2px;
}

.membership-sign-out-button:disabled {
  cursor: not-allowed;

  opacity: 0.58;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 620px) {
  .membership-pending-page {
    place-items: start center;

    padding:
      16px
      14px
      max(
        28px,
        calc(
          16px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .membership-pending-card {
    width: 100%;

    padding:
      24px
      20px;

    border-radius: 14px;
  }

  .membership-pending-content {
    margin-top: 30px;
  }

  .membership-pending-content h1 {
    font-size: 28px;
  }

  .membership-pending-description {
    font-size: 11px;
  }

  .membership-sign-out-button {
    width: 100%;
  }
}
/* =========================================================
   CHECK EMAIL
   Clean verification experience.
   White + dark neutral + orange only.
   ========================================================= */

.check-email-page {
  width: 100%;
  min-height: 100vh;

  display: grid;
  place-items: center;

  padding:
    36px 24px
    max(
      36px,
      env(safe-area-inset-bottom)
    );

  color: #101419;
  background: #ffffff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.check-email-page *,
.check-email-page *::before,
.check-email-page *::after {
  box-sizing: border-box;
}

.check-email-page a {
  text-decoration: none;
}

.check-email-shell {
  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, 0.92fr);

  width: min(100%, 930px);
  min-height: 560px;

  border: 1px solid #e4e8ef;
  border-radius: 20px;

  overflow: hidden;

  background: #ffffff;

  box-shadow:
    0 20px 56px
    rgba(16, 20, 25, 0.07);
}

/* =========================================================
   MAIN SIDE
   ========================================================= */

.check-email-main {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 34px 40px 38px;

  background: #ffffff;
}

.check-email-brand {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  width: fit-content;

  color: inherit;
}

.check-email-brand img {
  width: 58px;
  height: 38px;

  object-fit: contain;
}

.check-email-brand > span {
  display: grid;

  gap: 2px;
}

.check-email-brand strong {
  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.check-email-brand small {
  color: #6f8095;

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.check-email-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;

  max-width: 470px;

  padding: 44px 0 20px;
}

.check-email-icon {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  margin-bottom: 20px;

  border: 1px solid #ffcbc5;
  border-radius: 14px;

  color: #ff5303;
  background: #fffaf9;
}

.check-email-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.check-email-content h1 {
  margin: 0;

  color: #101419;

  font-size:
    clamp(
      34px,
      5vw,
      48px
    );

  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.check-email-lead {
  margin: 20px 0 4px;

  color: #6f8095;

  font-size: 12px;
  line-height: 1.6;
}

.check-email-address {
  margin: 0;

  color: #101419;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;

  word-break: break-word;
}

.check-email-guidance {
  max-width: 430px;

  margin: 14px 0 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.7;
}

.check-email-mentor-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 20px;
  padding: 13px 14px;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #4c5867;
  background: #f8f9fb;
}

.check-email-mentor-note > svg {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #2d353f;
}

.check-email-mentor-note p {
  margin: 0;

  font-size: 10px;
  line-height: 1.6;
}

.check-email-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 46px;

  margin-top: 26px;
  padding: 0 16px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-size: 13px;
  font-weight: 500;

  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.check-email-primary-button:hover {
  border-color: #c13c00;

  background: #c13c00;
}

.check-email-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  width: 100%;
  min-height: 44px;

  margin-top: 10px;
  padding: 0 16px;

  border: 1px solid #c9d2df;
  border-radius: 9px;

  color: #2d353f;
  background: #ffffff;

  font-size: 12px;
  font-weight: 500;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.check-email-secondary-button:hover {
  border-color: #97aac2;

  color: #101419;
  background: #f7f8fa;
}

.check-email-primary-button:focus-visible,
.check-email-secondary-button:focus-visible,
.check-email-brand:focus-visible {
  outline:
    1px solid
    rgba(76, 88, 103, 0.28);

  outline-offset: 2px;
}

/* =========================================================
   HELP SIDE
   ========================================================= */

.check-email-help {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding: 42px;

  border-left: 1px solid #e4e8ef;

  background: #f8f9fb;
}

.check-email-help-label {
  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.check-email-help h2 {
  max-width: 340px;

  margin: 10px 0 26px;

  color: #101419;

  font-size:
    clamp(
      24px,
      3vw,
      30px
    );

  font-weight: 630;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.check-email-steps {
  display: grid;

  gap: 18px;
}

.check-email-step {
  display: grid;
  grid-template-columns:
    32px
    minmax(0, 1fr);

  gap: 12px;
  align-items: flex-start;
}

.check-email-step-number {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  border: 1px solid #d7dee7;
  border-radius: 9px;

  color: #2d353f;
  background: #ffffff;

  font-size: 11px;
  font-weight: 600;
}

.check-email-step strong {
  display: block;

  margin-top: 1px;

  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

.check-email-step p {
  margin: 4px 0 0;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.55;
}

.check-email-tip {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 28px;
  padding-top: 20px;

  border-top: 1px solid #dfe4eb;

  color: #6f8095;
}

.check-email-tip > svg {
  flex: 0 0 auto;

  margin: 0;

  color: #ff5303;
}

.check-email-tip p {
  margin: 0;

  font-size: 10px;
  line-height: 1.5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {
  .check-email-shell {
    grid-template-columns: 1fr;

    min-height: 0;
  }

  .check-email-help {
    border-top: 1px solid #e4e8ef;
    border-left: 0;
  }

  .check-email-content {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .check-email-page {
    place-items: start center;

    padding:
      16px
      14px
      max(
        26px,
        calc(
          16px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .check-email-shell {
    width: 100%;

    border-radius: 14px;
  }

  .check-email-main {
    padding:
      22px
      20px
      28px;
  }

  .check-email-content {
    padding:
      36px 0
      6px;
  }

  .check-email-content h1 {
    font-size: 34px;
  }

  .check-email-help {
    padding:
      28px
      20px;
  }

  .check-email-help h2 {
    font-size: 24px;
  }
}
/* =========================================================
   VERIFY EMAIL
   White canvas + orange primary + neutral secondary.
   No green or teal.
   ========================================================= */

.verify-email-page {
  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100vh;

  padding:
    32px 20px
    max(
      32px,
      env(safe-area-inset-bottom)
    );

  color: #101419;
  background: #ffffff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.verify-email-page *,
.verify-email-page *::before,
.verify-email-page *::after {
  box-sizing: border-box;
}

.verify-email-card {
  width: min(100%, 520px);

  padding: 34px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 16px 44px
    rgba(16, 20, 25, 0.06);

  text-align: center;
}

.verify-email-brand {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 34px;

  color: inherit;
  text-decoration: none;
}

.verify-email-brand img {
  width: 58px;
  height: 38px;

  object-fit: contain;
}

.verify-email-brand > span {
  display: grid;

  gap: 2px;

  text-align: left;
}

.verify-email-brand strong {
  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.verify-email-brand small {
  color: #6f8095;

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.verify-email-icon {
  display: grid;
  place-items: center;

  width: 56px;
  height: 56px;

  margin: 0 auto 18px;

  border: 1px solid #ffcbc5;
  border-radius: 14px;

  color: #ff5303;
  background: #fffaf9;
}

.verify-email-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.verify-email-card h1 {
  margin: 0;

  color: #101419;

  font-size:
    clamp(
      28px,
      5vw,
      36px
    );

  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.verify-email-introduction,
.verify-email-guidance {
  max-width: 420px;

  margin:
    16px auto 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.7;
}

.verify-email-guidance {
  margin-top: 8px;

  color: #6f8095;
}

.verify-email-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  margin-top: 24px;
  padding: 0 16px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-size: 13px;
  font-weight: 500;

  text-decoration: none;

  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.verify-email-primary-button:hover {
  border-color: #c13c00;

  background: #c13c00;
}

.verify-email-primary-button:focus-visible,
.verify-email-secondary-link:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.25
    );

  outline-offset: 2px;
}

.verify-email-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-top: 16px;

  color: #4c5867;

  font-size: 11px;
  font-weight: 500;

  text-decoration: none;
}

.verify-email-secondary-link:hover {
  color: #101419;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .verify-email-page {
    place-items: start center;

    padding:
      20px 16px
      max(
        28px,
        calc(
          20px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .verify-email-card {
    margin-top: 18px;

    padding: 28px 20px;

    border-radius: 14px;
  }

  .verify-email-brand {
    margin-bottom: 28px;
  }

  .verify-email-brand img {
    width: 52px;
    height: 34px;
  }

  .verify-email-card h1 {
    font-size: 28px;
  }

  .verify-email-introduction,
  .verify-email-guidance {
    font-size: 12px;
  }
}
/* =========================================================
   NOTIFICATION BELL
   Mentor Connect
   ========================================================= */

.dashboard-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;
  margin-left: auto;
}

/* =========================================================
   BELL BUTTON
   ========================================================= */

.notification-bell-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #4c5867;
  background: #ffffff;

  font: inherit;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.notification-bell-button:hover {
  border-color: #c9d2df;

  color: #101419;
  background: #f7f8fa;
}

.notification-bell-button:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.28);
  outline-offset: 2px;
}

.notification-bell-count {
  position: absolute;
  top: -5px;
  right: -5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  border: 2px solid #ffffff;
  border-radius: 999px;

  color: #ffffff;
  background: #ff5303;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   OVERLAY
   ========================================================= */

.notification-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1280;

  padding: 0;

  border: 0;

  background: rgba(3, 4, 5, 0.32);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.notification-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   PANEL
   ========================================================= */

.notification-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1290;

  display: flex;
  flex-direction: column;

  width: 420px;
  max-width: calc(100vw - 24px);

  height: 100vh;
  height: 100dvh;

  border-left: 1px solid #e4e8ef;

  color: #101419;
  background: #ffffff;

  box-shadow: -18px 0 48px rgba(3, 4, 5, 0.12);

  transform: translateX(102%);
  visibility: hidden;

  transition:
    transform 200ms ease,
    visibility 200ms ease;
}

.notification-panel.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* =========================================================
   PANEL HEADER
   ========================================================= */

.notification-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  flex: 0 0 auto;

  gap: 16px;
  padding: 20px;

  border-bottom: 1px solid #edf0f4;

  text-align: left;
}

.notification-panel-header > div {
  min-width: 0;
}

.notification-panel-header span {
  display: block;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;

  text-align: left;
}

.notification-panel-header h2 {
  margin: 6px 0 0;

  color: #101419;

  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;

  text-align: left;
}

.notification-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  font: inherit;

  cursor: pointer;
}

.notification-panel-close:hover {
  border-color: #c9d2df;

  color: #101419;
  background: #f7f8fa;
}

.notification-panel-close:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.28);
  outline-offset: 2px;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.notification-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 auto;

  gap: 12px;
  padding: 12px 20px;

  border-bottom: 1px solid #edf0f4;
}

.notification-panel-toolbar p {
  margin: 0;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.4;

  text-align: left;
}

.notification-panel-toolbar button {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 32px;
  padding: 0 9px;

  border: 0;
  border-radius: 7px;

  color: #c13c00;
  background: transparent;

  font: inherit;
  font-size: 10px;
  font-weight: 600;

  cursor: pointer;
}

.notification-panel-toolbar button:hover:not(:disabled) {
  color: #8f2d00;
  background: #fff7f3;
}

.notification-panel-toolbar button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.notification-panel-toolbar button:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.28);
  outline-offset: 2px;
}

/* =========================================================
   ERROR
   ========================================================= */

.notification-panel-error {
  flex: 0 0 auto;

  margin: 12px 16px 0;
  padding: 10px 12px;

  border: 1px solid #ecd0d4;
  border-radius: 8px;

  color: #a63d46;
  background: #fffafb;

  font-size: 10px;
  line-height: 1.5;

  text-align: left;
}

/* =========================================================
   NOTIFICATION LIST
   ========================================================= */

.notification-panel-list {
  flex: 1 1 auto;

  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  background: #ffffff;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: stretch;

  border-bottom: 1px solid #edf0f4;

  background: #ffffff;

  text-align: left;
}

.notification-item.is-unread {
  background: #fffaf7;
}

.notification-item-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: flex-start;

  gap: 11px;

  width: 100%;
  min-width: 0;

  padding: 15px 8px 15px 18px;

  border: 0;

  color: inherit;
  background: transparent;

  font: inherit;
  text-align: left;

  cursor: pointer;
}

.notification-item-main:hover {
  background: #f8f9fb;
}

.notification-item.is-unread .notification-item-main:hover {
  background: #fff6f1;
}

.notification-item-main:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.28);
  outline-offset: -2px;
}

/* =========================================================
   ITEM ICON
   ========================================================= */

.notification-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border: 1px solid #ffd6c2;
  border-radius: 10px;

  color: #c13c00;
  background: #fff2eb;
}

/* =========================================================
   ITEM COPY
   ========================================================= */

.notification-item-copy {
  min-width: 0;

  text-align: left;
}

.notification-item-title-row {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;

  text-align: left;
}

.notification-item-title-row strong {
  overflow: hidden;

  color: #2d353f;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item.is-unread
  .notification-item-title-row strong {
  color: #101419;
  font-weight: 700;
}

.notification-item-unread-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;

  border-radius: 999px;

  background: #ff5303;
}

.notification-item-message {
  display: block;
  overflow: hidden;

  max-height: 3em;
  margin-top: 5px;

  color: #5e6d7f;

  font-size: 10px;
  line-height: 1.5;

  text-align: left;
}

.notification-item-time {
  display: block;

  margin-top: 7px;

  color: #97a3b2;

  font-size: 9px;
  line-height: 1.3;

  text-align: left;
}

/* =========================================================
   CLEAR BUTTON
   ========================================================= */

.notification-item-clear {
  align-self: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  padding: 0;
  margin-right: 8px;

  border: 0;
  border-radius: 7px;

  color: #97a3b2;
  background: transparent;

  font: inherit;

  cursor: pointer;
}

.notification-item-clear:hover {
  color: #4c5867;
  background: #f1f3f6;
}

.notification-item-clear:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.28);
  outline-offset: 2px;
}

/* =========================================================
   EMPTY / LOADING STATE
   ========================================================= */

.notification-panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 300px;
  padding: 32px 24px;

  text-align: center;
}

.notification-panel-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  color: #6f8095;
  background: #f7f8fa;
}

.notification-panel-empty h3 {
  margin: 12px 0 0;

  color: #101419;

  font-size: 14px;
  font-weight: 650;
}

.notification-panel-empty p {
  max-width: 270px;

  margin: 7px 0 0;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.55;
}

/* =========================================================
   RESPONSIVE: TABLET
   ========================================================= */

@media (max-width: 760px) {
  .dashboard-header-actions {
    gap: 7px;
  }

  .notification-bell-button {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .notification-panel {
    width: 380px;
    max-width: 92vw;
  }

  .notification-panel-header {
    padding: 18px 16px 15px;
  }

  .notification-panel-toolbar {
    padding: 10px 16px;
  }

  .notification-item-main {
    padding-left: 15px;
  }
}

/* =========================================================
   RESPONSIVE: MOBILE
   ========================================================= */

@media (max-width: 420px) {
  .notification-panel {
    width: 100vw;
    max-width: 100vw;

    border-left: 0;
  }

  .notification-panel-header {
    padding:
      max(18px, env(safe-area-inset-top))
      16px
      15px;
  }

  .notification-panel-toolbar {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }

  .notification-item {
    grid-template-columns:
      minmax(0, 1fr)
      36px;
  }

  .notification-item-main {
    grid-template-columns:
      36px
      minmax(0, 1fr);

    gap: 10px;

    padding:
      14px
      6px
      14px
      14px;
  }

  .notification-item-icon {
    width: 36px;
    height: 36px;
  }

  .notification-item-clear {
    margin-right: 5px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .notification-panel,
  .notification-panel-overlay {
    transition: none;
  }
}/* =========================================================
   DASHBOARD LAYOUT
   Shared confirmation modal for Sign out.
   Works for mentee, mentor and administrator dashboards.
   ========================================================= */

/* ---------------------------------------------------------
   SIGN OUT MODAL
   --------------------------------------------------------- */

.dashboard-signout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));

  background:
    rgba(3, 4, 5, 0.48);
}

.dashboard-signout-modal {
  width:
    min(
      100%,
      440px
    );

  max-height:
    calc(
      100dvh -
      40px -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom)
    );

  overflow-y: auto;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  color: #101419;
  background: #ffffff;

  box-shadow:
    0 26px 70px
    rgba(3, 4, 5, 0.22);

  animation:
    dashboard-signout-in
    170ms ease-out both;
}

@keyframes dashboard-signout-in {
  from {
    opacity: 0;

    transform:
      translateY(7px)
      scale(0.99);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

.dashboard-signout-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.dashboard-signout-modal-header
> div {
  min-width: 0;
}

.dashboard-signout-modal-header
span {
  display: block;

  color: #ff5303;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.dashboard-signout-modal-header h2 {
  margin: 6px 0 0;

  color: #101419;

  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dashboard-signout-close {
  appearance: none;
  -webkit-appearance: none;

  display: grid;
  place-items: center;

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  cursor: pointer;

  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.dashboard-signout-close:hover:not(:disabled) {
  border-color: #c9d2df;

  color: #101419;
  background: #f7f8fa;
}

.dashboard-signout-copy {
  margin: 18px 0 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

.dashboard-signout-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 24px;
}

.dashboard-signout-cancel,
.dashboard-signout-confirm {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 44px;
  padding: 0 16px;

  border-radius: 9px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;

  box-shadow: none;
  transform: none;

  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease;
}

/* Secondary action */

.dashboard-signout-cancel {
  min-width: 96px;

  border: 1px solid #c9d2df;

  color: #101419;
  background: #ffffff;
}

.dashboard-signout-cancel:hover:not(:disabled) {
  border-color: #97aac2;

  background: #f7f8fa;
}

/* Destructive confirmation */

.dashboard-signout-confirm {
  min-width: 120px;

  border: 1px solid #b74750;

  color: #ffffff;
  background: #b74750;
}

.dashboard-signout-confirm:hover:not(:disabled) {
  border-color: #953841;

  color: #ffffff;
  background: #953841;
}

.dashboard-signout-close:focus-visible,
.dashboard-signout-cancel:focus-visible,
.dashboard-signout-confirm:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.28
    );

  outline-offset: 2px;
}

.dashboard-signout-close:disabled,
.dashboard-signout-cancel:disabled,
.dashboard-signout-confirm:disabled {
  cursor: not-allowed;

  opacity: 0.58;
}

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

@media (max-width: 560px) {
  .dashboard-signout-backdrop {
    align-items: flex-end;

    padding:
      12px
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .dashboard-signout-modal {
    width: 100%;
    max-height:
      calc(
        100dvh -
        24px -
        env(safe-area-inset-bottom)
      );

    padding: 22px;

    border-radius:
      18px 18px
      14px 14px;
  }

  .dashboard-signout-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .dashboard-signout-cancel,
  .dashboard-signout-confirm {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-signout-modal {
    animation: none;
  }
}

/* =========================================================
   DASHBOARD BRAND ALIGNMENT
   Stable desktop, tablet and mobile alignment.
   ========================================================= */

.dashboard-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 10px;

  min-width: 0;

  margin: 0;
  padding: 0;
}

.dashboard-brand-logo {
  display: block;

  flex: 0 0 auto;

  width: 58px;
  height: 30px;

  margin: 0;
  padding: 0;

  object-fit: contain;
}

.dashboard-brand-text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;

  gap: 4px;

  min-width: 0;

  margin: 0;
  padding: 0;
}

.dashboard-brand-text strong,
.dashboard-brand-text small {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}

.dashboard-sidebar .dashboard-brand-logo {
  width: 58px;
  height: 32px;
}

.dashboard-sidebar .dashboard-brand-text strong {
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
}

.dashboard-sidebar .dashboard-brand-text small {
  color: #97aac2;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* =========================================================
   DASHBOARD ACCOUNT ROLE LABEL
   Shared by Mentor, Mentee and Admin.

   Keep the role visible, but deliberately quieter than
   the person's name.
   ========================================================= */

.dashboard-layout
.dashboard-user
> small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 20px !important;

  margin: 0 !important;

  padding:
    3px
    8px !important;

  border:
    1px solid
    #e4e8ef !important;

  border-radius:
    999px !important;

  color:
    #6f8095 !important;

  background:
    #f8f9fb !important;

  font-size:
    10px !important;

  font-weight:
    500 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    0 !important;

  white-space:
    nowrap;
}

/*
  Keep the person's name stronger than the role,
  but avoid an unnecessarily heavy appearance.
*/

.dashboard-layout
.dashboard-user
> strong {
  font-weight:
    600 !important;
}

/* ---------------------------------------------------------
   TABLET AND MOBILE HEADER
   --------------------------------------------------------- */

@media (max-width: 1180px) {
  .dashboard-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height:
      calc(
        68px +
        env(safe-area-inset-top)
      );

    padding-top:
      env(safe-area-inset-top);
    padding-bottom: 0;
  }

  .dashboard-mobile-header .dashboard-brand {
    display: flex;
    align-items: center;

    gap: 9px;

    width: auto;
    max-width: calc(100% - 116px);

    min-width: 0;
  }

  .dashboard-mobile-header .dashboard-brand-logo {
    width: 58px;
    height: 28px;
  }

  .dashboard-mobile-header .dashboard-brand-text {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 3px;

    min-height: 28px;
  }

  .dashboard-mobile-header .dashboard-brand-text strong {
    color: #101419;

    font-size: 13px;
    font-weight: 700;
  }

  .dashboard-mobile-header .dashboard-brand-text small {
    color: #8797ad;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
}

/* Phones show only TCN IKEJA beside the logo. */

@media (max-width: 560px) {
  .dashboard-mobile-header .dashboard-brand {
    gap: 8px;
  }

  .dashboard-mobile-header .dashboard-brand-logo {
    width: 56px;
    height: 26px;
  }

  .dashboard-mobile-header .dashboard-brand-text {
    min-height: 26px;

    gap: 0;
  }

  .dashboard-mobile-header .dashboard-brand-text strong {
    display: none;
  }

  .dashboard-mobile-header .dashboard-brand-text small {
    display: flex;
    align-items: center;

    min-height: 26px;

    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.12em;
  }

  .dashboard-layout
  .dashboard-user
  > small {
    min-height: 20px !important;

    padding:
      3px
      7px !important;

    font-size:
      10px !important;
  }
}

@media (max-width: 380px) {
  .dashboard-mobile-header .dashboard-brand {
    gap: 7px;
  }

  .dashboard-mobile-header .dashboard-brand-logo {
    width: 52px;
    height: 24px;
  }

  .dashboard-mobile-header .dashboard-brand-text {
    min-height: 24px;
  }

  .dashboard-mobile-header .dashboard-brand-text small {
    min-height: 24px;

    font-size: 9px;
    letter-spacing: 0.1em;
  }
}
/* =========================================================
   MENTEE DASHBOARD — CLEAN BRAND SYSTEM
   Sidebar deliberately not changed in this file.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE / LIGHT BACKGROUND
   --------------------------------------------------------- */

.mentee-overview-page {
  width: 100%;
  min-width: 0;

  color: #101419;
  background: #ffffff;
}

body:has(.mentee-overview-page) .dashboard-layout,
body:has(.mentee-overview-page) .dashboard-content {
  background: #ffffff !important;
}

/* Main page title */
body:has(.mentee-overview-page)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentee-overview-page)
.dashboard-content > header p {
  color: #4c5867 !important;
}

body:has(.mentee-overview-page)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

/* Mentee identity pill: neutral secondary, not teal */
body:has(.mentee-overview-page)
.dashboard-user {
  border-color: #e4e8ef !important;
  background: #ffffff !important;

  box-shadow:
    0 4px 14px rgba(16, 20, 25, 0.04);
}

body:has(.mentee-overview-page)
.dashboard-user strong {
  color: #101419 !important;
}

body:has(.mentee-overview-page)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 700;
}

/* ---------------------------------------------------------
   WELCOME BANNER
   Exact visual direction from homepage hero:
   orange-tinted grid + centred orange glow + secondary base
   --------------------------------------------------------- */

body:has(.mentee-overview-page)
.mentee-overview-hero {
  position: relative !important;
  isolation: isolate;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  min-height: 244px !important;
  margin-bottom: 20px !important;
  padding: 40px !important;

  overflow: hidden !important;

  border:
    1px solid rgba(255, 151, 136, 0.12) !important;

  border-radius: 26px !important;

  color: #ffffff !important;

  background-color: #030405 !important;

  background-image:
    linear-gradient(
      rgba(255, 151, 136, 0.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 151, 136, 0.075) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 10%,
      rgba(255, 83, 3, 0.42) 0%,
      rgba(255, 83, 3, 0.24) 18%,
      rgba(255, 119, 93, 0.12) 34%,
      rgba(255, 151, 136, 0.045) 48%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 50% 30%,
      rgba(75, 18, 0, 0.44) 0%,
      rgba(47, 8, 0, 0.34) 34%,
      rgba(16, 20, 25, 0.22) 56%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #101419 0%,
      #080b0f 48%,
      #030405 100%
    ) !important;

  background-size:
    54px 54px,
    54px 54px,
    auto,
    auto,
    auto !important;

  background-position:
    center top,
    center top,
    center top,
    center top,
    center !important;

  box-shadow:
    0 18px 46px rgba(16, 20, 25, 0.12) !important;
}

/* Bottom fade exactly like hero system */
body:has(.mentee-overview-page)
.mentee-overview-hero::before {
  content: "" !important;

  position: absolute;
  z-index: 0;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 4, 5, 0.02) 0%,
      rgba(3, 4, 5, 0.04) 35%,
      rgba(3, 4, 5, 0.24) 68%,
      rgba(3, 4, 5, 0.58) 100%
    ),
    radial-gradient(
      ellipse at center top,
      transparent 0%,
      transparent 46%,
      rgba(3, 4, 5, 0.10) 72%,
      rgba(3, 4, 5, 0.34) 100%
    ) !important;
}

/* Centred orange glow, no rings / icon decoration */
body:has(.mentee-overview-page)
.mentee-overview-hero::after {
  content: "" !important;

  position: absolute;
  z-index: 0;

  top: -40%;
  left: 50%;

  width: 70%;
  height: 105%;

  transform: translateX(-50%);

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 83, 3, 0.22) 0%,
      rgba(255, 119, 93, 0.10) 30%,
      rgba(255, 151, 136, 0.03) 52%,
      transparent 74%
    ) !important;

  filter: blur(18px);
}

.mentee-overview-hero-copy {
  position: relative;
  z-index: 1;

  max-width: 780px;
}

/* Force out the old teal eyebrow */
body:has(.mentee-overview-page)
.mentee-overview-hero .eyebrow {
  color: #ff5303 !important;

  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}

body:has(.mentee-overview-page)
.mentee-overview-hero h2 {
  margin: 10px 0 12px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 4vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
}

body:has(.mentee-overview-page)
.mentee-overview-hero p {
  max-width: 700px !important;
  margin: 0 !important;

  color: #c9d2df !important;

  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Old hero actions/icon must never reappear */
.mentee-overview-hero-actions,
.mentee-overview-hero-icon {
  display: none !important;
}

/* ---------------------------------------------------------
   BRAND USAGE ON LIGHT BACKGROUNDS
   Dark secondary is the default.
   Orange is used selectively.
   No teal/green in this dashboard.
   --------------------------------------------------------- */

body:has(.mentee-overview-page)
.mentee-overview-page .eyebrow {
  color: #4c5867 !important;
}

/* ---------------------------------------------------------
   STAT CARDS
   --------------------------------------------------------- */

body:has(.mentee-overview-page)
.mentee-overview-stat-card {
  border:
    1px solid #e4e8ef !important;

  color: #101419 !important;
  background: #ffffff !important;

  box-shadow:
    0 8px 22px rgba(16, 20, 25, 0.035) !important;

  transform: none !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-card:hover {
  border-color: #c9d2df !important;

  background: #ffffff !important;

  box-shadow:
    0 10px 26px rgba(16, 20, 25, 0.055) !important;

  transform: none !important;
}

/* Base icon tile is neutral */
body:has(.mentee-overview-page)
.mentee-overview-stat-icon {
  color: #101419 !important;
  background: #f1f3f6 !important;
}

/* Use orange once as the primary accent */
body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(1)
.mentee-overview-stat-icon {
  color: #ff5303 !important;
  background: #fff4f3 !important;
}

/* Secondary family for the remaining stat icons */
body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(2)
.mentee-overview-stat-icon {
  color: #101419 !important;
  background: #e4e8ef !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(3)
.mentee-overview-stat-icon {
  color: #2d353f !important;
  background: #eef1f5 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(4)
.mentee-overview-stat-icon {
  color: #4c5867 !important;
  background: #f1f3f6 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-copy small,
body:has(.mentee-overview-page)
.mentee-overview-stat-copy > span {
  color: #6f8095 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-copy strong {
  color: #101419 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-arrow {
  color: #97aac2 !important;
}

/* ---------------------------------------------------------
   MAIN PANELS
   --------------------------------------------------------- */

body:has(.mentee-overview-page)
.mentee-overview-panel,
body:has(.mentee-overview-page)
.mentee-overview-safety,
body:has(.mentee-overview-page)
.mentee-overview-recommendations {
  border-color: #e4e8ef !important;
  background: #ffffff !important;
}

body:has(.mentee-overview-page)
.mentee-overview-panel-heading h3,
body:has(.mentee-overview-page)
.mentee-overview-section-heading h3,
body:has(.mentee-overview-page)
.mentee-overview-safety h3,
body:has(.mentee-overview-page)
.mentee-overview-journey-state h4,
body:has(.mentee-overview-page)
.mentee-overview-inline-empty h4 {
  color: #101419 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-section-heading p,
body:has(.mentee-overview-page)
.mentee-overview-journey-state p,
body:has(.mentee-overview-page)
.mentee-overview-safety p,
body:has(.mentee-overview-page)
.mentee-overview-inline-empty p {
  color: #4c5867 !important;
}

/* Journey card */
body:has(.mentee-overview-page)
.mentee-overview-journey-state {
  background: #f7f8fa !important;
}

body:has(.mentee-overview-page)
.mentee-overview-journey-icon {
  color: #101419 !important;
  background: #e4e8ef !important;
}

/* Progress */
body:has(.mentee-overview-page)
.mentee-overview-progress > span {
  background: #e4e8ef !important;
}

body:has(.mentee-overview-page)
.mentee-overview-progress i {
  background: #ff5303 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-progress small {
  color: #4c5867 !important;
}

/* Safety */
body:has(.mentee-overview-page)
.mentee-overview-safety {
  background: #f7f8fa !important;
}

body:has(.mentee-overview-page)
.mentee-overview-safety-icon {
  color: #101419 !important;
  background: #e4e8ef !important;
}

/* ---------------------------------------------------------
   BUTTON SIZE SYSTEM
   --------------------------------------------------------- */

.mentee-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;

  font-family: inherit;
  font-weight: 650;
}

/* Large: reserve for major hero / onboarding CTAs */
.mentee-button--large {
  min-height: 52px;
  padding: 0 22px;

  border-radius: 12px;

  font-size: 14px;
}

/* Medium: dashboard card actions */
.mentee-button--medium {
  min-height: 42px !important;
  padding: 0 16px !important;

  border-radius: 10px !important;

  font-size: 13px !important;
}

/* Small: compact/table/card actions */
.mentee-button--small {
  min-height: 34px;
  padding: 0 12px;

  border-radius: 9px;

  font-size: 12px;
}

body:has(.mentee-overview-page)
.mentee-overview-page .primary-button {
  border-color: #ff5303 !important;

  color: #ffffff !important;
  background: #ff5303 !important;

  box-shadow: none !important;
}

body:has(.mentee-overview-page)
.mentee-overview-page .primary-button:hover:not(:disabled) {
  border-color: #ff775d !important;

  color: #ffffff !important;
  background: #ff775d !important;
}

/* Small text actions */
body:has(.mentee-overview-page)
.mentee-overview-text-button {
  color: #2d353f !important;

  font-size: 12px !important;
  font-weight: 650;
}

body:has(.mentee-overview-page)
.mentee-overview-text-button:hover {
  color: #101419 !important;
}

/* ---------------------------------------------------------
   RECOMMENDED MENTORS
   --------------------------------------------------------- */

body:has(.mentee-overview-page)
.mentee-overview-mentor-card {
  border-color: #e4e8ef !important;
  background: #ffffff !important;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-avatar {
  color: #101419 !important;
  background: #e4e8ef !important;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-header small {
  color: #6f8095 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-header h4 {
  color: #101419 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-header p {
  color: #4c5867 !important;
}

/* Mentor tags: subtle secondary neutral, no teal */
body:has(.mentee-overview-page)
.mentee-overview-mentor-tags span {
  border:
    1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-footer {
  border-top-color: #e4e8ef !important;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-footer > span {
  color: #6f8095 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-footer button {
  color: #101419 !important;

  font-size: 12px !important;
  font-weight: 650;
}

body:has(.mentee-overview-page)
.mentee-overview-mentor-footer button:hover {
  color: #2d353f !important;
}

body:has(.mentee-overview-page)
.mentee-overview-inline-empty {
  color: #101419 !important;
  background: #f7f8fa !important;
}

/* ---------------------------------------------------------
   LOADING / ERROR
   --------------------------------------------------------- */

body:has(.mentee-overview-page)
.mentee-overview-page .loader {
  border-color: #e4e8ef !important;
  border-top-color: #ff5303 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-page .empty-state-icon {
  color: #101419 !important;
  background: #e4e8ef !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 820px) {
  body:has(.mentee-overview-page)
  .mentee-overview-hero {
    min-height: 220px !important;

    padding: 32px 28px !important;

    background-size:
      46px 46px,
      46px 46px,
      auto,
      auto,
      auto !important;
  }
}

@media (max-width: 620px) {
  body:has(.mentee-overview-page)
  .mentee-overview-hero {
    min-height: auto !important;

    padding: 28px 22px !important;

    border-radius: 20px !important;
  }

  body:has(.mentee-overview-page)
  .mentee-overview-hero h2 {
    font-size: 30px !important;
  }

  body:has(.mentee-overview-page)
  .mentee-overview-hero p {
    font-size: 13px !important;
  }

  .mentee-overview-stat-grid,
  .mentee-overview-mentor-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V3 — UNIFIED OVERVIEW STAT ICONS
   All four overview icons use the same primary treatment.
   ========================================================= */

body:has(.mentee-overview-page)
.mentee-overview-stat-icon,
body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(1)
.mentee-overview-stat-icon,
body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(2)
.mentee-overview-stat-icon,
body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(3)
.mentee-overview-stat-icon,
body:has(.mentee-overview-page)
.mentee-overview-stat-card:nth-child(4)
.mentee-overview-stat-icon {
  width: 46px !important;
  height: 46px !important;

  border: 1px solid #ffe5e3 !important;
  border-radius: 14px !important;

  color: #ff5303 !important;
  background: #fff4f3 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-icon svg {
  width: 20px;
  height: 20px;

  stroke-width: 1.9;
}


/* =========================================================
   V4 — CONSISTENT OVERVIEW STAT TYPOGRAPHY
   ========================================================= */

body:has(.mentee-overview-page)
.mentee-overview-stat-copy {
  display: grid;

  min-width: 0;

  font-family: inherit !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-copy small {
  margin: 0 !important;

  color: #6f8095 !important;

  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-copy strong {
  display: block;

  margin-top: 3px !important;

  overflow: hidden;

  color: #101419 !important;

  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-copy > span {
  display: block;

  margin-top: 4px !important;

  overflow: hidden;

  color: #6f8095 !important;

  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep values visually aligned across all four cards */
body:has(.mentee-overview-page)
.mentee-overview-stat-card {
  align-items: center !important;
}


/* =========================================================
   V5 — DASHBOARD BUTTON TYPOGRAPHY
   Medium buttons should feel medium, not bold.
   ========================================================= */

body:has(.mentee-overview-page)
.mentee-overview-page .mentee-button {
  font-family: inherit !important;
  font-weight: 500 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-page .mentee-button--medium {
  min-height: 42px !important;
  padding: 0 16px !important;

  border-radius: 10px !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-page .primary-button.mentee-button--medium {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* =========================================================
   NO-FLASH DATA LOADING
   First visit = subtle skeleton.
   Return visit = cached data immediately.
   ========================================================= */

.mentee-overview-inline-error {
  margin-bottom: 14px;
  padding: 10px 13px;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #4c5867;
  background: #f8f9fb;

  font-size: 12px;
  font-weight: 500;
}

.mentee-overview-loading-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-top: 20px;
}

.mentee-overview-loading-stat {
  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 104px;
  padding: 18px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;
}

.mentee-overview-loading-stat > span {
  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  border-radius: 14px;

  background: #eef1f5;

  animation:
    mentor-connect-skeleton 1.25s ease-in-out infinite;
}

.mentee-overview-loading-stat > div {
  display: grid;

  width: 100%;

  gap: 7px;
}

.mentee-overview-loading-stat i {
  display: block;

  width: 80%;
  height: 9px;

  border-radius: 999px;

  background: #eef1f5;

  animation:
    mentor-connect-skeleton 1.25s ease-in-out infinite;
}

.mentee-overview-loading-stat i:nth-child(2) {
  width: 42%;
  height: 16px;
}

.mentee-overview-loading-stat i:nth-child(3) {
  width: 64%;
}

.mentee-overview-loading-panel {
  min-height: 240px;

  margin-top: 20px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background:
    linear-gradient(
      90deg,
      #f8f9fb 0%,
      #eef1f5 48%,
      #f8f9fb 100%
    );

  background-size: 220% 100%;

  animation:
    mentor-connect-skeleton-sweep 1.4s linear infinite;
}

@keyframes mentor-connect-skeleton {
  0%,
  100% {
    opacity: 0.52;
  }

  50% {
    opacity: 1;
  }
}

@keyframes mentor-connect-skeleton-sweep {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@media (max-width: 900px) {
  .mentee-overview-loading-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .mentee-overview-loading-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   PRODUCTION CLOSEOUT — READABILITY + SAFE SPACING
   ========================================================= */

/* Keep the bottom of the dashboard clear on smaller devices
   and devices with a safe-area inset. */
.mentee-overview-page {
  padding-bottom:
    max(
      72px,
      calc(
        52px +
        env(safe-area-inset-bottom)
      )
    ) !important;
}

/* Improve stat-card readability without changing the design. */
body:has(.mentee-overview-page)
.mentee-overview-stat-copy small {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-copy strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

body:has(.mentee-overview-page)
.mentee-overview-stat-copy > span {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* Give key dashboard actions a comfortable touch target. */
body:has(.mentee-overview-page)
.mentee-overview-page .mentee-button--medium {
  min-height: 44px !important;
}

/* Keep recommendation actions easy to tap. */
body:has(.mentee-overview-page)
.mentee-overview-mentor-footer button,
body:has(.mentee-overview-page)
.mentee-overview-text-button {
  min-height: 36px;
}

/* Tablet: keep cards readable without becoming oversized. */
@media (max-width: 820px) {
  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy strong {
    font-size: 19px !important;
  }

  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy small,
  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy > span {
    font-size: 11px !important;
  }
}

/* Mobile: increase the main value slightly so values such as
   "Available", "Locked", dates and percentages remain easy to scan. */
@media (max-width: 620px) {
  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy strong {
    font-size: 20px !important;
  }

  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy small,
  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy > span {
    font-size: 12px !important;
  }

  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body:has(.mentee-overview-page)
  .mentee-overview-stat-copy strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .mentee-overview-page {
    padding-bottom:
      max(
        84px,
        calc(
          64px +
          env(safe-area-inset-bottom)
        )
      ) !important;
  }
}
/* =========================================================
   MENTEE PROFILE
   Production stylesheet for MenteeProfile.jsx.
   White canvas + dark neutral secondary + orange accents.
   No green/teal styling on this page.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE CANVAS
   --------------------------------------------------------- */

html:has(.mentee-profile-page),
body:has(.mentee-profile-page),
body:has(.mentee-profile-page) #root,
body:has(.mentee-profile-page) .dashboard-layout,
body:has(.mentee-profile-page) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentee-profile-page) .dashboard-content {
  min-height: 100vh !important;
}

body:has(.mentee-profile-page)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentee-profile-page)
.dashboard-content > header p,
body:has(.mentee-profile-page)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

body:has(.mentee-profile-page)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 600 !important;
}

.mentee-profile-page {
  width: 100%;
  min-width: 0;

  color: #101419;
  background: #ffffff;
}

/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.mentee-profile-form {
  display: grid;

  gap: 20px;

  width: 100%;
  min-width: 0;

  padding-bottom:
    max(
      72px,
      calc(
        52px +
        env(safe-area-inset-bottom)
      )
    );
}

/* ---------------------------------------------------------
   INTRO
   Icon intentionally removed from the JSX.
   --------------------------------------------------------- */

.mentee-profile-intro {
  display: block;

  width: 100%;
  min-width: 0;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff !important;
  background-image: none !important;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

/* Hide any old intro icon if stale markup is temporarily cached. */
.mentee-profile-intro-icon {
  display: none !important;
}

.mentee-profile-intro .eyebrow {
  display: block;

  margin-bottom: 7px;

  color: #ff5303 !important;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.mentee-profile-intro h2 {
  max-width: 900px;

  margin: 0 0 8px;

  color: #101419;

  font-size:
    clamp(
      23px,
      3vw,
      32px
    );
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.mentee-profile-intro p {
  max-width: 920px;

  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   SUCCESS / ERROR
   --------------------------------------------------------- */

.mentee-profile-success {
  display: flex;
  align-items: center;

  gap: 9px;

  margin: 0;
  padding: 13px 15px;

  border: 1px solid #ffcbc5;
  border-radius: 11px;

  color: #4c5867;
  background: #fffaf9;

  font-size: 12px;
  font-weight: 500;
}

.mentee-profile-success svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentee-profile-page .form-error {
  margin: 0;

  border: 1px solid #ffcbc5 !important;

  color: #832600 !important;
  background: #fff4f3 !important;
}

/* ---------------------------------------------------------
   SECTION CARDS
   --------------------------------------------------------- */

.mentee-profile-section {
  width: 100%;
  min-width: 0;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff !important;
  background-image: none !important;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

.mentee-profile-section-heading {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  margin-bottom: 22px;
}

.mentee-profile-section-heading > svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #ff5303 !important;
}

.mentee-profile-section-heading h3 {
  margin: 0 0 4px;

  color: #101419;

  font-size: 16px;
  font-weight: 650;
}

.mentee-profile-section-heading p {
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   TEXTAREA FIELDS
   Calm secondary focus treatment.
   --------------------------------------------------------- */

.mentee-profile-field {
  display: block;

  width: 100%;

  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.mentee-profile-field + .mentee-profile-field {
  margin-top: 18px;
}

.mentee-profile-field small {
  color: #6f8095;

  font-size: 10px;
  font-weight: 500;
}

.mentee-profile-field textarea {
  display: block;

  width: 100%;
  min-height: 120px;

  margin-top: 7px;
  padding: 13px 14px;

  border: 1px solid #c9d2df !important;
  border-radius: 10px;

  outline: none !important;

  color: #101419 !important;
  background: #ffffff !important;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;

  resize: vertical;

  box-shadow: none !important;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.mentee-profile-field textarea:hover {
  border-color: #97aac2 !important;
}

/*
   This intentionally overrides old global orange/teal
   textarea focus rules from index.css.
*/
.mentee-profile-page
.mentee-profile-field textarea:focus,
.mentee-profile-page
.mentee-profile-field textarea:focus-visible,
.mentee-profile-page
.mentee-profile-field textarea:active {
  border-color: #4c5867 !important;

  outline: none !important;

  color: #101419 !important;
  background: #ffffff !important;

  box-shadow:
    0 0 0 2px
    rgba(
      76,
      88,
      103,
      0.10
    ) !important;
}

.mentee-profile-field textarea::placeholder {
  color: #97aac2 !important;

  opacity: 1;
}

.mentee-profile-field textarea:disabled {
  color: #8794a4 !important;
  background: #f7f8fa !important;

  cursor: not-allowed;

  opacity: 1;
}

/* ---------------------------------------------------------
   MENTORSHIP AREA OPTIONS
   --------------------------------------------------------- */

.mentee-profile-options {
  margin: 0 0 18px;
  padding: 0;

  border: 0;
}

.mentee-profile-options legend {
  margin-bottom: 11px;

  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.mentee-profile-checkbox-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}

.mentee-profile-checkbox-grid label,
.mentee-profile-agreements label {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  min-width: 0;
  padding: 12px;

  border: 1px solid #e4e8ef !important;
  border-radius: 10px;

  color: #4c5867 !important;
  background: #ffffff !important;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.mentee-profile-checkbox-grid label:hover,
.mentee-profile-agreements label:hover {
  border-color: #c9d2df !important;

  background: #f8f9fb !important;
}

/* Selected states use soft orange instead of teal/green. */
.mentee-profile-checkbox-grid
label:has(input:checked),
.mentee-profile-agreements
label:has(input:checked) {
  border-color: #ffcbc5 !important;

  color: #2d353f !important;
  background: #fffaf9 !important;
}

.mentee-profile-checkbox-grid input,
.mentee-profile-agreements input {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  margin: 1px 0 0;

  accent-color: #ff5303 !important;
}

/* Calm keyboard focus without bright orange/teal rings. */
.mentee-profile-checkbox-grid
input:focus-visible,
.mentee-profile-agreements
input:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.28
    ) !important;

  outline-offset: 2px !important;
}

.mentee-profile-agreements {
  display: grid;

  gap: 10px;
}

/* ---------------------------------------------------------
   ACTION
   --------------------------------------------------------- */

.mentee-profile-actions {
  display: flex;
  justify-content: flex-end;

  padding-bottom: 10px;
}

.mentee-profile-actions
.mentee-profile-button,
.mentee-profile-actions
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  min-height: 42px;

  padding: 0 16px;

  border: 1px solid #ff5303 !important;
  border-radius: 9px;

  color: #ffffff !important;
  background: #ff5303 !important;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;

  box-shadow: none !important;
  transform: none !important;

  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    opacity 160ms ease;
}

.mentee-profile-actions
.mentee-profile-button:hover:not(:disabled),
.mentee-profile-actions
.primary-button:hover:not(:disabled) {
  border-color: #c13c00 !important;

  color: #ffffff !important;
  background: #c13c00 !important;

  box-shadow: none !important;
  transform: none !important;
}

.mentee-profile-actions
.mentee-profile-button:focus-visible,
.mentee-profile-actions
.primary-button:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.26
    ) !important;

  outline-offset: 2px;
}

.mentee-profile-actions
.mentee-profile-button:disabled,
.mentee-profile-actions
.primary-button:disabled {
  border-color: #dfe4eb !important;

  color: #97aac2 !important;
  background: #eef1f5 !important;

  cursor: not-allowed;

  opacity: 1;
}

/* ---------------------------------------------------------
   LOADING STATE
   --------------------------------------------------------- */

.mentee-profile-page
.dashboard-empty-state {
  min-height: 320px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff !important;
}

.mentee-profile-page
.dashboard-empty-state h2 {
  color: #101419;
}

.mentee-profile-page
.dashboard-empty-state p {
  color: #4c5867;
}

.mentee-profile-page .loader {
  border-color: #e4e8ef;
  border-top-color: #ff5303;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .mentee-profile-form {
    gap: 18px;
  }
}

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

@media (max-width: 700px) {
  .mentee-profile-intro,
  .mentee-profile-section {
    padding: 20px;

    border-radius: 14px;
  }

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

  .mentee-profile-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mentee-profile-actions
  .mentee-profile-button,
  .mentee-profile-actions
  .primary-button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .mentee-profile-intro,
  .mentee-profile-section {
    padding: 18px;
  }

  .mentee-profile-field textarea {
    min-height: 112px;
  }
}
/* =========================================================
   MENTEE REQUEST FLOW
   Shared production styles for:
   FindMentor.jsx -> MentorProfile.jsx -> RequestMentorship.jsx
   Find mentor -> View profile -> Send request -> Success modal
   White canvas + neutral secondary + orange primary.
   ========================================================= */

html:has(.mentee-request-flow),
body:has(.mentee-request-flow),
body:has(.mentee-request-flow) #root,
body:has(.mentee-request-flow) .dashboard-layout,
body:has(.mentee-request-flow) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentee-request-flow) .dashboard-content {
  min-height: 100vh !important;
}

.mentee-request-flow {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 52px;
  color: #101419;
}

.request-flow-screen {
  display: grid;
  gap: 20px;
}

.request-flow-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
  padding: 14px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #f8f9fb;
}

.request-flow-progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #6f8095;
}

.request-flow-progress-item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid #c9d2df;
  border-radius: 50%;
  color: #6f8095;
  background: #ffffff;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
}

.request-flow-progress-item small {
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-flow-progress-item.is-active {
  color: #101419;
}

.request-flow-progress-item.is-active > span {
  border-color: #ff5303;
  color: #ffffff;
  background: #ff5303;
}

.request-flow-progress-item.is-complete {
  color: #2d353f;
}

.request-flow-progress-item.is-complete > span {
  border-color: #ff9788;
  color: #ff5303;
  background: #ffffff;
}

.request-flow-progress-item.is-complete > span svg {
  color: #ff5303;
}

.request-flow-intro,
.request-flow-request-heading {
  max-width: 760px;
}

.request-flow-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #ff5303;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.request-flow-intro h2,
.request-flow-request-heading h2,
.request-flow-profile-hero h2,
.request-flow-panel h3 {
  margin: 0;
  color: #101419;
  letter-spacing: -0.025em;
}

.request-flow-intro h2,
.request-flow-request-heading h2 {
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.18;
}

.request-flow-intro p,
.request-flow-request-heading p,
.request-flow-profile-hero p,
.request-flow-panel > p {
  margin: 8px 0 0;
  color: #4c5867;
  font-size: 13px;
  line-height: 1.65;
}

.request-flow-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid #c9d2df;
  border-radius: 11px;
  background: #ffffff;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.request-flow-search svg {
  flex: 0 0 auto;
  color: #6f8095;
}

.request-flow-search:focus-within {
  border-color: #4c5867;
  box-shadow: 0 0 0 2px rgba(76, 88, 103, 0.12);
}

.request-flow-search:focus-within svg {
  color: #ff5303;
}

.request-flow-search input,
.request-flow-search input:hover,
.request-flow-search input:focus,
.request-flow-search input:focus-visible,
.request-flow-search input:active {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  color: #101419;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 13px;
  caret-color: #ff5303;
}

.request-flow-search input::placeholder {
  color: #97aac2;
}

.request-flow-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.request-flow-mentor-card,
.request-flow-panel,
.request-flow-selected-mentor,
.request-flow-form,
.request-flow-profile-hero {
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(16, 20, 25, 0.035);
}

.request-flow-mentor-card {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.request-flow-mentor-card-top,
.request-flow-profile-main,
.request-flow-selected-mentor-main {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
}

.request-flow-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
  color: #101419;
  background: #f3f5f7;
  font-size: 12px;
  font-weight: 700;
}

.request-flow-avatar--large {
  flex-basis: 66px;
  width: 66px;
  height: 66px;
  border-radius: 16px;
  font-size: 16px;
}

.request-flow-approved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c13c00;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.request-flow-mentor-card h3,
.request-flow-profile-hero h2 {
  margin: 7px 0 3px;
}

.request-flow-mentor-card h3 {
  color: #101419;
  font-size: 17px;
}

.request-flow-mentor-card p,
.request-flow-profile-hero p {
  color: #6f8095;
  font-size: 12px;
}

.request-flow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.request-flow-tags span {
  padding: 6px 9px;
  border: 1px solid #e4e8ef;
  border-radius: 999px;
  color: #4c5867;
  background: #f8f9fb;
  font-size: 10px;
  font-weight: 500;
}

.request-flow-mentor-meta {
  display: grid;
  gap: 8px;
  color: #4c5867;
  font-size: 11px;
}

.request-flow-mentor-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.request-flow-mentor-meta svg,
.request-flow-detail > svg,
.request-flow-session-length > svg,
.request-flow-availability svg {
  flex: 0 0 auto;
  color: #ff5303;
}

.request-flow-primary-button,
.request-flow-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.request-flow-primary-button {
  border: 1px solid #ff5303;
  color: #ffffff;
  background: #ff5303;
}

.request-flow-primary-button:hover:not(:disabled) {
  border-color: #c13c00;
  background: #c13c00;
}

.request-flow-primary-button:disabled {
  border-color: #dfe4eb;
  color: #97aac2;
  background: #eef1f5;
  cursor: not-allowed;
}

.request-flow-secondary-button {
  border: 1px solid #c9d2df;
  color: #2d353f;
  background: #ffffff;
}

.request-flow-secondary-button:hover:not(:disabled) {
  border-color: #97aac2;
  color: #101419;
  background: #f7f8fa;
}

.request-flow-view-profile-primary {
  justify-self: flex-start;
  border-color: #ff5303 !important;
  color: #ffffff !important;
  background: #ff5303 !important;
}

.request-flow-view-profile-primary:hover {
  border-color: #c13c00 !important;
  background: #c13c00 !important;
}

.request-flow-back,
.request-flow-top-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  justify-self: flex-start;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #4c5867;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.request-flow-back:hover,
.request-flow-top-back:hover {
  border-color: #e4e8ef;
  color: #101419;
  background: #f8f9fb;
}

.request-flow-back svg,
.request-flow-top-back svg {
  color: #6f8095;
}

.request-flow-top-back {
  margin: 0 0 12px;
}

.request-flow-profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.request-flow-profile-action {
  display: grid;
  justify-items: end;
  gap: 10px;
  flex-shrink: 0;
}

.request-flow-profile-action > span {
  color: #4c5867;
  font-size: 11px;
  font-weight: 500;
}

.request-flow-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.request-flow-stat-grid article {
  display: grid;
  gap: 5px;
  padding: 17px;
  border: 1px solid #e4e8ef;
  border-radius: 13px;
  background: #ffffff;
}

.request-flow-stat-grid svg {
  color: #ff5303;
}

.request-flow-stat-grid strong {
  color: #101419;
  font-size: 18px;
}

.request-flow-stat-grid span {
  color: #6f8095;
  font-size: 10px;
}

.request-flow-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.request-flow-panel {
  padding: 22px;
}

.request-flow-panel h3 {
  font-size: 19px;
}

.request-flow-detail,
.request-flow-session-length {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #eef1f5;
}

.request-flow-detail > div,
.request-flow-session-length > div {
  min-width: 0;
}

.request-flow-detail small,
.request-flow-session-length small {
  display: block;
  margin-bottom: 5px;
  color: #6f8095;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.request-flow-detail strong,
.request-flow-session-length strong {
  color: #101419;
  font-size: 12px;
}

.request-flow-availability {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.request-flow-availability span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  color: #4c5867;
  background: #fbfcfd;
  font-size: 11px;
}

.request-flow-bottom-action {
  display: flex;
  justify-content: flex-end;
}

.request-flow-selected-mentor {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 17px 19px;
}

.request-flow-selected-mentor small {
  display: block;
  margin-bottom: 4px;
  color: #6f8095;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.request-flow-selected-mentor strong {
  display: block;
  color: #101419;
  font-size: 14px;
  font-weight: 600;
}

.request-flow-selected-mentor div > span {
  color: #6f8095;
  font-size: 11px;
}

.request-flow-form {
  display: grid;
  gap: 20px;
  padding: 22px;
}

.request-flow-form label {
  display: grid;
  gap: 8px;
}

.request-flow-form label > span {
  color: #101419;
  font-size: 12px;
  font-weight: 600;
}

.request-flow-form label > span b {
  margin-left: 3px;
  color: #ff5303;
}

.request-flow-form label > span em {
  margin-left: 7px;
  color: #8794a4;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.request-flow-form input,
.request-flow-form select,
.request-flow-form textarea {
  width: 100%;
  border: 1px solid #c9d2df;
  border-radius: 10px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.request-flow-form input {
  min-height: 44px;
  padding: 0 13px;
}

.request-flow-form select {
  min-height: 44px;
  padding: 0 44px 0 13px;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}

.request-flow-form textarea {
  min-height: 104px;
  padding: 12px 13px;
  resize: vertical;
  line-height: 1.6;
}

.request-flow-form input:focus,
.request-flow-form select:focus,
.request-flow-form textarea:focus,
.request-flow-form input:focus-visible,
.request-flow-form select:focus-visible,
.request-flow-form textarea:focus-visible {
  border: 1px solid #4c5867;
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(76, 88, 103, 0.12);
}

.request-flow-form input::placeholder,
.request-flow-form textarea::placeholder {
  color: #97aac2;
  opacity: 1;
}

.request-flow-form label > small,
.request-flow-field-footer small {
  color: #6f8095;
  font-size: 10px;
  line-height: 1.5;
}

.request-flow-select-wrap {
  position: relative;
  width: 100%;
}

.request-flow-select-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 2;
  color: #4c5867;
  pointer-events: none;
  transform: translateY(-50%);
}

.request-flow-field-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.request-flow-field-footer > span {
  flex-shrink: 0;
  color: #832600;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.request-flow-field-footer > span.is-complete {
  color: #4c5867;
}

.request-flow-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #ffcbc5;
  border-radius: 11px;
  color: #4c5867;
  background: #fffaf9;
}

.request-flow-note svg {
  flex: 0 0 auto;
  color: #ff5303;
}

.request-flow-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.request-flow-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 4px;
}

.request-flow-submit-hint {
  max-width: 560px;
  margin: 0;
  color: #6f8095;
  font-size: 10px;
  line-height: 1.55;
}

.request-flow-submit-hint.is-ready {
  color: #4c5867;
}

.request-flow-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-shrink: 0;
}

.request-success-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 4, 5, 0.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.request-success-modal {
  width: min(100%, 520px);
  padding: 28px;
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(3, 4, 5, 0.20);
  animation: request-success-modal-in 180ms ease-out both;
}

@keyframes request-success-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.request-success-modal-copy .request-flow-eyebrow {
  margin-top: 0;
  margin-bottom: 7px;
}

.request-success-modal-copy h2 {
  margin: 0;
  color: #101419;
  font-size: clamp(23px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.request-success-modal-copy p {
  margin: 9px 0 0;
  color: #4c5867;
  font-size: 12px;
  line-height: 1.65;
}

.request-success-modal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid #eef1f5;
  border-radius: 12px;
  background: #fbfcfd;
}

.request-success-modal-summary > div {
  min-width: 0;
}

.request-success-modal-summary small {
  display: block;
  margin-bottom: 5px;
  color: #6f8095;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.request-success-modal-summary strong {
  display: block;
  overflow: hidden;
  color: #101419;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-success-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.request-success-modal-actions .request-flow-primary-button,
.request-success-modal-actions .request-flow-secondary-button {
  min-width: 140px;
}

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

@media (max-width: 760px) {
  .request-flow-directory-grid {
    grid-template-columns: 1fr;
  }

  .request-flow-profile-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .request-flow-profile-action {
    width: 100%;
    justify-items: stretch;
  }

  .request-flow-profile-action .request-flow-primary-button {
    width: 100%;
  }

  .request-flow-stat-grid {
    grid-template-columns: 1fr;
  }

  .request-flow-submit-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .request-flow-field-footer {
    flex-direction: column;
    gap: 4px;
  }

  .request-flow-form-actions {
    width: 100%;
  }

  .request-flow-form-actions button {
    flex: 1;
  }
}

@media (max-width: 620px) {
  .mentee-request-flow {
    padding-bottom: 36px;
  }

  .request-flow-progress {
    gap: 6px;
    padding: 10px;
  }

  .request-flow-progress-item {
    justify-content: center;
    gap: 6px;
  }

  .request-flow-progress-item > span {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
  }

  .request-flow-progress-item small {
    display: none;
  }

  .request-flow-mentor-card,
  .request-flow-panel,
  .request-flow-form,
  .request-flow-profile-hero,
  .request-flow-selected-mentor {
    border-radius: 14px;
  }

  .request-flow-profile-hero,
  .request-flow-form,
  .request-flow-panel,
  .request-flow-mentor-card {
    padding: 18px;
  }

  .request-flow-form input:focus,
  .request-flow-form select:focus,
  .request-flow-form textarea:focus,
  .request-flow-form input:focus-visible,
  .request-flow-form select:focus-visible,
  .request-flow-form textarea:focus-visible {
    box-shadow: 0 0 0 1.5px rgba(76, 88, 103, 0.10);
  }

  .request-success-modal-backdrop {
    align-items: flex-end;
    padding: 12px;
  }

  .request-success-modal {
    width: 100%;
    padding: 22px;
    border-radius: 18px 18px 14px 14px;
  }

  .request-success-modal-summary {
    grid-template-columns: 1fr;
  }

  .request-success-modal-actions {
    flex-direction: column-reverse;
  }

  .request-success-modal-actions button {
    width: 100%;
  }
}
/* =========================================================
   FIND MENTOR SEARCH-FIRST ADDITIONS
   Imported after MenteeRequestFlow.css
   ========================================================= */

.request-flow-search-empty {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #fbfcfd;
}

.request-flow-search-empty > svg {
  flex: 0 0 auto;
  color: #ff5303;
}

.request-flow-search-empty h3 {
  margin: 0 0 5px;
  color: #101419;
  font-size: 15px;
  font-weight: 650;
}

.request-flow-search-empty p {
  max-width: 620px;
  margin: 0;
  color: #6f8095;
  font-size: 12px;
  line-height: 1.6;
}

.request-flow-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}

.request-flow-result-summary span {
  color: #6f8095;
  font-size: 11px;
  font-weight: 600;
}

.request-flow-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.request-flow-pagination > span {
  color: #6f8095;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .request-flow-search input {
    font-size: 16px !important;
  }

  .request-flow-pagination {
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  .request-flow-search-empty {
    padding: 18px;
  }

  .request-flow-pagination {
    gap: 8px;
  }

  .request-flow-pagination
  .request-flow-secondary-button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 11px;
  }
}
/* =========================================================
   MENTOR PROFILE
   Relationship-aware additions only.
   Existing profile layout remains in the global stylesheet.
   ========================================================= */

/* Status surfaces stay clean. They are not filled status pills. */

.mentor-profile-availability.relationship-accepted {
  border-color: #cde6d5 !important;
  color: #2f7d4a !important;
  background: #ffffff !important;
}

.mentor-profile-availability.relationship-pending {
  border-color: #ead8b5 !important;
  color: #b56a00 !important;
  background: #ffffff !important;
}

.mentor-profile-availability.relationship-declined {
  border-color: #ecd0d4 !important;
  color: #a63d46 !important;
  background: #ffffff !important;
}

.mentor-profile-availability.relationship-referred {
  border-color: #bcded6 !important;
  color: #087967 !important;
  background: #ffffff !important;
}

.mentor-profile-availability.relationship-withdrawn,
.mentor-profile-availability.relationship-unavailable {
  border-color: #e4e8ef !important;
  color: #6f8095 !important;
  background: #ffffff !important;
}

.mentor-profile-availability.relationship-available {
  border-color: #e4e8ef !important;
  color: #c13c00 !important;
  background: #ffffff !important;
}

.mentor-profile-referred-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 170px;
  padding: 0 16px;

  border: 1px solid #9fcfc4;
  border-radius: 9px;

  color: #087967;
  background: #ffffff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.mentor-profile-referred-action:hover {
  border-color: #6fb6a6;
  color: #066454;
  background: #f4fbf9;

  box-shadow:
    0 4px 12px
    rgba(8, 121, 103, 0.10);

  transform: translateY(-1px);
}

.mentor-profile-referred-action:active {
  box-shadow: none;
  transform: translateY(0);
}

/*
   Keep profile actions compact on phone/tablet when they fit.
   Do not force every action to become full-width.
*/
@media (max-width: 600px) {
  .mentor-profile-actions {
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .mentor-profile-actions .primary-button,
  .mentor-profile-actions .secondary-button,
  .mentor-profile-referred-action {
    width: auto !important;
    min-width: 0 !important;
  }
}
/* =========================================================
   MY REQUESTS
   Final production styles from the approved filled-state UI.
   White canvas + neutral secondary + orange primary.
   ========================================================= */

.mentee-requests-page {
  width: 100%;
  min-width: 0;

  color: #101419;
  background: #ffffff;
}

html:has(.mentee-requests-page),
body:has(.mentee-requests-page),
body:has(.mentee-requests-page) #root,
body:has(.mentee-requests-page)
.dashboard-layout,
body:has(.mentee-requests-page)
.dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentee-requests-page)
.dashboard-content {
  min-height: 100vh !important;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

body:has(.mentee-requests-page)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentee-requests-page)
.dashboard-content > header p,
body:has(.mentee-requests-page)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

body:has(.mentee-requests-page)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   INLINE ERROR
   --------------------------------------------------------- */

.mentee-request-inline-error {
  margin-bottom: 16px;
  padding: 11px 14px;

  border: 1px solid #ffcbc5;
  border-radius: 10px;

  color: #832600;
  background: #fff4f3;

  font-size: 12px;
  font-weight: 500;
}

/* ---------------------------------------------------------
   EMPTY / LOADING / ERROR STATE
   --------------------------------------------------------- */

.mentee-request-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  min-height: 380px;

  padding: 52px 26px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  color: #101419;

  background:
    linear-gradient(
      180deg,
      #fbfcfd 0%,
      #f7f8fa 100%
    );

  text-align: center;

  box-shadow:
    0 10px 30px
    rgba(16, 20, 25, 0.025);
}

.mentee-request-state-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom: 18px;

  border: 1px solid #ffe5e3;
  border-radius: 15px;

  color: #ff5303;
  background: #fff4f3;
}

.mentee-request-state h2 {
  margin: 0 0 8px;

  color: #101419;

  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
}

.mentee-request-state p {
  max-width: 520px;
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

.mentee-request-state
.mentee-request-button {
  margin-top: 22px;
}

.mentee-request-empty {
  margin-top: 34px;
}

/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.mentee-request-summary {
  margin-bottom: 20px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

.mentee-request-summary .eyebrow {
  color: #ff5303;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.mentee-request-summary h2 {
  max-width: 620px;

  margin: 8px 0;

  color: #101419;

  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.mentee-request-summary p {
  max-width: 680px;
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   FILTER TABS
   --------------------------------------------------------- */

.mentee-request-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 20px;
}

.mentee-request-tabs button {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  min-height: 36px;

  padding: 0 13px;

  border: 1px solid #dfe4eb;
  border-radius: 999px;

  color: #4c5867;
  background: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  box-shadow: none;
  transform: none;

  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.mentee-request-tabs button span {
  display: grid;
  place-items: center;

  min-width: 21px;
  height: 21px;

  padding: 0 6px;

  border-radius: 999px;

  color: #4c5867;
  background: #eef1f5;

  font-size: 10px;
  font-weight: 600;
}

.mentee-request-tabs button:hover {
  border-color: #ffb4aa;

  color: #c13c00;
  background: #fffaf9;
}

.mentee-request-tabs button.active {
  border-color: #ff5303;

  color: #ffffff;
  background: #ff5303;
}

.mentee-request-tabs button.active span {
  color: #832600;
  background: #ffffff;
}

/* ---------------------------------------------------------
   REQUEST LIST
   --------------------------------------------------------- */

.mentee-request-list {
  display: grid;

  gap: 14px;
}

.mentee-request-card {
  overflow: hidden;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.035);
}

.mentee-request-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding: 20px 20px 17px;

  background: #ffffff;
}

.mentee-request-mentor {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}

.mentee-request-avatar {
  display: grid;
  place-items: center;

  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  color: #101419;
  background: #f3f5f7;

  object-fit: cover;

  font-size: 13px;
  font-weight: 650;
}

.mentee-request-mentor small,
.mentee-request-goal small {
  color: #6f8095;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.mentee-request-mentor h2 {
  margin: 3px 0 2px;

  color: #101419;

  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}

.mentee-request-mentor p {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   STATUS BADGES
   --------------------------------------------------------- */

.mentee-request-status {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 0 10px;

  border: 1px solid #e4e8ef;
  border-radius: 999px;

  color: #4c5867;
  background: #f7f8fa;

  font-size: 10px;
  font-weight: 500;

  white-space: nowrap;
}

.mentee-request-status.status-pending {
  border-color: #ffcbc5;

  color: #c13c00;
  background: #fff4f3;
}

.mentee-request-status.status-accepted {
  border-color: #c9d2df;

  color: #101419;
  background: #eef1f5;
}

.mentee-request-status.status-clarification-requested {
  border-color: #ffb4aa;

  color: #832600;
  background: #fff4f3;
}

.mentee-request-status.status-referred {
  border-color: #c9d2df;

  color: #2d353f;
  background: #eef1f5;
}

.mentee-request-status.status-declined,
.mentee-request-status.status-withdrawn {
  border-color: #dfe4eb;

  color: #6f8095;
  background: #f7f8fa;
}

/* ---------------------------------------------------------
   CARD BODY
   --------------------------------------------------------- */

.mentee-request-card-body {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(240px, 0.7fr);

  gap: 18px;

  padding: 18px 20px;

  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5;

  background: #fbfcfd;
}

.mentee-request-details {
  display: grid;

  gap: 16px;

  min-width: 0;
}

.mentee-request-goal p {
  margin: 7px 0 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

.mentee-request-meta {
  display: grid;

  align-content: start;

  gap: 12px;
}

.mentee-request-submitted {
  display: flex;
  align-items: center;

  gap: 7px;

  color: #6f8095;

  font-size: 11px;
  font-weight: 500;
}

.mentee-request-submitted svg {
  color: #ff5303;
}

.mentee-request-status-copy {
  display: grid;

  gap: 4px;

  padding: 12px 14px;

  border: 1px solid #eef1f5;
  border-radius: 10px;

  color: #101419;
  background: #ffffff;
}

.mentee-request-status-copy strong {
  color: #101419;

  font-size: 12px;
  font-weight: 650;
}

.mentee-request-status-copy small {
  color: #6f8095;

  font-size: 11px;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.mentee-request-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 14px 20px;

  background: #ffffff;
}

.mentee-request-card-actions > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}

.mentee-request-text-button {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 34px;

  padding: 0;

  border: 0;

  color: #4c5867;
  background: transparent;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
}

.mentee-request-text-button:hover {
  color: #101419;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.mentee-request-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 42px;

  padding: 0 16px;

  border-radius: 10px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;

  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.mentee-request-button--primary {
  border: 1px solid #ff5303;

  color: #ffffff;
  background: #ff5303;
}

.mentee-request-button--primary:hover {
  border-color: #c13c00;

  background: #c13c00;
}

.mentee-request-button--secondary {
  border: 1px solid #c9d2df;

  color: #101419;
  background: #ffffff;
}

.mentee-request-button--secondary:hover {
  border-color: #97aac2;

  background: #f7f8fa;
}

.mentee-request-button--withdraw {
  border: 1px solid #101419;
  border-radius: 9px;

  color: #ffffff;
  background: #101419;
}

.mentee-request-button--withdraw:hover {
  border-color: #2d353f;

  background: #2d353f;
}

.mentee-request-button--danger {
  border: 1px solid #832600;

  color: #ffffff;
  background: #832600;
}

.mentee-request-button--danger:hover {
  border-color: #4b1200;

  background: #4b1200;
}

.mentee-request-button:disabled {
  cursor: not-allowed;

  opacity: 0.56;
}

/* ---------------------------------------------------------
   FILTER EMPTY
   --------------------------------------------------------- */

.mentee-request-filter-empty {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  color: #4c5867;
  background: #f8f9fb;
}

.mentee-request-filter-empty svg {
  color: #ff5303;
}

.mentee-request-filter-empty h3 {
  margin: 0 0 3px;

  color: #101419;

  font-size: 14px;
  font-weight: 650;
}

.mentee-request-filter-empty p {
  margin: 0;

  font-size: 12px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   WITHDRAW MODAL
   --------------------------------------------------------- */

.mentee-request-modal-backdrop {
  position: fixed;

  inset: 0;
  z-index: 250;

  display: grid;
  place-items: center;

  padding: 20px;

  background:
    rgba(3, 4, 5, 0.56);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mentee-request-modal {
  width: min(460px, 100%);

  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 26px 70px
    rgba(3, 4, 5, 0.24);
}

.mentee-request-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 18px;
}

.mentee-request-modal-top > span {
  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.mentee-request-modal-top button {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;
  background: #ffffff;

  cursor: pointer;
}

.mentee-request-modal h2 {
  margin: 0 0 10px;

  color: #101419;

  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
}

.mentee-request-modal p {
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

.mentee-request-modal p strong {
  color: #101419;
}

.mentee-request-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 22px;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 820px) {
  .mentee-request-card-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .mentee-request-empty {
    margin-top: 20px;
  }

  .mentee-request-summary {
    padding: 20px;
    border-radius: 14px;
  }

  .mentee-request-summary h2 {
    font-size: 21px;
  }

  .mentee-request-card {
    border-radius: 14px;
  }

  .mentee-request-card-top,
  .mentee-request-card-body,
  .mentee-request-card-actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .mentee-request-card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentee-request-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mentee-request-card-actions > div {
    width: 100%;
  }

  .mentee-request-card-actions
  .mentee-request-button {
    width: 100%;
  }

  .mentee-request-text-button {
    align-self: flex-start;
  }

  .mentee-request-modal-actions {
    flex-direction: column-reverse;
  }

  .mentee-request-modal-actions
  .mentee-request-button {
    width: 100%;
  }
}


/* =========================================================
   WITHDRAWAL REASON
   ========================================================= */

.mentee-request-modal-reason {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.mentee-request-modal-reason > span {
  color: #2d353f;
  font-size: 10px;
  font-weight: 600;
}

.mentee-request-modal-reason textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 11px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}

.mentee-request-modal-reason textarea:focus,
.mentee-request-modal-reason textarea:focus-visible {
  border-color: #4c5867;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10);
}

.mentee-request-modal-reason > small {
  color: #8794a4;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .mentee-request-modal-reason textarea {
    font-size: 16px;
  }
}
/* =========================================================
   MY REQUESTS TABLE + PAGINATION
   Imported after MenteeRequests.css.
   Desktop/tablet uses table. Mobile uses compact cards.
   ========================================================= */

.mentee-request-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
}

.mentee-request-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.mentee-request-table th,
.mentee-request-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f5;
  text-align: left;
  vertical-align: middle;
}

.mentee-request-table th {
  color: #6f8095;
  background: #fbfcfd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mentee-request-table td {
  color: #2d353f;
  font-size: 12px;
}

.mentee-request-table tbody tr:last-child td {
  border-bottom: 0;
}

.mentee-request-table tbody tr:hover {
  background: #fcfcfd;
}

.mentee-request-table-mentor {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 180px;
}

.mentee-request-table-mentor img,
.mentee-request-table-mentor > span {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  background: #f3f5f7;
  color: #101419;
  object-fit: cover;
  font-size: 10px;
  font-weight: 700;
}

.mentee-request-table-mentor strong {
  color: #101419;
  font-size: 12px;
  font-weight: 600;
}

.mentee-request-table-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.mentee-request-table-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0;
  border: 0;
  color: #4c5867;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.mentee-request-table-link:hover {
  color: #101419;
}

.mentee-request-table-link.is-withdraw {
  color: #832600;
}

.mentee-request-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.mentee-request-pagination > span {
  color: #6f8095;
  font-size: 11px;
  font-weight: 600;
}

.mentee-request-mobile-list {
  display: none;
}

@media (max-width: 720px) {
  .mentee-request-table-wrapper {
    display: none;
  }

  .mentee-request-mobile-list {
    display: grid;
    gap: 12px;
  }

  .mentee-request-mobile-card {
    padding: 16px;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    background: #ffffff;
  }

  .mentee-request-mobile-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .mentee-request-mobile-card-top small {
    color: #6f8095;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
  }

  .mentee-request-mobile-card-top h3 {
    margin: 4px 0 2px;
    color: #101419;
    font-size: 15px;
    font-weight: 650;
  }

  .mentee-request-mobile-card-top p {
    margin: 0;
    color: #4c5867;
    font-size: 11px;
  }

  .mentee-request-mobile-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: #6f8095;
    font-size: 10px;
  }

  .mentee-request-mobile-meta svg {
    color: #ff5303;
  }

  .mentee-request-mobile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
  }

  .mentee-request-pagination {
    justify-content: space-between;
  }

  .mentee-request-pagination
  .mentee-request-button {
    width: auto !important;
    min-height: 40px;
    padding: 0 12px;
    font-size: 11px;
  }
}


/* =========================================================
   ACCEPTED REQUEST MESSAGE ACTION
   ========================================================= */

.mentee-request-table-link.is-message {
  color: #c13c00;
  font-weight: 600;
}

.mentee-request-table-link.is-message:hover {
  color: #8f2d00;
  background: #fff7f3;
}
/* =========================================================
   MENTEE REQUEST DETAILS
   Negative action reasons + withdrawal reason field.
   ========================================================= */

.mentee-request-outcome-reason {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #fbfcfd;
}

.mentee-request-outcome-reason h3 {
  margin: 0;
  color: #101419;
  font-size: 15px;
  font-weight: 650;
}

.mentee-request-outcome-reason p {
  margin: 8px 0 0;
  color: #4c5867;
  font-size: 11px;
  line-height: 1.7;
}

.mentee-request-withdraw-reason {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.mentee-request-withdraw-reason > span {
  color: #2d353f;
  font-size: 10px;
  font-weight: 600;
}

.mentee-request-withdraw-reason textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 11px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}

.mentee-request-withdraw-reason textarea:focus,
.mentee-request-withdraw-reason textarea:focus-visible {
  border-color: #4c5867;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10);
}

.mentee-request-withdraw-reason > small {
  color: #8794a4;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .mentee-request-withdraw-reason textarea {
    font-size: 16px;
  }
}
/* =========================================================
   MENTEE SESSIONS
   Complete replacement file.
   Approved filled-state design:
   white canvas + neutral secondary styling + orange accents.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE CANVAS
   --------------------------------------------------------- */

html:has(.mentee-sessions-summary),
body:has(.mentee-sessions-summary),
body:has(.mentee-sessions-summary) #root,
body:has(.mentee-sessions-summary) .dashboard-layout,
body:has(.mentee-sessions-summary) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentee-sessions-summary) .dashboard-content {
  min-height: 100vh !important;
}

body:has(.mentee-sessions-summary)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentee-sessions-summary)
.dashboard-content > header p,
body:has(.mentee-sessions-summary)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

body:has(.mentee-sessions-summary)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.mentee-sessions-summary {
  display: block;

  width: 100%;
  min-width: 0;

  margin-bottom: 18px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.025);
}

.mentee-sessions-summary .eyebrow,
.mentee-session-calendar-heading .eyebrow {
  color: #ff5303;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.mentee-sessions-summary h2 {
  max-width: 660px;

  margin: 8px 0 8px;

  color: #101419;

  font-size: 24px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.mentee-sessions-summary p {
  max-width: 720px;
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   INLINE ERROR
   --------------------------------------------------------- */

.mentee-session-inline-error {
  margin-bottom: 14px;
  padding: 10px 13px;

  border: 1px solid #ffcbc5;
  border-radius: 10px;

  color: #832600;
  background: #fff4f3;

  font-size: 12px;
  font-weight: 500;
}

/* ---------------------------------------------------------
   ACCEPTED REQUEST / READY TO SCHEDULE
   --------------------------------------------------------- */

.mentee-session-ready-list {
  display: grid;

  gap: 12px;

  margin-bottom: 18px;
}

.mentee-session-ready-card {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 18px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentee-session-ready-icon {
  display: grid;
  place-items: center;

  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border: 1px solid #ffe5e3;
  border-radius: 12px;

  color: #ff5303;
  background: #fff4f3;
}

.mentee-session-ready-card > div {
  min-width: 0;
}

.mentee-session-ready-card small {
  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentee-session-ready-card h3 {
  margin: 5px 0 6px;

  color: #101419;

  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

.mentee-session-ready-card p {
  max-width: 680px;

  margin: 0 0 14px;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

.mentee-session-tabs {
  display: flex;
  align-items: center;

  gap: 6px;

  width: fit-content;
  max-width: 100%;

  margin-bottom: 18px;
  padding: 4px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #f8f9fb;
}

.mentee-session-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 38px;
  padding: 0 13px;

  border: 0;
  border-radius: 9px;

  color: #4c5867;
  background: transparent;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;

  cursor: pointer;
}

.mentee-session-tabs button span {
  display: grid;
  place-items: center;

  min-width: 22px;
  height: 22px;

  padding: 0 6px;

  border-radius: 999px;

  color: #4c5867;
  background: #e4e8ef;

  font-size: 10px;
  font-weight: 600;
}

.mentee-session-tabs button.active {
  color: #ffffff;
  background: #101419;
}

.mentee-session-tabs button.active span {
  color: #101419;
  background: #ffffff;
}

/* ---------------------------------------------------------
   SESSION + CALENDAR WORKSPACE
   --------------------------------------------------------- */

.mentee-session-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(300px, 0.75fr);

  align-items: start;

  gap: 18px;

  width: 100%;
  min-width: 0;
}

.mentee-session-main-column {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.mentee-session-main-column > .mentee-session-empty-state {
  width: 100%;
  min-height: 0;
  height: auto;
}

/* ---------------------------------------------------------
   PAGED SESSION SHELL
   One session card at a time + pagination footer.
   --------------------------------------------------------- */

.mentee-session-paged-shell {
  overflow: hidden;

  width: 100%;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.035);
}

.mentee-session-paged-shell
.mentee-session-card--paginated {
  margin: 0;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}

.mentee-session-pagination {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 14px 18px;

  border-top: 1px solid #eef1f5;

  background: #fbfcfd;
}

.mentee-session-pagination-pages {
  display: flex;
  align-items: center;

  gap: 6px;
}

.mentee-session-pagination button {
  appearance: none;
  -webkit-appearance: none;

  min-width: 34px;
  min-height: 34px;

  padding: 0 10px;

  border: 1px solid #dfe4eb;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
}

.mentee-session-pagination button:hover:not(:disabled) {
  border-color: #97aac2;

  color: #101419;
  background: #f7f8fa;
}

.mentee-session-pagination-pages button.active {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.mentee-session-pagination button:disabled {
  color: #97aac2;
  background: #f7f8fa;

  cursor: not-allowed;
  opacity: 0.65;
}

.mentee-session-pagination-nav {
  min-width: 76px !important;
}

/* ---------------------------------------------------------
   SESSION CARD
   --------------------------------------------------------- */

.mentee-session-card {
  width: 100%;
  min-width: 0;

  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentee-session-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 18px;
}

.mentee-session-mentor {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}

.mentee-session-avatar {
  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  border-radius: 12px;

  object-fit: cover;
}

.mentee-session-initials {
  display: grid;
  place-items: center;

  border: 1px solid #e4e8ef;

  color: #101419;
  background: #f3f5f7;

  font-size: 12px;
  font-weight: 600;
}

.mentee-session-mentor small {
  display: block;

  color: #6f8095;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mentee-session-mentor h2 {
  margin: 4px 0 0;

  color: #101419;

  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}

.mentee-session-status {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 0 10px;

  border: 1px solid #ffcbc5;
  border-radius: 999px;

  color: #c13c00;
  background: #fff4f3;

  font-size: 10px;
  font-weight: 500;

  text-transform: capitalize;
  white-space: nowrap;
}

.mentee-session-status.status-completed,
.mentee-session-status.status-cancelled,
.mentee-session-status.status-no-show {
  border-color: #dfe4eb;

  color: #4c5867;
  background: #f7f8fa;
}

.mentee-session-date {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding: 14px;

  border: 1px solid #eef1f5;
  border-radius: 13px;

  background: #fbfcfd;
}

.mentee-session-date-badge {
  display: grid;
  place-items: center;

  flex: 0 0 58px;

  width: 58px;
  min-height: 62px;

  padding: 8px;

  border-radius: 12px;

  color: #ffffff;
  background: #101419;

  text-align: center;
}

.mentee-session-date-badge span {
  color: #d7dee7;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mentee-session-date-badge strong {
  margin-top: 2px;

  color: #ffffff;

  font-size: 20px;
  line-height: 1;
}

.mentee-session-date-copy {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.mentee-session-date-copy strong {
  color: #101419;

  font-size: 12px;
  font-weight: 650;
}

.mentee-session-date-copy span {
  color: #4c5867;

  font-size: 11px;
}

.mentee-session-date-copy small {
  color: #8794a4;

  font-size: 9px;
}

.mentee-session-information {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 14px;
}

.mentee-session-information > div {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
  padding: 12px;

  border: 1px solid #eef1f5;
  border-radius: 11px;

  background: #ffffff;
}

.mentee-session-information svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentee-session-information span {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.mentee-session-information small {
  color: #8794a4;

  font-size: 9px;
}

.mentee-session-information strong {
  color: #2d353f;

  font-size: 11px;
  font-weight: 600;

  overflow-wrap: anywhere;
}

.mentee-session-topic {
  padding: 13px 14px;

  border: 1px solid #eef1f5;
  border-radius: 11px;

  background: #fbfcfd;
}

.mentee-session-topic small {
  color: #8794a4;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mentee-session-topic p {
  margin: 5px 0 0;

  color: #2d353f;

  font-size: 12px;
  line-height: 1.55;
}

.mentee-session-location {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  margin-top: 12px;
  padding: 12px;

  border: 1px solid #eef1f5;
  border-radius: 10px;

  color: #4c5867;
  background: #fbfcfd;
}

.mentee-session-location svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentee-session-location p {
  margin: 0;

  font-size: 11px;
  line-height: 1.5;
}

.mentee-session-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 14px;

  margin-top: 20px;
  padding-top: 18px;

  border-top: 1px solid #eef1f5;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

body:has(.mentee-sessions-summary)
.primary-button,
body:has(.mentee-sessions-summary)
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 42px;
  padding: 0 16px;

  border-radius: 10px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  transform: none !important;
  box-shadow: none !important;
}

body:has(.mentee-sessions-summary)
.primary-button {
  border: 1px solid #ff5303;

  color: #ffffff;
  background: #ff5303;
}

body:has(.mentee-sessions-summary)
.primary-button:hover {
  border-color: #c13c00;

  color: #ffffff;
  background: #c13c00;
}

body:has(.mentee-sessions-summary)
.secondary-button {
  border: 1px solid #c9d2df;

  color: #101419;
  background: #ffffff;
}

body:has(.mentee-sessions-summary)
.secondary-button:hover {
  border-color: #97aac2;

  background: #f7f8fa;
}

.mentee-session-view-mentor {
  border-color: #101419 !important;

  color: #ffffff !important;
  background: #101419 !important;
}

.mentee-session-view-mentor:hover {
  border-color: #2d353f !important;

  color: #ffffff !important;
  background: #2d353f !important;
}

.mentee-session-join-button {
  border-color: #ff5303 !important;

  color: #ffffff !important;
  background: #ff5303 !important;
}

.mentee-session-join-button:hover {
  border-color: #c13c00 !important;

  background: #c13c00 !important;
}

/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.mentee-session-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  min-height: 0;
  height: auto;

  padding: 34px 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  text-align: center;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentee-session-empty-state .empty-state-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom: 16px;

  border: 1px solid #ffe5e3;
  border-radius: 14px;

  color: #ff5303;
  background: #fff4f3;
}

.mentee-session-empty-state h2 {
  margin: 0 0 8px;

  color: #101419;

  font-size: 19px;
  font-weight: 650;
}

.mentee-session-empty-state p {
  max-width: 500px;
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.65;
}

.mentee-session-empty-state
.primary-button {
  margin-top: 20px;
}

/* ---------------------------------------------------------
   CALENDAR PANEL
   Keeps the approved empty-state calendar structure.
   --------------------------------------------------------- */

.mentee-session-calendar-panel {
  position: relative;

  align-self: start;

  width: 100%;
  min-width: 0;

  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentee-session-calendar-heading h3 {
  margin: 6px 0 4px;

  color: #101419;

  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}

.mentee-session-calendar-heading p {
  margin: 0;

  color: #4c5867;

  font-size: 11px;
  line-height: 1.6;
}

.mentee-custom-date-field-wrap {
  position: relative;

  margin-top: 18px;
}

.mentee-custom-date-label {
  display: block;

  margin-bottom: 7px;

  color: #2d353f;

  font-size: 11px;
  font-weight: 600;
}

.mentee-custom-date-field {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  width: 100%;
  height: 46px;
  padding: 0 13px;

  border: 1px solid #c9d2df;
  border-radius: 11px;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;

  cursor: pointer;
}

.mentee-custom-date-field:hover,
.mentee-custom-date-field:focus-visible {
  border-color: #97aac2;

  outline: none;

  box-shadow:
    0 0 0 3px rgba(16, 20, 25, 0.05);
}

.mentee-custom-date-field svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentee-session-today-button {
  width: 100%;

  margin-top: 10px;
}

.mentee-session-selected-date {
  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 76px;

  margin-top: 16px;
  padding: 15px 16px;

  border: 1px solid #eef1f5;
  border-radius: 12px;

  color: #2d353f;
  background: #f8f9fb;
}

.mentee-session-selected-date svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentee-session-selected-date div {
  display: grid;

  gap: 3px;
}

.mentee-session-selected-date small {
  color: #8794a4;

  font-size: 9px;
}

.mentee-session-selected-date strong {
  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

/* ---------------------------------------------------------
   CALENDAR RESULTS
   --------------------------------------------------------- */

.mentee-session-calendar-results {
  display: grid;

  gap: 8px;

  margin-top: 12px;
}

.mentee-session-calendar-result {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 10px;

  min-height: 68px;
  padding: 12px 14px;

  border: 1px solid #eef1f5;
  border-radius: 11px;

  background: #ffffff;
}

.mentee-session-calendar-time {
  min-width: 62px;

  color: #101419;

  font-size: 10px;
  font-weight: 600;
}

.mentee-session-calendar-result > div {
  min-width: 0;
}

.mentee-session-calendar-result strong {
  display: block;

  overflow: hidden;

  color: #101419;

  font-size: 11px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-session-calendar-result p {
  margin: 3px 0 0;

  overflow: hidden;

  color: #6f8095;

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-session-calendar-format {
  justify-self: end;

  padding: 5px 7px;

  border: 1px solid #dfe4eb;
  border-radius: 999px;

  color: #4c5867;
  background: #f7f8fa;

  font-size: 8px;
  font-weight: 600;

  white-space: nowrap;
}

.mentee-session-calendar-empty {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  min-height: 92px;

  margin-top: 12px;
  padding: 16px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  background: #ffffff;
}

.mentee-session-calendar-empty > svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentee-session-calendar-empty h4 {
  margin: 0 0 4px;

  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

.mentee-session-calendar-empty p {
  margin: 0;

  color: #6f8095;

  font-size: 9px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   CALENDAR POPOVER
   --------------------------------------------------------- */

.mentee-custom-calendar {
  position: absolute;

  top: calc(100% + 8px);
  left: 0;
  z-index: 80;

  width: min(100%, 360px);
  padding: 12px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 18px 44px rgba(16, 20, 25, 0.13);
}

.mentee-custom-calendar-topbar,
.mentee-custom-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.mentee-custom-calendar-topbar {
  padding-bottom: 9px;

  border-bottom: 1px solid #eef1f5;
}

.mentee-custom-calendar-topbar > span {
  color: #6f8095;

  font-size: 9px;
  font-weight: 600;
}

.mentee-custom-calendar-close,
.mentee-custom-calendar-header button {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  color: #4c5867;
  background: transparent;

  cursor: pointer;
}

.mentee-custom-calendar-close:hover,
.mentee-custom-calendar-header button:hover {
  color: #101419;
  background: #f7f8fa;
}

.mentee-custom-calendar-header {
  padding: 10px 0;
}

.mentee-custom-calendar-header strong {
  color: #101419;

  font-size: 12px;
  font-weight: 600;
}

.mentee-custom-calendar-weekdays,
.mentee-custom-calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap: 4px;
}

.mentee-custom-calendar-weekdays {
  margin-bottom: 4px;
}

.mentee-custom-calendar-weekdays span {
  display: grid;
  place-items: center;

  min-height: 26px;

  color: #6f8095;

  font-size: 8px;
  font-weight: 600;
}

.mentee-custom-calendar-empty-day {
  min-height: 36px;
}

.mentee-custom-calendar-day {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 36px;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 8px;

  color: #4c5867;
  background: transparent;

  font-family: inherit;
  font-size: 10px;
  font-weight: 500;

  cursor: pointer;
}

.mentee-custom-calendar-day:hover {
  border-color: #e4e8ef;

  color: #101419;
  background: #f7f8fa;
}

.mentee-custom-calendar-day.today {
  border-color: #ffcbc5;

  color: #c13c00;
  background: #fff4f3;
}

.mentee-custom-calendar-day.selected {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.mentee-custom-calendar-day.has-session::after,
.mentee-custom-calendar-day.has-session i {
  position: absolute;

  right: 50%;
  bottom: 3px;

  width: 4px;
  height: 4px;

  border-radius: 999px;

  background: #ff5303;

  content: "";

  transform: translateX(50%);
}

.mentee-custom-calendar-day.selected.has-session::after,
.mentee-custom-calendar-day.selected.has-session i {
  background: #ffffff;
}

/* ---------------------------------------------------------
   LOADING SKELETONS
   --------------------------------------------------------- */

.mentee-session-loading-state {
  display: grid;

  gap: 14px;
}

.mentee-session-loading-card {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  min-height: 180px;
  padding: 20px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;
}

.mentee-session-loading-date {
  flex: 0 0 64px;

  width: 64px;
  height: 74px;

  border-radius: 14px;

  background: #eef1f5;

  animation:
    mentor-session-skeleton 1.25s ease-in-out infinite;
}

.mentee-session-loading-card > div {
  display: grid;

  width: min(520px, 100%);

  gap: 9px;
}

.mentee-session-loading-line {
  display: block;

  width: 78%;
  height: 10px;

  border-radius: 999px;

  background: #eef1f5;

  animation:
    mentor-session-skeleton 1.25s ease-in-out infinite;
}

.mentee-session-loading-line--title {
  width: 48%;
  height: 18px;
}

.mentee-session-loading-line--short {
  width: 58%;
}

.mentee-session-calendar-loading {
  display: grid;

  gap: 10px;

  margin-top: 14px;
}

.mentee-session-calendar-loading span {
  display: block;

  width: 100%;
  height: 58px;

  border-radius: 12px;

  background: #eef1f5;

  animation:
    mentor-session-skeleton 1.25s ease-in-out infinite;
}

@keyframes mentor-session-skeleton {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .mentee-session-workspace {
    grid-template-columns: 1fr;
  }

  .mentee-session-calendar-panel {
    position: static;

    width: 100%;
    height: auto;
    min-height: 0;
  }

  .mentee-custom-calendar {
    position: static;

    width: 100%;

    margin-top: 8px;
  }
}

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

@media (max-width: 700px) {
  .mentee-sessions-summary {
    padding: 20px;
  }

  .mentee-sessions-summary h2 {
    font-size: 21px;
  }

  .mentee-session-tabs {
    display: flex;

    width: 100%;
  }

  .mentee-session-tabs button {
    flex: 1;
  }

  .mentee-session-ready-card {
    padding: 16px;
  }

  .mentee-session-card {
    padding: 18px;
  }

  .mentee-session-information {
    grid-template-columns: 1fr;
  }

  .mentee-session-calendar-panel {
    padding: 18px;
  }

  .mentee-session-calendar-result {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 6px;
  }

  .mentee-session-calendar-time {
    min-width: 0;
  }

  .mentee-session-calendar-format {
    justify-self: start;
  }

  .mentee-session-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mentee-session-view-mentor,
  .mentee-session-join-button {
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  .mentee-session-pagination {
    gap: 6px;

    padding: 12px;
  }

  .mentee-session-pagination-nav {
    min-width: 68px !important;
    padding: 0 8px !important;
  }

  .mentee-session-pagination-pages {
    gap: 4px;
  }

  .mentee-session-pagination button {
    min-width: 32px;
    min-height: 32px;

    padding: 0 8px;
  }

  .mentee-session-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentee-session-status {
    align-self: flex-start;
  }
}

@media (max-width: 520px) {
  .mentee-sessions-summary {
    padding: 18px;
  }

  .mentee-session-ready-card {
    flex-direction: column;
  }

  .mentee-session-date {
    align-items: flex-start;
  }

  .mentee-custom-calendar {
    padding: 10px;
  }

  .mentee-custom-calendar-day {
    min-height: 34px;
  }
}

/* =========================================================
   MY SESSIONS
   FINAL FILLED-STATE STYLES
   Paste at the VERY BOTTOM of MenteeSessions.css
   ========================================================= */

/* ---------------------------------------------------------
   MAIN WORKSPACE
   --------------------------------------------------------- */

.mentee-session-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(310px, 0.7fr);

  align-items: start;

  gap: 18px;

  width: 100%;
}

.mentee-session-main-column {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

/* ---------------------------------------------------------
   TABS
   Dark secondary active state
   --------------------------------------------------------- */

.mentee-session-tabs {
  border-color: #e4e8ef !important;

  background: #ffffff !important;
}

.mentee-session-tabs button {
  color: #4c5867 !important;

  background: transparent !important;

  font-size: 12px !important;
  font-weight: 500 !important;
}

.mentee-session-tabs button span {
  color: #4c5867 !important;

  background: #eef1f5 !important;
}

.mentee-session-tabs button.active {
  border-color: #101419 !important;

  color: #ffffff !important;
  background: #101419 !important;
}

.mentee-session-tabs button.active span {
  color: #101419 !important;

  background: #ffffff !important;
}

/* ---------------------------------------------------------
   SESSION CARD
   --------------------------------------------------------- */

.mentee-session-card {
  padding: 22px !important;

  border-color: #e4e8ef !important;

  background: #ffffff !important;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.035) !important;
}

.mentee-session-initials {
  border: 1px solid #e4e8ef !important;

  color: #101419 !important;
  background: #f3f5f7 !important;

  font-weight: 600 !important;
}

.mentee-session-mentor small {
  color: #6f8095 !important;

  font-weight: 500 !important;
}

.mentee-session-mentor h2 {
  color: #101419 !important;
}

/* ---------------------------------------------------------
   STATUS
   No green or teal
   --------------------------------------------------------- */

.mentee-session-status {
  padding: 6px 10px !important;

  border: 1px solid #ffcbc5 !important;

  color: #c13c00 !important;
  background: #fff4f3 !important;

  font-size: 10px !important;
  font-weight: 500 !important;
}

.mentee-session-status.status-completed,
.mentee-session-status.status-cancelled,
.mentee-session-status.status-no-show {
  border-color: #dfe4eb !important;

  color: #4c5867 !important;
  background: #f7f8fa !important;
}

/* ---------------------------------------------------------
   DATE BLOCK
   --------------------------------------------------------- */

.mentee-session-date {
  margin-top: 18px !important;

  padding: 14px !important;

  background: #fbfcfd !important;
}

.mentee-session-date-badge {
  color: #ffffff !important;

  background: #ff5303 !important;
}

.mentee-session-date-badge span,
.mentee-session-date-badge strong {
  color: #ffffff !important;
}

.mentee-session-date-copy strong {
  color: #101419 !important;
}

.mentee-session-date-copy span {
  color: #4c5867 !important;
}

.mentee-session-date-copy small {
  color: #6f8095 !important;
}

/* ---------------------------------------------------------
   SESSION INFORMATION
   --------------------------------------------------------- */

.mentee-session-information {
  margin-top: 18px !important;

  gap: 18px !important;
}

.mentee-session-information svg {
  color: #ff5303 !important;
}

.mentee-session-information small,
.mentee-session-topic small {
  color: #6f8095 !important;

  font-weight: 500 !important;
}

.mentee-session-information strong {
  color: #101419 !important;

  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   MENTORING AREA
   --------------------------------------------------------- */

.mentee-session-topic {
  margin-top: 20px !important;

  padding: 18px 0 0 !important;

  border: 0 !important;
  border-top: 1px solid #eef1f5 !important;

  border-radius: 0 !important;

  background: transparent !important;
}

.mentee-session-topic p {
  color: #4c5867 !important;
}

/* ---------------------------------------------------------
   LOCATION
   --------------------------------------------------------- */

.mentee-session-location {
  margin-top: 16px !important;

  padding: 12px 13px !important;

  border: 1px solid #eef1f5 !important;

  color: #4c5867 !important;
  background: #fbfcfd !important;
}

.mentee-session-location svg {
  color: #ff5303 !important;
}

/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.mentee-session-actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 14px !important;

  margin-top: 20px !important;

  padding-top: 18px !important;

  border-top: 1px solid #eef1f5 !important;
}

/* Dark filled secondary action */

.mentee-session-view-mentor {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;

  padding: 0 16px !important;

  border: 1px solid #101419 !important;

  border-radius: 9px !important;

  color: #ffffff !important;

  background: #101419 !important;

  font-family: inherit !important;

  font-size: 13px !important;
  font-weight: 500 !important;

  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow: none !important;
  transform: none !important;
}

.mentee-session-view-mentor:hover {
  border-color: #2d353f !important;

  color: #ffffff !important;

  background: #2d353f !important;
}

/* Orange primary action */

.mentee-session-join-button {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;

  padding: 0 17px !important;

  border: 1px solid #ff5303 !important;

  border-radius: 9px !important;

  color: #ffffff !important;

  background: #ff5303 !important;

  font-size: 13px !important;
  font-weight: 500 !important;

  text-decoration: none !important;

  box-shadow: none !important;
  transform: none !important;
}

.mentee-session-join-button:hover {
  border-color: #c13c00 !important;

  background: #c13c00 !important;
}

/* ---------------------------------------------------------
   ONE SESSION CARD + PAGINATION
   --------------------------------------------------------- */

.mentee-session-paged-shell {
  overflow: hidden;

  width: 100%;

  border: 1px solid #e4e8ef;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.035);
}

.mentee-session-paged-shell
.mentee-session-card--paginated {
  display: block !important;

  min-height: 0 !important;
  height: auto !important;

  margin: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}

.mentee-session-pagination {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin: 0 !important;

  padding: 14px 18px;

  border-top: 1px solid #eef1f5;

  background: #fbfcfd;
}

.mentee-session-pagination-pages {
  display: flex;

  align-items: center;

  gap: 6px;
}

.mentee-session-pagination button {
  appearance: none;
  -webkit-appearance: none;

  min-width: 34px;
  min-height: 34px;

  padding: 0 10px;

  border: 1px solid #dfe4eb;

  border-radius: 8px;

  color: #4c5867;

  background: #ffffff;

  font-family: inherit;

  font-size: 11px;
  font-weight: 500;

  line-height: 1;

  cursor: pointer;
}

.mentee-session-pagination
button:hover:not(:disabled) {
  border-color: #97aac2;

  color: #101419;

  background: #f7f8fa;
}

.mentee-session-pagination-pages
button.active {
  border-color: #101419;

  color: #ffffff;

  background: #101419;
}

.mentee-session-pagination button:disabled {
  color: #97aac2;

  background: #f7f8fa;

  cursor: not-allowed;

  opacity: 0.65;
}

.mentee-session-pagination-nav {
  min-width: 76px !important;
}

/* ---------------------------------------------------------
   CALENDAR PANEL
   Same structure as approved empty state
   --------------------------------------------------------- */

.mentee-session-calendar-panel {
  position: static !important;

  top: auto !important;

  align-self: start !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 0 !important;
  height: auto !important;

  margin: 0 !important;

  padding: 22px !important;

  border-color: #e4e8ef !important;

  background: #ffffff !important;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03) !important;
}

.mentee-session-calendar-heading .eyebrow {
  color: #ff5303 !important;
}

.mentee-session-calendar-heading h3 {
  color: #101419 !important;
}

.mentee-session-calendar-heading p {
  color: #4c5867 !important;
}

/* ---------------------------------------------------------
   DATE FIELD
   --------------------------------------------------------- */

.mentee-custom-date-field-wrap {
  position: relative !important;

  width: 100% !important;

  margin-top: 18px !important;
}

.mentee-custom-date-label {
  color: #2d353f !important;

  font-weight: 600 !important;
}

.mentee-custom-date-field {
  width: 100% !important;

  border-color: #c9d2df !important;

  color: #101419 !important;

  background: #ffffff !important;

  font-weight: 500 !important;
}

.mentee-custom-date-field:hover,
.mentee-custom-date-field:focus-visible {
  border-color: #4c5867 !important;

  outline: none !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.1) !important;
}

.mentee-custom-date-field svg {
  color: #ff5303 !important;
}

/* ---------------------------------------------------------
   TODAY BUTTON
   --------------------------------------------------------- */

.mentee-session-today-button {
  width: 100% !important;

  margin-top: 10px !important;

  border-color: #c9d2df !important;

  color: #2d353f !important;

  background: #ffffff !important;

  font-size: 13px !important;
  font-weight: 500 !important;
}

.mentee-session-today-button:hover {
  border-color: #97aac2 !important;

  background: #f7f8fa !important;
}

/* ---------------------------------------------------------
   SELECTED DATE BLOCK
   --------------------------------------------------------- */

.mentee-session-selected-date {
  display: flex !important;

  align-items: center !important;

  min-height: 76px !important;

  height: auto !important;

  margin-top: 16px !important;

  padding: 15px 16px !important;

  border: 1px solid #eef1f5 !important;

  border-radius: 12px !important;

  color: #2d353f !important;

  background: #f8f9fb !important;
}

.mentee-session-selected-date > svg {
  flex: 0 0 auto !important;

  width: 20px !important;
  height: 20px !important;

  margin-right: 11px !important;

  color: #ff5303 !important;
}

.mentee-session-selected-date > div {
  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  min-width: 0 !important;
}

.mentee-session-selected-date small {
  margin-bottom: 4px !important;

  color: #6f8095 !important;

  font-size: 9px !important;
  font-weight: 600 !important;
}

.mentee-session-selected-date strong {
  color: #101419 !important;

  font-size: 12px !important;
  font-weight: 600 !important;

  line-height: 1.35 !important;
}

/* ---------------------------------------------------------
   CALENDAR POPUP
   --------------------------------------------------------- */

.mentee-custom-calendar {
  border-color: #e4e8ef !important;

  background: #ffffff !important;

  box-shadow:
    0 18px 44px
    rgba(16, 20, 25, 0.13) !important;
}

.mentee-custom-calendar-topbar {
  border-bottom-color: #eef1f5 !important;
}

.mentee-custom-calendar-topbar > span {
  color: #6f8095 !important;
}

.mentee-custom-calendar-close,
.mentee-custom-calendar-header button {
  color: #4c5867 !important;
}

.mentee-custom-calendar-close:hover,
.mentee-custom-calendar-header button:hover {
  color: #101419 !important;

  background: #f7f8fa !important;
}

.mentee-custom-calendar-header strong {
  color: #101419 !important;

  font-weight: 600 !important;
}

.mentee-custom-calendar-weekdays span {
  color: #6f8095 !important;
}

.mentee-custom-calendar-day {
  color: #2d353f !important;

  font-weight: 500 !important;
}

.mentee-custom-calendar-day:hover {
  color: #c13c00 !important;

  background: #fff4f3 !important;
}

.mentee-custom-calendar-day.today:not(.selected) {
  border-color: #ff9788 !important;

  color: #c13c00 !important;
}

.mentee-custom-calendar-day.selected {
  border-color: #ff5303 !important;

  color: #ffffff !important;

  background: #ff5303 !important;
}

.mentee-custom-calendar-day.has-session::after,
.mentee-custom-calendar-day.has-session i {
  background: #ff5303 !important;
}

.mentee-custom-calendar-day.selected.has-session::after,
.mentee-custom-calendar-day.selected.has-session i {
  background: #ffffff !important;
}

/* ---------------------------------------------------------
   CALENDAR EMPTY STATE
   --------------------------------------------------------- */

.mentee-session-calendar-empty {
  min-height: 0 !important;

  height: auto !important;

  margin-top: 12px !important;

  border-color: #dfe4eb !important;

  color: #4c5867 !important;

  background: #ffffff !important;
}

.mentee-session-calendar-empty > svg {
  color: #ff5303 !important;
}

.mentee-session-calendar-empty h4 {
  color: #101419 !important;
}

.mentee-session-calendar-empty p {
  color: #6f8095 !important;
}

/* ---------------------------------------------------------
   CALENDAR SESSION RESULT
   --------------------------------------------------------- */

.mentee-session-calendar-results {
  gap: 9px !important;

  min-height: 0 !important;

  height: auto !important;

  margin-top: 12px !important;
}

.mentee-session-calendar-result {
  grid-template-columns: 1fr !important;

  gap: 6px !important;

  min-height: 0 !important;

  height: auto !important;

  padding: 13px 14px !important;

  border-color: #e4e8ef !important;

  background: #ffffff !important;
}

.mentee-session-calendar-time {
  min-width: 0 !important;

  color: #c13c00 !important;

  font-weight: 600 !important;
}

.mentee-session-calendar-result strong {
  color: #101419 !important;
}

.mentee-session-calendar-result p {
  color: #6f8095 !important;
}

.mentee-session-calendar-format {
  justify-self: start !important;

  border: 1px solid #e4e8ef !important;

  color: #4c5867 !important;

  background: #f7f8fa !important;

  font-weight: 500 !important;
}

/* ---------------------------------------------------------
   DESKTOP HEIGHT ALIGNMENT
   Outer canvases line up without stretching card content.
   --------------------------------------------------------- */

@media (min-width: 981px) {
  .mentee-session-workspace {
    align-items: stretch !important;
  }

  .mentee-session-main-column {
    height: 100% !important;
  }

  .mentee-session-paged-shell {
    display: flex !important;

    flex-direction: column !important;

    height: 100% !important;
  }

  .mentee-session-paged-shell
  .mentee-session-card--paginated {
    flex: 0 0 auto !important;
  }

  .mentee-session-paged-shell
  .mentee-session-pagination {
    margin-top: auto !important;
  }

  .mentee-session-calendar-panel {
    align-self: stretch !important;

    height: 100% !important;

    min-height: 100% !important;
  }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .mentee-session-workspace {
    grid-template-columns: 1fr !important;
  }

  .mentee-session-calendar-panel {
    position: static !important;

    top: auto !important;

    min-height: 0 !important;

    height: auto !important;

    margin-top: 0 !important;
  }

  .mentee-session-card--paginated {
    min-height: 0 !important;

    height: auto !important;
  }
}

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

@media (max-width: 700px) {
  .mentee-session-card {
    padding: 18px !important;
  }

  .mentee-session-actions {
    align-items: stretch !important;

    flex-direction: column !important;
  }

  .mentee-session-view-mentor,
  .mentee-session-join-button {
    width: 100% !important;

    justify-content: center !important;
  }
}

@media (max-width: 620px) {
  .mentee-session-calendar-panel {
    padding: 18px !important;
  }

  .mentee-session-pagination {
    gap: 6px !important;

    padding: 12px !important;
  }

  .mentee-session-pagination-nav {
    min-width: 68px !important;

    padding: 0 8px !important;
  }

  .mentee-session-selected-date {
    min-height: 68px !important;

    padding: 13px 14px !important;
  }

  .mentee-session-paged-shell {
    border-radius: 14px !important;
  }
}

/* =========================================================
   FINAL SESSIONS EMPTY-STATE + CANVAS ALIGNMENT
   Desktop: left empty canvas and right calendar canvas match.
   No fixed 420px height. The taller content defines the row.
   Tablet/mobile: both return to natural stacked heights.
   ========================================================= */

/* Keep the schedule introduction fully white. */
.mentee-sessions-summary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

.mentee-sessions-summary::before,
.mentee-sessions-summary::after {
  content: none !important;
  background: none !important;
}

/* Remove old fixed empty-state sizing. */
.mentee-session-main-column > .mentee-session-empty-state,
.mentee-session-empty-state {
  min-height: 0 !important;
}

/* ---------------------------------------------------------
   DESKTOP EMPTY STATE
   Let CSS Grid calculate the row from the taller column,
   then stretch both canvases to that same height.
   --------------------------------------------------------- */

@media (min-width: 981px) {
  .mentee-session-workspace--empty {
    align-items: stretch !important;
  }

  .mentee-session-workspace--empty
  .mentee-session-main-column {
    display: flex !important;
    flex-direction: column !important;

    align-self: stretch !important;

    height: auto !important;
    min-height: 0 !important;
  }

  .mentee-session-workspace--empty
  .mentee-session-empty-state {
    flex: 1 1 auto !important;

    align-self: stretch !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    padding: 38px 24px !important;

    border: 1px solid #e4e8ef !important;
    border-radius: 16px !important;

    background: #ffffff !important;
    background-image: none !important;

    box-shadow:
      0 8px 24px rgba(16, 20, 25, 0.03) !important;
  }

  .mentee-session-workspace--empty
  .mentee-session-calendar-panel {
    align-self: stretch !important;

    height: 100% !important;
    min-height: 0 !important;
  }
}

/* ---------------------------------------------------------
   EMPTY STATE CONTENT
   Keep the content compact even when the outer canvas stretches.
   --------------------------------------------------------- */

.mentee-session-empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;

  text-align: center !important;
}

.mentee-session-empty-state
.empty-state-icon {
  margin-bottom: 14px !important;
}

.mentee-session-empty-state h2 {
  margin: 0 0 7px !important;
}

.mentee-session-empty-state p {
  max-width: 520px !important;
}

.mentee-session-empty-state
.primary-button {
  margin-top: 18px !important;
}

/* ---------------------------------------------------------
   TABLET + MOBILE
   Once stacked, each canvas sizes naturally again.
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .mentee-session-workspace--empty {
    align-items: start !important;
  }

  .mentee-session-workspace--empty
  .mentee-session-main-column {
    display: block !important;

    height: auto !important;
    min-height: 0 !important;
  }

  .mentee-session-workspace--empty
  .mentee-session-empty-state {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 34px 24px !important;
  }

  .mentee-session-workspace--empty
  .mentee-session-calendar-panel {
    align-self: start !important;

    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 700px) {
  .mentee-session-workspace--empty
  .mentee-session-empty-state {
    padding: 30px 20px !important;
  }
}

@media (max-width: 520px) {
  .mentee-session-workspace--empty
  .mentee-session-empty-state {
    padding: 26px 18px !important;
  }
}
/* =========================================================
   MENTEE SESSION FEEDBACK
   Supplemental styles for completed-session reviews.
   ========================================================= */

.mentee-session-review-success {
  margin-bottom: 16px;
  padding: 12px 14px;

  border: 1px solid #d7dee7;
  border-radius: 11px;

  color: #2d353f;
  background: #f8f9fb;

  font-size: 12px;
  font-weight: 600;
}

.mentee-session-feedback-action,
.mentee-session-review-summary {
  margin-top: 18px;
  padding: 16px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #f8f9fb;
}

.mentee-session-feedback-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mentee-session-feedback-action small,
.mentee-session-review-summary small {
  display: block;

  color: #6f8095;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mentee-session-feedback-action p,
.mentee-session-review-summary p {
  margin: 5px 0 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

.mentee-session-feedback-action .primary-button {
  flex: 0 0 auto;
}

.mentee-session-review-stars {
  display: flex;
  align-items: center;
  gap: 3px;

  margin-top: 7px;

  color: #ff5303;
}

.mentee-session-review-summary > span {
  display: block;

  margin-top: 10px;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.5;
}

/* Modal */

.mentee-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;

  display: grid;
  place-items: center;

  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));

  background:
    rgba(3, 4, 5, 0.56);
}

.mentee-review-modal {
  width: min(560px, 100%);
  max-height:
    calc(
      100dvh -
      36px -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom)
    );

  overflow-y: auto;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  color: #101419;
  background: #ffffff;

  box-shadow:
    0 28px 80px
    rgba(3, 4, 5, 0.24);
}

.mentee-review-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mentee-review-modal-header h2 {
  margin: 6px 0 0;

  color: #101419;

  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.mentee-review-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;

  width: 36px;
  height: 36px;
  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;
  background: #ffffff;

  cursor: pointer;
}

.mentee-review-close:hover:not(:disabled) {
  color: #101419;
  background: #f8f9fb;
}

.mentee-review-intro {
  margin: 18px 0 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

.mentee-review-form {
  display: grid;
  gap: 20px;

  margin-top: 22px;
}

.mentee-review-form fieldset {
  margin: 0;
  padding: 0;

  border: 0;
}

.mentee-review-form legend,
.mentee-review-field {
  color: #2d353f;

  font-size: 13px;
  font-weight: 700;
}

.mentee-review-stars {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 10px;
}

.mentee-review-stars button {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #97aac2;
  background: #ffffff;

  cursor: pointer;
}

.mentee-review-stars button.active {
  border-color: #ffe5e3;

  color: #ff5303;
  background: #fff4f3;
}

.mentee-review-stars button:focus-visible,
.mentee-review-close:focus-visible {
  outline:
    2px solid
    rgba(255, 83, 3, 0.26);

  outline-offset: 2px;
}

.mentee-review-stars button:disabled,
.mentee-review-close:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.mentee-review-field {
  display: block;
}

.mentee-review-field textarea {
  display: block;

  width: 100%;
  min-height: 132px;
  margin-top: 8px;
  padding: 12px 13px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;

  resize: vertical;
}

.mentee-review-field textarea:focus {
  border-color: #ff5303;

  box-shadow:
    0 0 0 3px
    rgba(255, 83, 3, 0.12);
}

.mentee-review-field small {
  display: block;

  margin-top: 6px;

  color: #6f8095;

  font-size: 10px;
  font-weight: 500;
}

.mentee-review-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 13px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  color: #4c5867;
  background: #f8f9fb;

  font-size: 11px;
  line-height: 1.55;

  cursor: pointer;
}

.mentee-review-consent input {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;
  margin: 1px 0 0;

  accent-color: #ff5303;
}

.mentee-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 640px) {
  .mentee-session-feedback-action {
    align-items: stretch;
    flex-direction: column;
  }

  .mentee-session-feedback-action .primary-button {
    width: 100%;
  }

  .mentee-review-backdrop {
    align-items: end;

    padding:
      12px
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .mentee-review-modal {
    width: 100%;

    padding: 22px 18px;

    border-radius:
      18px 18px
      12px 12px;
  }

  .mentee-review-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mentee-review-actions .primary-button,
  .mentee-review-actions .secondary-button {
    width: 100%;
  }
}
/* =========================================================
   MENTEE MESSAGES
   Approved filled-state design transferred to production.
   White canvas + neutral secondary styling + orange accents.
   ========================================================= */

html:has(.mentee-messages-page),
body:has(.mentee-messages-page),
body:has(.mentee-messages-page) #root,
body:has(.mentee-messages-page) .dashboard-layout,
body:has(.mentee-messages-page) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentee-messages-page) .dashboard-content {
  min-height: 100vh !important;
}

body:has(.mentee-messages-page)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentee-messages-page)
.dashboard-content > header p,
body:has(.mentee-messages-page)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

body:has(.mentee-messages-page)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 600 !important;
}

.mentee-messages-page {
  width: 100%;
  min-width: 0;

  padding-top: 22px;

  color: #101419;
  background: #ffffff;
}

/* ---------------------------------------------------------
   PAGE TOOLBAR
   --------------------------------------------------------- */

.mentee-message-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 16px;
  padding: 16px 18px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.025);
}

.mentee-message-toolbar-eyebrow {
  display: block;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentee-message-page-toolbar p {
  margin: 5px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.5;
}

.mentee-message-start-button,
.mentee-message-primary-button {
  min-height: 42px;
  padding: 0 16px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.mentee-message-start-button:hover,
.mentee-message-primary-button:hover {
  border-color: #c13c00;
  background: #c13c00;
}

/* ---------------------------------------------------------
   MAIN CHAT WORKSPACE
   The history scrolls internally. The whole page does not
   become extremely tall because of messages.
   --------------------------------------------------------- */

.mentee-messages-layout {
  display: grid;
  grid-template-columns:
    minmax(240px, 290px)
    minmax(0, 1fr);

  width: 100%;
  min-width: 0;

  height:
    min(
      650px,
      calc(100dvh - 230px)
    );

  min-height: 520px;

  overflow: hidden;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(16, 20, 25, 0.035);
}

/* ---------------------------------------------------------
   THREAD LIST
   --------------------------------------------------------- */

.mentee-message-threads {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);

  min-width: 0;
  min-height: 0;

  border-right: 1px solid #e4e8ef;

  background: #fbfcfd;
}

.mentee-message-threads-heading {
  padding: 18px;

  border-bottom: 1px solid #eef1f5;

  background: #ffffff;
}

.mentee-message-threads-heading .eyebrow {
  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentee-message-threads-heading h2 {
  margin: 5px 0 0;

  color: #101419;

  font-size: 17px;
  font-weight: 650;
}

.mentee-message-thread-list {
  min-height: 0;

  padding: 8px;

  overflow-y: auto;

  overscroll-behavior: contain;
}

.mentee-message-thread {
  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr);
  align-items: center;

  gap: 10px;

  width: 100%;
  padding: 10px;

  border: 1px solid transparent;
  border-radius: 10px;

  color: inherit;
  background: transparent;

  font-family: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.mentee-message-thread:hover {
  background: #f3f5f7;
}

.mentee-message-thread.active {
  border-color: #d7dee7;

  background: #eef1f5;
}

.mentee-message-thread-avatar {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  object-fit: cover;
}

.mentee-message-thread-avatar--large {
  width: 56px;
  height: 56px;

  border-radius: 14px;
}

.mentee-message-thread-initials {
  color: #101419;
  background: #f3f5f7;

  font-size: 11px;
  font-weight: 600;
}

.mentee-message-thread-copy {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.mentee-message-thread-copy strong {
  overflow: hidden;

  color: #101419;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-message-thread-copy small {
  overflow: hidden;

  color: #6f8095;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   EMPTY THREAD LIST
   --------------------------------------------------------- */

.mentee-message-empty-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 100%;
  padding: 24px 18px;

  color: #6f8095;

  text-align: center;
}

.mentee-message-empty-list > svg {
  color: #ff5303;
}

.mentee-message-empty-list h3 {
  margin: 10px 0 0;

  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.mentee-message-empty-list p {
  max-width: 200px;
  margin: 6px 0 14px;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.55;
}

.mentee-message-empty-list button,
.mentee-message-no-selection button {
  min-height: 38px;
  padding: 0 12px;

  border: 1px solid #ff5303;
  border-radius: 8px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;

  cursor: pointer;
}

/* ---------------------------------------------------------
   CONVERSATION
   --------------------------------------------------------- */

.mentee-message-conversation {
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto
    auto;

  min-width: 0;
  min-height: 0;

  background: #ffffff;
}

.mentee-message-conversation-header {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;

  gap: 12px;

  min-height: 78px;
  padding: 14px 16px;

  border-bottom: 1px solid #e4e8ef;

  background: #ffffff;
}

.mentee-message-conversation-title {
  min-width: 0;
}

.mentee-message-conversation-title small {
  display: block;

  color: #ff5303;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mentee-message-conversation-title h2 {
  margin: 4px 0 2px;

  overflow: hidden;

  color: #101419;

  font-size: 16px;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-message-conversation-title p {
  margin: 0;

  overflow: hidden;

  color: #6f8095;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-message-mobile-back {
  display: none;
  place-items: center;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  cursor: pointer;
}

.mentee-message-view-mentor {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 38px;
  padding: 0 12px;

  border: 1px solid #c9d2df;
  border-radius: 8px;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;

  cursor: pointer;
}

.mentee-message-view-mentor:hover {
  border-color: #97aac2;
  background: #f7f8fa;
}

/* ---------------------------------------------------------
   MESSAGE HISTORY
   --------------------------------------------------------- */

.mentee-message-history {
  min-height: 0;

  padding: 18px;

  overflow-y: auto;
  overflow-x: hidden;

  background: #fbfcfd;

  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.mentee-message-row {
  display: flex;

  width: 100%;
  margin-bottom: 10px;
}

.mentee-message-row.mine {
  justify-content: flex-end;
}

.mentee-message-row.theirs {
  justify-content: flex-start;
}

.mentee-message-bubble {
  width: fit-content;
  max-width: min(72%, 560px);

  padding: 10px 12px;

  border: 1px solid #e4e8ef;
  border-radius: 13px;

  background: #ffffff;

  box-shadow:
    0 3px 10px rgba(16, 20, 25, 0.02);
}

.mentee-message-row.mine
.mentee-message-bubble {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.mentee-message-bubble p {
  margin: 0;

  color: #2d353f;

  font-size: 12px;
  line-height: 1.55;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mentee-message-row.mine
.mentee-message-bubble p {
  color: #ffffff;
}

.mentee-message-bubble small {
  display: block;

  margin-top: 5px;

  color: #8794a4;

  font-size: 8px;
  line-height: 1.3;
}

.mentee-message-row.mine
.mentee-message-bubble small {
  color: #d7dee7;

  text-align: right;
}

.mentee-message-new-thread,
.mentee-message-no-selection,
.mentee-message-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 100%;
  padding: 28px;

  text-align: center;
}

.mentee-message-new-thread h3,
.mentee-message-no-selection h3 {
  margin: 12px 0 0;

  color: #101419;

  font-size: 15px;
  font-weight: 650;
}

.mentee-message-new-thread p,
.mentee-message-no-selection p {
  max-width: 390px;

  margin: 7px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.6;
}

.mentee-message-no-selection > svg {
  color: #ff5303;
}

.mentee-message-no-selection button {
  margin-top: 14px;
}

/* ---------------------------------------------------------
   MESSAGE LOADING
   --------------------------------------------------------- */

.mentee-message-loading {
  gap: 9px;
}

.mentee-message-loading span {
  display: block;

  width: min(360px, 70%);
  height: 34px;

  border-radius: 12px;

  background: #eef1f5;

  animation:
    mentee-message-skeleton 1.2s ease-in-out infinite;
}

.mentee-message-loading span:nth-child(2) {
  width: min(260px, 54%);
  align-self: flex-end;
}

.mentee-message-loading span:nth-child(3) {
  width: min(310px, 62%);
}

.mentee-message-loading-page {
  display: grid;

  gap: 12px;

  min-height: 420px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;
}

.mentee-message-loading-block {
  display: block;

  width: 100%;
  height: 92px;

  border-radius: 14px;

  background: #eef1f5;

  animation:
    mentee-message-skeleton 1.2s ease-in-out infinite;
}

.mentee-message-loading-block--short {
  width: 46%;
  height: 42px;
}

@keyframes mentee-message-skeleton {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   ERROR
   --------------------------------------------------------- */

.mentee-message-error {
  margin: 0;
  padding: 8px 14px;

  border-top: 1px solid #ffcbc5;

  color: #832600;
  background: #fff4f3;

  font-size: 10px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   COMPOSER
   Compact auto-grow. Textarea and Send begin at 44px.
   --------------------------------------------------------- */

.mentee-message-composer {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: end;

  gap: 9px;

  padding: 12px 14px;

  border-top: 1px solid #e4e8ef;

  background: #ffffff;
}

.mentee-message-composer textarea {
  box-sizing: border-box;

  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 96px;

  padding: 11px 13px;

  border: 1px solid #c9d2df;
  border-radius: 10px;
  outline: none;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 12px;
  line-height: 20px;

  overflow-y: auto;

  resize: none;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.mentee-message-composer textarea:focus {
  border-color: #97aac2;

  box-shadow:
    0 0 0 3px rgba(16, 20, 25, 0.05);
}

.mentee-message-composer textarea::placeholder {
  color: #8794a4;
}

.mentee-message-send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  height: 44px;
  min-height: 44px;

  padding: 0 15px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease;
}

.mentee-message-send-button:hover:not(:disabled) {
  border-color: #c13c00;
  background: #c13c00;
}

.mentee-message-send-button:disabled {
  cursor: not-allowed;

  opacity: 0.5;
}

/* ---------------------------------------------------------
   FULL PAGE EMPTY STATE
   --------------------------------------------------------- */

.mentee-message-page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 380px;
  padding: 48px 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #f8f9fb;

  text-align: center;
}

.mentee-message-page-empty-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom: 16px;

  border: 1px solid #ffe5e3;
  border-radius: 14px;

  color: #ff5303;
  background: #fff4f3;
}

.mentee-message-page-empty h2 {
  margin: 0 0 8px;

  color: #101419;

  font-size: 19px;
  font-weight: 650;
}

.mentee-message-page-empty p {
  max-width: 510px;

  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.65;
}

.mentee-message-page-empty
.mentee-message-primary-button {
  margin-top: 20px;
}

/* ---------------------------------------------------------
   START CONVERSATION MODAL
   --------------------------------------------------------- */

.mentee-message-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(3, 4, 5, 0.34);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mentee-start-conversation-modal {
  width:
    min(
      100%,
      520px
    );

  max-height:
    min(
      78vh,
      650px
    );

  overflow-y: auto;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 28px 80px rgba(16, 20, 25, 0.18);
}

.mentee-start-conversation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding: 22px;

  border-bottom: 1px solid #eef1f5;
}

.mentee-start-conversation-header span {
  display: block;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mentee-start-conversation-header h2 {
  margin: 5px 0 0;

  color: #101419;

  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mentee-start-conversation-header p {
  margin: 6px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.55;
}

.mentee-start-conversation-header > button {
  display: grid;
  place-items: center;

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;
  background: #ffffff;

  cursor: pointer;
}

.mentee-start-conversation-list {
  display: grid;

  padding: 8px;
}

.mentee-start-conversation-option {
  display: grid;
  grid-template-columns:
    44px
    minmax(0, 1fr)
    auto;
  align-items: center;

  gap: 11px;

  width: 100%;
  padding: 12px;

  border: 0;
  border-radius: 11px;

  color: inherit;
  background: transparent;

  font-family: inherit;
  text-align: left;

  cursor: pointer;
}

.mentee-start-conversation-option:hover {
  background: #f8f9fb;
}

.mentee-start-conversation-option
.mentee-message-thread-avatar {
  width: 44px;
  height: 44px;
}

.mentee-start-conversation-copy {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.mentee-start-conversation-copy strong {
  overflow: hidden;

  color: #101419;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-start-conversation-copy small {
  overflow: hidden;

  color: #6f8095;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-start-conversation-action {
  color: #c13c00;

  font-size: 10px;
  font-weight: 500;

  white-space: nowrap;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .mentee-messages-layout {
    grid-template-columns:
      minmax(210px, 250px)
      minmax(0, 1fr);
  }

  .mentee-message-bubble {
    max-width: 80%;
  }
}

/* ---------------------------------------------------------
   MOBILE
   Approved compact structure: thread list remains short,
   conversation gets the remaining workspace.
   --------------------------------------------------------- */

@media (max-width: 760px) {
  .mentee-messages-page {
    padding-top: 14px;
  }

  .mentee-message-page-toolbar {
    align-items: stretch;
    flex-direction: column;

    padding: 14px;
  }

  .mentee-message-start-button {
    width: 100%;
  }

  .mentee-messages-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      minmax(0, 1fr);

    height:
      min(
        640px,
        calc(100dvh - 170px)
      );

    min-height: 540px;

    border-radius: 14px;
  }

  .mentee-message-threads {
    grid-template-rows:
      auto
      minmax(0, 1fr);

    max-height: 180px;

    border-right: 0;
    border-bottom: 1px solid #e4e8ef;
  }

  .mentee-message-threads-heading {
    padding: 12px 14px;
  }

  .mentee-message-threads-heading h2 {
    font-size: 14px;
  }

  .mentee-message-thread-list {
    display: flex;

    gap: 7px;

    padding: 8px;

    overflow-x: auto;
    overflow-y: hidden;
  }

  .mentee-message-thread {
    flex: 0 0 min(210px, 74vw);
  }

  .mentee-message-empty-list {
    min-height: 118px;
    padding: 14px;
  }

  .mentee-message-empty-list p {
    margin-bottom: 10px;
  }

  .mentee-message-conversation {
    min-height: 0;
  }

  .mentee-message-conversation-header {
    min-height: 68px;
    padding: 10px 12px;
  }

  .mentee-message-mobile-back {
    display: grid;
  }

  .mentee-message-conversation-title h2 {
    font-size: 14px;
  }

  .mentee-message-view-mentor {
    width: 36px;
    min-height: 36px;

    padding: 0;

    font-size: 0;
  }

  .mentee-message-view-mentor svg {
    width: 16px;
    height: 16px;
  }

  .mentee-message-history {
    padding: 14px 12px;
  }

  .mentee-message-bubble {
    max-width: 88%;
  }

  .mentee-message-composer {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding: 10px;
  }

  .mentee-message-send-button {
    width: 44px;
    padding: 0;

    font-size: 0;
  }

  .mentee-message-send-button span {
    display: none;
  }

  .mentee-message-modal-backdrop {
    align-items: flex-end;

    padding: 12px;
  }

  .mentee-start-conversation-modal {
    width: 100%;

    border-radius:
      18px 18px 14px 14px;
  }
}

@media (max-width: 480px) {
  .mentee-start-conversation-option {
    grid-template-columns:
      40px
      minmax(0, 1fr);
  }

  .mentee-start-conversation-action {
    grid-column: 2;

    justify-self: start;
  }

  .mentee-start-conversation-option
  .mentee-message-thread-avatar {
    width: 40px;
    height: 40px;
  }

  .mentee-messages-layout {
    min-height: 520px;
  }
}


/* =========================================================
   FINAL PREVIEW PARITY OVERRIDES
   ========================================================= */

.mentee-message-thread {
  position: relative;
}

.mentee-message-thread.active {
  background: #f3f5f7;
}

.mentee-message-thread.active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #ff5303;
  content: "";
}

.mentee-message-conversation-header small {
  color: #c13c00;
  font-weight: 700;
}


/* =========================================================
   FINAL MESSAGE WORKSPACE CONSISTENCY FIX
   ---------------------------------------------------------
   The main index.css still contains an older Messages design.
   These scoped rules keep the current empty/new conversation
   state visually identical to the approved filled state.
   ========================================================= */

.mentee-messages-page .mentee-messages-layout {
  grid-template-columns:
    minmax(220px, 260px)
    minmax(0, 1fr) !important;

  height:
    clamp(
      480px,
      62vh,
      600px
    ) !important;

  min-height: 0 !important;

  background: #ffffff !important;
}

/* LEFT CONVERSATION LIST
   Keep the first conversation directly below the heading.
   Do not allow the single row to stretch vertically. */
.mentee-messages-page .mentee-message-threads {
  display: grid !important;
  grid-template-rows:
    auto
    minmax(0, 1fr) !important;

  min-height: 0 !important;

  background: #ffffff !important;
}

.mentee-messages-page .mentee-message-threads-heading {
  padding: 18px !important;

  background: #ffffff !important;
}

.mentee-messages-page .mentee-message-thread-list {
  display: block !important;
  align-content: start !important;

  min-height: 0 !important;
  padding: 0 !important;

  overflow-y: auto !important;
}

.mentee-messages-page .mentee-message-thread {
  position: relative !important;

  display: grid !important;
  grid-template-columns:
    42px
    minmax(0, 1fr) !important;
  align-items: center !important;

  gap: 10px !important;

  width: 100% !important;
  min-height: 68px !important;
  height: auto !important;
  padding: 13px 14px !important;
  margin: 0 !important;

  border: 0 !important;
  border-bottom: 1px solid #eef1f5 !important;
  border-radius: 0 !important;

  background: #ffffff !important;
}

.mentee-messages-page .mentee-message-thread:hover {
  background: #f8f9fb !important;
}

.mentee-messages-page .mentee-message-thread.active {
  background: #f3f5f7 !important;
}

.mentee-messages-page .mentee-message-thread.active::before {
  position: absolute !important;
  top: 9px !important;
  bottom: 9px !important;
  left: 0 !important;

  width: 3px !important;

  border-radius:
    0 4px 4px 0 !important;

  background: #ff5303 !important;

  content: "" !important;
}

/* Keep the mentor avatar neutral.
   Remove the old orange/teal gradient from index.css. */
.mentee-messages-page .mentee-message-thread-initials {
  display: grid !important;
  place-items: center !important;

  color: #101419 !important;
  background: #f3f5f7 !important;

  font-size: 11px !important;
  font-weight: 600 !important;
}

/* RIGHT CONVERSATION HEADER
   The mentor name stays in the same location for both
   empty and filled conversations. */
.mentee-messages-page .mentee-message-conversation {
  display: grid !important;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto
    auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

  background: #ffffff !important;
}

.mentee-messages-page .mentee-message-conversation-header {
  display: grid !important;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto !important;
  align-items: center !important;

  gap: 12px !important;

  min-height: 78px !important;
  padding: 14px 16px !important;

  border-bottom:
    1px solid #e4e8ef !important;

  background: #ffffff !important;
}

.mentee-messages-page .mentee-message-conversation-title {
  min-width: 0 !important;
}

.mentee-messages-page
.mentee-message-conversation-title small {
  display: block !important;

  color: #c13c00 !important;

  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

.mentee-messages-page
.mentee-message-conversation-title h2 {
  margin: 4px 0 2px !important;

  color: #101419 !important;

  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

.mentee-messages-page
.mentee-message-conversation-title p {
  margin: 0 !important;

  color: #6f8095 !important;

  font-size: 10px !important;
}

/* Keep View mentor at the far right rather than beside the name. */
.mentee-messages-page .mentee-message-view-mentor {
  justify-self: end !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  min-height: 34px !important;
  padding: 0 10px !important;

  border: 0 !important;
  border-radius: 7px !important;

  color: #c13c00 !important;
  background: transparent !important;
}

/* CONVERSATION CANVAS
   Remove the old peach canvas so empty and filled states
   use the same clean neutral workspace. */
.mentee-messages-page .mentee-message-history {
  min-height: 0 !important;
  padding: 18px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: #fbfcfd !important;
}

/* Empty/new conversation remains centered within the
   message history only. It must not move the mentor row. */
.mentee-messages-page .mentee-message-new-thread {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;

  min-height: 100% !important;
  height: 100% !important;
  padding: 28px !important;

  text-align: center !important;
}

.mentee-messages-page
.mentee-message-new-thread
.mentee-message-thread-initials {
  color: #101419 !important;
  background: #f3f5f7 !important;
}

/* COMPOSER
   Keep it visually attached to the conversation canvas. */
.mentee-messages-page .mentee-message-composer {
  padding: 12px 14px !important;

  border-top:
    1px solid #e4e8ef !important;

  background: #ffffff !important;
}

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

@media (max-width: 900px) {
  .mentee-messages-page .mentee-messages-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows:
      auto
      minmax(0, 1fr) !important;

    height:
      min(
        640px,
        calc(100dvh - 170px)
      ) !important;

    min-height: 540px !important;
  }

  .mentee-messages-page .mentee-message-threads {
    max-height: 180px !important;

    border-right: 0 !important;
    border-bottom:
      1px solid #e4e8ef !important;
  }

  .mentee-messages-page .mentee-message-thread-list {
    display: flex !important;

    gap: 7px !important;

    padding: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .mentee-messages-page .mentee-message-thread {
    flex: 0 0 min(210px, 74vw) !important;

    min-height: 58px !important;

    border: 1px solid #e4e8ef !important;
    border-radius: 10px !important;
  }

  .mentee-messages-page .mentee-message-conversation-header {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto !important;

    min-height: 68px !important;
    padding: 10px 12px !important;
  }
}


/* =========================================================
   FINAL CHAT COLOUR SOFTENING
   ---------------------------------------------------------
   Keep orange as the brand accent without pairing it with
   heavy black chat surfaces.
   ========================================================= */

/* Conversation list active state */
.mentee-messages-page .mentee-message-thread.active {
  background: #fff8f4 !important;
}

/* Mentor initials/avatar */
.mentee-messages-page .mentee-message-thread-initials {
  border: 1px solid #ffd6c2 !important;

  color: #c13c00 !important;
  background: #fff2eb !important;
}

/* Empty/new conversation avatar */
.mentee-messages-page
.mentee-message-new-thread
.mentee-message-thread-initials {
  border: 1px solid #ffd6c2 !important;

  color: #c13c00 !important;
  background: #fff2eb !important;
}

/* Chat canvas stays very light and neutral */
.mentee-messages-page .mentee-message-history {
  background: #fafbfc !important;
}

/* Received messages */
.mentee-messages-page
.mentee-message-row.theirs
.mentee-message-bubble {
  border-color: #e1e6ed !important;

  color: #2d353f !important;
  background: #ffffff !important;

  box-shadow:
    0 2px 8px
    rgba(16, 20, 25, 0.025) !important;
}

/* Sent messages
   Replace the previous black bubble with a light orange
   brand treatment that is easier on the eye. */
.mentee-messages-page
.mentee-message-row.mine
.mentee-message-bubble {
  border-color: #ffd1bb !important;

  color: #2d353f !important;
  background: #fff3ec !important;

  box-shadow: none !important;
}

.mentee-messages-page
.mentee-message-row.mine
.mentee-message-bubble p {
  color: #2d353f !important;
}

.mentee-messages-page
.mentee-message-row.mine
.mentee-message-bubble small {
  color: #9b6a55 !important;
}

/* Composer remains clean.
   Orange is reserved for the action, not the whole chat. */
.mentee-messages-page .mentee-message-composer {
  background: #ffffff !important;
}

.mentee-messages-page .mentee-message-composer textarea {
  border-color: #c9d2df !important;

  color: #101419 !important;
  background: #ffffff !important;
}

.mentee-messages-page .mentee-message-composer textarea:hover {
  border-color: #97aac2 !important;
}

.mentee-messages-page .mentee-message-composer textarea:focus,
.mentee-messages-page .mentee-message-composer textarea:focus-visible {
  border-color: #4c5867 !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10) !important;
}


/* =========================================================
   REAL-TIME UNREAD MESSAGE INDICATOR
   ========================================================= */

.mentee-messages-page .mentee-message-thread {
  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto !important;
}

.mentee-messages-page
.mentee-message-thread.has-unread
.mentee-message-thread-copy strong {
  color: #101419;
  font-weight: 700;
}

.mentee-message-thread-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;
  padding: 0 6px;

  border-radius: 999px;

  color: #ffffff;
  background: #ff5303;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   FINAL RESPONSIVE MESSAGING POLISH
   Compact actions and consistent behaviour across desktop,
   tablet and mobile. Buttons remain content-width.
   ========================================================= */

/* ---------- DESKTOP / SHARED ---------- */

.mentee-messages-page .mentee-message-page-toolbar {
  align-items: center;
  flex-wrap: wrap;
}

.mentee-messages-page .mentee-message-start-button,
.mentee-messages-page .mentee-message-primary-button,
.mentee-messages-page .mentee-message-send-button {
  width: auto !important;
  max-width: max-content;
}

.mentee-messages-page .mentee-message-start-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 15px;
}

/* ---------- TABLET ---------- */

@media (max-width: 1024px) {
  .mentee-messages-page .mentee-message-page-toolbar {
    gap: 12px;
  }

  .mentee-messages-page .mentee-message-start-button {
    margin-left: auto;
  }

  .mentee-messages-page .mentee-message-bubble {
    max-width: 82% !important;
  }
}

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

@media (max-width: 760px) {
  .mentee-messages-page {
    padding-top: 12px;
  }

  .mentee-messages-page .mentee-message-page-toolbar {
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 10px 12px;

    margin-bottom: 12px;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  .mentee-messages-page .mentee-message-page-toolbar > div {
    flex: 1 1 220px;
    min-width: 0;
  }

  .mentee-messages-page .mentee-message-start-button {
    align-self: flex-start;

    flex: 0 0 auto;

    width: auto !important;
    min-width: 0 !important;
    min-height: 38px;

    padding: 0 13px;

    font-size: 12px;
  }

  .mentee-messages-page .mentee-messages-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows:
      auto
      minmax(0, 1fr) !important;

    height:
      min(
        650px,
        calc(100dvh - 210px)
      ) !important;

    min-height: 520px !important;

    border-radius: 14px;
  }

  .mentee-messages-page .mentee-message-threads {
    max-height: 156px !important;

    border-right: 0 !important;
    border-bottom: 1px solid #e4e8ef !important;
  }

  .mentee-messages-page .mentee-message-threads-heading {
    padding: 11px 13px !important;
  }

  .mentee-messages-page .mentee-message-threads-heading h2 {
    font-size: 14px !important;
  }

  .mentee-messages-page .mentee-message-thread-list {
    display: flex !important;

    gap: 7px !important;

    padding: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: thin;
  }

  .mentee-messages-page .mentee-message-thread {
    flex: 0 0 min(210px, 72vw) !important;

    min-height: 58px !important;

    padding: 9px 10px !important;

    border: 1px solid #e4e8ef !important;
    border-radius: 10px !important;

    background: #ffffff !important;
  }

  .mentee-messages-page .mentee-message-thread.active {
    border-color: #ffd1bb !important;
    background: #fff8f4 !important;
  }

  .mentee-messages-page .mentee-message-thread.active::before {
    display: none !important;
  }

  .mentee-messages-page .mentee-message-thread-avatar,
  .mentee-messages-page .mentee-message-thread-initials {
    width: 38px !important;
    height: 38px !important;

    border-radius: 9px !important;
  }

  .mentee-messages-page .mentee-message-conversation-header {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto !important;

    gap: 9px !important;

    min-height: 66px !important;
    padding: 9px 11px !important;
  }

  .mentee-messages-page .mentee-message-mobile-back {
    width: 36px !important;
    height: 36px !important;
  }

  .mentee-messages-page .mentee-message-conversation-title h2 {
    font-size: 14px !important;
  }

  .mentee-messages-page .mentee-message-view-mentor {
    justify-self: end !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;

    padding: 0 2px !important;

    border: 0 !important;

    color: #c13c00 !important;
    background: transparent !important;

    font-size: 10px !important;
  }

  .mentee-messages-page .mentee-message-view-mentor span {
    display: inline !important;
  }

  .mentee-messages-page .mentee-message-history {
    padding: 13px 10px !important;
  }

  .mentee-messages-page .mentee-message-bubble {
    max-width: 86% !important;

    padding: 10px 12px !important;

    border-radius: 14px !important;
  }

  .mentee-messages-page .mentee-message-composer {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    gap: 8px !important;

    padding: 9px 10px !important;
  }

  .mentee-messages-page .mentee-message-composer textarea {
    min-height: 42px !important;

    padding: 10px 11px !important;

    font-size: 16px !important;
  }

  .mentee-messages-page .mentee-message-send-button {
    width: auto !important;
    min-width: 74px !important;
    min-height: 42px !important;

    padding: 0 12px !important;

    font-size: 11px !important;
  }

  .mentee-messages-page .mentee-message-send-button span {
    display: inline !important;
  }
}

/* ---------- SMALL PHONE ---------- */

@media (max-width: 480px) {
  .mentee-messages-page .mentee-message-page-toolbar {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
    align-items: end !important;
  }

  .mentee-messages-page .mentee-message-page-toolbar > div {
    min-width: 0;
  }

  .mentee-messages-page .mentee-message-start-button {
    min-height: 36px;
    padding: 0 11px;

    font-size: 11px;
  }

  .mentee-messages-page .mentee-messages-layout {
    height:
      min(
        620px,
        calc(100dvh - 190px)
      ) !important;

    min-height: 500px !important;
  }

  .mentee-messages-page .mentee-message-thread {
    flex-basis: min(190px, 70vw) !important;
  }

  .mentee-messages-page .mentee-message-bubble {
    max-width: 90% !important;
  }

  .mentee-messages-page .mentee-message-send-button {
    min-width: 46px !important;
    width: 46px !important;

    padding: 0 !important;

    font-size: 0 !important;
  }

  .mentee-messages-page .mentee-message-send-button span {
    display: none !important;
  }

  .mentee-messages-page .mentee-message-send-button svg {
    width: 17px;
    height: 17px;
  }
}


/* =========================================================
   PRODUCTION CLOSEOUT OVERRIDES
   Readability + viewport-safe chat height
   ========================================================= */

/* Keep important supporting text readable. */
.mentee-messages-page .mentee-message-toolbar-eyebrow,
.mentee-messages-page .mentee-message-threads-heading .eyebrow,
.mentee-messages-page .mentee-start-conversation-header span {
  font-size: 10px !important;
}

.mentee-messages-page .mentee-message-page-toolbar p,
.mentee-messages-page .mentee-message-new-thread p,
.mentee-messages-page .mentee-message-no-selection p,
.mentee-messages-page .mentee-start-conversation-header p {
  font-size: 12px !important;
}

.mentee-messages-page .mentee-message-thread-copy strong,
.mentee-messages-page .mentee-start-conversation-copy strong {
  font-size: 13px !important;
}

.mentee-messages-page .mentee-message-thread-copy small,
.mentee-messages-page .mentee-start-conversation-copy small,
.mentee-messages-page .mentee-start-conversation-action {
  font-size: 11px !important;
}

.mentee-messages-page .mentee-message-conversation-title small {
  font-size: 10px !important;
}

.mentee-messages-page .mentee-message-conversation-title p {
  font-size: 11px !important;
}

.mentee-messages-page .mentee-message-bubble p {
  font-size: 13px !important;
}

.mentee-messages-page .mentee-message-bubble small,
.mentee-messages-page .mentee-message-error {
  font-size: 10px !important;
}

.mentee-messages-page .mentee-message-empty-list p {
  font-size: 11px !important;
}

.mentee-messages-page .mentee-message-thread-unread {
  font-size: 10px !important;
}

/* Let the chat fit shorter screens without forcing an oversized workspace. */
.mentee-messages-page .mentee-messages-layout {
  height:
    clamp(
      480px,
      calc(100dvh - 250px),
      600px
    ) !important;

  min-height: 0 !important;
}

@media (max-width: 900px) {
  .mentee-messages-page .mentee-messages-layout {
    height:
      clamp(
        480px,
        calc(100dvh - 220px),
        620px
      ) !important;

    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  .mentee-messages-page .mentee-messages-layout {
    height:
      clamp(
        460px,
        calc(100dvh - 220px),
        610px
      ) !important;

    min-height: 0 !important;
  }

  .mentee-messages-page .mentee-message-thread-copy strong {
    font-size: 12px !important;
  }

  .mentee-messages-page .mentee-message-thread-copy small {
    font-size: 11px !important;
  }

  .mentee-messages-page .mentee-message-conversation-title small {
    font-size: 9px !important;
  }

  .mentee-messages-page .mentee-message-conversation-title p {
    font-size: 11px !important;
  }

  .mentee-messages-page .mentee-message-bubble p {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .mentee-messages-page .mentee-messages-layout {
    height:
      clamp(
        440px,
        calc(100dvh - 205px),
        580px
      ) !important;

    min-height: 0 !important;
  }
}
/* =========================================================
   BECOME A MENTOR
   Production styling.
   White canvas + neutral secondary colours + orange primary.
   No green or teal on this page.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE CANVAS
   --------------------------------------------------------- */

html:has(.mentor-application-form),
body:has(.mentor-application-form),
body:has(.mentor-application-form) #root,
body:has(.mentor-application-form) .dashboard-layout,
body:has(.mentor-application-form) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentor-application-form)
.dashboard-content {
  min-height: 100vh !important;
}

body:has(.mentor-application-form)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentor-application-form)
.dashboard-content > header p,
body:has(.mentor-application-form)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

body:has(.mentor-application-form)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.mentor-application-form {
  display: grid;

  gap: 18px;

  width: 100%;
  min-width: 0;

  margin-top: 0;
  padding-bottom:
    max(
      72px,
      calc(
        52px +
        env(safe-area-inset-bottom)
      )
    );

  color: #101419;
}

/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.mentor-application-intro {
  display: block;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff !important;
  background-image: none !important;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

.mentor-application-intro-icon {
  display: none !important;
}

.mentor-application-intro
.eyebrow {
  color: #ff5303 !important;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.mentor-application-intro h2 {
  margin: 7px 0;

  color: #101419;

  font-size:
    clamp(
      22px,
      3vw,
      30px
    );
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.mentor-application-intro p {
  max-width: 820px;

  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   SECTION CARDS
   --------------------------------------------------------- */

.mentor-application-section {
  min-width: 0;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff !important;
  background-image: none !important;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

.mentor-application-section-heading {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  margin-bottom: 22px;
}

.mentor-application-section-heading
> svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #ff5303 !important;
}

.mentor-application-section-heading h3 {
  margin: 0 0 4px;

  color: #101419;

  font-size: 16px;
  font-weight: 650;
}

.mentor-application-section-heading p {
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.mentor-application-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 16px;
}

.mentor-application-grid.two-columns {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;

  margin-top: 18px;
  margin-bottom: 18px;
}

/* ---------------------------------------------------------
   LABELS
   --------------------------------------------------------- */

.mentor-application-form label,
.mentor-option-group legend {
  color: #101419 !important;

  font-size: 13px;
  font-weight: 600;
}

.mentor-application-form
label > small {
  color: #6f8095 !important;

  font-size: 10px;
  font-weight: 500;
}

.mentor-application-full-field {
  display: block;

  width: 100%;

  margin-top: 18px;
}

.mentor-application-full-field:first-of-type {
  margin-top: 0;
}

.mentor-application-full-field
> small {
  display: block;

  margin-top: 7px;

  color: #6f8095 !important;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   TEXT FIELDS
   Calm neutral focus treatment for accessibility.
   --------------------------------------------------------- */

.mentor-application-form
input[type="text"],
.mentor-application-form
input[type="number"],
.mentor-application-form textarea {
  display: block;

  width: 100%;

  margin-top: 7px;
  padding: 0 14px;

  border:
    1px solid
    #c9d2df !important;

  border-radius: 10px;

  outline: none !important;

  color: #101419 !important;
  background: #ffffff !important;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;

  box-shadow: none !important;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.mentor-application-form
input[type="text"],
.mentor-application-form
input[type="number"] {
  height: 46px;
}

.mentor-application-form textarea {
  min-height: 124px;

  padding-top: 12px;
  padding-bottom: 12px;

  line-height: 1.55;

  resize: vertical;
}

.mentor-application-form
input[type="text"]:hover,
.mentor-application-form
input[type="number"]:hover,
.mentor-application-form
textarea:hover,
.mentor-application-select-field
select:hover {
  border-color:
    #97aac2 !important;
}

/* Neutral focus instead of bright orange/green. */
.mentor-application-form
input[type="text"]:focus,
.mentor-application-form
input[type="number"]:focus,
.mentor-application-form
textarea:focus,
.mentor-application-form
input[type="text"]:focus-visible,
.mentor-application-form
input[type="number"]:focus-visible,
.mentor-application-form
textarea:focus-visible,
.mentor-application-select-field
select:focus,
.mentor-application-select-field
select:focus-visible {
  border-color:
    #4c5867 !important;

  outline: none !important;

  background: #ffffff !important;

  box-shadow:
    0 0 0 2px
    rgba(
      76,
      88,
      103,
      0.10
    ) !important;
}

.mentor-application-form
input::placeholder,
.mentor-application-form
textarea::placeholder {
  color: #97aac2 !important;

  opacity: 1;
}

.mentor-application-form
input:disabled,
.mentor-application-form
textarea:disabled,
.mentor-application-form
select:disabled {
  color: #8794a4 !important;
  background: #f7f8fa !important;

  cursor: not-allowed;

  opacity: 1;
}

/* ---------------------------------------------------------
   OPTION GROUPS
   White surfaces only. Selection is shown with a calm
   secondary border while the checkbox itself stays orange.
   --------------------------------------------------------- */

.mentor-application-form
.mentor-option-group {
  margin: 20px 0 0;
  padding: 0;

  border: 0;
}

.mentor-application-form
.mentor-option-group > p {
  margin: 5px 0 12px;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.5;
}

.mentor-application-form
.mentor-option-group.compact {
  margin-top: 0;
  padding: 16px;

  border: 1px solid #e4e8ef !important;
  border-radius: 12px;

  background: #ffffff !important;
  background-image: none !important;
}

.mentor-application-form
.mentor-checkbox-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}

.mentor-application-form
.mentor-checkbox-stack {
  display: grid;

  gap: 10px;

  margin-top: 11px;
}

.mentor-application-form
.mentor-option-group.compact
.mentor-checkbox-stack {
  padding: 0 !important;

  border: 0 !important;

  background: #ffffff !important;
  background-image: none !important;
}

.mentor-application-form
.mentor-checkbox-grid label,
.mentor-application-form
.mentor-checkbox-stack label {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;

  padding: 11px 12px;

  border: 1px solid #e4e8ef !important;
  border-radius: 10px;

  color: #4c5867 !important;
  background: #ffffff !important;
  background-image: none !important;

  font-size: 11px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.mentor-application-form
.mentor-checkbox-grid label:hover,
.mentor-application-form
.mentor-checkbox-stack label:hover {
  border-color: #c9d2df !important;

  background: #f8f9fb !important;
}

.mentor-application-form
.mentor-checkbox-grid input,
.mentor-application-form
.mentor-checkbox-stack input {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  margin: 0;

  accent-color: #ff5303 !important;
}

/* No orange/peach selected-row background. */
.mentor-application-form
.mentor-checkbox-grid
label:has(input:checked),
.mentor-application-form
.mentor-checkbox-stack
label:has(input:checked) {
  border-color: #4c5867 !important;

  color: #2d353f !important;
  background: #ffffff !important;
  background-image: none !important;
}

/* Calm keyboard focus. */
.mentor-application-form
.mentor-checkbox-grid
input:focus-visible,
.mentor-application-form
.mentor-checkbox-stack
input:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.28
    );

  outline-offset: 2px;
}

/* ---------------------------------------------------------
   SELECT
   --------------------------------------------------------- */

.mentor-application-select-field {
  position: relative;

  width: 100%;

  margin-top: 7px;
}

.mentor-application-select-field
select {
  display: block;

  width: 100%;
  height: 46px;

  margin: 0;
  padding:
    0 48px
    0 14px;

  border:
    1px solid
    #c9d2df !important;

  border-radius: 10px;

  outline: none !important;

  color: #101419 !important;
  background: #ffffff !important;

  font-family: inherit;
  font-size: 13px;

  cursor: pointer;

  box-shadow: none !important;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.mentor-application-select-icon {
  position: absolute;

  top: 50%;
  right: 15px;

  color: #6f8095 !important;

  pointer-events: none;

  transform:
    translateY(-50%);
}

/* ---------------------------------------------------------
   REVIEW NOTICE
   No green/teal.
   --------------------------------------------------------- */

.mentor-application-review-notice {
  padding: 13px 14px;

  border:
    1px solid
    #ffcbc5 !important;
  border-radius: 11px;

  color: #4c5867 !important;
  background:
    #fffaf9 !important;

  font-size: 11px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   ERROR
   --------------------------------------------------------- */

.mentor-application-error {
  margin: 0;

  border-color:
    #ffcbc5 !important;

  color: #832600 !important;
  background:
    #fff4f3 !important;
}

/* ---------------------------------------------------------
   ACTIONS
   Dark neutral secondary + orange primary.
   Same size and weight as the other production buttons.
   --------------------------------------------------------- */

.mentor-application-form
.mentor-application-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  padding-top: 2px;
}

.mentor-application-form
.mentor-application-actions
.mentor-application-cancel,
.mentor-application-form
.mentor-application-actions
.mentor-application-submit {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 0 16px;

  border-radius: 9px;

  font-family: inherit;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1;

  cursor: pointer;

  box-shadow: none !important;
  transform: none !important;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    opacity 160ms ease;
}

/* Secondary action */
.mentor-application-form
.mentor-application-actions
.mentor-application-cancel {
  min-width: 96px;

  border: 1px solid #101419 !important;

  color: #ffffff !important;
  background: #101419 !important;
}

.mentor-application-form
.mentor-application-actions
.mentor-application-cancel:hover:not(:disabled) {
  border-color: #2d353f !important;

  color: #ffffff !important;
  background: #2d353f !important;
}

/* Primary action */
.mentor-application-form
.mentor-application-actions
.mentor-application-submit {
  min-width: 164px;

  border: 1px solid #ff5303 !important;

  color: #ffffff !important;
  background: #ff5303 !important;
}

.mentor-application-form
.mentor-application-actions
.mentor-application-submit:hover:not(:disabled) {
  border-color: #c13c00 !important;

  color: #ffffff !important;
  background: #c13c00 !important;

  box-shadow: none !important;
  transform: none !important;
}

.mentor-application-form
.mentor-application-actions
.mentor-application-cancel:focus-visible,
.mentor-application-form
.mentor-application-actions
.mentor-application-submit:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.26
    );

  outline-offset: 2px;
}

.mentor-application-form
.mentor-application-actions
.mentor-application-cancel:disabled,
.mentor-application-form
.mentor-application-actions
.mentor-application-submit:disabled {
  cursor: not-allowed;

  opacity: 0.58;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

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

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

/* ---------------------------------------------------------
   MOBILE / SMALL TABLET
   --------------------------------------------------------- */

@media (max-width: 700px) {
  .mentor-application-form {
    gap: 16px;

    padding-bottom:
      max(
        64px,
        calc(
          48px +
          env(
            safe-area-inset-bottom
          )
        )
      );
  }

  .mentor-application-intro {
    gap: 13px;

    padding: 20px;
  }

  .mentor-application-section {
    padding: 20px;
  }

  .mentor-application-grid.two-columns,
  .mentor-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .mentor-application-grid.two-columns {
    gap: 16px;
  }

  .mentor-application-actions {
    align-items: stretch;

    flex-direction:
      column-reverse;
  }

  .mentor-application-cancel,
  .mentor-application-submit {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 520px) {
  .mentor-application-intro {
    padding: 18px;
  }

  .mentor-application-section {
    padding: 18px;
  }

  .mentor-application-intro,
  .mentor-application-section {
    border-radius: 14px;
  }

  .mentor-checkbox-grid label,
  .mentor-checkbox-stack label {
    padding: 10px 11px;
  }
}
/* =========================================================
   MENTOR APPLICATION STATUS
   Application history + review status.
   White + dark neutral + orange only.
   ========================================================= */

html:has(.mentor-status-page),
body:has(.mentor-status-page),
body:has(.mentor-status-page) #root,
body:has(.mentor-status-page) .dashboard-layout,
body:has(.mentor-status-page) .dashboard-content,
html:has(.mentor-status-dashboard-center),
body:has(.mentor-status-dashboard-center),
body:has(.mentor-status-dashboard-center) #root,
body:has(.mentor-status-dashboard-center) .dashboard-layout,
body:has(.mentor-status-dashboard-center) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

.mentor-status-page {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 360px);
  align-items: start;

  gap: 20px;

  width: 100%;
  min-width: 0;

  padding:
    24px 0
    max(
      72px,
      calc(
        52px +
        env(safe-area-inset-bottom)
      )
    );
}

.mentor-status-page--editing {
  grid-template-columns: 1fr;

  place-items: start center;
}

.mentor-status-dashboard-center {
  display: grid;
  place-items: center;

  width: 100%;
  min-width: 0;

  min-height:
    clamp(
      470px,
      calc(100vh - 225px),
      760px
    );

  padding:
    38px 0
    max(
      72px,
      calc(
        52px +
        env(safe-area-inset-bottom)
      )
    );
}

.mentor-status-loading {
  display: grid;
  place-items: center;

  gap: 12px;

  color: #4c5867;

  text-align: center;
}

.mentor-status-loading p {
  margin: 0;

  font-size: 14px;
}

/* =========================================================
   STATUS CARD
   ========================================================= */

.mentor-application-status {
  width: 100%;
  min-width: 0;

  padding: 34px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  color: #101419;
  background: #ffffff;

  box-shadow:
    0 10px 30px
    rgba(16, 20, 25, 0.035);
}

.mentor-status-empty {
  width: min(760px, 100%);
}

.mentor-status-empty
> .eyebrow {
  color: #ff5303;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-status-empty-button {
  margin-top: 24px;
}

.mentor-status-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  width: 100%;
}

.mentor-status-top-actions {
  display: flex;
  align-items: center;

  gap: 8px;
}

.mentor-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;

  padding: 0 11px;

  border: 1px solid #ffcbc5;
  border-radius: 999px;

  color: #c13c00;
  background: #fffaf9;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mentor-status-badge--approved {
  border-color: #c9d2df;

  color: #101419;
  background: #eef1f5;
}

.mentor-status-badge--rejected {
  border-color: #e6b8bf;

  color: #b74750;
  background: #fff0f1;
}

.mentor-application-status h2 {
  max-width: 700px;

  margin: 24px 0 14px;

  color: #101419;

  font-size:
    clamp(
      28px,
      3.6vw,
      38px
    );

  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.mentor-status-description {
  max-width: 700px;

  margin: 0;

  color: #4c5867;

  font-size: 14px;
  line-height: 1.75;
}

.mentor-status-name {
  margin: 18px 0 0;

  color: #6f8095;

  font-size: 12px;
  line-height: 1.55;
}

.mentor-status-name strong {
  color: #2d353f;

  font-weight: 500;
}

.mentor-status-meta-row {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 18px;

  margin-top: 18px;
}

.mentor-status-meta-row span {
  display: inline-flex;
  align-items: center;

  color: #8794a4;

  font-size: 10px;
  line-height: 1.4;
}

/* =========================================================
   STATUS ACTIONS
   ========================================================= */

.mentor-status-edit-button,
.mentor-status-reapply-button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  flex-shrink: 0;

  min-height: 38px;

  padding: 0 11px;

  border-radius: 8px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;

  cursor: pointer;

  box-shadow: none;
  transform: none;
}

.mentor-status-edit-button {
  border: 1px solid #d7dee7;

  color: #2d353f;
  background: #ffffff;
}

.mentor-status-edit-button:hover {
  border-color: #aeb9c7;

  background: #f7f8fa;
}

.mentor-status-reapply-button {
  border: 1px solid #ff5303;

  color: #ffffff;
  background: #ff5303;
}

.mentor-status-reapply-button:hover {
  border-color: #c13c00;

  background: #c13c00;
}

.mentor-status-edit-button:focus-visible,
.mentor-status-reapply-button:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.25
    );

  outline-offset: 2px;
}

/* =========================================================
   MENTORING AREAS
   ========================================================= */

.mentor-status-areas {
  margin-top: 24px;

  padding: 18px;

  border: 1px solid #eef1f5;
  border-radius: 12px;

  background: #fbfcfd;
}

.mentor-status-areas
> span {
  display: block;

  margin-bottom: 11px;

  color: #6f8095;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mentor-status-areas
> div {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.mentor-status-areas small {
  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding: 0 10px;

  border: 1px solid #dfe4eb;
  border-radius: 999px;

  color: #2d353f;
  background: #ffffff;

  font-size: 11px;
  font-weight: 500;
}

/* =========================================================
   FEEDBACK / SUCCESS
   ========================================================= */

.application-feedback,
.mentor-status-success-message {
  margin: 24px 0 0;

  padding: 14px 15px;

  border-radius: 11px;

  font-size: 12px;
  line-height: 1.6;
}

.application-feedback {
  border: 1px solid #e4e8ef;

  color: #4c5867;
  background: #f8f9fb;
}

.application-feedback strong {
  color: #101419;
}

.application-feedback p {
  margin: 5px 0 0;
}

.mentor-application-status
.mentor-status-success-message {
  border: 1px solid #ffcbc5 !important;

  color: #4c5867 !important;
  background: #fffaf9 !important;

  box-shadow: none !important;
}

.mentor-status-footer {
  margin-top: 28px;

  padding-top: 20px;

  border-top: 1px solid #eef1f5;
}

.mentor-status-footer p {
  margin: 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   APPLICATION HISTORY
   ========================================================= */

.mentor-application-history {
  min-width: 0;

  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

.mentor-history-heading {
  display: flex;
  align-items: flex-start;

  gap: 10px;
}

.mentor-history-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 34px;
  height: 34px;

  border-radius: 9px;

  color: #ff5303;
  background: #fff4ef;
}

.mentor-history-heading h3 {
  margin: 1px 0 4px;

  color: #101419;

  font-size: 15px;
  font-weight: 650;
}

.mentor-history-heading p {
  margin: 0;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.55;
}

.mentor-history-list {
  display: grid;

  gap: 8px;

  margin-top: 18px;
}

.mentor-history-item {
  appearance: none;
  -webkit-appearance: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  width: 100%;

  padding: 12px;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #2d353f;
  background: #ffffff;

  font-family: inherit;

  text-align: left;

  cursor: pointer;
}

.mentor-history-item:hover {
  border-color: #c9d2df;

  background: #fbfcfd;
}

.mentor-history-item--active {
  border-color: #4c5867;

  background: #ffffff;
}

.mentor-history-item-main {
  display: grid;

  gap: 3px;
}

.mentor-history-item-main strong {
  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

.mentor-history-item-main small {
  color: #8794a4;

  font-size: 9px;
}

.mentor-history-status {
  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 0 8px;

  border: 1px solid #d7dee7;
  border-radius: 999px;

  color: #4c5867;
  background: #f7f8fa;

  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.mentor-history-status--pending {
  border-color: #ffcbc5;

  color: #c13c00;
  background: #fffaf9;
}

.mentor-history-status--rejected {
  border-color: #e6b8bf;

  color: #b74750;
  background: #fff0f1;
}

.mentor-history-status--approved {
  border-color: #c9d2df;

  color: #101419;
  background: #eef1f5;
}

/* =========================================================
   EDIT / REAPPLY FORM
   ========================================================= */

.mentor-application-content {
  width: min(820px, 100%);

  padding: 36px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 10px 30px
    rgba(16, 20, 25, 0.035);
}

.mentor-application-content
> .eyebrow {
  color: #ff5303;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-application-content h1 {
  margin: 10px 0 10px;

  color: #101419;

  font-size:
    clamp(
      28px,
      4vw,
      34px
    );

  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.mentor-application-introduction {
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.7;
}

.mentor-status-edit-form {
  display: grid;

  gap: 18px;

  margin-top: 28px;
}

.mentor-status-edit-form label,
.mentor-status-option-group legend {
  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.optional-label {
  margin-left: 6px;

  color: #6f8095;

  font-size: 10px;
  font-weight: 500;
}

.field-help {
  display: block;

  margin-top: 6px;

  color: #6f8095;

  font-size: 10px;
  font-weight: 400;
}

.mentor-status-edit-form input,
.mentor-status-edit-form select,
.mentor-status-edit-form textarea {
  display: block;

  width: 100%;

  margin-top: 7px;

  border: 1px solid #c9d2df;
  border-radius: 10px;

  outline: none;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;

  box-shadow: none;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.mentor-status-edit-form input,
.mentor-status-edit-form select {
  min-height: 46px;

  padding: 0 13px;
}

.mentor-status-edit-form textarea {
  min-height: 124px;

  padding: 12px 13px;

  line-height: 1.6;

  resize: vertical;
}

.mentor-status-edit-form input:hover,
.mentor-status-edit-form select:hover,
.mentor-status-edit-form textarea:hover {
  border-color: #97aac2;
}

.mentor-status-edit-form input:focus,
.mentor-status-edit-form select:focus,
.mentor-status-edit-form textarea:focus,
.mentor-status-edit-form input:focus-visible,
.mentor-status-edit-form select:focus-visible,
.mentor-status-edit-form textarea:focus-visible {
  border-color: #4c5867;

  outline: none;

  box-shadow:
    0 0 0 2px
    rgba(
      76,
      88,
      103,
      0.10
    );
}

.mentor-status-edit-form input::placeholder,
.mentor-status-edit-form textarea::placeholder {
  color: #97aac2;
}

.mentor-status-option-group {
  margin: 0;

  padding: 0;

  border: 0;
}

.mentor-status-option-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 9px;
}

.mentor-status-option-grid label {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;

  padding: 10px 11px;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;

  font-size: 10px;
  font-weight: 500;

  cursor: pointer;
}

.mentor-status-option-grid
input {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  margin: 0;

  accent-color: #ff5303;
}

.mentor-status-option-grid
label:has(input:checked) {
  border-color: #4c5867;

  color: #2d353f;
}

.mentor-status-form-error {
  margin: 0;
}

.mentor-status-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 4px;
}

.mentor-status-primary-button,
.mentor-status-secondary-button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 42px;

  padding: 0 16px;

  border-radius: 9px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;

  box-shadow: none;
  transform: none;
}

.mentor-status-primary-button {
  border: 1px solid #ff5303;

  color: #ffffff;
  background: #ff5303;
}

.mentor-status-primary-button:hover:not(:disabled) {
  border-color: #c13c00;

  background: #c13c00;
}

.mentor-status-secondary-button {
  border: 1px solid #c9d2df;

  color: #101419;
  background: #ffffff;
}

.mentor-status-secondary-button:hover:not(:disabled) {
  border-color: #97aac2;

  background: #f7f8fa;
}

.mentor-status-primary-button:disabled,
.mentor-status-secondary-button:disabled {
  cursor: not-allowed;

  opacity: 0.58;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .mentor-status-page {
    grid-template-columns: 1fr;
  }

  .mentor-application-history {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .mentor-status-page {
    gap: 16px;

    padding:
      20px 0
      max(
        64px,
        calc(
          48px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .mentor-status-dashboard-center {
    place-items: start center;

    min-height: 0;

    padding:
      26px 0
      max(
        64px,
        calc(
          48px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .mentor-application-status,
  .mentor-application-content {
    width: 100%;

    padding: 26px 21px;

    border-radius: 14px;
  }

  .mentor-status-top-row {
    align-items: flex-start;

    flex-direction: column;
  }

  .mentor-status-top-actions {
    width: 100%;
  }

  .mentor-status-edit-button,
  .mentor-status-reapply-button {
    width: 100%;
  }

  .mentor-application-status h2 {
    font-size:
      clamp(
        26px,
        7vw,
        32px
      );
  }

  .mentor-status-option-grid {
    grid-template-columns: 1fr;
  }

  .mentor-status-form-actions {
    align-items: stretch;

    flex-direction:
      column-reverse;
  }

  .mentor-status-primary-button,
  .mentor-status-secondary-button {
    width: 100%;
  }

  .mentor-application-history {
    padding: 20px;
  }
}

@media (max-width: 520px) {
  .mentor-application-status,
  .mentor-application-content {
    padding: 22px 18px;
  }

  .mentor-history-item {
    align-items: flex-start;
  }
}

/* =========================================================
   APPROVED APPLICATION -> MENTOR ACCOUNT
   ========================================================= */

.mentor-status-approved-action {
  display: grid;

  gap: 14px;

  margin-top: 24px;
  padding: 18px;

  border: 1px solid #ffcbc5;
  border-radius: 12px;

  background: #fffaf9;
}

.mentor-status-approved-copy strong,
.mentor-status-account-created strong {
  display: block;

  color: #101419;

  font-size: 12px;
  font-weight: 600;
}

.mentor-status-approved-copy p,
.mentor-status-account-created p {
  margin: 5px 0 0;

  color: #4c5867;

  font-size: 11px;
  line-height: 1.65;
}

.mentor-status-create-account-button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  width: fit-content;
  min-height: 42px;

  padding: 0 15px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    opacity 150ms ease;
}

.mentor-status-create-account-button:hover:not(:disabled) {
  border-color: #c13c00;

  background: #c13c00;
}

.mentor-status-create-account-button:focus-visible {
  outline:
    2px solid
    rgba(
      76,
      88,
      103,
      0.25
    );

  outline-offset: 2px;
}

.mentor-status-create-account-button:disabled {
  cursor: not-allowed;

  opacity: 0.58;
}

.mentor-status-account-created {
  display: flex;
  align-items: flex-start;

  gap: 10px;
}

.mentor-status-account-created > svg {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #ff5303;
}

.mentor-status-account-error {
  margin: 14px 0 0;

  padding: 11px 13px;

  border: 1px solid #efc5c8;
  border-radius: 9px;

  color: #8c2f37;
  background: #fff7f7;

  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .mentor-status-create-account-button {
    width: 100%;
  }
}

/* =========================================================
   MENTOR DASHBOARD
   ========================================================= */

.mentor-overview-page {
  width: 100%;
  display: grid;
  gap: 22px;
  padding-bottom:
    max(
      72px,
      calc(
        52px +
        env(safe-area-inset-bottom)
      )
    );
}

/* ---------- HERO ---------- */

.mentor-overview-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: end;
  gap: 28px;
  padding: 30px;
  border: 1px solid #172433;
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      #071b2b 0%,
      #0b2436 100%
    );
  color: #ffffff;
}

.mentor-overview-hero-copy {
  max-width: 720px;
}

.mentor-overview-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #ff7b3d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-overview-hero h2 {
  max-width: 660px;
  margin: 0;
  color: #ffffff;
  font-size:
    clamp(
      26px,
      3vw,
      38px
    );
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.mentor-overview-hero-copy > p {
  max-width: 650px;
  margin: 14px 0 0;
  color: #c8d1db;
  font-size: 12px;
  line-height: 1.7;
}

/* No inner card. */
.mentor-overview-availability {
  min-width: 190px;
  padding: 0 4px 4px 0;
  text-align: left;
}

.mentor-overview-availability > span {
  display: block;
  color: #9eabb8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mentor-overview-availability > strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 650;
}

.mentor-overview-availability > small {
  display: block;
  margin-top: 5px;
  color: #c8d1db;
  font-size: 11px;
}

/* ---------- STATS ---------- */

.mentor-overview-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 16px;
}

.mentor-overview-stat-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
}

.mentor-overview-stat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  background: #f7f8fa;
  color: #ff5303;
}

.mentor-overview-stat-card > small {
  display: block;
  color: #6f8095;
  font-size: 10px;
  font-weight: 650;
}

/*
  All three dashboard values use this exact same rule:
  Active mentees, Sessions this month and Mentor rating.
*/
.mentor-overview-stat-card > strong {
  display: block;
  min-height: 27px;
  margin-top: 8px;
  color: #101419;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.mentor-overview-stat-card > p {
  margin: 7px 0 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.5;
}

/* ---------- REQUESTS ---------- */

.mentor-overview-request-panel {
  padding: 24px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
}

.mentor-overview-request-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mentor-overview-pending-count {
  color: #6f8095;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.mentor-overview-request-panel h3 {
  margin: 0;
  color: #101419;
  font-size:
    clamp(
      20px,
      2.2vw,
      28px
    );
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.mentor-overview-request-panel > p {
  max-width: 760px;
  margin: 10px 0 0;
  color: #6f8095;
  font-size: 12px;
  line-height: 1.65;
}

/* ---------- BUTTON ---------- */

.mentor-overview-button {
  width: auto;
  min-height: 42px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 500;
}

/* ---------- TABLET ---------- */

@media (max-width: 1000px) {
  .mentor-overview-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mentor-overview-availability {
    min-width: 0;
    padding: 0;
  }
}

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

@media (max-width: 720px) {
  .mentor-overview-page {
    gap: 16px;
  }

  .mentor-overview-hero {
    gap: 20px;
    padding: 22px 18px;
    border-radius: 14px;
  }

  .mentor-overview-hero h2 {
    font-size: 27px;
  }

  .mentor-overview-hero-copy > p {
    font-size: 11px;
    line-height: 1.65;
  }

  .mentor-overview-stat-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mentor-overview-stat-card {
    display: grid;
    grid-template-columns:
      38px
      minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px;
  }

  .mentor-overview-stat-icon {
    grid-row:
      1 / span 3;
    margin: 0;
  }

  .mentor-overview-stat-card > small,
  .mentor-overview-stat-card > strong,
  .mentor-overview-stat-card > p {
    grid-column: 2;
  }

  .mentor-overview-stat-card > strong {
    min-height: 24px;
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
  }

  .mentor-overview-stat-card > p {
    margin-top: 3px;
  }

  .mentor-overview-request-panel {
    padding: 18px;
    border-radius: 14px;
  }

  .mentor-overview-request-heading {
    align-items: flex-start;
  }
}
/* =========================================================
   MENTOR DASHBOARD — MENTEE FEEDBACK
   Supplemental production styles.
   ========================================================= */

.mentor-feedback-section {
  margin-top: 20px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;
}

.mentor-feedback-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.mentor-feedback-heading h3 {
  margin: 6px 0 0;

  color: #101419;

  font-size: 18px;
  line-height: 1.3;
}

.mentor-feedback-heading p {
  max-width: 680px;
  margin: 6px 0 0;

  color: #6f8095;

  font-size: 12px;
  line-height: 1.6;
}

.mentor-feedback-count {
  flex: 0 0 auto;

  padding: 6px 9px;

  border-radius: 999px;

  color: #4c5867;
  background: #f8f9fb;

  font-size: 10px;
  font-weight: 700;
}

.mentor-feedback-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;

  margin-top: 20px;
}

.mentor-feedback-card {
  min-width: 0;
  padding: 18px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;
}

.mentor-feedback-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mentor-feedback-card-top strong,
.mentor-feedback-card-top small {
  display: block;
}

.mentor-feedback-card-top strong {
  color: #101419;

  font-size: 13px;
  line-height: 1.3;
}

.mentor-feedback-card-top small {
  margin-top: 3px;

  color: #6f8095;

  font-size: 10px;
}

.mentor-feedback-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;

  color: #ff5303;
}

.mentor-feedback-card > p {
  margin: 15px 0 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.7;

  overflow-wrap: anywhere;
}

.mentor-feedback-public-badge {
  display: inline-flex;
  align-items: center;

  margin-top: 14px;
  padding: 5px 8px;

  border-radius: 999px;

  color: #2d353f;
  background: #f8f9fb;

  font-size: 9px;
  font-weight: 700;
}

.mentor-feedback-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-top: 20px;
  padding: 18px;

  border: 1px dashed #d7dee7;
  border-radius: 14px;

  color: #6f8095;
  background: #ffffff;
}

.mentor-feedback-empty svg {
  flex: 0 0 auto;

  color: #ff5303;
}

.mentor-feedback-empty h4 {
  margin: 0;

  color: #101419;

  font-size: 14px;
}

.mentor-feedback-empty p {
  margin: 5px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.6;
}

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

@media (max-width: 640px) {
  .mentor-feedback-section {
    padding: 20px;
  }

  .mentor-feedback-heading {
    flex-direction: column;
  }

  .mentor-feedback-count {
    align-self: flex-start;
  }

  .mentor-feedback-card-top {
    flex-direction: column;
  }
}
/* =========================================================
   MENTOR MY PROFILE
   ========================================================= */

.mentor-my-profile-page {
  width: 100%;
  display: grid;
  gap: 20px;
  padding-bottom:
    max(
      80px,
      calc(
        60px +
        env(safe-area-inset-bottom)
      )
    );
}

.mentor-profile-availability-section,
.mentor-profile-form-section {
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
}

.mentor-profile-availability-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(320px, 1.1fr);
  gap: 28px;
  padding: 26px;
}

.mentor-profile-section-copy > span,
.mentor-profile-section-heading > span {
  display: block;
  margin-bottom: 8px;
  color: #ff5303;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-profile-section-copy h2,
.mentor-profile-section-heading h2 {
  margin: 0;
  color: #101419;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.mentor-profile-section-copy p,
.mentor-profile-section-heading p {
  max-width: 620px;
  margin: 8px 0 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

.mentor-profile-availability-control {
  display: grid;
  gap: 14px;
}

.mentor-profile-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #edf0f4;
}

.mentor-profile-switch-row > span {
  min-width: 0;
}

.mentor-profile-switch-row strong {
  display: block;
  color: #101419;
  font-size: 12px;
  font-weight: 600;
}

.mentor-profile-switch-row small {
  display: block;
  margin-top: 5px;
  color: #6f8095;
  font-size: 10px;
  line-height: 1.5;
}

.mentor-profile-switch-row input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  margin: 0;
  border: 1px solid #c9d2df;
  border-radius: 999px;
  background: #e9edf2;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.mentor-profile-switch-row input::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  content: "";
  background: #ffffff;
  box-shadow:
    0 1px 4px
    rgba(16, 20, 25, 0.18);
  transition:
    transform 0.18s ease;
}

.mentor-profile-switch-row input:checked {
  border-color: #ff5303;
  background: #ff5303;
}

.mentor-profile-switch-row input:checked::after {
  transform:
    translateX(18px);
}

.mentor-profile-switch-row input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.mentor-profile-capacity-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 10px;
}

.mentor-profile-metric {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid #edf0f4;
  border-radius: 11px;
  background: #fbfcfd;
}

.mentor-profile-metric > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #ff5303;
  background: #fff4ef;
}

.mentor-profile-metric small {
  display: block;
  color: #6f8095;
  font-size: 9px;
}

.mentor-profile-metric strong {
  display: block;
  margin-top: 3px;
  color: #101419;
  font-size: 18px;
  font-weight: 650;
}

.mentor-profile-form-section {
  padding: 26px;
}

.mentor-profile-section-heading {
  margin-bottom: 22px;
}

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

.mentor-profile-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.mentor-profile-field-full {
  margin-top: 18px;
}

.mentor-profile-field > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2d353f;
  font-size: 10px;
  font-weight: 600;
}

.mentor-profile-field input,
.mentor-profile-field textarea {
  width: 100%;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.mentor-profile-field input {
  min-height: 42px;
  padding: 0 12px;
}

.mentor-profile-field textarea {
  min-height: 132px;
  padding: 11px 12px;
  resize: vertical;
}

.mentor-profile-field input::placeholder,
.mentor-profile-field textarea::placeholder {
  color: #97a4b4;
}

.mentor-profile-field input:focus,
.mentor-profile-field input:focus-visible,
.mentor-profile-field textarea:focus,
.mentor-profile-field textarea:focus-visible {
  border-color: #4c5867;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10);
}

.mentor-profile-success {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #dfe8e3;
  border-radius: 9px;
  color: #2f7d4a;
  background: #f7fbf8;
  font-size: 11px;
  line-height: 1.5;
}

.mentor-profile-save-row {
  display: flex;
  justify-content: flex-end;
}

.mentor-profile-save-button {
  display: inline-flex;
  width: auto;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .mentor-profile-availability-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .mentor-my-profile-page {
    gap: 15px;
  }

  .mentor-profile-availability-section,
  .mentor-profile-form-section {
    padding: 19px 17px;
    border-radius: 14px;
  }

  .mentor-profile-form-grid,
  .mentor-profile-capacity-grid {
    grid-template-columns: 1fr;
  }

  .mentor-profile-switch-row {
    align-items: flex-start;
  }

  .mentor-profile-field input,
  .mentor-profile-field textarea {
    font-size: 16px;
  }

  .mentor-profile-save-row {
    justify-content: flex-start;
  }
}
/* =========================================================
   MENTOR REQUESTS
   ========================================================= */

.mentor-requests-page,
.mentor-request-detail-page {
  width: 100%;
  padding-bottom:
    max(
      80px,
      calc(
        60px +
        env(safe-area-inset-bottom)
      )
    );
}

/* LIST TOOLBAR */

.mentor-requests-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.mentor-requests-search {
  position: relative;
  width: min(470px, 100%);
}

.mentor-requests-search > svg {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #8794a4;
  pointer-events: none;
  transform: translateY(-50%);
}

.mentor-requests-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px 0 39px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.mentor-requests-search input:focus,
.mentor-requests-search input:focus-visible {
  border-color: #4c5867;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.1);
}

.mentor-requests-count {
  color: #6f8095;
  font-size: 11px;
  font-weight: 500;
}

/* FILTERS */

.mentor-request-filter-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  overflow-x: auto;
}

.mentor-request-filter-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #4c5867;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.mentor-request-filter-tabs button > span {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: #6f8095;
  background: #f0f2f5;
  font-size: 9px;
}

.mentor-request-filter-tabs button.active {
  border-color: #101419;
  color: #ffffff;
  background: #101419;
}

.mentor-request-filter-tabs button.active > span {
  color: #101419;
  background: #ffffff;
}

/* EMPTY */

.mentor-requests-empty {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 38px 26px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
  text-align: center;
}

.mentor-requests-empty h2 {
  margin: 13px 0 6px;
  color: #101419;
  font-size: 19px;
  font-weight: 650;
}

.mentor-requests-empty p {
  max-width: 500px;
  margin: 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

/* TABLE */

.mentor-requests-table-shell {
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
}

.mentor-requests-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.mentor-requests-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.mentor-requests-table th {
  padding: 12px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #6f8095;
  background: #fbfcfd;
  font-size: 10px;
  font-weight: 600;
  text-align: left;
}

.mentor-requests-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #374151;
  font-size: 11px;
  line-height: 1.45;
  vertical-align: middle;
}

.mentor-requests-table tbody tr:last-child td {
  border-bottom: 0;
}

.mentor-requests-table tbody tr:hover {
  background: #fcfcfd;
}

.mentor-request-mentee {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.mentor-request-mentee > img,
.mentor-request-mentee > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
}

.mentor-request-mentee > img {
  object-fit: cover;
}

.mentor-request-mentee > span {
  display: grid;
  place-items: center;
  color: #c13c00;
  background: #fff2ec;
  font-size: 10px;
  font-weight: 700;
}

.mentor-request-mentee strong,
.mentor-request-mentee small {
  display: block;
}

.mentor-request-mentee strong {
  color: #101419;
  font-size: 11px;
  font-weight: 600;
}

.mentor-request-mentee small {
  margin-top: 3px;
  color: #8794a4;
  font-size: 9px;
}

.mentor-request-area {
  color: #374151;
  font-weight: 500;
}

.mentor-request-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6f8095;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.mentor-request-status > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mentor-request-status.status-pending {
  color: #b56a00;
}

.mentor-request-status.status-accepted {
  color: #087967;
}

.mentor-request-status.status-clarification-needed,
.mentor-request-status.status-clarification-requested {
  color: #315f8c;
}

.mentor-request-status.status-declined,
.mentor-request-status.status-withdrawn {
  color: #a63d46;
}

.mentor-request-status.status-referred {
  color: #6f5c8c;
}

.mentor-request-action-cell {
  text-align: right;
}

.mentor-request-view-button {
  min-height: 33px;
  padding: 0 12px;
  border: 1px solid #101419;
  border-radius: 8px;
  color: #ffffff;
  background: #101419;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-request-view-button:hover {
  border-color: #2d353f;
  background: #2d353f;
}

/* MOBILE CARDS */

.mentor-requests-mobile-list {
  display: none;
}

/* PAGINATION */

.mentor-request-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-top: 1px solid #edf0f4;
  background: #ffffff;
}

.mentor-request-pagination > p {
  margin: 0;
  color: #8794a4;
  font-size: 10px;
}

.mentor-request-pagination > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mentor-request-pagination > div > span {
  color: #6f8095;
  font-size: 10px;
}

.mentor-request-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #2d353f;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.mentor-request-pagination button:disabled {
  color: #b1bac6;
  background: #f7f8fa;
  cursor: not-allowed;
}

/* =========================================================
   REQUEST DETAILS
   ========================================================= */

.mentor-request-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  color: #4c5867;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-request-success {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid #dfe8e3;
  border-radius: 9px;
  color: #2f7d4a;
  background: #f7fbf8;
  font-size: 11px;
}

.mentor-request-detail-hero,
.mentor-request-profile-section,
.mentor-request-decision-section,
.mentor-request-clarification {
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
}

.mentor-request-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  margin-bottom: 16px;
}

.mentor-request-detail-person {
  display: flex;
  align-items: center;
  gap: 13px;
}

.mentor-request-detail-person > img,
.mentor-request-detail-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 14px;
}

.mentor-request-detail-person > img {
  object-fit: cover;
}

.mentor-request-detail-avatar {
  display: grid;
  place-items: center;
  color: #c13c00;
  background: #fff2ec;
  font-size: 15px;
  font-weight: 700;
}

.mentor-request-eyebrow,
.mentor-request-section-heading > span,
.mentor-request-copy-grid article > span {
  display: block;
  margin-bottom: 7px;
  color: #ff5303;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.mentor-request-detail-person h2 {
  margin: 0;
  color: #101419;
  font-size: 21px;
  font-weight: 650;
}

.mentor-request-detail-person p {
  margin: 4px 0 0;
  color: #6f8095;
  font-size: 10px;
}

/* SUMMARY */

.mentor-request-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 12px;
  margin-bottom: 16px;
}

.mentor-request-summary-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
  background: #ffffff;
}

.mentor-request-summary-item > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #ff5303;
  background: #fff4ef;
}

.mentor-request-summary-item small {
  display: block;
  color: #8794a4;
  font-size: 9px;
}

.mentor-request-summary-item strong {
  display: block;
  margin-top: 3px;
  color: #101419;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

/* REQUEST COPY */

.mentor-request-copy-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 14px;
  margin-bottom: 16px;
}

.mentor-request-copy-grid article {
  padding: 20px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
}

.mentor-request-copy-grid h3 {
  margin: 0;
  color: #101419;
  font-size: 15px;
  font-weight: 650;
}

.mentor-request-copy-grid p {
  margin: 9px 0 0;
  color: #4c5867;
  font-size: 11px;
  line-height: 1.7;
}

/* PROFILE */

.mentor-request-profile-section {
  padding: 22px;
  margin-bottom: 16px;
}

.mentor-request-section-heading {
  margin-bottom: 18px;
}

.mentor-request-section-heading h2 {
  margin: 0;
  color: #101419;
  font-size: 20px;
  font-weight: 650;
}

.mentor-request-section-heading p {
  max-width: 680px;
  margin: 7px 0 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

.mentor-request-profile-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 11px;
}

.mentor-request-profile-block {
  padding: 14px;
  border: 1px solid #edf0f4;
  border-radius: 11px;
  background: #fbfcfd;
}

.mentor-request-profile-block > small {
  color: #8794a4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mentor-request-profile-block > p {
  margin: 7px 0 0;
  color: #374151;
  font-size: 11px;
  line-height: 1.6;
}

.mentor-request-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mentor-request-tags > span {
  padding: 5px 8px;
  border: 1px solid #dfe4eb;
  border-radius: 999px;
  color: #4c5867;
  background: #ffffff;
  font-size: 9px;
}

.mentor-request-profile-unavailable {
  margin: 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

/* CLARIFICATION */

.mentor-request-clarification {
  display: grid;
  gap: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.mentor-request-clarification h3 {
  margin: 0;
  color: #101419;
  font-size: 16px;
}

.mentor-request-clarification > div:not(:first-child) {
  padding: 13px;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  background: #fbfcfd;
}

.mentor-request-clarification small {
  color: #8794a4;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.mentor-request-clarification p {
  margin: 6px 0 0;
  color: #374151;
  font-size: 11px;
  line-height: 1.6;
}

/* DECISION */

.mentor-request-decision-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 22px;
}

.mentor-request-decision-section > div:first-child {
  max-width: 620px;
}

.mentor-request-decision-section h2 {
  margin: 0;
  color: #101419;
  font-size: 18px;
  font-weight: 650;
}

.mentor-request-decision-section p {
  margin: 7px 0 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

.mentor-request-decision-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mentor-request-secondary-action,
.mentor-request-decline-action,
.mentor-request-accept-action {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-request-secondary-action {
  border: 1px solid #c9d2df;
  color: #2d353f;
  background: #ffffff;
}

.mentor-request-decline-action {
  border: 1px solid #c9d2df;
  color: #a63d46;
  background: #ffffff;
}

.mentor-request-accept-action {
  border: 1px solid #ff5303;
  color: #ffffff;
  background: #ff5303;
}



/* =========================================================
   REQUEST DECISION BUTTON INTERACTIONS
   Clear but restrained hover/focus states.
   ========================================================= */

.mentor-request-secondary-action,
.mentor-request-decline-action,
.mentor-request-accept-action {
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.mentor-request-secondary-action:hover:not(:disabled) {
  border-color: #97aac2;
  color: #101419;
  background: #f7f8fa;

  box-shadow:
    0 4px 12px
    rgba(16, 20, 25, 0.06);

  transform: translateY(-1px);
}

.mentor-request-decline-action:hover:not(:disabled) {
  border-color: #d5a8ad;
  color: #8f3038;
  background: #fff7f8;

  box-shadow:
    0 4px 12px
    rgba(166, 61, 70, 0.08);

  transform: translateY(-1px);
}

.mentor-request-accept-action:hover:not(:disabled) {
  border-color: #c13c00;
  color: #ffffff;
  background: #c13c00;

  box-shadow:
    0 4px 12px
    rgba(193, 60, 0, 0.18);

  transform: translateY(-1px);
}

.mentor-request-secondary-action:active:not(:disabled),
.mentor-request-decline-action:active:not(:disabled),
.mentor-request-accept-action:active:not(:disabled) {
  box-shadow: none;
  transform: translateY(0);
}

.mentor-request-secondary-action:focus-visible,
.mentor-request-decline-action:focus-visible,
.mentor-request-accept-action:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.16);
}

.mentor-request-secondary-action:disabled,
.mentor-request-decline-action:disabled,
.mentor-request-accept-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.mentor-request-secondary-action svg,
.mentor-request-decline-action svg,
.mentor-request-accept-action svg {
  color: currentColor;
}



/* Refer for matching gets a restrained teal secondary treatment.
   It remains an outline action, not a filled primary button. */
.mentor-request-decision-actions
.mentor-request-secondary-action:nth-of-type(2) {
  border-color: #9fcfc4;
  color: #087967;
  background: #ffffff;
}

.mentor-request-decision-actions
.mentor-request-secondary-action:nth-of-type(2):hover:not(:disabled) {
  border-color: #6fb6a6;
  color: #066454;
  background: #f4fbf9;

  box-shadow:
    0 4px 12px
    rgba(8, 121, 103, 0.10);

  transform: translateY(-1px);
}

/* MODAL */

.mentor-request-modal-backdrop {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 20, 25, 0.52);
}

.mentor-request-modal {
  width: min(100%, 500px);
  padding: 24px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 22px 70px
    rgba(16, 20, 25, 0.18);
}

.mentor-request-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mentor-request-modal-header span {
  display: block;
  margin-bottom: 6px;
  color: #ff5303;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.mentor-request-modal-header h2 {
  margin: 0;
  color: #101419;
  font-size: 19px;
  font-weight: 650;
}

.mentor-request-modal-header > button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d7dee7;
  border-radius: 9px;
  color: #4c5867;
  background: #ffffff;
  cursor: pointer;
}

.mentor-request-modal > p {
  margin: 9px 0 17px;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

.mentor-request-modal label {
  display: grid;
  gap: 7px;
}

.mentor-request-modal label > span {
  color: #2d353f;
  font-size: 10px;
  font-weight: 600;
}

.mentor-request-modal textarea {
  width: 100%;
  min-height: 105px;
  padding: 10px 11px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}

.mentor-request-modal textarea:focus {
  border-color: #4c5867;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.1);
}

.mentor-request-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* RESPONSIVE */

@media (max-width: 850px) {
  .mentor-request-decision-section {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentor-request-decision-actions {
    justify-content: flex-start;
  }

  .mentor-request-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mentor-requests-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .mentor-requests-search {
    width: 100%;
  }

  .mentor-requests-search input,
  .mentor-request-modal textarea {
    font-size: 16px;
  }

  .mentor-requests-table-scroll {
    display: none;
  }

  .mentor-requests-mobile-list {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .mentor-request-mobile-card {
    display: grid;
    gap: 14px;
    padding: 15px;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    background: #ffffff;
  }

  .mentor-request-mobile-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .mentor-request-mobile-detail small,
  .mentor-request-mobile-detail strong {
    display: block;
  }

  .mentor-request-mobile-detail small {
    color: #8794a4;
    font-size: 9px;
  }

  .mentor-request-mobile-detail strong {
    margin-top: 3px;
    color: #101419;
    font-size: 11px;
    font-weight: 600;
  }

  .mentor-request-view-button {
    width: fit-content;
  }

  .mentor-request-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentor-request-pagination > div {
    width: 100%;
    justify-content: space-between;
  }

  .mentor-request-detail-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentor-request-copy-grid,
  .mentor-request-profile-grid {
    grid-template-columns: 1fr;
  }

  .mentor-request-profile-section,
  .mentor-request-detail-hero,
  .mentor-request-decision-section,
  .mentor-request-clarification {
    padding: 18px;
    border-radius: 14px;
  }

  .mentor-request-decision-actions {
    width: 100%;
  }

  .mentor-request-secondary-action,
  .mentor-request-decline-action,
  .mentor-request-accept-action {
    width: auto;
  }

  .mentor-request-modal {
    padding: 20px 17px;
  }
}


/* =========================================================
   REQUEST OUTCOME REASON
   ========================================================= */

.mentor-request-outcome-reason {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #fbfcfd;
}

.mentor-request-outcome-reason h3 {
  margin: 0;
  color: #101419;
  font-size: 15px;
  font-weight: 650;
}

.mentor-request-outcome-reason p {
  margin: 8px 0 0;
  color: #4c5867;
  font-size: 11px;
  line-height: 1.7;
}

.mentor-request-modal-helper {
  display: block;
  margin-top: 7px;
  color: #8794a4;
  font-size: 9px;
  line-height: 1.5;
}
/* =========================================================
   MENTOR MY MENTEES
   Desktop/tablet table, mobile cards.
   ========================================================= */

.mentor-mentees-page {
  width: 100%;
  padding-bottom:
    max(
      80px,
      calc(
        60px +
        env(safe-area-inset-bottom)
      )
    );
}

/* EMPTY STATE */

.mentor-mentees-empty {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 40px 28px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
  text-align: center;
}

.mentor-mentees-empty h2 {
  margin: 13px 0 6px;
  color: #101419;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.mentor-mentees-empty p {
  max-width: 500px;
  margin: 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

/* TOOLBAR */

.mentor-mentees-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.mentor-mentees-search {
  position: relative;
  width: min(440px, 100%);
}

.mentor-mentees-search > svg {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #8794a4;
  pointer-events: none;
  transform: translateY(-50%);
}

.mentor-mentees-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px 0 39px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.mentor-mentees-search input:focus,
.mentor-mentees-search input:focus-visible {
  border-color: #4c5867;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10);
}

.mentor-mentees-toolbar > span {
  color: #6f8095;
  font-size: 11px;
  font-weight: 500;
}

/* TABLE */

.mentor-mentees-table-shell {
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
}

.mentor-mentees-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.mentor-mentees-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.mentor-mentees-table th {
  padding: 12px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #6f8095;
  background: #fbfcfd;
  font-size: 10px;
  font-weight: 600;
  text-align: left;
}

.mentor-mentees-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #374151;
  font-size: 11px;
  line-height: 1.45;
  vertical-align: middle;
}

.mentor-mentees-table tbody tr:last-child td {
  border-bottom: 0;
}

.mentor-mentees-table tbody tr:hover {
  background: #fcfcfd;
}

.mentor-mentee-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.mentor-mentee-identity > img,
.mentor-mentee-identity > span {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
}

.mentor-mentee-identity > img {
  object-fit: cover;
}

.mentor-mentee-identity > span {
  display: grid;
  place-items: center;
  color: #c13c00;
  background: #fff2ec;
  font-size: 10px;
  font-weight: 700;
}

.mentor-mentee-identity strong,
.mentor-mentee-identity small {
  display: block;
}

.mentor-mentee-identity strong {
  color: #101419;
  font-size: 11px;
  font-weight: 600;
}

.mentor-mentee-identity small {
  margin-top: 3px;
  color: #8794a4;
  font-size: 9px;
}

.mentor-mentee-area {
  color: #374151;
  font-weight: 500;
}

.mentor-mentee-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #087967;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.mentor-mentee-status > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mentor-mentee-next-session {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #374151;
  white-space: nowrap;
}

.mentor-mentee-next-session svg {
  color: #ff5303;
}

.mentor-mentee-no-session {
  color: #8794a4;
}

.mentor-mentee-action-cell {
  text-align: right;
}

.mentor-mentee-view-button {
  min-height: 33px;
  padding: 0 12px;
  border: 1px solid #101419;
  border-radius: 8px;
  color: #ffffff;
  background: #101419;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-mentee-view-button:hover {
  border-color: #2d353f;
  background: #2d353f;
}

/* MOBILE */

.mentor-mentees-mobile-list {
  display: none;
}

/* PAGINATION */

.mentor-mentees-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-top: 1px solid #edf0f4;
  background: #ffffff;
}

.mentor-mentees-pagination > p {
  margin: 0;
  color: #8794a4;
  font-size: 10px;
}

.mentor-mentees-pagination > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mentor-mentees-pagination > div > span {
  color: #6f8095;
  font-size: 10px;
}

.mentor-mentees-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #2d353f;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-mentees-pagination button:disabled {
  color: #b1bac6;
  background: #f7f8fa;
  cursor: not-allowed;
}

/* RESPONSIVE */

@media (max-width: 720px) {
  .mentor-mentees-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .mentor-mentees-search {
    width: 100%;
  }

  .mentor-mentees-search input {
    font-size: 16px;
  }

  .mentor-mentees-table-scroll {
    display: none;
  }

  .mentor-mentees-mobile-list {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .mentor-mentee-mobile-card {
    display: grid;
    gap: 15px;
    padding: 15px;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    background: #ffffff;
  }

  .mentor-mentee-mobile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

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

  .mentor-mentee-mobile-grid small,
  .mentor-mentee-mobile-grid strong {
    display: block;
  }

  .mentor-mentee-mobile-grid small {
    color: #8794a4;
    font-size: 9px;
  }

  .mentor-mentee-mobile-grid strong {
    margin-top: 3px;
    color: #101419;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
  }

  .mentor-mentee-view-button {
    width: fit-content;
  }

  .mentor-mentees-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentor-mentees-pagination > div {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .mentor-mentee-mobile-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   MENTOR SESSIONS
   Complete replacement file.
   Approved filled-state design:
   white canvas + neutral secondary styling + orange accents.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE CANVAS
   --------------------------------------------------------- */

html:has(.mentor-sessions-summary),
body:has(.mentor-sessions-summary),
body:has(.mentor-sessions-summary) #root,
body:has(.mentor-sessions-summary) .dashboard-layout,
body:has(.mentor-sessions-summary) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentor-sessions-summary) .dashboard-content {
  min-height: 100vh !important;
}

body:has(.mentor-sessions-summary)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentor-sessions-summary)
.dashboard-content > header p,
body:has(.mentor-sessions-summary)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

body:has(.mentor-sessions-summary)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.mentor-sessions-summary {
  display: block;

  width: 100%;
  min-width: 0;

  margin-bottom: 18px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.025);
}

.mentor-sessions-summary .eyebrow,
.mentor-session-calendar-heading .eyebrow {
  color: #ff5303;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.mentor-sessions-summary h2 {
  max-width: 660px;

  margin: 8px 0 8px;

  color: #101419;

  font-size: 24px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.mentor-sessions-summary p {
  max-width: 720px;
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   INLINE ERROR
   --------------------------------------------------------- */

.mentor-session-inline-error {
  margin-bottom: 14px;
  padding: 10px 13px;

  border: 1px solid #ffcbc5;
  border-radius: 10px;

  color: #832600;
  background: #fff4f3;

  font-size: 12px;
  font-weight: 500;
}

/* ---------------------------------------------------------
   ACCEPTED REQUEST / READY TO SCHEDULE
   --------------------------------------------------------- */

.mentor-session-ready-list {
  display: grid;

  gap: 12px;

  margin-bottom: 18px;
}

.mentor-session-ready-card {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 18px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentor-session-ready-icon {
  display: grid;
  place-items: center;

  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border: 1px solid #ffe5e3;
  border-radius: 12px;

  color: #ff5303;
  background: #fff4f3;
}

.mentor-session-ready-card > div {
  min-width: 0;
}

.mentor-session-ready-card small {
  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-session-ready-card h3 {
  margin: 5px 0 6px;

  color: #101419;

  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

.mentor-session-ready-card p {
  max-width: 680px;

  margin: 0 0 14px;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

.mentor-session-tabs {
  display: flex;
  align-items: center;

  gap: 6px;

  width: fit-content;
  max-width: 100%;

  margin-bottom: 18px;
  padding: 4px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #f8f9fb;
}

.mentor-session-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 38px;
  padding: 0 13px;

  border: 0;
  border-radius: 9px;

  color: #4c5867;
  background: transparent;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;

  cursor: pointer;
}

.mentor-session-tabs button span {
  display: grid;
  place-items: center;

  min-width: 22px;
  height: 22px;

  padding: 0 6px;

  border-radius: 999px;

  color: #4c5867;
  background: #e4e8ef;

  font-size: 10px;
  font-weight: 600;
}

.mentor-session-tabs button.active {
  color: #ffffff;
  background: #101419;
}

.mentor-session-tabs button.active span {
  color: #101419;
  background: #ffffff;
}

/* ---------------------------------------------------------
   SESSION + CALENDAR WORKSPACE
   --------------------------------------------------------- */

.mentor-session-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(300px, 0.75fr);

  align-items: start;

  gap: 18px;

  width: 100%;
  min-width: 0;
}

.mentor-session-main-column {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.mentor-session-main-column > .mentor-session-empty-state {
  width: 100%;
  min-height: 0;
  height: auto;
}

/* ---------------------------------------------------------
   PAGED SESSION SHELL
   One session card at a time + pagination footer.
   --------------------------------------------------------- */

.mentor-session-paged-shell {
  overflow: hidden;

  width: 100%;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.035);
}

.mentor-session-paged-shell
.mentor-session-card--paginated {
  margin: 0;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}

.mentor-session-pagination {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 14px 18px;

  border-top: 1px solid #eef1f5;

  background: #fbfcfd;
}

.mentor-session-pagination-pages {
  display: flex;
  align-items: center;

  gap: 6px;
}

.mentor-session-pagination button {
  appearance: none;
  -webkit-appearance: none;

  min-width: 34px;
  min-height: 34px;

  padding: 0 10px;

  border: 1px solid #dfe4eb;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
}

.mentor-session-pagination button:hover:not(:disabled) {
  border-color: #97aac2;

  color: #101419;
  background: #f7f8fa;
}

.mentor-session-pagination-pages button.active {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.mentor-session-pagination button:disabled {
  color: #97aac2;
  background: #f7f8fa;

  cursor: not-allowed;
  opacity: 0.65;
}

.mentor-session-pagination-nav {
  min-width: 76px !important;
}

/* ---------------------------------------------------------
   SESSION CARD
   --------------------------------------------------------- */

.mentor-session-card {
  width: 100%;
  min-width: 0;

  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentor-session-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 18px;
}

.mentor-session-mentor {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}

.mentor-session-avatar {
  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  border-radius: 12px;

  object-fit: cover;
}

.mentor-session-initials {
  display: grid;
  place-items: center;

  border: 1px solid #e4e8ef;

  color: #101419;
  background: #f3f5f7;

  font-size: 12px;
  font-weight: 600;
}

.mentor-session-mentor small {
  display: block;

  color: #6f8095;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mentor-session-mentor h2 {
  margin: 4px 0 0;

  color: #101419;

  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}

.mentor-session-status {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 0 10px;

  border: 1px solid #ffcbc5;
  border-radius: 999px;

  color: #c13c00;
  background: #fff4f3;

  font-size: 10px;
  font-weight: 500;

  text-transform: capitalize;
  white-space: nowrap;
}

.mentor-session-status.status-completed,
.mentor-session-status.status-cancelled,
.mentor-session-status.status-no-show {
  border-color: #dfe4eb;

  color: #4c5867;
  background: #f7f8fa;
}

.mentor-session-date {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding: 14px;

  border: 1px solid #eef1f5;
  border-radius: 13px;

  background: #fbfcfd;
}

.mentor-session-date-badge {
  display: grid;
  place-items: center;

  flex: 0 0 58px;

  width: 58px;
  min-height: 62px;

  padding: 8px;

  border-radius: 12px;

  color: #ffffff;
  background: #101419;

  text-align: center;
}

.mentor-session-date-badge span {
  color: #d7dee7;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mentor-session-date-badge strong {
  margin-top: 2px;

  color: #ffffff;

  font-size: 20px;
  line-height: 1;
}

.mentor-session-date-copy {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.mentor-session-date-copy strong {
  color: #101419;

  font-size: 12px;
  font-weight: 650;
}

.mentor-session-date-copy span {
  color: #4c5867;

  font-size: 11px;
}

.mentor-session-date-copy small {
  color: #8794a4;

  font-size: 9px;
}

.mentor-session-information {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 14px;
}

.mentor-session-information > div {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
  padding: 12px;

  border: 1px solid #eef1f5;
  border-radius: 11px;

  background: #ffffff;
}

.mentor-session-information svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentor-session-information span {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.mentor-session-information small {
  color: #8794a4;

  font-size: 9px;
}

.mentor-session-information strong {
  color: #2d353f;

  font-size: 11px;
  font-weight: 600;

  overflow-wrap: anywhere;
}

.mentor-session-topic {
  padding: 13px 14px;

  border: 1px solid #eef1f5;
  border-radius: 11px;

  background: #fbfcfd;
}

.mentor-session-topic small {
  color: #8794a4;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mentor-session-topic p {
  margin: 5px 0 0;

  color: #2d353f;

  font-size: 12px;
  line-height: 1.55;
}

.mentor-session-location {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  margin-top: 12px;
  padding: 12px;

  border: 1px solid #eef1f5;
  border-radius: 10px;

  color: #4c5867;
  background: #fbfcfd;
}

.mentor-session-location svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentor-session-location p {
  margin: 0;

  font-size: 11px;
  line-height: 1.5;
}

.mentor-session-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 14px;

  margin-top: 20px;
  padding-top: 18px;

  border-top: 1px solid #eef1f5;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

body:has(.mentor-sessions-summary)
.primary-button,
body:has(.mentor-sessions-summary)
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 42px;
  padding: 0 16px;

  border-radius: 10px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  transform: none !important;
  box-shadow: none !important;
}

body:has(.mentor-sessions-summary)
.primary-button {
  border: 1px solid #ff5303;

  color: #ffffff;
  background: #ff5303;
}

body:has(.mentor-sessions-summary)
.primary-button:hover {
  border-color: #c13c00;

  color: #ffffff;
  background: #c13c00;
}

body:has(.mentor-sessions-summary)
.secondary-button {
  border: 1px solid #c9d2df;

  color: #101419;
  background: #ffffff;
}

body:has(.mentor-sessions-summary)
.secondary-button:hover {
  border-color: #97aac2;

  background: #f7f8fa;
}

.mentor-session-view-mentor {
  border-color: #101419 !important;

  color: #ffffff !important;
  background: #101419 !important;
}

.mentor-session-view-mentor:hover {
  border-color: #2d353f !important;

  color: #ffffff !important;
  background: #2d353f !important;
}

.mentor-session-join-button {
  border-color: #ff5303 !important;

  color: #ffffff !important;
  background: #ff5303 !important;
}

.mentor-session-join-button:hover {
  border-color: #c13c00 !important;

  background: #c13c00 !important;
}

/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.mentor-session-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  min-height: 0;
  height: auto;

  padding: 34px 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  text-align: center;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentor-session-empty-state .empty-state-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom: 16px;

  border: 1px solid #ffe5e3;
  border-radius: 14px;

  color: #ff5303;
  background: #fff4f3;
}

.mentor-session-empty-state h2 {
  margin: 0 0 8px;

  color: #101419;

  font-size: 19px;
  font-weight: 650;
}

.mentor-session-empty-state p {
  max-width: 500px;
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.65;
}

.mentor-session-empty-state
.primary-button {
  margin-top: 20px;
}

/* ---------------------------------------------------------
   CALENDAR PANEL
   Keeps the approved empty-state calendar structure.
   --------------------------------------------------------- */

.mentor-session-calendar-panel {
  position: relative;

  align-self: start;

  width: 100%;
  min-width: 0;

  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03);
}

.mentor-session-calendar-heading h3 {
  margin: 6px 0 4px;

  color: #101419;

  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}

.mentor-session-calendar-heading p {
  margin: 0;

  color: #4c5867;

  font-size: 11px;
  line-height: 1.6;
}

.mentor-custom-date-field-wrap {
  position: relative;

  margin-top: 18px;
}

.mentor-custom-date-label {
  display: block;

  margin-bottom: 7px;

  color: #2d353f;

  font-size: 11px;
  font-weight: 600;
}

.mentor-custom-date-field {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  width: 100%;
  height: 46px;
  padding: 0 13px;

  border: 1px solid #c9d2df;
  border-radius: 11px;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;

  cursor: pointer;
}

.mentor-custom-date-field:hover,
.mentor-custom-date-field:focus-visible {
  border-color: #97aac2;

  outline: none;

  box-shadow:
    0 0 0 3px rgba(16, 20, 25, 0.05);
}

.mentor-custom-date-field svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentor-session-today-button {
  width: 100%;

  margin-top: 10px;
}

.mentor-session-selected-date {
  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 76px;

  margin-top: 16px;
  padding: 15px 16px;

  border: 1px solid #eef1f5;
  border-radius: 12px;

  color: #2d353f;
  background: #f8f9fb;
}

.mentor-session-selected-date svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentor-session-selected-date div {
  display: grid;

  gap: 3px;
}

.mentor-session-selected-date small {
  color: #8794a4;

  font-size: 9px;
}

.mentor-session-selected-date strong {
  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

/* ---------------------------------------------------------
   CALENDAR RESULTS
   --------------------------------------------------------- */

.mentor-session-calendar-results {
  display: grid;

  gap: 8px;

  margin-top: 12px;
}

.mentor-session-calendar-result {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 10px;

  min-height: 68px;
  padding: 12px 14px;

  border: 1px solid #eef1f5;
  border-radius: 11px;

  background: #ffffff;
}

.mentor-session-calendar-time {
  min-width: 62px;

  color: #101419;

  font-size: 10px;
  font-weight: 600;
}

.mentor-session-calendar-result > div {
  min-width: 0;
}

.mentor-session-calendar-result strong {
  display: block;

  overflow: hidden;

  color: #101419;

  font-size: 11px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-session-calendar-result p {
  margin: 3px 0 0;

  overflow: hidden;

  color: #6f8095;

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-session-calendar-format {
  justify-self: end;

  padding: 5px 7px;

  border: 1px solid #dfe4eb;
  border-radius: 999px;

  color: #4c5867;
  background: #f7f8fa;

  font-size: 8px;
  font-weight: 600;

  white-space: nowrap;
}

.mentor-session-calendar-empty {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  min-height: 92px;

  margin-top: 12px;
  padding: 16px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  background: #ffffff;
}

.mentor-session-calendar-empty > svg {
  flex-shrink: 0;

  color: #ff5303;
}

.mentor-session-calendar-empty h4 {
  margin: 0 0 4px;

  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

.mentor-session-calendar-empty p {
  margin: 0;

  color: #6f8095;

  font-size: 9px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   CALENDAR POPOVER
   --------------------------------------------------------- */

.mentor-custom-calendar {
  position: absolute;

  top: calc(100% + 8px);
  left: 0;
  z-index: 80;

  width: min(100%, 360px);
  padding: 12px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 18px 44px rgba(16, 20, 25, 0.13);
}

.mentor-custom-calendar-topbar,
.mentor-custom-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.mentor-custom-calendar-topbar {
  padding-bottom: 9px;

  border-bottom: 1px solid #eef1f5;
}

.mentor-custom-calendar-topbar > span {
  color: #6f8095;

  font-size: 9px;
  font-weight: 600;
}

.mentor-custom-calendar-close,
.mentor-custom-calendar-header button {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  color: #4c5867;
  background: transparent;

  cursor: pointer;
}

.mentor-custom-calendar-close:hover,
.mentor-custom-calendar-header button:hover {
  color: #101419;
  background: #f7f8fa;
}

.mentor-custom-calendar-header {
  padding: 10px 0;
}

.mentor-custom-calendar-header strong {
  color: #101419;

  font-size: 12px;
  font-weight: 600;
}

.mentor-custom-calendar-weekdays,
.mentor-custom-calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap: 4px;
}

.mentor-custom-calendar-weekdays {
  margin-bottom: 4px;
}

.mentor-custom-calendar-weekdays span {
  display: grid;
  place-items: center;

  min-height: 26px;

  color: #6f8095;

  font-size: 8px;
  font-weight: 600;
}

.mentor-custom-calendar-empty-day {
  min-height: 36px;
}

.mentor-custom-calendar-day {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 36px;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 8px;

  color: #4c5867;
  background: transparent;

  font-family: inherit;
  font-size: 10px;
  font-weight: 500;

  cursor: pointer;
}

.mentor-custom-calendar-day:hover {
  border-color: #e4e8ef;

  color: #101419;
  background: #f7f8fa;
}

.mentor-custom-calendar-day.today {
  border-color: #ffcbc5;

  color: #c13c00;
  background: #fff4f3;
}

.mentor-custom-calendar-day.selected {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.mentor-custom-calendar-day.has-session::after,
.mentor-custom-calendar-day.has-session i {
  position: absolute;

  right: 50%;
  bottom: 3px;

  width: 4px;
  height: 4px;

  border-radius: 999px;

  background: #ff5303;

  content: "";

  transform: translateX(50%);
}

.mentor-custom-calendar-day.selected.has-session::after,
.mentor-custom-calendar-day.selected.has-session i {
  background: #ffffff;
}

/* ---------------------------------------------------------
   LOADING SKELETONS
   --------------------------------------------------------- */

.mentor-session-loading-state {
  display: grid;

  gap: 14px;
}

.mentor-session-loading-card {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  min-height: 180px;
  padding: 20px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;
}

.mentor-session-loading-date {
  flex: 0 0 64px;

  width: 64px;
  height: 74px;

  border-radius: 14px;

  background: #eef1f5;

  animation:
    mentor-session-skeleton 1.25s ease-in-out infinite;
}

.mentor-session-loading-card > div {
  display: grid;

  width: min(520px, 100%);

  gap: 9px;
}

.mentor-session-loading-line {
  display: block;

  width: 78%;
  height: 10px;

  border-radius: 999px;

  background: #eef1f5;

  animation:
    mentor-session-skeleton 1.25s ease-in-out infinite;
}

.mentor-session-loading-line--title {
  width: 48%;
  height: 18px;
}

.mentor-session-loading-line--short {
  width: 58%;
}

.mentor-session-calendar-loading {
  display: grid;

  gap: 10px;

  margin-top: 14px;
}

.mentor-session-calendar-loading span {
  display: block;

  width: 100%;
  height: 58px;

  border-radius: 12px;

  background: #eef1f5;

  animation:
    mentor-session-skeleton 1.25s ease-in-out infinite;
}

@keyframes mentor-session-skeleton {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .mentor-session-workspace {
    grid-template-columns: 1fr;
  }

  .mentor-session-calendar-panel {
    position: static;

    width: 100%;
    height: auto;
    min-height: 0;
  }

  .mentor-custom-calendar {
    position: static;

    width: 100%;

    margin-top: 8px;
  }
}

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

@media (max-width: 700px) {
  .mentor-sessions-summary {
    padding: 20px;
  }

  .mentor-sessions-summary h2 {
    font-size: 21px;
  }

  .mentor-session-tabs {
    display: flex;

    width: 100%;
  }

  .mentor-session-tabs button {
    flex: 1;
  }

  .mentor-session-ready-card {
    padding: 16px;
  }

  .mentor-session-card {
    padding: 18px;
  }

  .mentor-session-information {
    grid-template-columns: 1fr;
  }

  .mentor-session-calendar-panel {
    padding: 18px;
  }

  .mentor-session-calendar-result {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 6px;
  }

  .mentor-session-calendar-time {
    min-width: 0;
  }

  .mentor-session-calendar-format {
    justify-self: start;
  }

  .mentor-session-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mentor-session-view-mentor,
  .mentor-session-join-button {
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  .mentor-session-pagination {
    gap: 6px;

    padding: 12px;
  }

  .mentor-session-pagination-nav {
    min-width: 68px !important;
    padding: 0 8px !important;
  }

  .mentor-session-pagination-pages {
    gap: 4px;
  }

  .mentor-session-pagination button {
    min-width: 32px;
    min-height: 32px;

    padding: 0 8px;
  }

  .mentor-session-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentor-session-status {
    align-self: flex-start;
  }
}

@media (max-width: 520px) {
  .mentor-sessions-summary {
    padding: 18px;
  }

  .mentor-session-ready-card {
    flex-direction: column;
  }

  .mentor-session-date {
    align-items: flex-start;
  }

  .mentor-custom-calendar {
    padding: 10px;
  }

  .mentor-custom-calendar-day {
    min-height: 34px;
  }
}

/* =========================================================
   MY SESSIONS
   FINAL FILLED-STATE STYLES
   Paste at the VERY BOTTOM of MentorSessions.css
   ========================================================= */

/* ---------------------------------------------------------
   MAIN WORKSPACE
   --------------------------------------------------------- */

.mentor-session-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(310px, 0.7fr);

  align-items: start;

  gap: 18px;

  width: 100%;
}

.mentor-session-main-column {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

/* ---------------------------------------------------------
   TABS
   Dark secondary active state
   --------------------------------------------------------- */

.mentor-session-tabs {
  border-color: #e4e8ef !important;

  background: #ffffff !important;
}

.mentor-session-tabs button {
  color: #4c5867 !important;

  background: transparent !important;

  font-size: 12px !important;
  font-weight: 500 !important;
}

.mentor-session-tabs button span {
  color: #4c5867 !important;

  background: #eef1f5 !important;
}

.mentor-session-tabs button.active {
  border-color: #101419 !important;

  color: #ffffff !important;
  background: #101419 !important;
}

.mentor-session-tabs button.active span {
  color: #101419 !important;

  background: #ffffff !important;
}

/* ---------------------------------------------------------
   SESSION CARD
   --------------------------------------------------------- */

.mentor-session-card {
  padding: 22px !important;

  border-color: #e4e8ef !important;

  background: #ffffff !important;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.035) !important;
}

.mentor-session-initials {
  border: 1px solid #e4e8ef !important;

  color: #101419 !important;
  background: #f3f5f7 !important;

  font-weight: 600 !important;
}

.mentor-session-mentor small {
  color: #6f8095 !important;

  font-weight: 500 !important;
}

.mentor-session-mentor h2 {
  color: #101419 !important;
}

/* ---------------------------------------------------------
   STATUS
   No green or teal
   --------------------------------------------------------- */

.mentor-session-status {
  padding: 6px 10px !important;

  border: 1px solid #ffcbc5 !important;

  color: #c13c00 !important;
  background: #fff4f3 !important;

  font-size: 10px !important;
  font-weight: 500 !important;
}

.mentor-session-status.status-completed,
.mentor-session-status.status-cancelled,
.mentor-session-status.status-no-show {
  border-color: #dfe4eb !important;

  color: #4c5867 !important;
  background: #f7f8fa !important;
}

/* ---------------------------------------------------------
   DATE BLOCK
   --------------------------------------------------------- */

.mentor-session-date {
  margin-top: 18px !important;

  padding: 14px !important;

  background: #fbfcfd !important;
}

.mentor-session-date-badge {
  color: #ffffff !important;

  background: #ff5303 !important;
}

.mentor-session-date-badge span,
.mentor-session-date-badge strong {
  color: #ffffff !important;
}

.mentor-session-date-copy strong {
  color: #101419 !important;
}

.mentor-session-date-copy span {
  color: #4c5867 !important;
}

.mentor-session-date-copy small {
  color: #6f8095 !important;
}

/* ---------------------------------------------------------
   SESSION INFORMATION
   --------------------------------------------------------- */

.mentor-session-information {
  margin-top: 18px !important;

  gap: 18px !important;
}

.mentor-session-information svg {
  color: #ff5303 !important;
}

.mentor-session-information small,
.mentor-session-topic small {
  color: #6f8095 !important;

  font-weight: 500 !important;
}

.mentor-session-information strong {
  color: #101419 !important;

  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   MENTORING AREA
   --------------------------------------------------------- */

.mentor-session-topic {
  margin-top: 20px !important;

  padding: 18px 0 0 !important;

  border: 0 !important;
  border-top: 1px solid #eef1f5 !important;

  border-radius: 0 !important;

  background: transparent !important;
}

.mentor-session-topic p {
  color: #4c5867 !important;
}

/* ---------------------------------------------------------
   LOCATION
   --------------------------------------------------------- */

.mentor-session-location {
  margin-top: 16px !important;

  padding: 12px 13px !important;

  border: 1px solid #eef1f5 !important;

  color: #4c5867 !important;
  background: #fbfcfd !important;
}

.mentor-session-location svg {
  color: #ff5303 !important;
}

/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.mentor-session-actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 14px !important;

  margin-top: 20px !important;

  padding-top: 18px !important;

  border-top: 1px solid #eef1f5 !important;
}

/* Dark filled secondary action */

.mentor-session-view-mentor {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;

  padding: 0 16px !important;

  border: 1px solid #101419 !important;

  border-radius: 9px !important;

  color: #ffffff !important;

  background: #101419 !important;

  font-family: inherit !important;

  font-size: 13px !important;
  font-weight: 500 !important;

  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow: none !important;
  transform: none !important;
}

.mentor-session-view-mentor:hover {
  border-color: #2d353f !important;

  color: #ffffff !important;

  background: #2d353f !important;
}

/* Orange primary action */

.mentor-session-join-button {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;

  padding: 0 17px !important;

  border: 1px solid #ff5303 !important;

  border-radius: 9px !important;

  color: #ffffff !important;

  background: #ff5303 !important;

  font-size: 13px !important;
  font-weight: 500 !important;

  text-decoration: none !important;

  box-shadow: none !important;
  transform: none !important;
}

.mentor-session-join-button:hover {
  border-color: #c13c00 !important;

  background: #c13c00 !important;
}

/* ---------------------------------------------------------
   ONE SESSION CARD + PAGINATION
   --------------------------------------------------------- */

.mentor-session-paged-shell {
  overflow: hidden;

  width: 100%;

  border: 1px solid #e4e8ef;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.035);
}

.mentor-session-paged-shell
.mentor-session-card--paginated {
  display: block !important;

  min-height: 0 !important;
  height: auto !important;

  margin: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}

.mentor-session-pagination {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin: 0 !important;

  padding: 14px 18px;

  border-top: 1px solid #eef1f5;

  background: #fbfcfd;
}

.mentor-session-pagination-pages {
  display: flex;

  align-items: center;

  gap: 6px;
}

.mentor-session-pagination button {
  appearance: none;
  -webkit-appearance: none;

  min-width: 34px;
  min-height: 34px;

  padding: 0 10px;

  border: 1px solid #dfe4eb;

  border-radius: 8px;

  color: #4c5867;

  background: #ffffff;

  font-family: inherit;

  font-size: 11px;
  font-weight: 500;

  line-height: 1;

  cursor: pointer;
}

.mentor-session-pagination
button:hover:not(:disabled) {
  border-color: #97aac2;

  color: #101419;

  background: #f7f8fa;
}

.mentor-session-pagination-pages
button.active {
  border-color: #101419;

  color: #ffffff;

  background: #101419;
}

.mentor-session-pagination button:disabled {
  color: #97aac2;

  background: #f7f8fa;

  cursor: not-allowed;

  opacity: 0.65;
}

.mentor-session-pagination-nav {
  min-width: 76px !important;
}

/* ---------------------------------------------------------
   CALENDAR PANEL
   Same structure as approved empty state
   --------------------------------------------------------- */

.mentor-session-calendar-panel {
  position: static !important;

  top: auto !important;

  align-self: start !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 0 !important;
  height: auto !important;

  margin: 0 !important;

  padding: 22px !important;

  border-color: #e4e8ef !important;

  background: #ffffff !important;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.03) !important;
}

.mentor-session-calendar-heading .eyebrow {
  color: #ff5303 !important;
}

.mentor-session-calendar-heading h3 {
  color: #101419 !important;
}

.mentor-session-calendar-heading p {
  color: #4c5867 !important;
}

/* ---------------------------------------------------------
   DATE FIELD
   --------------------------------------------------------- */

.mentor-custom-date-field-wrap {
  position: relative !important;

  width: 100% !important;

  margin-top: 18px !important;
}

.mentor-custom-date-label {
  color: #2d353f !important;

  font-weight: 600 !important;
}

.mentor-custom-date-field {
  width: 100% !important;

  border-color: #c9d2df !important;

  color: #101419 !important;

  background: #ffffff !important;

  font-weight: 500 !important;
}

.mentor-custom-date-field:hover,
.mentor-custom-date-field:focus-visible {
  border-color: #4c5867 !important;

  outline: none !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.1) !important;
}

.mentor-custom-date-field svg {
  color: #ff5303 !important;
}

/* ---------------------------------------------------------
   TODAY BUTTON
   --------------------------------------------------------- */

.mentor-session-today-button {
  width: 100% !important;

  margin-top: 10px !important;

  border-color: #c9d2df !important;

  color: #2d353f !important;

  background: #ffffff !important;

  font-size: 13px !important;
  font-weight: 500 !important;
}

.mentor-session-today-button:hover {
  border-color: #97aac2 !important;

  background: #f7f8fa !important;
}

/* ---------------------------------------------------------
   SELECTED DATE BLOCK
   --------------------------------------------------------- */

.mentor-session-selected-date {
  display: flex !important;

  align-items: center !important;

  min-height: 76px !important;

  height: auto !important;

  margin-top: 16px !important;

  padding: 15px 16px !important;

  border: 1px solid #eef1f5 !important;

  border-radius: 12px !important;

  color: #2d353f !important;

  background: #f8f9fb !important;
}

.mentor-session-selected-date > svg {
  flex: 0 0 auto !important;

  width: 20px !important;
  height: 20px !important;

  margin-right: 11px !important;

  color: #ff5303 !important;
}

.mentor-session-selected-date > div {
  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  min-width: 0 !important;
}

.mentor-session-selected-date small {
  margin-bottom: 4px !important;

  color: #6f8095 !important;

  font-size: 9px !important;
  font-weight: 600 !important;
}

.mentor-session-selected-date strong {
  color: #101419 !important;

  font-size: 12px !important;
  font-weight: 600 !important;

  line-height: 1.35 !important;
}

/* ---------------------------------------------------------
   CALENDAR POPUP
   --------------------------------------------------------- */

.mentor-custom-calendar {
  border-color: #e4e8ef !important;

  background: #ffffff !important;

  box-shadow:
    0 18px 44px
    rgba(16, 20, 25, 0.13) !important;
}

.mentor-custom-calendar-topbar {
  border-bottom-color: #eef1f5 !important;
}

.mentor-custom-calendar-topbar > span {
  color: #6f8095 !important;
}

.mentor-custom-calendar-close,
.mentor-custom-calendar-header button {
  color: #4c5867 !important;
}

.mentor-custom-calendar-close:hover,
.mentor-custom-calendar-header button:hover {
  color: #101419 !important;

  background: #f7f8fa !important;
}

.mentor-custom-calendar-header strong {
  color: #101419 !important;

  font-weight: 600 !important;
}

.mentor-custom-calendar-weekdays span {
  color: #6f8095 !important;
}

.mentor-custom-calendar-day {
  color: #2d353f !important;

  font-weight: 500 !important;
}

.mentor-custom-calendar-day:hover {
  color: #c13c00 !important;

  background: #fff4f3 !important;
}

.mentor-custom-calendar-day.today:not(.selected) {
  border-color: #ff9788 !important;

  color: #c13c00 !important;
}

.mentor-custom-calendar-day.selected {
  border-color: #ff5303 !important;

  color: #ffffff !important;

  background: #ff5303 !important;
}

.mentor-custom-calendar-day.has-session::after,
.mentor-custom-calendar-day.has-session i {
  background: #ff5303 !important;
}

.mentor-custom-calendar-day.selected.has-session::after,
.mentor-custom-calendar-day.selected.has-session i {
  background: #ffffff !important;
}

/* ---------------------------------------------------------
   CALENDAR EMPTY STATE
   --------------------------------------------------------- */

.mentor-session-calendar-empty {
  min-height: 0 !important;

  height: auto !important;

  margin-top: 12px !important;

  border-color: #dfe4eb !important;

  color: #4c5867 !important;

  background: #ffffff !important;
}

.mentor-session-calendar-empty > svg {
  color: #ff5303 !important;
}

.mentor-session-calendar-empty h4 {
  color: #101419 !important;
}

.mentor-session-calendar-empty p {
  color: #6f8095 !important;
}

/* ---------------------------------------------------------
   CALENDAR SESSION RESULT
   --------------------------------------------------------- */

.mentor-session-calendar-results {
  gap: 9px !important;

  min-height: 0 !important;

  height: auto !important;

  margin-top: 12px !important;
}

.mentor-session-calendar-result {
  grid-template-columns: 1fr !important;

  gap: 6px !important;

  min-height: 0 !important;

  height: auto !important;

  padding: 13px 14px !important;

  border-color: #e4e8ef !important;

  background: #ffffff !important;
}

.mentor-session-calendar-time {
  min-width: 0 !important;

  color: #c13c00 !important;

  font-weight: 600 !important;
}

.mentor-session-calendar-result strong {
  color: #101419 !important;
}

.mentor-session-calendar-result p {
  color: #6f8095 !important;
}

.mentor-session-calendar-format {
  justify-self: start !important;

  border: 1px solid #e4e8ef !important;

  color: #4c5867 !important;

  background: #f7f8fa !important;

  font-weight: 500 !important;
}

/* ---------------------------------------------------------
   DESKTOP HEIGHT ALIGNMENT
   Outer canvases line up without stretching card content.
   --------------------------------------------------------- */

@media (min-width: 981px) {
  .mentor-session-workspace {
    align-items: stretch !important;
  }

  .mentor-session-main-column {
    height: 100% !important;
  }

  .mentor-session-paged-shell {
    display: flex !important;

    flex-direction: column !important;

    height: 100% !important;
  }

  .mentor-session-paged-shell
  .mentor-session-card--paginated {
    flex: 0 0 auto !important;
  }

  .mentor-session-paged-shell
  .mentor-session-pagination {
    margin-top: auto !important;
  }

  .mentor-session-calendar-panel {
    align-self: stretch !important;

    height: 100% !important;

    min-height: 100% !important;
  }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .mentor-session-workspace {
    grid-template-columns: 1fr !important;
  }

  .mentor-session-calendar-panel {
    position: static !important;

    top: auto !important;

    min-height: 0 !important;

    height: auto !important;

    margin-top: 0 !important;
  }

  .mentor-session-card--paginated {
    min-height: 0 !important;

    height: auto !important;
  }
}

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

@media (max-width: 700px) {
  .mentor-session-card {
    padding: 18px !important;
  }

  .mentor-session-actions {
    align-items: stretch !important;

    flex-direction: column !important;
  }

  .mentor-session-view-mentor,
  .mentor-session-join-button {
    width: 100% !important;

    justify-content: center !important;
  }
}

@media (max-width: 620px) {
  .mentor-session-calendar-panel {
    padding: 18px !important;
  }

  .mentor-session-pagination {
    gap: 6px !important;

    padding: 12px !important;
  }

  .mentor-session-pagination-nav {
    min-width: 68px !important;

    padding: 0 8px !important;
  }

  .mentor-session-selected-date {
    min-height: 68px !important;

    padding: 13px 14px !important;
  }

  .mentor-session-paged-shell {
    border-radius: 14px !important;
  }
}

/* =========================================================
   FINAL SESSIONS EMPTY-STATE + CANVAS ALIGNMENT
   Desktop: left empty canvas and right calendar canvas match.
   No fixed 420px height. The taller content defines the row.
   Tablet/mobile: both return to natural stacked heights.
   ========================================================= */

/* Keep the schedule introduction fully white. */
.mentor-sessions-summary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

.mentor-sessions-summary::before,
.mentor-sessions-summary::after {
  content: none !important;
  background: none !important;
}

/* Remove old fixed empty-state sizing. */
.mentor-session-main-column > .mentor-session-empty-state,
.mentor-session-empty-state {
  min-height: 0 !important;
}

/* ---------------------------------------------------------
   DESKTOP EMPTY STATE
   Let CSS Grid calculate the row from the taller column,
   then stretch both canvases to that same height.
   --------------------------------------------------------- */

@media (min-width: 981px) {
  .mentor-session-workspace--empty {
    align-items: stretch !important;
  }

  .mentor-session-workspace--empty
  .mentor-session-main-column {
    display: flex !important;
    flex-direction: column !important;

    align-self: stretch !important;

    height: auto !important;
    min-height: 0 !important;
  }

  .mentor-session-workspace--empty
  .mentor-session-empty-state {
    flex: 1 1 auto !important;

    align-self: stretch !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    padding: 38px 24px !important;

    border: 1px solid #e4e8ef !important;
    border-radius: 16px !important;

    background: #ffffff !important;
    background-image: none !important;

    box-shadow:
      0 8px 24px rgba(16, 20, 25, 0.03) !important;
  }

  .mentor-session-workspace--empty
  .mentor-session-calendar-panel {
    align-self: stretch !important;

    height: 100% !important;
    min-height: 0 !important;
  }
}

/* ---------------------------------------------------------
   EMPTY STATE CONTENT
   Keep the content compact even when the outer canvas stretches.
   --------------------------------------------------------- */

.mentor-session-empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;

  text-align: center !important;
}

.mentor-session-empty-state
.empty-state-icon {
  margin-bottom: 14px !important;
}

.mentor-session-empty-state h2 {
  margin: 0 0 7px !important;
}

.mentor-session-empty-state p {
  max-width: 520px !important;
}

.mentor-session-empty-state
.primary-button {
  margin-top: 18px !important;
}

/* ---------------------------------------------------------
   TABLET + MOBILE
   Once stacked, each canvas sizes naturally again.
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .mentor-session-workspace--empty {
    align-items: start !important;
  }

  .mentor-session-workspace--empty
  .mentor-session-main-column {
    display: block !important;

    height: auto !important;
    min-height: 0 !important;
  }

  .mentor-session-workspace--empty
  .mentor-session-empty-state {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 34px 24px !important;
  }

  .mentor-session-workspace--empty
  .mentor-session-calendar-panel {
    align-self: start !important;

    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 700px) {
  .mentor-session-workspace--empty
  .mentor-session-empty-state {
    padding: 30px 20px !important;
  }
}

@media (max-width: 520px) {
  .mentor-session-workspace--empty
  .mentor-session-empty-state {
    padding: 26px 18px !important;
  }
}


/* =========================================================
   MENTOR-SPECIFIC SESSION OVERRIDES
   Read-only production state for now.
   ========================================================= */

.mentor-session-readonly-note {
  margin-right: auto;
  color: #8794a4;
  font-size: 10px;
  line-height: 1.5;
}

.mentor-session-actions {
  justify-content: space-between !important;
}

@media (max-width: 700px) {
  .mentor-session-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .mentor-session-readonly-note {
    margin-right: 0;
  }

  .mentor-session-join-button {
    width: 100% !important;
  }
}


/* =========================================================
   REAL SESSION CREATION ENTRY POINT
   ========================================================= */

.mentor-sessions-summary--with-action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
}

.mentor-schedule-session-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .mentor-sessions-summary--with-action {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .mentor-schedule-session-button {
    width: auto !important;
  }
}
/* =========================================================
   MENTOR SCHEDULE SESSION
   ========================================================= */

.mentor-schedule-session-page,
.mentor-session-created-state {
  width: 100%;
  padding-bottom:
    max(
      80px,
      calc(
        60px +
        env(safe-area-inset-bottom)
      )
    );
}

.mentor-schedule-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  color: #4c5867;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-schedule-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
}

.mentor-schedule-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #ff5303;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-schedule-intro h2,
.mentor-session-created-state h2 {
  margin: 0;
  color: #101419;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.mentor-schedule-intro > div:first-child > p,
.mentor-session-created-state > p {
  max-width: 650px;
  margin: 7px 0 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.65;
}

.mentor-schedule-provider-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(360px, 100%);
  padding: 13px;
  border: 1px solid #e4e8ef;
  border-radius: 11px;
  background: #fbfcfd;
}

.mentor-schedule-provider-note > svg {
  flex: 0 0 auto;
  color: #ff5303;
}

.mentor-schedule-provider-note strong {
  display: block;
  color: #101419;
  font-size: 10px;
  font-weight: 600;
}

.mentor-schedule-provider-note p {
  margin: 4px 0 0;
  color: #6f8095;
  font-size: 9px;
  line-height: 1.5;
}

.mentor-schedule-form {
  display: grid;
  gap: 14px;
}

.mentor-schedule-card,
.mentor-schedule-review {
  padding: 22px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
}

.mentor-schedule-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
}

.mentor-schedule-section-heading > span {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #c13c00;
  background: #fff2ec;
  font-size: 9px;
  font-weight: 700;
}

.mentor-schedule-section-heading h3,
.mentor-schedule-review h3 {
  margin: 0;
  color: #101419;
  font-size: 16px;
  font-weight: 650;
}

.mentor-schedule-section-heading p,
.mentor-schedule-review > div:first-child > p {
  margin: 4px 0 0;
  color: #6f8095;
  font-size: 10px;
  line-height: 1.55;
}

.mentor-schedule-field {
  display: grid;
  gap: 7px;
}

.mentor-schedule-field > span {
  color: #2d353f;
  font-size: 10px;
  font-weight: 600;
}

.mentor-schedule-field > small {
  color: #8794a4;
  font-size: 9px;
  line-height: 1.5;
}

.mentor-schedule-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.mentor-schedule-field input:focus {
  border-color: #4c5867;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10);
}

/* Corrected platform dropdown pattern:
   same input dimensions, browser arrow hidden,
   Lucide chevron aligned consistently on the right. */
.mentor-schedule-select-wrap {
  position: relative;
  width: 100%;
}

.mentor-schedule-select-wrap select {
  width: 100%;
  min-height: 44px;
  padding: 0 46px 0 12px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.mentor-schedule-select-wrap select:hover {
  border-color: #97aac2;
}

.mentor-schedule-select-wrap select:focus,
.mentor-schedule-select-wrap select:focus-visible {
  border-color: #4c5867;
  outline: none;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10);
}

.mentor-schedule-select-icon {
  position: absolute;
  top: 50%;
  right: 17px;
  color: #6f8095;
  pointer-events: none;
  transform: translateY(-50%);
}

.mentor-schedule-select-wrap:focus-within
.mentor-schedule-select-icon {
  color: #4c5867;
}

.mentor-schedule-two-column {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 12px;
}

.mentor-schedule-selected-mentee {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  background: #fbfcfd;
}

.mentor-schedule-selected-mentee > span {
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #c13c00;
  background: #fff2ec;
  font-size: 10px;
  font-weight: 700;
}

.mentor-schedule-selected-mentee strong,
.mentor-schedule-selected-mentee small {
  display: block;
}

.mentor-schedule-selected-mentee strong {
  color: #101419;
  font-size: 11px;
  font-weight: 600;
}

.mentor-schedule-selected-mentee small {
  margin-top: 3px;
  color: #8794a4;
  font-size: 9px;
}

.mentor-schedule-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mentor-schedule-choice-row button {
  min-height: 37px;
  padding: 0 13px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #4c5867;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-schedule-choice-row button.active {
  border-color: #101419;
  color: #ffffff;
  background: #101419;
}

.mentor-schedule-format-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 10px;
}

.mentor-schedule-format-grid > button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d7dee7;
  border-radius: 11px;
  color: #4c5867;
  background: #ffffff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mentor-schedule-format-grid > button > svg {
  flex: 0 0 auto;
  color: #8794a4;
}

.mentor-schedule-format-grid > button strong,
.mentor-schedule-format-grid > button small {
  display: block;
}

.mentor-schedule-format-grid > button strong {
  color: #101419;
  font-size: 11px;
  font-weight: 600;
}

.mentor-schedule-format-grid > button small {
  margin-top: 4px;
  color: #8794a4;
  font-size: 9px;
  line-height: 1.45;
}

.mentor-schedule-format-grid > button.active {
  border-color: #ff5303;
  background: #fff9f6;
}

.mentor-schedule-format-grid > button.active > svg {
  color: #ff5303;
}

.mentor-schedule-format-field {
  margin-top: 14px;
}

.mentor-schedule-input-with-icon {
  position: relative;
}

.mentor-schedule-input-with-icon > svg {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #8794a4;
  pointer-events: none;
  transform: translateY(-50%);
}

.mentor-schedule-input-with-icon input {
  padding-left: 38px;
}

.mentor-schedule-review {
  background: #fbfcfd;
}

.mentor-schedule-review-grid {
  display: grid;
  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );
  gap: 9px;
  margin-top: 16px;
}

.mentor-schedule-review-item {
  padding: 11px;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  background: #ffffff;
}

.mentor-schedule-review-item small,
.mentor-schedule-review-item strong {
  display: block;
}

.mentor-schedule-review-item small {
  color: #8794a4;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mentor-schedule-review-item strong {
  margin-top: 4px;
  color: #101419;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
}

.mentor-schedule-actions,
.mentor-session-created-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.mentor-session-created-state {
  padding: 34px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
  text-align: center;
}

.mentor-session-created-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 15px;
  color: #2f7d4a;
  background: #f2f8f4;
}

.mentor-session-created-summary {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 10px;
  max-width: 720px;
  margin: 22px auto 0;
}

.mentor-session-created-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  background: #fbfcfd;
  text-align: left;
}

.mentor-session-created-item > span {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #ff5303;
  background: #fff2ec;
}

.mentor-session-created-item small,
.mentor-session-created-item strong {
  display: block;
}

.mentor-session-created-item small {
  color: #8794a4;
  font-size: 8px;
}

.mentor-session-created-item strong {
  margin-top: 3px;
  color: #101419;
  font-size: 10px;
  font-weight: 600;
}

.mentor-session-created-actions {
  justify-content: center;
}



/* =========================================================
   CUSTOM SESSION DATE + TIME PICKER
   ========================================================= */

.mentor-schedule-date-time-layout {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.9fr)
    minmax(0, 1.1fr);
  gap: 18px;
}

.mentor-schedule-calendar-block,
.mentor-schedule-time-block {
  padding: 16px;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
  background: #ffffff;
}

.mentor-schedule-calendar-header {
  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr)
    34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.mentor-schedule-calendar-header strong {
  color: #101419;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.mentor-schedule-calendar-header button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #4c5867;
  background: #ffffff;
  cursor: pointer;
}

.mentor-schedule-calendar-header button:hover {
  border-color: #97aac2;
  background: #f7f8fa;
}

.mentor-schedule-calendar-weekdays,
.mentor-schedule-calendar-grid {
  display: grid;
  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );
  gap: 5px;
}

.mentor-schedule-calendar-weekdays {
  margin-bottom: 6px;
}

.mentor-schedule-calendar-weekdays span {
  color: #8794a4;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}

.mentor-schedule-calendar-empty,
.mentor-schedule-calendar-day {
  min-height: 38px;
}

.mentor-schedule-calendar-day {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #2d353f;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-schedule-calendar-day:hover:not(:disabled) {
  border-color: #ffd8c6;
  color: #c13c00;
  background: #fff9f6;
}

.mentor-schedule-calendar-day.selected {
  border-color: #ff5303;
  color: #ffffff;
  background: #ff5303;
}

.mentor-schedule-calendar-day.disabled {
  color: #c3cad3;
  cursor: not-allowed;
}

.mentor-schedule-selected-date,
.mentor-schedule-selected-time {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #edf0f4;
  color: #4c5867;
  font-size: 10px;
}

.mentor-schedule-selected-date svg,
.mentor-schedule-selected-time svg {
  color: #ff5303;
}

.mentor-schedule-field-label {
  display: block;
  margin-bottom: 12px;
  color: #2d353f;
  font-size: 10px;
  font-weight: 600;
}

.mentor-schedule-time-slots {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 8px;
}

.mentor-schedule-time-slots button {
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #2d353f;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.mentor-schedule-time-slots button:hover {
  border-color: #ffd8c6;
  color: #c13c00;
  background: #fff9f6;
}

.mentor-schedule-time-slots button.active {
  border-color: #ff5303;
  color: #c13c00;
  background: #fff4ef;
  box-shadow:
    0 0 0 1px
    rgba(255, 83, 3, 0.08);
}

.mentor-schedule-time-placeholder {
  display: grid;
  place-items: center;
  min-height: 185px;
  padding: 24px;
  border: 1px dashed #d7dee7;
  border-radius: 10px;
  color: #8794a4;
  text-align: center;
}

.mentor-schedule-time-placeholder svg {
  color: #ff5303;
}

.mentor-schedule-time-placeholder p {
  max-width: 260px;
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .mentor-schedule-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentor-schedule-provider-note {
    width: 100%;
  }

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

@media (max-width: 700px) {
  .mentor-schedule-field input,
  .mentor-schedule-select-wrap select {
    font-size: 16px;
  }

  .mentor-schedule-two-column,
  .mentor-schedule-format-grid,
  .mentor-session-created-summary {
    grid-template-columns: 1fr;
  }

  .mentor-schedule-card,
  .mentor-schedule-review {
    padding: 18px;
  }

  .mentor-schedule-review-grid {
    grid-template-columns: 1fr;
  }

  .mentor-schedule-actions,
  .mentor-session-created-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


@media (max-width: 900px) {
  .mentor-schedule-date-time-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .mentor-schedule-time-slots {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .mentor-schedule-calendar-day {
    min-height: 34px;
  }
}
/* =========================================================
   MENTOR MESSAGES
   Approved filled-state design transferred to production.
   White canvas + neutral secondary styling + orange accents.
   ========================================================= */

html:has(.mentor-messages-page),
body:has(.mentor-messages-page),
body:has(.mentor-messages-page) #root,
body:has(.mentor-messages-page) .dashboard-layout,
body:has(.mentor-messages-page) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.mentor-messages-page) .dashboard-content {
  min-height: 100vh !important;
}

body:has(.mentor-messages-page)
.dashboard-content > header h1 {
  color: #101419 !important;
}

body:has(.mentor-messages-page)
.dashboard-content > header p,
body:has(.mentor-messages-page)
.dashboard-content > header > span > small {
  color: #4c5867 !important;
}

body:has(.mentor-messages-page)
.dashboard-user small {
  border: 1px solid #d7dee7 !important;

  color: #2d353f !important;
  background: #eef1f5 !important;

  font-weight: 600 !important;
}

.mentor-messages-page {
  width: 100%;
  min-width: 0;

  padding-top: 22px;

  color: #101419;
  background: #ffffff;
}

/* ---------------------------------------------------------
   PAGE TOOLBAR
   --------------------------------------------------------- */

.mentor-message-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 14px;
}

.mentor-message-toolbar-eyebrow {
  display: block;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-message-page-toolbar p {
  margin: 5px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.5;
}

.mentor-message-start-button,
.mentor-message-primary-button {
  min-height: 42px;
  padding: 0 16px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.mentor-message-start-button:hover,
.mentor-message-primary-button:hover {
  border-color: #c13c00;
  background: #c13c00;
}

/* ---------------------------------------------------------
   MAIN CHAT WORKSPACE
   The history scrolls internally. The whole page does not
   become extremely tall because of messages.
   --------------------------------------------------------- */

.mentor-messages-layout {
  display: grid;
  grid-template-columns:
    minmax(220px, 260px)
    minmax(0, 1fr);

  width: 100%;
  min-width: 0;

  height:
    clamp(
      480px,
      62vh,
      600px
    );

  min-height: 0;

  overflow: hidden;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.035);
}

/* ---------------------------------------------------------
   THREAD LIST
   --------------------------------------------------------- */

.mentor-message-threads {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);

  min-width: 0;
  min-height: 0;

  border-right: 1px solid #e4e8ef;

  background: #ffffff;
}

.mentor-message-threads-heading {
  padding: 18px;

  border-bottom: 1px solid #eef1f5;

  background: #ffffff;
}

.mentor-message-threads-heading .eyebrow {
  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mentor-message-threads-heading h2 {
  margin: 5px 0 0;

  color: #101419;

  font-size: 17px;
  font-weight: 650;
}

.mentor-message-thread-list {
  min-height: 0;

  padding: 0;

  overflow-y: auto;

  overscroll-behavior: contain;
}

.mentor-message-thread {
  position: relative;

  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr);
  align-items: center;

  gap: 10px;

  width: 100%;
  padding: 13px 14px;

  border: 0;
  border-bottom: 1px solid #eef1f5;
  border-radius: 0;

  color: inherit;
  background: #ffffff;

  font-family: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    background-color 150ms ease;
}

.mentor-message-thread:hover {
  background: #f8f9fb;
}

.mentor-message-thread.active {
  background: #f3f5f7;
}

.mentor-message-thread.active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;

  width: 3px;

  border-radius: 0 4px 4px 0;

  background: #ff5303;

  content: "";
}

.mentor-message-thread-avatar {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  object-fit: cover;
}

.mentor-message-thread-avatar--large {
  width: 56px;
  height: 56px;

  border-radius: 14px;
}

.mentor-message-thread-initials {
  color: #101419;
  background: #f3f5f7;

  font-size: 11px;
  font-weight: 600;
}

.mentor-message-thread-copy {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.mentor-message-thread-copy strong {
  overflow: hidden;

  color: #101419;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-message-thread-copy small {
  overflow: hidden;

  color: #6f8095;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   EMPTY THREAD LIST
   --------------------------------------------------------- */

.mentor-message-empty-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 100%;
  padding: 24px 18px;

  color: #6f8095;

  text-align: center;
}

.mentor-message-empty-list > svg {
  color: #ff5303;
}

.mentor-message-empty-list h3 {
  margin: 10px 0 0;

  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.mentor-message-empty-list p {
  max-width: 200px;
  margin: 6px 0 14px;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.55;
}

.mentor-message-empty-list button,
.mentor-message-no-selection button {
  min-height: 38px;
  padding: 0 12px;

  border: 1px solid #ff5303;
  border-radius: 8px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;

  cursor: pointer;
}

/* ---------------------------------------------------------
   CONVERSATION
   --------------------------------------------------------- */

.mentor-message-conversation {
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto
    auto;

  min-width: 0;
  min-height: 0;

  background: #ffffff;
}

.mentor-message-conversation-header {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;

  gap: 12px;

  min-height: 78px;
  padding: 14px 16px;

  border-bottom: 1px solid #e4e8ef;

  background: #ffffff;
}

.mentor-message-conversation-title {
  min-width: 0;
}

.mentor-message-conversation-title small {
  display: block;

  color: #ff5303;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mentor-message-conversation-title h2 {
  margin: 4px 0 2px;

  overflow: hidden;

  color: #101419;

  font-size: 16px;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-message-conversation-title p {
  margin: 0;

  overflow: hidden;

  color: #6f8095;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-message-mobile-back {
  display: none;
  place-items: center;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  cursor: pointer;
}

.mentor-message-view-mentee {
  flex-shrink: 0;

  min-height: 34px;
  padding: 0 10px;

  border: 0;
  border-radius: 7px;

  color: #c13c00;
  background: transparent;

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;

  cursor: pointer;
}

.mentor-message-view-mentee:hover {
  color: #832600;
  background: #fff4f3;
}

/* ---------------------------------------------------------
   MESSAGE HISTORY
   --------------------------------------------------------- */

.mentor-message-history {
  min-height: 0;

  padding: 18px;

  overflow-y: auto;
  overflow-x: hidden;

  background: #fbfcfd;

  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.mentor-message-row {
  display: flex;

  width: 100%;
  margin-bottom: 10px;
}

.mentor-message-row.mine {
  justify-content: flex-end;
}

.mentor-message-row.theirs {
  justify-content: flex-start;
}

.mentor-message-bubble {
  width: fit-content;
  max-width: min(72%, 560px);

  padding: 10px 12px;

  border: 1px solid #e4e8ef;
  border-radius: 13px;

  background: #ffffff;

  box-shadow:
    0 3px 10px rgba(16, 20, 25, 0.02);
}

.mentor-message-row.mine
.mentor-message-bubble {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.mentor-message-bubble p {
  margin: 0;

  color: #2d353f;

  font-size: 12px;
  line-height: 1.55;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mentor-message-row.mine
.mentor-message-bubble p {
  color: #ffffff;
}

.mentor-message-bubble small {
  display: block;

  margin-top: 5px;

  color: #8794a4;

  font-size: 8px;
  line-height: 1.3;
}

.mentor-message-row.mine
.mentor-message-bubble small {
  color: #d7dee7;

  text-align: right;
}

.mentor-message-new-thread,
.mentor-message-no-selection,
.mentor-message-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 100%;
  padding: 28px;

  text-align: center;
}

.mentor-message-new-thread h3,
.mentor-message-no-selection h3 {
  margin: 12px 0 0;

  color: #101419;

  font-size: 15px;
  font-weight: 650;
}

.mentor-message-new-thread p,
.mentor-message-no-selection p {
  max-width: 390px;

  margin: 7px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.6;
}

.mentor-message-no-selection > svg {
  color: #ff5303;
}

.mentor-message-no-selection button {
  margin-top: 14px;
}

/* ---------------------------------------------------------
   MESSAGE LOADING
   --------------------------------------------------------- */

.mentor-message-loading {
  gap: 9px;
}

.mentor-message-loading span {
  display: block;

  width: min(360px, 70%);
  height: 34px;

  border-radius: 12px;

  background: #eef1f5;

  animation:
    mentor-message-skeleton 1.2s ease-in-out infinite;
}

.mentor-message-loading span:nth-child(2) {
  width: min(260px, 54%);
  align-self: flex-end;
}

.mentor-message-loading span:nth-child(3) {
  width: min(310px, 62%);
}

.mentor-message-loading-page {
  display: grid;

  gap: 12px;

  min-height: 420px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;
}

.mentor-message-loading-block {
  display: block;

  width: 100%;
  height: 92px;

  border-radius: 14px;

  background: #eef1f5;

  animation:
    mentor-message-skeleton 1.2s ease-in-out infinite;
}

.mentor-message-loading-block--short {
  width: 46%;
  height: 42px;
}

@keyframes mentor-message-skeleton {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   ERROR
   --------------------------------------------------------- */

.mentor-message-error {
  margin: 0;
  padding: 8px 14px;

  border-top: 1px solid #ffcbc5;

  color: #832600;
  background: #fff4f3;

  font-size: 10px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   COMPOSER
   Compact auto-grow. Textarea and Send begin at 44px.
   --------------------------------------------------------- */

.mentor-message-composer {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: end;

  gap: 9px;

  padding: 12px 14px;

  border-top: 1px solid #e4e8ef;

  background: #ffffff;
}

.mentor-message-composer textarea {
  box-sizing: border-box;

  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 96px;

  padding: 11px 13px;

  border: 1px solid #c9d2df;
  border-radius: 10px;
  outline: none;

  color: #101419;
  background: #ffffff;

  font-family: inherit;
  font-size: 12px;
  line-height: 20px;

  overflow-y: auto;

  resize: none;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.mentor-message-composer textarea:focus,
.mentor-message-composer textarea:focus-visible {
  border-color: #4c5867;
  outline: none;

  box-shadow:
    0 0 0 2px rgba(76, 88, 103, 0.10);
}

.mentor-message-composer textarea::placeholder {
  color: #8794a4;
}

.mentor-message-send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  height: 44px;
  min-height: 44px;

  padding: 0 15px;

  border: 1px solid #ff5303;
  border-radius: 9px;

  color: #ffffff;
  background: #ff5303;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease;
}

.mentor-message-send-button:hover:not(:disabled) {
  border-color: #c13c00;
  background: #c13c00;
}

.mentor-message-send-button:disabled {
  cursor: not-allowed;

  opacity: 0.5;
}

/* ---------------------------------------------------------
   FULL PAGE EMPTY STATE
   --------------------------------------------------------- */

.mentor-message-page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 380px;
  padding: 48px 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #f8f9fb;

  text-align: center;
}

.mentor-message-page-empty-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom: 16px;

  border: 1px solid #ffe5e3;
  border-radius: 14px;

  color: #ff5303;
  background: #fff4f3;
}

.mentor-message-page-empty h2 {
  margin: 0 0 8px;

  color: #101419;

  font-size: 19px;
  font-weight: 650;
}

.mentor-message-page-empty p {
  max-width: 510px;

  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.65;
}

.mentor-message-page-empty
.mentor-message-primary-button {
  margin-top: 20px;
}

/* ---------------------------------------------------------
   START CONVERSATION MODAL
   --------------------------------------------------------- */

.mentor-message-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(3, 4, 5, 0.34);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mentor-start-conversation-modal {
  width:
    min(
      100%,
      520px
    );

  max-height:
    min(
      78vh,
      650px
    );

  overflow-y: auto;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 28px 80px rgba(16, 20, 25, 0.18);
}

.mentor-start-conversation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding: 22px;

  border-bottom: 1px solid #eef1f5;
}

.mentor-start-conversation-header span {
  display: block;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mentor-start-conversation-header h2 {
  margin: 5px 0 0;

  color: #101419;

  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mentor-start-conversation-header p {
  margin: 6px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.55;
}

.mentor-start-conversation-header > button {
  display: grid;
  place-items: center;

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;
  background: #ffffff;

  cursor: pointer;
}

.mentor-start-conversation-list {
  display: grid;

  padding: 8px;
}

.mentor-start-conversation-option {
  display: grid;
  grid-template-columns:
    44px
    minmax(0, 1fr)
    auto;
  align-items: center;

  gap: 11px;

  width: 100%;
  padding: 12px;

  border: 0;
  border-radius: 11px;

  color: inherit;
  background: transparent;

  font-family: inherit;
  text-align: left;

  cursor: pointer;
}

.mentor-start-conversation-option:hover {
  background: #f8f9fb;
}

.mentor-start-conversation-option
.mentor-message-thread-avatar {
  width: 44px;
  height: 44px;
}

.mentor-start-conversation-copy {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.mentor-start-conversation-copy strong {
  overflow: hidden;

  color: #101419;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-start-conversation-copy small {
  overflow: hidden;

  color: #6f8095;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-start-conversation-action {
  color: #c13c00;

  font-size: 10px;
  font-weight: 500;

  white-space: nowrap;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .mentor-messages-layout {
    grid-template-columns:
      minmax(210px, 250px)
      minmax(0, 1fr);
  }

  .mentor-message-bubble {
    max-width: 80%;
  }
}

/* ---------------------------------------------------------
   MOBILE
   Approved compact structure: thread list remains short,
   conversation gets the remaining workspace.
   --------------------------------------------------------- */

@media (max-width: 760px) {
  .mentor-messages-page {
    padding-top: 14px;
  }

  .mentor-message-page-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .mentor-message-start-button {
    width: 100%;
  }

  .mentor-messages-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      minmax(0, 1fr);

    height:
      min(
        640px,
        calc(100dvh - 170px)
      );

    min-height: 500px;

    border-radius: 14px;
  }

  .mentor-message-threads {
    grid-template-rows:
      auto
      minmax(0, 1fr);

    max-height: 180px;

    border-right: 0;
    border-bottom: 1px solid #e4e8ef;
  }

  .mentor-message-threads-heading {
    padding: 12px 14px;
  }

  .mentor-message-threads-heading h2 {
    font-size: 14px;
  }

  .mentor-message-thread-list {
    display: block;

    padding: 0;

    overflow-x: hidden;
    overflow-y: auto;
  }

  .mentor-message-empty-list {
    min-height: 118px;
    padding: 14px;
  }

  .mentor-message-empty-list p {
    margin-bottom: 10px;
  }

  .mentor-message-conversation {
    min-height: 0;
  }

  .mentor-message-conversation-header {
    min-height: 68px;
    padding: 10px 12px;
  }

  .mentor-message-mobile-back {
    display: grid;
  }

  .mentor-message-conversation-title h2 {
    font-size: 14px;
  }

  .mentor-message-view-mentee {
    width: auto;
    min-height: 34px;

    padding: 0 8px;

    font-size: 10px;
  }

  .mentor-message-history {
    padding: 14px 12px;
  }

  .mentor-message-bubble {
    max-width: 88%;
  }

  .mentor-message-composer {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding: 10px;
  }

  .mentor-message-send-button {
    width: auto;
    min-width: 82px;
    padding: 0 14px;

    font-size: 12px;
  }

  .mentor-message-send-button span {
    display: inline;
  }

  .mentor-message-modal-backdrop {
    align-items: flex-end;

    padding: 12px;
  }

  .mentor-start-conversation-modal {
    width: 100%;

    border-radius:
      18px 18px 14px 14px;
  }
}

@media (max-width: 480px) {
  .mentor-start-conversation-option {
    grid-template-columns:
      40px
      minmax(0, 1fr);
  }

  .mentor-start-conversation-action {
    grid-column: 2;

    justify-self: start;
  }

  .mentor-start-conversation-option
  .mentor-message-thread-avatar {
    width: 40px;
    height: 40px;
  }

  .mentor-messages-layout {
    min-height: 520px;
  }
}


/* =========================================================
   FINAL VIEW MENTEE ACTION FIX
   Keep this action at the far right of the conversation
   header and remove the oversized hover surface.
   ========================================================= */

.mentor-messages-page
.mentor-message-conversation-header
.mentor-message-view-mentee {
  justify-self: end !important;
  align-self: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;

  min-height: 32px !important;
  padding: 0 4px !important;
  margin-left: auto !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: #c13c00 !important;
  background: transparent !important;

  box-shadow: none !important;

  font-size: 11px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;

  transform: none !important;
}

.mentor-messages-page
.mentor-message-conversation-header
.mentor-message-view-mentee:hover {
  color: #8f2d00 !important;
  background: transparent !important;

  box-shadow: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;

  transform: none !important;
}

.mentor-messages-page
.mentor-message-conversation-header
.mentor-message-view-mentee:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.32) !important;
  outline-offset: 3px !important;

  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .mentor-messages-page
  .mentor-message-conversation-header
  .mentor-message-view-mentee {
    justify-self: end !important;

    width: auto !important;
    max-width: max-content !important;

    padding: 0 2px !important;

    font-size: 10px !important;
  }
}


/* =========================================================
   REAL-TIME UNREAD MESSAGE INDICATOR
   ========================================================= */

.mentor-messages-page .mentor-message-thread {
  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto !important;
}

.mentor-messages-page
.mentor-message-thread.has-unread
.mentor-message-thread-copy strong {
  color: #101419;
  font-weight: 700;
}

.mentor-message-thread-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;
  padding: 0 6px;

  border-radius: 999px;

  color: #ffffff;
  background: #ff5303;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   FINAL RESPONSIVE MESSAGING POLISH
   Compact actions, lighter chat colours, better tablet/mobile
   layout. Buttons remain content-width on every device.
   ========================================================= */

/* ---------- DESKTOP / SHARED ---------- */

.mentor-messages-page .mentor-message-page-toolbar {
  align-items: center;
  flex-wrap: wrap;
}

.mentor-messages-page .mentor-message-start-button,
.mentor-messages-page .mentor-message-primary-button,
.mentor-messages-page .mentor-message-send-button {
  width: auto !important;
  max-width: max-content;
}

.mentor-messages-page .mentor-message-start-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 15px;
}

.mentor-messages-page .mentor-message-history {
  background: #fafbfc !important;
}

/* Received messages */
.mentor-messages-page
.mentor-message-row.theirs
.mentor-message-bubble {
  border-color: #e1e6ed !important;
  color: #2d353f !important;
  background: #ffffff !important;
  box-shadow:
    0 2px 8px
    rgba(16, 20, 25, 0.025) !important;
}

/* Sent messages: soft orange instead of black */
.mentor-messages-page
.mentor-message-row.mine
.mentor-message-bubble {
  border-color: #ffd1bb !important;
  color: #2d353f !important;
  background: #fff3ec !important;
  box-shadow: none !important;
}

.mentor-messages-page
.mentor-message-row.mine
.mentor-message-bubble p {
  color: #2d353f !important;
}

.mentor-messages-page
.mentor-message-row.mine
.mentor-message-bubble small {
  color: #9b6a55 !important;
}

.mentor-messages-page .mentor-message-thread-initials {
  border: 1px solid #ffd6c2 !important;
  color: #c13c00 !important;
  background: #fff2eb !important;
}

.mentor-messages-page .mentor-message-thread.active {
  background: #fff8f4 !important;
}

/* ---------- TABLET ---------- */

@media (max-width: 1024px) {
  .mentor-messages-page .mentor-message-page-toolbar {
    gap: 12px;
  }

  .mentor-messages-page .mentor-message-start-button {
    margin-left: auto;
  }

  .mentor-messages-page .mentor-message-bubble {
    max-width: 82% !important;
  }
}

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

@media (max-width: 760px) {
  .mentor-messages-page {
    padding-top: 12px;
  }

  .mentor-messages-page .mentor-message-page-toolbar {
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 10px 12px;

    margin-bottom: 12px;
  }

  .mentor-messages-page .mentor-message-page-toolbar > div {
    flex: 1 1 220px;
    min-width: 0;
  }

  .mentor-messages-page .mentor-message-start-button {
    align-self: flex-start;

    flex: 0 0 auto;

    width: auto !important;
    min-width: 0 !important;
    min-height: 38px;

    padding: 0 13px;

    font-size: 12px;
  }

  .mentor-messages-page .mentor-messages-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows:
      auto
      minmax(0, 1fr) !important;

    height:
      min(
        650px,
        calc(100dvh - 210px)
      ) !important;

    min-height: 520px !important;

    border-radius: 14px;
  }

  /* Keep the conversation selector compact and horizontally
     scrollable instead of using too much vertical space. */
  .mentor-messages-page .mentor-message-threads {
    max-height: 156px !important;

    border-right: 0 !important;
    border-bottom: 1px solid #e4e8ef !important;
  }

  .mentor-messages-page .mentor-message-threads-heading {
    padding: 11px 13px !important;
  }

  .mentor-messages-page .mentor-message-threads-heading h2 {
    font-size: 14px !important;
  }

  .mentor-messages-page .mentor-message-thread-list {
    display: flex !important;

    gap: 7px;

    padding: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: thin;
  }

  .mentor-messages-page .mentor-message-thread {
    flex: 0 0 min(210px, 72vw);

    min-height: 58px;

    padding: 9px 10px !important;

    border: 1px solid #e4e8ef !important;
    border-radius: 10px !important;

    background: #ffffff !important;
  }

  .mentor-messages-page .mentor-message-thread.active {
    border-color: #ffd1bb !important;
    background: #fff8f4 !important;
  }

  .mentor-messages-page .mentor-message-thread.active::before {
    display: none !important;
  }

  .mentor-messages-page .mentor-message-thread-avatar,
  .mentor-messages-page .mentor-message-thread-initials {
    width: 38px !important;
    height: 38px !important;

    border-radius: 9px !important;
  }

  .mentor-messages-page .mentor-message-conversation-header {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto !important;

    gap: 9px !important;

    min-height: 66px !important;
    padding: 9px 11px !important;
  }

  .mentor-messages-page .mentor-message-mobile-back {
    width: 36px !important;
    height: 36px !important;
  }

  .mentor-messages-page .mentor-message-conversation-title h2 {
    font-size: 14px !important;
  }

  .mentor-messages-page
  .mentor-message-conversation-header
  .mentor-message-view-mentee {
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;

    padding: 0 2px !important;

    font-size: 10px !important;
  }

  .mentor-messages-page .mentor-message-history {
    padding: 13px 10px !important;
  }

  .mentor-messages-page .mentor-message-bubble {
    max-width: 86% !important;

    padding: 10px 12px !important;

    border-radius: 14px !important;
  }

  .mentor-messages-page .mentor-message-composer {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    gap: 8px !important;

    padding: 9px 10px !important;
  }

  .mentor-messages-page .mentor-message-composer textarea {
    min-height: 42px !important;

    padding: 10px 11px !important;

    font-size: 16px !important;
  }

  .mentor-messages-page .mentor-message-send-button {
    width: auto !important;
    min-width: 74px !important;
    min-height: 42px !important;

    padding: 0 12px !important;

    font-size: 11px !important;
  }
}

/* ---------- SMALL PHONE ---------- */

@media (max-width: 480px) {
  .mentor-messages-page .mentor-message-page-toolbar {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
    align-items: end !important;
  }

  .mentor-messages-page .mentor-message-page-toolbar > div {
    min-width: 0;
  }

  .mentor-messages-page .mentor-message-start-button {
    min-height: 36px;
    padding: 0 11px;

    font-size: 11px;
  }

  .mentor-messages-page .mentor-messages-layout {
    height:
      min(
        620px,
        calc(100dvh - 190px)
      ) !important;

    min-height: 500px !important;
  }

  .mentor-messages-page .mentor-message-thread {
    flex-basis: min(190px, 70vw);
  }

  .mentor-messages-page .mentor-message-bubble {
    max-width: 90% !important;
  }

  .mentor-messages-page .mentor-message-send-button {
    min-width: 46px !important;
    width: 46px !important;

    padding: 0 !important;

    font-size: 0 !important;
  }

  .mentor-messages-page .mentor-message-send-button span {
    display: none !important;
  }

  .mentor-messages-page .mentor-message-send-button svg {
    width: 17px;
    height: 17px;
  }
}
/* =========================================================
   BECOME A MENTEE
   Separate-account handoff from the mentor platform.
   ========================================================= */

.become-mentee-page {
  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100vh;

  padding:
    32px 20px
    max(
      32px,
      env(safe-area-inset-bottom)
    );

  color: #101419;
  background: #ffffff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.become-mentee-page *,
.become-mentee-page *::before,
.become-mentee-page *::after {
  box-sizing: border-box;
}

.become-mentee-page a {
  text-decoration: none;
}

.become-mentee-card {
  width: min(100%, 560px);

  padding: 32px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 16px 44px
    rgba(16, 20, 25, 0.055);
}

.become-mentee-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  width: 100%;

  color: inherit;
}

.become-mentee-brand img {
  width: 58px;
  height: 38px;

  object-fit: contain;
}

.become-mentee-brand > span {
  display: grid;

  gap: 2px;

  text-align: left;
}

.become-mentee-brand strong {
  color: #101419;

  font-size: 13px;
  font-weight: 600;
}

.become-mentee-brand small {
  color: #6f8095;

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.become-mentee-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 36px;

  text-align: center;
}

.become-mentee-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #ff5303;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.become-mentee-content h1 {
  max-width: 460px;

  margin: 0;

  color: #101419;

  font-size:
    clamp(
      28px,
      4vw,
      34px
    );

  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.become-mentee-description {
  max-width: 450px;

  margin: 12px auto 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.7;
}

.become-mentee-notice {
  width: 100%;

  margin-top: 24px;
  padding: 14px;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #4c5867;
  background: #f8f9fb;

  text-align: left;
}

.become-mentee-notice > strong {
  display: block;

  color: #101419;

  font-size: 11px;
  font-weight: 600;
}

.become-mentee-notice p {
  margin: 5px 0 0;

  font-size: 10px;
  line-height: 1.6;
}

.become-mentee-notice > span {
  display: block;

  margin-top: 9px;
  padding-top: 9px;

  border-top: 1px solid #e4e8ef;

  color: #6f8095;

  font-size: 9px;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.become-mentee-notice
> span strong {
  color: #2d353f;

  font-weight: 600;
}

.become-mentee-error {
  width: 100%;

  margin: 16px 0 0;
  padding: 10px 12px;

  border: 1px solid #efc5c8;
  border-radius: 8px;

  color: #8c2f37;
  background: #fff7f7;

  font-size: 10px;
  line-height: 1.55;

  text-align: left;
}

.become-mentee-actions {
  display: grid;

  width: 100%;

  gap: 9px;

  margin-top: 24px;
}

.become-mentee-actions button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  padding: 0 16px;

  border-radius: 9px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  box-shadow: none;
  transform: none;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.become-mentee-primary {
  border: 1px solid #ff5303;

  color: #ffffff;
  background: #ff5303;
}

.become-mentee-primary:hover:not(:disabled) {
  border-color: #c13c00;

  color: #ffffff;
  background: #c13c00;
}

.become-mentee-secondary {
  border: 1px solid #101419;

  color: #ffffff;
  background: #101419;
}

.become-mentee-secondary:hover:not(:disabled) {
  border-color: #2d353f;

  color: #ffffff;
  background: #2d353f;
}

.become-mentee-tertiary {
  border: 1px solid #c9d2df;

  color: #2d353f;
  background: #ffffff;
}

.become-mentee-tertiary:hover:not(:disabled) {
  border-color: #97aac2;

  color: #101419;
  background: #f7f8fa;
}

.become-mentee-actions
button:focus-visible {
  outline:
    1px solid
    rgba(76, 88, 103, 0.30);

  outline-offset: 2px;
}

.become-mentee-actions
button:disabled {
  cursor: not-allowed;

  opacity: 0.58;
}

.become-mentee-footnote {
  max-width: 430px;

  margin: 16px auto 0;

  color: #6f8095;

  font-size: 9px;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .become-mentee-page {
    place-items: start center;

    padding:
      16px
      14px
      max(
        28px,
        calc(
          16px +
          env(safe-area-inset-bottom)
        )
      );
  }

  .become-mentee-card {
    width: 100%;

    padding:
      24px
      20px;

    border-radius: 14px;
  }

  .become-mentee-content {
    margin-top: 30px;
  }

  .become-mentee-content h1 {
    font-size: 28px;
  }

  .become-mentee-description {
    font-size: 11px;
  }
}
/* =========================================================
   ADMIN DASHBOARD
   White background across the platform.
   Dark neutral + orange accents only.
   ========================================================= */

.admin-overview-page,
.admin-list-section,
.admin-state-card {
  background: #ffffff;
}

.admin-overview-page {
  width: 100%;
  min-height: 100%;
  padding-bottom: 32px;
  color: #101419;
}

/* HERO */

.admin-overview-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-height: 230px;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 18px;
  color: #ffffff;
  background: #101419;
}

.admin-overview-hero-copy {
  position: relative;
  z-index: 2;
  width: min(690px, 100%);
  padding: 36px;
}

.admin-overview-eyebrow,
.admin-section-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #ff5303;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
}

.admin-overview-hero h2 {
  max-width: 620px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 650;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.admin-overview-attention-message {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
}

.admin-overview-attention-count {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(255, 83, 3, 0.42);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 83, 3, 0.15);
  font-size: 12px;
  font-weight: 600;
}

.admin-overview-attention-message p {
  margin: 0;
  color: #d7dee7;
  font-size: 13px;
  line-height: 1.55;
}

/* Subtle orange hero decoration */

.admin-overview-pattern {
  position: relative;
  flex: 0 0 34%;
  min-width: 250px;
  pointer-events: none;
}

.admin-overview-pattern::before,
.admin-overview-pattern::after,
.admin-overview-pattern span {
  position: absolute;
  content: "";
}

.admin-overview-pattern::before {
  top: 26px;
  right: 42px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 83, 3, 0.22);
  border-radius: 50%;
}

.admin-overview-pattern::after {
  right: -42px;
  bottom: -72px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.admin-overview-pattern span:nth-child(1) {
  top: 58px;
  right: 95px;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 83, 3, 0.32);
  border-radius: 18px;
  transform: rotate(18deg);
}

.admin-overview-pattern span:nth-child(2) {
  top: 94px;
  right: 178px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 83, 3, 0.86);
}

.admin-overview-pattern span:nth-child(3) {
  right: 92px;
  bottom: 48px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
}

.admin-overview-pattern span:nth-child(4) {
  top: 31px;
  right: 222px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.admin-overview-pattern span:nth-child(5) {
  right: 22px;
  bottom: 70px;
  width: 84px;
  height: 1px;
  background: rgba(255, 83, 3, 0.34);
  transform: rotate(-32deg);
}

/* SUMMARY */

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.admin-summary-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(16, 20, 25, 0.025);
}

.admin-summary-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.admin-summary-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #ff5303;
  background: #fff4ef;
}

.admin-summary-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5303;
}

.admin-summary-card small {
  display: block;
  margin-bottom: 6px;
  color: #6f8095;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.admin-summary-card > strong {
  display: block;
  color: #101419;
  font-size: 28px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* NEEDS ATTENTION */

.admin-attention-section {
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
}

.admin-attention-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid #edf0f4;
}

.admin-attention-heading h2 {
  margin: 0;
  color: #101419;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.admin-attention-heading p {
  max-width: 630px;
  margin: 7px 0 0;
  color: #6f8095;
  font-size: 12px;
  line-height: 1.55;
}


.admin-attention-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.admin-attention-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

.admin-attention-table th {
  padding: 12px 18px;
  border-bottom: 1px solid #edf0f4;
  color: #6f8095;
  background: #fbfcfd;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  letter-spacing: 0.025em;
}

.admin-attention-table td {
  padding: 15px 18px;
  border-bottom: 1px solid #edf0f4;
  color: #374151;
  font-size: 12px;
  line-height: 1.45;
  vertical-align: middle;
}

.admin-attention-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-attention-table tbody tr:hover {
  background: #fcfcfd;
}

.admin-attention-type {
  color: #2d353f;
  font-size: 11px;
  font-weight: 600;
}

.admin-attention-person {
  display: grid;
  gap: 3px;
}

.admin-attention-person strong {
  color: #101419;
  font-size: 12px;
  font-weight: 600;
}

.admin-attention-person small {
  color: #8794a4;
  font-size: 10px;
  font-weight: 400;
}

.admin-attention-detail {
  max-width: 240px;
  color: #4c5867;
}

.admin-attention-action-cell {
  text-align: right;
}

.admin-review-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #101419;
  border-radius: 8px;
  color: #ffffff;
  background: #101419;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.admin-review-link:hover {
  border-color: #2d353f;
  background: #2d353f;
}

.admin-review-link:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.25);
  outline-offset: 2px;
}

.admin-attention-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 30px 24px;
}

.admin-attention-empty > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #ff5303;
  background: #fff4ef;
}

.admin-attention-empty strong {
  display: block;
  margin-bottom: 4px;
  color: #101419;
  font-size: 13px;
  font-weight: 600;
}

.admin-attention-empty p {
  margin: 0;
  color: #6f8095;
  font-size: 12px;
  line-height: 1.5;
}

/* PAGINATION */

.admin-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-top: 1px solid #edf0f4;
  background: #ffffff;
}

.admin-table-pagination > p {
  margin: 0;
  color: #8794a4;
  font-size: 10px;
  line-height: 1.4;
}

.admin-pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-pagination-controls > span {
  color: #6f8095;
  font-size: 10px;
  font-weight: 500;
}

.admin-pagination-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #2d353f;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.admin-pagination-controls button:hover:not(:disabled) {
  border-color: #aeb9c7;
  background: #f7f8fa;
}

.admin-pagination-controls button:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.18);
  outline-offset: 2px;
}

.admin-pagination-controls button:disabled {
  color: #b1bac6;
  background: #f7f8fa;
  cursor: not-allowed;
}

/* EXISTING ADMIN TABLES */

.admin-list-section {
  width: 100%;
}

.admin-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-list-toolbar input {
  width: min(420px, 100%);
  height: 42px;
  padding: 0 13px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.admin-list-toolbar input:focus,
.admin-list-toolbar input:focus-visible {
  border-color: #4c5867;
  box-shadow: 0 0 0 2px rgba(76, 88, 103, 0.1);
}

.admin-list-toolbar > span {
  color: #6f8095;
  font-size: 11px;
  font-weight: 500;
}

.admin-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
}

.admin-data-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.admin-data-table th {
  padding: 12px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #6f8095;
  background: #fbfcfd;
  font-size: 10px;
  font-weight: 600;
  text-align: left;
}

.admin-data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #374151;
  font-size: 11px;
  line-height: 1.45;
  vertical-align: middle;
}

.admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-data-table td strong,
.admin-data-table td small {
  display: block;
}

.admin-data-table td strong {
  color: #101419;
  font-weight: 600;
}

.admin-data-table td small {
  margin-top: 3px;
  color: #8794a4;
  font-size: 10px;
}

.admin-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid #d7dee7;
  border-radius: 999px;
  color: #4c5867;
  background: #f7f8fa;
  font-size: 9px;
  font-weight: 600;
  line-height: 23px;
  text-transform: capitalize;
  white-space: nowrap;
}

.admin-status-badge.status-pending {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #c13c00;
  background: transparent;
  line-height: 1.4;
}

.admin-status-badge.status-approved,
.admin-status-badge.status-accepted,
.admin-status-badge.status-active {
  border-color: #d7dee7;
  color: #2d353f;
  background: #f7f8fa;
}

.admin-status-badge.status-declined,
.admin-status-badge.status-rejected,
.admin-status-badge.status-suspended {
  border-color: #efc5c8;
  color: #8c2f37;
  background: #fff7f7;
}

.admin-status-badge.status-withdrawn {
  border-color: #d7dee7;
  color: #6f8095;
  background: #f7f8fa;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-verify-button,
.admin-modal-confirm-button,
.admin-modal-cancel-button,
.admin-text-danger {
  font-family: inherit;
}

.admin-verify-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #101419;
  border-radius: 8px;
  color: #ffffff;
  background: #101419;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.admin-text-danger {
  padding: 0;
  border: 0;
  color: #b74750;
  background: transparent;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.admin-protected-account {
  color: #8794a4;
  font-size: 10px;
  font-weight: 500;
}

.admin-goal-cell {
  max-width: 320px;
}

.admin-state-card {
  display: grid;
  place-items: center;

  width: 100%;
  min-height: 300px;

  padding: 40px 32px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff !important;
  background-image: none !important;

  text-align: center;

  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

.admin-state-card h2 {
  margin: 12px 0 6px;
  color: #101419;
  font-size: 18px;
  font-weight: 650;
}

.admin-state-card p {
  max-width: 500px;
  margin: 0;
  color: #6f8095;
  font-size: 12px;
  line-height: 1.6;
}

.empty-state-icon {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  color: #ff5303;
  background: #f8f9fb;
}

.admin-success-message,
.form-error {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.5;
}

.admin-success-message {
  border: 1px solid #ffcbc5;
  color: #4c5867;
  background: #fffaf9;
}

.form-error {
  border: 1px solid #efc5c8;
  color: #8c2f37;
  background: #fff7f7;
}

/* CONFIRMATION MODAL */

.admin-modal-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 20, 25, 0.52);
}

.admin-confirmation-modal {
  width: min(100%, 430px);
  padding: 26px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 22px 70px rgba(16, 20, 25, 0.18);
}

.admin-confirmation-modal h2 {
  margin: 0;
  color: #101419;
  font-size: 20px;
  font-weight: 650;
}

.admin-confirmation-modal > p {
  margin: 8px 0 18px;
  color: #6f8095;
  font-size: 12px;
  line-height: 1.6;
}

.admin-selected-person {
  display: grid;
  gap: 3px;
  padding: 13px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  background: #fbfcfd;
}

.admin-selected-person strong {
  color: #101419;
  font-size: 12px;
  font-weight: 600;
}

.admin-selected-person small {
  color: #8794a4;
  font-size: 10px;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.admin-modal-cancel-button,
.admin-modal-confirm-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.admin-modal-cancel-button {
  border: 1px solid #d7dee7;
  color: #2d353f;
  background: #ffffff;
}

.admin-modal-confirm-button {
  border: 1px solid #101419;
  color: #ffffff;
  background: #101419;
}

.admin-modal-confirm-button.danger {
  border-color: #b74750;
  background: #b74750;
}

.admin-modal-cancel-button:disabled,
.admin-modal-confirm-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-overview-pattern {
    flex-basis: 30%;
    min-width: 210px;
  }
}

@media (max-width: 760px) {
  .admin-overview-hero {
    min-height: auto;
  }

  .admin-overview-hero-copy {
    width: 100%;
    padding: 28px 24px;
  }

  .admin-overview-pattern {
    position: absolute;
    inset: 0 0 0 auto;
    width: 42%;
    min-width: 0;
    opacity: 0.58;
  }

  .admin-overview-hero h2,
  .admin-overview-attention-message {
    max-width: 80%;
  }

  .admin-attention-heading,
  .admin-table-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-table-pagination {
    gap: 12px;
  }

  .admin-pagination-controls {
    width: 100%;
    justify-content: space-between;
  }

  .admin-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .admin-summary-grid {
    grid-template-columns: 1fr;
  }

  .admin-overview-hero {
    border-radius: 15px;
  }

  .admin-overview-hero-copy {
    padding: 24px 20px;
  }

  .admin-overview-hero h2,
  .admin-overview-attention-message {
    max-width: 100%;
  }

  .admin-overview-pattern {
    opacity: 0.22;
  }

  .admin-overview-attention-message {
    align-items: flex-start;
  }

  .admin-summary-card {
    padding: 18px;
  }

  .admin-attention-heading {
    padding: 20px;
  }

  .admin-attention-empty {
    padding: 24px 20px;
  }

  .admin-pagination-controls button {
    padding: 0 8px;
  }

  .admin-pagination-controls > span {
    text-align: center;
  }

  .admin-modal-actions {
    flex-direction: column-reverse;
  }

  .admin-modal-cancel-button,
  .admin-modal-confirm-button {
    width: 100%;
  }
}


/* =========================================================
   ADMIN PLATFORM WHITE CANVAS
   ========================================================= */

html:has(.admin-overview-page),
body:has(.admin-overview-page),
body:has(.admin-overview-page) #root,
body:has(.admin-overview-page) .dashboard-layout,
body:has(.admin-overview-page) .dashboard-content,
html:has(.admin-list-section),
body:has(.admin-list-section),
body:has(.admin-list-section) #root,
body:has(.admin-list-section) .dashboard-layout,
body:has(.admin-list-section) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* =========================================================
   MENTOR APPLICATION LIST TOOLBAR
   ========================================================= */

.admin-application-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-search-field {
  position: relative;
  width: min(390px, 100%);
}

.admin-search-field > svg {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #8794a4;
  pointer-events: none;
  transform: translateY(-50%);
}

.admin-search-field input {
  width: 100%;
  height: 42px;
  padding: 0 13px 0 39px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.admin-search-field input:focus,
.admin-search-field input:focus-visible {
  border-color: #4c5867;
  box-shadow: 0 0 0 2px rgba(76, 88, 103, 0.1);
}

.admin-application-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.admin-application-filters button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  color: #4c5867;
  background: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.admin-application-filters button:hover {
  border-color: #aeb9c7;
  background: #f7f8fa;
}

.admin-application-filters button.active {
  border-color: #101419;
  color: #ffffff;
  background: #101419;
}

/* =========================================================
   MENTOR APPLICATION TABLE
   ========================================================= */

.admin-application-table-shell {
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #ffffff;
}

.admin-table-wrapper--flush {
  border: 0 !important;
  border-radius: 0 !important;
}

.admin-application-areas-cell {
  max-width: 250px;
}

.admin-table-action-cell {
  text-align: right;
}

.admin-review-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #101419;
  border-radius: 8px;
  color: #ffffff;
  background: #101419;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.admin-review-button:hover {
  border-color: #2d353f;
  background: #2d353f;
}

.admin-review-button:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.25);
  outline-offset: 2px;
}

/* =========================================================
   APPLICATION REVIEW MODAL
   ========================================================= */

.admin-application-review-modal {
  width: min(760px, 100%);
  max-height: min(880px, calc(100vh - 40px));
  margin: auto;
  padding: 28px;
  overflow-y: auto;
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  color: #101419;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(16, 20, 25, 0.2);
}

.admin-review-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.admin-review-modal-header h2 {
  margin: 3px 0 0;
  color: #101419;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.admin-review-modal-header p {
  margin: 5px 0 0;
  color: #6f8095;
  font-size: 11px;
}

.admin-modal-close-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d7dee7;
  border-radius: 9px;
  color: #4c5867;
  background: #ffffff;
  cursor: pointer;
}

.admin-modal-close-button:hover:not(:disabled) {
  color: #101419;
  background: #f7f8fa;
}

.admin-review-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #edf0f4;
}

.admin-review-status-row > span:last-child {
  color: #8794a4;
  font-size: 10px;
}

.admin-review-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.admin-review-detail {
  min-width: 0;
  padding: 13px;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  background: #fbfcfd;
}

.admin-review-detail > span,
.admin-review-list > span,
.admin-review-long-copy > span {
  display: block;
  margin-bottom: 6px;
  color: #8794a4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-review-detail strong {
  display: block;
  color: #2d353f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.admin-review-list {
  margin-top: 18px;
}

.admin-review-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-review-list small {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #dfe4eb;
  border-radius: 999px;
  color: #2d353f;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
}

.admin-review-list > p {
  margin: 0;
  color: #6f8095;
  font-size: 11px;
}

.admin-review-long-copy {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #edf0f4;
}

.admin-review-long-copy p {
  margin: 0;
  color: #4c5867;
  font-size: 12px;
  line-height: 1.7;
}

.admin-review-existing-feedback {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  color: #4c5867;
  background: #f8f9fb;
}

.admin-review-existing-feedback strong {
  color: #101419;
  font-size: 11px;
  font-weight: 600;
}

.admin-review-existing-feedback p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.admin-review-message {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

.admin-rejection-field {
  display: block;
  margin-top: 20px;
}

.admin-rejection-field > span {
  display: block;
  margin-bottom: 7px;
  color: #101419;
  font-size: 11px;
  font-weight: 600;
}

.admin-rejection-field textarea {
  width: 100%;
  min-height: 110px;
  padding: 11px 12px;
  border: 1px solid #c9d2df;
  border-radius: 9px;
  outline: none;
  color: #101419;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}

.admin-rejection-field textarea:focus,
.admin-rejection-field textarea:focus-visible {
  border-color: #4c5867;
  box-shadow: 0 0 0 2px rgba(76, 88, 103, 0.1);
}

.admin-review-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.admin-approve-application-button {
  border: 1px solid #ff5303 !important;
  color: #ffffff !important;
  background: #ff5303 !important;
}

.admin-approve-application-button:hover:not(:disabled) {
  border-color: #c13c00 !important;
  color: #ffffff !important;
  background: #c13c00 !important;
}

.admin-reject-application-button {
  border: 1px solid #101419 !important;
  color: #ffffff !important;
  background: #101419 !important;
}

.admin-reject-application-button:hover:not(:disabled) {
  border-color: #2d353f !important;
  color: #ffffff !important;
  background: #2d353f !important;
}

@media (max-width: 1050px) {
  .admin-review-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .admin-search-field,
  .admin-application-filters {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .admin-review-details-grid {
    grid-template-columns: 1fr;
  }

  .admin-application-review-modal {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .admin-review-modal-header h2 {
    font-size: 22px;
  }

  .admin-review-modal-actions {
    flex-direction: column-reverse;
  }

  .admin-review-modal-actions button {
    width: 100%;
  }
}

/* =========================================================
   ADMIN TABLE COLOUR SAFETY
   Overrides older global admin table rules in index.css.
   Keep all table surfaces neutral, never peach/orange.
   ========================================================= */

.admin-application-table-shell,
.admin-application-table-shell .admin-table-wrapper,
.admin-application-table-shell .admin-data-table,
.admin-attention-section,
.admin-attention-table-wrapper,
.admin-attention-table {
  background: #ffffff !important;
}

.admin-application-table-shell .admin-data-table thead,
.admin-application-table-shell .admin-data-table thead tr,
.admin-application-table-shell .admin-data-table thead th,
.admin-attention-table thead,
.admin-attention-table thead tr,
.admin-attention-table thead th {
  background: #fbfcfd !important;
}

.admin-application-table-shell .admin-data-table tbody,
.admin-application-table-shell .admin-data-table tbody tr,
.admin-application-table-shell .admin-data-table tbody td,
.admin-attention-table tbody,
.admin-attention-table tbody tr,
.admin-attention-table tbody td {
  background: #ffffff !important;
}

.admin-application-table-shell .admin-data-table tbody tr:hover,
.admin-application-table-shell .admin-data-table tbody tr:hover td,
.admin-attention-table tbody tr:hover,
.admin-attention-table tbody tr:hover td {
  background: #f8f9fb !important;
}

/* Pending is text only. Older index.css has a filled pending badge. */
.admin-application-table-shell
  .admin-status-badge.status-pending,
.admin-attention-table
  .admin-status-badge.status-pending {
  min-height: auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: #c13c00 !important;
  background: transparent !important;

  line-height: 1.4 !important;
}

/* =========================================================
   ADMIN EMPTY STATES + ROUTE TRANSITION SAFETY
   ========================================================= */

.admin-state-card,
.admin-list-section,
.admin-application-table-shell,
.admin-table-wrapper,
.admin-data-table {
  background-color: #ffffff !important;
  background-image: none !important;
}

.admin-state-card .empty-state-icon {
  background-color: #f8f9fb !important;
  background-image: none !important;
}

.admin-data-table thead,
.admin-data-table thead tr,
.admin-data-table thead th {
  background-color: #fbfcfd !important;
}

.admin-data-table tbody,
.admin-data-table tbody tr,
.admin-data-table tbody td {
  background-color: #ffffff !important;
}

/* =========================================================
   PEOPLE PAGE SEARCH FIELD
   Keep the admin search surface white and neutral.
   This overrides the old warm search styling from index.css.
   ========================================================= */

.admin-list-toolbar {
  background: #ffffff !important;
  background-image: none !important;
}

.admin-list-toolbar input {
  border: 1px solid #c9d2df !important;

  color: #101419 !important;
  background: #ffffff !important;
  background-image: none !important;

  box-shadow: none !important;
}

.admin-list-toolbar input::placeholder {
  color: #97aac2 !important;
}

.admin-list-toolbar input:hover {
  border-color: #97aac2 !important;
}

.admin-list-toolbar input:focus,
.admin-list-toolbar input:focus-visible {
  border-color: #4c5867 !important;

  outline: none !important;

  color: #101419 !important;
  background: #ffffff !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10) !important;
}

/* =========================================================
   ADMIN NO-GREEN / NO-TEAL SAFETY
   ========================================================= */

.admin-success-message {
  border: 1px solid #e4e8ef !important;
  color: #2d353f !important;
  background: #f8f9fb !important;
  background-image: none !important;
  box-shadow: none !important;
}

.admin-status-badge.status-approved {
  border-color: #d7dee7 !important;
  color: #2d353f !important;
  background: #eef1f5 !important;
  background-image: none !important;
}

/* Approval confirmation is a neutral notice.
   The word Approved already communicates the state. */
.admin-application-review-modal .admin-success-message {
  border: 1px solid #e4e8ef !important;
  color: #2d353f !important;
  background: #f8f9fb !important;
}

/* Close is a secondary action, so it uses the dark secondary colour. */
.admin-application-review-modal .admin-close-button,
.admin-confirmation-modal .admin-close-button {
  border: 1px solid #101419 !important;
  color: #ffffff !important;
  background: #101419 !important;
}

.admin-application-review-modal .admin-close-button:hover:not(:disabled),
.admin-confirmation-modal .admin-close-button:hover:not(:disabled) {
  border-color: #2d353f !important;
  color: #ffffff !important;
  background: #2d353f !important;
}

/* =========================================================
   ADMIN SEMANTIC APPROVAL ACTIONS
   Green is used only for positive admin actions such as
   verify/reactivate. It is not used as a brand/background.
   ========================================================= */

.admin-verify-button {
  min-height: 32px !important;

  padding: 0 8px !important;

  border: 0 !important;
  border-radius: 7px !important;

  color: #2f7d4a !important;
  background: transparent !important;

  font-size: 10px !important;
  font-weight: 600 !important;

  box-shadow: none !important;
}

.admin-verify-button:hover:not(:disabled) {
  color: #23653b !important;
  background: #f3faf5 !important;
}

.admin-verify-button:focus-visible {
  outline:
    1px solid
    rgba(47, 125, 74, 0.28) !important;

  outline-offset: 2px !important;
}

/* Confirmation button for positive membership actions. */
.admin-modal-confirm-button:not(.danger) {
  border: 1px solid #2f7d4a !important;

  color: #ffffff !important;
  background: #2f7d4a !important;
}

.admin-modal-confirm-button:not(.danger):hover:not(:disabled) {
  border-color: #23653b !important;

  color: #ffffff !important;
  background: #23653b !important;
}

/* =========================================================
   ACCOUNT TYPE TAGS
   Keep Mentee, Mentor and Admin visually consistent.
   Account type is informational, not a warning.
   ========================================================= */

.admin-status-badge.status-mentor-applicant {
  border-color: #d7dee7 !important;
  color: #4c5867 !important;
  background: #f7f8fa !important;
}

/* =========================================================
   ADMIN CONFIRMATION MODAL CLEANUP
   Remove old orange/peach button glow leaking from global CSS.
   ========================================================= */

.admin-modal-backdrop {
  background: rgba(16, 20, 25, 0.52) !important;
}

.admin-confirmation-modal {
  border: 1px solid #e4e8ef !important;
  background: #ffffff !important;
  background-image: none !important;

  box-shadow:
    0 22px 70px
    rgba(16, 20, 25, 0.18) !important;
}

.admin-selected-person {
  border-color: #e4e8ef !important;
  background: #fbfcfd !important;
  background-image: none !important;
  box-shadow: none !important;
}

.admin-modal-actions {
  background: transparent !important;
  box-shadow: none !important;
}

.admin-modal-cancel-button,
.admin-modal-confirm-button,
.admin-modal-confirm-button:not(.danger),
.admin-modal-confirm-button.danger {
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.admin-modal-cancel-button {
  border: 1px solid #c9d2df !important;
  color: #2d353f !important;
  background: #ffffff !important;
}

.admin-modal-cancel-button:hover:not(:disabled) {
  border-color: #97aac2 !important;
  color: #101419 !important;
  background: #f7f8fa !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-modal-confirm-button:not(.danger) {
  border: 1px solid #2f7d4a !important;
  color: #ffffff !important;
  background: #2f7d4a !important;
}

.admin-modal-confirm-button:not(.danger):hover:not(:disabled) {
  border-color: #23653b !important;
  color: #ffffff !important;
  background: #23653b !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-modal-confirm-button.danger {
  border: 1px solid #b74750 !important;
  color: #ffffff !important;
  background: #b74750 !important;
}

.admin-modal-confirm-button.danger:hover:not(:disabled) {
  border-color: #8c2f37 !important;
  color: #ffffff !important;
  background: #8c2f37 !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-modal-cancel-button:focus-visible,
.admin-modal-confirm-button:focus-visible {
  outline:
    1px solid
    rgba(76, 88, 103, 0.30) !important;

  outline-offset: 2px !important;

  box-shadow: none !important;
}

/* =========================================================
   PEOPLE PAGINATION
   ========================================================= */

.admin-list-section
.admin-table-wrapper
.admin-table-pagination {
  border-top: 1px solid #edf0f4;
  background: #ffffff !important;
}

.admin-list-section
.admin-table-wrapper
.admin-pagination-controls button {
  box-shadow: none !important;
  transform: none !important;
}

/* =========================================================
   ADMIN STATUS TEXT SYSTEM
   Clean text + small semantic dot.
   No pill/canvas around account type, account status,
   membership status or review status.
   ========================================================= */

.admin-status-badge,
.admin-status-badge.status-pending,
.admin-status-badge.status-approved,
.admin-status-badge.status-accepted,
.admin-status-badge.status-active,
.admin-status-badge.status-declined,
.admin-status-badge.status-rejected,
.admin-status-badge.status-suspended,
.admin-status-badge.status-withdrawn,
.admin-status-badge.status-mentor-applicant {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  min-height: auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  text-transform: capitalize !important;
  white-space: nowrap !important;
}

.admin-status-dot {
  display: inline-block;
  flex: 0 0 6px;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: currentColor;
}

/* Account type */

.admin-status-badge.status-mentor,
.admin-status-badge.status-mentor-applicant {
  color: #c94a11 !important;
}

.admin-status-badge.status-mentee {
  color: #315f8c !important;
}

.admin-status-badge.status-admin,
.admin-status-badge.status-safeguarding-lead {
  color: #475569 !important;
}

/* Account + workflow status */

.admin-status-badge.status-active {
  color: #087967 !important;
}

.admin-status-badge.status-verified,
.admin-status-badge.status-approved,
.admin-status-badge.status-accepted {
  color: #2f7d4a !important;
}

.admin-status-badge.status-pending {
  color: #b56a00 !important;
}

.admin-status-badge.status-not-verified,
.admin-status-badge.status-withdrawn {
  color: #8794a4 !important;
}

.admin-status-badge.status-declined,
.admin-status-badge.status-rejected,
.admin-status-badge.status-suspended {
  color: #a63d46 !important;
}

/* Keep the People table visually light. */
.admin-data-table td .admin-status-badge {
  vertical-align: middle;
}

/* =========================================================
   ADMIN MENTORSHIP REQUESTS
   Supplemental styles for AdminDashboard.jsx.
   Keep AdminDashboard.css as-is and add this file beside it.
   ========================================================= */

.admin-requests-page {
  min-width: 0;
}

.admin-request-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;
  margin-bottom: 12px;
}

.admin-request-search {
  flex: 1 1 360px;
  max-width: 430px;
}

.admin-request-filters {
  display: flex;
  align-items: center;

  gap: 6px;

  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-request-filters::-webkit-scrollbar {
  display: none;
}

.admin-request-filters button {
  appearance: none;
  -webkit-appearance: none;

  min-height: 34px;
  padding: 0 12px;

  border: 1px solid #d7dee7;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
}

.admin-request-filters button:hover {
  border-color: #aeb9c7;
  background: #f7f8fa;
}

.admin-request-filters button.active {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.admin-request-filters button:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.18);
  outline-offset: 2px;
}

.admin-request-results-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
  margin-bottom: 18px;
}

.admin-request-results-summary > span {
  color: #2d353f;

  font-size: 11px;
  font-weight: 600;
}

.admin-request-results-summary > small {
  max-width: 590px;

  color: #8794a4;

  font-size: 10px;
  line-height: 1.55;
  text-align: right;
}

.admin-request-table-shell {
  overflow: hidden;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;
}

.admin-request-table {
  width: 100%;
  min-width: 850px;
}

.admin-request-area-cell {
  max-width: 230px;
}

.admin-request-view-button {
  gap: 6px;
  text-decoration: none;
}

.admin-request-mobile-list {
  display: none;
}

/* =========================================================
   REQUEST DETAIL PAGE
   ========================================================= */

.admin-request-details-page {
  width: 100%;
  min-width: 0;
  padding-bottom: 32px;

  color: #101419;
  background: #ffffff;
}

.admin-request-back-button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 36px;
  padding: 0 11px;
  margin-bottom: 18px;

  border: 1px solid #d7dee7;
  border-radius: 8px;

  color: #2d353f;
  background: #ffffff;

  font-family: inherit;
  font-size: 10px;
  font-weight: 500;

  cursor: pointer;
}

.admin-request-back-button:hover {
  border-color: #aeb9c7;
  background: #f7f8fa;
}

.admin-request-back-button:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.18);
  outline-offset: 2px;
}

.admin-request-details-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 22px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;
}

.admin-request-details-hero h2 {
  margin: 0;

  color: #101419;

  font-size: 24px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.admin-request-details-hero p {
  margin: 7px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.5;
}

.admin-request-participants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
  margin-top: 14px;
}

.admin-request-participant-card {
  min-width: 0;
  padding: 17px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #fbfcfd;

  text-align: left;
}

.admin-request-participant-card > span,
.admin-request-information > span,
.admin-request-copy-section > span {
  display: block;

  margin-bottom: 7px;

  color: #8794a4;

  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-align: left;
}

.admin-request-participant-card strong {
  display: block;

  overflow: hidden;

  color: #101419;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  text-align: left;
  text-overflow: ellipsis;
}

.admin-request-participant-card small {
  display: block;

  overflow: hidden;

  margin-top: 4px;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.4;

  text-align: left;
  text-overflow: ellipsis;
}

.admin-request-details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
  margin-top: 14px;
}

.admin-request-information {
  min-width: 0;
  padding: 14px;

  border: 1px solid #edf0f4;
  border-radius: 10px;

  background: #ffffff;

  text-align: left;
}

.admin-request-information strong {
  display: block;

  color: #2d353f;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;

  text-align: left;
}

.admin-request-copy-section {
  margin-top: 14px;
  padding: 20px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #ffffff;

  text-align: left;
}

.admin-request-copy-section p {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.7;

  text-align: left;
}

.admin-request-history {
  margin-top: 18px;
  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;

  text-align: left;
}

.admin-request-history-heading {
  text-align: left;
}

.admin-request-history-heading h3 {
  margin: 0;

  color: #101419;

  font-size: 17px;
  font-weight: 650;

  text-align: left;
}

.admin-request-history-list {
  display: grid;

  gap: 0;
  margin-top: 18px;
}

.admin-request-history-item {
  position: relative;

  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);

  gap: 12px;
  padding-bottom: 20px;

  text-align: left;
}

.admin-request-history-item:last-child {
  padding-bottom: 0;
}

.admin-request-history-item:not(:last-child)::before {
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 4px;

  width: 1px;

  content: "";

  background: #dfe4eb;
}

.admin-request-history-marker {
  position: relative;
  z-index: 1;

  width: 9px;
  height: 9px;
  margin-top: 3px;

  border: 2px solid #ffffff;
  border-radius: 999px;

  background: #ff5303;

  box-shadow: 0 0 0 1px #ffb895;
}

.admin-request-history-item strong {
  display: block;

  color: #101419;

  font-size: 11px;
  font-weight: 600;

  text-align: left;
}

.admin-request-history-item p {
  margin: 5px 0 0;

  color: #5e6d7f;

  font-size: 11px;
  line-height: 1.55;

  text-align: left;
}

.admin-request-history-item small {
  display: block;

  margin-top: 6px;

  color: #97a3b2;

  font-size: 9px;

  text-align: left;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .admin-request-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-request-search,
  .admin-request-filters {
    width: 100%;
    max-width: none;
  }

  .admin-request-results-summary {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }

  .admin-request-results-summary > small {
    max-width: none;

    text-align: left;
  }

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

@media (max-width: 680px) {
  .admin-request-desktop-table {
    display: none;
  }

  .admin-request-mobile-list {
    display: grid;

    gap: 10px;
    padding: 12px;
  }

  .admin-request-mobile-card {
    min-width: 0;
    padding: 15px;

    border: 1px solid #e4e8ef;
    border-radius: 11px;

    background: #ffffff;

    text-align: left;
  }

  .admin-request-mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
    padding-bottom: 13px;

    border-bottom: 1px solid #edf0f4;

    text-align: left;
  }

  .admin-request-mobile-card-header > div {
    min-width: 0;
  }

  .admin-request-mobile-card-header span {
    display: block;

    margin-bottom: 4px;

    color: #8794a4;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    text-align: left;
  }

  .admin-request-mobile-card-header strong,
  .admin-request-mobile-card-header small {
    display: block;

    overflow: hidden;

    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-request-mobile-card-header strong {
    color: #101419;

    font-size: 12px;
    font-weight: 600;
  }

  .admin-request-mobile-card-header small {
    margin-top: 3px;

    color: #8794a4;

    font-size: 9px;
  }

  .admin-request-mobile-card dl {
    display: grid;

    gap: 10px;
    margin: 13px 0 0;
  }

  .admin-request-mobile-card dl > div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);

    gap: 10px;
  }

  .admin-request-mobile-card dt {
    color: #8794a4;

    font-size: 9px;
    font-weight: 600;

    text-align: left;
  }

  .admin-request-mobile-card dd {
    min-width: 0;
    margin: 0;

    color: #374151;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;

    text-align: left;
  }

  .admin-request-mobile-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 34px;
    padding: 0 11px;
    margin-top: 14px;

    border: 1px solid #101419;
    border-radius: 8px;

    color: #ffffff;
    background: #101419;

    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
  }

  .admin-request-participants,
  .admin-request-details-grid {
    grid-template-columns: 1fr;
  }

  .admin-request-details-hero {
    align-items: flex-start;
    flex-direction: column;

    padding: 20px;

    text-align: left;
  }

  .admin-request-details-hero h2 {
    font-size: 21px;
  }

  .admin-request-copy-section,
  .admin-request-history {
    padding: 18px;
  }
}

@media (max-width: 560px) {
  .admin-request-filters {
    padding-bottom: 3px;
  }

  .admin-request-mobile-list {
    padding: 10px;
  }

  .admin-request-mobile-view {
    width: auto;
    max-width: max-content;
  }

  .admin-request-table-shell .admin-table-pagination {
    padding: 13px 12px;
  }

  .admin-request-table-shell .admin-pagination-controls {
    gap: 6px;
  }

  .admin-request-table-shell .admin-pagination-controls button {
    padding: 0 8px;
  }
}

/* =========================================================
   DESKTOP MENTORSHIP REQUEST TABLE ALIGNMENT

   All informational content follows one alignment rule:
   headings and values start from the same left edge.
   ========================================================= */

@media (min-width: 681px) {
  .admin-request-desktop-table .admin-request-table {
    width: 100%;
  }

  .admin-request-desktop-table .admin-request-table th,
  .admin-request-desktop-table .admin-request-table td {
    text-align: left !important;
    vertical-align: middle !important;
  }

  .admin-request-desktop-table .admin-request-table th {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .admin-request-desktop-table .admin-request-table td {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .admin-request-desktop-table .admin-request-table td strong,
  .admin-request-desktop-table .admin-request-table td small {
    display: block;
    text-align: left !important;
  }

  .admin-request-desktop-table .admin-request-table td small {
    margin-top: 3px;
  }

  .admin-request-desktop-table .admin-request-area-cell {
    text-align: left !important;
  }

  .admin-request-desktop-table .admin-table-action-cell {
    text-align: left !important;
  }

  .admin-request-desktop-table .admin-request-view-button {
    margin-inline: 0 !important;
  }
}

/* =========================================================
   ADMIN OVERVIEW COUNT SIZE

   Keep summary values compact and consistent with the rest
   of the platform.
   ========================================================= */

.admin-summary-card > strong {
  font-size: 20px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

/* =========================================================
   SHARED ADMIN DESKTOP TABLE ALIGNMENT

   Applies to:
   - People
   - Mentor applications
   - Mentorship requests
   - Overview pending items

   Text content remains left aligned for predictable scanning.
   ========================================================= */

@media (min-width: 681px) {
  .admin-data-table th,
  .admin-data-table td,
  .admin-attention-table th,
  .admin-attention-table td {
    text-align: left !important;
    vertical-align: middle !important;
  }

  .admin-data-table td strong,
  .admin-data-table td small,
  .admin-attention-table td strong,
  .admin-attention-table td small {
    text-align: left !important;
  }

  .admin-data-table td strong,
  .admin-data-table td small,
  .admin-attention-table td strong,
  .admin-attention-table td small {
    display: block;
  }

  .admin-data-table td small,
  .admin-attention-table td small {
    margin-top: 3px;
  }

  .admin-table-action-cell,
  .admin-attention-action-cell {
    text-align: left !important;
  }

  .admin-review-button,
  .admin-review-link,
  .admin-verify-button {
    margin-inline: 0 !important;
  }

  .admin-row-actions {
    justify-content: flex-start !important;
  }

  .admin-data-table .admin-status-badge,
  .admin-attention-table .admin-status-badge {
    margin-inline: 0 !important;
  }
}

@media (max-width: 560px) {
  .admin-summary-card > strong {
    font-size: 18px !important;
  }
}

/* =========================================================
   SHARED ADMIN MOBILE TABLE CARDS

   People + Mentor applications.
   Desktop/tablet keeps tables.
   Phones use readable cards.
   Pagination stays on all devices.
   ========================================================= */

.admin-mobile-table-shell {
  overflow: hidden;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;
}

.admin-mobile-table-shell > .admin-table-wrapper {
  border: 0 !important;
  border-radius: 0 !important;
}

.admin-responsive-mobile-list {
  display: none;
}

@media (max-width: 680px) {
  .admin-responsive-table-desktop,
  .admin-application-table-shell .admin-table-wrapper--flush {
    display: none !important;
  }

  .admin-responsive-mobile-list {
    display: grid;

    gap: 10px;
    padding: 10px;

    background: #ffffff;
  }

  .admin-mobile-record-card {
    min-width: 0;
    padding: 15px;

    border: 1px solid #e4e8ef;
    border-radius: 11px;

    background: #ffffff;

    text-align: left;
  }

  .admin-mobile-record-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
    padding-bottom: 13px;

    border-bottom: 1px solid #edf0f4;

    text-align: left;
  }

  .admin-mobile-record-header > div {
    min-width: 0;
  }

  .admin-mobile-record-header > div > span {
    display: block;

    margin-bottom: 4px;

    color: #8794a4;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;

    text-align: left;
  }

  .admin-mobile-record-header strong,
  .admin-mobile-record-header small {
    display: block;

    overflow: hidden;

    text-align: left;
    text-overflow: ellipsis;
  }

  .admin-mobile-record-header strong {
    color: #101419;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
  }

  .admin-mobile-record-header small {
    margin-top: 3px;

    color: #8794a4;

    font-size: 9px;
    line-height: 1.4;

    overflow-wrap: anywhere;
  }

  .admin-mobile-record-details {
    display: grid;

    gap: 11px;
    margin: 13px 0 0;
  }

  .admin-mobile-record-details > div {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: start;

    gap: 10px;
  }

  .admin-mobile-record-details dt {
    color: #8794a4;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;

    text-align: left;
  }

  .admin-mobile-record-details dd {
    min-width: 0;
    margin: 0;

    color: #374151;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.45;

    text-align: left;
    overflow-wrap: anywhere;
  }

  .admin-mobile-record-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 8px;
    margin-top: 14px;
  }

  .admin-mobile-record-actions .admin-row-actions {
    justify-content: flex-start !important;
  }

  .admin-mobile-record-actions .admin-review-button,
  .admin-mobile-record-actions .admin-verify-button {
    width: auto !important;
    max-width: max-content;

    margin-inline: 0 !important;
  }

  .admin-mobile-table-shell .admin-table-pagination,
  .admin-application-table-shell .admin-table-pagination {
    padding: 13px 12px;
  }
}

@media (max-width: 420px) {
  .admin-mobile-record-details > div {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}/* =========================================================
   ADMIN SESSIONS
   Desktop/tablet table + mobile cards.
   Admin has oversight only.
   ========================================================= */

.admin-sessions-page,
.admin-session-details-page {
  width: 100%;
  min-width: 0;

  color: #101419;
  background: #ffffff;
}

/* =========================================================
   SESSION LIST TOOLBAR
   ========================================================= */

.admin-session-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;
  margin-bottom: 12px;
}

.admin-session-search {
  flex: 1 1 360px;
  max-width: 430px;
}

.admin-session-filters {
  display: flex;
  align-items: center;

  gap: 6px;

  max-width: 100%;
  overflow-x: auto;

  scrollbar-width: none;
}

.admin-session-filters::-webkit-scrollbar {
  display: none;
}

.admin-session-filters button {
  appearance: none;
  -webkit-appearance: none;

  min-height: 34px;
  padding: 0 12px;

  border: 1px solid #d7dee7;
  border-radius: 8px;

  color: #4c5867;
  background: #ffffff;

  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
}

.admin-session-filters button:hover {
  border-color: #aeb9c7;
  background: #f7f8fa;
}

.admin-session-filters button.active {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.admin-session-filters button:focus-visible {
  outline: 2px solid rgba(76, 88, 103, 0.18);
  outline-offset: 2px;
}

/* =========================================================
   SESSION RESULTS SUMMARY
   ========================================================= */

.admin-session-results-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
  margin-bottom: 18px;
}

.admin-session-results-summary > span {
  color: #2d353f;

  font-size: 11px;
  font-weight: 600;

  text-align: left;
}

.admin-session-results-summary > small {
  max-width: 620px;

  color: #8794a4;

  font-size: 10px;
  line-height: 1.55;
  text-align: right;
}

/* =========================================================
   SESSION TABLE
   ========================================================= */

.admin-session-table-shell {
  overflow: hidden;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;
}

.admin-session-desktop-table {
  overflow-x: auto;
}

.admin-session-table {
  width: 100%;
  min-width: 850px;

  border-collapse: collapse;
}

/*
  Keep all informational table content left aligned.

  This includes:
  - Mentor
  - Mentee
  - Date & time
  - Format
  - Status
  - Action
*/

.admin-session-table th,
.admin-session-table td {
  text-align: left !important;
  vertical-align: middle !important;
}

.admin-session-table th {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.admin-session-table td {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.admin-session-table td strong {
  display: block;

  color: #101419;

  text-align: left !important;
}

.admin-session-table td small {
  display: block;

  margin-top: 3px;

  color: #8794a4;

  text-align: left !important;
}

.admin-session-table .admin-status-badge {
  margin-inline: 0 !important;
}

.admin-session-table .admin-table-action-cell {
  text-align: left !important;
}

.admin-session-view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-inline: 0 !important;

  text-decoration: none;
}

.admin-session-mobile-list {
  display: none;
}

/* =========================================================
   SESSION DETAILS
   ========================================================= */

.admin-session-details-page {
  padding-bottom: 32px;
}

.admin-session-details-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 22px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #ffffff;

  text-align: left;
}

.admin-session-details-hero > div {
  min-width: 0;
}

.admin-session-details-hero h2 {
  margin: 0;

  color: #101419;

  font-size: 24px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;

  text-align: left;
}

.admin-session-details-hero p {
  margin: 7px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.5;

  text-align: left;
}

/* =========================================================
   SESSION PARTICIPANTS
   ========================================================= */

.admin-session-participants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
  margin-top: 14px;
}

/*
  RequestParticipant is shared with mentorship requests.
  Keep participant cards aligned consistently here as well.
*/

.admin-session-participants .admin-request-participant-card {
  text-align: left;
}

.admin-session-participants .admin-request-participant-card > span,
.admin-session-participants .admin-request-participant-card strong,
.admin-session-participants .admin-request-participant-card small {
  text-align: left;
}

/* =========================================================
   SESSION INFORMATION GRID
   ========================================================= */

.admin-session-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;
  margin-top: 14px;
}

.admin-session-details-grid .admin-request-information {
  text-align: left;
}

.admin-session-details-grid .admin-request-information > span,
.admin-session-details-grid .admin-request-information > strong {
  text-align: left;
}

/* =========================================================
   SESSION COPY SECTIONS
   ========================================================= */

.admin-session-copy-section {
  margin-top: 14px;
  padding: 20px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #ffffff;

  text-align: left;
}

.admin-session-copy-section > span {
  display: block;

  margin-bottom: 7px;

  color: #8794a4;

  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;

  text-align: left;
  text-transform: uppercase;
}

.admin-session-copy-section p,
.admin-session-copy-section a {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.7;

  text-align: left;
  overflow-wrap: anywhere;
}

.admin-session-copy-section a:hover {
  color: #101419;
}

/* =========================================================
   SESSION OVERSIGHT NOTE
   ========================================================= */

.admin-session-note {
  display: flex;
  align-items: flex-start;

  gap: 11px;
  margin-top: 18px;
  padding: 16px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  color: #4c5867;
  background: #f8f9fb;

  text-align: left;
}

.admin-session-note > svg {
  flex: 0 0 auto;

  color: #ff5303;
}

.admin-session-note > div {
  min-width: 0;
}

.admin-session-note strong {
  display: block;

  color: #101419;

  font-size: 11px;
  font-weight: 600;

  text-align: left;
}

.admin-session-note p {
  margin: 4px 0 0;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.55;

  text-align: left;
}

/* =========================================================
   RESPONSIVE: TABLET
   ========================================================= */

@media (max-width: 900px) {
  .admin-session-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-session-search,
  .admin-session-filters {
    width: 100%;
    max-width: none;
  }

  .admin-session-results-summary {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }

  .admin-session-results-summary > small {
    max-width: none;

    text-align: left;
  }

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

/* =========================================================
   RESPONSIVE: MOBILE
   ========================================================= */

@media (max-width: 680px) {
  .admin-session-desktop-table {
    display: none;
  }

  .admin-session-mobile-list {
    display: grid;

    gap: 10px;
    padding: 10px;

    background: #ffffff;
  }

  .admin-session-mobile-card {
    min-width: 0;
    padding: 15px;

    border: 1px solid #e4e8ef;
    border-radius: 11px;

    background: #ffffff;

    text-align: left;
  }

  .admin-session-mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
    padding-bottom: 13px;

    border-bottom: 1px solid #edf0f4;

    text-align: left;
  }

  .admin-session-mobile-card-header > div {
    min-width: 0;
  }

  .admin-session-mobile-card-header span {
    display: block;

    margin-bottom: 4px;

    color: #8794a4;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.07em;

    text-align: left;
    text-transform: uppercase;
  }

  .admin-session-mobile-card-header strong,
  .admin-session-mobile-card-header small {
    display: block;

    overflow: hidden;

    text-align: left;
    text-overflow: ellipsis;
  }

  .admin-session-mobile-card-header strong {
    color: #101419;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
  }

  .admin-session-mobile-card-header small {
    margin-top: 3px;

    color: #8794a4;

    font-size: 9px;
    line-height: 1.4;

    overflow-wrap: anywhere;
  }

  .admin-session-mobile-card dl {
    display: grid;

    gap: 10px;
    margin: 13px 0 0;
  }

  .admin-session-mobile-card dl > div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;

    gap: 10px;
  }

  .admin-session-mobile-card dt {
    color: #8794a4;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;

    text-align: left;
  }

  .admin-session-mobile-card dd {
    min-width: 0;
    margin: 0;

    color: #374151;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;

    text-align: left;
    overflow-wrap: anywhere;
  }

  .admin-session-mobile-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    width: auto;
    max-width: max-content;
    min-height: 34px;

    padding: 0 11px;
    margin-top: 14px;

    border: 1px solid #101419;
    border-radius: 8px;

    color: #ffffff;
    background: #101419;

    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
  }

  .admin-session-participants,
  .admin-session-details-grid {
    grid-template-columns: 1fr;
  }

  .admin-session-details-hero {
    align-items: flex-start;
    flex-direction: column;

    padding: 20px;

    text-align: left;
  }

  .admin-session-details-hero h2 {
    font-size: 21px;
  }

  .admin-session-copy-section {
    padding: 18px;
  }

  .admin-session-table-shell .admin-table-pagination {
    padding: 13px 12px;
  }
}

/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 560px) {
  .admin-session-filters {
    padding-bottom: 3px;
  }

  .admin-session-results-summary {
    gap: 6px;
  }
}/* =========================================================
   ADMIN — FEEDBACK & TESTIMONIALS
   Supplemental production styles.
   ========================================================= */

.admin-reviews-page {
  display: grid;
  gap: 18px;
}

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

.admin-review-summary-grid article {
  display: grid;
  gap: 6px;

  min-width: 0;
  padding: 18px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;
}

.admin-review-summary-grid small {
  color: #6f8095;

  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.admin-review-summary-grid strong {
  color: #101419;

  font-size: 22px;
  line-height: 1;
}

.admin-review-summary-grid span {
  color: #6f8095;

  font-size: 11px;
  line-height: 1.5;
}

.admin-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;
}

.admin-review-toolbar .admin-search-field {
  flex: 1 1 340px;
  max-width: 520px;
}

.admin-review-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-review-filters button {
  min-height: 36px;
  padding: 0 11px;

  border: 1px solid #e4e8ef;
  border-radius: 9px;

  color: #4c5867;
  background: #ffffff;

  font: inherit;
  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}

.admin-review-filters button.active {
  border-color: #101419;

  color: #ffffff;
  background: #101419;
}

.admin-review-table-shell {
  overflow: hidden;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #ffffff;
}

.admin-review-desktop-table {
  overflow-x: auto;
}

.admin-feedback-table {
  min-width: 1120px;
}

.admin-feedback-copy-cell {
  max-width: 320px;

  white-space: normal;
  line-height: 1.55;

  overflow-wrap: anywhere;
}

.admin-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;

  color: #ff5303;
}

.admin-review-unpublish-button,
.admin-review-private-label {
  white-space: nowrap;
}

.admin-review-unpublish-button {
  border: 0;
  padding: 0;

  color: #a73535;
  background: transparent;

  font: inherit;
  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}

.admin-review-unpublish-button:hover {
  text-decoration: underline;
}

.admin-review-private-label {
  color: #8795a6;

  font-size: 9px;
  font-weight: 650;
}

.admin-review-mobile-list {
  display: none;
}

.admin-review-publication-preview {
  margin-top: 16px;
  padding: 14px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  background: #f8f9fb;
}

.admin-review-publication-preview > p {
  margin: 10px 0 0;

  color: #2d353f;

  font-size: 12px;
  line-height: 1.65;
}

.admin-review-publication-preview > small {
  display: block;

  margin-top: 10px;

  color: #6f8095;

  font-size: 10px;
}

@media (max-width: 980px) {
  .admin-review-summary-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .admin-review-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-review-toolbar .admin-search-field {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .admin-review-summary-grid {
    grid-template-columns: 1fr;
  }

  .admin-review-desktop-table {
    display: none;
  }

  .admin-review-mobile-list {
    display: grid;
    gap: 12px;

    padding: 12px;
  }

  .admin-review-mobile-card {
    min-width: 0;
    padding: 16px;

    border: 1px solid #e4e8ef;
    border-radius: 12px;

    background: #ffffff;
  }

  .admin-review-mobile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .admin-review-mobile-card-head > div:first-child {
    min-width: 0;
  }

  .admin-review-mobile-card-head span,
  .admin-review-mobile-card-head strong,
  .admin-review-mobile-card-head small {
    display: block;
  }

  .admin-review-mobile-card-head span {
    color: #6f8095;

    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
  }

  .admin-review-mobile-card-head strong {
    margin-top: 4px;

    color: #101419;

    font-size: 13px;
  }

  .admin-review-mobile-card-head small {
    margin-top: 3px;

    color: #6f8095;

    font-size: 10px;
  }

  .admin-review-mobile-copy {
    margin: 14px 0 0;

    color: #4c5867;

    font-size: 12px;
    line-height: 1.65;

    overflow-wrap: anywhere;
  }

  .admin-review-mobile-details {
    display: grid;
    gap: 9px;

    margin: 15px 0 0;
  }

  .admin-review-mobile-details > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    padding-top: 9px;

    border-top: 1px solid #eef1f5;
  }

  .admin-review-mobile-details dt {
    color: #6f8095;

    font-size: 10px;
  }

  .admin-review-mobile-details dd {
    margin: 0;

    color: #2d353f;

    text-align: right;

    font-size: 10px;
    font-weight: 650;
  }

  .admin-review-mobile-actions {
    margin-top: 15px;
  }

  .admin-review-mobile-actions .admin-review-button,
  .admin-review-mobile-actions .admin-review-unpublish-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
  }
}

@media (max-width: 520px) {
  .admin-review-filters {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .admin-review-filters button {
    width: 100%;
  }

  .admin-review-mobile-card-head {
    flex-direction: column;
  }
}

.admin-messages-page {
  width: 100%;
  min-width: 0;
}

.admin-messages-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.admin-messages-toolbar > div {
  min-width: 0;
}

.admin-messages-toolbar p {
  margin: 5px 0 0;
  max-width: 720px;
  color: #667085;
  font-size: 14px;
  line-height: 1.55;
}

.admin-message-new-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #ff5303;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.admin-message-new-button:hover {
  filter: brightness(0.96);
}

.admin-message-shell {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #ffffff;
}

.admin-message-conversation-panel {
  min-width: 0;
  border-right: 1px solid #e4e7ec;
  background: #ffffff;
}

.admin-message-conversation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}

.admin-message-conversation-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-message-conversation-heading strong {
  color: #101828;
  font-size: 15px;
}

.admin-message-conversation-heading small {
  color: #667085;
  font-size: 12px;
}

.admin-message-search,
.admin-message-member-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 14px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #667085;
}

.admin-message-search:focus-within,
.admin-message-member-search:focus-within {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(255, 83, 3, 0.1);
}

.admin-message-search input,
.admin-message-member-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #101828;
  font: inherit;
  font-size: 14px;
}

.admin-message-conversation-list {
  max-height: 524px;
  overflow-y: auto;
}

.admin-message-conversation-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid #f0f2f5;
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-message-conversation-item:hover {
  background: #fafafa;
}

.admin-message-conversation-item.active {
  background: #fff8f4;
  box-shadow: inset 3px 0 0 #ff5303;
}

.admin-message-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.admin-message-avatar.large {
  width: 40px;
  height: 40px;
}

.admin-message-conversation-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.admin-message-conversation-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-message-conversation-name-row strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-message-conversation-name-row i {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff5303;
  color: #ffffff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.admin-message-conversation-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-message-conversation-copy p {
  margin: 7px 0 0;
  overflow: hidden;
  color: #475467;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-message-conversation-copy time {
  margin-top: 5px;
  color: #98a2b3;
  font-size: 10px;
}

.admin-message-list-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 20px;
  color: #667085;
}

.admin-message-list-empty strong {
  margin-top: 12px;
  color: #101828;
  font-size: 14px;
}

.admin-message-list-empty p {
  margin: 4px 0 0;
  max-width: 260px;
  font-size: 12px;
  line-height: 1.5;
}

.admin-message-thread-panel {
  min-width: 0;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.admin-message-thread-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid #e4e7ec;
  background: #ffffff;
}

.admin-message-thread-header > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-message-thread-header strong {
  color: #101828;
  font-size: 15px;
}

.admin-message-thread-header small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-message-mobile-back {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  cursor: pointer;
}

.admin-message-thread {
  flex: 1;
  min-height: 0;
  max-height: 474px;
  overflow-y: auto;
  padding: 20px;
  background: #ffffff;
}

.admin-message-thread-state,
.admin-message-thread-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 28px;
  color: #667085;
}

.admin-message-thread-state strong,
.admin-message-thread-empty h2 {
  margin: 12px 0 0;
  color: #101828;
  font-size: 17px;
}

.admin-message-thread-state p,
.admin-message-thread-empty p {
  margin: 5px 0 0;
  max-width: 420px;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.admin-message-bubble-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.admin-message-bubble-row.mine {
  justify-content: flex-end;
}

.admin-message-bubble {
  max-width: min(72%, 560px);
  padding: 10px 12px;
  border: 1px solid #e4e7ec;
  border-radius: 12px 12px 12px 4px;
  background: #f8fafc;
}

.admin-message-bubble-row.mine .admin-message-bubble {
  border-color: #ffd7c4;
  border-radius: 12px 12px 4px 12px;
  background: #fff7f2;
}

.admin-message-bubble p {
  margin: 0;
  color: #344054;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-message-bubble time {
  display: block;
  margin-top: 5px;
  color: #98a2b3;
  font-size: 10px;
}

.admin-message-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #e4e7ec;
  background: #ffffff;
}

.admin-message-composer label {
  flex: 1;
  min-width: 0;
}

.admin-message-composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  outline: 0;
  background: #ffffff;
  color: #101828;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.admin-message-composer textarea:focus {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(255, 83, 3, 0.1);
}

.admin-message-composer button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  background: #ff5303;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.admin-message-composer button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-message-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 40, 0.45);
}

.admin-message-new-modal {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
}

.admin-message-new-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid #eaecf0;
}

.admin-message-new-modal h2 {
  margin: 4px 0 0;
  color: #101828;
  font-size: 20px;
}

.admin-message-new-modal header p {
  margin: 5px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.admin-message-modal-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  cursor: pointer;
}

.admin-message-member-search {
  margin: 16px 18px 12px;
}

.admin-message-member-list {
  min-height: 180px;
  overflow-y: auto;
  padding: 0 12px 14px;
}

.admin-message-member-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid #f0f2f5;
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-message-member-list > button:hover {
  background: #fafafa;
}

.admin-message-member-list > button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.admin-message-member-list > button > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-message-member-list strong {
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-message-member-list small {
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-message-member-list i {
  color: #ff5303;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 900px) {
  .admin-message-shell {
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
  }

  .admin-message-bubble {
    max-width: 82%;
  }
}

@media (max-width: 760px) {
  .admin-messages-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-message-new-button {
    width: 100%;
  }

  .admin-message-shell {
    display: block;
    min-height: 560px;
  }

  .admin-message-conversation-panel {
    border-right: 0;
  }

  .admin-message-thread-panel {
    display: none;
    min-height: 560px;
  }

  .admin-message-shell.has-selection .admin-message-conversation-panel {
    display: none;
  }

  .admin-message-shell.has-selection .admin-message-thread-panel {
    display: flex;
  }

  .admin-message-mobile-back {
    display: inline-flex;
  }

  .admin-message-conversation-list {
    max-height: 470px;
  }

  .admin-message-thread {
    max-height: 412px;
    padding: 16px 12px;
  }

  .admin-message-bubble {
    max-width: 88%;
  }

  .admin-message-composer {
    padding: 12px;
  }
}

@media (max-width: 520px) {
  .admin-message-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .admin-message-new-modal {
    width: 100%;
    max-height: 86vh;
    border-radius: 16px 16px 0 0;
  }

  .admin-message-thread-header {
    padding: 12px;
  }

  .admin-message-avatar.large {
    width: 36px;
    height: 36px;
  }

  .admin-message-composer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-message-composer button {
    width: 100%;
  }
}

.admin-activity-page {
  width: 100%;
  min-width: 0;
}

.admin-activity-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #ffffff;
}

.admin-activity-intro-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff7f2;
  color: #ff5303;
}

.admin-activity-intro strong {
  display: block;
  color: #101828;
  font-size: 14px;
}

.admin-activity-intro p {
  margin: 4px 0 0;
  max-width: 760px;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.admin-activity-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.admin-activity-search {
  width: min(420px, 100%);
  margin: 0;
}

.admin-activity-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-activity-filters button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.admin-activity-filters button:hover {
  border-color: #b9bec8;
  background: #fafafa;
}

.admin-activity-filters button.active {
  border-color: #ff5303;
  background: #fff7f2;
  color: #c63d00;
}

.admin-activity-results-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.admin-activity-results-summary span {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.admin-activity-results-summary small {
  color: #667085;
  font-size: 12px;
}

.admin-activity-table-shell {
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #ffffff;
}

.admin-activity-table {
  width: 100%;
}

.admin-activity-table th,
.admin-activity-table td {
  text-align: left;
  vertical-align: middle;
}

.admin-activity-table td strong {
  display: block;
  color: #101828;
  font-size: 13px;
  font-weight: 700;
}

.admin-activity-table td small {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 11px;
  line-height: 1.45;
}

.admin-activity-summary-cell {
  min-width: 230px;
  max-width: 360px;
}

.admin-activity-record-reference {
  color: #667085;
  font-size: 12px;
}

.admin-activity-area {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-activity-mobile-list {
  display: none;
}

.admin-activity-mobile-card {
  padding: 16px;
  border-bottom: 1px solid #eaecf0;
  background: #ffffff;
}

.admin-activity-mobile-card:last-child {
  border-bottom: 0;
}

.admin-activity-mobile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-activity-mobile-head > div {
  min-width: 0;
}

.admin-activity-mobile-head span {
  display: block;
  color: #ff5303;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.admin-activity-mobile-head strong {
  display: block;
  margin-top: 4px;
  color: #101828;
  font-size: 14px;
}

.admin-activity-mobile-head time {
  flex: 0 0 auto;
  color: #667085;
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
}

.admin-activity-mobile-card > p {
  margin: 10px 0 12px;
  color: #475467;
  font-size: 13px;
  line-height: 1.55;
}

.admin-activity-mobile-card dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.admin-activity-mobile-card dl > div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 10px;
}

.admin-activity-mobile-card dt {
  color: #667085;
  font-size: 11px;
}

.admin-activity-mobile-card dd {
  margin: 0;
  color: #344054;
  font-size: 12px;
  font-weight: 650;
}

@media (max-width: 980px) {
  .admin-activity-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-activity-search {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .admin-activity-results-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .admin-activity-desktop-table {
    display: none;
  }

  .admin-activity-mobile-list {
    display: block;
  }

  .admin-activity-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .admin-activity-filters button {
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  .admin-activity-intro {
    padding: 14px;
  }

  .admin-activity-mobile-card dl > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}
/* =========================================================
   TCN IKEJA MENTOR CONNECT
   PLATFORM VISUAL CLEANUP
   Load this stylesheet LAST from App.jsx.
   ========================================================= */

/* =========================================================
   1. DASHBOARD FORM FIELD BASELINE
   ========================================================= */

.dashboard-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.dashboard-layout select,
.dashboard-layout textarea {
  border: 1px solid #c9d2df !important;
  outline: none !important;

  color: #101419 !important;
  background-color: #ffffff !important;

  box-shadow: none !important;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.dashboard-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
.dashboard-layout select:hover,
.dashboard-layout textarea:hover {
  border-color: #97aac2 !important;
}

.dashboard-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
.dashboard-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible,
.dashboard-layout select:focus,
.dashboard-layout select:focus-visible,
.dashboard-layout textarea:focus,
.dashboard-layout textarea:focus-visible {
  border-color: #4c5867 !important;
  outline: none !important;

  background-color: #ffffff !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10) !important;
}

.dashboard-layout input::placeholder,
.dashboard-layout textarea::placeholder {
  color: #97aac2 !important;
}

/* =========================================================
   2. SEARCH FIELDS WITH A WRAPPER
   ========================================================= */

.dashboard-search-field {
  border-color: #c9d2df !important;
  outline: none !important;
}

.dashboard-search-field:focus-within {
  border-color: #4c5867 !important;
  outline: none !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10) !important;
}

/*
   Find a mentor uses a bordered wrapper, so its inner input
   must stay borderless.
*/
.dashboard-search-field input,
.dashboard-search-field input:hover,
.dashboard-search-field input:focus,
.dashboard-search-field input:focus-visible,
.dashboard-search-field input:active {
  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

/*
   Mentorship requests and My mentees use the INPUT itself
   as the visible field. Their wrappers must NOT draw another
   border or focus ring, otherwise a second line appears inside.
*/
.mentor-requests-search,
.mentor-requests-search:focus-within,
.mentor-mentees-search,
.mentor-mentees-search:focus-within {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.dashboard-search-field:focus-within > svg,
.mentor-requests-search:focus-within > svg,
.mentor-mentees-search:focus-within > svg {
  color: #ff5303 !important;
}

/* =========================================================
   3. SPECIFIC DASHBOARD FORM SAFETY
   ========================================================= */

.mentee-profile-form input:focus,
.mentee-profile-form input:focus-visible,
.mentee-profile-form select:focus,
.mentee-profile-form select:focus-visible,
.mentee-profile-form textarea:focus,
.mentee-profile-form textarea:focus-visible,

.mentor-my-profile-page input:focus,
.mentor-my-profile-page input:focus-visible,
.mentor-my-profile-page select:focus,
.mentor-my-profile-page select:focus-visible,
.mentor-my-profile-page textarea:focus,
.mentor-my-profile-page textarea:focus-visible,

.mentor-application-form input:focus,
.mentor-application-form input:focus-visible,
.mentor-application-form select:focus,
.mentor-application-form select:focus-visible,
.mentor-application-form textarea:focus,
.mentor-application-form textarea:focus-visible,

.mentor-schedule-session-page input:focus,
.mentor-schedule-session-page input:focus-visible,
.mentor-schedule-session-page select:focus,
.mentor-schedule-session-page select:focus-visible,
.mentor-schedule-session-page textarea:focus,
.mentor-schedule-session-page textarea:focus-visible,

.mentee-message-composer textarea:focus,
.mentee-message-composer textarea:focus-visible,
.mentor-message-composer textarea:focus,
.mentor-message-composer textarea:focus-visible,

.mentor-request-modal textarea:focus,
.mentor-request-modal textarea:focus-visible {
  border-color: #4c5867 !important;
  outline: none !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10) !important;
}

/* =========================================================
   4. MENTOR REQUEST SEARCH
   ========================================================= */

.mentor-requests-search input,
.mentor-requests-search input:hover {
  border: 1px solid #c9d2df !important;
  outline: none !important;

  background: #ffffff !important;

  box-shadow: none !important;
}

.mentor-requests-search input:focus,
.mentor-requests-search input:focus-visible {
  border: 1px solid #4c5867 !important;
  outline: none !important;

  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10) !important;
}

/* =========================================================
   5. MENTOR PROFILE POLISH
   ========================================================= */

.mentor-profile-hero,
.mentor-profile-card {
  border-color: #e4e8ef !important;

  background: #ffffff !important;
  background-image: none !important;
}

.mentor-profile-hero {
  box-shadow:
    0 8px 24px
    rgba(16, 20, 25, 0.025);
}

.mentor-profile-avatar.mentor-profile-initials {
  position: relative;

  display: grid;
  place-items: center;

  border: 1px solid #2d353f !important;
  border-radius: 18px !important;

  color: #ffffff !important;
  background: #101419 !important;
  background-image: none !important;

  font-size: 20px !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em;

  box-shadow:
    0 0 0 4px #ffffff,
    0 0 0 5px #ffd8c6 !important;
}

.mentor-profile-avatar.mentor-profile-initials::after {
  position: absolute;
  right: 5px;
  bottom: 5px;

  width: 10px;
  height: 10px;

  border: 2px solid #ffffff;
  border-radius: 999px;

  background: #ff5303;

  content: "";
}

img.mentor-profile-avatar {
  border: 1px solid #e4e8ef;
  background: #f8f9fb;

  box-shadow:
    0 0 0 4px #ffffff,
    0 0 0 5px #e4e8ef;
}

.mentor-profile-availability {
  border: 1px solid #e4e8ef !important;

  color: #c13c00 !important;
  background: #fbfcfd !important;
  background-image: none !important;

  box-shadow: none !important;
}

.mentor-profile-availability small {
  color: #6f8095 !important;
}

.mentor-profile-availability.at-capacity {
  border-color: #f0d4d8 !important;

  color: #a63d46 !important;
  background: #fff7f8 !important;
}

.mentor-profile-tags span {
  border: 1px solid #ffd9c9 !important;

  color: #c13c00 !important;
  background: #fff9f6 !important;
}

.mentor-profile-detail-row svg {
  color: #ff5303 !important;
}

/* =========================================================
   6. MOBILE INPUT SAFETY
   ========================================================= */

@media (max-width: 760px) {
  .dashboard-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .dashboard-layout select,
  .dashboard-layout textarea {
    font-size: 16px !important;
  }

  .mentor-profile-avatar {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
  }

  .mentor-profile-avatar.mentor-profile-initials {
    font-size: 17px !important;
  }
}


/* =========================================================
   FIND A MENTOR SEARCH - FINAL INNER LINE FIX
   The wrapper is the only visible field border.
   ========================================================= */

body .dashboard-layout .dashboard-search-field
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body .dashboard-layout .dashboard-search-field
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
body .dashboard-layout .dashboard-search-field
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
body .dashboard-layout .dashboard-search-field
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible,
body .dashboard-layout .dashboard-search-field
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):active {
  border: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body .dashboard-layout .dashboard-search-field {
  overflow: hidden !important;
}


/* =========================================================
   FIND A MENTOR / REQUEST FLOW SEARCH
   The current FindMentor page uses .request-flow-search,
   not .dashboard-search-field.
   The wrapper owns the ONLY visible border.
   ========================================================= */

body .dashboard-layout .request-flow-search {
  border: 1px solid #c9d2df !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body .dashboard-layout .request-flow-search:hover {
  border-color: #97aac2 !important;
}

body .dashboard-layout .request-flow-search:focus-within {
  border-color: #4c5867 !important;
  outline: 0 !important;
  box-shadow:
    0 0 0 2px
    rgba(76, 88, 103, 0.10) !important;
}

body .dashboard-layout .request-flow-search
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body .dashboard-layout .request-flow-search
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
body .dashboard-layout .request-flow-search
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
body .dashboard-layout .request-flow-search
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible,
body .dashboard-layout .request-flow-search
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):active {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body .dashboard-layout .request-flow-search:focus-within > svg {
  color: #ff5303 !important;
}


/* =========================================================
   PENDING STATUS - TEXT ONLY
   No pill, no filled background.
   Applies to mentee and mentor request status labels only.
   ========================================================= */

body .dashboard-layout
.mentee-request-status.status-pending,
body .dashboard-layout
.mentor-request-status.status-pending {
  min-height: auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: #b56a00 !important;
  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
}

/* Mentor request status already has a small dot.
   Keep the dot, but never give the label a filled canvas. */
body .dashboard-layout
.mentor-request-status.status-pending > i {
  background: #b56a00 !important;
}


/* =========================================================
   ACCEPTED STATUS - GREEN TEXT ONLY
   Positive state, no pill, no filled background.
   Applies to mentee and mentor request status labels.
   ========================================================= */

body .dashboard-layout
.mentee-request-status.status-accepted,
body .dashboard-layout
.mentor-request-status.status-accepted {
  min-height: auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: #2f7d4a !important;
  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
}

/* Mentor table statuses already include a dot. Keep it green. */
body .dashboard-layout
.mentor-request-status.status-accepted > i {
  background: #2f7d4a !important;
}
:root {
  /* =======================================================
     HOTHUB MENTOR CONNECT
     APPROVED COLOUR SYSTEM V3
     Main brand values are locked at 600.
     ======================================================= */

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ---------------------------------
     ORANGE / PRIMARY
     --------------------------------- */
  --orange-50: #fff4f3;
  --orange-100: #ffe5e3;
  --orange-200: #ffcbc5;
  --orange-300: #ffb4aa;
  --orange-400: #ff9788;
  --orange-500: #ff775d;
  --orange-600: #ff5303;
  --orange-700: #c13c00;
  --orange-800: #832600;
  --orange-900: #4b1200;
  --orange-950: #2f0800;

  /* ---------------------------------
     DARK / TEXT + SECONDARY SURFACE
     --------------------------------- */
  --ink-50: #e4e8ef;
  --ink-100: #c9d2df;
  --ink-200: #97aac2;
  --ink-300: #6f8095;
  --ink-400: #4c5867;
  --ink-500: #2d353f;
  --ink-600: #101419;
  --ink-700: #0e1116;
  --ink-800: #080b0f;
  --ink-900: #06070a;
  --ink-950: #030405;

  /* ---------------------------------
     TEAL / ACCENT
     --------------------------------- */
  --teal-50: #f8f9fb;
  --teal-100: #e4e8ef;
  --teal-200: #d7dee7;
  --teal-300: #c9d2df;
  --teal-400: #97aac2;
  --teal-500: #6f8095;
  --teal-600: #4c5867;
  --teal-700: #2d353f;
  --teal-800: #1f252d;
  --teal-900: #101419;
  --teal-950: #0b0f14;

  /* Locked brand aliases */
  --brand-orange: var(--orange-600);
  --brand-orange-hover: var(--orange-700);
  --brand-orange-deep: var(--orange-700);
  --brand-orange-soft: var(--orange-50);

  --brand-teal: var(--teal-600);
  --brand-teal-dark: var(--teal-700);
  --brand-teal-soft: var(--teal-50);

  /* Backgrounds */
  --page-bg: #fff8f7;
  --page-bg-soft: var(--orange-50);

  --surface: #fffaf9;
  --surface-elevated: #fffdfc;
  --surface-soft: var(--orange-50);

  /* Dark surfaces */
  --dark-surface: var(--ink-600);
  --dark-surface-hover: var(--ink-500);
  --dark-surface-soft: var(--ink-500);

  /* Typography */
  --heading: var(--ink-600);
  --body-copy: var(--ink-400);
  --muted: var(--ink-300);
  --subtle: var(--ink-200);

  /* Warm readable text on orange */
  --orange-ink: var(--orange-950);

  /* Light text on dark, never pure white */
  --text-inverse: var(--ink-50);
  --text-inverse-muted: var(--ink-100);

  /* Borders */
  --border: var(--ink-50);
  --border-strong: var(--ink-100);

  /* Status */
  --success: var(--teal-700);
  --success-soft: var(--teal-50);

  --warning: #b96a18;
  --warning-soft: #fff2df;

  --danger: #b74750;
  --danger-hover: #953841;
  --danger-soft: #fff0f1;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-xs:
    0 1px 3px rgba(16, 20, 25, 0.04);

  --shadow-sm:
    0 8px 24px rgba(16, 20, 25, 0.06);

  --shadow-md:
    0 18px 48px rgba(16, 20, 25, 0.09);

  --shadow-orange:
    0 12px 28px rgba(255, 83, 3, 0.20);

  /* Motion */
  --motion-fast: 140ms ease;
  --motion-normal: 200ms ease;
  --motion-slow:
    520ms cubic-bezier(0.2, 0.8, 0.2, 1);

  color: var(--heading);
  background: var(--page-bg);
}

* {
  box-sizing: border-box;
}





button,
input,
select,
textarea {
  font: inherit;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}



/* Homepage */

.home-page {
  display: flex;
  flex-direction: column;

  min-height: 100vh;

  color: #fff8f7;
  background:
    radial-gradient(
      circle at 80% 42%,
      rgba(10, 168, 143, 0.11),
      transparent 32%
    ),
    #101419;
}

/* Navigation */

.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px 6%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;

  color: #fff8f7;
}

.brand-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 44px;
  height: 44px;

  border-radius: 13px;

  color: #101419;
  background: linear-gradient(145deg, #ff5303, #4c5867);
}

.brand-icon svg {
  width: 23px;
  height: 23px;
}

.brand-text strong,
.brand-text small {
  display: block;
}

.brand-text strong {
  color: #fff8f7;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.brand-text small {
  margin-top: 3px;

  color: #8eabb9;

  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.18em;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-sign-in {
  color: #c3d3da;

  font-size: 13px;
  font-weight: 600;

  transition: color 180ms ease;
}

.nav-sign-in:hover {
  color: #4c5867;
}

.nav-create-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 18px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--brand-dark);
  background: var(--brand-orange);

  font-size: 13px;
  font-weight: 750;

  box-shadow:
    0 6px 16px rgba(255, 83, 3, 0.14);

  transition:
    background-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.nav-create-account:hover {
  background: var(--brand-orange-hover);

  box-shadow:
    0 8px 20px rgba(255, 83, 3, 0.18);

  transform: translateY(-1px);
}

/* Hero */

.home-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(350px, 0.85fr);
  align-items: center;
  gap: clamp(55px, 8vw, 120px);

  width: 100%;
  max-width: 1380px;
  margin: auto;
  padding: 75px 6% 90px;
}

.hero-content {
  max-width: 700px;
}

.eyebrow {
  display: block;

  color: #4c5867;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

.hero-content h1 {
  max-width: 680px;
  margin: 18px 0 22px;

  color: #fff8f7;

  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.hero-content > p {
  max-width: 590px;
  margin: 0;

  color: #97aac2;

  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
}

/* Hero buttons */

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 36px;
}

.hero-primary-button,
.hero-secondary-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 50px;
  padding: 0 22px;

  border-radius: var(--radius-md);

  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;

  transition:
    color var(--motion-normal),
    background-color var(--motion-normal),
    border-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.hero-primary-button {
  border: 1px solid var(--brand-orange);

  color: var(--brand-dark);
  background: var(--brand-orange);

  box-shadow:
    0 8px 20px rgba(255, 83, 3, 0.16);
}

.hero-primary-button::before {
  content: "";

  position: absolute;
  z-index: -1;
  top: -40%;
  bottom: -40%;
  left: -55%;

  width: 34%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255, 255, 255, 0.45),
      transparent
    );

  transform: skewX(-18deg);
  transition: left var(--motion-sweep);
}

.hero-primary-button:hover {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow: var(--shadow-orange);

  transform: translateY(-2px);
}

.hero-primary-button:hover::before {
  left: 125%;
}

.hero-primary-button:active {
  transform: scale(0.97);
}

.hero-secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.34);

  color: var(--text-inverse);
  background: rgba(255, 255, 255, 0.04);
}

.hero-secondary-button::after {
  content: "";

  position: absolute;
  z-index: -1;
  inset: 0;

  background: var(--bg-surface);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 260ms ease;
}

.hero-secondary-button:hover {
  border-color: var(--bg-surface);

  color: var(--brand-dark);

  transform: translateY(-2px);
}

.hero-secondary-button:hover::after {
  transform: scaleX(1);
}

.hero-secondary-button:active {
  transform: scale(0.97);
}

.hero-primary-button:focus-visible,
.hero-secondary-button:focus-visible {
  outline: 3px solid rgba(46, 196, 182, 0.32);
  outline-offset: 3px;
}

/* Trust card */

.trust-card {
  width: 100%;
  max-width: 470px;
  justify-self: end;

  padding: clamp(30px, 4vw, 44px);

  border: 1px solid rgba(107, 229, 199, 0.18);
  border-radius: 22px;

  background: rgba(13, 45, 65, 0.72);

  box-shadow: 0 30px 80px rgba(0, 8, 15, 0.28);
  backdrop-filter: blur(12px);
}

.trust-card-icon {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;
  margin-bottom: 29px;

  border-radius: 16px;

  color: #101419;
  background: #4c5867;
}

.trust-card h2 {
  margin: 13px 0 16px;

  color: #fff8f7;

  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.trust-card > p {
  margin: 0;

  color: #97aac2;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}

.trust-card ul {
  display: grid;
  gap: 15px;

  margin: 28px 0 0;
  padding: 24px 0 0;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  list-style: none;
}

.trust-card li {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #d6e2e7;

  font-size: 13px;
  font-weight: 400;
}

.trust-card li svg {
  flex-shrink: 0;
  color: #4c5867;
}

/* Footer */

.public-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  width: 100%;
  max-width: 1380px;
  margin: auto auto 0;
  padding: 25px 6%;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  color: #6f8095;

  font-size: 12px;
  font-weight: 400;
}

.public-footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.public-footer a {
  color: #6f8095;

  transition: color 180ms ease;
}

.public-footer a:hover {
  color: #4c5867;
}

/* Tablet */

@media (max-width: 950px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 55px;

    padding-top: 65px;
  }

  .hero-content {
    max-width: 760px;
  }

  .trust-card {
    max-width: 650px;
    justify-self: start;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .public-nav {
    padding: 18px;
  }

  .brand-icon {
    width: 40px;
    height: 40px;
  }

  .brand-text strong {
    font-size: 13px;
  }

  .brand-text small {
    font-size: 8px;
  }

  .nav-actions {
    gap: 12px;
  }

  .nav-sign-in {
    display: none;
  }

  .nav-create-account {
    min-height: 42px;
    padding: 0 14px;

    font-size: 12px;
  }

  .home-hero {
    gap: 45px;
    padding: 58px 18px 70px;
  }

  .hero-content h1 {
    margin-top: 14px;

    font-size: clamp(42px, 13vw, 58px);
    line-height: 1.05;
  }

  .hero-content > p {
    font-size: 15px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-primary-button,
  .hero-secondary-button {
    width: 100%;
  }

  .trust-card {
    padding: 28px 22px;

    border-radius: 19px;
  }

  .public-footer {
    align-items: flex-start;
    flex-direction: column;

    padding: 24px 18px;
  }

  .footer-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* Authentication pages */

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);

  min-height: 100vh;

  color: #101419;
  background: #fff8f7;
}

.auth-panel {
  width: min(540px, 100%);
  margin: auto;
  padding: 50px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 45px;

  color: #4c5867;

  font-size: 13px;
  font-weight: 600;

  transition: color 180ms ease;
}

.back-link:hover {
  color: #c13c00;
}

.auth-brand {
  margin-bottom: 55px;
}

.auth-brand .brand {
  width: max-content;
}

.auth-brand .brand-text strong {
  color: #101419;
}

.auth-brand .brand-text small {
  color: #4c5867;
}

.auth-heading h1 {
  margin: 9px 0 12px;

  color: #101419;

  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.auth-heading p {
  margin: 0;

  color: #4c5867;

  font-size: 14px;
  line-height: 1.7;
}

.auth-page form {
  display: grid;
  gap: 20px;

  margin-top: 30px;
}

.auth-page form > label {
  display: block;

  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
}

.auth-page form input,
.auth-page form select,
.auth-page form textarea {
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  padding: 0 15px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-size: 14px;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.auth-page form input:focus,
.auth-page form select:focus,
.auth-page form textarea:focus {
  border-color: #ff5303;

  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 52px;
}

.password-field button {
  position: absolute;
  right: 9px;
  bottom: 7px;

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;
  padding: 0;

  border: none;
  border-radius: 8px;

  color: #4c5867;
  background: transparent;

  cursor: pointer;
}

.password-field button:hover {
  color: #c13c00;
  background: #f8f9fb;
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;

  color: #4c5867;

  font-size: 12px;
  font-weight: 500;
}

.remember-me input {
  width: auto;
  min-height: auto;
  margin: 0;

  accent-color: #ff5303;
}

.forgot-link {
  color: #c13c00;

  font-size: 12px;
  font-weight: 700;
}

.forgot-link:hover {
  text-decoration: underline;
}

.auth-page form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  width: 100%;
  min-height: 50px;
  padding: 0 22px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--brand-dark);
  background: var(--brand-orange);

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 6px 16px rgba(255, 83, 3, 0.14);

  transition:
    background-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.auth-page form button[type="submit"]:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 9px 20px rgba(255, 83, 3, 0.18);

  transform: translateY(-1px);
}

.auth-page form button[type="submit"]:active:not(:disabled) {
  transform: scale(0.98);
}

.auth-page form button[type="submit"]:focus-visible {
  outline: 3px solid rgba(46, 196, 182, 0.26);
  outline-offset: 2px;
}

.auth-page form button[type="submit"]:disabled {
  border-color: var(--border-light);

  color: var(--text-muted);
  background: var(--bg-soft);

  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.form-error {
  margin: 0;
  padding: 12px 14px;

  border: 1px solid #ffd5da;
  border-radius: 10px;

  color: #b42335;
  background: #fff0f2;

  font-size: 12px;
  line-height: 1.6;
}

.account-copy {
  margin: 24px 0 0;

  color: #4c5867;

  text-align: center;
  font-size: 13px;
}

.account-copy a {
  color: #c13c00;
  font-weight: 700;
}

.account-copy a:hover {
  text-decoration: underline;
}

.auth-message {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 10%;

  color: #fff8f7;
  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(107, 229, 199, 0.12),
      transparent 32%
    ),
    #101419;
}

.auth-message > svg {
  margin-bottom: 28px;
  color: #4c5867;
}

.auth-message .eyebrow {
  color: #4c5867;
}

.auth-message h2 {
  max-width: 620px;
  margin: 16px 0;

  color: #fff8f7;

  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.auth-message p {
  max-width: 550px;
  margin: 0;

  color: #97aac2;

  font-size: 14px;
  line-height: 1.75;
}

/* Registration role selection */

.role-selection {
  display: grid;
  gap: 12px;

  margin: 0;
  padding: 0;

  border: none;
}

.role-selection legend {
  margin-bottom: 10px;

  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
}

.role-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 16px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  color: #101419;
  background: #fff8f7;

  cursor: pointer;

  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.role-card:hover {
  border-color: #ff5303;
}

.role-card.selected {
  border-color: #ff5303;
  background: #f8f9fb;
}

.role-card input {
  width: auto;
  min-height: auto;
  margin: 4px 0 0;

  accent-color: #ff5303;
}

.role-card strong,
.role-card small {
  display: block;
}

.role-card strong {
  color: #101419;

  font-size: 13px;
  font-weight: 700;
}

.role-card small {
  margin-top: 5px;

  color: #4c5867;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

.terms-checkbox input {
  width: auto;
  min-height: auto;
  margin: 4px 0 0;

  accent-color: #ff5303;
}

/* =========================================================
   ADMINISTRATOR LOGIN - HOTHUB VISUAL SYSTEM
   ========================================================= */

.admin-auth-page {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(320px, 0.9fr)
    minmax(520px, 1.1fr);

  min-height: 100vh;
  overflow: hidden;

  color: var(--ink-warm-strong);
  background: var(--canvas-warm);
}

/* ---------- Branded visual panel ---------- */

.admin-auth-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 100vh;
  padding: clamp(40px, 5vw, 72px);

  color: #fff9f5;

  background:
    linear-gradient(
      145deg,
      rgba(16, 20, 25, 0.96),
      rgba(45, 32, 27, 0.98)
    );
}

.admin-auth-visual::before {
  content: "";

  position: absolute;
  z-index: -2;
  inset: 0;

  opacity: 0.9;

  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 83, 3, 0.95) 0 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 72% 24%,
      rgba(46, 196, 182, 0.68) 0 6px,
      transparent 7px
    ),
    radial-gradient(
      circle at 40% 68%,
      rgba(255, 191, 0, 0.72) 0 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 82% 76%,
      rgba(255, 83, 3, 0.72) 0 9px,
      transparent 10px
    ),
    linear-gradient(
      120deg,
      transparent 0 47%,
      rgba(255, 255, 255, 0.05) 48% 49%,
      transparent 50% 100%
    );

  background-size:
    150px 150px,
    190px 190px,
    210px 210px,
    180px 180px,
    120px 120px;
}

.admin-auth-visual::after {
  content: "";

  position: absolute;
  z-index: -1;
  right: -110px;
  bottom: -110px;

  width: 380px;
  height: 380px;

  border: 1px solid rgba(255, 83, 3, 0.28);
  border-radius: 50%;

  box-shadow:
    0 0 0 46px rgba(255, 83, 3, 0.05),
    0 0 0 92px rgba(46, 196, 182, 0.035);
}

.admin-auth-visual-logo {
  width: min(210px, 65%);
  height: auto;

  object-fit: contain;
}

.admin-auth-visual-copy {
  max-width: 480px;
}

.admin-auth-visual-copy .eyebrow {
  color: #ff9788;
}

.admin-auth-visual-copy h2 {
  max-width: 460px;
  margin: 14px 0 16px;

  color: #fff8f7;

  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.admin-auth-visual-copy p {
  max-width: 430px;
  margin: 0;

  color: rgba(255, 249, 245, 0.72);

  font-size: 14px;
  line-height: 1.75;
}

.admin-auth-visual-footer {
  display: flex;
  align-items: center;
  gap: 10px;

  color: rgba(255, 249, 245, 0.58);

  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.admin-auth-visual-footer::before {
  content: "";

  width: 28px;
  height: 2px;

  border-radius: 999px;
  background: var(--brand-orange);
}

/* ---------- Form side ---------- */

.admin-auth-form-shell {
  display: grid;
  place-items: center;

  min-width: 0;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px);

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(255, 83, 3, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 4% 92%,
      rgba(46, 196, 182, 0.045),
      transparent 24%
    ),
    var(--canvas-warm);
}

.admin-auth-card {
  width: min(500px, 100%);
  padding: clamp(30px, 4vw, 48px);

  border: 1px solid var(--border-warm);
  border-radius: 26px;

  background: rgba(255, 253, 251, 0.97);

  box-shadow:
    0 24px 65px rgba(58, 33, 24, 0.10);
}

.admin-auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 32px;
}

.admin-auth-brand-logo {
  width: 78px;
  height: 42px;

  object-fit: contain;
  object-position: left center;
}

.admin-auth-brand-copy {
  display: grid;
  gap: 2px;
}

.admin-auth-brand-copy strong {
  color: var(--ink-warm-strong);

  font-size: 14px;
  font-weight: 800;
}

.admin-auth-brand-copy small {
  color: var(--ink-warm-soft);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.admin-icon {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;
  margin-bottom: 24px;

  border: 1px solid rgba(255, 83, 3, 0.18);
  border-radius: 16px;

  color: var(--ink-warm);
  background: var(--orange-soft-warm);
}

.admin-auth-card .eyebrow {
  color: #c13c00;
}

.admin-auth-card h1 {
  margin: 8px 0 10px;

  color: var(--ink-warm-strong);

  font-size: clamp(34px, 4vw, 46px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.admin-auth-card > p {
  margin: 0;

  color: var(--ink-warm-soft);

  font-size: 13px;
  line-height: 1.7;
}

.admin-auth-card form {
  display: grid;
  gap: 18px;

  margin-top: 30px;
}

.admin-auth-card form > label {
  display: block;

  color: var(--ink-warm-strong);

  font-size: 12px;
  font-weight: 750;
}

.admin-auth-card form input {
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  padding: 0 15px;

  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  outline: none;

  color: var(--ink-warm-strong);
  background: #fff8f7;

  font-family: inherit;
  font-size: 14px;

  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.admin-auth-card form input:hover {
  border-color: #d9c5bb;
}

.admin-auth-card form input:focus {
  border-color: var(--brand-orange);

  background: var(--surface-warm);

  box-shadow:
    0 0 0 3px rgba(255, 83, 3, 0.13);
}

.admin-auth-card .password-field {
  position: relative;
}

.admin-auth-card .password-field input {
  padding-right: 48px;
}

.admin-auth-card .password-field button {
  position: absolute;
  top: 50%;
  right: 13px;

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  padding: 0;

  border: none;
  border-radius: 8px;

  color: #8a776d;
  background: transparent;

  transform: translateY(-35%);
}

.admin-auth-card .password-field button:hover {
  color: var(--ink-warm);
  background: var(--orange-soft-warm);
}

/* Primary admin sign-in CTA */

.admin-auth-card form button[type="submit"] {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  width: 100%;
  min-height: 50px;
  padding: 0 22px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--ink-warm);
  background: var(--brand-orange);

  font-family: inherit;
  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(255, 83, 3, 0.17);

  transition:
    background-color var(--motion-normal),
    border-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.admin-auth-card form button[type="submit"]::before {
  content: "";

  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;

  width: 30%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255, 255, 255, 0.38),
      transparent
    );

  transform: skewX(-18deg);

  transition: left 520ms ease;
}

.admin-auth-card form button[type="submit"]:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 12px 26px rgba(255, 83, 3, 0.22);

  transform: translateY(-1px);
}

.admin-auth-card form button[type="submit"]:hover:not(:disabled)::before {
  left: 120%;
}

.admin-auth-card form button[type="submit"]:active:not(:disabled) {
  transform: scale(0.985);
}

.admin-auth-card form button[type="submit"]:focus-visible {
  outline: 3px solid rgba(255, 83, 3, 0.20);
  outline-offset: 3px;
}

.admin-auth-card form button[type="submit"]:disabled {
  border-color: var(--border-warm);

  color: #9d8f87;
  background: #eee7e2;

  cursor: not-allowed;

  box-shadow: none;
  transform: none;
}

.admin-forgot-link {
  display: block;

  width: max-content;
  margin: 18px auto 0;

  color: #c13c00;

  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.admin-forgot-link:hover {
  color: var(--brand-orange-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.restricted-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 24px;
  padding: 14px 15px;

  border: 1px solid #f3d4c5;
  border-radius: 12px;

  color: #74402e;
  background: #fff3ec;

  font-size: 11px;
  line-height: 1.6;
}

.restricted-notice svg {
  flex-shrink: 0;

  color: #c13c00;
}

@media (max-width: 980px) {
  .admin-auth-page {
    grid-template-columns: 1fr;
  }

  .admin-auth-visual {
    display: none;
  }

  .admin-auth-form-shell {
    min-height: 100vh;
    padding: 28px 20px;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(255, 83, 3, 0.10),
        transparent 26%
      ),
      radial-gradient(
        circle at 0% 100%,
        rgba(46, 196, 182, 0.04),
        transparent 20%
      ),
      var(--canvas-warm);
  }
}

@media (max-width: 600px) {
  .admin-auth-form-shell {
    align-items: start;

    padding:
      24px
      16px
      calc(24px + env(safe-area-inset-bottom));
  }

  .admin-auth-card {
    padding: 26px 20px;

    border-radius: 20px;

    box-shadow:
      0 14px 40px rgba(58, 33, 24, 0.08);
  }

  .admin-auth-brand {
    margin-bottom: 26px;
  }

  .admin-icon {
    width: 52px;
    height: 52px;
  }
}

/* Dashboard */





.dashboard-sidebar .brand {
  color: #fff8f7;
}



.dashboard-sidebar nav button,
.dashboard-sidebar nav a,
.sign-out-button,
.view-website-button {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  padding: 13px;

  border: none;
  border-radius: 11px;

  color: #9fb3be;
  background: transparent;

  text-align: left;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    color 180ms ease,
    background 180ms ease;
}

.dashboard-sidebar nav button:hover,
.dashboard-sidebar nav a:hover,
.dashboard-sidebar nav button.active,
.dashboard-sidebar nav a.active,
.view-website-button:hover,
.sign-out-button:hover {
  color: #fff8f7;
  background: #12334a;
}

.dashboard-sidebar nav button.active,
.dashboard-sidebar nav a.active {
  box-shadow: inset 3px 0 #ff5303;
}



.sign-out-button {
  margin-top: 0;
}





.dashboard-content header h1 {
  margin: 5px 0;

  color: #101419;

  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.dashboard-content header p {
  margin: 0;
  color: #4c5867;
}

.dashboard-content header > span > small {
  color: #c13c00;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}



.dashboard-user strong,
.dashboard-user small {
  display: block;
}

.dashboard-user small {
  margin-top: 2px;

  color: #4c5867;

  font-size: 11px;
  text-transform: capitalize;
}

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  padding: 44px;

  border-radius: 24px;

  color: #fff8f7;
  background: #101419;

  overflow: hidden;
}

.dashboard-hero .eyebrow {
  color: #4c5867;
}

.dashboard-hero h2 {
  max-width: 720px;
  margin: 10px 0;

  color: #fff8f7;

  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.dashboard-hero p {
  margin-bottom: 0;
  color: #97aac2;
}

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

  margin-top: 20px;
}

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

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

.summary-card {
  position: relative;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.summary-card > span {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  margin-bottom: 18px;

  border-radius: 12px;

  color: #c13c00;
  background: #f8f9fb;
}

.summary-card small,
.summary-card strong {
  display: block;
}

.summary-card small {
  color: #4c5867;
}

.summary-card strong {
  margin-top: 7px;

  color: #101419;

  font-size: 20px;
}

/* Status pages */

.page-message {
  display: grid;
  place-items: center;
  align-content: center;

  min-height: 100vh;
  padding: 30px;

  color: #101419;
  background: #fff8f7;

  text-align: center;
}

.page-message > svg {
  color: #ff5303;
}

.page-message h1 {
  margin: 18px 0 8px;

  color: #101419;

  font-size: clamp(32px, 5vw, 50px);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.page-message p {
  max-width: 560px;
  margin: 6px auto;

  color: #4c5867;

  line-height: 1.7;
}

.status-icon {
  display: grid;
  place-items: center;

  width: 74px;
  height: 74px;
  margin-bottom: 24px;

  border-radius: 50%;

  color: #c13c00;
  background: #f8f9fb;
}

.loader {
  width: 38px;
  height: 38px;

  border: 4px solid #e4e8ef;
  border-top-color: #ff5303;
  border-radius: 50%;

  animation: rotate-loader 700ms linear infinite;
}

@keyframes rotate-loader {
  to {
    transform: rotate(360deg);
  }
}

/* Authentication and dashboard tablet */

@media (max-width: 950px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-message {
    display: none;
  }

  

  

  

  

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

/* Authentication and dashboard mobile */

@media (max-width: 600px) {
  .auth-panel {
    padding: 30px 20px;
  }

  .auth-brand {
    margin-bottom: 42px;
  }

  

  

  

  

  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;

    padding: 30px 23px;
  }

  .summary-grid,
  .three-columns,
  .four-columns {
    grid-template-columns: 1fr;
  }

  .form-options {
    align-items: flex-start;
    flex-direction: column;
  }
}

.admin-auth-brand {
  margin-bottom: 30px;
}

.admin-auth-brand .brand {
  width: max-content;
}

.admin-auth-brand .brand-text strong {
  color: #101419;
}

.admin-auth-brand .brand-text small {
  color: #4c5867;
}

/* Compact registration page */

.registration-panel {
  width: min(620px, 100%);
  padding-top: 32px;
  padding-bottom: 32px;
}

.registration-brand {
  margin-bottom: 26px;
}

.registration-heading h1 {
  margin-top: 7px;
  margin-bottom: 8px;
  font-size: clamp(32px, 3.4vw, 44px);
}

.registration-form {
  gap: 13px;
  margin-top: 24px;
}

.registration-role-selection {
  margin: 0;
  padding: 0;
  border: none;
}

.registration-role-selection legend {
  margin-bottom: 9px;
  color: #2f0800;
  font-size: 13px;
  font-weight: 700;
}

.registration-role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.registration-role-option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 11px 14px;
  border: 1px solid #e4e8ef;
  border-radius: 11px;
  color: #2f0800;
  background: #fff8f7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.registration-role-option:hover {
  border-color: #ff5303;
}

.registration-role-option.selected {
  border-color: #ff5303;
  background: #f8f9fb;
}

.registration-role-option input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  min-height: auto;
  margin: 0;
  accent-color: #ff5303;
}

.registration-field {
  display: block;
  color: #2f0800;
  font-size: 13px;
  font-weight: 700;
}

.registration-field > span {
  display: block;
}

.registration-field input {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 14px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  outline: none;
  color: #101419;
  background: #fff8f7;
  font-size: 13px;
  font-weight: 400;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.registration-field input::placeholder {
  color: #97aac2;
}

.registration-field input:focus {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.registration-field .password-field {
  position: relative;
}

.registration-field .password-field input {
  padding-right: 48px;
}

.registration-field .password-field button {
  position: absolute;
  right: 7px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  color: #4c5867;
  background: transparent;
  cursor: pointer;
}

.registration-field .password-field button:hover {
  color: #c13c00;
  background: #f8f9fb;
}

.registration-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 3px;
  color: #4c5867;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  cursor: pointer;
}

.registration-terms input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  min-height: auto;
  margin: 0;
  accent-color: #ff5303;
}

.registration-terms span {
  margin-top: 1px;
}

.registration-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 46px;
  padding: 0 20px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--brand-dark);
  background: var(--brand-orange);

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 6px 16px rgba(255, 83, 3, 0.14);

  transition:
    background-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.registration-submit:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 9px 20px rgba(255, 83, 3, 0.18);

  transform: translateY(-1px);
}

.registration-submit:active:not(:disabled) {
  transform: scale(0.98);
}

.registration-submit:disabled {
  border-color: var(--border-light);

  color: var(--text-muted);
  background: var(--bg-soft);

  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.registration-account-copy {
  margin-top: 17px;
}

.registration-message h2 {
  font-size: clamp(36px, 4.2vw, 58px);
}

/* Administrator authentication brand */

.admin-auth-brand {
  margin-bottom: 30px;
}

.admin-auth-brand .brand {
  width: max-content;
}

.admin-auth-brand .brand-text strong {
  color: #101419;
}

.admin-auth-brand .brand-text small {
  color: #4c5867;
}

@media (max-width: 950px) {
  .registration-panel {
    width: min(650px, 100%);
  }
}

@media (max-width: 600px) {
  .registration-panel {
    padding: 24px 18px 30px;
  }

  .registration-brand {
    margin-bottom: 24px;
  }

  .registration-role-options {
    grid-template-columns: 1fr;
  }

  .registration-role-option {
    min-height: 50px;
  }

  .registration-heading h1 {
    font-size: 34px;
  }
}

/* FINAL REGISTRATION DROPDOWN DESIGN
   Keep this section at the bottom of index.css
*/

.auth-page .registration-panel {
  width: min(540px, 100%);
  margin: auto;
  padding: 42px 50px;
}

.auth-page .registration-brand {
  margin-bottom: 34px;
}

.auth-page .registration-heading h1 {
  margin: 8px 0 10px;

  font-size: clamp(32px, 4vw, 46px);
}

.auth-page .registration-heading p {
  font-size: 13px;
}

.auth-page .registration-form {
  display: grid;
  gap: 13px;

  margin-top: 25px;
}

/* Labels */

.auth-page .registration-field {
  display: block;

  width: 100%;

  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
}

.auth-page .registration-field > span {
  display: block;
}

/* Text inputs and dropdown */

.auth-page .registration-form .registration-field input,
.auth-page .registration-form .registration-field select {
  display: block;

  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 7px 0 0 !important;
  padding: 0 14px !important;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background-color: #fff8f7;

  font-size: 13px;
  font-weight: 400;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.auth-page .registration-form .registration-field select {
  padding-right: 40px !important;

  cursor: pointer;
}

.auth-page .registration-form .registration-field input::placeholder {
  color: #97aac2;
}

.auth-page .registration-form .registration-field input:focus,
.auth-page .registration-form .registration-field select:focus {
  border-color: #ff5303;

  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.auth-page .registration-form .registration-field select:invalid {
  color: #6f8095;
}

/* Password fields */

.auth-page .registration-form .registration-field .password-field {
  position: relative;
}

.auth-page .registration-form .registration-field .password-field input {
  padding-right: 50px !important;
}

.auth-page .registration-form .registration-field .password-field button {
  position: absolute;
  right: 8px;
  bottom: 6px;

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;
  padding: 0;

  border: none;
  border-radius: 8px;

  color: #4c5867;
  background: transparent;

  cursor: pointer;
}

.auth-page .registration-form .registration-field .password-field button:hover {
  color: #c13c00;
  background: #f8f9fb;
}

/* Policy checkbox */

.auth-page .registration-form > .registration-terms {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;

  width: 100%;
  margin: 4px 0 0 !important;

  color: #4c5867;

  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.55;

  cursor: pointer;
}

.auth-page .registration-form > .registration-terms input[type="checkbox"] {
  display: block !important;
  flex: 0 0 17px !important;

  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;

  accent-color: #c13c00;
}

.auth-page .registration-form > .registration-terms span {
  display: block;

  margin: 0;
}

/* Error message */

.auth-page .registration-form .form-error {
  margin: 0;
}

/* Create account button */

.auth-page .registration-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 48px;
  padding: 0 20px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--brand-dark);
  background: var(--brand-orange);

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 6px 16px rgba(255, 83, 3, 0.14);

  transition:
    background-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.auth-page .registration-submit:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 9px 20px rgba(255, 83, 3, 0.18);

  transform: translateY(-1px);
}

.auth-page .registration-submit:active:not(:disabled) {
  transform: scale(0.98);
}

.auth-page .registration-submit:disabled {
  border-color: var(--border-light);

  color: var(--text-muted);
  background: var(--bg-soft);

  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.auth-page .registration-account-copy {
  margin-top: 17px;
}

.auth-page .registration-message h2 {
  font-size: clamp(38px, 5vw, 64px);
}

/* Tablet */

@media (max-width: 950px) {
  .auth-page .registration-panel {
    width: min(540px, 100%);
    padding: 42px 50px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .auth-page .registration-panel {
    width: 100%;
    padding: 28px 20px 32px;
  }

  .auth-page .registration-brand {
    margin-bottom: 28px;
  }

  .auth-page .registration-heading h1 {
    font-size: 34px;
  }

  .auth-page .registration-form {
    margin-top: 22px;
  }
}

/* FINAL DROPDOWN ICON ALIGNMENT */

.auth-page .registration-select-field {
  position: relative;

  width: 100%;
  margin-top: 7px;
}

.auth-page
  .registration-form
  .registration-field
  .registration-select-field
  select {
  display: block;

  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 50px 0 14px !important;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-size: 13px;
  font-weight: 400;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.auth-page
  .registration-form
  .registration-field
  .registration-select-field
  select:focus {
  border-color: #ff5303;

  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.auth-page
  .registration-form
  .registration-field
  .registration-select-field
  select:invalid {
  color: #6f8095;
}

.auth-page .registration-select-icon {
  position: absolute;
  top: 50%;
  right: 17px;

  color: #4c5867;

  pointer-events: none;

  transform: translateY(-50%);
}

/* Dashboard brand and footer */

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  padding: 0;

  border: none;

  color: #fff8f7;
  background: transparent;

  text-align: left;
  cursor: pointer;
}

.dashboard-brand-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 44px;
  height: 44px;

  border-radius: 13px;

  color: #101419;

  background: linear-gradient(145deg, #ff5303, #4c5867);
}

.dashboard-brand strong,
.dashboard-brand small {
  display: block;
}

.dashboard-brand strong {
  color: #fff8f7;

  font-size: 14px;
  font-weight: 700;
}

.dashboard-brand small {
  margin-top: 3px;

  color: #6f8095;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}



/* Dashboard action button */

.dashboard-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;

  min-height: 48px;
  padding: 0 20px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--brand-dark);
  background: var(--brand-orange);

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 6px 16px rgba(255, 83, 3, 0.14);

  transition:
    background-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.dashboard-action-button:hover {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 9px 20px rgba(255, 83, 3, 0.18);

  transform: translateY(-1px);
}

.dashboard-action-button:active {
  transform: scale(0.98);
}

/* Search field */

.dashboard-section-toolbar {
  display: flex;
  justify-content: flex-end;

  margin-bottom: 20px;
}

.dashboard-search-field {
  display: flex;
  align-items: center;
  gap: 10px;

  width: min(420px, 100%);
  min-height: 48px;
  padding: 0 14px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  color: #4c5867;
  background: #fff8f7;
}

.dashboard-search-field:focus-within {
  border-color: #ff5303;

  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.dashboard-search-field input {
  flex: 1;

  width: 100%;
  min-width: 0;
  padding: 0;

  border: none;
  outline: none;

  color: #101419;
  background: transparent;

  font-size: 13px;
}

/* Empty states */

.dashboard-empty-state {
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;
  padding: 70px 30px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;

  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;

  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  border-radius: 16px;

  color: #c13c00;
  background: #f8f9fb;
}

.dashboard-empty-state h2 {
  margin: 0 0 10px;

  color: #101419;

  font-size: 24px;
  font-weight: 600;
}

.dashboard-empty-state p {
  max-width: 470px;
  margin: 0;

  color: #4c5867;

  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .dashboard-action-button {
    width: 100%;
  }

  .dashboard-section-toolbar {
    justify-content: stretch;
  }

  .dashboard-search-field {
    width: 100%;
  }

  .dashboard-empty-state {
    padding: 50px 20px;
  }
}

/* FINAL DASHBOARD SIDEBAR */

.dashboard-sidebar .dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  padding: 0;

  color: #fff8f7;
  background: transparent;

  cursor: default;
}

.dashboard-sidebar .dashboard-brand-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  border-radius: 12px;

  color: #101419;

  background: linear-gradient(145deg, #ff5303, #4c5867);
}

.dashboard-sidebar .dashboard-brand-icon svg {
  display: block;

  width: 22px;
  height: 22px;
}

.dashboard-sidebar .dashboard-brand-text {
  display: block;
  min-width: 0;
}

.dashboard-sidebar .dashboard-brand-text strong,
.dashboard-sidebar .dashboard-brand-text small {
  display: block;
}

.dashboard-sidebar .dashboard-brand-text strong {
  color: #fff8f7;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.dashboard-sidebar .dashboard-brand-text small {
  margin-top: 4px;

  color: #6f8095;

  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
}



.become-mentor-button,
.sign-out-button {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-height: 44px;
  padding: 0 13px;

  border: none;
  border-radius: 11px;

  color: #9fb3be;
  background: transparent;

  text-align: left;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    color 180ms ease,
    background 180ms ease;
}

.become-mentor-button {
  color: #4c5867;
}

.become-mentor-button:hover,
.sign-out-button:hover {
  color: #fff8f7;
  background: #12334a;
}

/* =========================================================
   MENTOR DIRECTORY
   ========================================================= */

.dashboard-section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 24px;
}

.dashboard-search-field {
  display: flex;
  align-items: center;
  gap: 11px;

  width: min(560px, 100%);
  min-height: 50px;
  padding: 0 16px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  color: #718791;
  background: #fff8f7;
}

.dashboard-search-field:focus-within {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.dashboard-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0;

  border: none;
  outline: none;

  color: #101419;
  background: transparent;

  font-size: 13px;
}

.dashboard-search-field input::placeholder {
  color: #8fa1aa;
}

.mentor-result-count {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  font-weight: 600;
}

.dashboard-empty-state {
  display: grid;
  justify-items: center;
  align-content: center;

  min-height: 360px;
  padding: 48px 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;

  width: 62px;
  height: 62px;
  margin-bottom: 20px;

  border-radius: 17px;

  color: #c13c00;
  background: #f8f9fb;
}

.dashboard-empty-state h2 {
  margin: 0 0 9px;

  color: #101419;

  font-size: 23px;
  line-height: 1.25;
}

.dashboard-empty-state p {
  max-width: 470px;
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.7;
}

.dashboard-empty-state .primary-button,
.dashboard-empty-state .secondary-button {
  margin-top: 22px;
}

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

.mentor-directory-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentor-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mentor-card-header > div {
  min-width: 0;
}

.mentor-card-avatar {
  flex: 0 0 52px;

  width: 52px;
  height: 52px;

  border-radius: 15px;
  object-fit: cover;
}

.mentor-card-initials {
  display: grid;
  place-items: center;

  color: #101419;
  background: linear-gradient(145deg, #ff5303, #4c5867);

  font-size: 14px;
  font-weight: 800;
}

.mentor-approved-label {
  color: #c13c00;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mentor-card-header h2 {
  margin: 5px 0 3px;

  color: #101419;

  font-size: 18px;
  line-height: 1.25;
}

.mentor-card-header p {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.5;
}

.mentor-card-biography {
  display: -webkit-box;
  margin: 20px 0 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.7;

  overflow: hidden;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.mentor-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 18px;
}

.mentor-category-list span {
  padding: 6px 9px;

  border-radius: 8px;

  color: #c13c00;
  background: #f8f9fb;

  font-size: 10px;
  font-weight: 700;
}

.mentor-card-details {
  display: grid;
  gap: 10px;

  margin: 20px 0 22px;
  padding-top: 18px;

  border-top: 1px solid #e4eaec;
}

.mentor-card-details span {
  display: flex;
  align-items: center;
  gap: 9px;

  color: #4c5867;

  font-size: 11px;
  line-height: 1.5;
}

.mentor-card-details svg {
  flex-shrink: 0;
  color: #ff5303;
}

.mentor-directory-card .full-button {
  width: 100%;
  margin-top: auto;
}

.mentor-directory-card button:disabled {
  border-color: #e4e8ef;

  color: #6f8095;
  background: #e4e8ef;

  cursor: not-allowed;
}

/* Tablet */

@media (max-width: 1000px) {
  .mentor-directory-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .dashboard-section-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-search-field {
    width: 100%;
  }

  .mentor-directory-card {
    padding: 20px;
  }

  .dashboard-empty-state {
    min-height: 320px;
    padding: 40px 20px;
  }
}

/* =========================================================
   MENTOR APPLICATION
   ========================================================= */

.mentor-application-page {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  min-height: 100vh;

  background: #f5f8f7;
}

.mentor-application-panel {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 48px 56px;
}

.mentor-application-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 50px;
}

.mentor-application-brand .brand {
  color: #101419;
}

.mentor-application-brand-text strong,
.mentor-application-brand-text small {
  display: block;
}

.mentor-application-brand-text strong {
  color: #101419;
  font-size: 15px;
}

.mentor-application-brand-text small {
  margin-top: 3px;

  color: #4c5867;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.mentor-sign-out {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 12px;

  border: none;
  border-radius: 9px;

  color: #4c5867;
  background: transparent;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.mentor-sign-out:hover {
  color: #c13c00;
  background: #f8f9fb;
}

.mentor-application-content h1,
.mentor-application-status h1 {
  margin: 10px 0 10px;

  color: #101419;

  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.mentor-application-introduction {
  max-width: 560px;
  margin: 0;

  color: #4c5867;

  font-size: 14px;
  line-height: 1.7;
}

.mentor-application-form {
  display: grid;
  gap: 18px;

  margin-top: 30px;
}

.mentor-application-form label {
  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
}

.mentor-application-form input,
.mentor-application-form select,
.mentor-application-form textarea {
  display: block;

  width: 100%;
  margin-top: 7px;
  padding: 0 14px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-size: 13px;
  font-weight: 400;
}

.mentor-application-form input,
.mentor-application-form select {
  height: 48px;
}

.mentor-application-form textarea {
  min-height: 115px;
  padding-top: 13px;
  padding-bottom: 13px;

  line-height: 1.6;
  resize: vertical;
}

.mentor-application-form input:focus,
.mentor-application-form select:focus,
.mentor-application-form textarea:focus {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.optional-label {
  margin-left: 6px;

  color: #6f8095;

  font-size: 10px;
  font-weight: 500;
}

.field-help {
  display: block;
  margin-top: 5px;

  color: #6f8095;

  font-size: 10px;
  font-weight: 400;
}

.mentor-application-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  margin-top: 4px;
}

.mentor-application-message {
  position: sticky;
  top: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 100vh;
  padding: 10%;

  color: #fff8f7;
  background: #101419;
}

.mentor-application-message > svg {
  margin-bottom: 28px;
  color: #4c5867;
}

.mentor-application-message h2 {
  max-width: 600px;
  margin: 15px 0;

  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.mentor-application-message p {
  max-width: 520px;
  margin: 0;

  color: #97aac2;

  line-height: 1.75;
}

.mentor-application-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding-top: 50px;
}

.mentor-application-status > p {
  max-width: 540px;
  margin: 0;

  color: #4c5867;

  line-height: 1.7;
}

.mentor-application-status .secondary-button {
  margin-top: 24px;
}

.application-feedback,
.application-success {
  width: 100%;
  margin-top: 22px;
  padding: 15px;

  border-radius: 11px;
}

.application-feedback {
  color: #4c5867;
  background: #fff8f7;
}

.application-feedback p {
  margin: 6px 0 0;
  line-height: 1.6;
}

.application-success {
  color: #c13c00;
  background: #f8f9fb;
}

@media (max-width: 950px) {
  .mentor-application-page {
    grid-template-columns: 1fr;
  }

  .mentor-application-message {
    display: none;
  }

  .mentor-application-panel {
    padding: 40px;
  }
}

@media (max-width: 600px) {
  .mentor-application-panel {
    padding: 26px 18px 36px;
  }

  .mentor-application-brand {
    align-items: flex-start;
    margin-bottom: 38px;
  }

  .mentor-sign-out {
    padding-right: 0;
  }

  .mentor-application-content h1,
  .mentor-application-status h1 {
    font-size: 34px;
  }

  .mentor-application-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mentor-application-actions button {
    width: 100%;
  }
}

/* =========================================================
   ADMIN LISTS AND TABLES
   ========================================================= */

.admin-list-section {
  display: grid;
  gap: 20px;
}

.admin-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-list-toolbar input {
  width: min(480px, 100%);
  min-height: 48px;
  padding: 0 14px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-size: 13px;
}

.admin-list-toolbar input:focus {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.admin-list-toolbar span {
  color: #4c5867;
  font-size: 12px;
  font-weight: 600;
}

.admin-table-wrapper {
  width: 100%;

  border: 1px solid #e4e8ef;
  border-radius: 16px;

  background: #fff8f7;
  overflow-x: auto;
}

.admin-data-table {
  width: 100%;
  min-width: 850px;

  border-collapse: collapse;
}

.admin-data-table th,
.admin-data-table td {
  padding: 16px 18px;

  border-bottom: 1px solid #e4e8ef;

  text-align: left;
  vertical-align: top;
}

.admin-data-table th {
  color: #4c5867;
  background: #fff8f7;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-data-table td {
  color: #2f0800;

  font-size: 12px;
  line-height: 1.55;
}

.admin-data-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-data-table tbody tr:hover {
  background: #fffaf9;
}

.admin-data-table td strong,
.admin-data-table td small {
  display: block;
}

.admin-data-table td strong {
  color: #101419;
}

.admin-data-table td small {
  margin-top: 3px;
  color: #6f8095;
}

.admin-goal-cell {
  max-width: 260px;
}

.admin-status-badge {
  display: inline-flex;
  align-items: center;

  padding: 5px 9px;

  border-radius: 7px;

  color: #4c5867;
  background: #e4e8ef;

  font-size: 10px;
  font-weight: 700;
  text-transform: capitalize;
}

.status-active,
.status-approved,
.status-accepted {
  color: #c13c00;
  background: #f8f9fb;
}

.status-pending,
.status-clarification-requested {
  color: #8a6412;
  background: #fff6dc;
}

.status-suspended,
.status-rejected,
.status-declined {
  color: #b4233d;
  background: #fff0f2;
}

.admin-state-card {
  display: grid;
  justify-items: center;
  align-content: center;

  min-height: 350px;
  padding: 40px 24px;

  border: 1px solid #e4e8ef;
  border-radius: 17px;

  background: #fff8f7;
  text-align: center;
}

.admin-state-card h2 {
  margin: 8px 0;

  color: #101419;
  font-size: 22px;
}

.admin-state-card p {
  max-width: 480px;
  margin: 0;

  color: #4c5867;
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .admin-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-list-toolbar input {
    width: 100%;
  }
}

/* =========================================================
   ADMIN MEMBERSHIP ACTIONS
   ========================================================= */

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.admin-verify-button,
.admin-text-danger {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.admin-verify-button {
  color: #c13c00;
}

.admin-text-danger {
  color: #c2374f;
}

.admin-verify-button:hover,
.admin-text-danger:hover {
  text-decoration: underline;
}

.admin-protected-account {
  color: #6f8095;
  font-size: 10px;
  font-weight: 600;
}

.admin-success-message {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  color: #c13c00;
  background: #f8f9fb;
  font-size: 12px;
  font-weight: 600;
}

.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 18, 29, 0.65);
}

.admin-confirmation-modal {
  width: min(440px, 100%);
  padding: 28px;
  border-radius: 18px;
  background: #fff8f7;
  box-shadow: 0 25px 80px rgba(0, 8, 15, 0.3);
}

.admin-confirmation-modal h2 {
  margin: 0 0 10px;
  color: #101419;
  font-size: 24px;
  line-height: 1.2;
}

.admin-confirmation-modal > p {
  margin: 0;
  color: #4c5867;
  font-size: 13px;
  line-height: 1.65;
}

.admin-selected-person {
  margin-top: 20px;
  padding: 14px;
  border-radius: 11px;
  background: #f2f6f5;
}

.admin-selected-person strong,
.admin-selected-person small {
  display: block;
}

.admin-selected-person strong {
  color: #101419;
  font-size: 13px;
}

.admin-selected-person small {
  margin-top: 3px;
  color: #4c5867;
  font-size: 11px;
}

/* =========================================================
   ADMIN MODAL BUTTONS
   ========================================================= */

.admin-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  margin-top: 26px;
}

.admin-modal-cancel-button,
.admin-modal-confirm-button {
  min-width: 170px;

  border: 1px solid var(--brand-orange);

  color: var(--brand-dark);
  background: var(--brand-orange);

  box-shadow:
    0 7px 18px rgba(255, 83, 3, 0.18);
}

.admin-modal-confirm-button:hover {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 9px 22px rgba(255, 83, 3, 0.22);

  transform: translateY(-1px);
}

.admin-modal-confirm-button.danger {
  border-color: #c2374f;
  background: #c2374f;
  box-shadow: 0 7px 18px rgba(194, 55, 79, 0.18);
}

.admin-modal-confirm-button.danger:hover {
  border-color: #a92c42;
  background: #a92c42;
  box-shadow: 0 9px 22px rgba(194, 55, 79, 0.24);
}

.admin-modal-cancel-button:focus-visible,
.admin-modal-confirm-button:focus-visible {
  outline: 3px solid rgba(10, 168, 143, 0.2);
  outline-offset: 2px;
}

.admin-modal-cancel-button:disabled,
.admin-modal-confirm-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

@media (max-width: 600px) {
  .admin-modal-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .admin-modal-cancel-button,
  .admin-modal-confirm-button {
    width: 100%;
  }
}

.admin-danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #c2374f;
  border-radius: 11px;
  color: #fff8f7;
  background: #c2374f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-danger-button:hover {
  background: #a92c42;
}

.admin-danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (max-width: 600px) {
  .admin-row-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    white-space: normal;
  }

  .admin-confirmation-modal {
    padding: 22px;
    border-radius: 15px;
  }

  .admin-confirmation-modal h2 {
    font-size: 21px;
  }

  .admin-modal-actions {
    flex-direction: column-reverse;
  }

  .admin-modal-actions button {
    width: 100%;
  }
}

/* =========================================================
   GOOGLE REGISTRATION
   Place this block at the bottom of index.css
   ========================================================= */

.registration-account-type {
  margin-top: 22px;
}

.registration-top-error {
  margin: 14px 0 0;
}

.google-auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 20px;
  border: 1px solid #d4dee2;
  border-radius: 11px;
  color: #101419;
  background: #fff8f7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.google-auth-button:hover:not(:disabled) {
  border-color: #9eb0b7;
  background: #fff8f7;
  box-shadow: 0 5px 16px rgba(7, 27, 43, 0.08);
}

.google-auth-button:focus-visible {
  outline: 3px solid rgba(10, 168, 143, 0.18);
  outline-offset: 2px;
}

.google-auth-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.google-auth-button svg {
  flex: 0 0 19px;
}

.google-terms-copy {
  margin: 9px 0 0;
  color: #6f8095;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #6f8095;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e8ef;
}

.auth-divider span {
  flex-shrink: 0;
}

.registration-account-type + .registration-top-error + .google-auth-button,
.registration-account-type + .google-auth-button {
  margin-top: 16px;
}

.auth-divider + .registration-form {
  margin-top: 0;
}

@media (max-width: 600px) {
  .google-auth-button {
    min-height: 46px;
  }

  .auth-divider {
    gap: 9px;
  }

  .auth-divider span {
    max-width: 180px;
  }
}

/* =========================================================
   REGISTRATION PAGE FINAL OVERRIDES
   ========================================================= */

.auth-page .registration-account-type {
  width: 100%;
  margin-top: 24px;
}

.auth-page .registration-account-type .registration-field {
  display: block;
  width: 100%;
}

.auth-page .registration-account-type .registration-select-field {
  position: relative;
  width: 100%;
  margin-top: 7px;
}

.auth-page .registration-account-type .registration-select-field select {
  display: block;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 50px 0 14px;
  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;
  color: #101419;
  background-color: #fff8f7;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.auth-page
  .registration-account-type
  .registration-select-field
  select:invalid {
  color: #6f8095;
}

.auth-page .registration-account-type .registration-select-field select:focus {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.auth-page
  .registration-account-type
  .registration-select-field
  select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.auth-page .registration-account-type .registration-select-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  color: #4c5867;
  pointer-events: none;
  transform: translateY(-50%);
}

.auth-page .registration-form + .auth-divider {
  margin: 18px 0;
}

.auth-page .auth-divider + .google-auth-button {
  margin-top: 0;
}

.auth-page .google-auth-button + .google-terms-copy {
  margin-top: 9px;
}

@media (max-width: 600px) {
  .auth-page .registration-account-type {
    margin-top: 22px;
  }
}

/* =========================================================
   COMPLETE PROFILE DROPDOWN
   ========================================================= */

.auth-page .complete-profile-form .complete-profile-select-field {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.auth-page .complete-profile-form .complete-profile-select-field select {
  display: block;
  width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 0;
  padding: 0 52px 0 15px;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
  outline: none;
  color: #101419;
  background-color: #fff8f7;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.auth-page .complete-profile-form .complete-profile-select-field select:focus {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.auth-page
  .complete-profile-form
  .complete-profile-select-field
  select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.auth-page
  .complete-profile-form
  .complete-profile-select-field
  .complete-profile-select-icon {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 18px;
  height: 18px;
  color: #4c5867;
  pointer-events: none;
  transform: translateY(-50%);
}

/* =========================================================
   MEMBERSHIP PENDING SIGN-OUT BUTTON
   ========================================================= */

.page-message .membership-sign-out-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  min-height: 46px;
  margin-top: 22px;
  padding: 0 20px;
  border: 1px solid #c13c00;
  border-radius: 11px;
  color: #c13c00;
  background: #fff8f7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.page-message .membership-sign-out-button:hover {
  border-color: #c13c00;
  color: #fff8f7;
  background: #c13c00;
  box-shadow: 0 8px 20px rgba(8, 121, 103, 0.18);
  transform: translateY(-1px);
}

.page-message .membership-sign-out-button:focus-visible {
  outline: 3px solid rgba(10, 168, 143, 0.2);
  outline-offset: 2px;
}

.page-message .membership-sign-out-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* =========================================================
   TERTIARY BUTTON
   ========================================================= */

.tertiary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 18px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  color: #c13c00;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.tertiary-button:hover {
  color: #066554;
  background: #f8f9fb;
  transform: translateY(-1px);
}

.tertiary-button:focus-visible {
  outline: 3px solid rgba(10, 168, 143, 0.2);
  outline-offset: 2px;
}

.tertiary-button:active {
  transform: translateY(0);
}

/* =========================================================
   BECOME A MENTOR APPLICATION
   ========================================================= */

.mentor-application-form {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 980px;
  margin-top: 32px;
}

.mentor-application-intro,
.mentor-application-section {
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  background: #fff8f7;
}

.mentor-application-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
}

.mentor-application-intro-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: #c13c00;
  background: #f8f9fb;
}

.mentor-application-intro h2 {
  margin: 7px 0 7px;
  color: #101419;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.mentor-application-intro p,
.mentor-application-section-heading p {
  margin: 0;
  color: #4c5867;
  font-size: 13px;
  line-height: 1.65;
}

.mentor-application-section {
  padding: 24px;
}

.mentor-application-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
}

.mentor-application-section-heading > svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #c13c00;
}

.mentor-application-section-heading h3 {
  margin: 0 0 4px;
  color: #101419;
  font-size: 16px;
}

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

.mentor-application-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.mentor-application-form label,
.mentor-option-group legend {
  color: #2f0800;
  font-size: 13px;
  font-weight: 700;
}

.mentor-application-form label > small {
  color: #6f8095;
  font-size: 10px;
  font-weight: 500;
}

.mentor-application-form input[type="text"],
.mentor-application-form input[type="number"],
.mentor-application-form textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 0 14px;
  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;
  color: #101419;
  background: #fff8f7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mentor-application-form input[type="text"],
.mentor-application-form input[type="number"] {
  height: 48px;
}

.mentor-application-form textarea {
  min-height: 130px;
  padding-top: 13px;
  padding-bottom: 13px;
  resize: vertical;
}

.mentor-application-form input:focus,
.mentor-application-form textarea:focus,
.mentor-application-form select:focus {
  border-color: #ff5303;
  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.mentor-application-form input::placeholder,
.mentor-application-form textarea::placeholder {
  color: #97aac2;
}

.mentor-application-full-field {
  display: block;
  width: 100%;
  margin-top: 18px;
}

.mentor-application-full-field:first-of-type {
  margin-top: 0;
}

.mentor-application-full-field > small {
  display: block;
  margin-top: 7px;

  color: #6f8095;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.mentor-option-group {
  margin: 20px 0 0;
  padding: 0;
  border: none;
}

.mentor-option-group > p {
  margin: 5px 0 12px;
  color: #4c5867;
  font-size: 11px;
}

.mentor-option-group.compact {
  margin-top: 0;
  padding: 16px;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
}

.mentor-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mentor-checkbox-stack {
  display: grid;
  gap: 10px;
  margin-top: 11px;
}

.mentor-checkbox-grid label,
.mentor-checkbox-stack label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  color: #4c5867;
  background: #fffaf9;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.mentor-checkbox-grid input,
.mentor-checkbox-stack input {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #c13c00;
}

.mentor-application-select-field {
  position: relative;
  width: 100%;
  margin-top: 7px;
}

.mentor-application-select-field select {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 52px 0 14px;
  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;
  color: #101419;
  background: #fff8f7;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.mentor-application-select-icon {
  position: absolute;
  top: 50%;
  right: 17px;
  color: #4c5867;
  pointer-events: none;
  transform: translateY(-50%);
}

.mentor-application-review-notice {
  padding: 14px 16px;
  border: 1px solid #e4e8ef;
  border-radius: 11px;
  color: #c13c00;
  background: #f8f9fb;
  font-size: 12px;
  line-height: 1.6;
}

.mentor-application-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.mentor-application-actions .tertiary-button {
  margin-top: 0;
}

.mentor-application-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 180px;
  min-height: 46px;
  padding: 0 20px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--brand-dark);
  background: var(--brand-orange);

  font-family: inherit;
  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 6px 16px rgba(255, 83, 3, 0.14);

  transition:
    background-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.mentor-application-submit:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 9px 20px rgba(255, 83, 3, 0.18);

  transform: translateY(-1px);
}

.mentor-application-submit:active:not(:disabled) {
  transform: scale(0.98);
}

.mentor-application-submit:disabled {
  border-color: var(--border-light);

  color: var(--text-muted);
  background: var(--bg-soft);

  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

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

@media (max-width: 600px) {
  .mentor-application-form {
    margin-top: 24px;
  }

  .mentor-application-intro {
    flex-direction: column;
    padding: 20px;
  }

  .mentor-application-section {
    padding: 20px;
  }

  .mentor-application-grid.two-columns,
  .mentor-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .mentor-application-grid.two-columns {
    gap: 22px;
  }

  .mentor-application-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mentor-application-actions .tertiary-button,
  .mentor-application-submit {
    width: 100%;
  }
}


/* =========================================================
   RESPONSIVE MASTER OVERRIDES
   Keep this block at the very bottom of index.css.
   ========================================================= */

/* ---------- Global layout safety ---------- */
/*
   Keep the document in normal browser flow.
   Do not put overflow rules on html/body because that can interfere
   with mobile and tablet page scrolling.
*/






img,
svg,
video,
canvas {
  max-width: 100%;
}

.auth-page,
.dashboard-layout,
.dashboard-content,
.dashboard-content > *,
.dashboard-content > header,
.dashboard-content > header > span,
.dashboard-hero,
.dashboard-hero > *,
.summary-grid,
.summary-card,
.mentor-directory-grid,
.mentor-directory-card,
.mentor-application-form,
.mentor-application-section,
.mentor-application-intro,
.mentor-application-grid,
.mentor-application-grid > *,
.admin-list-section,
.admin-table-wrapper {
  min-width: 0;
}

/* ---------- Authentication ---------- */
/* Never vertically centre the form. Let the document grow and scroll. */
.auth-page {
  width: 100%;
  min-height: 100vh;
  height: auto;
  align-items: stretch;
}

.auth-panel,
.auth-page .registration-panel {
  align-self: start;
  width: min(560px, 100%);
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding: clamp(30px, 5vh, 48px) 36px 44px;
}

.auth-brand,
.auth-page .registration-brand {
  margin-bottom: 28px;
}

.auth-heading h1,
.auth-page .registration-heading h1 {
  margin: 8px 0 10px;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.07;
}

.auth-heading p,
.auth-page .registration-heading p {
  line-height: 1.55;
}

.auth-page form,
.auth-page .registration-form {
  gap: 16px;
  margin-top: 24px;
}

.auth-page form input,
.auth-page form select,
.auth-page form textarea {
  min-height: 48px;
  margin-top: 7px;
}

.auth-page form button[type="submit"] {
  min-height: 48px;
}

.auth-divider {
  margin: 14px 0;
}

.auth-page .google-auth-button {
  min-height: 48px;
  margin-top: 0;
}

.account-copy,
.auth-page .registration-account-copy {
  margin-top: 16px;
  padding-bottom: 4px;
}

/* Keep the two-column artwork only when there is enough room. */
@media (min-width: 1101px) {
  .auth-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);
  }

  .auth-message {
    min-height: 100vh;
  }
}

@media (max-width: 1100px) {
  .auth-page {
    display: block;
  }

  .auth-message {
    display: none;
  }

  .auth-panel,
  .auth-page .registration-panel {
    width: min(560px, 100%);
    padding: 28px 28px 38px;
  }
}

/* Short screens need a compact form even if the screen is wide. */
@media (max-height: 850px) {
  .auth-panel,
  .auth-page .registration-panel {
    padding-top: 26px;
    padding-bottom: 34px;
  }

  .auth-brand,
  .auth-page .registration-brand {
    margin-bottom: 28px;
  }

  .auth-heading h1,
  .auth-page .registration-heading h1 {
    margin-top: 10px;
    margin-bottom: 14px;

    font-size: clamp(32px, 4vw, 42px);
  }

  .auth-heading p,
  .auth-page .registration-heading p {
    line-height: 1.6;
  }

  .auth-page form,
  .auth-page .registration-form {
    gap: 17px;

    margin-top: 28px;
  }

  .auth-divider {
    margin: 16px 0;
  }

  .account-copy,
  .auth-page .registration-account-copy {
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .auth-page {
    min-height: calc(100vh + 40px);
    padding-bottom: 24px;
  }

  .auth-panel,
  .auth-page .registration-panel {
    width: 100%;
    padding: 24px 22px 38px;
  }

  .auth-brand,
  .auth-page .registration-brand {
    margin-bottom: 30px;
  }

  .auth-heading .eyebrow,
  .auth-page .registration-heading .eyebrow {
    margin-bottom: 10px;
  }

  .auth-heading h1,
  .auth-page .registration-heading h1 {
    margin: 0 0 16px;

    font-size: clamp(31px, 9vw, 39px);
    line-height: 1.08;
  }

  .auth-heading p,
  .auth-page .registration-heading p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;
  }

  .auth-page form,
  .auth-page .registration-form {
    gap: 18px;

    margin-top: 30px;
  }

  .auth-page form > label,
  .auth-page .registration-form > label {
    line-height: 1.4;
  }

  .auth-page form input,
  .auth-page form select,
  .auth-page form textarea,
  .auth-page form button[type="submit"] {
    min-height: 48px;
  }

  .auth-page form input,
  .auth-page form select,
  .auth-page form textarea {
    margin-top: 9px;
  }

  .form-options {
    align-items: center;
    flex-direction: row;

    margin-top: 1px;
  }

  .auth-page form button[type="submit"] {
    margin-top: 2px;
  }

  .auth-divider {
    margin: 18px 0;
  }

  .auth-page .google-auth-button {
    min-height: 48px;
  }

  .account-copy,
  .auth-page .registration-account-copy {
    margin-top: 17px;
    margin-bottom: 18px;
  }
}

@media (max-width: 380px) {
  .auth-panel,
  .auth-page .registration-panel {
    padding-inline: 18px;
  }

  .auth-brand,
  .auth-page .registration-brand {
    margin-bottom: 27px;
  }

  .auth-heading h1,
  .auth-page .registration-heading h1 {
    font-size: 30px;
  }

  .auth-page form,
  .auth-page .registration-form {
    gap: 17px;

    margin-top: 28px;
  }
}

/* ---------- Dashboard identity ---------- */


.dashboard-user strong,
.dashboard-user small {
  display: block;
}

.dashboard-user strong {
  min-width: 0;
  overflow: hidden;
  color: #101419;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-user small {
  flex-shrink: 0;
  margin: 0;
  padding: 5px 9px;
  border-radius: 999px;
  color: #c13c00;
  background: #f8f9fb;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: capitalize;
}

/* ---------- Dashboard responsive navigation ---------- */






@media (max-width: 1180px) {
  

  

  

  

  

  

  

  

  .dashboard-sidebar.is-open {
    transform: translateX(0);
  }

  

  

  

  

  .dashboard-sidebar nav a,
  .dashboard-sidebar nav button {
    width: 100%;
  }

  

  

  

  

  

  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    padding: clamp(28px, 4vw, 38px);
  }

  .dashboard-hero .dashboard-action-button,
  .dashboard-hero > button,
  .dashboard-hero > a {
    width: auto;
    max-width: 100%;
  }

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

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

@media (max-width: 900px) {
  

  

  

  .mentor-application-grid {
    grid-template-columns: 1fr;
  }

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

  .mentor-directory-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  

  

  

  

  

  

  

  

  .dashboard-content header h1 {
    font-size: clamp(29px, 9vw, 38px);
  }

  

  .dashboard-hero {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .dashboard-hero h2 {
    font-size: clamp(28px, 9vw, 36px);
  }

  .dashboard-hero .dashboard-action-button,
  .dashboard-hero > button,
  .dashboard-hero > a {
    width: 100%;
  }

  .summary-grid,
  .three-columns,
  .four-columns,
  .mentor-application-grid.two-columns,
  .mentor-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .summary-card,
  .mentor-directory-card,
  .mentor-application-section {
    padding: 20px;
  }
}

/* ---------- Availability preference layout ---------- */

.mentor-application-full-field + .mentor-application-grid.two-columns {
  margin-top: 22px;
}

.mentor-application-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;

  margin-bottom: 22px;
}

.mentor-option-group.compact {
  display: flex;
  flex-direction: column;

  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;

  border: none;
}

.mentor-option-group.compact legend {
  display: block;

  width: 100%;
  margin: 0 0 11px;
  padding: 0;

  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.mentor-option-group.compact .mentor-checkbox-stack {
  display: grid;
  align-content: start;
  flex: 1;
  gap: 10px;

  width: 100%;
  margin-top: 0;
  padding: 14px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #fff8f7;
}

.mentor-option-group.compact .mentor-checkbox-stack label {
  min-height: 48px;

  background: #fff8f7;
}

/* ---------- Tables ---------- */
.admin-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   MENTOR PROFILE
   ========================================================= */

.mentor-profile-page {
  display: grid;
  gap: 20px;
}

.mentor-profile-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: max-content;
  padding: 0;

  border: none;

  color: #c13c00;
  background: transparent;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.mentor-profile-back:hover {
  text-decoration: underline;
}

.mentor-profile-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;

  padding: 28px;

  border: 1px solid #e4e8ef;
  border-radius: 20px;

  background: #fff8f7;
}

.mentor-profile-identity {
  display: flex;
  align-items: flex-start;
  gap: 18px;

  min-width: 0;
}

.mentor-profile-avatar {
  flex: 0 0 76px;

  width: 76px;
  height: 76px;

  border-radius: 20px;
  object-fit: cover;
}

.mentor-profile-initials {
  display: grid;
  place-items: center;

  color: #101419;
  background: linear-gradient(145deg, #ff5303, #4c5867);

  font-size: 20px;
  font-weight: 800;
}

.mentor-profile-copy {
  min-width: 0;
}

.mentor-profile-label {
  display: inline-flex;
  align-items: center;

  margin-bottom: 7px;

  color: #c13c00;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mentor-profile-copy h2 {
  margin: 0;

  color: #101419;

  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.mentor-profile-role {
  margin: 7px 0 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

.mentor-profile-availability {
  flex: 0 0 auto;

  min-width: 190px;
  padding: 14px 16px;

  border: 1px solid #e4e8ef;
  border-radius: 13px;

  color: #c13c00;
  background: #f8f9fb;

  text-align: right;
}

.mentor-profile-availability strong,
.mentor-profile-availability small {
  display: block;
}

.mentor-profile-availability strong {
  font-size: 13px;
}

.mentor-profile-availability small {
  margin-top: 4px;

  color: #4c5867;

  font-size: 10px;
  line-height: 1.5;
}

.mentor-profile-availability.at-capacity {
  border-color: #f3d5d8;

  color: #b42335;
  background: #fff0f2;
}

.mentor-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 20px;
}

.mentor-profile-card {
  min-width: 0;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentor-profile-card h3 {
  margin: 0 0 8px;

  color: #101419;

  font-size: 17px;
  line-height: 1.3;
}

.mentor-profile-card > p {
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.75;
}

.mentor-profile-detail-list {
  display: grid;
  gap: 14px;

  margin: 0;
}

.mentor-profile-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  min-width: 0;
}

.mentor-profile-detail-row svg {
  flex: 0 0 auto;

  margin-top: 2px;

  color: #ff5303;
}

.mentor-profile-detail-row div {
  min-width: 0;
}

.mentor-profile-detail-row strong,
.mentor-profile-detail-row span {
  display: block;
}

.mentor-profile-detail-row strong {
  color: #2f0800;

  font-size: 11px;
  font-weight: 700;
}

.mentor-profile-detail-row span {
  margin-top: 3px;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.55;
}

.mentor-profile-section {
  display: grid;
  gap: 14px;
}

.mentor-profile-section + .mentor-profile-section {
  margin-top: 24px;
  padding-top: 24px;

  border-top: 1px solid #e4e8ef;
}

.mentor-profile-section-heading {
  margin: 0;

  color: #101419;

  font-size: 14px;
  font-weight: 700;
}

.mentor-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mentor-profile-tags span {
  padding: 7px 10px;

  border-radius: 9px;

  color: #c13c00;
  background: #f8f9fb;

  font-size: 10px;
  font-weight: 700;
}

.mentor-profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  padding: 20px 0 0;
}

.mentor-profile-actions .primary-button,
.mentor-profile-actions .secondary-button {
  min-width: 170px;
}

.mentor-profile-actions .primary-button:disabled {
  border-color: #e4e8ef;

  color: #6f8095;
  background: #e4e8ef;

  cursor: not-allowed;
}

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

  .mentor-profile-hero {
    flex-direction: column;
  }

  .mentor-profile-availability {
    width: 100%;
    min-width: 0;

    text-align: left;
  }
}

@media (max-width: 600px) {
  .mentor-profile-hero {
    padding: 22px;
  }

  .mentor-profile-identity {
    flex-direction: column;
    gap: 14px;
  }

  .mentor-profile-avatar {
    flex-basis: 64px;

    width: 64px;
    height: 64px;

    border-radius: 17px;
  }

  .mentor-profile-copy h2 {
    font-size: 28px;
  }

  .mentor-profile-card {
    padding: 20px;
  }

  .mentor-profile-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mentor-profile-actions .primary-button,
  .mentor-profile-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   MENTEE PROFILE
   ========================================================= */

.mentee-profile-form {
  display: grid;
  gap: 20px;

  width: 100%;
  max-width: 980px;
}

.mentee-profile-intro,
.mentee-profile-section {
  width: 100%;
  min-width: 0;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentee-profile-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;

  padding: 24px;
}

.mentee-profile-intro-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  border-radius: 13px;

  color: #c13c00;
  background: #f8f9fb;
}

.mentee-profile-intro h2 {
  margin: 7px 0 7px;

  color: #101419;

  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.mentee-profile-intro p,
.mentee-profile-section-heading p {
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

.mentee-profile-success {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0;
  padding: 13px 15px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  color: #c13c00;
  background: #f8f9fb;

  font-size: 12px;
  font-weight: 600;
}

.mentee-profile-success svg {
  flex-shrink: 0;
}

.mentee-profile-section {
  padding: 24px;
}

.mentee-profile-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin-bottom: 22px;
}

.mentee-profile-section-heading > svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #c13c00;
}

.mentee-profile-section-heading h3 {
  margin: 0 0 4px;

  color: #101419;

  font-size: 16px;
}

.mentee-profile-field {
  display: block;

  width: 100%;

  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
}

.mentee-profile-field + .mentee-profile-field {
  margin-top: 18px;
}

.mentee-profile-field small {
  color: #6f8095;

  font-size: 10px;
  font-weight: 500;
}

.mentee-profile-field textarea {
  display: block;

  width: 100%;
  min-height: 120px;
  margin-top: 7px;
  padding: 13px 14px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;

  resize: vertical;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mentee-profile-field textarea:focus {
  border-color: #ff5303;

  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.mentee-profile-field textarea::placeholder {
  color: #97aac2;
}

.mentee-profile-options {
  margin: 0 0 18px;
  padding: 0;

  border: none;
}

.mentee-profile-options legend {
  margin-bottom: 11px;

  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
}

.mentee-profile-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mentee-profile-checkbox-grid label,
.mentee-profile-agreements label {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  min-width: 0;
  padding: 12px;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #4c5867;
  background: #fffaf9;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;

  cursor: pointer;
}

.mentee-profile-checkbox-grid label:has(input:checked),
.mentee-profile-agreements label:has(input:checked) {
  border-color: #9fd9cc;

  background: #f8f9fb;
}

.mentee-profile-checkbox-grid input,
.mentee-profile-agreements input {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;
  margin: 1px 0 0;

  accent-color: #c13c00;
}

.mentee-profile-agreements {
  display: grid;
  gap: 10px;
}

.mentee-profile-actions {
  display: flex;
  justify-content: flex-end;

  padding-bottom: 10px;
}

.mentee-profile-actions .primary-button {
  min-width: 170px;
}

@media (max-width: 700px) {
  .mentee-profile-intro {
    flex-direction: column;

    padding: 20px;
  }

  .mentee-profile-section {
    padding: 20px;
  }

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

  .mentee-profile-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mentee-profile-actions .primary-button {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   DESIGN SYSTEM V1 - GLOBAL BUTTONS
   Existing primary-button / secondary-button names are kept
   so current application pages inherit the new system.
   ========================================================= */

.primary-button,
.secondary-button,
.tertiary-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 46px;
  padding: 0 18px;

  border-radius: var(--radius-md);

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}

/* PRIMARY
   Brand orange + dark text gives stronger readable contrast
   than white text on the orange brand colour.
*/

.primary-button {
  border: 1px solid var(--brand-orange);

  color: var(--brand-dark);
  background: var(--brand-orange);

  box-shadow:
    0 6px 16px rgba(255, 83, 3, 0.14);
}

.primary-button:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);

  background: var(--brand-orange-hover);

  box-shadow:
    0 9px 20px rgba(255, 83, 3, 0.18);

  transform: translateY(-1px);
}

.primary-button:active:not(:disabled) {
  transform: scale(0.98);
}

.primary-button:focus-visible {
  outline: 3px solid rgba(46, 196, 182, 0.26);
  outline-offset: 2px;
}

/* SECONDARY */

.secondary-button {
  border: 1px solid var(--border-medium);

  color: var(--text-primary);
  background: var(--bg-surface);

  box-shadow: none;
}

.secondary-button:hover:not(:disabled) {
  border-color: var(--brand-dark);

  color: var(--brand-dark);
  background: var(--bg-soft);

  transform: translateY(-1px);
}

.secondary-button:active:not(:disabled) {
  transform: scale(0.98);
}

.secondary-button:focus-visible {
  outline: 3px solid rgba(46, 196, 182, 0.22);
  outline-offset: 2px;
}

/* TERTIARY
   Use for low-emphasis actions such as View details / Learn more.
*/

.tertiary-button {
  min-height: 40px;
  padding: 0 8px;

  border: 1px solid transparent;

  color: var(--brand-dark);
  background: transparent;

  box-shadow: none;
}

.tertiary-button:hover:not(:disabled) {
  color: var(--brand-orange);
  background: var(--brand-orange-soft);
}

.tertiary-button:active:not(:disabled) {
  transform: scale(0.98);
}

.tertiary-button:focus-visible {
  outline: 3px solid rgba(46, 196, 182, 0.22);
  outline-offset: 2px;
}

/* DANGER
   Use for Sign out confirmations, Withdraw request and destructive actions.
*/

.danger-button {
  border: 1px solid #e6b8bf;

  color: var(--danger);
  background: var(--bg-surface);

  box-shadow: none;
}

.danger-button:hover:not(:disabled) {
  border-color: var(--danger);

  color: var(--danger-hover);
  background: var(--danger-soft);

  transform: translateY(-1px);
}

.danger-button:active:not(:disabled) {
  transform: scale(0.98);
}

.danger-button:focus-visible {
  outline: 3px solid rgba(180, 35, 53, 0.16);
  outline-offset: 2px;
}

/* Shared disabled treatment */

.primary-button:disabled,
.secondary-button:disabled,
.tertiary-button:disabled,
.danger-button:disabled {
  border-color: var(--border-light);

  color: var(--text-muted);
  background: var(--bg-soft);

  cursor: not-allowed;

  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* Existing utilities */

.primary-button.full-button,
.secondary-button.full-button,
.tertiary-button.full-button,
.danger-button.full-button {
  width: 100%;
}

/* Existing Mentee profile behaviour */

.mentee-profile-actions .primary-button {
  min-width: 170px;
}

@media (max-width: 600px) {
  .mentee-profile-actions .primary-button {
    width: 100%;
    min-width: 0;
  }
}

/* Respect reduced-motion preferences. */

@media (prefers-reduced-motion: reduce) {
  .hero-primary-button,
  .hero-secondary-button,
  .nav-create-account,
  .primary-button,
  .secondary-button,
  .tertiary-button,
  .danger-button {
    transition: none !important;
    transform: none !important;
  }

  .hero-primary-button::before,
  .hero-secondary-button::after {
    transition: none !important;
  }
}


/* =========================================================
   DESIGN SYSTEM V1 - OPTIONAL PRIMITIVES
   These are ready for new/refactored pages.
   ========================================================= */

.ui-card {
  padding: 24px;

  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);

  background: var(--bg-surface);

  box-shadow: var(--shadow-sm);
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;

  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  outline: none;

  color: var(--text-primary);
  background: var(--bg-surface);

  font-family: inherit;
  font-size: 13px;

  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.ui-input,
.ui-select {
  min-height: 46px;
  padding: 0 13px;
}

.ui-textarea {
  min-height: 120px;
  padding: 12px 13px;

  line-height: 1.6;
  resize: vertical;
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  border-color: var(--brand-teal);

  box-shadow:
    0 0 0 3px rgba(46, 196, 182, 0.14);
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 26px;
  padding: 0 9px;

  border-radius: var(--radius-sm);

  color: var(--brand-teal-dark);
  background: var(--brand-teal-soft);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* =========================================================
   MENTORSHIP REQUEST
   ========================================================= */

.mentorship-request-page {
  display: grid;
  gap: 20px;

  width: 100%;
  max-width: 980px;
}

.mentorship-request-mentor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentorship-request-mentor h2 {
  margin: 7px 0 5px;

  color: #101419;

  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.mentorship-request-mentor p {
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.6;
}

.mentorship-request-capacity {
  flex-shrink: 0;

  padding: 8px 11px;

  border-radius: 999px;

  color: #c13c00;
  background: #f8f9fb;

  font-size: 10px;
  font-weight: 800;
}

.mentorship-request-capacity.unavailable {
  color: #b42335;
  background: #fff0f2;
}

.mentorship-profile-required,
.mentorship-existing-request {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border-radius: 14px;
}

.mentorship-profile-required {
  border: 1px solid #f0d7a8;

  background: #fff9eb;
}

.mentorship-existing-request {
  border: 1px solid #cfe1e7;

  background: #f3f8fa;
}

.mentorship-profile-required > span,
.mentorship-existing-request > svg {
  flex-shrink: 0;

  color: #c13c00;
}

.mentorship-profile-required h3,
.mentorship-existing-request h3 {
  margin: 0;

  color: #101419;

  font-size: 14px;
}

.mentorship-profile-required p,
.mentorship-existing-request p {
  margin: 5px 0 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

.mentorship-profile-required .primary-button {
  margin-top: 14px;
}

.mentorship-request-form {
  display: grid;
  gap: 20px;
}

.mentorship-request-section {
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentorship-request-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin-bottom: 22px;
}

.mentorship-request-section-heading > svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #c13c00;
}

.mentorship-request-section-heading h3 {
  margin: 0 0 4px;

  color: #101419;

  font-size: 16px;
}

.mentorship-request-section-heading p {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

.mentorship-request-field {
  display: block;

  width: 100%;

  color: #2f0800;

  font-size: 13px;
  font-weight: 700;
}

.mentorship-request-field + .mentorship-request-field {
  margin-top: 18px;
}

.mentorship-request-field small {
  color: #6f8095;

  font-size: 10px;
  font-weight: 500;
}

.mentorship-request-field select,
.mentorship-request-field textarea {
  display: block;

  width: 100%;
  margin-top: 8px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mentorship-request-field select {
  height: 48px;
  padding: 0 14px;
}

.mentorship-request-field textarea {
  min-height: 120px;
  padding: 13px 14px;

  line-height: 1.6;

  resize: vertical;
}

.mentorship-request-field select:focus,
.mentorship-request-field textarea:focus {
  border-color: #ff5303;

  box-shadow: 0 0 0 3px rgba(10, 168, 143, 0.12);
}

.mentorship-request-field textarea::placeholder {
  color: #97aac2;
}

.mentorship-request-field select:disabled,
.mentorship-request-field textarea:disabled {
  cursor: not-allowed;

  color: #6f8095;
  background: #f4f7f7;
}

.mentorship-request-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  padding-bottom: 10px;
}

.mentorship-request-actions .primary-button,
.mentorship-request-actions .secondary-button {
  min-width: 170px;
}

.mentorship-request-success {
  width: min(720px, 100%);
  padding: 34px;

  border: 1px solid #e4e8ef;
  border-radius: 20px;

  background: #fff8f7;

  text-align: center;
}

.mentorship-request-success-icon {
  display: grid;
  place-items: center;

  width: 62px;
  height: 62px;
  margin: 0 auto 20px;

  border-radius: 18px;

  color: #c13c00;
  background: #f8f9fb;
}

.mentorship-request-success h2 {
  margin: 9px auto 10px;

  max-width: 600px;

  color: #101419;

  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.mentorship-request-success > p {
  max-width: 570px;
  margin: 0 auto;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.7;
}

.mentorship-request-success-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-top: 26px;
}

@media (max-width: 700px) {
  .mentorship-request-mentor {
    align-items: flex-start;
    flex-direction: column;

    padding: 20px;
  }

  .mentorship-request-capacity {
    align-self: flex-start;
  }

  .mentorship-request-section {
    padding: 20px;
  }

  .mentorship-request-actions,
  .mentorship-request-success-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mentorship-request-actions .primary-button,
  .mentorship-request-actions .secondary-button,
  .mentorship-request-success-actions .primary-button,
  .mentorship-request-success-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .mentorship-request-success {
    padding: 28px 20px;
  }
}

/* =========================================================
   MENTEE REQUESTS
   ========================================================= */

.mentee-requests-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 20px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentee-requests-summary h2 {
  max-width: 680px;
  margin: 8px 0 7px;

  color: #101419;

  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.mentee-requests-summary p {
  max-width: 650px;
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

.mentee-requests-count {
  flex-shrink: 0;

  padding: 7px 10px;

  border-radius: 999px;

  color: #c13c00;
  background: #f8f9fb;

  font-size: 10px;
  font-weight: 800;
}

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

.mentee-request-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentee-request-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mentee-request-mentor {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
}

.mentee-request-avatar {
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  border-radius: 13px;
  object-fit: cover;
}

.mentee-request-initials {
  display: grid;
  place-items: center;

  color: #101419;
  background:
    linear-gradient(
      145deg,
      #ff5303,
      #4c5867
    );

  font-size: 13px;
  font-weight: 800;
}

.mentee-request-mentor > div {
  min-width: 0;
}

.mentee-request-mentor small,
.mentee-request-section small,
.mentee-request-details small {
  display: block;

  color: #6f8095;

  font-size: 10px;
  font-weight: 600;
}

.mentee-request-mentor h2 {
  margin: 4px 0 0;

  overflow: hidden;

  color: #101419;

  font-size: 17px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-request-status {
  flex-shrink: 0;

  padding: 6px 9px;

  border-radius: 999px;

  color: #4c5867;
  background: #e4e8ef;

  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
}

.mentee-request-status.status-pending {
  color: #8a6412;
  background: #fff6dc;
}

.mentee-request-status.status-accepted {
  color: #c13c00;
  background: #f8f9fb;
}

.mentee-request-status.status-declined,
.mentee-request-status.status-withdrawn {
  color: #b4233d;
  background: #fff0f2;
}

.mentee-request-status.status-clarification-requested {
  color: #6d4ba0;
  background: #f4effb;
}

.mentee-request-status.status-referred {
  color: #2c5f86;
  background: #eef6fb;
}

.mentee-request-status-copy {
  margin-top: 16px;
  padding: 12px 13px;

  border-radius: 10px;

  background: #fff8f7;
}

.mentee-request-status-copy p {
  margin: 0;

  color: #4c5867;

  font-size: 11px;
  line-height: 1.6;
}

.mentee-request-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;

  margin-top: 18px;
}

.mentee-request-details > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  min-width: 0;
}

.mentee-request-details svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #ff5303;
}

.mentee-request-details strong {
  display: block;

  margin-top: 3px;

  color: #2f0800;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.mentee-request-section {
  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid #e4e8ef;
}

.mentee-request-section p {
  margin: 6px 0 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.65;
}

.mentee-request-actions {
  display: flex;
  justify-content: flex-end;

  margin-top: auto;
  padding-top: 20px;
}

.mentee-request-actions .secondary-button {
  min-width: 170px;
}

@media (max-width: 950px) {
  .mentee-requests-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .mentee-requests-summary {
    flex-direction: column;

    padding: 20px;
  }

  .mentee-request-card {
    padding: 20px;
  }

  .mentee-request-card-top {
    flex-direction: column;
  }

  .mentee-request-status {
    align-self: flex-start;
  }

  .mentee-request-details {
    grid-template-columns: 1fr;
  }

  .mentee-request-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mentee-request-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   MENTEE SESSIONS
   ========================================================= */

.mentee-sessions-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 20px;
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentee-sessions-summary h2 {
  max-width: 680px;
  margin: 8px 0 7px;

  color: #101419;

  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.mentee-sessions-summary p {
  max-width: 650px;
  margin: 0;

  color: #4c5867;

  font-size: 13px;
  line-height: 1.65;
}

.mentee-session-summary-counts {
  display: flex;
  gap: 10px;

  flex-shrink: 0;
}

.mentee-session-summary-counts span {
  display: grid;
  gap: 2px;

  min-width: 86px;
  padding: 10px 12px;

  border-radius: 12px;

  color: #4c5867;
  background: #f2f7f5;

  font-size: 10px;
  font-weight: 700;
}

.mentee-session-summary-counts strong {
  color: #c13c00;

  font-size: 18px;
}

.mentee-session-ready-list {
  display: grid;
  gap: 12px;

  margin-bottom: 20px;
}

.mentee-session-ready-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #f8f9fb;
}

.mentee-session-ready-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border-radius: 12px;

  color: #c13c00;
  background: #fff8f7;
}

.mentee-session-ready-card small {
  color: #c13c00;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.mentee-session-ready-card h3 {
  margin: 5px 0 5px;

  color: #101419;

  font-size: 15px;
}

.mentee-session-ready-card p {
  max-width: 680px;
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

.mentee-session-ready-card .secondary-button {
  margin-top: 13px;
}

.mentee-session-tabs {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  margin-bottom: 18px;
  padding: 4px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #fff8f7;
}

.mentee-session-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 40px;
  padding: 0 14px;

  border: none;
  border-radius: 9px;

  color: #4c5867;
  background: transparent;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.mentee-session-tabs button span {
  display: grid;
  place-items: center;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  border-radius: 999px;

  background: #e4e8ef;

  font-size: 9px;
}

.mentee-session-tabs button.active {
  color: #fff8f7;
  background: #c13c00;
}

.mentee-session-tabs button.active span {
  color: #c13c00;
  background: #fff8f7;
}

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

.mentee-session-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentee-session-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.mentee-session-mentor {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
}

.mentee-session-avatar {
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  border-radius: 13px;
  object-fit: cover;
}

.mentee-session-initials {
  display: grid;
  place-items: center;

  color: #101419;
  background:
    linear-gradient(
      145deg,
      #ff5303,
      #4c5867
    );

  font-size: 13px;
  font-weight: 800;
}

.mentee-session-mentor > div {
  min-width: 0;
}

.mentee-session-mentor small {
  color: #6f8095;

  font-size: 10px;
  font-weight: 600;
}

.mentee-session-mentor h2 {
  margin: 4px 0 0;

  overflow: hidden;

  color: #101419;

  font-size: 17px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-session-status {
  flex-shrink: 0;

  padding: 6px 9px;

  border-radius: 999px;

  color: #c13c00;
  background: #f8f9fb;

  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
}

.mentee-session-status.status-cancelled,
.mentee-session-status.status-no-show {
  color: #b42335;
  background: #fff0f2;
}

.mentee-session-status.status-reschedule-requested {
  color: #8a6412;
  background: #fff6dc;
}

.mentee-session-status.status-completed {
  color: #2c5f86;
  background: #eef6fb;
}

.mentee-session-date {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin-top: 20px;
  padding: 15px;

  border-radius: 12px;

  background: #fff8f7;
}

.mentee-session-date > svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #c13c00;
}

.mentee-session-date strong,
.mentee-session-date span {
  display: block;
}

.mentee-session-date strong {
  color: #101419;

  font-size: 13px;
}

.mentee-session-date span {
  margin-top: 4px;

  color: #4c5867;

  font-size: 11px;
}

.mentee-session-information {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;

  margin-top: 16px;
}

.mentee-session-information > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  min-width: 0;
}

.mentee-session-information svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #ff5303;
}

.mentee-session-information small,
.mentee-session-topic small {
  display: block;

  color: #6f8095;

  font-size: 10px;
  font-weight: 600;
}

.mentee-session-information strong {
  display: block;

  margin-top: 3px;

  color: #2f0800;

  font-size: 11px;
}

.mentee-session-topic {
  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid #e4e8ef;
}

.mentee-session-topic p {
  margin: 6px 0 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.6;
}

.mentee-session-location {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  margin-top: 14px;
  padding: 12px;

  border-radius: 10px;

  color: #4c5867;
  background: #fff8f7;
}

.mentee-session-location svg {
  flex-shrink: 0;

  margin-top: 2px;

  color: #c13c00;
}

.mentee-session-location p {
  margin: 0;

  font-size: 11px;
  line-height: 1.6;
}

.mentee-session-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  margin-top: auto;
  padding-top: 20px;
}

.mentee-session-actions .primary-button,
.mentee-session-actions .secondary-button {
  min-width: 145px;
}

@media (max-width: 950px) {
  .mentee-session-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .mentee-sessions-summary {
    flex-direction: column;

    padding: 20px;
  }

  .mentee-session-summary-counts {
    width: 100%;
  }

  .mentee-session-summary-counts span {
    flex: 1;
  }

  .mentee-session-tabs {
    display: flex;

    width: 100%;
  }

  .mentee-session-tabs button {
    flex: 1;
  }

  .mentee-session-ready-card {
    padding: 16px;
  }

  .mentee-session-card {
    padding: 20px;
  }

  .mentee-session-card-header {
    flex-direction: column;
  }

  .mentee-session-status {
    align-self: flex-start;
  }

  .mentee-session-information {
    grid-template-columns: 1fr;
  }

  .mentee-session-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mentee-session-actions .primary-button,
  .mentee-session-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   MENTEE MESSAGES
   ========================================================= */

.mentee-messages-layout {
  display: grid;
  grid-template-columns:
    minmax(230px, 280px)
    minmax(0, 1fr);

  min-height: 600px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  overflow: hidden;

  background: #fff8f7;
}

.mentee-message-threads {
  min-width: 0;

  border-right: 1px solid #e4e8ef;

  background: #fff8f7;
}

.mentee-message-threads-heading {
  padding: 20px;

  border-bottom: 1px solid #e4e8ef;
}

.mentee-message-threads-heading h2 {
  margin: 7px 0 0;

  color: #101419;

  font-size: 18px;
}

.mentee-message-thread-list {
  display: grid;
}

.mentee-message-thread {
  display: flex;
  align-items: center;
  gap: 11px;

  width: 100%;
  padding: 14px 16px;

  border: none;
  border-bottom: 1px solid #e8edef;

  color: inherit;
  background: transparent;

  font-family: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.mentee-message-thread:hover {
  background: #eef6f3;
}

.mentee-message-thread.active {
  background: #f8f9fb;
}

.mentee-message-thread-avatar {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  border-radius: 12px;

  object-fit: cover;
}

.mentee-message-thread-initials {
  display: grid;
  place-items: center;

  color: #101419;
  background:
    linear-gradient(
      145deg,
      #ff5303,
      #4c5867
    );

  font-size: 12px;
  font-weight: 800;
}

.mentee-message-thread-copy {
  display: grid;
  gap: 4px;

  min-width: 0;
}

.mentee-message-thread-copy strong {
  overflow: hidden;

  color: #101419;

  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-message-thread-copy small {
  overflow: hidden;

  color: #6f8095;

  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-message-conversation {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 600px;
}

.mentee-message-conversation-header {
  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 82px;
  padding: 16px 20px;

  border-bottom: 1px solid #e4e8ef;

  background: #fff8f7;
}

.mentee-message-conversation-header small {
  color: #c13c00;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.mentee-message-conversation-header h2 {
  margin: 3px 0 2px;

  color: #101419;

  font-size: 16px;
}

.mentee-message-conversation-header p {
  margin: 0;

  color: #6f8095;

  font-size: 10px;
}

.mentee-message-mobile-back {
  display: none;

  width: 38px;
  height: 38px;

  border: 1px solid #e4e8ef;
  border-radius: 10px;

  color: #2f0800;
  background: #fff8f7;

  cursor: pointer;
}

.mentee-message-history {
  flex: 1;

  min-height: 0;
  padding: 22px;

  overflow-y: auto;

  background: #fff8f7;
}

.mentee-message-loading,
.mentee-message-start {
  display: grid;
  place-items: center;

  min-height: 330px;

  text-align: center;
}

.mentee-message-start {
  align-content: center;
}

.mentee-message-start > span {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom: 13px;

  border-radius: 15px;

  color: #c13c00;
  background: #f8f9fb;
}

.mentee-message-start h3 {
  margin: 0;

  color: #101419;

  font-size: 16px;
}

.mentee-message-start p,
.mentee-message-loading p {
  max-width: 350px;
  margin: 6px 0 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.6;
}

.mentee-message-row {
  display: flex;

  margin-bottom: 12px;
}

.mentee-message-row.mine {
  justify-content: flex-end;
}

.mentee-message-row.theirs {
  justify-content: flex-start;
}

.mentee-message-bubble {
  max-width: min(72%, 520px);
  padding: 10px 12px 7px;

  border-radius: 14px;
}

.mentee-message-row.mine
  .mentee-message-bubble {
  border-bottom-right-radius: 4px;

  color: #fff8f7;
  background: #c13c00;
}

.mentee-message-row.theirs
  .mentee-message-bubble {
  border: 1px solid #e0e7e8;
  border-bottom-left-radius: 4px;

  color: #2f0800;
  background: #fff8f7;
}

.mentee-message-bubble p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mentee-message-bubble small {
  display: block;

  margin-top: 5px;

  font-size: 8px;
  opacity: 0.72;
  text-align: right;
}

.mentee-message-error {
  margin:
    0 18px 10px;
}

.mentee-message-composer {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;

  padding: 14px 16px;

  border-top: 1px solid #e4e8ef;

  background: #fff8f7;
}

.mentee-message-composer textarea {
  width: 100%;
  min-height: 46px;
  max-height: 120px;
  padding: 11px 12px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;

  resize: vertical;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mentee-message-composer textarea:focus {
  border-color: #ff5303;

  box-shadow:
    0 0 0 3px
    rgba(10, 168, 143, 0.12);
}

.mentee-message-composer textarea::placeholder {
  color: #97aac2;
}

.mentee-message-composer .primary-button {
  min-width: 100px;
}

@media (max-width: 760px) {
  .mentee-messages-layout {
    display: block;

    min-height: 560px;
  }

  .mentee-message-threads {
    border-right: none;
  }

  .mentee-message-threads.has-selected-thread {
    display: none;
  }

  .mentee-message-conversation {
    min-height: 560px;
  }

  .mentee-message-mobile-back {
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .mentee-message-history {
    padding: 18px 14px;
  }

  .mentee-message-bubble {
    max-width: 86%;
  }

  .mentee-message-composer {
    grid-template-columns: 1fr;
  }

  .mentee-message-composer
    .primary-button {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   MENTOR SEARCH CLEAR BUTTON
   ========================================================= */

.mentor-search-clear {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;

  width: 30px;
  height: 30px;
  padding: 0;

  border: none;
  border-radius: 8px;

  color: #c13c00;
  background: transparent;

  font-family: inherit;

  cursor: pointer;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.mentor-search-clear:hover {
  color: #066554;
  background: #f8f9fb;
}

.mentor-search-clear:active {
  transform: scale(0.94);
}

.mentor-search-clear:focus-visible {
  outline: 2px solid rgba(10, 168, 143, 0.28);
  outline-offset: 2px;
}

.mentor-search-clear svg {
  width: 16px;
  height: 16px;

  stroke-width: 2.2;
}

/* Keep the search field visually balanced */

.dashboard-search-field {
  display: flex;
  align-items: center;
}

.dashboard-search-field input {
  min-width: 0;
}

.dashboard-search-field .mentor-search-clear {
  margin-left: 6px;
}

/* =========================================================
   MENTEE OVERVIEW
   ========================================================= */

.mentee-overview-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
  padding: 32px;
  border-radius: 22px;
  color: #fff8f7;
  background:
    linear-gradient(
      135deg,
      #101419 0%,
      #0d3540 58%,
      #c13c00 100%
    );
}

.mentee-overview-hero-copy {
  max-width: 680px;
}

.mentee-overview-hero .eyebrow {
  color: #4c5867;
}

.mentee-overview-hero h2 {
  margin: 8px 0 10px;
  color: #fff8f7;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.mentee-overview-hero p {
  max-width: 610px;
  margin: 0;
  color: #c3d2d7;
  font-size: 13px;
  line-height: 1.7;
}

.mentee-overview-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.mentee-overview-hero .secondary-button {
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff8f7;
  background: transparent;
}

.mentee-overview-hero
  .secondary-button:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff8f7;
  background: rgba(255, 255, 255, 0.08);
}

.mentee-overview-hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  color: #4c5867;
  background: rgba(255, 255, 255, 0.06);
}

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

.mentee-overview-stat-card {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  padding: 17px;
  border: 1px solid #e4e8ef;
  border-radius: 15px;
  color: inherit;
  background: #fff8f7;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.mentee-overview-stat-card:hover {
  border-color: #b9d8d1;
  box-shadow:
    0 8px 22px
    rgba(7, 27, 43, 0.06);
  transform: translateY(-1px);
}

.mentee-overview-stat-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: #c13c00;
  background: #f8f9fb;
}

.mentee-overview-stat-copy {
  display: grid;
  min-width: 0;
}

.mentee-overview-stat-copy small {
  color: #6f8095;
  font-size: 9px;
  font-weight: 700;
}

.mentee-overview-stat-copy strong {
  margin-top: 3px;
  overflow: hidden;
  color: #101419;
  font-size: 19px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-overview-stat-copy > span {
  margin-top: 4px;
  overflow: hidden;
  color: #6f8095;
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-overview-stat-arrow {
  color: #97aac2;
}

.mentee-overview-main-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(260px, 0.75fr);
  gap: 18px;
  margin-bottom: 20px;
}

.mentee-overview-panel,
.mentee-overview-safety,
.mentee-overview-recommendations {
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  background: #fff8f7;
}

.mentee-overview-panel {
  padding: 24px;
}

.mentee-overview-panel-heading h3,
.mentee-overview-section-heading h3,
.mentee-overview-safety h3 {
  margin: 6px 0 0;
  color: #101419;
  font-size: 18px;
  line-height: 1.3;
}

.mentee-overview-journey-state {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 18px;
  border-radius: 14px;
  background: #f6f9f8;
}

.mentee-overview-journey-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #c13c00;
  background: #fff8f7;
}

.mentee-overview-journey-state h4 {
  margin: 0;
  color: #101419;
  font-size: 14px;
}

.mentee-overview-journey-state p {
  max-width: 650px;
  margin: 6px 0 0;
  color: #4c5867;
  font-size: 11px;
  line-height: 1.65;
}

.mentee-overview-journey-state
  .primary-button {
  margin-top: 14px;
}

.mentee-overview-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.mentee-overview-progress > span {
  display: block;
  width: min(280px, 100%);
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe9e6;
}

.mentee-overview-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ff5303;
}

.mentee-overview-progress small {
  flex-shrink: 0;
  color: #4c5867;
  font-size: 9px;
  font-weight: 700;
}

.mentee-overview-safety {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  background: #fffaf0;
}

.mentee-overview-safety-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #a36b00;
  background: #fff0c5;
}

.mentee-overview-safety p {
  margin: 7px 0 0;
  color: #77684d;
  font-size: 11px;
  line-height: 1.65;
}

.mentee-overview-recommendations {
  padding: 24px;
}

.mentee-overview-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.mentee-overview-section-heading p {
  margin: 5px 0 0;
  color: #6f8095;
  font-size: 11px;
  line-height: 1.6;
}

.mentee-overview-text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  color: #c13c00;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.mentee-overview-text-button:hover {
  color: #2d353f;
}

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

.mentee-overview-mentor-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #e0e7e8;
  border-radius: 14px;
  background: #fffaf9;
}

.mentee-overview-mentor-header {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.mentee-overview-mentor-header img,
.mentee-overview-mentor-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.mentee-overview-mentor-header img {
  object-fit: cover;
}

.mentee-overview-mentor-avatar {
  display: grid;
  place-items: center;
  color: #101419;
  background:
    linear-gradient(
      145deg,
      #ff5303,
      #4c5867
    );
  font-size: 11px;
  font-weight: 800;
}

.mentee-overview-mentor-header > div {
  min-width: 0;
}

.mentee-overview-mentor-header small {
  display: block;
  overflow: hidden;
  color: #c13c00;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-overview-mentor-header h4 {
  margin: 4px 0 2px;
  overflow: hidden;
  color: #101419;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-overview-mentor-header p {
  margin: 0;
  overflow: hidden;
  color: #6f8095;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentee-overview-mentor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  margin-top: 14px;
}

.mentee-overview-mentor-tags span {
  padding: 5px 7px;
  border-radius: 999px;
  color: #4c5867;
  background: #edf3f1;
  font-size: 8px;
  font-weight: 700;
}

.mentee-overview-mentor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #e6ecee;
}

.mentee-overview-mentor-footer > span {
  color: #6f8095;
  font-size: 8px;
  font-weight: 600;
}

.mentee-overview-mentor-footer button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  color: #c13c00;
  background: transparent;
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.mentee-overview-inline-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: 13px;
  color: #c13c00;
  background: #f5f9f8;
}

.mentee-overview-inline-empty h4 {
  margin: 0;
  color: #101419;
  font-size: 13px;
}

.mentee-overview-inline-empty p {
  margin: 4px 0 0;
  color: #6f8095;
  font-size: 10px;
}

@media (max-width: 1100px) {
  .mentee-overview-stat-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .mentee-overview-main-grid {
    grid-template-columns: 1fr;
  }

  .mentee-overview-hero {
    align-items: flex-start;
  }

  .mentee-overview-hero-icon {
    flex-basis: 78px;
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 620px) {
  .mentee-overview-hero {
    flex-direction: column;
    padding: 24px 20px;
  }

  .mentee-overview-hero-icon {
    display: none;
  }

  .mentee-overview-hero-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .mentee-overview-hero-actions
    .primary-button,
  .mentee-overview-hero-actions
    .secondary-button {
    width: 100%;
  }

  .mentee-overview-stat-grid,
  .mentee-overview-mentor-grid {
    grid-template-columns: 1fr;
  }

  .mentee-overview-panel,
  .mentee-overview-safety,
  .mentee-overview-recommendations {
    padding: 20px;
  }

  .mentee-overview-section-heading {
    flex-direction: column;
  }

  .mentee-overview-journey-state {
    flex-direction: column;
  }

  .mentee-overview-journey-state
    .primary-button {
    width: 100%;
  }
}


/* =========================================================
   MENTEE SESSIONS — CLEAN RESPONSIVE ENHANCEMENTS
   ========================================================= */

/*
   Scroll contract:
   the browser/document owns vertical scrolling.
   No dashboard wrapper is allowed to clip page content.
*/











/* Top summary stays simple. Counts remain only in the tabs. */

.mentee-sessions-summary {
  display: block;
}

/* Session + calendar desktop workspace. */

.mentee-session-workspace {
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(310px, 0.72fr);
  align-items: stretch;
  gap: 18px;

  width: 100%;
  min-width: 0;
}

.mentee-session-main-column {
  display: flex;
  min-width: 0;
}

.mentee-session-main-column
  > .mentee-session-empty-state {
  width: 100%;
  min-height: 420px;
}

.mentee-session-main-column
  > .mentee-session-grid {
  width: 100%;
}

.mentee-session-workspace
  .mentee-session-grid {
  grid-template-columns: 1fr;
}

/* Right calendar card */

.mentee-session-calendar-panel {
  position: relative;

  min-width: 0;
  min-height: 420px;
  height: 100%;
  margin: 0;
  padding: 22px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  overflow: visible;

  background: #fff8f7;
}

.mentee-session-calendar-heading h3 {
  margin: 6px 0 4px;

  color: #101419;

  font-size: 17px;
  line-height: 1.3;
}

.mentee-session-calendar-heading p {
  margin: 0;

  color: #6f8095;

  font-size: 11px;
  line-height: 1.6;
}

/* Custom date field */

.mentee-custom-date-field-wrap {
  position: relative;

  margin-top: 18px;
}

.mentee-custom-date-label {
  display: block;

  margin-bottom: 7px;

  color: #2f0800;

  font-size: 11px;
  font-weight: 700;
}

.mentee-custom-date-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  height: 46px;
  padding: 0 13px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  color: #101419;
  background: #fff8f7;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;

  cursor: pointer;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.mentee-custom-date-field:hover {
  border-color: #c9d2df;
  background: #fffaf9;
}

.mentee-custom-date-field:focus-visible {
  outline: none;

  border-color: #ff5303;

  box-shadow:
    0 0 0 3px
    rgba(10, 168, 143, 0.12);
}

.mentee-custom-date-field svg {
  flex-shrink: 0;

  color: #c13c00;
}

.mentee-session-today-button {
  width: 100%;
  margin-top: 10px;
}

/* Custom calendar popover — desktop */

.mentee-custom-calendar {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 60;

  width: 100%;
  padding: 14px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #fff8f7;

  box-shadow:
    0 18px 44px
    rgba(7, 27, 43, 0.14);
}

.mentee-custom-calendar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 7px;
  padding-bottom: 8px;

  border-bottom: 1px solid #e4e8ef;
}

.mentee-custom-calendar-topbar > span {
  color: #6f8095;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mentee-custom-calendar-close {
  display: grid;
  place-items: center;
  flex: 0 0 30px;

  width: 30px;
  height: 30px;
  padding: 0;

  border: none;
  border-radius: 8px;

  color: #c13c00;
  background: transparent;

  cursor: pointer;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.mentee-custom-calendar-close:hover {
  color: #2d353f;
  background: #f8f9fb;
}

.mentee-custom-calendar-close:active {
  transform: scale(0.94);
}

.mentee-custom-calendar-close:focus-visible {
  outline: 2px solid rgba(10, 168, 143, 0.3);
  outline-offset: 2px;
}

.mentee-custom-calendar-header {
  display: grid;
  grid-template-columns:
    34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;

  margin-bottom: 12px;
}

.mentee-custom-calendar-header strong {
  color: #101419;

  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.mentee-custom-calendar-header button {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;
  padding: 0;

  border: none;
  border-radius: 9px;

  color: #c13c00;
  background: transparent;

  cursor: pointer;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.mentee-custom-calendar-header button:hover {
  color: #2d353f;
  background: #f8f9fb;
}

.mentee-custom-calendar-header button:active {
  transform: scale(0.95);
}

.mentee-custom-calendar-weekdays,
.mentee-custom-calendar-grid {
  display: grid;
  grid-template-columns:
    repeat(7, minmax(0, 1fr));
}

.mentee-custom-calendar-weekdays {
  margin-bottom: 4px;
}

.mentee-custom-calendar-weekdays span {
  display: grid;
  place-items: center;

  min-height: 28px;

  color: #6f8095;

  font-size: 9px;
  font-weight: 800;
}

.mentee-custom-calendar-grid {
  gap: 2px;
}

.mentee-custom-calendar-empty-day {
  aspect-ratio: 1 / 1;
}

.mentee-custom-calendar-day {
  position: relative;

  display: grid;
  place-items: center;

  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;

  border: 1px solid transparent;
  border-radius: 9px;

  color: #2f0800;
  background: transparent;

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.mentee-custom-calendar-day:hover {
  color: #c13c00;
  background: #eef8f5;
}

.mentee-custom-calendar-day.today:not(.selected) {
  border-color: #ff5303;
  color: #c13c00;
}

.mentee-custom-calendar-day.selected {
  border-color: #c13c00;

  color: #fff8f7;
  background: #c13c00;
}

.mentee-custom-calendar-day:active {
  transform: scale(0.95);
}

.mentee-custom-calendar-day i {
  position: absolute;
  right: 50%;
  bottom: 4px;

  width: 4px;
  height: 4px;

  border-radius: 999px;

  background: #ff5303;

  transform: translateX(50%);
}

.mentee-custom-calendar-day.selected i {
  background: #fff8f7;
}

/* Selected date and date results */

.mentee-session-selected-date {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 16px;
  padding: 13px 14px;

  border-radius: 12px;

  color: #c13c00;
  background: #f5f9f8;
}

.mentee-session-selected-date div {
  display: grid;
  gap: 2px;
}

.mentee-session-selected-date small {
  color: #6f8095;

  font-size: 9px;
  font-weight: 700;
}

.mentee-session-selected-date strong {
  color: #101419;

  font-size: 12px;
}

.mentee-session-calendar-empty {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin-top: 14px;
  padding: 16px;

  border: 1px dashed #d7e2e3;
  border-radius: 12px;

  color: #c13c00;
  background: #fffaf9;
}

.mentee-session-calendar-empty h4 {
  margin: 0;

  color: #101419;

  font-size: 12px;
}

.mentee-session-calendar-empty p {
  margin: 4px 0 0;

  color: #6f8095;

  font-size: 10px;
  line-height: 1.5;
}

.mentee-session-calendar-results {
  display: grid;
  gap: 9px;

  margin-top: 14px;
}

.mentee-session-calendar-result {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;

  padding: 13px 14px;

  border: 1px solid #e4e8ef;
  border-radius: 12px;

  background: #fffaf9;
}

.mentee-session-calendar-time {
  min-width: 74px;

  color: #c13c00;

  font-size: 11px;
  font-weight: 800;
}

.mentee-session-calendar-result strong {
  display: block;

  color: #101419;

  font-size: 11px;
}

.mentee-session-calendar-result p {
  margin: 3px 0 0;

  color: #6f8095;

  font-size: 9px;
}

.mentee-session-calendar-format {
  padding: 5px 8px;

  border-radius: 999px;

  color: #4c5867;
  background: #edf3f1;

  font-size: 8px;
  font-weight: 700;
}

/* Better date presentation inside actual session cards. */

.mentee-session-date {
  align-items: center;
}

.mentee-session-date-badge {
  display: grid;
  place-items: center;
  flex: 0 0 58px;

  width: 58px;
  min-height: 58px;

  border-radius: 13px;

  color: #fff8f7;
  background: #c13c00;
}

.mentee-session-date-badge span {
  margin: 0;

  color: #fff8f7;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.mentee-session-date-badge strong {
  margin: 1px 0 0;

  color: #fff8f7;

  font-size: 20px;
  line-height: 1;
}

.mentee-session-date-copy {
  display: grid;
  gap: 3px;

  min-width: 0;
}

.mentee-session-date-copy strong {
  color: #101419;

  font-size: 12px;
}

.mentee-session-date-copy span {
  margin: 0;

  color: #4c5867;

  font-size: 11px;
}

.mentee-session-date-copy small {
  color: #8b9da4;

  font-size: 9px;
}

/*
   Tablet and mobile:
   stack the cards and let the calendar become normal page content.
   The open calendar therefore contributes to page height and can
   always be reached by scrolling.
*/

@media (max-width: 1180px) {
  

  .mentee-session-workspace {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mentee-session-main-column {
    display: block;

    width: 100%;
  }

  .mentee-session-main-column
    > .mentee-session-empty-state {
    min-height: 360px;
  }

  .mentee-session-calendar-panel {
    width: 100%;
    min-height: 0;
    height: auto;

    overflow: visible;
  }

  .mentee-custom-calendar {
    position: static;

    width: 100%;
    margin-top: 8px;

    box-shadow:
      0 10px 28px
      rgba(7, 27, 43, 0.08);
  }
}

@media (max-width: 700px) {
  .mentee-session-main-column
    > .mentee-session-empty-state {
    min-height: 320px;
  }

  .mentee-session-calendar-panel {
    padding: 20px;
  }

  .mentee-session-calendar-result {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mentee-session-calendar-time {
    min-width: 0;
  }

  .mentee-session-calendar-format {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  

  .mentee-custom-calendar {
    padding: 12px;
  }

  .mentee-custom-calendar-header strong {
    font-size: 12px;
  }

  .mentee-custom-calendar-day {
    font-size: 10px;
  }
}

/* =========================================================
   RELIABLE TABLET / MOBILE DASHBOARD SCROLL
   ========================================================= */

/*
   Desktop keeps normal page flow.

   Tablet/mobile use one dedicated scroll surface:
   .dashboard-content.

   The mobile header stays outside that scroll area,
   so it remains visible while the content below it scrolls.
*/

@media (max-width: 1180px) {
  

  

  

  

  

  

  /*
     My Sessions stacks cleanly on tablet/mobile.
     Every section stays inside the scrollable dashboard content.
  */

  .mentee-session-workspace {
    display: grid;
    grid-template-columns: 1fr !important;
    align-items: start;
    gap: 18px;

    width: 100%;
    height: auto !important;
    max-height: none !important;
  }

  .mentee-session-main-column,
  .mentee-session-calendar-panel {
    width: 100%;

    height: auto !important;
    min-height: 0;
    max-height: none !important;

    overflow: visible !important;
  }

  .mentee-session-main-column {
    display: block;
  }

  .mentee-session-main-column
    > .mentee-session-empty-state {
    width: 100%;

    height: auto !important;
    min-height: 360px;
    max-height: none !important;
  }

  .mentee-session-calendar-panel {
    position: relative;
    top: auto;

    margin-bottom: 24px;
  }

  /*
     Open calendar becomes part of the content flow on
     tablet/mobile. It therefore increases scrollHeight
     and can always be reached completely.
  */

  .mentee-custom-calendar {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin-top: 8px !important;

    overflow: visible !important;

    transform: none !important;

    box-shadow:
      0 10px 28px
      rgba(7, 27, 43, 0.08) !important;
  }
}

@media (max-width: 700px) {
  

  .mentee-session-tabs {
    display: flex;
    width: 100%;
  }

  .mentee-session-tabs button {
    flex: 1;
  }

  .mentee-session-main-column
    > .mentee-session-empty-state {
    min-height: 320px;
  }
}

/* =========================================================
   DASHBOARD RESPONSIVE SYSTEM
   One natural document scroll from top to bottom.
   ========================================================= */

html {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  height: auto;

  overflow-x: auto;
  overflow-y: auto;
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  height: auto;
  max-height: none;
  margin: 0;

  overflow-x: auto;
  overflow-y: auto;

  font-family: "Inter", Arial, sans-serif;
}

#root {
  width: 100%;
  min-height: 100vh;
  height: auto;
  max-height: none;

  overflow: visible;
}

/* ---------- Desktop ---------- */

.dashboard-layout {
  display: grid;
  grid-template-columns:
    260px minmax(0, 1fr);

  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;

  color: #101419;
  background: #fff8f7;

  overflow: visible;
}

.dashboard-mobile-header,
.dashboard-menu-button,
.dashboard-menu-close,
.dashboard-menu-overlay {
  display: none;
}

.dashboard-sidebar {
  position: sticky;
  top: 0;
  align-self: start;

  display: flex;
  flex-direction: column;

  width: 260px;
  height: 100vh;
  min-height: 0;
  padding: 28px 20px;

  color: #fff8f7;
  background: #101419;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dashboard-sidebar-top {
  display: block;
  flex: 0 0 auto;
}

.dashboard-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 5px;

  width: 100%;
  margin-top: 34px;
}

.dashboard-sidebar-footer {
  display: grid;
  gap: 8px;

  width: 100%;
  margin-top: 28px;
  padding-top: 18px;
  padding-bottom:
    max(
      14px,
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.dashboard-content {
  display: block;

  width: 100%;
  max-width: 1400px;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;

  margin: 0 auto;
  padding: 24px 40px;

  overflow: visible;
}

.dashboard-content > * {
  min-width: 0;
  max-width: 100%;
}

.dashboard-content > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  width: 100%;
  height: auto;
  min-height: 0;
  margin-bottom: 22px;
}

.dashboard-content > header > span {
  flex: 1 1 auto;

  min-width: 0;
}

.dashboard-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;

  width: auto;
  max-width: 100%;
  min-width: 0;
  height: max-content;
  padding: 9px 11px 9px 14px;

  border: 1px solid #e4e8ef;
  border-radius: 999px;

  background: #fff8f7;
}

/* ---------- Smaller desktop / laptop ---------- */

@media (min-width: 1181px) and (max-width: 1366px) {
  .dashboard-content {
    padding: 24px 40px;
  }
}

/* ---------- Tablets and phones ---------- */

@media (max-width: 1180px) {
  .dashboard-layout {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;

    overflow: visible;
  }

  /*
    Sticky instead of fixed:
    it stays visible while scrolling, but remains in normal
    document flow so it cannot reduce the page height.
  */
  .dashboard-mobile-header {
    position: sticky;
    top: 0;
    z-index: 80;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    width: 100%;
    min-height: 64px;
    padding:
      10px
      16px;

    border-bottom:
      1px solid #e4e8ef;

    background: #fff8f7;
  }

  .dashboard-mobile-header
    .dashboard-brand {
    width: auto;
    max-width: calc(100% - 58px);
    min-width: 0;
  }

  .dashboard-mobile-header
    .dashboard-brand-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border-radius: 11px;

    color: #101419;
    background:
      linear-gradient(
        145deg,
        #ff5303,
        #4c5867
      );
  }

  .dashboard-mobile-header
    .dashboard-brand-text strong {
    display: block;

    overflow: hidden;

    color: #101419;

    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-mobile-header
    .dashboard-brand-text small {
    display: block;

    margin-top: 3px;

    color: #4c5867;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  .dashboard-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid #e4e8ef;
    border-radius: 11px;

    color: #101419;
    background: #fff8f7;

    cursor: pointer;
  }

  /*
    Entire drawer scrolls as ONE panel.
    No hidden footer.
    No nested menu scroll.
  */
  .dashboard-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;

    display: block;

    width: min(320px, 90vw);

    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    max-height: 100dvh;

    padding:
      18px
      18px
      max(
        24px,
        env(safe-area-inset-bottom)
      );

    color: #fff8f7;
    background: #101419;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    box-shadow:
      14px 0 38px
      rgba(0, 8, 15, 0.22);

    transform:
      translateX(-105%);

    transition:
      transform 260ms ease;
  }

  .dashboard-sidebar.is-open {
    transform:
      translateX(0);
  }

  .dashboard-sidebar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;

    width: 100%;
  }

  .dashboard-sidebar-top
    .dashboard-brand {
    flex: 1;

    min-width: 0;
  }

  .dashboard-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;
    padding: 0;

    border: none;
    border-radius: 9px;

    color: #c3d3da;
    background: transparent;

    cursor: pointer;
  }

  .dashboard-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 4px;

    width: 100%;
    margin-top: 22px;

    overflow: visible;
  }

  .dashboard-sidebar-footer {
    display: grid;
    gap: 9px;

    width: 100%;
    margin-top: 28px;
    padding-top: 16px;
    padding-bottom: 0;

    border-top:
      1px solid
      rgba(255, 255, 255, 0.09);
  }

  .dashboard-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;

    display: block;

    width: 100%;
    height: 100%;
    padding: 0;

    border: none;

    background:
      rgba(2, 18, 29, 0.55);

    cursor: pointer;
  }

  /*
    Normal document content.
    No fixed height.
    No internal vertical scrollbar.
  */
  .dashboard-content {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;

    margin: 0;

    padding: 24px 40px;

    overflow: visible;
  }

  .dashboard-content > header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;

    width: 100%;
    height: auto;
    min-height: 0;
    margin-bottom: 16px;
  }

  .dashboard-content > header > span {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;
  }

  .dashboard-user {
    align-self: flex-start;

    width: auto;
    max-width: 100%;
  }

  /*
    Prevent page sections from being wider than the device.
  */
  .dashboard-hero,
  .summary-grid,
  .summary-card,
  .mentor-directory-grid,
  .mentor-directory-card,
  .mentor-profile-page,
  .mentor-profile-grid,
  .mentor-profile-card,
  .mentee-profile-form,
  .mentorship-request-page,
  .mentorship-request-form,
  .mentee-requests-grid,
  .mentee-request-card,
  .mentee-session-ready-list,
  .mentee-session-workspace,
  .mentee-session-main-column,
  .mentee-session-grid,
  .mentee-session-card,
  .mentee-session-calendar-panel,
  .mentee-overview-hero,
  .mentee-overview-stat-grid,
  .mentee-overview-main-grid,
  .mentee-overview-panel,
  .mentee-overview-safety,
  .mentee-overview-recommendations,
  .mentee-messages-layout,
  .mentor-application-form,
  .mentor-application-section,
  .admin-list-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: auto;
    max-height: none;
  }

  .mentee-session-workspace {
    grid-template-columns: 1fr;
  }

  .mentee-session-main-column,
  .mentee-session-calendar-panel {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
  .dashboard-mobile-header {
    padding:
      10px
      14px;
  }

  .dashboard-sidebar {
    width: min(300px, 92vw);

    padding-right: 14px;
    padding-left: 14px;
  }

  .dashboard-content {
    padding:
      24px
      16px
      calc(24px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   SCROLLING ONLY — DO NOT CHANGE RESPONSIVE PADDING/LAYOUT
   ========================================================= */

/*
   The document owns vertical scrolling on every screen size.
   These rules also neutralize any stale body lock left by an
   earlier hot-reloaded version of the dashboard.
*/

html {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;

  overflow-y: auto !important;

  overscroll-behavior-y: auto;
}

body {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;

  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow-y: auto !important;

  touch-action: pan-x pan-y !important;

  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

#root {
  position: static !important;

  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow: visible !important;
}

.dashboard-layout {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}

.dashboard-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-x: visible !important;
  overflow-y: visible !important;

  touch-action: pan-x pan-y;
}

/*
   Page-level dashboard sections must contribute their real height
   to the document instead of clipping their children.
*/
.mentee-overview-hero,
.mentee-overview-stat-grid,
.mentee-overview-main-grid,
.mentee-overview-panel,
.mentee-overview-safety,
.mentee-overview-recommendations,
.mentor-profile-page,
.mentor-profile-grid,
.mentor-profile-card,
.mentee-profile-form,
.mentorship-request-page,
.mentorship-request-form,
.mentee-requests-grid,
.mentee-request-card,
.mentee-session-ready-list,
.mentee-session-workspace,
.mentee-session-main-column,
.mentee-session-grid,
.mentee-session-card,
.mentee-session-calendar-panel,
.mentor-application-form,
.mentor-application-section,
.admin-list-section {
  height: auto !important;
  max-height: none !important;
}

/*
   The side drawer is the only independent scrolling surface.
   This does not affect the dashboard page behind it.
*/
@media (max-width: 1180px) {
  .dashboard-sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
}

/* =========================================================
   FIXED RESPONSIVE TOP BAR
   No artificial page length.
   ========================================================= */

@media (max-width: 1180px) {
  .dashboard-mobile-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 80;

    width: 100%;
    min-height: 64px;
  }

  /* Make room for the fixed top bar without changing page length. */
  .dashboard-layout {
    padding-top: 64px;
  }
}

/* =========================================================
   DESKTOP SIDEBAR FIXED
   Desktop page height/spacing stays unchanged.
   ========================================================= */

@media (min-width: 1181px) {
  .dashboard-layout {
    display: grid;
    grid-template-columns:
      260px minmax(0, 1fr);

    min-height: 0;
  }

  .dashboard-sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 70;

    display: flex;
    flex-direction: column;

    width: 260px;
    height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;
  }

  .dashboard-sidebar-footer {
    margin-top: auto;
  }

  .dashboard-content {
    grid-column: 2;

    width: 100%;
    max-width: 1400px;

    margin-right: auto;
    margin-left: auto;
  }
}


/* =========================================================
   RESPONSIVE HEADER LAYOUT
   Desktop remains completely unchanged.
   ========================================================= */

/* Tablets / iPads / Android tablets */
@media (min-width: 641px) and (max-width: 1180px) {
  .dashboard-content > header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
  }

  .dashboard-content > header > span {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .dashboard-user {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
  }
}

/* Phones keep the heading and user tag stacked. */
@media (max-width: 640px) {
  .dashboard-content > header {
    flex-direction: column !important;
  }
}

/* =========================================================
   RESPONSIVE CONTENT-HUGGING HEIGHT
   Phones/tablets grow only with their real content.
   Desktop is not affected.
   ========================================================= */

@media (max-width: 1180px) {
  .dashboard-layout,
  .dashboard-content {
    height: auto !important;
    max-height: none !important;
  }

  .dashboard-content {
    min-height: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/* =========================================================
   MENTEE REQUEST DETAILS
   Page-specific styles only.
   ========================================================= */

.mentee-request-detail-page {
  display: grid;
  gap: 18px;

  width: 100%;
  max-width: 1040px;
  min-width: 0;
}

.mentee-request-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  width: max-content;
  padding: 0;

  border: none;

  color: #c13c00;
  background: transparent;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.mentee-request-detail-back:hover {
  text-decoration: underline;
}

.mentee-request-detail-success {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0;
  padding: 13px 15px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;

  color: #c13c00;
  background: #f8f9fb;

  font-size: 12px;
  font-weight: 600;
}

.mentee-request-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;

  width: 100%;
  padding: 26px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentee-request-detail-mentor {
  display: flex;
  align-items: center;
  gap: 15px;

  min-width: 0;
}

.mentee-request-detail-avatar {
  flex: 0 0 64px;

  width: 64px;
  height: 64px;

  border-radius: 17px;
  object-fit: cover;
}

.mentee-request-detail-initials {
  display: grid;
  place-items: center;

  color: #101419;
  background:
    linear-gradient(
      145deg,
      #ff5303,
      #4c5867
    );

  font-size: 16px;
  font-weight: 800;
}

.mentee-request-detail-mentor > div {
  min-width: 0;
}

.mentee-request-detail-mentor h2 {
  margin: 6px 0 3px;

  color: #101419;

  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
}

.mentee-request-detail-mentor p {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.55;
}

.mentee-request-detail-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 17px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #fff8f7;
}

.mentee-request-detail-status > div {
  display: grid;
  place-items: center;
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  border-radius: 11px;

  color: #c13c00;
  background: #f8f9fb;
}

.mentee-request-detail-status small,
.mentee-request-detail-card small,
.mentee-request-detail-copy-card small,
.mentee-request-mentor-question small {
  display: block;

  color: #6f8095;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.mentee-request-detail-status strong {
  display: block;

  margin-top: 4px;

  color: #101419;

  font-size: 15px;
}

.mentee-request-detail-status p {
  max-width: 760px;
  margin: 5px 0 0;

  color: #4c5867;

  font-size: 11px;
  line-height: 1.6;
}

.mentee-request-detail-status.status-accepted {
  border-color: #e4e8ef;
  background: #f1fbf9;
}

.mentee-request-detail-status.status-declined,
.mentee-request-detail-status.status-withdrawn {
  border-color: #f3d5d8;
  background: #fff7f8;
}

.mentee-request-detail-status.status-declined > div,
.mentee-request-detail-status.status-withdrawn > div {
  color: #b42335;
  background: #fff0f2;
}

.mentee-request-detail-status.status-clarification-requested {
  border-color: #dfd1f0;
  background: #fbf8ff;
}

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

.mentee-request-detail-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  min-width: 0;
  padding: 17px;

  border: 1px solid #e4e8ef;
  border-radius: 14px;

  background: #fff8f7;
}

.mentee-request-detail-card > span {
  display: grid;
  place-items: center;
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  color: #c13c00;
  background: #f8f9fb;
}

.mentee-request-detail-card > div {
  min-width: 0;
}

.mentee-request-detail-card strong {
  display: block;

  margin-top: 4px;

  color: #101419;

  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.mentee-request-detail-copy-card,
.mentee-request-clarification-card,
.mentee-request-detail-actions-card,
.mentee-request-withdraw-confirmation {
  padding: 24px;

  border: 1px solid #e4e8ef;
  border-radius: 18px;

  background: #fff8f7;
}

.mentee-request-detail-copy-card {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.mentee-request-detail-copy-card > div + div {
  padding-left: 24px;

  border-left: 1px solid #e4e8ef;
}

.mentee-request-detail-copy-card h3,
.mentee-request-clarification-card h3,
.mentee-request-detail-actions-card h3,
.mentee-request-withdraw-confirmation h3 {
  margin: 6px 0 7px;

  color: #101419;

  font-size: 16px;
  line-height: 1.35;
}

.mentee-request-detail-copy-card p,
.mentee-request-detail-actions-card p,
.mentee-request-withdraw-confirmation p {
  margin: 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.7;
}

.mentee-request-clarification-card {
  border-color: #dfd1f0;
  background: #fdfbff;
}

.mentee-request-clarification-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin-bottom: 18px;

  color: #6d4ba0;
}

.mentee-request-mentor-question {
  margin-bottom: 18px;
  padding: 15px;

  border-radius: 12px;

  background: #f4effb;
}

.mentee-request-mentor-question p {
  margin: 6px 0 0;

  color: #4c5867;

  font-size: 12px;
  line-height: 1.65;
}

.mentee-request-clarification-card form {
  display: grid;
  gap: 14px;
}

.mentee-request-clarification-card label {
  color: #2f0800;

  font-size: 12px;
  font-weight: 700;
}

.mentee-request-clarification-card textarea {
  display: block;

  width: 100%;
  min-height: 120px;
  margin-top: 7px;
  padding: 12px 13px;

  border: 1px solid #e4e8ef;
  border-radius: 11px;
  outline: none;

  color: #101419;
  background: #fff8f7;

  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;

  resize: vertical;
}

.mentee-request-clarification-card textarea:focus {
  border-color: #ff5303;

  box-shadow:
    0 0 0 3px
    rgba(10, 168, 143, 0.12);
}

.mentee-request-clarification-card .primary-button {
  justify-self: end;
}

.mentee-request-detail-actions-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mentee-request-detail-actions-card > div:first-child {
  max-width: 560px;
}

.mentee-request-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.mentee-request-withdraw-button,
.mentee-request-confirm-withdraw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0 18px;

  border-radius: 11px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.mentee-request-withdraw-button {
  border: 1px solid #e8b7bf;

  color: #b42335;
  background: #fff8f7;
}

.mentee-request-withdraw-button:hover {
  background: #fff0f2;
}

.mentee-request-confirm-withdraw-button {
  border: 1px solid #b42335;

  color: #fff8f7;
  background: #b42335;
}

.mentee-request-confirm-withdraw-button:hover:not(:disabled) {
  background: #942032;
}

.mentee-request-confirm-withdraw-button:disabled,
.mentee-request-withdraw-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mentee-request-withdraw-confirmation {
  border-color: #f0c8ce;
  background: #fff9fa;
}

.mentee-request-withdraw-confirmation > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 20px;
}

.mentee-request-actions {
  gap: 10px;
}

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

  .mentee-request-detail-copy-card {
    grid-template-columns: 1fr;
  }

  .mentee-request-detail-copy-card > div + div {
    padding-top: 20px;
    padding-left: 0;

    border-top: 1px solid #e4e8ef;
    border-left: none;
  }

  .mentee-request-detail-actions-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentee-request-detail-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .mentee-request-detail-hero {
    flex-direction: column;

    padding: 20px;
  }

  .mentee-request-detail-mentor {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentee-request-detail-copy-card,
  .mentee-request-clarification-card,
  .mentee-request-detail-actions-card,
  .mentee-request-withdraw-confirmation {
    padding: 20px;
  }

  .mentee-request-detail-actions,
  .mentee-request-withdraw-confirmation > div:last-child {
    align-items: stretch;
    flex-direction: column;

    width: 100%;
  }

  .mentee-request-detail-actions .primary-button,
  .mentee-request-detail-actions .secondary-button,
  .mentee-request-withdraw-button,
  .mentee-request-confirm-withdraw-button,
  .mentee-request-withdraw-confirmation .secondary-button,
  .mentee-request-clarification-card .primary-button {
    width: 100%;
  }
}

/* =========================================================
   VISUAL OVERHAUL V2
   KEEP THIS BLOCK AT THE BOTTOM
   ========================================================= */

html {
  background: var(--page-bg);
}

body {
  color: var(--body-copy);

  background:
    radial-gradient(
      circle at 6% 3%,
      rgba(255, 83, 3, 0.055),
      transparent 24rem
    ),
    radial-gradient(
      circle at 96% 8%,
      rgba(46, 196, 182, 0.045),
      transparent 26rem
    ),
    var(--page-bg);
}

body,
button,
input,
select,
textarea {
  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading);
  letter-spacing: -0.025em;
}

p {
  color: var(--body-copy);
}

::selection {
  color: var(--orange-ink);
  background: rgba(255, 83, 3, 0.22);
}

a {
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255, 83, 3, 0.20);
  outline-offset: 2px;
}

/* ---------- Cards ---------- */

.ui-card,
.summary-card,
.dashboard-section-card,
.mentor-directory-card,
.mentee-profile-section,
.mentee-request-card,
.mentee-session-card,
.mentee-session-calendar-panel,
.mentee-request-detail-card,
.mentee-request-detail-copy-card,
.mentee-request-detail-actions-card,
.admin-list-section {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* ---------- Buttons ---------- */

.primary-button,
.secondary-button,
.tertiary-button,
.danger-button,
.dashboard-action-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 46px;
  padding: 0 18px;

  border-radius: var(--radius-md);

  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;

  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.primary-button,
.dashboard-action-button {
  overflow: hidden;

  border: 1px solid var(--brand-orange);

  color: var(--orange-ink);
  background: var(--brand-orange);

  box-shadow:
    0 8px 20px rgba(255, 83, 3, 0.16);
}

.primary-button::before,
.dashboard-action-button::before {
  content: "";

  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -42%;

  width: 28%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255, 248, 243, 0.45),
      transparent
    );

  transform: skewX(-18deg);

  transition: left var(--motion-slow);
}

.primary-button:hover:not(:disabled),
.dashboard-action-button:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);
  box-shadow: var(--shadow-orange);
  transform: translateY(-2px);
}

.primary-button:hover:not(:disabled)::before,
.dashboard-action-button:hover:not(:disabled)::before {
  left: 122%;
}

.primary-button:active:not(:disabled),
.dashboard-action-button:active:not(:disabled) {
  transform: scale(0.975);
}

.secondary-button {
  border: 1px solid var(--border-strong);

  color: var(--heading);
  background: var(--surface-elevated);
}

.secondary-button:hover:not(:disabled) {
  border-color: var(--dark-surface);

  color: var(--text-inverse);
  background: var(--dark-surface);

  transform: translateY(-1px);
}

.secondary-button:active:not(:disabled) {
  transform: scale(0.98);
}

.tertiary-button {
  min-height: 40px;
  padding-right: 10px;
  padding-left: 10px;

  border: 1px solid transparent;

  color: var(--brand-orange-deep);
  background: transparent;
}

.tertiary-button:hover:not(:disabled) {
  background: var(--brand-orange-soft);
}

.danger-button {
  border: 1px solid #e1bcc0;

  color: var(--danger);
  background: var(--surface-elevated);
}

.danger-button:hover:not(:disabled) {
  border-color: var(--danger);

  color: var(--danger-hover);
  background: var(--danger-soft);

  transform: translateY(-1px);
}

.primary-button:disabled,
.secondary-button:disabled,
.tertiary-button:disabled,
.danger-button:disabled,
.dashboard-action-button:disabled {
  border-color: var(--border);

  color: var(--subtle);
  background: var(--surface-soft);

  box-shadow: none;

  cursor: not-allowed;
  transform: none;
}

/* ---------- Fields ---------- */

input,
select,
textarea,
.ui-input,
.ui-select,
.ui-textarea {
  border-color: var(--border);

  color: var(--heading);
  background: var(--surface-elevated);
}

input::placeholder,
textarea::placeholder {
  color: var(--subtle);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus,
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  border-color: var(--brand-orange) !important;

  box-shadow:
    0 0 0 3px rgba(255, 83, 3, 0.11) !important;
}

/* ---------- Public page background/pattern ---------- */

.public-page {
  position: relative;
  isolation: isolate;

  min-height: 100vh;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 7% 10%,
      rgba(255, 83, 3, 0.13),
      transparent 28rem
    ),
    radial-gradient(
      circle at 94% 20%,
      rgba(46, 196, 182, 0.10),
      transparent 28rem
    ),
    radial-gradient(
      circle at 70% 90%,
      rgba(255, 196, 71, 0.07),
      transparent 24rem
    ),
    var(--page-bg);
}

.public-page::before {
  content: "";

  position: fixed;
  z-index: -2;
  inset: 0;

  pointer-events: none;

  opacity: 0.32;

  background-image:
    radial-gradient(
      circle,
      rgba(45, 33, 28, 0.11) 1px,
      transparent 1.5px
    );

  background-size: 28px 28px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7),
      transparent 85%
    );
}

.public-page::after {
  content: "";

  position: fixed;
  z-index: -1;
  right: -130px;
  top: 110px;

  width: 430px;
  height: 430px;

  border: 1px solid rgba(255, 83, 3, 0.11);
  border-radius: 50%;

  pointer-events: none;

  box-shadow:
    0 0 0 55px rgba(255, 83, 3, 0.025),
    0 0 0 110px rgba(46, 196, 182, 0.018);
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 560ms ease,
    transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.reveal-left {
  transform: translateX(-22px);
}

.reveal.reveal-right {
  transform: translateX(22px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---------- Horizontal swipe / shorter page ---------- */

.horizontal-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 32%);
  gap: 16px;

  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;

  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.horizontal-scroll > * {
  scroll-snap-align: start;
}

/* =========================================================
   DASHBOARD SHELL
   ========================================================= */

.dashboard-layout {
  color: var(--body-copy);
  background: var(--page-bg);
}

.dashboard-sidebar {
  border-right:
    1px solid rgba(255, 248, 243, 0.08);

  color: var(--text-inverse);

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(255, 83, 3, 0.14),
      transparent 220px
    ),
    radial-gradient(
      circle at 92% 92%,
      rgba(46, 196, 182, 0.08),
      transparent 240px
    ),
    var(--dark-surface);

  box-shadow:
    10px 0 30px rgba(45, 33, 28, 0.06);
}

.dashboard-sidebar-top {
  border-bottom:
    1px solid rgba(255, 248, 243, 0.08);
}

.dashboard-brand {
  gap: 11px;
}

.dashboard-brand-logo {
  flex: 0 0 auto;

  width: 50px;
  height: 36px;

  object-fit: contain;
  object-position: left center;
}

.dashboard-brand-text strong {
  color: var(--text-inverse);

  font-size: 13px;
  font-weight: 760;
}

.dashboard-brand-text small {
  color: #c9d2df;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.dashboard-sidebar nav a {
  position: relative;

  min-height: 46px;

  border: 1px solid transparent;
  border-radius: 11px;

  color: #c9d2df;

  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    transform var(--motion-fast);
}

.dashboard-sidebar nav a:hover {
  color: var(--text-inverse);

  background:
    rgba(255, 248, 243, 0.06);

  transform: translateX(2px);
}

.dashboard-sidebar nav a.active {
  border-color:
    rgba(255, 83, 3, 0.24);

  color: var(--text-inverse);

  background:
    linear-gradient(
      90deg,
      rgba(255, 83, 3, 0.19),
      rgba(255, 83, 3, 0.07)
    );
}

.dashboard-sidebar nav a.active::before {
  content: "";

  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -1px;

  width: 3px;

  border-radius: 999px;

  background: var(--brand-orange);
}

.dashboard-sidebar nav a svg {
  color: #c9d2df;
}

.dashboard-sidebar nav a.active svg {
  color: #ff9868;
}

.dashboard-sidebar-footer {
  display: grid;
  gap: 9px;
}

.become-mentor-button,
.sign-out-button {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  min-height: 44px;
  padding: 0 12px;

  border-radius: 10px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  text-align: left;

  cursor: pointer;

  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast);
}

.become-mentor-button {
  border:
    1px solid rgba(255, 83, 3, 0.24);

  color: #ffb18d;
  background:
    rgba(255, 83, 3, 0.08);
}

.become-mentor-button:hover {
  color: var(--orange-ink);
  background: var(--brand-orange);
}

.sign-out-button {
  border: 1px solid transparent;

  color: #c9d2df;
  background: transparent;
}

.sign-out-button:hover {
  color: #ffcfca;

  background:
    rgba(183, 71, 80, 0.10);
}

.dashboard-content {
  position: relative;

  color: var(--body-copy);

  background:
    radial-gradient(
      circle at 98% 2%,
      rgba(255, 83, 3, 0.055),
      transparent 24rem
    ),
    radial-gradient(
      circle at 0% 96%,
      rgba(46, 196, 182, 0.035),
      transparent 22rem
    ),
    var(--page-bg);
}

.dashboard-content > header {
  margin-bottom: 20px;
}

.dashboard-content > header > span > small {
  color: var(--brand-orange-deep);

  font-weight: 850;
  letter-spacing: 0.12em;
}

.dashboard-content > header h1 {
  color: var(--heading);
  letter-spacing: -0.045em;
}

.dashboard-content > header p {
  color: var(--body-copy);
}

.dashboard-user {
  border-color: var(--border);

  background: var(--surface-elevated);

  box-shadow: var(--shadow-xs);
}

.dashboard-user strong {
  color: var(--heading);
}

.dashboard-user small {
  color: var(--brand-teal-dark);
  background: var(--brand-teal-soft);
}

.dashboard-mobile-header {
  border-bottom: 1px solid var(--border);

  background:
    rgba(255, 250, 247, 0.96);

  box-shadow:
    0 6px 24px rgba(45, 33, 28, 0.055);

  backdrop-filter: blur(14px);
}

.dashboard-mobile-header
.dashboard-brand-text strong {
  color: var(--heading);
}

.dashboard-mobile-header
.dashboard-brand-text small {
  color: var(--muted);
}

.dashboard-menu-button,
.dashboard-menu-close {
  border-color: var(--border);

  color: var(--heading);
  background: var(--surface-elevated);
}

.dashboard-menu-button:hover,
.dashboard-menu-close:hover {
  border-color: var(--brand-orange);

  color: var(--brand-orange-deep);
  background: var(--brand-orange-soft);
}

@media (max-width: 1180px) {
  .dashboard-sidebar-footer {
    margin-top: 52px;
    padding-top: 22px;

    border-top:
      1px solid rgba(255, 248, 243, 0.09);
  }
}

@media (min-width: 1181px) {
  .dashboard-sidebar-footer {
    margin-top: auto;
  }
}

@media (max-width: 900px) {
  .horizontal-scroll {
    grid-auto-columns: minmax(260px, 76%);
  }

  .public-page::after {
    right: -230px;
    opacity: 0.72;
  }
}

@media (max-width: 640px) {
  .horizontal-scroll {
    grid-auto-columns: minmax(250px, 88%);
  }

  .public-page::before {
    opacity: 0.20;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal.reveal-left,
  .reveal.reveal-right {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   VISUAL OVERHAUL V2 — BATCH 2
   NORMAL LOGIN + REGISTRATION
   ========================================================= */

/* ---------- Shared authentication shell ---------- */

.auth-page {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns:
    minmax(440px, 0.9fr)
    minmax(480px, 1.1fr);

  min-height: 100vh;
  overflow: hidden;

  color: var(--body-copy);

  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(255, 83, 3, 0.09),
      transparent 26rem
    ),
    radial-gradient(
      circle at 92% 90%,
      rgba(46, 196, 182, 0.055),
      transparent 26rem
    ),
    var(--page-bg);
}

.auth-page::before {
  content: "";

  position: fixed;
  z-index: -2;
  inset: 0;

  pointer-events: none;

  opacity: 0.18;

  background-image:
    radial-gradient(
      circle,
      rgba(45, 33, 28, 0.12) 1px,
      transparent 1.5px
    );

  background-size: 30px 30px;
}

/* ---------- Form panel ---------- */

.auth-panel {
  position: relative;
  z-index: 1;

  align-self: center;

  width: min(560px, 100%);
  margin: 0 auto;
  padding: 48px clamp(28px, 5vw, 58px);

  color: var(--body-copy);
}

.auth-brand {
  margin-bottom: 38px;
}

.auth-brand .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: var(--heading);
}

.auth-brand-logo {
  width: 70px;
  height: 40px;

  object-fit: contain;
  object-position: left center;
}

.auth-brand .brand-text {
  display: grid;
  gap: 2px;
}

.auth-brand .brand-text strong {
  color: var(--heading);

  font-size: 14px;
  font-weight: 800;
}

.auth-brand .brand-text small {
  color: var(--muted);

  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.auth-heading {
  max-width: 500px;
  margin-bottom: 30px;
}

.auth-heading .eyebrow,
.registration-heading .eyebrow {
  color: var(--brand-orange-deep);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.auth-heading h1 {
  margin: 9px 0 11px;

  color: var(--heading);

  font-size:
    clamp(34px, 4.4vw, 52px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.048em;
}

.auth-heading p {
  max-width: 460px;
  margin: 0;

  color: var(--body-copy);

  font-size: 13px;
  line-height: 1.7;
}

/* ---------- Fields ---------- */

.auth-panel form {
  display: grid;
  gap: 18px;
}

.auth-panel form > label,
.registration-field {
  display: block;

  color: var(--heading);

  font-size: 12px;
  font-weight: 750;
}

.auth-panel form input,
.registration-field input,
.registration-field select {
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  padding: 0 15px;

  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;

  color: var(--heading);
  background: var(--surface-elevated);

  font-family: inherit;
  font-size: 14px;

  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.auth-panel form input:hover,
.registration-field input:hover,
.registration-field select:hover {
  border-color: var(--border-strong);
}

.auth-panel form input:focus,
.registration-field input:focus,
.registration-field select:focus {
  border-color: var(--brand-orange) !important;

  background: var(--surface-elevated);

  box-shadow:
    0 0 0 3px
    rgba(255, 83, 3, 0.10) !important;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 50px !important;
}

.password-field > button {
  position: absolute;
  top: 50%;
  right: 12px;

  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;
  padding: 0;

  border: none;
  border-radius: 8px;

  color: var(--muted);
  background: transparent;

  cursor: pointer;

  transform: translateY(-35%);

  transition:
    color var(--motion-fast),
    background-color var(--motion-fast);
}

.password-field > button:hover {
  color: var(--brand-orange-deep);
  background: var(--brand-orange-soft);
}

/* ---------- Login helper links ---------- */

.form-options {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  margin-top: -4px;
}

.forgot-link,
.account-copy a,
.registration-account-copy a {
  color: var(--brand-orange-deep);

  font-weight: 750;
}

.forgot-link:hover,
.account-copy a:hover,
.registration-account-copy a:hover {
  color: var(--brand-orange-hover);

  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Main auth submit ---------- */

.auth-panel .primary-button.full-button,
.registration-submit {
  overflow: hidden;

  width: 100%;
  min-height: 50px;
  margin-top: 3px;
  padding: 0 20px;

  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);

  color: var(--orange-ink);
  background: var(--brand-orange);

  font-size: 13px;
  font-weight: 800;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.16);

  transition:
    background-color var(--motion-normal),
    border-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.auth-panel .primary-button.full-button:hover:not(:disabled),
.registration-submit:hover:not(:disabled) {
  border-color: var(--brand-orange-hover);
  background: var(--brand-orange-hover);

  box-shadow:
    0 12px 28px
    rgba(255, 83, 3, 0.21);

  transform: translateY(-2px);
}

.auth-panel .primary-button.full-button:active:not(:disabled),
.registration-submit:active:not(:disabled) {
  transform: scale(0.98);
}

/* ---------- Google auth ---------- */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 22px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: var(--border);
}

.auth-divider span {
  color: var(--muted);

  font-size: 10px;
  font-weight: 700;
}

.google-auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  min-height: 50px;
  padding: 0 18px;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);

  color: var(--heading);
  background: var(--surface-elevated);

  font-family: inherit;
  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}

.google-auth-button:hover:not(:disabled) {
  border-color: var(--dark-surface);

  background: var(--surface);

  box-shadow: var(--shadow-sm);

  transform: translateY(-1px);
}

.google-auth-button:active:not(:disabled) {
  transform: scale(0.985);
}

.google-auth-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.account-copy {
  margin: 20px 0 0;

  color: var(--body-copy);

  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- Visual panel ---------- */

.auth-message {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 100vh;
  padding:
    clamp(52px, 7vw, 90px);

  color: var(--text-inverse);

  background:
    linear-gradient(
      145deg,
      rgba(32, 38, 43, 0.98),
      rgba(45, 33, 28, 0.98)
    );
}

.auth-message::before {
  content: "";

  position: absolute;
  z-index: -2;
  inset: 0;

  opacity: 0.9;

  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 83, 3, 0.94) 0 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 72% 23%,
      rgba(46, 196, 182, 0.70) 0 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 42% 65%,
      rgba(255, 190, 75, 0.66) 0 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(255, 83, 3, 0.68) 0 9px,
      transparent 10px
    ),
    linear-gradient(
      125deg,
      transparent 0 48%,
      rgba(255, 248, 243, 0.045)
      49% 50%,
      transparent 51% 100%
    );

  background-size:
    165px 165px,
    190px 190px,
    210px 210px,
    180px 180px,
    130px 130px;
}

.auth-message::after {
  content: "";

  position: absolute;
  z-index: -1;
  right: -130px;
  top: 80px;

  width: 420px;
  height: 420px;

  border:
    1px solid
    rgba(255, 83, 3, 0.20);
  border-radius: 50%;

  box-shadow:
    0 0 0 52px
      rgba(255, 83, 3, 0.035),
    0 0 0 104px
      rgba(46, 196, 182, 0.025);
}

.auth-message .eyebrow {
  color: #ff9788;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.auth-message h2 {
  max-width: 570px;
  margin: 14px 0 0;

  color: var(--text-inverse);

  font-size:
    clamp(38px, 5vw, 68px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.052em;
}

/* Extra visual copy, added in Batch 2 JSX */

.auth-message-copy {
  max-width: 490px;
  margin: 18px 0 0;

  color: var(--text-inverse-muted);

  font-size: 14px;
  line-height: 1.75;
}

.auth-message-points {
  display: grid;
  gap: 12px;

  max-width: 500px;
  margin: 28px 0 0;
  padding: 0;

  list-style: none;
}

.auth-message-points li {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #e4e8ef;

  font-size: 12px;
  line-height: 1.5;
}

.auth-message-points svg {
  flex-shrink: 0;

  color: #ff8c56;
}

/* ---------- Registration ---------- */

.registration-page {
  align-items: stretch;

  overflow: visible;
}

.registration-panel {
  align-self: start;

  width: min(620px, 100%);
  padding-top: 44px;
  padding-bottom: 44px;
}

.registration-heading {
  margin-bottom: 24px;
}

.registration-heading h1 {
  margin: 9px 0 10px;

  color: var(--heading);

  font-size:
    clamp(34px, 4vw, 48px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.046em;
}

.registration-heading p {
  margin: 0;

  color: var(--body-copy);

  font-size: 13px;
  line-height: 1.7;
}

.registration-account-type {
  margin-bottom: 20px;
}

.registration-select-field {
  position: relative;
}

.registration-select-field select {
  appearance: none;

  padding-right: 45px;
}

.registration-select-icon {
  position: absolute;
  top: 50%;
  right: 14px;

  color: var(--muted);

  pointer-events: none;

  transform: translateY(-20%);
}

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

.registration-form
.registration-field:nth-of-type(1),
.registration-form
.registration-field:nth-of-type(2),
.registration-terms,
.registration-submit {
  grid-column: 1 / -1;
}

.registration-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  color: var(--body-copy);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
}

.registration-terms input {
  flex: 0 0 auto;

  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;

  accent-color: var(--brand-orange);
}

.google-terms-copy {
  max-width: 520px;
  margin: 12px auto 0;

  color: var(--muted);

  text-align: center;
  font-size: 10px;
  line-height: 1.6;
}

.registration-message {
  position: sticky;
  top: 0;

  align-self: start;

  height: 100vh;
}

.registration-message > svg {
  width: 54px;
  height: 54px;
  margin-bottom: 28px;

  color: #ff8c56;
}

/* ---------- Error treatment ---------- */

.form-error {
  margin: 0;
  padding: 12px 14px;

  border:
    1px solid #e6c1c5;
  border-radius: 10px;

  color: var(--danger);
  background: var(--danger-soft);

  font-size: 11px;
  font-weight: 650;
  line-height: 1.55;
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  .auth-page {
    grid-template-columns: 1fr;

    min-height: 100vh;
    overflow: visible;
  }

  .auth-panel,
  .registration-panel {
    width: min(650px, 100%);

    padding:
      42px
      40px
      52px;
  }

  .auth-message {
    display: none;
  }

  .registration-message {
    display: none;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .auth-page {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(255, 83, 3, 0.10),
        transparent 18rem
      ),
      radial-gradient(
        circle at 0% 100%,
        rgba(46, 196, 182, 0.045),
        transparent 18rem
      ),
      var(--page-bg);
  }

  .auth-panel,
  .registration-panel {
    align-self: start;

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

  .auth-brand {
    margin-bottom: 30px;
  }

  .auth-heading h1,
  .registration-heading h1 {
    font-size:
      clamp(32px, 10vw, 42px);
  }

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

  .registration-form
  .registration-field:nth-of-type(1),
  .registration-form
  .registration-field:nth-of-type(2),
  .registration-terms,
  .registration-submit {
    grid-column: auto;
  }

  .auth-panel .primary-button.full-button,
  .registration-submit,
  .google-auth-button {
    min-height: 50px;
  }
}

/* =========================================================
   VISUAL OVERHAUL V3 — ACTUAL PUBLIC HOMEPAGE
   ========================================================= */

.home-page {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 100svh;
  overflow: hidden;

  color: var(--body-copy);

  background:
    radial-gradient(
      circle at 7% 10%,
      rgba(255, 83, 3, 0.10),
      transparent 25rem
    ),
    radial-gradient(
      circle at 95% 30%,
      rgba(46, 196, 182, 0.075),
      transparent 27rem
    ),
    var(--page-bg);
}

/* Soft dotted pattern */
.home-page::before {
  content: "";

  position: absolute;
  z-index: -2;
  inset: 0;

  pointer-events: none;

  opacity: 0.34;

  background-image:
    radial-gradient(
      circle,
      rgba(16, 20, 25, 0.12) 1px,
      transparent 1.25px
    );

  background-size: 30px 30px;

  mask-image:
    linear-gradient(
      115deg,
      rgba(0, 0, 0, 0.72),
      transparent 64%
    );
}

/* Large brand orbit */
.home-page::after {
  content: "";

  position: absolute;
  z-index: -1;
  top: 110px;
  right: -190px;

  width: 520px;
  height: 520px;

  border: 1px solid
    rgba(255, 83, 3, 0.13);

  border-radius: 50%;

  pointer-events: none;

  box-shadow:
    0 0 0 62px
      rgba(255, 83, 3, 0.025),
    0 0 0 124px
      rgba(46, 196, 182, 0.02);
}

/* ---------- Public navigation ---------- */

.public-nav {
  position: relative;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  width: min(1380px, 100%);
  margin: 0 auto;
  padding:
    22px
    clamp(20px, 6vw, 78px);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  min-width: 0;

  color: var(--heading);
}

/*
  The supplied image contains the TCN crest on the left
  and HOTHUB on the right. This window displays the HOTHUB side.
*/
.hothub-logo-window {
  position: relative;
  overflow: hidden;
  flex: 0 0 66px;

  width: 66px;
  height: 67px;
}

.hothub-logo-window img {
  position: absolute;
  top: 0;
  left: -55px;

  width: 120px;
  max-width: none;
  height: auto;
}

.public-brand-copy {
  display: grid;
  gap: 2px;

  min-width: 0;
}

.public-brand-copy strong {
  color: var(--heading);

  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}

.public-brand-copy small {
  color: var(--ink-400);

  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

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

.nav-sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 15px;

  border-radius: var(--radius-md);

  color: var(--ink-500);

  font-size: 13px;
  font-weight: 750;

  transition:
    color var(--motion-fast),
    background-color var(--motion-fast);
}

.nav-sign-in:hover {
  color: var(--orange-700);
  background: var(--orange-50);
}

.nav-create-account {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 46px;
  padding: 0 19px;

  border: 1px solid var(--orange-600);
  border-radius: var(--radius-md);

  color: var(--orange-950);
  background: var(--orange-600);

  font-size: 13px;
  font-weight: 800;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.16);

  transition:
    background-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.nav-create-account:hover {
  border-color: var(--orange-700);
  background: var(--orange-700);

  box-shadow:
    0 12px 26px
    rgba(255, 83, 3, 0.21);

  transform: translateY(-2px);
}

.nav-create-account:active {
  transform: scale(0.975);
}

/* ---------- Hero ---------- */

.home-hero {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(360px, 0.92fr);

  align-items: center;
  gap:
    clamp(42px, 7vw, 104px);

  flex: 1;

  width: min(1380px, 100%);
  margin: 0 auto;

  padding:
    clamp(42px, 7vh, 76px)
    clamp(20px, 6vw, 78px)
    clamp(42px, 7vh, 74px);
}

.hero-content {
  max-width: 720px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin: 0;

  color: var(--teal-700);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.16em;

  animation:
    home-rise 520ms ease both;
}

.hero-eyebrow svg {
  color: var(--orange-600);
}

.hero-content h1 {
  max-width: 720px;
  margin: 17px 0 20px;

  color: var(--ink-600);

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size:
    clamp(50px, 6vw, 78px);

  font-weight: 620;
  line-height: 1.01;
  letter-spacing: -0.056em;

  animation:
    home-rise 620ms 70ms ease both;
}

.hero-content > p {
  max-width: 610px;
  margin: 0;

  color: var(--ink-400);

  font-size:
    clamp(15px, 1.45vw, 18px);

  line-height: 1.72;

  animation:
    home-rise 620ms 130ms ease both;
}

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

  margin-top: 30px;

  animation:
    home-rise 620ms 190ms ease both;
}

/* Primary public CTA */
.public-primary-button {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 50px;
  padding: 0 22px;

  border: 1px solid var(--orange-600);
  border-radius: var(--radius-md);

  color: var(--orange-950);
  background: var(--orange-600);

  font-size: 13px;
  font-weight: 800;

  box-shadow:
    0 9px 22px
    rgba(255, 83, 3, 0.17);

  transition:
    background-color var(--motion-normal),
    border-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.public-primary-button::before {
  content: "";

  position: absolute;
  top: -65%;
  bottom: -65%;
  left: -38%;

  width: 28%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255, 244, 243, 0.58),
      transparent
    );

  transform: skewX(-18deg);

  transition:
    left 520ms
    cubic-bezier(0.2, 0.8, 0.2, 1);
}

.public-primary-button:hover {
  border-color: var(--orange-700);
  background: var(--orange-700);

  box-shadow:
    0 14px 30px
    rgba(255, 83, 3, 0.22);

  transform: translateY(-2px);
}

.public-primary-button:hover::before {
  left: 120%;
}

.public-primary-button svg {
  transition:
    transform var(--motion-fast);
}

.public-primary-button:hover svg {
  transform: translateX(3px);
}

.public-primary-button:active {
  transform: scale(0.975);
}

/* Dark secondary CTA */
.public-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 50px;
  padding: 0 22px;

  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);

  color: var(--ink-50);
  background: var(--ink-600);

  font-size: 13px;
  font-weight: 750;

  box-shadow:
    0 8px 20px
    rgba(16, 20, 25, 0.10);

  transition:
    color var(--motion-normal),
    background-color var(--motion-normal),
    border-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-fast);
}

.public-secondary-button:hover {
  border-color: var(--ink-500);
  background: var(--ink-500);

  box-shadow:
    0 12px 26px
    rgba(16, 20, 25, 0.14);

  transform: translateY(-2px);
}

.public-secondary-button svg {
  transition:
    transform var(--motion-fast);
}

.public-secondary-button:hover svg {
  transform: translateX(3px);
}

.public-secondary-button:active {
  transform: scale(0.975);
}

/* ---------- Trust micro row ---------- */

.hero-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;

  margin-top: 28px;

  animation:
    home-rise 620ms 250ms ease both;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: var(--ink-400);

  font-size: 11px;
  font-weight: 650;
}

.hero-trust-item svg {
  color: var(--teal-700);
}

/* ---------- Hero visual card ---------- */

.hero-visual {
  position: relative;

  min-width: 0;

  animation:
    home-card-enter
    720ms 130ms ease both;
}

.hero-visual::before {
  content: "";

  position: absolute;
  z-index: -1;
  top: -22px;
  right: -22px;

  width: 126px;
  height: 126px;

  border:
    1px solid
    rgba(46, 196, 182, 0.25);

  border-radius: 50%;
}

.hero-trust-card {
  position: relative;
  overflow: hidden;

  padding:
    clamp(28px, 4vw, 42px);

  border:
    1px solid
    rgba(151, 170, 194, 0.22);

  border-radius: 26px;

  color: var(--ink-50);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 83, 3, 0.17),
      transparent 220px
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(46, 196, 182, 0.11),
      transparent 230px
    ),
    var(--ink-600);

  box-shadow:
    0 28px 70px
    rgba(16, 20, 25, 0.14);
}

.hero-trust-card::before {
  content: "";

  position: absolute;
  right: -55px;
  bottom: -55px;

  width: 180px;
  height: 180px;

  border:
    1px solid
    rgba(46, 196, 182, 0.18);

  border-radius: 50%;

  box-shadow:
    0 0 0 34px
      rgba(255, 83, 3, 0.035);
}

.hero-card-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  border-radius: 15px;

  color: var(--teal-950);
  background: var(--teal-600);

  box-shadow:
    0 9px 24px
    rgba(46, 196, 182, 0.17);
}

.hero-trust-card .eyebrow {
  margin-top: 28px;

  color: var(--teal-300);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.hero-trust-card h2 {
  max-width: 430px;
  margin: 10px 0 13px;

  color: var(--ink-50);

  font-size:
    clamp(29px, 3.3vw, 43px);

  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.hero-trust-card > p {
  max-width: 430px;
  margin: 0;

  color: var(--ink-100);

  font-size: 13px;
  line-height: 1.72;
}

.hero-card-divider {
  height: 1px;
  margin: 28px 0 20px;

  background:
    rgba(228, 232, 239, 0.12);
}

.hero-feature-list {
  display: grid;
  gap: 13px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.hero-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--ink-100);

  font-size: 12px;
  font-weight: 620;
}

.hero-feature-list svg {
  flex: 0 0 auto;

  color: var(--teal-400);
}

/* ---------- Footer ---------- */

.home-footer {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  width: min(1380px, 100%);
  margin: 0 auto;
  padding:
    18px
    clamp(20px, 6vw, 78px)
    24px;

  border-top:
    1px solid
    rgba(151, 170, 194, 0.26);

  color: var(--ink-300);

  font-size: 10px;
}

.home-footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.home-footer a {
  color: var(--ink-400);

  transition:
    color var(--motion-fast);
}

.home-footer a:hover {
  color: var(--orange-700);
}

/* ---------- Initial-load motion ---------- */

@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-card-enter {
  from {
    opacity: 0;
    transform:
      translateY(20px)
      scale(0.985);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* =========================================================
   EXACT PALETTE CLEAN-UP FOR COMMON LEGACY STATES
   ========================================================= */

.eyebrow,
.mentor-approved-label,
.mentee-request-detail-copy-card small,
.mentee-request-detail-card small {
  color: var(--teal-700);
}

.empty-state-icon,
.mentor-card-initials,
.mentee-session-ready-icon {
  color: var(--teal-950);
  background: var(--teal-50);
}

.role-card:hover,
.role-card.selected {
  border-color: var(--orange-600);
}

.role-card.selected {
  background: var(--orange-50);
}

.role-card input,
.terms-checkbox input,
.registration-terms input,
.mentor-checkbox-grid input,
.mentor-checkbox-stack input {
  accent-color: var(--orange-600);
}

/* HOTHUB logo image is the supplied combined file.
   Crop its right-hand HOTHUB side in compact app placements. */

.dashboard-brand-logo,
.auth-brand-logo {
  width: 68px;
  height: 54px;

  object-fit: cover;
  object-position: right center;

  border-radius: 0;
}

/* No old green focus rings. */

*:focus-visible {
  outline-color:
    rgba(255, 83, 3, 0.28);
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  .home-page {
    overflow: visible;
  }

  .home-hero {
    grid-template-columns: 1fr;

    gap: 34px;

    padding-top: 42px;
    padding-bottom: 42px;
  }

  .hero-content {
    max-width: 760px;
  }

  .hero-visual {
    width: 100%;
  }

  .hero-trust-card {
    width: 100%;
  }

  .home-page::after {
    right: -310px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .public-nav {
    padding:
      14px
      16px;
  }

  .hothub-logo-window {
    flex-basis: 54px;

    width: 54px;
    height: 56px;
  }

  .hothub-logo-window img {
    left: -46px;

    width: 100px;
  }

  .public-brand {
    gap: 8px;
  }

  .public-brand-copy strong {
    font-size: 12px;
  }

  .public-brand-copy small {
    font-size: 7px;
  }

  .nav-actions {
    gap: 5px;
  }

  .nav-sign-in {
    min-height: 40px;
    padding: 0 9px;

    font-size: 11px;
  }

  .nav-create-account {
    min-height: 40px;
    padding: 0 11px;

    font-size: 11px;
  }

  .home-hero {
    gap: 28px;

    padding:
      34px
      16px
      32px;
  }

  .hero-content h1 {
    margin-top: 13px;

    font-size:
      clamp(40px, 12vw, 56px);

    line-height: 1.02;
  }

  .hero-content > p {
    font-size: 14px;
    line-height: 1.65;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;

    margin-top: 24px;
  }

  .public-primary-button,
  .public-secondary-button {
    width: 100%;
  }

  .hero-trust-row {
    gap: 9px 14px;

    margin-top: 22px;
  }

  .hero-trust-card {
    padding: 25px 20px;

    border-radius: 20px;
  }

  .hero-trust-card h2 {
    font-size: 30px;
  }

  .home-footer {
    align-items: flex-start;
    flex-direction: column;

    padding:
      18px
      16px
      calc(
        22px +
        env(safe-area-inset-bottom)
      );
  }

  .home-footer-links {
    flex-wrap: wrap;
    gap: 14px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-content h1,
  .hero-content > p,
  .hero-actions,
  .hero-trust-row,
  .hero-visual {
    animation: none !important;
  }
}



/* =========================================================
   FINAL PUBLIC WEBSITE V4
   Primary: #FF5303
   Secondary: #101419
   Tertiary teal: decorative orbit only
   ========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

.mc-site {
  --mc-orange-50: #fff4f3;
  --mc-orange-100: #ffe5e3;
  --mc-orange-200: #ffcbc5;
  --mc-orange-300: #ffb4aa;
  --mc-orange-400: #ff9788;
  --mc-orange-500: #ff775d;
  --mc-orange-600: #ff5303;
  --mc-orange-700: #c13c00;
  --mc-orange-800: #832600;
  --mc-orange-950: #2f0800;

  --mc-ink-50: #e4e8ef;
  --mc-ink-100: #c9d2df;
  --mc-ink-200: #97aac2;
  --mc-ink-300: #6f8095;
  --mc-ink-400: #4c5867;
  --mc-ink-500: #2d353f;
  --mc-ink-600: #101419;
  --mc-ink-700: #0e1116;
  --mc-ink-800: #080b0f;

  --mc-teal-300: #c9d2df;
  --mc-teal-600: #4c5867;
  --mc-teal-800: #1f252d;

  --mc-page: #fff8f7;
  --mc-surface: #fffdfc;

  min-height: 100vh;

  color: var(--mc-ink-400);
  background: var(--mc-page);

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
}

.mc-site *,
.mc-site *::before,
.mc-site *::after {
  box-sizing: border-box;
}

.mc-site a {
  color: inherit;
  text-decoration: none;
}

.mc-site button {
  font: inherit;
}

.mc-main {
  padding-top: 82px;
}

.mc-shell {
  width:
    min(
      1240px,
      calc(100% - 48px)
    );

  margin-inline: auto;
}

/* =========================================================
   FIXED NAVIGATION
   ========================================================= */

.mc-header {
  position: fixed;
  z-index: 1000;

  top: 0;
  right: 0;
  left: 0;

  border-bottom:
    1px solid
    rgba(228, 232, 239, 0.82);

  background:
    rgba(255, 248, 247, 0.94);

  box-shadow:
    0 5px 20px
    rgba(16, 20, 25, 0.035);

  backdrop-filter:
    blur(18px);
}

.mc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  min-height: 82px;
}

.mc-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
}

.mc-brand-logo {
  flex: 0 0 auto;

  width: 112px;
  height: 54px;

  object-fit: contain;
  object-position: left center;
}

.mc-brand-copy {
  display: grid;
  gap: 2px;
}

.mc-brand-copy strong {
  color: var(--mc-ink-600);

  font-size: 14px;
  font-weight: 700;
}

.mc-brand-copy small {
  color: var(--mc-ink-400);

  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.mc-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;

  color: var(--mc-ink-400);

  font-size: 13px;
  font-weight: 500;
}

.mc-nav-links a {
  position: relative;

  padding: 9px 0;

  transition:
    color 160ms ease;
}

.mc-nav-links a::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;

  height: 2px;

  border-radius: 999px;

  background:
    var(--mc-orange-600);

  transform: scaleX(0);
  transform-origin: left;

  transition:
    transform 180ms ease;
}

.mc-nav-links a:hover {
  color:
    var(--mc-ink-600);
}

.mc-nav-links a:hover::after {
  transform:
    scaleX(1);
}

.mc-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-sign-in {
  padding: 12px 10px;

  color:
    var(--mc-ink-500);

  font-size: 13px;
  font-weight: 500;

  transition:
    color 160ms ease;
}

.mc-sign-in:hover {
  color:
    var(--mc-orange-700);
}

.mc-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 44px;
  padding:
    0 18px;

  border:
    1px solid
    var(--mc-orange-600);

  border-radius: 12px;

  color: #ffffff;

  background:
    var(--mc-orange-600);

  font-size: 13px;
  font-weight: 500;

  box-shadow:
    0 8px 20px
    rgba(255, 83, 3, 0.12);

  transition:
    background-color 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

.mc-header-cta:hover {
  border-color:
    var(--mc-orange-700);

  background:
    var(--mc-orange-700);

  box-shadow:
    0 10px 24px
    rgba(255, 83, 3, 0.18);
}

/* =========================================================
   BODY BUTTON COLLECTION
   no hover movement
   ========================================================= */

.mc-pill-button {
  display: inline-grid;
  grid-template-columns:
    minmax(0, 1fr)
    40px;

  align-items: center;
  gap: 8px;

  min-width: 194px;
  height: 50px;

  padding:
    5px
    6px
    5px
    18px;

  border-radius: 100px;

  font-size: 13px;
  font-weight: 500;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mc-pill-button__label {
  min-width: 0;

  color: #ffffff;

  text-align: center;
  white-space: nowrap;
}

.mc-pill-button__circle {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border:
    1px solid
    var(--mc-ink-100);

  border-radius: 50%;

  color:
    var(--mc-ink-600);

  background:
    var(--mc-page);

  box-shadow:
    0 4px 12px
    rgba(16, 20, 25, 0.10);

  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

/* Primary */

.mc-pill-button--primary {
  border:
    1px solid
    var(--mc-orange-600);

  background:
    var(--mc-orange-600);

  box-shadow:
    0 10px 24px
    rgba(255, 83, 3, 0.14);
}

.mc-pill-button--primary:hover {
  border-color:
    var(--mc-orange-700);

  background:
    var(--mc-orange-700);

  box-shadow:
    0 12px 28px
    rgba(255, 83, 3, 0.18);
}

.mc-pill-button--primary:hover
.mc-pill-button__circle {
  border-color:
    var(--mc-orange-200);

  background:
    var(--mc-orange-50);
}

/* Secondary */

.mc-pill-button--secondary {
  border:
    1px solid
    var(--mc-ink-600);

  background:
    var(--mc-ink-600);

  box-shadow:
    0 10px 24px
    rgba(16, 20, 25, 0.10);
}

.mc-pill-button--secondary:hover {
  border-color:
    var(--mc-ink-500);

  background:
    var(--mc-ink-500);

  box-shadow:
    0 12px 28px
    rgba(16, 20, 25, 0.15);
}

.mc-pill-button--secondary:hover
.mc-pill-button__circle {
  border-color:
    var(--mc-ink-200);

  background:
    var(--mc-ink-50);
}

/* =========================================================
   HERO
   ========================================================= */

.mc-hero {
  position: relative;
  isolation: isolate;

  min-height:
    calc(100svh - 82px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 22%,
      rgba(255, 83, 3, 0.08),
      transparent 24rem
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(255, 180, 170, 0.16),
      transparent 28rem
    ),
    var(--mc-page);
}

.mc-hero::after {
  content: "";

  position: absolute;
  z-index: -1;

  top: 30px;
  right: -170px;

  width: 520px;
  height: 520px;

  border:
    1px solid
    rgba(255, 83, 3, 0.14);

  border-radius: 50%;

  box-shadow:
    0 0 0 58px
      rgba(255, 83, 3, 0.018),
    0 0 0 116px
      rgba(255, 83, 3, 0.012);

  pointer-events: none;
}

.mc-hero-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(390px, 1.08fr);

  align-items: center;

  gap:
    clamp(
      52px,
      8vw,
      118px
    );

  min-height:
    calc(100svh - 82px);

  padding:
    58px 0
    52px;
}

.mc-hero-copy {
  max-width: 650px;
}

.mc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin:
    0 0 18px;

  color:
    var(--mc-orange-700);

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.mc-kicker::before {
  content: "";

  width: 34px;
  height: 2px;

  border-radius: 999px;

  background:
    var(--mc-orange-600);
}

.mc-hero-title {
  margin: 0;

  color:
    var(--mc-ink-600);

  font-size:
    clamp(
      48px,
      6.1vw,
      78px
    );

  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.mc-hero-title span {
  position: relative;

  color:
    var(--mc-orange-600);
}

.mc-hero-title span::after {
  content: "";

  position: absolute;

  right: 5%;
  bottom: -7px;
  left: 6%;

  height: 4px;

  border-radius: 50%;

  background:
    var(--mc-orange-600);

  transform:
    rotate(-2deg);
}

.mc-hero-lede {
  max-width: 590px;

  margin:
    26px 0 0;

  color:
    var(--mc-ink-400);

  font-size:
    clamp(
      15px,
      1.35vw,
      17px
    );

  line-height: 1.72;
}

.mc-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 30px;
}

.mc-hero-note {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 26px;

  color:
    var(--mc-ink-300);

  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mc-hero-note::before {
  content: "";

  width: 44px;
  height: 4px;

  border-radius: 999px;

  background:
    var(--mc-orange-600);

  box-shadow:
    54px 0 0
      var(--mc-orange-100),
    108px 0 0
      var(--mc-orange-100);
}

/* Orbit: teal stays decorative only */

.mc-orbit {
  position: relative;

  display: grid;
  place-items: center;

  width:
    min(100%, 560px);

  aspect-ratio: 1;

  margin-inline: auto;
}

.mc-orbit-core {
  position: absolute;

  width: 68%;
  height: 68%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 36% 34%,
      var(--mc-orange-100) 0%,
      var(--mc-orange-300) 18%,
      var(--mc-orange-500) 42%,
      var(--mc-orange-600) 63%,
      rgba(255, 83, 3, 0.06) 73%,
      transparent 76%
    );

  filter:
    drop-shadow(
      0 24px 46px
      rgba(255, 83, 3, 0.17)
    );
}

.mc-orbit-core::before {
  content: "";

  position: absolute;
  inset: 11%;

  border:
    1px solid
    rgba(255, 248, 247, 0.82);

  border-radius: 50%;
}

.mc-orbit-ring {
  position: absolute;

  border-radius: 50%;
}

.mc-orbit-ring--one {
  width: 88%;
  height: 54%;

  border:
    2px solid
    rgba(255, 83, 3, 0.72);

  transform:
    rotate(-16deg);
}

.mc-orbit-ring--two {
  width: 104%;
  height: 78%;

  border:
    1px solid
    rgba(255, 83, 3, 0.19);

  transform:
    rotate(18deg);
}

.mc-orbit-ring--three {
  width: 98%;
  height: 98%;

  border:
    1px dashed
    rgba(255, 83, 3, 0.25);

  animation:
    mc-orbit-spin
    42s linear infinite;
}

.mc-orbit-ball {
  position: absolute;

  border-radius: 50%;
}

.mc-orbit-ball--orange {
  left: 19%;
  bottom: 17%;

  width: 54px;
  height: 54px;

  background:
    linear-gradient(
      145deg,
      var(--mc-orange-400),
      var(--mc-orange-600)
    );
}

.mc-orbit-ball--teal {
  top: 17%;
  right: 11%;

  width: 58px;
  height: 58px;

  background:
    linear-gradient(
      145deg,
      var(--mc-teal-300),
      var(--mc-teal-600),
      var(--mc-teal-800)
    );

  box-shadow:
    0 12px 28px
    rgba(46, 196, 182, 0.18);
}

.mc-orbit-dots {
  position: absolute;

  right: 1%;
  bottom: 14%;

  width: 88px;
  height: 88px;

  opacity: 0.72;

  background-image:
    radial-gradient(
      circle,
      var(--mc-orange-200)
      2px,
      transparent
      2.5px
    );

  background-size:
    18px 18px;
}

.mc-orbit-caption {
  position: absolute;

  right: 1%;
  top: 53%;

  display: grid;
  gap: 7px;

  width: 94px;

  color:
    var(--mc-ink-600);

  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.8;
  text-transform: uppercase;
}

.mc-orbit-caption span {
  width: 24px;
  height: 3px;

  border-radius: 999px;

  background:
    var(--mc-orange-600);
}

@keyframes mc-orbit-spin {
  to {
    transform:
      rotate(360deg);
  }
}

.mc-scroll-cue {
  position: absolute;

  right: 26px;
  bottom: 26px;

  display: grid;
  justify-items: center;
  gap: 8px;

  color:
    var(--mc-ink-300);

  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mc-scroll-cue span {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border:
    1px solid
    var(--mc-orange-300);

  border-radius: 50%;

  color:
    var(--mc-ink-600);
}

/* =========================================================
   SHARED SECTIONS
   ========================================================= */

.mc-section {
  padding:
    82px 0;

  scroll-margin-top:
    82px;
}

.mc-section--dark {
  color:
    var(--mc-ink-50);

  background:
    var(--mc-ink-600);
}

.mc-section--soft {
  background:
    var(--mc-orange-50);
}

.mc-section-head {
  max-width: 620px;

  margin-bottom: 36px;
}

.mc-section-eyebrow {
  margin:
    0 0 10px;

  color:
    var(--mc-orange-700);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.17em;
}

.mc-section--dark
.mc-section-eyebrow {
  color:
    var(--mc-orange-400);
}

.mc-section-head h2,
.mc-trust-heading h2 {
  margin: 0;

  color:
    var(--mc-ink-600);

  font-size:
    clamp(
      32px,
      4vw,
      48px
    );

  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.mc-section--dark
.mc-section-head h2 {
  color:
    var(--mc-ink-50);
}

.mc-section-head > p:last-child {
  margin:
    14px 0 0;

  color:
    var(--mc-ink-400);

  line-height: 1.7;
}

.mc-section--dark
.mc-section-head > p:last-child {
  color:
    var(--mc-ink-200);
}

/* ---------- HOW IT WORKS ---------- */

.mc-flow-grid {
  display: grid;
  grid-template-columns:
    repeat(5, 1fr);

  gap: 1px;

  overflow: hidden;

  border:
    1px solid
    rgba(228, 232, 239, 0.10);

  border-radius: 22px;

  background:
    rgba(228, 232, 239, 0.08);
}

.mc-flow-card {
  padding:
    26px 20px;

  background:
    var(--mc-ink-600);

  transition:
    background-color 180ms ease;
}

.mc-flow-card:hover {
  background:
    var(--mc-ink-500);
}

.mc-flow-card > span {
  color:
    var(--mc-orange-400);

  font-size: 26px;
  font-weight: 600;
}

.mc-flow-card h3 {
  margin:
    16px 0 7px;

  color:
    var(--mc-ink-50);

  font-size: 14px;
  font-weight: 600;
}

.mc-flow-card p {
  margin: 0;

  color:
    var(--mc-ink-200);

  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
   MENTOR TABS + SAMPLE CARDS
   ========================================================= */

.mc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 26px;
}

.mc-filter {
  min-height: 42px;

  padding:
    0 16px;

  border:
    1px solid
    var(--mc-ink-100);

  border-radius: 999px;

  color:
    var(--mc-ink-500);

  background:
    var(--mc-surface);

  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.mc-filter:hover {
  border-color:
    var(--mc-ink-600);

  color: #ffffff;

  background:
    var(--mc-ink-600);
}

.mc-filter.is-active {
  border-color:
    var(--mc-orange-600);

  color: #ffffff;

  background:
    var(--mc-orange-600);
}

.mc-mentor-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;
}

.mc-mentor-card {
  display: flex;
  flex-direction: column;

  min-height: 240px;
  padding: 24px;

  border:
    1px solid
    var(--mc-ink-50);

  border-top:
    3px solid
    var(--mc-orange-600);

  border-radius: 18px;

  background:
    var(--mc-surface);

  box-shadow:
    0 8px 26px
    rgba(16, 20, 25, 0.045);
}

.mc-mentor-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-avatar {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  color:
    var(--mc-ink-600);

  background:
    var(--mc-orange-100);

  font-size: 12px;
  font-weight: 600;
}

.mc-mentor-top strong {
  display: block;

  color:
    var(--mc-ink-600);

  font-weight: 600;
}

.mc-mentor-top small {
  display: block;

  margin-top: 3px;

  color:
    var(--mc-orange-700);

  font-size: 11px;
  font-weight: 500;
}

.mc-mentor-card > p {
  margin:
    18px 0;

  color:
    var(--mc-ink-400);

  font-size: 13px;
  line-height: 1.65;
}

.mc-mentor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  margin-top: auto;
  padding-top: 14px;

  border-top:
    1px solid
    var(--mc-ink-50);

  color:
    var(--mc-ink-300);

  font-size: 10px;
}

.mc-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding:
    0 14px;

  border:
    1px solid
    var(--mc-ink-600);

  border-radius: 999px;

  color: #ffffff;

  background:
    var(--mc-ink-600);

  font-size: 11px;
  font-weight: 500;

  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.mc-card-action:hover {
  border-color:
    var(--mc-ink-500);

  background:
    var(--mc-ink-500);
}

/* =========================================================
   COMPACT TRUST SECTION
   ========================================================= */

.mc-trust-section {
  color:
    var(--mc-ink-50);

  background:
    linear-gradient(
      135deg,
      var(--mc-ink-600),
      var(--mc-ink-500)
    );
}

.mc-trust-heading {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(280px, 0.55fr);

  align-items: end;
  gap: 52px;

  margin-bottom: 34px;
}

.mc-trust-heading
.mc-section-eyebrow {
  color:
    var(--mc-orange-400);
}

.mc-trust-heading h2 {
  color:
    var(--mc-ink-50);
}

.mc-trust-heading > p {
  margin: 0;

  color:
    var(--mc-ink-100);

  font-size: 13px;
  line-height: 1.7;
}

.mc-trust-cards {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.mc-trust-card {
  display: grid;
  grid-template-columns:
    38px 1fr;

  gap: 12px;

  min-height: 150px;
  padding: 20px;

  border:
    1px solid
    rgba(228, 232, 239, 0.10);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.045);
}

.mc-trust-card > span {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  color:
    var(--mc-orange-950);

  background:
    var(--mc-orange-600);
}

.mc-trust-card h3 {
  margin:
    3px 0 7px;

  color:
    var(--mc-ink-50);

  font-size: 13px;
  font-weight: 600;
}

.mc-trust-card p {
  margin: 0;

  color:
    var(--mc-ink-100);

  font-size: 11px;
  line-height: 1.58;
}

/* ---------- RATINGS ---------- */

.mc-rating-grid {
  display: grid;
  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;
}

.mc-rating-card {
  padding: 24px;

  border:
    1px solid
    var(--mc-ink-50);

  border-radius: 18px;

  background:
    var(--mc-surface);
}

.mc-rating-card > small {
  color:
    var(--mc-ink-300);
}

.mc-rating-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin:
    16px 0;
}

.mc-rating-card > div span {
  padding:
    7px 11px;

  border-radius: 999px;

  color:
    var(--mc-ink-500);

  background:
    var(--mc-ink-50);

  font-size: 10px;
  font-weight: 500;
}

.mc-rating-card p {
  margin: 0;

  color:
    var(--mc-ink-300);

  font-size: 11px;
  line-height: 1.55;
}

/* ---------- FINAL CTA ---------- */

.mc-section--cta {
  padding-bottom: 72px;
}

.mc-final-cta {
  overflow: hidden;

  padding: 54px;

  border-radius: 28px;

  color:
    var(--mc-ink-50);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 83, 3, 0.28),
      transparent 25rem
    ),
    var(--mc-ink-600);
}

.mc-final-cta h2 {
  max-width: 680px;

  margin: 0;

  color:
    var(--mc-ink-50);

  font-size:
    clamp(
      32px,
      4vw,
      50px
    );

  font-weight: 700;
  letter-spacing: -0.04em;
}

.mc-final-cta > p {
  max-width: 580px;

  margin:
    16px 0 28px;

  color:
    var(--mc-ink-200);

  line-height: 1.7;
}

/* =========================================================
   SECONDARY FOOTER
   ========================================================= */

.mc-footer {
  padding:
    46px 0 28px;

  color:
    var(--mc-ink-100);

  background:
    var(--mc-ink-600);
}

.mc-footer-grid {
  display: grid;
  grid-template-columns:
    1.3fr
    repeat(3, 1fr);

  gap: 38px;

  padding-bottom: 34px;
}

.mc-footer
.mc-brand-copy strong {
  color:
    var(--mc-ink-50);
}

.mc-footer
.mc-brand-copy small {
  color:
    var(--mc-ink-200);
}

.mc-footer-grid
> div:first-child
> p {
  max-width: 330px;

  color:
    var(--mc-ink-200);

  font-size: 12px;
  line-height: 1.65;
}

.mc-footer-grid
> div:not(:first-child) {
  display: grid;
  align-content: start;
  gap: 9px;
}

.mc-footer h5 {
  margin:
    0 0 4px;

  color:
    var(--mc-ink-50);

  font-size: 12px;
  font-weight: 600;
}

.mc-footer-grid a {
  color:
    var(--mc-ink-100);

  font-size: 12px;
  font-weight: 400;

  transition:
    color 160ms ease;
}

.mc-footer-grid a:hover {
  color:
    var(--mc-orange-400);
}

.mc-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(228, 232, 239, 0.10);

  color:
    var(--mc-ink-200);

  font-size: 10px;
}

/* ---------- REVEAL ---------- */

.mc-reveal {
  opacity: 0;

  transform:
    translateY(14px);

  transition:
    opacity 500ms ease,
    transform
      500ms
      cubic-bezier(
        .2,
        .8,
        .2,
        1
      );
}

.mc-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .mc-nav-links {
    display: none;
  }

  .mc-hero-grid {
    grid-template-columns:
      1fr;

    gap: 26px;

    min-height: auto;

    padding:
      52px 0 46px;
  }

  .mc-hero-copy {
    max-width: 760px;
  }

  .mc-orbit {
    width:
      min(
        100%,
        480px
      );
  }

  .mc-scroll-cue {
    display: none;
  }

  .mc-flow-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .mc-mentor-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .mc-trust-heading {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .mc-trust-cards {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .mc-footer-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 68px;
  }

  .mc-main {
    padding-top: 68px;
  }

  .mc-shell {
    width:
      min(
        calc(100% - 32px),
        1240px
      );
  }

  .mc-nav {
    min-height: 68px;
  }

  .mc-brand-logo {
    width: 82px;
    height: 42px;
  }

  .mc-brand-copy strong {
    font-size: 11px;
  }

  .mc-brand-copy small {
    font-size: 7px;
  }

  .mc-sign-in {
    display: none;
  }

  .mc-header-cta {
    min-height: 40px;
    padding:
      0 11px;

    font-size: 11px;
  }

  .mc-header-cta svg {
    width: 14px;
    height: 14px;
  }

  .mc-hero-grid {
    padding:
      38px 0 34px;
  }

  .mc-hero-title {
    font-size:
      clamp(
        42px,
        13vw,
        58px
      );
  }

  .mc-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mc-hero-actions
  .mc-pill-button {
    width: 100%;
  }

  .mc-orbit-caption,
  .mc-orbit-dots {
    display: none;
  }

  .mc-section {
    padding:
      66px 0;
  }

  .mc-flow-grid,
  .mc-mentor-grid,
  .mc-rating-grid,
  .mc-trust-cards,
  .mc-footer-grid {
    grid-template-columns: 1fr;
  }

  .mc-filters {
    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: 8px;

    scrollbar-width: none;
  }

  .mc-filters::-webkit-scrollbar {
    display: none;
  }

  .mc-filter {
    flex: 0 0 auto;
  }

  .mc-final-cta {
    padding:
      38px 24px;
  }

  .mc-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  html {
    scroll-behavior: auto;
  }

  .mc-site *,
  .mc-site *::before,
  .mc-site *::after {
    animation:
      none !important;

    transition-duration:
      0.001ms !important;
  }

  .mc-reveal {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   DASHBOARD LAYOUT — DARK SIDEBAR REFRESH
   No dropdowns. One direct route per menu item.
   ========================================================= */

.dashboard-sidebar,
.dashboard-mobile-header {
  --sidebar-bg: #101419;
  --sidebar-bg-deep: #080b0f;
  --sidebar-text: #e4e8ef;
  --sidebar-muted: #97aac2;
  --sidebar-border: rgba(201, 210, 223, 0.10);
  --sidebar-hover: rgba(255, 255, 255, 0.045);
  --sidebar-active: rgba(255, 255, 255, 0.07);
  --sidebar-orange: #ff5303;
}

/* ---------------------------------------------------------
   DESKTOP SIDEBAR
   --------------------------------------------------------- */

.dashboard-sidebar {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 260px;
  height: 100%;
  min-height: 0;

  padding: 24px 18px 20px;

  overflow-x: hidden;
  overflow-y: auto;

  color: var(--sidebar-text);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(76, 88, 103, 0.15),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      var(--sidebar-bg) 0%,
      var(--sidebar-bg-deep) 100%
    );

  border-right:
    1px solid var(--sidebar-border);

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dashboard-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 66px;
  padding: 0 4px 18px;

  border-bottom:
    1px solid var(--sidebar-border);
}

/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.dashboard-brand {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 12px;
}

.dashboard-brand-logo {
  flex: 0 0 auto;

  width: 54px;
  height: 54px;

  object-fit: contain;
}

.dashboard-brand-text {
  display: block;

  min-width: 0;
}

.dashboard-brand-text strong {
  display: block;

  overflow: hidden;

  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-brand-text small {
  display: block;

  margin-top: 5px;

  color: var(--sidebar-muted);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.16em;
}

/* Remove the old generated brand icon */
.dashboard-brand-icon {
  display: none !important;
}

/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.dashboard-sidebar nav {
  display: flex;
  flex-direction: column;

  gap: 7px;

  width: 100%;

  margin-top: 30px;
}

.dashboard-sidebar nav a {
  position: relative;

  display: flex;
  align-items: center;

  gap: 13px;

  width: 100%;
  min-height: 48px;

  padding: 0 14px;

  border: 1px solid transparent;
  border-radius: 12px;

  color: var(--sidebar-muted);
  background: transparent;

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.dashboard-sidebar nav a::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 3px;
  height: 20px;

  border-radius: 0 999px 999px 0;

  background: transparent;

  transform: translateY(-50%);
}

.dashboard-sidebar nav a:hover {
  color: #ffffff;

  background: var(--sidebar-hover);
}

.dashboard-sidebar nav a.active {
  border-color:
    rgba(255, 255, 255, 0.07);

  color: #ffffff;

  background: var(--sidebar-active);
}

.dashboard-sidebar nav a.active::before {
  background: var(--sidebar-orange);
}

/* Same icon colour across inactive items */
.dashboard-nav-icon {
  display: grid;
  place-items: center;

  flex: 0 0 22px;

  width: 22px;
  height: 22px;

  color: #c9d2df;
}

.dashboard-sidebar nav a:hover
.dashboard-nav-icon {
  color: #ffffff;
}

/* Orange is reserved for the active page icon */
.dashboard-sidebar nav a.active
.dashboard-nav-icon {
  color: var(--sidebar-orange);
}

/* ---------------------------------------------------------
   FOOTER ACTIONS
   --------------------------------------------------------- */

.dashboard-sidebar-footer {
  display: grid;

  gap: 8px;

  margin-top: auto;
  padding-top: 18px;

  border-top:
    1px solid var(--sidebar-border);
}

.become-mentor-button,
.sign-out-button {
  display: flex;
  align-items: center;

  gap: 12px;

  width: 100%;
  min-height: 46px;

  padding: 0 14px;

  border-radius: 12px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.become-mentor-button {
  border:
    1px solid rgba(255, 83, 3, 0.24);

  color: #e4e8ef;

  background:
    rgba(255, 83, 3, 0.055);
}

.become-mentor-button svg {
  color: #ff775d;
}

.become-mentor-button:hover {
  border-color:
    rgba(255, 83, 3, 0.38);

  color: #ffffff;

  background:
    rgba(255, 83, 3, 0.09);
}

.sign-out-button {
  border: 1px solid transparent;

  color: var(--sidebar-muted);

  background: transparent;
}

.sign-out-button svg {
  color: #c9d2df;
}

.sign-out-button:hover {
  color: #ffffff;

  background: var(--sidebar-hover);
}

/* ---------------------------------------------------------
   USER ROLE PILL
   Neutral secondary treatment instead of teal.
   --------------------------------------------------------- */

.dashboard-user small {
  border:
    1px solid #d7dee7 !important;

  color:
    #2d353f !important;

  background:
    #eef1f5 !important;
}

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

.dashboard-mobile-header,
.dashboard-menu-button,
.dashboard-menu-close,
.dashboard-menu-overlay {
  display: none;
}

@media (max-width: 1180px) {
  .dashboard-mobile-header {
    position: sticky;

    top: 0;
    z-index: 80;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    width: 100%;
    min-height: 68px;

    padding:
      9px clamp(16px, 3vw, 28px);

    border-bottom:
      1px solid var(--sidebar-border);

    background:
      rgba(16, 20, 25, 0.96);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .dashboard-mobile-header
  .dashboard-brand {
    width: auto;
    max-width: calc(100% - 58px);
  }

  .dashboard-mobile-header
  .dashboard-brand-logo {
    width: 46px;
    height: 46px;
  }

  .dashboard-menu-button {
    display: grid;
    place-items: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    padding: 0;

    border:
      1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    color: #ffffff;

    background:
      rgba(255, 255, 255, 0.05);

    cursor: pointer;
  }

  .dashboard-menu-button:hover {
    border-color:
      rgba(255, 83, 3, 0.24);

    color: #ff775d;
  }

  .dashboard-sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 100;

    width: min(320px, 88vw);
    height: 100dvh;

    transform: translateX(-105%);

    transition:
      transform 220ms ease;
  }

  .dashboard-sidebar.is-open {
    transform: translateX(0);
  }

  .dashboard-menu-close {
    display: grid;
    place-items: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    padding: 0;

    border:
      1px solid rgba(255, 255, 255, 0.08);

    border-radius: 11px;

    color: #ffffff;

    background:
      rgba(255, 255, 255, 0.04);

    cursor: pointer;
  }

  .dashboard-menu-overlay {
    position: fixed;

    inset: 0;

    z-index: 90;

    display: block;

    width: 100%;
    height: 100dvh;

    border: none;

    background:
      rgba(3, 4, 5, 0.58);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

@media (max-width: 520px) {
  .dashboard-sidebar {
    width: min(300px, 90vw);

    padding:
      18px 14px
      max(
        18px,
        env(safe-area-inset-bottom)
      );
  }

  .dashboard-sidebar nav {
    margin-top: 22px;
  }

  .dashboard-sidebar nav a {
    min-height: 46px;

    padding: 0 12px;
  }

  .dashboard-brand-logo {
    width: 48px;
    height: 48px;
  }
}
/* =========================================================
   DASHBOARD SIDEBAR — SECONDARY SELECTED CARD V5
   Secondary palette only.
   Selected navigation item follows the raised-card reference.
   ========================================================= */

.dashboard-sidebar,
.dashboard-mobile-header {
  --mc-sidebar-950: #030405;
  --mc-sidebar-900: #06070a;
  --mc-sidebar-800: #080b0f;
  --mc-sidebar-700: #0e1116;
  --mc-sidebar-600: #101419;
  --mc-sidebar-500: #2d353f;
  --mc-sidebar-400: #4c5867;
  --mc-sidebar-300: #6f8095;
  --mc-sidebar-200: #97aac2;
  --mc-sidebar-100: #c9d2df;
  --mc-sidebar-50: #e4e8ef;
}

@media (min-width: 1181px) {
  .dashboard-layout {
    grid-template-columns: 250px minmax(0, 1fr) !important;
  }
}

.dashboard-sidebar {
  position: sticky;
  top: 0;
  align-self: start;

  display: flex;
  flex-direction: column;

  width: 250px !important;
  height: 100vh;
  min-height: 0;

  padding: 22px 16px 18px !important;

  overflow-x: hidden;
  overflow-y: auto;

  color: var(--mc-sidebar-50);

  background:
    linear-gradient(
      180deg,
      var(--mc-sidebar-600) 0%,
      var(--mc-sidebar-800) 100%
    ) !important;

  border-right: 1px solid rgba(201, 210, 223, 0.08);

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dashboard-sidebar-top {
  display: flex !important;
  align-items: center;
  justify-content: space-between;

  min-height: 72px;
  padding: 2px 6px 20px !important;

  border-bottom: 1px solid rgba(201, 210, 223, 0.08);
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
}

.dashboard-brand-logo {
  flex: 0 0 auto;

  width: 50px;
  height: 50px;

  object-fit: contain;
}

.dashboard-brand-text {
  min-width: 0;
}

.dashboard-brand-text strong {
  display: block;

  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;

  white-space: nowrap;
}

.dashboard-brand-text small {
  display: block;

  margin-top: 5px;

  color: var(--mc-sidebar-200);

  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.17em;
}

.dashboard-brand-icon {
  display: none !important;
}

/* Navigation */

.dashboard-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;

  width: 100%;
  margin-top: 26px !important;
}

.dashboard-sidebar nav a {
  position: relative;

  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-height: 48px;
  padding: 0 12px !important;

  border: 1px solid transparent !important;
  border-radius: 14px !important;

  color: var(--mc-sidebar-100) !important;
  background: transparent !important;

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;

  box-shadow: none !important;

  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.dashboard-sidebar nav a::before,
.dashboard-sidebar nav a::after {
  content: none !important;
  display: none !important;
}

.dashboard-sidebar nav a:hover {
  color: #ffffff !important;
  background: rgba(76, 88, 103, 0.24) !important;
}

.dashboard-sidebar nav a.active {
  color: #ffffff !important;

  border-color: rgba(151, 170, 194, 0.18) !important;

  background:
    linear-gradient(
      180deg,
      rgba(76, 88, 103, 0.82) 0%,
      rgba(45, 53, 63, 0.96) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 20px rgba(3, 4, 5, 0.16) !important;
}

.dashboard-nav-icon {
  display: grid;
  place-items: center;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 10px;

  color: var(--mc-sidebar-100) !important;
  background: transparent !important;

  transition:
    color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.dashboard-sidebar nav a:hover .dashboard-nav-icon {
  color: #ffffff !important;
  background: rgba(76, 88, 103, 0.32) !important;
}

.dashboard-sidebar nav a.active .dashboard-nav-icon {
  color: #ffffff !important;
  background: var(--mc-sidebar-400) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 12px rgba(3, 4, 5, 0.18);
}

/* Sidebar footer */

.dashboard-sidebar-footer {
  display: grid;
  gap: 8px;

  width: 100%;
  margin-top: auto !important;
  padding-top: 16px !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom));

  border-top: 1px solid rgba(201, 210, 223, 0.08) !important;
}

.become-mentor-button,
.sign-out-button {
  display: flex;
  align-items: center;
  gap: 11px;

  width: 100%;
  min-height: 44px;
  padding: 0 13px !important;

  border-radius: 12px !important;

  font-family: inherit;
  font-size: 12px !important;
  font-weight: 600;
  text-align: left;

  cursor: pointer;

  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.become-mentor-button {
  border: 1px solid rgba(151, 170, 194, 0.16) !important;

  color: var(--mc-sidebar-50) !important;
  background: rgba(45, 53, 63, 0.42) !important;
}

.become-mentor-button svg {
  color: var(--mc-sidebar-100) !important;
}

.become-mentor-button:hover {
  border-color: rgba(151, 170, 194, 0.28) !important;

  color: #ffffff !important;
  background: rgba(76, 88, 103, 0.52) !important;
}

.sign-out-button {
  border: 1px solid transparent !important;

  color: var(--mc-sidebar-200) !important;
  background: transparent !important;
}

.sign-out-button svg {
  color: var(--mc-sidebar-100) !important;
}

.sign-out-button:hover {
  color: #ffffff !important;
  background: rgba(76, 88, 103, 0.22) !important;
}

/* Mobile / tablet */

.dashboard-mobile-header,
.dashboard-menu-button,
.dashboard-menu-close,
.dashboard-menu-overlay {
  display: none;
}

@media (max-width: 1180px) {
  .dashboard-mobile-header {
    position: sticky;
    top: 0;
    z-index: 80;

    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    width: 100%;
    min-height: 66px;
    padding: 8px clamp(16px, 3vw, 28px) !important;

    border-bottom: 1px solid rgba(201, 210, 223, 0.08) !important;

    background: rgba(16, 20, 25, 0.96) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .dashboard-mobile-header .dashboard-brand {
    width: auto;
    max-width: calc(100% - 56px);
  }

  .dashboard-mobile-header .dashboard-brand-logo {
    width: 44px;
    height: 44px;
  }

  .dashboard-mobile-header .dashboard-brand-text strong {
    color: #ffffff !important;
  }

  .dashboard-mobile-header .dashboard-brand-text small {
    color: var(--mc-sidebar-200) !important;
  }

  .dashboard-menu-button {
    display: grid !important;
    place-items: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid rgba(151, 170, 194, 0.16) !important;
    border-radius: 11px !important;

    color: #ffffff !important;
    background: rgba(45, 53, 63, 0.48) !important;

    cursor: pointer;
  }

  .dashboard-menu-button:hover {
    background: rgba(76, 88, 103, 0.58) !important;
  }

  .dashboard-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 100;

    width: min(300px, 88vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    padding: 18px 14px max(18px, env(safe-area-inset-bottom)) !important;

    overflow-x: hidden;
    overflow-y: auto;

    transform: translateX(-105%);
    transition: transform 220ms ease;
  }

  .dashboard-sidebar.is-open {
    transform: translateX(0);
  }

  .dashboard-menu-close {
    display: grid !important;
    place-items: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid rgba(151, 170, 194, 0.16) !important;
    border-radius: 10px !important;

    color: #ffffff !important;
    background: rgba(45, 53, 63, 0.48) !important;

    cursor: pointer;
  }

  .dashboard-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;

    display: block !important;

    width: 100%;
    height: 100dvh;
    padding: 0;

    border: 0;

    background: rgba(3, 4, 5, 0.58) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .dashboard-sidebar nav {
    margin-top: 20px !important;
  }
}

@media (max-width: 520px) {
  .dashboard-sidebar {
    width: min(286px, 90vw) !important;
  }

  .dashboard-sidebar nav a {
    min-height: 46px;
    padding: 0 11px !important;
  }

  .dashboard-brand-logo {
    width: 46px;
    height: 46px;
  }
}

/* =========================================================
   SIDEBAR V6 — QUIET "BECOME A MENTOR" ACTION
   Keep this at the very bottom of index.css.
   The active navigation item remains the only highlighted row.
   ========================================================= */

.dashboard-sidebar .become-mentor-button {
  min-height: 44px;

  padding: 0 12px !important;

  border: 1px solid transparent !important;
  border-radius: 11px !important;

  color: var(--mc-sidebar-200) !important;
  background: transparent !important;

  box-shadow: none !important;
}

.dashboard-sidebar .become-mentor-button svg {
  color: var(--mc-sidebar-100) !important;

  transition:
    color 150ms ease;
}

.dashboard-sidebar .become-mentor-button:hover {
  border-color: transparent !important;

  color: #ffffff !important;

  background:
    rgba(76, 88, 103, 0.22) !important;

  box-shadow: none !important;
}

.dashboard-sidebar .become-mentor-button:hover svg {
  color: #ffffff !important;
}

.dashboard-sidebar .become-mentor-button:focus-visible {
  outline:
    2px solid rgba(151, 170, 194, 0.30);

  outline-offset: 2px;
}

/* Sign out stays slightly quieter than Become a mentor. */
.dashboard-sidebar .sign-out-button {
  color: var(--mc-sidebar-300) !important;
}

.dashboard-sidebar .sign-out-button svg {
  color: var(--mc-sidebar-200) !important;
}


/* =========================================================
   V7 — MENTEE PROFILE CLEANUP
   White background + secondary text + primary accents
   ========================================================= */

/* ---------------------------------------------------------
   PROFILE PAGE BACKGROUND
   --------------------------------------------------------- */

body:has(.mentee-profile-form) .dashboard-layout,
body:has(.mentee-profile-form) .dashboard-content {
  background: #ffffff !important;
}

/* ---------------------------------------------------------
   PROFILE FORM WIDTH / SURFACES
   --------------------------------------------------------- */

.mentee-profile-form {
  width: 100%;
  max-width: 980px;
}

.mentee-profile-intro,
.mentee-profile-section {
  border:
    1px solid #e4e8ef !important;

  background:
    #ffffff !important;

  box-shadow:
    0 8px 24px rgba(16, 20, 25, 0.025);
}

/* ---------------------------------------------------------
   INTRO ICON
   Match the other section icons: simple line icon, no tile.
   --------------------------------------------------------- */

.mentee-profile-intro-icon {
  display: grid;
  place-items: center;

  flex:
    0 0 20px !important;

  width:
    20px !important;

  height:
    20px !important;

  margin-top:
    2px;

  border:
    0 !important;

  border-radius:
    0 !important;

  color:
    #ff5303 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

.mentee-profile-intro-icon svg {
  width:
    18px;

  height:
    18px;

  stroke-width:
    1.9;
}

/* ---------------------------------------------------------
   INTRO TYPOGRAPHY
   --------------------------------------------------------- */

.mentee-profile-intro .eyebrow {
  color:
    #ff5303 !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  letter-spacing:
    0.16em !important;
}

.mentee-profile-intro h2 {
  color:
    #101419 !important;

  font-weight:
    700 !important;
}

.mentee-profile-intro p,
.mentee-profile-section-heading p {
  color:
    #4c5867 !important;
}

/* ---------------------------------------------------------
   SECTION HEADINGS / ICONS
   --------------------------------------------------------- */

.mentee-profile-section-heading > svg {
  color:
    #ff5303 !important;

  stroke-width:
    1.9;
}

.mentee-profile-section-heading h3 {
  color:
    #101419 !important;

  font-weight:
    650 !important;
}

/* ---------------------------------------------------------
   FIELD LABELS
   --------------------------------------------------------- */

.mentee-profile-field,
.mentee-profile-options legend {
  color:
    #2d353f !important;

  font-size:
    13px !important;

  font-weight:
    600 !important;
}

.mentee-profile-field small {
  color:
    #6f8095 !important;

  font-weight:
    500 !important;
}

/* ---------------------------------------------------------
   TEXTAREAS
   --------------------------------------------------------- */

.mentee-profile-field textarea {
  border:
    1px solid #e4e8ef !important;

  color:
    #101419 !important;

  background:
    #f8f9fb !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;
}

.mentee-profile-field textarea::placeholder {
  color:
    #97aac2 !important;
}

.mentee-profile-field textarea:focus {
  border-color:
    #ff5303 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 0 0 3px
    rgba(255, 83, 3, 0.10) !important;
}

/* ---------------------------------------------------------
   CHECKBOX / AGREEMENT OPTIONS
   --------------------------------------------------------- */

.mentee-profile-checkbox-grid label,
.mentee-profile-agreements label {
  border:
    1px solid #e4e8ef !important;

  color:
    #4c5867 !important;

  background:
    #ffffff !important;

  font-size:
    11px !important;

  font-weight:
    500 !important;
}

.mentee-profile-checkbox-grid label:hover,
.mentee-profile-agreements label:hover {
  border-color:
    #c9d2df !important;

  background:
    #f8f9fb !important;
}

.mentee-profile-checkbox-grid label:has(input:checked),
.mentee-profile-agreements label:has(input:checked) {
  border-color:
    #ffcbc5 !important;

  color:
    #2d353f !important;

  background:
    #fff4f3 !important;
}

.mentee-profile-checkbox-grid input,
.mentee-profile-agreements input {
  accent-color:
    #ff5303 !important;
}

/* ---------------------------------------------------------
   SUCCESS MESSAGE
   Keep it calm and brand-consistent.
   --------------------------------------------------------- */

.mentee-profile-success {
  border:
    1px solid #ffcbc5 !important;

  color:
    #832600 !important;

  background:
    #fff4f3 !important;

  font-weight:
    500 !important;
}

/* ---------------------------------------------------------
   PLATFORM BUTTON TYPOGRAPHY
   Medium is the default dashboard button size.
   --------------------------------------------------------- */

.primary-button,
.secondary-button {
  min-height:
    42px !important;

  padding:
    0 16px !important;

  border-radius:
    10px !important;

  font-family:
    inherit !important;

  font-size:
    13px !important;

  font-weight:
    500 !important;

  line-height:
    1 !important;

  letter-spacing:
    0 !important;

  transform:
    none !important;
}

/* Primary */
.primary-button {
  border-color:
    #ff5303 !important;

  color:
    #ffffff !important;

  background:
    #ff5303 !important;

  box-shadow:
    0 8px 18px rgba(255, 83, 3, 0.12) !important;
}

.primary-button:hover:not(:disabled) {
  border-color:
    #ff775d !important;

  color:
    #ffffff !important;

  background:
    #ff775d !important;

  box-shadow:
    0 10px 22px rgba(255, 83, 3, 0.16) !important;

  transform:
    none !important;
}

.primary-button:focus-visible {
  outline:
    3px solid rgba(255, 83, 3, 0.16) !important;

  outline-offset:
    2px;
}

/* Secondary */
.secondary-button {
  border-color:
    #c9d2df !important;

  color:
    #101419 !important;

  background:
    #ffffff !important;
}

.secondary-button:hover:not(:disabled) {
  border-color:
    #97aac2 !important;

  color:
    #101419 !important;

  background:
    #f8f9fb !important;

  transform:
    none !important;
}

.secondary-button:focus-visible {
  outline:
    3px solid rgba(151, 170, 194, 0.18) !important;

  outline-offset:
    2px;
}

/* ---------------------------------------------------------
   SAVE PROFILE BUTTON
   Medium size, not heavy.
   --------------------------------------------------------- */

.mentee-profile-actions .primary-button {
  min-width:
    150px !important;

  min-height:
    42px !important;

  padding:
    0 16px !important;

  font-size:
    13px !important;

  font-weight:
    500 !important;
}

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

@media (max-width: 700px) {
  .mentee-profile-intro {
    align-items:
      flex-start;

    gap:
      12px;
  }

  .mentee-profile-actions .primary-button {
    width:
      100% !important;

    min-width:
      0 !important;
  }
}


/* =========================================================
   DASHBOARD HEADER LABEL — CONSISTENT FROM FIRST RENDER
   Prevent route-to-route orange/secondary colour flash.
   ========================================================= */

.dashboard-content > header > span > small {
  color: #2d353f !important;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.12em;
}

/* Keep every dashboard page on the same value. */
body:has(.mentee-overview-page)
.dashboard-content > header > span > small,
body:has(.mentee-profile-page)
.dashboard-content > header > span > small,
body:has(.dashboard-search-field)
.dashboard-content > header > span > small,
body:has(.mentee-requests-page)
.dashboard-content > header > span > small {
  color: #2d353f !important;
}


/* =========================================================
   V9 — GLOBAL DASHBOARD WHITE CANVAS
   Prevent orange/teal background flashes between routes.
   Dashboard pages start white before page-specific CSS loads.
   ========================================================= */

html,
body,
#root {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* The dashboard shell must never briefly inherit the old
   orange/teal global radial background. */
.dashboard-layout,
.dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Keep the content area white for the complete viewport. */
.dashboard-content {
  min-height: 100vh;
}

/* Remove decorative dashboard pseudo-layers if any older
   rules created them. */
.dashboard-layout::before,
.dashboard-layout::after,
.dashboard-content::before,
.dashboard-content::after {
  background-image: none !important;
}

/* Dashboard header label stays secondary from first paint. */
.dashboard-content > header > span > small {
  color: #2d353f !important;
}


/* =========================================================
   V10 — SMOOTH SIDEBAR HOVER
   Remove old translate/movement rules that make nav items
   feel like they shake on hover.
   ========================================================= */

.dashboard-sidebar nav a {
  box-sizing: border-box !important;

  transform: none !important;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

.dashboard-sidebar nav a:hover,
.dashboard-sidebar nav a:focus-visible,
.dashboard-sidebar nav a.active {
  transform: none !important;
}

/* Keep the icon perfectly still too. */
.dashboard-sidebar .dashboard-nav-icon,
.dashboard-sidebar nav a:hover .dashboard-nav-icon,
.dashboard-sidebar nav a.active .dashboard-nav-icon {
  transform: none !important;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease !important;
}

/* Smooth, stationary hover treatment. */
.dashboard-sidebar nav a:hover {
  color: #ffffff !important;
  background: rgba(76, 88, 103, 0.24) !important;

  border-color: transparent !important;
  box-shadow: none !important;
}

.dashboard-sidebar nav a:hover .dashboard-nav-icon {
  color: #ffffff !important;
  background: rgba(76, 88, 103, 0.32) !important;
}

/* The active page stays raised, but does not move. */
.dashboard-sidebar nav a.active {
  transform: none !important;
}

.dashboard-sidebar nav a.active:hover {
  transform: none !important;

  border-color: rgba(151, 170, 194, 0.18) !important;

  background:
    linear-gradient(
      180deg,
      rgba(76, 88, 103, 0.82) 0%,
      rgba(45, 53, 63, 0.96) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 20px rgba(3, 4, 5, 0.16) !important;
}

/* Footer actions should also stay still on hover. */
.dashboard-sidebar .become-mentor-button,
.dashboard-sidebar .sign-out-button {
  transform: none !important;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease !important;
}

.dashboard-sidebar .become-mentor-button:hover,
.dashboard-sidebar .sign-out-button:hover {
  transform: none !important;
}


/* =========================================================
   V11 — NEUTRAL DASHBOARD STARTUP / AUTH LOADING
   DashboardLayout renders .page-message while AuthContext
   is preparing. Keep that state pure white and secondary,
   so no old orange/warm screen appears during refresh.
   ========================================================= */

.page-message {
  color: #101419 !important;
  background: #ffffff !important;
  background-image: none !important;
}

/* Neutral loading spinner during dashboard preparation. */
.page-message .loader,
.loader {
  border-color: #e4e8ef !important;
  border-top-color: #4c5867 !important;
}

/* Keep preparation copy neutral too. */
.page-message p {
  color: #4c5867 !important;
}

/* No warm/orange canvas can leak through this state. */
html:has(.page-message),
body:has(.page-message),
body:has(.page-message) #root {
  background: #ffffff !important;
  background-image: none !important;
}


/* =========================================================
   V12 — MATCH MY REQUESTS LOADING / EMPTY STATE
   Remove the old warm #fff8f7 and teal treatment used by
   Overview, Profile, Find Mentor and Sessions while loading.
   ========================================================= */

.dashboard-empty-state {
  display: grid;
  justify-items: center;
  align-content: center;

  min-height: 360px;
  padding: 48px 24px;

  border: 1px solid #e4e8ef !important;
  border-radius: 18px;

  color: #101419 !important;

  background:
    linear-gradient(
      180deg,
      #fbfcfd 0%,
      #f7f8fa 100%
    ) !important;

  background-color: #ffffff !important;
  background-image:
    linear-gradient(
      180deg,
      #fbfcfd 0%,
      #f7f8fa 100%
    ) !important;

  text-align: center;

  box-shadow:
    0 10px 30px rgba(16, 20, 25, 0.025);
}

.dashboard-empty-state h2 {
  color: #101419 !important;
}

.dashboard-empty-state p {
  color: #4c5867 !important;
}

/* No orange spinner flash while page data loads. */
.dashboard-empty-state .loader {
  border-color: #e4e8ef !important;
  border-top-color: #4c5867 !important;
}

/* Remove the old teal empty-state icon. */
.dashboard-empty-state .empty-state-icon,
.empty-state-icon {
  color: #ff5303 !important;
  background: #fff4f3 !important;

  border: 1px solid #ffe5e3 !important;
}

/* The canvas behind these temporary states stays white. */
body:has(.dashboard-empty-state),
body:has(.dashboard-empty-state) #root,
body:has(.dashboard-empty-state) .dashboard-layout,
body:has(.dashboard-empty-state) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}


/* =========================================================
   V15 — FINAL RESPONSIVE DRAWER
   Smooth drawer + blurred backdrop + hard background scroll lock.
   DashboardLayout adds .is-open to the overlay and performs
   the actual scroll freeze with inline !important styles.
   ========================================================= */

@media (max-width: 1180px) {
  /* Drawer only glides horizontally. No spring/bounce movement. */
  .dashboard-sidebar {
    transform: translate3d(-100%, 0, 0) !important;

    transition:
      transform 240ms
      cubic-bezier(0.25, 0.8, 0.25, 1) !important;

    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .dashboard-sidebar.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Keep everything inside the drawer stationary. */
  .dashboard-sidebar-top,
  .dashboard-sidebar nav,
  .dashboard-sidebar-footer,
  .dashboard-sidebar nav a,
  .dashboard-sidebar nav button,
  .dashboard-sidebar .dashboard-nav-icon,
  .dashboard-sidebar .become-mentor-button,
  .dashboard-sidebar .sign-out-button {
    transform: none !important;
  }

  /*
    The overlay stays mounted.
    Closed = invisible/non-interactive.
    Open = dim + blur the complete page behind the drawer.
  */
  .dashboard-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90 !important;

    display: block !important;

    width: 100% !important;
    height: 100dvh !important;
    padding: 0 !important;

    border: 0 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background:
      rgba(3, 4, 5, 0.42) !important;

    backdrop-filter:
      blur(5px) !important;

    -webkit-backdrop-filter:
      blur(5px) !important;

    transition:
      opacity 200ms ease-out,
      visibility 0s linear 200ms !important;
  }

  .dashboard-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
      opacity 200ms ease-out,
      visibility 0s linear 0s !important;
  }

  /* Sidebar remains the ONLY scrollable surface while open. */
  .dashboard-sidebar.is-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch;

    touch-action:
      pan-y !important;
  }
}

/*
  These are backup rules.
  DashboardLayout also applies inline !important values because
  older rules in this file force body/html scrolling with !important.
*/
html.dashboard-menu-locked,
body.dashboard-menu-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Never let the page underneath receive gestures while drawer is open. */
body.dashboard-menu-locked
.dashboard-content {
  pointer-events: none !important;
}

/* Drawer and overlay remain interactive. */
body.dashboard-menu-locked
.dashboard-sidebar,
body.dashboard-menu-locked
.dashboard-menu-overlay {
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-sidebar,
  .dashboard-menu-overlay {
    transition: none !important;
  }
}


/* =========================================================
   FINAL SIDEBAR TYPOGRAPHY
   Softer navigation weight without changing size or spacing.
   ========================================================= */

.dashboard-sidebar nav a,
.dashboard-sidebar nav button {
  font-weight: 500 !important;
}

.dashboard-sidebar .become-mentor-button,
.dashboard-sidebar .sign-out-button,
.dashboard-sidebar .view-website-button {
  font-weight: 500 !important;
}



/* =========================================================
   FINAL MENTEE PROFILE VISUAL FIX
   Remove intro icon + use calm secondary focus styling.
   ========================================================= */

/* ---------------------------------------------------------
   REMOVE INTRO ICON
   --------------------------------------------------------- */

.mentee-profile-intro-icon {
  display: none !important;
}

/* Remove the gap that belonged to the icon. */
.mentee-profile-intro {
  gap: 0 !important;
}

/* ---------------------------------------------------------
   CALMER INPUT / TEXTAREA FOCUS
   Same treatment used on Become a mentor.
   --------------------------------------------------------- */

.mentee-profile-field textarea {
  border: 1px solid #c9d2df !important;

  color: #101419 !important;
  background: #ffffff !important;

  outline: none !important;

  box-shadow: none !important;
}

.mentee-profile-field textarea:hover {
  border-color: #97aac2 !important;
}

.mentee-profile-field textarea:focus,
.mentee-profile-field textarea:focus-visible,
.mentee-profile-field textarea:active {
  border-color: #4c5867 !important;

  outline: none !important;

  background: #ffffff !important;

  box-shadow:
    0 0 0 2px rgba(76, 88, 103, 0.10) !important;
}

.mentee-profile-field textarea::placeholder {
  color: #97aac2 !important;
}

/* ---------------------------------------------------------
   CHECKBOX KEYBOARD FOCUS
   Keep focus visible but not bright.
   --------------------------------------------------------- */

.mentee-profile-checkbox-grid input:focus-visible,
.mentee-profile-agreements input:focus-visible {
  outline:
    2px solid rgba(76, 88, 103, 0.28) !important;

  outline-offset: 2px !important;
}

/* =========================================================
   FINAL WHITE DASHBOARD CANVAS
   Keep this block at the very bottom of index.css.
   This prevents any older warm/peach dashboard rules above
   from appearing during navigation or refresh.
   ========================================================= */

.dashboard-layout,
.dashboard-content,
.dashboard-content > header,
.dashboard-mobile-header {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Admin page canvas */
body:has(.admin-overview-page),
body:has(.admin-list-section),
body:has(.admin-state-card),
body:has(.admin-overview-page) #root,
body:has(.admin-list-section) #root,
body:has(.admin-state-card) #root,
body:has(.admin-overview-page) .dashboard-layout,
body:has(.admin-list-section) .dashboard-layout,
body:has(.admin-state-card) .dashboard-layout,
body:has(.admin-overview-page) .dashboard-content,
body:has(.admin-list-section) .dashboard-content,
body:has(.admin-state-card) .dashboard-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Admin empty/loading/error states */
.admin-state-card {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Remove old peach surfaces from admin list/table areas */
.admin-list-section,
.admin-list-toolbar,
.admin-application-toolbar,
.admin-application-filters,
.admin-application-table-shell,
.admin-table-wrapper,
.admin-table-wrapper--flush,
.admin-data-table {
  background-color: #ffffff !important;
  background-image: none !important;
}

.admin-data-table thead,
.admin-data-table thead tr,
.admin-data-table thead th {
  background-color: #fbfcfd !important;
  background-image: none !important;
}

.admin-data-table tbody,
.admin-data-table tbody tr,
.admin-data-table tbody td {
  background-color: #ffffff !important;
  background-image: none !important;
}

.admin-data-table tbody tr:hover,
.admin-data-table tbody tr:hover td {
  background-color: #f8f9fb !important;
}

/* Pending remains orange text only */
.admin-status-badge.status-pending {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #c13c00 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Neutral admin identity surface */
body:has(.admin-overview-page) .dashboard-user,
body:has(.admin-list-section) .dashboard-user,
body:has(.admin-state-card) .dashboard-user {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Mobile/tablet dashboard header must never flash peach */
@media (max-width: 1180px) {
  .dashboard-mobile-header {
    background-color: #ffffff !important;
    background-image: none !important;
  }
}

/* =========================================================
   FINAL NO-GREEN / NO-TEAL PRODUCT OVERRIDE
   Mentor Connect uses white, dark neutrals and orange.
   ========================================================= */

.admin-success-message {
  border: 1px solid #e4e8ef !important;
  color: #2d353f !important;
  background: #f8f9fb !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Approved status is neutral, not green. */
.admin-status-badge.status-approved,
.status-approved {
  border-color: #d7dee7 !important;
  color: #2d353f !important;
  background: #eef1f5 !important;
  background-image: none !important;
}

/* Keep modal surfaces white and actions on-brand. */
.admin-application-review-modal,
.admin-confirmation-modal {
  background: #ffffff !important;
  background-image: none !important;
}

.admin-application-review-modal .admin-close-button,
.admin-confirmation-modal .admin-close-button {
  border: 1px solid #101419 !important;
  color: #ffffff !important;
  background: #101419 !important;
}

.admin-application-review-modal .admin-close-button:hover,
.admin-confirmation-modal .admin-close-button:hover {
  border-color: #2d353f !important;
  background: #2d353f !important;
}

/* =========================================================
   FINAL AUTHENTICATION FIELD FOCUS
   Secondary-colour focus only.
   No thick orange border/ring on registration or login pages.
   Keep this block at the very bottom of index.css.
   ========================================================= */

.register-field input,
.register-select-wrap select,
.login-field input,
.admin-login-form input,
.mentor-register-field input,
.auth-page form input,
.auth-page form select,
.auth-page form textarea,
.auth-page .registration-form .registration-field input,
.auth-page .registration-form .registration-field select,
.auth-page .registration-account-type .registration-select-field select {
  border-width: 1px !important;
}

.register-field input:focus,
.register-field input:focus-visible,
.register-select-wrap select:focus,
.register-select-wrap select:focus-visible,
.login-field input:focus,
.login-field input:focus-visible,
.admin-login-form input:focus,
.admin-login-form input:focus-visible,
.mentor-register-field input:focus,
.mentor-register-field input:focus-visible,
.auth-page form input:focus,
.auth-page form input:focus-visible,
.auth-page form select:focus,
.auth-page form select:focus-visible,
.auth-page form textarea:focus,
.auth-page form textarea:focus-visible,
.auth-page .registration-form .registration-field input:focus,
.auth-page .registration-form .registration-field input:focus-visible,
.auth-page .registration-form .registration-field select:focus,
.auth-page .registration-form .registration-field select:focus-visible,
.auth-page .registration-account-type .registration-select-field select:focus,
.auth-page .registration-account-type .registration-select-field select:focus-visible {
  border-color: #4c5867 !important;

  outline: none !important;

  box-shadow:
    0 0 0 1px
    rgba(76, 88, 103, 0.10) !important;
}

/* Neutral hover before focus. */
.register-field input:hover,
.register-select-wrap select:hover,
.login-field input:hover,
.admin-login-form input:hover,
.mentor-register-field input:hover,
.auth-page form input:hover,
.auth-page form select:hover,
.auth-page form textarea:hover {
  border-color: #97aac2 !important;
}

/* Password visibility controls also use secondary neutrals. */
.register-password-wrap > button:hover,
.login-password-wrap > button:hover,
.admin-password-toggle:hover:not(:disabled),
.mentor-register-password-wrap button:hover:not(:disabled) {
  color: #101419 !important;
  background: #f7f8fa !important;
}

.register-password-wrap > button:focus-visible,
.login-password-wrap > button:focus-visible,
.admin-password-toggle:focus-visible,
.mentor-register-password-wrap button:focus-visible {
  outline:
    1px solid
    rgba(76, 88, 103, 0.28) !important;

  outline-offset: 1px !important;
}

/* =========================================================
   MENTEE OVERVIEW STAT VALUE BALANCE
   Counts stay prominent. Text/date states are slightly
   smaller so "None", "Locked" and "Available" do not look
   visually heavier than numeric values.
   ========================================================= */

.mentee-overview-stat-copy strong {
  font-weight: 650 !important;
}

/* Next session + Messages are state/date values, not counts. */
.mentee-overview-stat-card:nth-child(3)
.mentee-overview-stat-copy strong,
.mentee-overview-stat-card:nth-child(4)
.mentee-overview-stat-copy strong {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Keep Profile completion + Mentorship requests as the stronger metrics. */
.mentee-overview-stat-card:nth-child(1)
.mentee-overview-stat-copy strong,
.mentee-overview-stat-card:nth-child(2)
.mentee-overview-stat-copy strong {
  font-size: 19px !important;
  font-weight: 650 !important;
}

/* =========================================================
   PUBLIC HOMEPAGE RESPONSIVE V3
   One authoritative mobile/tablet rule set.
   Keep this at the very bottom of index.css.
   ========================================================= */

/* ---------- TABLET ---------- */

@media (min-width: 681px) and (max-width: 1040px) {
  .mc-hero-grid {
    min-height: auto !important;

    gap: 20px !important;

    padding:
      34px 0
      38px !important;
  }

  .mc-hero-copy {
    max-width: 720px !important;
  }

  .mc-hero-actions,
  .mc-final-cta .mc-hero-actions {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: min(100%, 390px) !important;

    margin-top: 22px !important;
  }

  .mc-hero-actions .mc-pill-button,
  .mc-final-cta .mc-pill-button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 46px !important;

    grid-template-columns:
      minmax(0, 1fr)
      34px !important;

    padding:
      4px
      5px
      4px
      13px !important;

    font-size: 11px !important;
  }

  .mc-hero-actions .mc-pill-button__circle,
  .mc-final-cta .mc-pill-button__circle {
    width: 34px !important;
    height: 34px !important;
  }

  .mc-section {
    padding:
      50px 0 !important;
  }

  /*
    Tablet uses horizontal browsing for the larger content collections.
    Two cards are visible at a time with a small part of the next card.
  */
  .mc-flow-grid,
  .mc-mentor-grid,
  .mc-trust-cards,
  .mc-rating-grid {
    display: grid !important;

    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns:
      minmax(46%, 1fr) !important;

    gap: 14px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding:
      2px
      2px
      14px !important;

    scroll-snap-type:
      x mandatory;

    overscroll-behavior-inline:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none;
  }

  .mc-flow-grid::-webkit-scrollbar,
  .mc-mentor-grid::-webkit-scrollbar,
  .mc-trust-cards::-webkit-scrollbar,
  .mc-rating-grid::-webkit-scrollbar {
    display: none;
  }

  .mc-flow-grid > *,
  .mc-mentor-grid > *,
  .mc-trust-cards > *,
  .mc-rating-grid > * {
    scroll-snap-align:
      start;
  }
}

/* ---------- PHONE ---------- */

@media (max-width: 680px) {
  html {
    scroll-padding-top:
      64px !important;
  }

  .mc-main {
    padding-top:
      64px !important;
  }

  .mc-shell {
    width:
      min(
        calc(100% - 28px),
        1240px
      ) !important;
  }

  .mc-nav {
    min-height:
      64px !important;
  }

  .mc-hero {
    min-height:
      auto !important;
  }

  .mc-hero-grid {
    min-height:
      auto !important;

    gap:
      12px !important;

    padding:
      20px 0
      24px !important;
  }

  .mc-hero-copy {
    max-width:
      100% !important;
  }

  .mc-kicker {
    margin-bottom:
      10px !important;
  }

  .mc-hero-title {
    font-size:
      clamp(
        34px,
        10vw,
        43px
      ) !important;

    line-height:
      1.04 !important;
  }

  .mc-hero-lede {
    max-width:
      29rem;

    margin:
      14px auto
      0 !important;

    font-size:
      12.5px !important;

    line-height:
      1.58 !important;
  }

  /*
    Do not stack these actions.
    They deliberately stay side by side and stay compact.
  */
  .mc-site .mc-hero .mc-hero-actions,
  .mc-site .mc-final-cta .mc-hero-actions {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      7px !important;

    width:
      min(
        100%,
        278px
      ) !important;

    max-width:
      278px !important;

    margin:
      17px auto
      0 !important;
  }

  .mc-site
  .mc-hero
  .mc-hero-actions
  .mc-pill-button,
  .mc-site
  .mc-final-cta
  .mc-hero-actions
  .mc-pill-button {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      30px !important;

    gap:
      4px !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      42px !important;

    padding:
      4px
      4px
      4px
      9px !important;

    border-radius:
      999px !important;

    font-size:
      9.5px !important;

    font-weight:
      650 !important;

    line-height:
      1 !important;
  }

  .mc-site
  .mc-hero-actions
  .mc-pill-button__label {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }

  .mc-site
  .mc-hero-actions
  .mc-pill-button__circle {
    width:
      30px !important;

    height:
      30px !important;
  }

  .mc-site
  .mc-hero-actions
  .mc-pill-button__circle
  svg {
    width:
      14px !important;

    height:
      14px !important;
  }

  .mc-hero-note {
    margin-top:
      14px !important;
  }

  /* Shorter mobile sections reduce vertical travel. */
  .mc-section {
    padding:
      40px 0 !important;
  }

  .mc-section-heading {
    margin-bottom:
      18px !important;
  }

  .mc-section-heading h2,
  .mc-trust-heading h2,
  .mc-final-cta h2 {
    font-size:
      clamp(
        27px,
        8vw,
        34px
      ) !important;

    line-height:
      1.08 !important;
  }

  .mc-section-heading p,
  .mc-trust-heading > p,
  .mc-final-cta > p {
    margin-top:
      9px !important;

    font-size:
      11px !important;

    line-height:
      1.55 !important;
  }

  /*
    Swipe horizontally rather than forcing every card into
    one long vertical column.
  */
  .mc-flow-grid,
  .mc-mentor-grid,
  .mc-trust-cards,
  .mc-rating-grid {
    display:
      grid !important;

    grid-template-columns:
      none !important;

    grid-auto-flow:
      column !important;

    grid-auto-columns:
      minmax(
        84%,
        1fr
      ) !important;

    gap:
      12px !important;

    width:
      100%;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    padding:
      2px
      2px
      12px !important;

    scroll-snap-type:
      x mandatory;

    scroll-padding-inline:
      2px;

    overscroll-behavior-inline:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none;
  }

  .mc-flow-grid::-webkit-scrollbar,
  .mc-mentor-grid::-webkit-scrollbar,
  .mc-trust-cards::-webkit-scrollbar,
  .mc-rating-grid::-webkit-scrollbar {
    display:
      none;
  }

  .mc-flow-grid > *,
  .mc-mentor-grid > *,
  .mc-trust-cards > *,
  .mc-rating-grid > * {
    scroll-snap-align:
      start;
  }

  .mc-flow-card,
  .mc-mentor-card,
  .mc-trust-card,
  .mc-rating-card {
    min-width:
      0 !important;

    height:
      auto !important;
  }

  .mc-section--cta {
    padding:
      34px 0
      38px !important;
  }

  .mc-final-cta {
    padding:
      24px
      16px !important;

    border-radius:
      20px !important;

    text-align:
      center;
  }

  .mc-final-cta > p {
    max-width:
      28rem;

    margin:
      9px auto
      0 !important;
  }

  .mc-footer {
    padding:
      30px 0
      22px !important;
  }

  .mc-footer-grid {
    gap:
      20px !important;
  }
}

@media (max-width: 380px) {
  .mc-shell {
    width:
      min(
        calc(100% - 24px),
        1240px
      ) !important;
  }

  .mc-site
  .mc-hero
  .mc-hero-actions,
  .mc-site
  .mc-final-cta
  .mc-hero-actions {
    width:
      min(
        100%,
        258px
      ) !important;

    max-width:
      258px !important;

    gap:
      6px !important;
  }

  .mc-site
  .mc-hero
  .mc-hero-actions
  .mc-pill-button,
  .mc-site
  .mc-final-cta
  .mc-hero-actions
  .mc-pill-button {
    grid-template-columns:
      minmax(0, 1fr)
      28px !important;

    height:
      40px !important;

    padding:
      4px
      4px
      4px
      8px !important;

    font-size:
      9px !important;
  }

  .mc-site
  .mc-hero-actions
  .mc-pill-button__circle {
    width:
      28px !important;

    height:
      28px !important;
  }
}


/* =========================================================
   PRODUCTION CLOSEOUT — SHARED DASHBOARD LAYOUT
   Final rules for Mentee, Mentor and Admin dashboards.
   Keep this block at the very bottom of index.css.
   ========================================================= */

/* The page should never slide horizontally.
   Tables and intentional carousels keep their own internal scrolling. */
html,
body {
  overflow-x: hidden !important;
}

#root {
  max-width: 100%;
  overflow-x: clip !important;
}

/* ---------- RESPONSIVE DASHBOARD ---------- */

@media (max-width: 1180px) {
  /*
    The responsive header is fixed, so the dashboard needs an
    equal offset. Include the device safe area so content never
    sits underneath the top bar on iPhone/iPad.
  */
  .dashboard-mobile-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    min-height:
      calc(
        68px +
        env(safe-area-inset-top)
      ) !important;

    padding-top:
      env(safe-area-inset-top) !important;

    padding-right:
      max(
        16px,
        env(safe-area-inset-right)
      ) !important;

    padding-left:
      max(
        16px,
        env(safe-area-inset-left)
      ) !important;
  }

  .dashboard-layout {
    padding-top:
      calc(
        68px +
        env(safe-area-inset-top)
      ) !important;
  }

  /*
    The drawer itself remains the scrollable surface while open.
    This keeps every navigation item, Become a mentor / Become a
    mentee and Sign out reachable on shorter tablets and phones.
  */
  .dashboard-sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;

    padding-top:
      max(
        18px,
        calc(
          10px +
          env(safe-area-inset-top)
        )
      ) !important;

    padding-bottom:
      max(
        24px,
        calc(
          14px +
          env(safe-area-inset-bottom)
        )
      ) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;

    touch-action: pan-y !important;
  }

  .dashboard-sidebar-footer {
    margin-top: auto !important;
  }

  /*
    The overlay always stays mounted in the JSX.
    Closed state must therefore be completely non-interactive.
  */
  .dashboard-menu-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .dashboard-menu-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
    Main dashboard pages use normal document scrolling.
    Do not create a second vertical scroll surface here.
  */
  .dashboard-content {
    height: auto !important;
    max-height: none !important;

    overflow-y: visible !important;
  }
}

/* ---------- TABLET ---------- */

@media (min-width: 641px) and (max-width: 1180px) {
  .dashboard-content {
    padding-right:
      max(
        40px,
        env(safe-area-inset-right)
      ) !important;

    padding-left:
      max(
        40px,
        env(safe-area-inset-left)
      ) !important;
  }
}

/* ---------- PHONE ---------- */

@media (max-width: 640px) {
  .dashboard-mobile-header {
    padding-right:
      max(
        14px,
        env(safe-area-inset-right)
      ) !important;

    padding-left:
      max(
        14px,
        env(safe-area-inset-left)
      ) !important;
  }

  .dashboard-content {
    padding-right:
      max(
        16px,
        env(safe-area-inset-right)
      ) !important;

    padding-bottom:
      max(
        28px,
        calc(
          20px +
          env(safe-area-inset-bottom)
        )
      ) !important;

    padding-left:
      max(
        16px,
        env(safe-area-inset-left)
      ) !important;
  }
}

/* ---------- DESKTOP ---------- */

@media (min-width: 1181px) {
  .dashboard-sidebar {
    height: 100vh !important;
    height: 100dvh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .dashboard-sidebar-footer {
    margin-top: auto !important;

    padding-bottom:
      max(
        14px,
        env(safe-area-inset-bottom)
      ) !important;
  }
}