/* X4Trend Course UI Kit
 * Objetivo: base responsiva + acessível para TODOS os cursos (curso-*)
 * Compatível com estilos existentes (não exige mudança de HTML).
 */

:root{
  --x4-ui-radius: 14px;
  --x4-ui-shadow: 0 12px 40px rgba(0,0,0,.12);
  --x4-ui-shadow-sm: 0 8px 24px rgba(0,0,0,.10);
  --x4-ui-focus: 0 0 0 4px rgba(102,126,234,.18);
  --x4-ui-container-pad: clamp(14px, 3.5vw, 28px);
  --x4-ui-safe-top: env(safe-area-inset-top);
  --x4-ui-safe-bottom: env(safe-area-inset-bottom);
  --x4-ui-font-scale: 1;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body{
  overflow-x:hidden;
  padding-bottom: max(0px, var(--x4-ui-safe-bottom));
  font-size: calc(100% * var(--x4-ui-font-scale));
}
img,svg,video,canvas,iframe{
  max-width:100%;
  height:auto;
}
iframe{max-width:100%}
pre,code,kbd,samp{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Evitar componentes comuns empurrarem a tela no mobile */
.content-page, .hero-section, .hero-header, section, main{
  max-width: 100%;
}
.content-card, .phase-card, .code-preview, .code-with-preview, .mobile-preview, .mobile-frame{
  max-width: 100%;
}

/* Code blocks: scroll interno, nunca overflow do body */
.code-block, .git-command .code-block{
  max-width: 100%;
}
.code-block-content, .git-command .code-block-content{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.code-block-content pre, .git-command .code-block-content pre{
  display: block;
  max-width: 100%;
  white-space: pre;
  margin: 0;
}

/* Grid shrink fix (principal causa de "card de código fora da tela" em mobile)
   Em CSS Grid/Flex, itens têm min-width:auto por padrão e podem forçar overflow.
   Garantimos min-width:0 para permitir encolher e manter scroll interno no código. */
.code-with-preview,
.code-with-preview > *,
.code-block-full-width,
.code-block,
.code-block-content,
.git-command .code-block-content{
  min-width: 0 !important;
}
.code-with-preview{
  max-width: 100%;
  overflow-x: hidden;
}
.code-block,
.git-command .code-block{
  width: 100%;
}

@media (max-width: 520px){
  /* previews de celular sempre centralizados e inteiros */
  .mobile-preview{
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mobile-frame{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Container: melhora padding em mobile sem quebrar desktop */
.container{
  padding-left: var(--x4-ui-container-pad);
  padding-right: var(--x4-ui-container-pad);
}

/* =========================
 * Logo padrão X4Trend (igual página principal)
 * - aplicado via JS no .nav-brand dos cursos
 * ========================= */
.x4-brand-link{
  text-decoration: none !important;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
/* Blindagem contra CSS dos cursos que força underline em <a> */
body.x4-nav-enhanced .x4-brand-link,
body.x4-nav-enhanced .x4-brand-link:hover,
body.x4-nav-enhanced .x4-brand-link:focus,
body.x4-nav-enhanced .x4-brand-link:focus-visible,
body.x4-nav-enhanced .x4-brand-link:visited{
  text-decoration: none !important;
}
.x4-brand-link .brand-x4,
.x4-brand-link .brand-trend{
  font-weight: 900;
  letter-spacing: -0.2px;
  background: linear-gradient(135deg, var(--x4-nav-accent, var(--primary, #00FF80)) 0%, var(--x4-nav-accent2, var(--secondary, #8A2BE2)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.x4-brand-link .brand-trend{ margin-left: 2px; }
.x4-brand-link .brand-cursos{
  margin-left: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.95);
  line-height: 1;
}
.x4-course-pill{
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(226, 232, 240, .95);
  font-weight: 800;
  font-size: 0.78rem;
  white-space: nowrap;
  max-width: min(52vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
 * Menu moderno integrado ao tema
 * - aplica em cursos, sem quebrar customizações
 * ========================= */
body.x4-nav-enhanced .navbar{
  /* Voltar ao tom padrão (tema) sem gradiente da página */
  background: color-mix(in srgb, var(--x4-nav-bg, rgba(44,44,62,0.92)) 88%, transparent) !important;
  background-image: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 25%, transparent) !important;
  width: 100% !important;
}
/* Em cursos onde o <nav> está dentro de .container (max-width), o fundo do topo fica “recortado”.
   Aplicamos o mesmo fundo no header para preencher a largura total. */
body.x4-nav-enhanced .hero-header{
  /* Tom padrão (tema) e sem gradiente próprio do curso */
  background: color-mix(in srgb, var(--x4-nav-bg, rgba(44,44,62,0.92)) 88%, transparent) !important;
  background-image: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 25%, transparent) !important;
}
/* Evitar “linha dupla” no centro: quando o nav está dentro do header, só o header desenha a borda */
body.x4-nav-enhanced .hero-header .navbar{
  border-bottom: none !important;
  /* Evitar diferença de tonalidade no centro vs pontas:
     o fundo deve ser único (do hero-header), então o nav interno fica transparente. */
  background: transparent !important;
  background-image: none !important;
}
body.x4-nav-enhanced .nav-menu > li > a{
  border-radius: 12px;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body.x4-nav-enhanced .nav-menu > li > a:hover{
  background: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 24%, transparent) !important;
  transform: translateY(-1px);
}
body.x4-nav-enhanced .nav-menu > li > a.active,
body.x4-nav-enhanced .nav-menu > li > a[aria-current="page"]{
  background: linear-gradient(135deg, var(--x4-nav-accent, var(--primary, #00FF80)) 0%, var(--x4-nav-accent2, var(--secondary, #8A2BE2)) 100%) !important;
  color: #0b1220 !important;
  font-weight: 800 !important;
  border-color: color-mix(in srgb, white 12%, transparent) !important;
}

/* Melhor leitura do ícone/texto no item ativo */
body.x4-nav-enhanced .nav-menu > li > a.active i,
body.x4-nav-enhanced .nav-menu > li > a[aria-current="page"] i{
  color: #0b1220 !important;
}

/* Layout: evita congestionamento (desktop) */
body.x4-nav-enhanced .navbar .container,
body.x4-nav-enhanced .navbar.x4-nav-no-container{
  gap: 14px !important;
}
body.x4-nav-enhanced .nav-menu{
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

body.x4-nav-enhanced .nav-menu > li > a{
  padding: 10px 12px !important;
  font-size: 0.92rem !important;
  white-space: nowrap !important;
}
/* Desktop: manter ícone + texto para clareza (compactação via dropdown "Mais") */

/* =========================
 * Coluna do meio: 3 dropdowns (Home | Trilha | Missões)
 * ========================= */
body.x4-nav-enhanced .nav-menu.x4-mid-3dd{
  gap: 8px !important;
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd{
  flex: 0 0 auto !important;
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-pill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-pill:hover{
  background: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 24%, transparent) !important;
  transform: translateY(-1px);
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  color: var(--text-primary, #fff) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  border-right: 1px solid rgba(255,255,255,0.10) !important;
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-link i{
  flex: 0 0 auto;
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-link span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-caret-btn{
  width: 42px !important;
  height: 40px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(226,232,240,.95) !important;
  cursor: pointer !important;
}
body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-caret-btn i{
  font-size: 0.85rem;
  opacity: 0.90;
}
/* Menu interno do dropdown (usado como fonte do portal) */
body.x4-nav-enhanced .x4-dd-menu{
  display: none;
}

/* =========================
 * Menu: layout enterprise (desktop)
 * - evita sobreposição do logo
 * - aluno sempre à direita
 * - textos longos com ellipsis
 * ========================= */
@media (min-width: 901px){
  body.x4-nav-enhanced .navbar .container,
  body.x4-nav-enhanced .navbar.x4-nav-no-container{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    min-width: 0 !important;
  }

  /* Alguns cursos escondem <li> no desktop/tablet via CSS próprio.
     Blindagem: o UI Kit controla o que aparece; não deixe regras "display:none" vencerem. */
  body.x4-nav-enhanced .nav-menu > li{
    display: block !important;
  }
  /* Quando o JS marca para esconder, precisa vencer o display:block !important acima */
  body.x4-nav-enhanced .nav-menu > li[data-x4-mid-hidden="1"]{
    display: none !important;
  }

  /* Permitir dropdowns (ex: "Mais") expandirem para baixo no desktop */
  body.x4-nav-enhanced .navbar,
  body.x4-nav-enhanced .navbar .container{
    overflow: visible !important;
  }

  body.x4-nav-enhanced .navbar .nav-brand{
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  body.x4-nav-enhanced .nav-menu{
    display: flex !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    /* Evita “atropelar” a direita sem cortar o dropdown do "Mais" */
    overflow: hidden !important;
    max-height: none !important;
    height: auto !important;
    flex-wrap: nowrap !important;
  }
  /* Quando estivermos no modo enterprise "3 dropdowns", centralizar a coluna do meio */
  body.x4-nav-enhanced .nav-menu.x4-mid-3dd{
    justify-content: center !important;
  }
  /* Compactar os 3 menus do meio para caber melhor */
  body.x4-nav-enhanced .nav-menu.x4-mid-3dd{
    gap: 6px !important;
  }
  body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-link{
    padding: 8px 10px !important;
    font-size: 0.88rem !important;
    gap: 8px !important;
  }
  body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-caret-btn{
    width: 38px !important;
    height: 36px !important;
  }
  body.x4-nav-enhanced .nav-menu > li.x4-mid-dd .x4-dd-pill{
    border-radius: 11px !important;
  }

  /* Nunca deixar o "Mais" sumir por shrink/overflow */
  body.x4-nav-enhanced .nav-menu > li{
    flex: 0 0 auto;
  }
  body.x4-nav-enhanced .nav-menu > li.x4-more{
    flex: 0 0 auto;
    margin-left: 6px;
  }

  /* Área direita (Meu Painel + Aluno + Logout) */
  body.x4-nav-enhanced .x4-nav-right{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    min-width: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
  }
  body.x4-nav-enhanced .x4-nav-right > li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.x4-nav-enhanced .x4-nav-right > li > a{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(0,0,0,0.10) !important;
    text-decoration: none !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
  }
  body.x4-nav-enhanced .x4-nav-right > li > a:hover{
    background: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 24%, transparent) !important;
    transform: translateY(-1px);
  }
  body.x4-nav-enhanced .x4-nav-right #studentMenu,
  body.x4-nav-enhanced .x4-nav-right #studentMenu > div{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  body.x4-nav-enhanced .x4-nav-right #studentNameDisplay{
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  /* Links com alinhamento e truncamento elegante */
  body.x4-nav-enhanced .nav-menu > li > a{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1 !important;
    min-width: 44px !important;
    max-width: clamp(140px, 18vw, 280px);
  }
  body.x4-nav-enhanced .nav-menu > li > a i{
    flex: 0 0 auto;
  }
  body.x4-nav-enhanced .nav-menu > li > a span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Click targets e foco */
a,button,[role="button"],input,select,textarea{
  -webkit-tap-highlight-color: transparent;
}
:focus-visible{
  outline:none;
  box-shadow: var(--x4-ui-focus);
  border-radius: 10px;
}

/* Tabelas em mobile (sem precisar wrapper) */
@media (max-width: 768px){
  table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
}

/* Botões (se cursos usarem .btn / .btn-primary etc, melhora consistência sem forçar tema) */
.btn, button.btn, a.btn{
  cursor:pointer;
  touch-action: manipulation;
}

/* Melhorias para cards comuns (content-card/hero) */
@media (max-width: 768px){
  .hero-header .navbar{
    gap: 12px;
  }
  .hero-title, .content-header h1{
    text-wrap: balance;
  }
}

/* Reading progress */
#x4ReadingProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #00FF80 0%, #667eea 55%, #8A2BE2 100%);
  z-index: 99999;
  box-shadow: 0 2px 14px rgba(0,0,0,.12);
}

/* =========================
 * Navegação mobile padrão
 * (usa classes já presentes: .hamburger, .nav-menu, body.menu-open)
 * ========================= */
@media (max-width: 900px){
  body.menu-open{
    overflow: hidden;
    touch-action: none;
  }
  body.menu-open::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    z-index: 99990;
  }

  .hero-header{
    position: sticky;
    top: 0;
    z-index: 99991;
    padding-top: max(0px, var(--x4-ui-safe-top));
  }

  .hamburger{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  /* Off-canvas */
  .nav-menu{
    /* Resetar regras antigas dos cursos (muitos usam left:-100% / top:56px) */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: 100dvh !important;
    width: min(86vw, 380px) !important;
    padding: calc(18px + var(--x4-ui-safe-top)) 16px 18px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(110%) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
    z-index: 99995 !important;
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    background: rgba(17,24,39,.96);
  }
  .nav-menu.active{
    transform: translateX(0) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Blindagem: em alguns cursos (ex.: Windows Forms) há regras que escondem itens em "tablet". */
  body.x4-nav-enhanced .nav-menu > li{
    display: block !important;
  }

  .nav-menu a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 12px;
  }
  .nav-menu a:focus-visible{
    box-shadow: var(--x4-ui-focus);
  }
}

/* Tablet intermediário (769-968): garantir que o botão "Mais" exista e mostre texto
   mesmo quando o curso esconde spans. */
@media (max-width: 968px) and (min-width: 769px){
  body.x4-nav-enhanced .nav-menu > li.x4-more{
    display: block !important;
  }
  body.x4-nav-enhanced .x4-more-btn span{
    display: inline !important;
  }
}

/* Dropdown "Mais" (desktop) */
body.x4-nav-enhanced .x4-more{ position: relative; }
body.x4-nav-enhanced .x4-more-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,128,0.25);
  background: linear-gradient(135deg, rgba(0,255,128,0.12) 0%, rgba(138,43,226,0.12) 100%);
  color: var(--text-primary, #fff);
  cursor: pointer;
  font-weight: 800;
  font-size: 0.92rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,255,128,0.1);
}
body.x4-nav-enhanced .x4-more-btn:hover{
  background: linear-gradient(135deg, rgba(0,255,128,0.22) 0%, rgba(138,43,226,0.22) 100%);
  border-color: rgba(0,255,128,0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,255,128,0.2);
}
body.x4-nav-enhanced .x4-more-btn i{
  font-size: 1rem;
  color: #00FF80;
}
body.x4-nav-enhanced .x4-more-btn[data-empty]{
  opacity: .72;
}
body.x4-nav-enhanced .x4-more-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 260px;
  max-width: min(420px, 92vw);
  background: rgba(17,24,39,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  padding: 8px;
  display: none;
  z-index: 99996;
}
body.x4-nav-enhanced .x4-more.open .x4-more-menu{
  display: block;
}
body.x4-nav-enhanced .x4-more-menu li{
  list-style: none;
}
/* Título de categoria dentro do dropdown */
body.x4-nav-enhanced .x4-more-menu .x4-more-heading{
  padding: 10px 12px 6px 12px;
  margin-top: 6px;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  border-top: 1px solid rgba(255,255,255,0.10);
}
body.x4-nav-enhanced .x4-more-menu .x4-more-heading:first-child{
  border-top: none;
  margin-top: 0;
}
body.x4-nav-enhanced .x4-more-menu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(226,232,240,.95);
}
/* No dropdown "Mais", sempre mostrar ícone + texto (mesmo em modo ícones) */
body.x4-nav-enhanced .x4-more-menu a span{
  display: inline !important;
}
body.x4-nav-enhanced .x4-more-menu a:hover{
  background: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 14%, transparent);
}

/* Itens "filhos" dentro do Mais (ex.: sublinks de dropdowns) */
body.x4-nav-enhanced .x4-more-menu li.x4-more-sub a,
.x4-more-portal-menu a.x4-more-sub{
  padding-left: 30px;
  font-size: 0.92rem;
  color: rgba(226,232,240,.88);
}
body.x4-nav-enhanced .x4-more-menu li.x4-more-sub a i,
.x4-more-portal-menu a.x4-more-sub i{
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Portal do dropdown "Mais" (desktop) - evita cortes por overflow/stacking */
.x4-more-portal{
  position: fixed;
  z-index: 999999;
}
.x4-more-portal-menu{
  min-width: 260px;
  max-width: min(420px, 92vw);
  background: rgba(17,24,39,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  padding: 8px;
}
.x4-more-portal-heading{
  padding: 10px 12px 6px 12px;
  margin-top: 6px;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.x4-more-portal-heading:first-child{
  border-top: none;
  margin-top: 0;
}
.x4-more-portal-menu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(226,232,240,.95);
  white-space: nowrap;
}
.x4-more-portal-menu a:hover{
  background: color-mix(in srgb, var(--x4-nav-accent, var(--primary, #00FF80)) 14%, transparent);
}
.x4-more-portal-empty{
  padding: 10px 12px;
  color: rgba(226,232,240,.75);
  font-size: 0.92rem;
}


/* =========================
 * Modo foco (menos distração)
 * ========================= */
body.x4-focus .hero-header{
  display: none !important;
}
body.x4-focus #x4ReadingProgress{
  height: 4px;
}

/* =========================
 * Painel flutuante (font + foco)
 * ========================= */
#x4StudyDock{
  position: fixed;
  left: 14px;
  bottom: max(14px, calc(14px + var(--x4-ui-safe-bottom)));
  z-index: 2147483647; /* acima de qualquer barra fixa do curso */
  display: flex;
  gap: 10px;
  align-items: flex-end;
  pointer-events: auto;
}
#x4StudyBtn{
  /* Reset total para não herdar estilos agressivos do curso */
  all: unset;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;

  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(17,24,39,.88) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: var(--x4-ui-shadow-sm) !important;
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-size: 18px !important;
  line-height: 1 !important;
  z-index: 2147483647 !important;
}
#x4StudyBtn:focus-visible{
  outline: none !important;
  box-shadow: var(--x4-ui-focus), var(--x4-ui-shadow-sm) !important;
}
#x4StudyPanel{
  position: fixed;
  left: 14px;
  bottom: max(74px, calc(74px + var(--x4-ui-safe-bottom)));
  width: min(92vw, 360px) !important;
  max-width: 360px !important;
  z-index: 2147483647 !important;
  transform: none !important;
  border-radius: 16px;
  background: rgba(17,24,39,.94) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--x4-ui-shadow);
  padding: 12px;
  display: none !important;
}
#x4StudyPanel.is-open{
  display: block !important;
}
.x4sp-title,
.x4sp-row,
.x4sp-actions,
.x4sp-note{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
#x4StudyPanel *{
  box-sizing: border-box;
}

/* Blindar botões contra CSS dos cursos */
#x4StudyPanel .x4sp-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  padding: 6px 6px 10px 6px;
}
#x4StudyPanel .x4sp-title button{
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
#x4StudyPanel .x4sp-row{
  display: grid !important;
  gap: 8px !important;
  padding: 6px !important;
}
#x4StudyPanel .x4sp-actions{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
#x4StudyPanel .x4sp-actions button{
  flex: 1 1 auto !important;
  min-width: 96px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  line-height: 1.1 !important;
}
#x4StudyPanel .x4sp-actions button:hover{
  background: rgba(255,255,255,.12) !important;
}
#x4StudyPanel .x4sp-actions button.primary{
  background: linear-gradient(135deg, #00FF80 0%, #667eea 55%, #8A2BE2 100%) !important;
  color: #0b1220 !important;
  border-color: rgba(255,255,255,.14) !important;
}
#x4StudyPanel .x4sp-note{
  color: rgba(226,232,240,.9) !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
}
.x4sp-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  padding: 6px 6px 10px 6px;
}
.x4sp-row{
  display: grid;
  gap: 8px;
  padding: 6px;
}
.x4sp-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.x4sp-actions button{
  flex: 1;
  min-width: 96px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: white;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}
.x4sp-actions button:hover{
  background: rgba(255,255,255,.12);
}
.x4sp-actions button.primary{
  background: linear-gradient(135deg, #00FF80 0%, #667eea 55%, #8A2BE2 100%);
  color: #0b1220;
  border-color: rgba(255,255,255,.14);
}
.x4sp-note{
  color: rgba(255,255,255,.72);
  font-weight: 600;
  font-size: .86rem;
  line-height: 1.25;
}

/* =========================
 * Mapa de Evolução (mapa-evolucao.html)
 * - Links como botões
 * - Estado concluído por etapa (sincronizado via backend)
 * ========================= */
body.x4-evo-page .evolution-map a.x4-evo-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  /* Evita “grudar” no texto do parágrafo (ex: "Próximo:") */
  margin-left: 6px;
  border: 1px solid color-mix(in srgb, var(--x4-nav-accent, #00FF80) 42%, transparent);
  /* Verde mais aberto/luminoso (mantém compatibilidade entre cursos) */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #34D399 86%, white 6%) 0%,
    color-mix(in srgb, var(--x4-nav-accent, #00FF80) 92%, white 4%) 60%,
    color-mix(in srgb, #A7F3D0 72%, white 10%) 120%
  );
  color: #0b1220 !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.15;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
body.x4-evo-page .evolution-map a.x4-evo-btn:hover{
  transform: translateY(-1px);
  filter: saturate(1.08) contrast(1.05);
  border-color: color-mix(in srgb, var(--x4-nav-accent, #00FF80) 55%, transparent);
}
body.x4-evo-page .evolution-map a.x4-evo-btn:focus-visible{
  outline: none !important;
  box-shadow: var(--x4-ui-focus), 0 12px 30px rgba(0,0,0,.10);
}
body.x4-evo-page .evolution-map a.x4-evo-btn.x4-evo-done{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #34D399 84%, white 6%) 0%,
    color-mix(in srgb, var(--x4-nav-accent, #00FF80) 92%, white 4%) 55%,
    color-mix(in srgb, #10B981 82%, black 4%) 100%
  );
  border-color: color-mix(in srgb, var(--x4-nav-accent, #00FF80) 70%, transparent);
}
body.x4-evo-page .evolution-map a.x4-evo-btn.x4-evo-done::before{
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  /* Esfera do ícone em verde "sinal aberto" */
  background: linear-gradient(135deg, #00E676 0%, #00FF66 55%, #B9FFDA 120%);
  border: 1px solid rgba(0, 230, 118, .55);
  color: #07110a;
  font-weight: 1000;
  font-size: 11px;
  margin-right: 1px;
  box-shadow: 0 10px 24px rgba(0, 230, 118, .20);
}

body.x4-evo-page .evolution-step.x4-evo-completed{
  border: 1px solid color-mix(in srgb, var(--x4-nav-accent, #00FF80) 25%, transparent) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.10);
}
body.x4-evo-page .evolution-step.x4-evo-completed .evolution-icon{
  filter: saturate(1.08);
  transform: translateY(-1px);
  /* A “esfera” do ícone (como na imagem) também fica verde sinal aberto */
  background: linear-gradient(135deg, #00E676 0%, #00FF66 55%, #B9FFDA 120%) !important;
  border: 1px solid rgba(0, 230, 118, .55) !important;
  box-shadow: 0 18px 44px rgba(0, 230, 118, .18) !important;
  color: #07110a !important;
}
/* Alguns cursos usam <i> dentro da esfera */
body.x4-evo-page .evolution-step.x4-evo-completed .evolution-icon i{
  color: #07110a !important;
}
body.x4-evo-page .evolution-step .evolution-content h3{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.x4-evo-page .x4-evo-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  /* Verde "sinal aberto" (luminoso) */
  border: 1px solid color-mix(in srgb, #00E676 72%, transparent);
  background: linear-gradient(135deg, #00E676 0%, #00FF66 55%, #B9FFDA 120%);
  color: #07110a;
  font-weight: 900;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 230, 118, .18);
}
body.x4-evo-page .x4-evo-badge::before{
  content: "✓";
  font-weight: 1000;
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;}
}

/* ============================================
   MOBILE: Curso em qualquer lugar
   Janelas de código, cards, tabelas e toques
   adequados para celular (senior/enterprise)
   ============================================ */

/* Safe area para notch e barra de gestos (mantém margem mínima no desktop) */
@supports (padding: env(safe-area-inset-left)) {
  .content-page,
  .course-main { padding-left: max(var(--x4-ui-container-pad), env(safe-area-inset-left)); padding-right: max(var(--x4-ui-container-pad), env(safe-area-inset-right)); }
  .hero-section .container { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
  .hero-header,
  .navbar { padding-left: max(var(--x4-ui-container-pad), env(safe-area-inset-left)); padding-right: max(var(--x4-ui-container-pad), env(safe-area-inset-right)); }
  .content-card,
  .phase-card { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
}

/* Trilha: desktop – cards com altura mínima (cursos que usam .mission-card sem inline) */
#missionsGrid > div[data-phase],
#missionsGrid > .mission-card {
  min-height: 300px;
  overflow: hidden;
}

/* Trilha: desktop = 3 colunas, cards menores; todos os cursos */
@media (min-width: 769px) {
  #missionsGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
    gap: 24px !important;
  }
  #missionsGrid > div[data-phase],
  #missionsGrid > .mission-card {
    min-height: 320px !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  #missionsGrid > div[data-phase] > div:first-child,
  #missionsGrid > .mission-card > div:first-child {
    padding: 18px 20px 14px !important;
    min-height: 80px !important;
  }
  #missionsGrid > div[data-phase] > div:first-child > div:first-child,
  #missionsGrid > .mission-card > div:first-child > div:first-child {
    font-size: 2.5rem !important;
  }
  #missionsGrid > div[data-phase] h3,
  #missionsGrid > .mission-card h3 {
    font-size: 1.25rem !important;
  }
  #missionsGrid > div[data-phase] > div:last-child,
  #missionsGrid > .mission-card > div:last-child {
    padding: 16px 20px 20px !important;
  }
}

/* Trilha (missões): título do card — WCAG 2.1 AA sobre --bg-card
 * !important + currentColor: vence cache, inline legado e -webkit-text-fill-color herdado (gradientes/nav). */
main.content-page #missionsGrid > .mission-card .mission-card-content > h3,
#missionsGrid .mission-card .mission-card-content > h3,
.mission-card .mission-card-content > h3 {
  color: var(--x4-mission-card-title, var(--text-primary, #0f172a)) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Telas pequenas: base para código, cards e botões */
@media (max-width: 768px) {
  /* Container e conteúdo sem overflow horizontal */
  .container { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .content-page .container,
  .course-main .container { max-width: 100%; }
  .content-header h1 { font-size: clamp(1.35rem, 5vw, 1.75rem); word-break: break-word; }
  .content-header p { font-size: clamp(0.9rem, 2.5vw, 1rem); }

  /* Cards: largura total e padding confortável */
  .content-card,
  .phase-card {
    width: 100%;
    max-width: 100%;
    padding: 1rem max(1rem, env(safe-area-inset-left)) 1.25rem max(1rem, env(safe-area-inset-right));
    margin-left: 0;
    margin-right: 0;
  }
  .content-card h2,
  .phase-card h2 { font-size: clamp(1.15rem, 4vw, 1.4rem); }
  .content-card h3,
  .phase-card h3 { font-size: clamp(1rem, 3vw, 1.2rem); }

  /* Telas de demonstração (2 ou 3 colunas) e cards internos: empilhar no mobile */
  .content-card [style*="grid-template-columns: 1fr 1fr"],
  .content-card [style*="grid-template-columns: 1fr 1fr 1fr"],
  .content-card [style*="grid-template-columns: 1fr auto 1fr"],
  .content-card [style*="repeat(2, 1fr)"],
  .content-card [style*="repeat(3, 1fr)"],
  .content-page [style*="grid-template-columns: 1fr 1fr"],
  .content-page [style*="grid-template-columns: 1fr 1fr 1fr"],
  .content-page [style*="grid-template-columns: 1fr auto 1fr"],
  .content-page [style*="repeat(2, 1fr)"],
  .content-page [style*="repeat(3, 1fr)"],
  .course-main [style*="grid-template-columns: 1fr 1fr"],
  .course-main [style*="grid-template-columns: 1fr 1fr 1fr"],
  .course-main [style*="grid-template-columns: 1fr auto 1fr"],
  .course-main [style*="repeat(2, 1fr)"],
  .course-main [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Wrappers de diagramas/visualização (max-width): caber na largura do mobile */
  .content-card [style*="max-width: 900px"],
  .content-card [style*="max-width: 800px"],
  .content-page [style*="max-width: 900px"],
  .content-page [style*="max-width: 800px"],
  .course-main [style*="max-width: 900px"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  /* Conteúdo interno dos diagramas: padding proporcional e quebra de linha */
  .content-card [style*="max-width: 900px"] > div,
  .content-card [style*="max-width: 800px"] > div,
  .content-page [style*="max-width: 900px"] > div,
  .content-page [style*="max-width: 800px"] > div,
  .course-main [style*="max-width: 900px"] > div {
    padding: 1rem !important;
    box-sizing: border-box;
  }
  .content-card [style*="white-space: nowrap"],
  .content-page [style*="white-space: nowrap"],
  .course-main [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Janelas de código: scroll horizontal suave e fonte legível */
  .code-block,
  .git-command .code-block,
  .code-preview,
  .code-with-preview {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 10px;
  }
  .code-block-content,
  .git-command .code-block-content,
  .code-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 1rem;
    min-height: 2.5rem;
  }
  .code-block-content pre,
  .git-command .code-block-content pre,
  .code-content pre {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    line-height: 1.6;
    min-width: min-content;
  }
  .code-block-header,
  .code-header {
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .copy-btn,
  .git-command .copy-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    touch-action: manipulation;
  }

  /* Tabelas: scroll horizontal (card que contém tabela) */
  .content-card:has(table),
  .phase-card:has(table),
  .content-card:has(.dossie-table),
  .phase-card:has(.dossie-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dossie-table,
  .content-card table,
  .phase-card table {
    min-width: 400px;
    font-size: clamp(0.8rem, 2.2vw, 0.95rem);
  }
  .dossie-table th,
  .dossie-table td,
  .content-card table th,
  .content-card table td {
    padding: 0.6rem 0.75rem;
  }

  /* Botões: área de toque mínima 44px (WCAG / Apple HIG) */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-complete-phase,
  .btn-dartpad,
  .phase-checkin-btn,
  .nav-btn-mapa {
    min-height: 44px;
    padding: 0.6rem 1rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hero-buttons { flex-wrap: wrap; gap: 0.75rem; }
  .hero-buttons .btn { min-width: 100%; }
  .phase-header { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .phase-header h2 { min-width: 100%; }
  .btn-complete-phase { width: 100%; }

  /* Hero: uma coluna no mobile; telas de visualização na largura do mobile */
  .hero-section .container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  .hero-content { order: 1; min-width: 0; }
  .hero-visual,
  .code-preview {
    order: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .code-preview .code-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .code-preview .code-content pre {
    min-width: min-content;
  }
  .hero-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .hero-subtitle { font-size: clamp(0.9rem, 2.5vw, 1rem); }

  /* Terminal / guia de comando */
  .terminal-guide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    padding: 0.75rem 1rem;
  }

  /* Dica, aviso, mentor box */
  .tip-inline,
  .aviso-heroi,
  .Mentor-box,
  .alfred-box,
  details.dossie-details summary {
    padding: 0.75rem 1rem;
    font-size: clamp(0.9rem, 2.2vw, 1rem);
  }
  details.dossie-details > div { padding: 0.75rem 1rem; }

  /* Menu nav: itens com toque adequado */
  .nav-menu a {
    min-height: 44px;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
  }

  /* Trilha de conhecimento / grid de missões: 1 coluna no mobile, cards sem truncar */
  #missionsGrid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  #missionsSection {
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
  }
  #missionsGrid > div[data-phase] {
    min-height: auto !important;
    overflow: visible !important;
    max-height: none !important;
  }
  #missionsGrid > div[data-phase] > div:last-child {
    overflow: visible !important;
  }
  #missionsGrid > div[data-phase] h3 {
    min-height: auto !important;
  }
  #missionsGrid > div[data-phase] p {
    min-height: auto !important;
    overflow: visible !important;
  }
  /* Seção de desempenho geral: sem overflow horizontal no mobile */
  #overallPerformance {
    padding: 1rem max(1rem, env(safe-area-inset-left)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  #overallPerformance [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  #overallPerformance .xp-bar {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #overallPerformance .xp-bar-fill {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #overallPerformance .xp-bar-text {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(0.8rem, 2.5vw, 0.95rem) !important;
  }
}

/* Extra pequeno: ajustes finos */
@media (max-width: 480px) {
  .code-block-content pre,
  .git-command .code-block-content pre { font-size: 0.8rem; }
  .content-card,
  .phase-card { padding: 0.85rem max(0.75rem, env(safe-area-inset-left)); }
  .nav-brand span { font-size: 0.9rem; }
  .hero-badge { font-size: 0.75rem; padding: 0.35rem 0.65rem; }
}