@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   SP-LANCELOT: STREAMING MODERN (DARK THEME)
   A cinematic, deep-space dark theme for the premium EAD platform
   Netflix meets MasterClass meets Notion
   ========================================================================== */

:root {
  --spl-bg:           #060810;          /* Deep space black */
  --spl-bg-soft:      #0c1024;          /* Slightly lighter */
  --spl-surface:      #12162c;          /* Card/panel backgrounds */
  --spl-surface-2:    #1a1f3a;          /* Elevated surfaces */
  --spl-surface-3:    #232848;          /* Highest elevation */
  --spl-border:       rgba(255,255,255,0.08);
  --spl-border-bright:rgba(255,255,255,0.16);
  --spl-text:         #eef0fa;          /* Primary text */
  --spl-text-secondary: #8b91b0;       /* Muted text */
  --spl-primary:      #7c5cff;          /* Rich violet */
  --spl-primary-bright: #a78bfa;       /* Lighter violet */
  --spl-accent:       #e040fb;          /* Hot magenta */
  --spl-accent-2:     #00e5ff;          /* Cyan pop (for success/badges) */
  --spl-success:      #22d3a7;          /* Emerald green */
  --spl-danger:       #ff4757;          /* Soft red */
  --spl-gradient:     linear-gradient(135deg, #7c5cff 0%, #e040fb 100%);
  --spl-radius-sm:    10px;
  --spl-radius:       16px;
  --spl-radius-lg:    24px;
  --spl-radius-xl:    32px;
  --spl-radius-pill:  999px;
  --spl-shadow:       0 8px 32px rgba(0,0,0,0.4);
  --spl-shadow-lg:    0 24px 64px rgba(0,0,0,0.6);
  --spl-shadow-glow:  0 0 40px rgba(124,92,255,0.15);
  --spl-transition:   all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --spl-font:         'Inter', 'Jost', system-ui, -apple-system, sans-serif;
}

/* O perfil com dropdown pertence somente ao desktop. No menu movel usamos
   .spl-mobile-account-item; esta regra final vence estilos legados das paginas. */
@media (max-width: 991.98px) {
  html body.sp-lancelot section.menu nav.navbar #navbarSupportedContent ul.navbar-nav > li.spl-profile-item {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Vitrine do aluno: cards legíveis e proporcionais em toda a largura. */
body.sp-lancelot-vitrine .slider1 .swiffy-slider {
  --swiffy-slider-item-count: 5;
  --swiffy-slider-item-gap: clamp(14px, 1.25vw, 22px);
  width: 100%;
  max-width: none;
}

body.sp-lancelot-vitrine .slider1 .slider-container {
  width: 100%;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

body.sp-lancelot-vitrine .slider1 .slider-container > li {
  min-width: 0;
}

@media (max-width: 1280px) {
  body.sp-lancelot-vitrine .slider1 .swiffy-slider {
    --swiffy-slider-item-count: 4;
  }
}

@media (max-width: 960px) {
  body.sp-lancelot-vitrine .slider1 .swiffy-slider {
    --swiffy-slider-item-count: 3;
  }
}

@media (max-width: 680px) {
  body.sp-lancelot-vitrine .slider1 .swiffy-slider {
    --swiffy-slider-item-count: 2;
    --swiffy-slider-item-gap: 12px;
  }

  body.sp-lancelot-vitrine .slider1 .swiffy-slider .slider-container {
    grid-auto-columns: var(--swiffy-slider-item-width) !important;
  }
}

@media (max-width: 420px) {
  body.sp-lancelot-vitrine .slider1 .swiffy-slider {
    --swiffy-slider-item-count: 1;
  }
}

/* ==========================================================================
   1. BODY & GLOBALS
   ========================================================================== */

/* Subtle noise texture overlay on body */
body.sp-lancelot::after {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.015) 0,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.4;
}

body.sp-lancelot {
  background-color: var(--spl-bg);
  color: var(--spl-text);
  font-family: var(--spl-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  min-height: 100vh;
}

body.sp-lancelot *, 
body.sp-lancelot *::before, 
body.sp-lancelot *::after {
  box-sizing: inherit;
}

body.sp-lancelot a,
body.sp-lancelot button {
  transition: var(--spl-transition);
  text-decoration: none;
}

body.sp-lancelot a:hover {
  text-decoration: none;
}

body.sp-lancelot h1,
body.sp-lancelot h2,
body.sp-lancelot h3,
body.sp-lancelot h4 {
  font-weight: 700;
  color: var(--spl-text);
  margin-top: 0;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

/* Scrollbars */
body.sp-lancelot ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.sp-lancelot ::-webkit-scrollbar-track {
  background: var(--spl-bg);
}
body.sp-lancelot ::-webkit-scrollbar-thumb {
  background: var(--spl-surface-3);
  border-radius: var(--spl-radius-pill);
}
body.sp-lancelot ::-webkit-scrollbar-thumb:hover {
  background: var(--spl-primary-bright);
}

/* Specific to Aula */
body.sp-lancelot-aula {
  min-height: 100vh;
}

/* ==========================================================================
   2. TOP NAVBAR
   ========================================================================== */
body.sp-lancelot section.menu > nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 76px;
  height: auto;
  background: rgba(6, 8, 16, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--spl-border);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  transition: var(--spl-transition);
}

body.sp-lancelot .navbar-brand img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  transition: var(--spl-transition);
}

body.sp-lancelot .navbar-brand {
  min-width: 180px;
  display: flex;
  align-items: center;
}

body.sp-lancelot .navbar-caption {
  color: var(--spl-text) !important;
  font-family: var(--spl-font);
  font-size: clamp(18px, 1.6vw, 25px) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

body.sp-lancelot .navbar-collapse {
  justify-content: flex-end;
}
body.sp-lancelot .navbar-brand:hover img {
  transform: scale(1.05);
}

body.sp-lancelot .navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--spl-radius-pill);
  background: rgba(255,255,255,0.025);
}

body.sp-lancelot .nav-link {
  color: var(--lct-text, var(--spl-text)) !important;
  font-size: 12px;
  font-weight: 700;
  min-height: 42px;
  padding: 9px 13px !important;
  border-radius: var(--spl-radius-pill);
  transition: var(--spl-transition);
  text-transform: uppercase;
  letter-spacing: 0.035em;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

body.sp-lancelot .nav-link .material-icons {
  width: 28px;
  height: 28px;
  margin-right: 7px;
  border-radius: 9px;
  background: rgba(124,92,255,0.12);
  color: var(--spl-primary-bright);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--spl-transition);
}

body.sp-lancelot .nav-link:hover,
body.sp-lancelot .nav-link.active {
  color: var(--lct-button-text, #fff) !important;
  background: linear-gradient(135deg, rgba(124,92,255,.2), rgba(224,64,251,.11));
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.2), 0 8px 24px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

body.sp-lancelot .nav-link:hover .material-icons,
body.sp-lancelot .nav-link.active .material-icons {
  color: var(--lct-button-text, #fff);
  background: var(--spl-gradient);
  box-shadow: 0 5px 16px rgba(124,92,255,.3);
}

/* Profile Trigger */
body.sp-lancelot .spl-profile-trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: #10152f !important;
  border: 1px solid rgba(167,139,250,.18);
  padding: 4px 16px 4px 4px;
  border-radius: var(--spl-radius-pill);
  cursor: pointer;
  transition: var(--spl-transition);
  /* O pill da conta é sempre escuro, inclusive nas paletas claras. Por isso
     seu texto precisa de contraste próprio e não pode herdar a cor geral. */
  color: #fff !important;
}

body.sp-lancelot .spl-profile-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

body.sp-lancelot .spl-profile-copy strong {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #fff !important;
  opacity: 1 !important;
}

body.sp-lancelot .spl-profile-copy small {
  color: rgba(255,255,255,.68) !important;
  font-size: 10px;
  font-weight: 500;
}

body.sp-lancelot .spl-profile-trigger:hover {
  background: #191f43 !important;
  border-color: var(--spl-border-bright);
}

body.sp-lancelot .spl-profile-trigger.dropdown-toggle::after {
  margin-left: 2px;
  color: var(--spl-primary-bright);
}

body.sp-lancelot .spl-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--spl-primary);
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.3);
  object-fit: cover;
}

body.sp-lancelot .spl-avatar-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--spl-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}

body.sp-lancelot .spl-profile-trigger .name {
  font-size: 14px;
  font-weight: 600;
}

body.sp-lancelot .spl-profile-trigger .chevron {
  font-size: 12px;
  color: rgba(255,255,255,.72) !important;
}

/* Profile Dropdown */
body.sp-lancelot .spl-profile-item {
  position: relative;
}

body.sp-lancelot .spl-profile-item .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  min-width: 220px;
  background: rgba(18, 22, 44, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--spl-border);
  border-radius: var(--spl-radius);
  padding: 12px;
  box-shadow: var(--spl-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--spl-transition);
  display: block;
}

body.sp-lancelot .spl-profile-item:hover .dropdown-menu,
body.sp-lancelot .spl-profile-item.show .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.sp-lancelot .dropdown-menu .dropdown-item {
  color: var(--spl-text-secondary);
  padding: 10px 16px;
  border-radius: var(--spl-radius-sm);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--spl-transition);
}

body.sp-lancelot .dropdown-menu .dropdown-item:hover {
  background: var(--spl-surface-3);
  color: var(--spl-text);
  transform: translateX(4px);
}

/* Painel de conta do aluno */
body.sp-lancelot .spl-profile-item .spl-account-menu {
  width: 310px;
  min-width: 310px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(20,25,48,.98), rgba(11,15,31,.98));
  border-color: rgba(167,139,250,.28);
  box-shadow: 0 24px 65px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05);
}

body.sp-lancelot .spl-account-menu__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 14px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(167,139,250,.16);
}

body.sp-lancelot .spl-account-menu__header > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.sp-lancelot .spl-account-menu__header small {
  color: var(--spl-primary-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.sp-lancelot .spl-account-menu__header strong {
  color: #fff;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sp-lancelot .spl-account-menu__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  object-fit: cover;
  border: 1px solid rgba(167,139,250,.45);
  box-shadow: 0 8px 22px rgba(124,92,255,.25);
}

body.sp-lancelot .spl-account-menu__avatar--fallback {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background: var(--spl-gradient);
}

body.sp-lancelot .spl-account-menu .dropdown-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 22px;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  color: var(--spl-text) !important;
}

body.sp-lancelot .spl-account-menu .dropdown-item > .material-icons:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--spl-primary-bright);
  background: rgba(124,92,255,.13);
  font-size: 19px;
}

body.sp-lancelot .spl-account-menu .dropdown-item > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

body.sp-lancelot .spl-account-menu .dropdown-item strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

body.sp-lancelot .spl-account-menu .dropdown-item small {
  color: var(--spl-text-secondary);
  font-size: 10px;
  line-height: 1.35;
}

body.sp-lancelot .spl-account-menu .spl-account-menu__arrow {
  align-self: center;
  color: var(--spl-text-secondary);
  font-size: 18px;
}

body.sp-lancelot .spl-account-menu .dropdown-item:hover {
  background: rgba(124,92,255,.14);
  transform: none;
}

body.sp-lancelot .spl-account-menu .spl-account-menu__logout {
  grid-template-columns: 38px minmax(0,1fr);
  margin-top: 7px;
  border-top: 1px solid rgba(255,255,255,.07);
  border-radius: 0 0 12px 12px;
}

body.sp-lancelot .spl-account-menu .spl-account-menu__logout > .material-icons:first-child,
body.sp-lancelot .spl-account-menu .spl-account-menu__logout strong {
  color: #fb7185;
}

body.sp-lancelot .spl-account-menu .spl-account-menu__logout > .material-icons:first-child {
  background: rgba(244,63,94,.11);
}

@media (max-width: 575px) {
  body.sp-lancelot .spl-profile-item .spl-account-menu {
    width: min(310px, calc(100vw - 28px));
    min-width: 0;
    right: -4px;
  }
}

/* Impede temas externos de exibirem o nome literal do Material Icons. */
body.sp-lancelot .material-icons,
body.sp-lancelot .pcv-points-chip .material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
}

body.sp-lancelot .spl-account-menu .material-icons,
body.sp-lancelot .pcv-points-chip .material-icons {
  font-size: 19px !important;
  line-height: 1 !important;
  width: auto;
}

body.sp-lancelot .spl-account-menu .dropdown-item,
body.sp-lancelot .spl-account-menu .dropdown-item * {
  text-decoration: none !important;
}

body.sp-lancelot .spl-account-menu .dropdown-item strong {
  font-family: 'Jost', sans-serif !important;
}

@media (max-width: 1240px) {
  body.sp-lancelot-certificates #busca-topo {
    display: none !important;
  }
  body.sp-lancelot-profile .navbar .container,
  body.sp-lancelot-certificates .navbar .container {
    max-width: calc(100% - 32px) !important;
  }
}

@media (max-width: 991.98px) {
  body.sp-lancelot-profile #busca-topo {
    display: block !important;
  }
}

/* Search */
body.sp-lancelot #busca-topo {
  position: relative;
}

body.sp-lancelot #busca-topo input[type=search] {
  background: rgba(18,22,44,.8);
  border: 1px solid var(--spl-border);
  color: var(--spl-text);
  padding: 9px 16px 9px 39px;
  border-radius: var(--spl-radius-pill);
  font-size: 14px;
  width: 178px;
  min-height: 42px;
  transition: var(--spl-transition);
}

body.sp-lancelot #busca-topo input[type=search]:focus {
  outline: none;
  border-color: var(--spl-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.2);
  width: 260px;
  background: var(--spl-surface-2);
}

body.sp-lancelot #busca-topo::before {
  content: "search";
  font-family: "Material Icons";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--spl-primary-bright);
  pointer-events: none;
  z-index: 1;
}

body.sp-lancelot #busca-topo input[type=search]::placeholder {
  color: #777e9f;
}

/* Notifications */
body.sp-lancelot .notification-container {
  position: relative;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1;
  vertical-align: middle;
}

body.sp-lancelot .notification-container:hover {
  background: transparent !important;
}

body.sp-lancelot .notification-container > .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--spl-header-control-border, var(--spl-border)) !important;
  border-radius: 12px;
  color: var(--spl-primary) !important;
  background: var(--spl-header-control-bg, var(--spl-surface-2)) !important;
  box-shadow: none !important;
  transform: none !important;
  line-height: 1 !important;
}

body.sp-lancelot .notification-container > .nav-link > .material-icons,
body.sp-lancelot .notification-container > .nav-link:hover > .material-icons,
body.sp-lancelot .notification-container > .nav-link:focus-visible > .material-icons {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--spl-primary) !important;
  font-size: 21px !important;
  line-height: 1 !important;
  transform: none !important;
}

body.sp-lancelot .notification-count {
  position: absolute;
  top: -2px;
  right: -4px;
  background: linear-gradient(135deg, #e040fb, #7c5cff);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 12px rgba(224, 64, 251, 0.6);
}

body.sp-lancelot .notification-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  right: auto;
  margin-top: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--spl-radius);
  box-shadow: var(--spl-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: var(--spl-transition);
  z-index: 1001;
  overflow: hidden;
}

body.sp-lancelot .notification-container.show .notification-dropdown {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

body.sp-lancelot .notification-dropdown .notification-header {
  padding: 16px;
  border-bottom: 1px solid var(--spl-border);
  font-weight: 700;
  font-size: 15px;
  color: var(--spl-text);
}

body.sp-lancelot .notification-dropdown .notification-body {
  max-height: 350px;
  overflow-y: auto;
}

body.sp-lancelot .notification-dropdown .list-group { margin: 0; padding: 0; list-style: none; }
body.sp-lancelot .notification-dropdown .list-group-item {
  margin: 0; padding: 0; border: 0; border-bottom: 1px solid #e9edf5;
  background: #fff; color: #172033;
}
body.sp-lancelot .sp-notification-link {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 8px; align-items: center;
  gap: 11px; width: 100%; padding: 14px 16px; color: #172033 !important;
  text-decoration: none !important; transition: background-color .18s ease;
}
body.sp-lancelot .sp-notification-link:hover,
body.sp-lancelot .sp-notification-link:focus-visible { background: #f6f3ff; color: #172033 !important; }
body.sp-lancelot .sp-notification-icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: #efe9ff; color: #7138e8; font-size: 19px;
}
body.sp-lancelot .sp-notification-copy { min-width: 0; }
body.sp-lancelot .sp-notification-copy strong,
body.sp-lancelot .sp-notification-copy small { display: block; }
body.sp-lancelot .sp-notification-copy strong {
  overflow: hidden; color: #172033 !important; font-size: 13px; font-weight: 750;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
body.sp-lancelot .sp-notification-copy small {
  margin-top: 3px; color: #758096 !important; font-size: 11px; line-height: 1.3;
}
body.sp-lancelot .sp-notification-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #8b3df1;
  box-shadow: 0 0 0 4px #efe9ff;
}
body.sp-lancelot .sp-notification-empty {
  padding: 20px 16px !important; color: #758096 !important; text-align: center; font-size: 13px;
}

body.sp-lancelot .notification-item {
  padding: 16px;
  border-bottom: 1px solid var(--spl-border);
  display: flex;
  gap: 12px;
  transition: var(--spl-transition);
}

body.sp-lancelot .notification-item:hover {
  background: var(--spl-surface-2);
}

body.sp-lancelot .notification-item.unread {
  background: rgba(124, 92, 255, 0.05);
}

body.sp-lancelot .notification-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--spl-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spl-primary);
  flex-shrink: 0;
}

body.sp-lancelot .notification-item-content h6 {
  font-size: 14px;
  margin-bottom: 4px;
}

body.sp-lancelot .notification-item-content p {
  font-size: 12px;
  color: var(--spl-text-secondary);
  margin-bottom: 0;
}

body.sp-lancelot .view-all-notifications {
  display: block;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #7138e8;
  background: #fbfaff;
  border-top: 1px solid #e9edf5;
  transition: var(--spl-transition);
}

body.sp-lancelot .view-all-notifications:hover {
  background: #f4efff;
  color: #5420bd;
}

body.sp-lancelot .view-all-notifications a { color: inherit !important; text-decoration: none !important; }

/* ==========================================================================
   3. VIDEO PLAYER SECTION
   ========================================================================== */
body.sp-lancelot-aula section.video1 {
  position: relative;
  background: transparent;
  padding-bottom: 3rem;
}

/* AMBIENT GLOW SIGNATURE VISUAL ELEMENT */
body.sp-lancelot-aula section.video1::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 60%;
  background: radial-gradient(circle, rgba(124,92,255,0.4) 0%, rgba(224,64,251,0.1) 40%, transparent 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  animation: glowPulse 8s ease-in-out infinite alternate;
}

body.sp-lancelot-aula .video1 > .container {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px;
}

body.sp-lancelot-aula .courseContainer {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  position: relative;
}

body.sp-lancelot-aula .video-wrapper {
  position: relative;
}

body.sp-lancelot-aula #videoContainer {
  /* O align-items:stretch do .courseContainer forcava a altura deste item
     ANTES do aspect-ratio ser calculado, e ai o navegador derivava a LARGURA
     a partir dessa altura esticada (video estreito, faixa preta do lado).
     A tentativa com "padding-top em %" tambem nao funcionou: padding
     percentual de um item flex e calculado em cima da largura do
     CONTAINER PAI (.courseContainer), nao da largura do proprio item, entao
     o video ficava desproporcional. A solucao certa: manter aspect-ratio,
     mas com align-self:flex-start para que este item NAO seja esticado pelo
     pai - assim a largura resolve primeiro (via flex-grow) e a altura vem
     corretamente do aspect-ratio. */
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-self: flex-start;
  position: relative;
  background: #000;
  border-radius: var(--spl-radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--spl-shadow-lg), var(--spl-shadow-glow);
  overflow: hidden;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .video-wrapper:hover,
body.sp-lancelot-aula #videoContainer:hover {
  border-color: rgba(255,255,255,0.25);
  box-shadow: var(--spl-shadow-lg), 0 0 60px rgba(124,92,255,0.3);
}

body.sp-lancelot-aula #videoContainer iframe,
body.sp-lancelot-aula #videoContainer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   4. LESSON MENU PANEL (SIDEBAR)
   ========================================================================== */
body.sp-lancelot-aula #lessonMenu {
  position: absolute;
  top: 68px;
  right: 16px;
  width: min(380px, calc(100% - 32px));
  flex-shrink: 0;
  background: rgba(18, 22, 44, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--spl-border);
  border-radius: var(--spl-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100% - 84px);
  box-shadow: var(--spl-shadow);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 29;
}

body.sp-lancelot-aula #lessonMenu.hidden {
  display: none !important;
}

body.sp-lancelot-aula .lesson-menu-header {
  padding: 24px;
  border-bottom: 1px solid var(--spl-border);
  background: rgba(255,255,255,0.02);
}

body.sp-lancelot-aula .lesson-menu-header h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--spl-text);
  font-weight: 700;
}

body.sp-lancelot-aula .lesson-menu-header .progress {
  height: 6px;
  background: var(--spl-surface-3);
  border-radius: var(--spl-radius-pill);
  overflow: hidden;
  margin-top: 12px;
}

body.sp-lancelot-aula .lesson-menu-header .progress-bar {
  background: var(--spl-gradient);
  height: 100%;
  border-radius: var(--spl-radius-pill);
}

body.sp-lancelot-aula .lesson-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Modules & Lessons */
body.sp-lancelot-aula .module-item {
  margin-bottom: 16px;
}

body.sp-lancelot-aula .module-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--spl-text-secondary);
  font-weight: 700;
  margin-bottom: 12px;
  padding-left: 8px;
}

body.sp-lancelot-aula .lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--spl-radius);
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .lesson-item:hover {
  background: var(--spl-surface-2);
  border-color: var(--spl-border);
}

body.sp-lancelot-aula .lesson-item.current-lesson {
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.1) 0%, rgba(224, 64, 251, 0.05) 100%);
  border-color: rgba(124, 92, 255, 0.3);
  box-shadow: inset 4px 0 0 var(--spl-primary);
}

body.sp-lancelot-aula .lesson-item.completed-lesson .lesson-icon {
  color: var(--spl-success);
}

body.sp-lancelot-aula .lesson-item.locked-lesson {
  opacity: 0.5;
  cursor: not-allowed;
}

body.sp-lancelot-aula .lesson-item.locked-lesson:hover {
  background: transparent;
  border-color: transparent;
}

body.sp-lancelot-aula .lesson-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spl-text-secondary);
  font-size: 14px;
}

body.sp-lancelot-aula .current-lesson .lesson-icon {
  color: var(--spl-primary);
}

body.sp-lancelot-aula .lesson-info {
  flex: 1;
}

body.sp-lancelot-aula .lesson-info h5 {
  font-size: 14px;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--spl-text);
}

body.sp-lancelot-aula .current-lesson .lesson-info h5 {
  color: var(--spl-text);
  text-shadow: 0 0 10px rgba(124,92,255,0.5);
}

body.sp-lancelot-aula .lesson-info span {
  font-size: 12px;
  color: var(--spl-text-secondary);
}

/* Botao "Aulas" (abre o menu com a lista de aulas do curso).
   Antes ficava com display:none e so aparecia no mobile - isso escondia o
   unico jeito de acessar a lista de aulas no desktop. Tambem estava com
   position:fixed no canto inferior direito da TELA (nao do video), fazendo
   ele flutuar la embaixo, longe do video, sobrepondo o conteudo da pagina.
   Agora fica ancorado no canto superior direito do proprio video. */
body.sp-lancelot-aula .menu-toggle {
  display: flex;
  position: absolute;
  top: 12px;
  right: 18px;
  bottom: auto;
  left: auto;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--spl-radius-pill);
  background: var(--spl-gradient);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  box-shadow: var(--spl-shadow-lg), var(--spl-shadow-glow);
  z-index: 30;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .menu-toggle:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* ==========================================================================
   5. LESSON INFO AREA
   ========================================================================== */
body.sp-lancelot-aula .lesson-details-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 24px;
}

body.sp-lancelot-aula .breadcrumb-nav {
  margin-bottom: 1rem;
}

body.sp-lancelot-aula .breadcrumb-nav h6 {
  font-size: 13px;
  color: var(--spl-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.sp-lancelot-aula .breadcrumb-nav a {
  color: var(--spl-primary-bright);
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .breadcrumb-nav a:hover {
  color: var(--spl-accent);
}

body.sp-lancelot-aula .lesson-header {
  margin-bottom: 1.5rem;
}

body.sp-lancelot-aula .lesson-header h2.text-light {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--lct-text, var(--spl-text)) !important;
  text-shadow: none;
}

body.sp-lancelot-aula .tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

body.sp-lancelot-aula .tag-link {
  padding: 4px 12px;
  background: var(--spl-surface-2);
  border: 1px solid var(--spl-border);
  border-radius: var(--spl-radius-pill);
  font-size: 12px;
  color: var(--spl-text);
  font-weight: 600;
  text-transform: uppercase;
}

body.sp-lancelot-aula .tag-link:hover {
  background: var(--spl-surface-3);
  border-color: var(--spl-primary);
  color: var(--spl-primary-bright);
}

body.sp-lancelot-aula .description-box {
  background: rgba(18, 22, 44, 0.4);
  backdrop-filter: blur(12px);
  border: 1px solid var(--spl-border);
  border-radius: var(--spl-radius);
  padding: 24px;
  font-size: 16px;
  color: var(--spl-text-secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
}

body.sp-lancelot-aula .description-box p:last-child {
  margin-bottom: 0;
}

/* Attachments */
body.sp-lancelot-aula .anexos-section {
  margin-bottom: 2rem;
}

body.sp-lancelot-aula .anexos-section h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--spl-text);
}

body.sp-lancelot-aula .anexos-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  body.sp-lancelot-aula .anexos-lista {
    grid-template-columns: 1fr;
  }
}

body.sp-lancelot-aula .anexo-button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--spl-surface);
  border: 1px solid var(--spl-border);
  padding: 16px;
  border-radius: var(--spl-radius);
  color: var(--spl-text);
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .anexo-button:hover {
  background: var(--spl-surface-2);
  border-color: var(--spl-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(124,92,255,0.1);
  color: #fff;
}

body.sp-lancelot-aula .anexo-button .icon {
  width: 40px;
  height: 40px;
  background: rgba(124,92,255,0.1);
  border-radius: var(--spl-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spl-primary);
  font-size: 20px;
}

body.sp-lancelot-aula .anexo-button .info {
  display: flex;
  flex-direction: column;
}

body.sp-lancelot-aula .anexo-button .info .name {
  font-weight: 600;
  font-size: 14px;
}

body.sp-lancelot-aula .anexo-button .info .size {
  font-size: 12px;
  color: var(--spl-text-secondary);
}

/* ==========================================================================
   6. ACTION BUTTONS DOCK
   ========================================================================== */
body.sp-lancelot-aula .actions-dock {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: rgba(18, 22, 44, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--spl-border);
  border-radius: var(--spl-radius-xl);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--spl-shadow);
}

body.sp-lancelot-aula .actions-dock .col-12.align-center.p-4 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 !important;
}

body.sp-lancelot-aula .button-list {
  display: flex;
  gap: 12px;
  align-items: center;
}

body.sp-lancelot-aula .botao_red_white {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--spl-surface-2);
  border: 1px solid var(--spl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spl-text);
  font-size: 18px;
  cursor: pointer;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .botao_red_white:hover {
  background: var(--spl-primary);
  border-color: var(--spl-primary-bright);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(124,92,255,0.4);
}

body.sp-lancelot-aula .botao_red_white.active {
  background: var(--spl-accent);
  color: #fff;
  border-color: var(--spl-accent);
  box-shadow: 0 4px 15px rgba(224,64,251,0.4);
}

body.sp-lancelot-aula .nav-buttons {
  display: flex;
  gap: 16px;
}

body.sp-lancelot-aula .btn-lancelot,
body.sp-lancelot-aula .button-anterior,
body.sp-lancelot-aula .button-proxima {
  padding: 12px 24px;
  border-radius: var(--spl-radius-pill);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .button-anterior {
  background: var(--spl-surface-2);
  color: var(--spl-text);
  border: 1px solid var(--spl-border);
}

body.sp-lancelot-aula .button-anterior:hover {
  background: var(--spl-surface-3);
  border-color: var(--spl-border-bright);
}

body.sp-lancelot-aula .button-proxima,
body.sp-lancelot-aula .btn-lancelot.primary {
  background: var(--spl-gradient);
  color: #fff;
  box-shadow: 0 4px 15px rgba(124,92,255,0.3);
}

body.sp-lancelot-aula .button-proxima:hover,
body.sp-lancelot-aula .btn-lancelot.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124,92,255,0.5);
  filter: brightness(1.1);
}

/* ==========================================================================
   7. TABS SECTION
   ========================================================================== */
body.sp-lancelot-aula section.tabs.content18 {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 4rem;
}

body.sp-lancelot-aula .nav-tabs {
  border-bottom: 1px solid var(--spl-border);
  gap: 8px;
  margin-bottom: 24px;
}

body.sp-lancelot-aula .nav-tabs .nav-link {
  background: transparent;
  border: none;
  color: var(--spl-text-secondary);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--spl-radius-sm) var(--spl-radius-sm) 0 0;
  position: relative;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .nav-tabs .nav-link:hover {
  color: var(--spl-text);
}

body.sp-lancelot-aula .nav-tabs .nav-link.active {
  color: #fff;
  background: transparent;
}

body.sp-lancelot-aula .nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--spl-gradient);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 10px rgba(124,92,255,0.5);
}

body.sp-lancelot-aula .tab-content {
  background: rgba(18, 22, 44, 0.4);
  backdrop-filter: blur(12px);
  border: 1px solid var(--spl-border);
  border-radius: var(--spl-radius-lg);
  padding: 32px;
  box-shadow: var(--spl-shadow);
}

/* Comments Form inside Tabs */
body.sp-lancelot-aula .comment-form-wrapper {
  margin-bottom: 2rem;
}

body.sp-lancelot-aula .comment-form-wrapper textarea {
  width: 100%;
  background: var(--spl-surface);
  border: 1px solid var(--spl-border);
  border-radius: var(--spl-radius);
  padding: 16px;
  color: var(--spl-text);
  font-family: var(--spl-font);
  resize: vertical;
  min-height: 120px;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .comment-form-wrapper textarea:focus {
  outline: none;
  border-color: var(--spl-primary);
  background: var(--spl-surface-2);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.1);
}

body.sp-lancelot-aula .comment-item {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--spl-border);
}

body.sp-lancelot-aula .comment-item:last-child {
  border-bottom: none;
}

body.sp-lancelot-aula .comment-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--spl-surface-3);
}

body.sp-lancelot-aula .comment-content {
  flex: 1;
}

body.sp-lancelot-aula .comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

body.sp-lancelot-aula .comment-name {
  font-weight: 700;
  color: var(--spl-text);
  font-size: 15px;
}

body.sp-lancelot-aula .comment-date {
  font-size: 12px;
  color: var(--spl-text-secondary);
}

body.sp-lancelot-aula .comment-text {
  color: var(--spl-text-secondary);
  line-height: 1.6;
  font-size: 14px;
}

/* ==========================================================================
   8. LESSON CAROUSEL SLIDERS
   ========================================================================== */
body.sp-lancelot-aula section.slider1 {
  padding: 4rem 24px;
  background: var(--spl-bg-soft);
  position: relative;
}

body.sp-lancelot-aula section.slider1 h3 {
  max-width: 1440px;
  margin: 0 auto 2rem;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

body.sp-lancelot-aula .swiffy-slider {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

body.sp-lancelot-aula .slider-container {
  display: flex;
  gap: 1.5rem;
}

body.sp-lancelot-aula .destaque_aula {
  position: relative;
  background: var(--spl-surface);
  border-radius: var(--spl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--spl-border);
  transition: var(--spl-transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
}

body.sp-lancelot-aula .destaque_aula:hover {
  transform: translateY(-8px);
  box-shadow: var(--spl-shadow-lg);
  border-color: var(--spl-border-bright);
}

body.sp-lancelot-aula .destaque_aula .thumb-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

body.sp-lancelot-aula .destaque_aula .thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.sp-lancelot-aula .destaque_aula:hover .thumb-wrapper img {
  transform: scale(1.05);
}

body.sp-lancelot-aula .destaque_aula .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,8,16,1) 0%, rgba(6,8,16,0) 60%);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

body.sp-lancelot-aula .destaque_aula .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 48px;
  height: 48px;
  background: rgba(124,92,255,0.8);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  opacity: 0;
  transition: var(--spl-transition);
}

body.sp-lancelot-aula .destaque_aula:hover .play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

body.sp-lancelot-aula .dias-acesso-mod {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: var(--spl-radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--spl-accent-2);
  border: 1px solid rgba(0,229,255,0.3);
}

body.sp-lancelot-aula .destaque_aula .info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.sp-lancelot-aula .destaque_aula .info h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--spl-text);
  margin-bottom: 8px;
  line-height: 1.4;
}

body.sp-lancelot-aula .destaque_aula .info p {
  font-size: 13px;
  color: var(--spl-text-secondary);
  margin-bottom: 16px;
  flex: 1;
}

body.sp-lancelot-aula .destaque_aula .progress-container {
  margin-top: auto;
}

body.sp-lancelot-aula .destaque_aula .progress {
  height: 4px;
  background: var(--spl-surface-3);
  border-radius: 2px;
  overflow: hidden;
}

body.sp-lancelot-aula .destaque_aula .progress-bar {
  background: var(--spl-success);
  height: 100%;
}

/* Slider Nav Buttons */
body.sp-lancelot-aula .slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(18, 22, 44, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--spl-border);
  color: var(--spl-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: var(--spl-transition);
  z-index: 10;
}

body.sp-lancelot-aula .slider-nav:hover {
  background: var(--spl-primary);
  border-color: var(--spl-primary-bright);
  color: #fff;
}

body.sp-lancelot-aula .slider-nav.slider-nav-prev {
  left: -24px;
}

body.sp-lancelot-aula .slider-nav.slider-nav-next {
  right: -24px;
}

/* ==========================================================================
   9. MODALS, FORMS & INPUTS
   ========================================================================== */
body.sp-lancelot .modal-content {
  background: var(--spl-surface);
  border: 1px solid var(--spl-border-bright);
  border-radius: var(--spl-radius-lg);
  box-shadow: var(--spl-shadow-lg);
}

body.sp-lancelot .modal-header {
  border-bottom: 1px solid var(--spl-border);
  padding: 24px;
}

body.sp-lancelot .modal-title {
  font-weight: 800;
  color: var(--spl-text);
}

body.sp-lancelot .modal-body {
  padding: 24px;
}

body.sp-lancelot .modal-footer {
  border-top: 1px solid var(--spl-border);
  padding: 24px;
}

body.sp-lancelot .btn-close {
  background-color: #fff;
  opacity: 0.5;
  transition: var(--spl-transition);
}

body.sp-lancelot .btn-close:hover {
  opacity: 1;
}

body.sp-lancelot .form-control,
body.sp-lancelot .form-select {
  background-color: var(--spl-surface-2);
  border: 1px solid var(--spl-border);
  color: var(--spl-text);
  padding: 12px 16px;
  border-radius: var(--spl-radius-sm);
  transition: var(--spl-transition);
}

body.sp-lancelot .form-control:focus,
body.sp-lancelot .form-select:focus {
  background-color: var(--spl-surface-3);
  border-color: var(--spl-primary);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.1);
  color: var(--spl-text);
}

body.sp-lancelot .form-label {
  color: var(--spl-text-secondary);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
body.sp-lancelot footer {
  background: var(--spl-bg);
  border-top: 1px solid var(--spl-border);
  padding: 4rem 24px;
  margin-top: auto;
}

body.sp-lancelot footer .footer-content {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

body.sp-lancelot footer h5 {
  color: var(--spl-text);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

body.sp-lancelot footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.sp-lancelot footer ul li {
  margin-bottom: 12px;
}

body.sp-lancelot footer ul li a {
  color: var(--spl-text-secondary);
  font-size: 14px;
  transition: var(--spl-transition);
}

body.sp-lancelot footer ul li a:hover {
  color: var(--spl-primary-bright);
}

body.sp-lancelot footer .footer-bottom {
  max-width: 1440px;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--spl-border);
  text-align: center;
  color: var(--spl-text-secondary);
  font-size: 13px;
}

/* ==========================================================================
   11. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Large screens */
@media (min-width: 1200px) {
  body.sp-lancelot-aula .courseContainer {
    /* Sem altura fixa em vh: isso entrava em conflito com o aspect-ratio
       16:9 do #videoContainer (o navegador calculava a largura a partir da
       altura, deixando o video estreito com faixas pretas ao lado). Agora a
       altura do video vem naturalmente da largura via aspect-ratio. */
    min-height: 0;
  }
}

/* Tablets & Small Laptops */
@media (max-width: 992px) {
  body.sp-lancelot-aula .courseContainer {
    flex-direction: column;
  }
  
  body.sp-lancelot-aula #lessonMenu {
    width: min(380px, calc(100% - 32px));
    max-height: calc(100% - 84px);
    margin-top: 0;
  }

  body.sp-lancelot section.menu > nav.navbar {
    padding: 0 16px;
  }

  body.sp-lancelot .navbar-collapse {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--spl-surface);
    padding: 24px;
    border-bottom: 1px solid var(--spl-border);
    box-shadow: var(--spl-shadow-lg);
    flex-direction: column;
    gap: 16px;
  }

  body.sp-lancelot .navbar-collapse:not(.show) {
    display: none;
  }

  body.sp-lancelot .navbar-collapse.show,
  body.sp-lancelot .navbar-collapse.collapsing {
    display: flex;
  }

  body.sp-lancelot .navbar-nav {
    width: 100%;
    align-items: stretch;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.sp-lancelot .nav-link {
    justify-content: flex-start;
    width: 100%;
  }

  body.sp-lancelot #busca-topo input[type=search] {
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body.sp-lancelot-aula section.video1 {
    padding-top: 5rem;
  }

  body.sp-lancelot-aula .video-wrapper,
  body.sp-lancelot-aula #videoContainer {
    border-radius: var(--spl-radius);
  }

  body.sp-lancelot-aula .actions-dock {
    flex-direction: column;
    padding: 16px;
    border-radius: var(--spl-radius);
  }

  body.sp-lancelot-aula .nav-buttons {
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
  }

  body.sp-lancelot-aula .btn-lancelot,
  body.sp-lancelot-aula .button-anterior,
  body.sp-lancelot-aula .button-proxima {
    padding: 10px 16px;
    font-size: 12px;
  }

  body.sp-lancelot-aula section.tabs.content18 {
    padding: 0 16px 2rem;
  }

  body.sp-lancelot-aula .tab-content {
    padding: 16px;
  }

  body.sp-lancelot-aula .menu-toggle {
    display: flex; /* Show floating button on mobile */
  }

  /* Hide sidebar by default on mobile if requested, or keep it standard flow */
  body.sp-lancelot-aula #lessonMenu {
    height: auto;
    max-height: calc(100% - 76px);
  }
}

/* ==========================================================================
   12. KEYFRAMES & ANIMATIONS
   ========================================================================== */
@keyframes notificationPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(224, 64, 251, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(224, 64, 251, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(224, 64, 251, 0);
  }
}

@keyframes glowPulse {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  body.sp-lancelot *,
  body.sp-lancelot *::before,
  body.sp-lancelot *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   13. CABEÇALHO COMPARTILHADO — CONTRASTE E ESTADOS CONSISTENTES
   Vale para todas as telas do aluno e também para itens injetados por módulos.
   ========================================================================== */
body.sp-lancelot section.menu > nav.navbar {
  --spl-header-control-bg: color-mix(in srgb, var(--lct-surface, var(--spl-surface)) 82%, transparent);
  --spl-header-control-border: color-mix(in srgb, var(--lct-border, var(--spl-border)) 82%, transparent);
  --spl-header-active-bg: var(--lct-primary, var(--spl-primary));
  --spl-header-active-text: var(--lct-button-text, #fff);
}

body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > .nav-link,
body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill,
body.sp-lancelot section.menu > nav.navbar [class*="camelot"] a,
body.sp-lancelot section.menu > nav.navbar [data-nav-item] {
  min-height: 42px;
  border: 1px solid var(--spl-header-control-border) !important;
  border-radius: 12px;
  background: var(--spl-header-control-bg) !important;
  color: var(--lct-text, var(--spl-text)) !important;
  text-decoration: none !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}

/*
 * Bug: o nome/legenda dentro do pill de perfil (.spl-profile-copy strong/
 * small) e o texto do chevron ficaram com cor fixa branca desde quando o
 * pill em si era sempre escuro (seção "Profile Trigger" mais acima). Essa
 * seção 13 tornou o FUNDO do pill adaptativo à paleta do site
 * (--spl-header-control-bg, que pode ficar claro/quase branco), mas o
 * texto interno continuou branco fixo -- em paletas claras isso vira
 * texto branco sobre fundo quase branco, só aparecendo no :hover (que já
 * tinha sua própria regra de "color:inherit" nos estados ativos). Aqui o
 * texto passa a herdar a mesma cor adaptativa que o <a> pai já recebe
 * acima, no estado normal (não só hover/focus).
 */
body.sp-lancelot section.menu > nav.navbar .spl-profile-copy strong,
body.sp-lancelot section.menu > nav.navbar .spl-profile-copy small,
body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger .chevron,
body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger .name {
  color: inherit !important;
  opacity: 1 !important;
}

body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > .nav-link:hover,
body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > .nav-link:focus-visible,
body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > .nav-link.active,
body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item.current-menu-item > .nav-link,
body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link:hover,
body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link:focus-visible,
body.sp-lancelot section.menu > nav.navbar .notification-container.is-open > .nav-link,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill:hover,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill:focus-visible,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill[aria-expanded="true"],
body.sp-lancelot section.menu > nav.navbar [class*="camelot"] a:hover,
body.sp-lancelot section.menu > nav.navbar [class*="camelot"] a:focus-visible,
body.sp-lancelot section.menu > nav.navbar [class*="camelot"] a[aria-expanded="true"],
body.sp-lancelot section.menu > nav.navbar [data-nav-item]:hover,
body.sp-lancelot section.menu > nav.navbar [data-nav-item]:focus-visible,
body.sp-lancelot section.menu > nav.navbar [data-nav-item][aria-current="page"] {
  border-color: var(--spl-header-active-bg) !important;
  background: var(--spl-header-active-bg) !important;
  color: var(--spl-header-active-text) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--spl-header-active-bg) 28%, transparent) !important;
  transform: translateY(-1px);
}

/* Ícones, títulos e legendas nunca podem manter uma cor antiga no hover. */
body.sp-lancelot section.menu > nav.navbar .nav-link:hover *,
body.sp-lancelot section.menu > nav.navbar .nav-link:focus-visible *,
body.sp-lancelot section.menu > nav.navbar .nav-link.active *,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill:hover *,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill:focus-visible *,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill[aria-expanded="true"] *,
body.sp-lancelot section.menu > nav.navbar [class*="camelot"] a:hover *,
body.sp-lancelot section.menu > nav.navbar [class*="camelot"] a:focus-visible * {
  color: inherit !important;
}

body.sp-lancelot section.menu > nav.navbar .nav-link:focus-visible,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill:focus-visible,
body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger:focus-visible,
body.sp-lancelot section.menu > nav.navbar a:focus-visible,
body.sp-lancelot section.menu > nav.navbar button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lct-secondary, var(--spl-primary-bright)) 58%, transparent) !important;
  outline-offset: 3px;
}

/* Pontuação e nível: os dois textos acompanham o contraste do botão. */
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill b,
body.sp-lancelot section.menu > nav.navbar .pcv-student-pill small {
  color: inherit !important;
}

/* Conta e menus suspensos usam cores próprias e legíveis, sem herdar a hero. */
body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger {
  border-color: var(--spl-header-control-border) !important;
}

/* ========================================================================== 
   14. CABECALHO COMPACTO COMPARTILHADO
   Vitrine, aulas, curso, perfil, certificados e paginas legais usam a mesma
   densidade. Os atalhos principais viram icones sem perder o texto acessivel.
   ========================================================================== */
@media (min-width: 992px) {
  body.sp-lancelot section.menu > nav.navbar {
    min-height: 68px !important;
    padding: 0 24px !important;
    background: rgba(7,25,35,.96) !important;
    border-bottom: 1px solid rgba(56,189,248,.18) !important;
    box-shadow: 0 8px 28px rgba(2,12,20,.18) !important;
  }

  body.sp-lancelot section.menu > nav.navbar > .container {
    display: grid !important;
    grid-template-columns: minmax(160px,1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1440px !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-brand {
    min-width: 0 !important;
    padding: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-brand img {
    max-height: 36px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-collapse {
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-collapse::before,
  body.sp-lancelot section.menu > nav.navbar .navbar-collapse::after {
    content: none !important;
    display: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav {
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar ul.sp-flat-navbar-nav,
  body.sp-lancelot section.menu > nav.navbar ul.sp-flat-navbar-nav.nav-dropdown,
  body.sp-lancelot section.menu > nav.navbar ul.sp-flat-navbar-nav[data-app-modern-menu] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar ul.sp-flat-navbar-nav::before,
  body.sp-lancelot section.menu > nav.navbar ul.sp-flat-navbar-nav::after {
    content: none !important;
    display: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item {
    display: flex;
    align-items: center;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="lista-cursos-lct"],
  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="/forum"],
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(125,211,252,.2) !important;
    border-radius: 10px !important;
    background: rgba(15,49,63,.48) !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="lista-cursos-lct"] .material-icons,
  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="/forum"] .material-icons,
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link :is(i,.material-icons) {
    display: inline-grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 20px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="lista-cursos-lct"]::after,
  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="/forum"]::after,
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link::after {
    position: absolute;
    z-index: 1005;
    top: calc(100% + 10px);
    left: 50%;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: #11162c;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.28);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-4px);
    transition: opacity .16s ease,transform .16s ease;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="lista-cursos-lct"]::after { content: "Vitrine"; }
  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="/forum"]::after { content: "Fórum do curso"; }
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link::after { content: "Jornada"; }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="lista-cursos-lct"]:is(:hover,:focus-visible)::after,
  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > a[href*="/forum"]:is(:hover,:focus-visible)::after,
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link:is(:hover,:focus-visible)::after {
    opacity: 1;
    transform: translate(-50%,0);
  }

  body.sp-lancelot section.menu > nav.navbar #busca-topo input[type=search] {
    width: 170px;
    min-height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
    border-radius: 10px !important;
    background: rgba(15,49,63,.5) !important;
    border-color: rgba(125,211,252,.2) !important;
  }

  body.sp-lancelot section.menu > nav.navbar .notification-container,
  body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link {
    border-radius: 10px !important;
    background: rgba(15,49,63,.48) !important;
    border-color: rgba(125,211,252,.2) !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-avatar,
  body.sp-lancelot section.menu > nav.navbar .spl-avatar-fallback {
    width: 34px !important;
    height: 34px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger {
    min-height: 42px !important;
    gap: 9px !important;
    padding: 3px 12px 3px 3px !important;
    border-radius: 12px !important;
    background: rgba(15,49,63,.48) !important;
    border-color: rgba(125,211,252,.2) !important;
    box-shadow: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-profile-copy strong { font-size: 12px !important; }
  body.sp-lancelot section.menu > nav.navbar .spl-profile-copy small { font-size: 9px !important; }
  body.sp-lancelot section.menu > nav.navbar .pcv-student-pill {
    height: 40px !important;
    padding: 4px 10px 4px 5px !important;
    margin-left: 9px !important;
    border-radius: 11px !important;
    background: rgba(15,49,63,.48) !important;
    border-color: rgba(125,211,252,.2) !important;
    box-shadow: -10px 0 0 -9px rgba(148,163,184,.3) !important;
  }

  body.sp-lancelot section.menu > nav.navbar :is(.sp-compact-nav-link,.tvl-topbar-link,.notification-container>.nav-link):hover,
  body.sp-lancelot section.menu > nav.navbar :is(.sp-compact-nav-link,.tvl-topbar-link,.notification-container>.nav-link):focus-visible {
    background: rgba(14,165,233,.15) !important;
    border-color: rgba(56,189,248,.58) !important;
    color: #e0f2fe !important;
    box-shadow: 0 7px 18px rgba(2,132,199,.16) !important;
    transform: translateY(-1px);
  }
}

/* Correção de estabilidade do cabeçalho desktop.
   Regras antigas deixavam o campo de busca crescer para fora do próprio item,
   invadindo pontuação e conta quando módulos adicionavam controles ao menu. */
@media (min-width: 992px) {
  html body.sp-lancelot section.menu > nav.navbar .navbar-collapse {
    position: static !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(100vw - 260px) !important;
    overflow: visible !important;
  }

  html body.sp-lancelot section.menu > nav.navbar .navbar-nav {
    position: static !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body.sp-lancelot section.menu > nav.navbar .navbar-nav > li.nav-item {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body.sp-lancelot section.menu > nav.navbar .navbar-nav > li.nav-item:has(#busca-topo) {
    flex-basis: 180px !important;
    width: 180px !important;
  }

  html body.sp-lancelot section.menu > nav.navbar #busca-topo {
    position: relative !important;
    display: block !important;
    width: 180px !important;
    margin: 0 !important;
  }

  html body.sp-lancelot section.menu > nav.navbar #busca-topo input[type=search],
  html body.sp-lancelot section.menu > nav.navbar #busca-topo input[type=search]:focus {
    box-sizing: border-box !important;
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 36px 8px 38px !important;
  }

  html body.sp-lancelot section.menu > nav.navbar .pcv-student-item,
  html body.sp-lancelot section.menu > nav.navbar .spl-profile-item {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  html body.sp-lancelot section.menu > nav.navbar .pcv-student-pill {
    margin: 0 !important;
  }

  html body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger {
    width: auto !important;
    min-width: 205px !important;
    max-width: 270px !important;
  }
}

@media (min-width: 992px) and (max-width: 1240px) {
  html body.sp-lancelot section.menu > nav.navbar .navbar-collapse {
    max-width: calc(100vw - 205px) !important;
  }
  html body.sp-lancelot section.menu > nav.navbar .navbar-nav > li.nav-item:has(#busca-topo),
  html body.sp-lancelot section.menu > nav.navbar #busca-topo,
  html body.sp-lancelot section.menu > nav.navbar #busca-topo input[type=search],
  html body.sp-lancelot section.menu > nav.navbar #busca-topo input[type=search]:focus {
    width: 125px !important;
    max-width: 125px !important;
  }
  html body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger {
    min-width: 175px !important;
    max-width: 205px !important;
  }
}

body.sp-lancelot section.menu > nav.navbar .spl-profile-menu,
body.sp-lancelot section.menu > nav.navbar .notification-dropdown {
  color: #172033 !important;
  background: #fff !important;
  border: 1px solid #dfe4ef !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22) !important;
}

body.sp-lancelot section.menu > nav.navbar .notification-dropdown-header,
body.sp-lancelot section.menu > nav.navbar .notification-dropdown-header *,
body.sp-lancelot section.menu > nav.navbar .notification-dropdown a,
body.sp-lancelot section.menu > nav.navbar .spl-profile-menu a,
body.sp-lancelot section.menu > nav.navbar .spl-profile-menu span {
  color: #172033 !important;
}

body.sp-lancelot section.menu > nav.navbar .notification-dropdown a:hover,
body.sp-lancelot section.menu > nav.navbar .notification-dropdown a:focus-visible,
body.sp-lancelot section.menu > nav.navbar .spl-profile-menu a:hover,
body.sp-lancelot section.menu > nav.navbar .spl-profile-menu a:focus-visible {
  color: #fff !important;
  background: var(--spl-header-active-bg) !important;
}

/* Evita que controles adicionados pelos módulos se sobreponham em telas menores. */
body.sp-lancelot section.menu > nav.navbar .navbar-nav {
  gap: 8px;
}

body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-item {
  display: none !important;
}

@media (max-width: 1180px) {
  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > .nav-link,
  body.sp-lancelot section.menu > nav.navbar .pcv-student-pill {
    padding-inline: 10px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .nav-link small,
  body.sp-lancelot section.menu > nav.navbar .pcv-student-pill small {
    display: none;
  }
}

/* Menu sanduiche: painel vertical consistente, sem regras do desktop. */
@media (max-width: 991.98px) {
  body.sp-lancelot section.menu > nav.navbar {
    min-height: 66px !important;
    padding: 0 16px !important;
  }

  body.sp-lancelot section.menu > nav.navbar > .container {
    width: 100% !important;
    max-width: none !important;
    min-height: 66px;
    padding: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-brand {
    padding: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-brand img {
    max-height: 34px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-collapse {
    position: fixed !important;
    z-index: 1100 !important;
    top: 66px !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 78px) !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(125,211,252,.2) !important;
    border-radius: 16px !important;
    background: rgba(7,25,35,.985) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(20px);
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-collapse:not(.show):not(.collapsing) {
    display: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-collapse.show,
  body.sp-lancelot section.menu > nav.navbar .navbar-collapse.collapsing {
    display: block !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav,
  body.sp-lancelot section.menu > nav.navbar ul.sp-flat-navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item,
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .pcv-student-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .pcv-student-item > .pcv-student-pill {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > .nav-link,
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link,
  body.sp-lancelot section.menu > nav.navbar .pcv-student-pill,
  body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(125,211,252,.18) !important;
    border-radius: 11px !important;
    background: rgba(15,49,63,.46) !important;
    box-shadow: none !important;
    color: #e6f4fb !important;
    text-align: left !important;
  }

  body.sp-lancelot section.menu > nav.navbar .navbar-nav > .nav-item > .nav-link .material-icons {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 10px 0 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .sp-compact-nav-text,
  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link > span {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  body.sp-lancelot section.menu > nav.navbar .tvl-topbar-link i {
    flex: 0 0 30px;
    margin-right: 10px !important;
  }

  body.sp-lancelot section.menu > nav.navbar #busca-topo,
  body.sp-lancelot section.menu > nav.navbar #busca-topo input[type=search] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar #busca-topo input[type=search] {
    min-height: 46px !important;
    border-radius: 11px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .notification-container,
  body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link {
    justify-content: flex-start !important;
    padding: 7px 11px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .notification-container > .nav-link::after {
    content: "Notificações";
    margin-left: 10px;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
  }

  body.sp-lancelot section.menu > nav.navbar .pcv-student-pill span,
  body.sp-lancelot section.menu > nav.navbar .pcv-student-pill small {
    display: flex !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-profile-item {
    display: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-item {
    display: flex !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    margin: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-link {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 7px 11px !important;
    overflow: hidden !important;
    list-style: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-link::-webkit-details-marker {
    display: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-details {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-item:has(.spl-mobile-account-details) {
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    flex-basis: auto !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-details[open] .spl-mobile-account-arrow {
    transform: rotate(180deg) !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 7px !important;
    border: 1px solid rgba(125,211,252,.16) !important;
    border-radius: 11px !important;
    background: rgba(4,20,29,.72) !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 40px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    color: #e6f4fb !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-menu a:hover,
  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-menu a:focus-visible {
    background: rgba(56,189,248,.12) !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-menu .material-icons {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    font-size: 17px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-link .spl-avatar,
  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-link .spl-avatar-fallback {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-link .spl-profile-copy {
    display: flex !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-mobile-account-arrow {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    background: transparent !important;
    color: rgba(230,244,251,.65) !important;
    font-size: 19px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    overflow: hidden !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-profile-copy {
    min-width: 0 !important;
    max-width: calc(100% - 86px) !important;
    overflow: hidden !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-profile-copy strong,
  body.sp-lancelot section.menu > nav.navbar .spl-profile-copy small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.sp-lancelot section.menu > nav.navbar .spl-profile-trigger.dropdown-toggle::after {
    margin-left: auto !important;
  }

  body.sp-lancelot section.menu > nav.navbar .notification-dropdown,
  body.sp-lancelot section.menu > nav.navbar .spl-account-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 7px !important;
  }

  body.sp-lancelot section.menu > nav.navbar .notification-container.is-open > .notification-dropdown,
  body.sp-lancelot section.menu > nav.navbar .notification-dropdown.show,
  body.sp-lancelot section.menu > nav.navbar .spl-profile-item.show > .spl-account-menu,
  body.sp-lancelot section.menu > nav.navbar .spl-account-menu.show {
    display: block !important;
  }
}