/**
 * ========================================
 * TEMPLATE DE CURSO - HERO Platform
 * ========================================
 * 
 * INSTRUÇÕES DE CUSTOMIZAÇÃO:
 * 
 * 1. Ajuste as variáveis CSS abaixo para mudar cores do curso
 * 2. Substitua [NOME_CURSO] e [SIGLA_CURSO] por busca global
 * 3. Mantenha a estrutura de classes para compatibilidade com course-ui-kit.css
 * 
 * VARIÁVEIS PRINCIPAIS:
 * --primary: Cor principal do curso (botões, destaques, XP)
 * --secondary: Cor secundária (gradientes, acentos)
 * --accent: Cor de destaque (badges, níveis)
 */

:root {
    /* ===== CORES DO CURSO (CUSTOMIZAR AQUI) ===== */
    --primary: #00FF80;              /* Verde neon HERO */
    --primary-dark: #00CC66;
    --primary-light: rgba(0, 255, 128, 0.1);
    --primary-rgb: 0, 255, 128;      /* RGB para uso com opacity */
    
    --secondary: #8A2BE2;            /* Roxo futurista */
    --secondary-dark: #6A1BB2;
    --secondary-light: rgba(138, 43, 226, 0.1);
    
    --accent: #FFB800;               /* Amarelo dourado */
    --accent-dark: #CC9200;
    
    /* ===== CORES DE FUNDO ===== */
    --bg-main: #0A0E27;              /* Fundo principal escuro */
    --bg-card: #16213E;              /* Fundo dos cards */
    --bg-code: #1E1E2E;              /* Fundo de código */
    
    /* ===== CORES DE TEXTO ===== */
    --text-primary: #E2E8F0;         /* Texto principal */
    --text-secondary: #94A3B8;       /* Texto secundário */
    --text-muted: #64748B;           /* Texto discreto */
    
    /* ===== CORES DE ESTADO ===== */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    
    /* ===== BRAND (Nome do curso no navbar) ===== */
    --brand-primary: var(--primary);
    --brand-secondary: var(--secondary);
}

/* ===== RESET E BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== NAVBAR (Layout 3 Colunas) ===== */
.navbar {
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Layout 3 colunas: 01 esquerda | 02 centro | 03 direita (sem sobrepor) */
.nav-container {
    max-width: 1600px;
    margin: 0 0.25rem;
    padding: 0 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    position: relative;
}

/* COLUNA 1: Logo/Marca — fixado à esquerda */
.nav-brand {
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    z-index: 2;
}

/* COLUNA 2: Navegação central — ocupa o espaço entre col1 e col3, sem atropelar a coluna 3 */
.nav-center {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    padding-right: 0.5rem;
}

.nav-center .nav-menu-center {
    flex: none;
    max-width: 100%;
}

/* CUSTOMIZAR: apenas a sigla em tamanho menor; brand (sufixo) mantém tamanho do .nav-brand */
.brand-sigla {
    font-size: 0.85em;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-suffix {
    color: var(--text-primary);
}

/* Menus centrais (dentro de .nav-center) — não invadem a coluna 3 */
.nav-menu-center {
    display: flex;
    list-style: none;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
}

.nav-menu-center li a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    white-space: nowrap;
}

.nav-menu-center li a:hover,
.nav-menu-center li a.active {
    background: var(--primary-light);
    color: var(--primary);
}

.nav-menu-center li a i {
    font-size: 1rem;
}

/* COLUNA 3: Ações/Perfil — fixado à direita */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    z-index: 2;
}

.nav-menu-right {
    display: flex;
    list-style: none;
    gap: 0.5rem;
    align-items: center;
}

.nav-menu-right li a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    white-space: nowrap;
}

.nav-menu-right li a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.nav-menu-right li a i {
    font-size: 1rem;
}

/* Home: ação dupla — link (index) + chevron (dropdown) */
.nav-home-dual {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.nav-link-home {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.6rem 0.25rem 0.6rem 1rem;
    border-radius: 8px 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.3s;
}
.nav-link-home:hover,
.nav-link-home.active {
    background: var(--primary-light);
    color: var(--primary);
}
.dropdown-chevron-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.6rem 0.75rem;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.dropdown-chevron-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.dropdown-home .dropdown-chevron-btn i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.dropdown-home.active .dropdown-chevron-btn i {
    transform: rotate(180deg);
}

/* Dropdown Menu (para menus que ultrapassam o limite) */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
    position: relative;
}

.dropdown-toggle .fa-chevron-down {
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle .fa-chevron-down,
.dropdown.active .dropdown-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 14, 39, 0.98);
    border: 2px solid rgba(0, 255, 128, 0.3);
    border-radius: 12px;
    list-style: none;
    padding: 0.75rem 0;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(10px);
    animation: dropdownFadeIn 0.2s ease-out;
}

/* Scrollbar personalizada para dropdown */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
    display: block;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 255, 128, 0.3);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li a {
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 0;
    white-space: nowrap;
}

.dropdown-menu li a i,
.dropdown-menu li a span {
    color: #ffffff !important;
}

.dropdown-menu li a i {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.dropdown-menu li a:hover {
    background: var(--primary-light);
    color: var(--primary);
    padding-left: 1.5rem;
}

.dropdown-menu li a.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    border-left: 3px solid var(--primary);
}

/* ===== PÁGINA DE DESAFIOS: Contraste WCAG (paleta) ===== */
.challenge-tips-card {
    background: var(--bg-card);
    border: 2px solid var(--accent);
}
.challenge-tips-card h2 {
    color: var(--text-primary);
}
.challenge-tips-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.challenge-tips-title {
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.challenge-tips-card p,
.challenge-tips-card .challenge-tips-title {
    color: var(--text-primary);
}

.challenge-criteria-card {
    background: var(--bg-card);
    border: 2px solid var(--info);
}
.challenge-criteria-card h2 {
    color: var(--text-primary);
}
.challenge-criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.challenge-criterion-item {
    padding: 1.5rem;
    background: var(--bg-main);
    border-radius: 12px;
    border: 2px solid var(--info);
}
.challenge-criterion-item h4 {
    color: var(--primary);
    margin-bottom: 0.75rem;
}
.challenge-criterion-item p {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.challenge-submit-card {
    text-align: center;
    background: var(--bg-card);
    border: 2px solid var(--primary);
}
.challenge-submit-card h2 {
    color: var(--primary);
}
.challenge-submit-card p {
    color: var(--text-primary);
}

.challenge-reward-card {
    border-color: var(--accent);
}
.reward-level-accent {
    color: var(--accent);
}
.reward-level-info {
    color: var(--info);
    font-size: 1.2rem;
}

/* ===== BOTÃO VOLTAR AO TOPO ===== */
.btn-back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--bg-main);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 20px rgba(0, 255, 128, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}

.btn-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.btn-back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 255, 128, 0.5);
}

/* ===== RODAPÉ (X4Trend Cursos) ===== */
.site-footer {
    margin-top: 3rem;
    padding: 1.5rem 1rem;
    background: rgba(10, 14, 39, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.site-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer .footer-brand {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.site-footer .footer-brand span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-footer .footer-copy {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ===== VISUALIZAÇÃO SEMÂNTICA (Tags HTML5 — wireframe pedagógico) ===== */
.semantic-visualization-card .semantic-wireframe {
    margin-top: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-code);
    border: 2px dashed rgba(255, 255, 255, 0.15);
}

.semantic-tag {
    padding: 1rem 1.25rem;
    margin: 0;
    position: relative;
}

.semantic-label {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.95rem;
}

.semantic-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.semantic-header {
    background: rgba(138, 43, 226, 0.15);
    border: 2px solid var(--secondary);
    border-bottom-width: 1px;
}

.semantic-nav {
    margin: 0.75rem 0 0 1rem;
    background: rgba(138, 43, 226, 0.08);
    border: 2px dashed var(--secondary);
    border-radius: 8px;
}

.semantic-nav-demo {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.semantic-nav-demo .nav-links {
    float: right;
    color: var(--primary);
}

.semantic-main {
    background: rgba(59, 130, 246, 0.08);
    border: 2px dashed var(--info);
    border-top: none;
}

.semantic-main-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .semantic-main-inner {
        grid-template-columns: 1fr;
    }
}

.semantic-article {
    background: rgba(0, 255, 128, 0.08);
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 1rem;
}

.semantic-article h4,
.semantic-aside h4,
.semantic-section h4 {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    color: var(--primary);
}

.semantic-article p,
.semantic-aside p,
.semantic-section p {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
}

.semantic-figure {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--text-muted);
    border-radius: 6px;
}

.semantic-figure .figure-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.semantic-aside {
    background: rgba(255, 184, 0, 0.08);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 1rem;
}

.semantic-section {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.06);
    border: 2px solid var(--info);
    border-radius: 8px;
}

.semantic-footer {
    background: rgba(138, 43, 226, 0.2);
    border: 2px solid var(--secondary);
    border-top-width: 1px;
}

.semantic-footer p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.semantic-legend {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--primary-light);
    border: 2px solid var(--primary);
    border-radius: 12px;
}

.semantic-legend i {
    color: var(--accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.semantic-legend p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.semantic-legend code {
    background: var(--bg-code);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Menu Mobile (Hamburger) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--primary);
    border-radius: 3px;
    transition: all 0.3s;
}

/* Desktop: drawer é apenas wrapper (contents); overlay oculto */
.nav-mobile-drawer {
    display: contents;
}
.nav-overlay {
    display: none;
}

@media (max-width: 968px) {
    .nav-center {
        position: static;
        transform: none;
        width: 100%;
    }

    .nav-right {
        order: 2;
    }

    /* Menu aberto: navbar (e drawer/overlay dentro dele) sobe acima de todo o site */
    body:has(.nav-container.nav-open) .navbar {
        z-index: 99999;
    }

    /* Overlay: fundo escuro ao abrir o menu; clique fecha o drawer (z-index alto para sobrepor todo o site) */
    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .nav-container.nav-open .nav-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Drawer único: desliza da direita; padding para todo o conteúdo ficar visível e centralizado */
    .nav-mobile-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        max-width: 100%;
        height: 100%;
        height: 100dvh;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        background: var(--nav-bg, #0f172a);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
        z-index: 99999;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem 1rem 2rem 1rem;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    .nav-container.nav-open .nav-mobile-drawer {
        transform: translateX(0);
    }

    /* Garantir que listas e itens dentro do drawer não sejam escondidos por outros CSS (ex.: course-ui-kit .nav-menu) */
    .nav-mobile-drawer [class*="nav-menu"] {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .nav-mobile-drawer .nav-center,
    .nav-mobile-drawer .nav-right {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 0 0.5rem;
        background: transparent;
        max-height: none;
        border: none;
        overflow: visible !important;
        box-sizing: border-box;
    }
    .nav-mobile-drawer .nav-right {
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .nav-container .hamburger {
        order: 0;
    }

    .nav-mobile-drawer .nav-menu-center,
    .nav-mobile-drawer .nav-menu-right {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
        background: transparent;
        max-height: none;
        list-style: none;
        margin: 0 auto;
        border: none;
        overflow: visible !important;
        box-sizing: border-box;
    }

    .nav-mobile-drawer .nav-menu-center li,
    .nav-mobile-drawer .nav-menu-right li {
        display: block !important;
        width: 100%;
        max-width: 100%;
    }

    /* Links do drawer centralizados para todas as opções aparecerem (Home, Cursos, Missões, etc.) */
    .nav-mobile-drawer .nav-menu-center li a,
    .nav-mobile-drawer .nav-menu-right li a {
        width: 100%;
        max-width: 100%;
        padding: 1rem 0.75rem;
        justify-content: center;
        text-align: center;
        color: #fff !important;
        box-sizing: border-box;
    }

    .nav-menu-center li a i,
    .nav-menu-right li a i {
        color: #fff !important;
    }

    .nav-mobile-drawer .nav-home-dual {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0;
    }
    .nav-mobile-drawer .nav-link-home {
        flex: 1;
        justify-content: center;
        text-align: center;
        padding: 1rem !important;
        color: #fff !important;
    }
    .nav-mobile-drawer .dropdown-toggle {
        justify-content: center;
        text-align: center;
    }
    .nav-mobile-drawer .dropdown-chevron-btn {
        padding: 1rem;
        color: #fff !important;
    }
    .nav-mobile-drawer .dropdown-chevron-btn i {
        color: #fff !important;
    }

    .nav-menu-center .dropdown-menu {
        position: static;
        display: none;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        margin: 0.5rem 0 0.5rem 1rem;
        padding: 0.5rem 0;
        max-height: none;
        box-shadow: none;
    }

    /* Submenu no drawer: ordem normal (1, 2, 3...), alinhado à direita, efeito expandir/recolher */
    .nav-mobile-drawer .nav-menu-center .dropdown-menu,
    .nav-mobile-drawer .nav-menu-center .dropdown-home .dropdown-menu {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0.5rem 0 0.5rem 0;
        margin-left: auto;
        padding: 0 0.25rem 0 0.5rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.35s ease-out, opacity 0.25s ease-out, visibility 0.25s ease-out;
    }

    .nav-mobile-drawer .nav-menu-center .dropdown.active .dropdown-menu,
    .nav-mobile-drawer .nav-menu-center .dropdown-home.active .dropdown-menu {
        display: flex;
        max-height: 400px;
        opacity: 1;
        visibility: visible;
        padding: 0.5rem 0.25rem 0.5rem 0.5rem;
    }

    /* Seta (chevron) gira ao expandir/recolher no drawer — inclui Home (.dropdown-chevron-btn) e Missões/Desafios (.dropdown-toggle) */
    .nav-mobile-drawer .dropdown.active .dropdown-chevron-btn i,
    .nav-mobile-drawer .dropdown-home.active .dropdown-chevron-btn i,
    .nav-mobile-drawer .dropdown.active .dropdown-toggle .fa-chevron-down {
        transform: rotate(180deg);
    }
    .nav-mobile-drawer .dropdown-chevron-btn i,
    .nav-mobile-drawer .dropdown-toggle .fa-chevron-down {
        transition: transform 0.3s ease;
    }

    .nav-mobile-drawer .nav-menu-center .dropdown-menu li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nav-mobile-drawer .nav-menu-center .dropdown-menu li a {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
        padding: 0.75rem 1rem 0.75rem 0.25rem;
        justify-content: flex-end;
        text-align: right;
    }

    .nav-menu-center .dropdown.active .dropdown-menu {
        display: block;
    }

    .nav-menu-center .dropdown-menu li a,
    .nav-menu-center .dropdown-menu li a i {
        justify-content: flex-start;
        padding: 0.75rem 1.25rem;
        color: #fff !important;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .dropdown-menu {
        position: static;
        display: none;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        margin-top: 0.5rem;
    }
    .dropdown-menu li a {
        color: #fff !important;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }
}

/* ===== HERO SECTION ===== */
.hero {
    padding: 1.5rem 0 4rem 0;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.hero .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-light);
    color: var(--primary);
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    border: 1px solid var(--primary);
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--bg-main);
    box-shadow: 0 4px 15px rgba(0, 255, 128, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 128, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary-light);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* Botão integrado ao texto (listas/parágrafos) — menor e alinhado à linha */
.btn-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    padding: 0.3em 0.65em;
    font-size: 0.9em;
    line-height: 1.35;
    margin: 0 0.15em;
}
.btn-inline:hover {
    transform: none;
}

/* Padrão: links no conteúdo exibidos como botão */
.content-card a[href]:not(.btn),
.content-page .content-card a[href]:not(.btn),
.best-practices-card a[href]:not(.btn),
.dev-master-tip a[href]:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
    transition: all 0.2s;
}
.content-card a[href]:not(.btn):hover,
.content-page .content-card a[href]:not(.btn):hover,
.best-practices-card a[href]:not(.btn):hover,
.dev-master-tip a[href]:not(.btn):hover {
    background: var(--primary-light);
}

.hero-visual {
    position: relative;
}

.code-preview {
    background: var(--bg-code);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.code-preview .code-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.code-preview .code-header span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
}

.code-preview pre {
    margin: 0;
    overflow-x: auto;
}

.code-preview code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 968px) {
    .hero .container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-visual {
        order: -1;
    }
}

/* ===== CONTAINER E SEÇÕES ===== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.content-page {
    min-height: 100vh;
    padding: 3rem 0;
}

.content-header {
    text-align: center;
    margin-bottom: 3rem;
}

.content-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
}

.content-header p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== CARDS DE CONTEÚDO ===== */
.content-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-card h2 {
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-card h3 {
    color: var(--text-primary);
    margin: 1.5rem 0 1rem;
}

.content-card p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.8;
}

.content-card ul,
.content-card ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.content-card li {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

/* Container com cards internos (Referência + Convenções/Boas práticas/Dev Master) */
.ref-cards-container .ref-inner-cards {
    margin-top: 1rem;
}
.ref-cards-container h2 {
    margin-bottom: 0.5rem;
}

/* Cards internos na Referência (README) da Missão Final */
.ref-inner-cards {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.ref-inner-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.ref-inner-card h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
}
.ref-inner-card ul {
    margin: 0 0 0 1.25rem;
}
.ref-inner-card li {
    margin-bottom: 0.4rem;
}
.ref-inner-card table {
    width: 100%;
    border-collapse: collapse;
}
.ref-inner-card th,
.ref-inner-card td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ref-inner-card th {
    color: var(--primary);
    font-weight: 600;
}
.ref-inner-card td {
    color: var(--text-secondary);
}

/* ===== CARDS INTERNOS (conteúdo longo — padrão curso-git) ===== */
.content-inner-cards {
    display: grid;
    gap: 1.25rem;
    margin: 1.25rem 0;
}
.content-inner-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--primary, #00ff80);
}
.content-inner-card.card-accent-1 { border-left-color: #2da44e; }
.content-inner-card.card-accent-2 { border-left-color: #0969da; }
.content-inner-card.card-accent-3 { border-left-color: #8250df; }
.content-inner-card .content-inner-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.content-inner-card .content-inner-card-title i { opacity: 0.9; }
.content-inner-card p,
.content-inner-card ul,
.content-inner-card ol { margin-bottom: 0.75rem; }
.content-inner-card p:last-child,
.content-inner-card ul:last-child,
.content-inner-card ol:last-child { margin-bottom: 0; }
.content-inner-card li { margin-bottom: 0.4rem; }
.content-inner-card code { background: rgba(0, 255, 128, 0.12); padding: 2px 6px; border-radius: 4px; }
@media (max-width: 768px) {
    .content-inner-cards { gap: 1rem; }
    .content-inner-card { padding: 1rem 1.25rem; }
}

/* ===== DIAGRAMA DE FLUXO — Missão 01 (git init → add → status → commit) ===== */
.fluxo-diagrama-card .fluxo-diagrama-intro {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}
.fluxo-m01 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1.5rem 0;
}
.fluxo-m01-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    min-width: 140px;
    max-width: 180px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.fluxo-m01-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 128, 0.15);
}
.fluxo-m01-step-icon {
    font-size: 1.75rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.fluxo-m01-step-cmd {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.fluxo-m01-step-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.fluxo-m01-step-1 { border-left: 4px solid var(--primary); }
.fluxo-m01-step-2 { border-left: 4px solid var(--secondary); }
.fluxo-m01-step-3 { border-left: 4px solid var(--accent); }
.fluxo-m01-step-4 { border-left: 4px solid var(--info); }
.fluxo-m01-arrow {
    color: var(--text-muted);
    font-size: 1rem;
    padding: 0 0.5rem;
    flex-shrink: 0;
}
.fluxo-m01-cycle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(138, 43, 226, 0.08);
    border: 1px dashed rgba(138, 43, 226, 0.4);
    border-radius: 8px;
}
.fluxo-m01-cycle-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.fluxo-m01-cycle-arrow {
    color: var(--secondary);
    font-size: 1rem;
}
.fluxo-m01-cycle code {
    background: rgba(0, 255, 128, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}
@media (max-width: 900px) {
    .fluxo-m01 {
        flex-direction: column;
        gap: 0.5rem;
    }
    .fluxo-m01-step {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
    .fluxo-m01-arrow {
        transform: rotate(90deg);
        padding: 0.25rem 0;
    }
}

/* ===== DIAGRAMA DE FLUXO — Missão 02 (main → develop → feature → merge → release → tag → merge develop) ===== */
.fluxo-m02 {
    margin: 1.75rem 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fluxo-diagrama-card .fluxo-m02-row,
.fluxo-m02-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    padding-bottom: 0.75rem;
    width: max-content;
    margin: 0 auto;
}
.fluxo-m02-row::after {
    content: '';
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--info));
    opacity: 0.3;
    border-radius: 1px;
    pointer-events: none;
}
.fluxo-m02-step {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    width: 108px;
    min-height: 72px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}
.fluxo-m02-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.22);
}
.fluxo-m02-step-icon {
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
    line-height: 1;
}
.fluxo-m02-step-cmd {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
    line-height: 1.2;
}
.fluxo-m02-step-desc {
    font-size: 0.64rem;
    color: var(--text-secondary);
    line-height: 1.25;
}
.fluxo-m02-main .fluxo-m02-step-icon { color: var(--primary); }
.fluxo-m02-main { border-left: 4px solid var(--primary); }
.fluxo-m02-develop .fluxo-m02-step-icon { color: var(--secondary); }
.fluxo-m02-develop { border-left: 4px solid var(--secondary); }
.fluxo-m02-task .fluxo-m02-step-icon { color: var(--accent); }
.fluxo-m02-task { border-left: 4px solid var(--accent); }
.fluxo-m02-merge .fluxo-m02-step-icon { color: var(--info); }
.fluxo-m02-merge { border-left: 4px solid var(--info); }
.fluxo-m02-release .fluxo-m02-step-icon { color: var(--warning); }
.fluxo-m02-release { border-left: 4px solid var(--warning); }
.fluxo-m02-merge-develop .fluxo-m02-step-cmd,
.fluxo-m02-merge-main .fluxo-m02-step-cmd { font-size: 0.68rem; }
.fluxo-m02-tag .fluxo-m02-step-icon { color: var(--success); }
.fluxo-m02-tag { border-left: 4px solid var(--success); }
.fluxo-m02-reintegra .fluxo-m02-step-desc { font-size: 0.6rem; }
.fluxo-m02-arrow {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    padding: 0 0.35rem;
    flex-shrink: 0;
}
/* Força diagrama M02 em linha no desktop; em coluna no mobile (sem scroll) */
#diagrama-fluxo-m02 .fluxo-m02-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}
@media (max-width: 768px) {
    .fluxo-m02-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.35rem;
        padding-bottom: 0.5rem;
        align-items: center !important;
    }
    .fluxo-m02-row::after {
        display: none;
    }
    .fluxo-m02-step {
        width: 100%;
        max-width: 220px;
        min-height: 68px;
    }
    .fluxo-m02-arrow {
        transform: rotate(90deg);
        padding: 0.1rem 0;
    }
}

/* ===== CARDS DE CÓDIGO — header claro + código com fundo escuro (padrão da imagem referência) ===== */
.code-block {
    background: #2D3748;
    border-radius: 12px;
    overflow: hidden;
    margin: 1.5rem 0;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.code-block-header {
    background: #E8EAF6;
    padding: 0.875rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #C5CAE9;
}

.code-block-header span {
    color: #3730A3;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-block-header span i {
    color: #5B21B6;
    font-size: 1rem;
}

.copy-btn {
    background: #FF6B6B;
    color: #fff;
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.copy-btn:hover {
    background: #EE5A52;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.copy-btn i {
    font-size: 0.9rem;
}

.code-block-content {
    padding: 1.5rem;
    overflow-x: auto;
    background: #2D3748;
}

.code-block-content pre {
    margin: 0;
}

.code-block-content code {
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #E2E8F0;
}

/* Highlight.js já aplica cores via tema atom-one-dark */
.code-block-content .language-html,
.code-block-content .language-css,
.code-block-content .language-javascript {
    color: inherit;
}

/* ===== TERMINAL OUTPUT ===== */
.terminal-output {
    background: #1A1D23;
    border-radius: 12px;
    overflow: hidden;
    margin: 1.5rem 0;
    border: 1px solid rgba(0, 255, 128, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 128, 0.1);
}

.terminal-header {
    background: rgba(0, 255, 128, 0.15);
    padding: 0.75rem 1.25rem;
    color: var(--primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 128, 0.3);
}

.terminal-content {
    padding: 1.25rem;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    color: var(--primary);
}

.terminal-content pre {
    margin: 0;
}

/* ===== HERO TERM (glossário inline) ===== */
.hero-term {
    font-weight: 600;
    color: var(--primary, #00ff80);
    border-bottom: 1px dotted rgba(0, 255, 128, 0.6);
    cursor: help;
}

/* ===== GITHUB UI SIMULATOR (Issue Card, PR, Banner) ===== */
.github-ui-simulator {
    margin: 1.25rem 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}
.github-ui-simulator-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #57606a);
    font-size: 0.8rem;
    font-weight: 600;
}
/* Issue / PR Card — como na lista do GitHub */
.gh-issue-card {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    border-left-width: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
}
.gh-issue-card.gh-open { border-left-color: #2da44e; }
.gh-issue-card.gh-closed { border-left-color: #cf222e; }
.gh-issue-card.gh-merged { border-left-color: #8250df; }
.gh-issue-card .gh-issue-title {
    font-weight: 600;
    color: #1f2328;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.gh-issue-card .gh-issue-id {
    color: #57606a;
    font-weight: 400;
}
.gh-issue-card .gh-issue-meta {
    color: #57606a;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.gh-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.gh-label {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 24px;
    font-size: 0.75rem;
    font-weight: 500;
}
.gh-label.gh-label-bug { background: #d73a4a; color: #fff; }
.gh-label.gh-label-feature { background: #0075ca; color: #fff; }
.gh-label.gh-label-docs { background: #bfdadc; color: #0969da; }
.gh-label.gh-label-enhancement { background: #a371f7; color: #fff; }
.gh-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.gh-status-badge.gh-open { background: #dafbe1; color: #1a7f37; }
.gh-status-badge.gh-merged { background: #fbefff; color: #8250df; }
.gh-status-badge.gh-closed { background: #ffebe9; color: #cf222e; }
/* Banner "Compare & pull request" */
.gh-pr-banner {
    background: #fff8c5;
    border: 1px solid #9e6a03;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.gh-pr-banner-text { color: #1f2328; font-weight: 500; }
.gh-pr-banner .gh-btn {
    background: #2da44e;
    color: #fff;
    border: none;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: default;
}
/* Merge options (dropdown style) */
.gh-merge-box {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
.gh-merge-box .gh-merge-title {
    font-weight: 600;
    color: #1f2328;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}
.gh-merge-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.gh-merge-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    color: #1f2328;
    font-size: 0.9rem;
}
.gh-merge-option input { accent-color: #2da44e; }

/* ===== SIMULADOR GITHUB BRANCH PROTECTION RULES ===== */
.gh-branch-protection {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
.gh-branch-protection-title { font-weight: 600; color: #1f2328; margin-bottom: 0.75rem; font-size: 0.95rem; }
.gh-branch-protection-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #1f2328;
}
.gh-branch-protection-row input { accent-color: #2da44e; }
.gh-branch-protection-row.disabled { color: #57606a; }

/* ===== SIMULADOR GITHUB ACTIONS (aba Actions / workflow run) ===== */
.gh-actions-panel {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    overflow: hidden;
    margin: 1rem 0;
}
.gh-actions-tabs {
    display: flex;
    border-bottom: 1px solid #d0d7de;
    background: #fff;
    padding: 0 1rem;
}
.gh-actions-tab {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #0969da;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.gh-actions-tab.active {
    color: #1f2328;
    border-bottom-color: #fd8c73;
}
.gh-actions-run-list {
    padding: 0.5rem 0;
}
.gh-actions-run {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #d0d7de;
    background: #fff;
    font-size: 0.9rem;
}
.gh-actions-run:last-child { border-bottom: none; }
.gh-actions-run-status {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.gh-actions-run-status.success { background: #2da44e; }
.gh-actions-run-status.pending { background: #bf8700; }
.gh-actions-run-status.failed { background: #cf222e; }
.gh-actions-run-name { font-weight: 600; color: #1f2328; }
.gh-actions-run-meta { color: #57606a; font-size: 0.85rem; }
.gh-actions-run-meta code { background: #eaeef2; padding: 1px 4px; border-radius: 3px; }

/* ===== SIMULADOR GITHUB MILESTONE ===== */
.gh-milestone-card {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0;
}
.gh-milestone-title { font-weight: 600; color: #1f2328; font-size: 1rem; margin-bottom: 0.5rem; }
.gh-milestone-meta { font-size: 0.85rem; color: #57606a; margin-bottom: 0.5rem; }
.gh-milestone-bar {
    height: 8px;
    background: #d0d7de;
    border-radius: 4px;
    overflow: hidden;
}
.gh-milestone-bar-fill {
    height: 100%;
    background: #2da44e;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ===== SIMULADOR GITHUB PROJECTS (Kanban) ===== */
.gh-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}
.gh-kanban-column {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 0.75rem;
    min-height: 120px;
}
.gh-kanban-column-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #57606a;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #d0d7de;
}
.gh-kanban-card {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    cursor: default;
}
.gh-kanban-card:last-child { margin-bottom: 0; }
.gh-kanban-card-title { font-weight: 500; color: #1f2328; }
.gh-kanban-card-id { color: #57606a; font-size: 0.8rem; }
@media (max-width: 768px) {
    .gh-kanban { grid-template-columns: 1fr; }
}

/* ===== MISSION NAV BUTTONS ===== */
.mission-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.mission-nav-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== CHALLENGE BOX ===== */
.challenge-box {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.1) 0%, rgba(255, 107, 107, 0.1) 100%);
    border: 2px solid rgba(255, 184, 0, 0.4);
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
}

.challenge-box h3 {
    color: var(--accent);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.challenge-box p {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.challenge-box ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.challenge-box li {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.challenge-hint {
    background: rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--accent);
    padding: 1rem 1.5rem;
    margin-top: 1rem;
    border-radius: 8px;
}

.challenge-hint strong {
    color: var(--accent);
}

/* ===== BOTÃO DE CONCLUSÃO ===== */
.btn-complete-phase {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    color: white;
    padding: 1.2rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    margin-top: 2rem;
}

.btn-complete-phase:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-complete-phase:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-complete-phase.completed {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    pointer-events: none;
}

/* ===== FEATURES GRID ===== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.feature-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 2.5rem;
    border: 2px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 12px 40px rgba(0, 255, 128, 0.25);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    transition: transform 0.3s;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
}

.feature-card code {
    background: rgba(0, 255, 128, 0.1);
    color: var(--primary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Fira Code', 'Consolas', monospace;
}

/* ===== CONTAINER DA TRILHA ===== */
.trilha-container {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.trilha-header {
    margin-bottom: 2rem;
    text-align: center;
    flex-shrink: 0;
}

.trilha-header h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
}

.trilha-intro {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

/* ===== GRID DE MISSÕES NA TRILHA — preenche todo o card pai ===== */
.trilha-missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 0;
    width: 100%;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.mission-card-link {
    text-decoration: none;
    display: flex;
    min-height: 0;
    transition: transform 0.2s;
}

.mission-card-link:hover {
    transform: translateY(-2px);
}

.mission-card-small {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(0, 255, 128, 0.2);
    border-radius: 20px;
    padding: 1.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.mission-card-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.mission-card-link:hover .mission-card-small {
    border-color: var(--primary);
    background: rgba(0, 255, 128, 0.12);
    box-shadow: 0 10px 32px rgba(0, 255, 128, 0.2);
    transform: translateY(-4px);
}

.mission-card-link:hover .mission-card-small::before {
    opacity: 1;
}

.mission-card-small-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.mission-card-number {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.mission-card-icon {
    font-size: 1.5rem;
    color: var(--primary);
    opacity: 0.7;
}

.mission-card-title {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.mission-card-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
    flex-grow: 1;
}

.mission-card-level {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(0, 255, 128, 0.1);
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 128, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mission-card-final {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
}

.mission-card-link:hover .mission-card-final {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.15) 0%, rgba(138, 43, 226, 0.15) 100%);
    box-shadow: 0 8px 24px rgba(255, 184, 0, 0.2);
}

.mission-card-final .mission-card-number {
    background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mission-card-final .mission-card-icon {
    color: var(--accent);
}

.mission-card-final .mission-card-level {
    color: var(--accent);
    background: rgba(255, 184, 0, 0.15);
    border-color: rgba(255, 184, 0, 0.3);
}

@media (max-width: 768px) {
    .trilha-container {
        padding: 1.5rem;
    }
    
    .trilha-header h2 {
        font-size: 1.5rem;
    }
    
    .trilha-intro {
        font-size: 1rem;
    }
    
    .trilha-missions-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .mission-card-small {
        padding: 1.5rem;
    }
    
    .feature-card {
        padding: 2rem;
    }
}

/* ===== TRILHA DE CONHECIMENTO ===== */
/* Layout (3 colunas desktop, 1 mobile) gerenciado por /css/course-ui-kit.css */

/* Grid de missões */
#missionsGrid {
    display: grid;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Card de missão */
.mission-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 2px solid rgba(0, 255, 128, 0.5);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.3s;
}

.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 255, 128, 0.3);
}

.mission-card.completed {
    border-color: var(--success);
}

.mission-card.locked {
    opacity: 0.7;
    filter: grayscale(0.3);
}

/* Header do card (número + status) */
.mission-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    border-bottom: 2px solid var(--primary);
}

.mission-number {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.mission-status {
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-status i {
    color: #666;
}

.mission-status i.fa-check-circle {
    color: var(--success);
}

.mission-status i.fa-play-circle {
    color: var(--primary);
}

/* Conteúdo do card */
.mission-card-content {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mission-card-content h3 {
    /* Contraste com --bg-card; !important evita perder para fill/herança em tema claro */
    color: var(--x4-mission-card-title, var(--text-primary)) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 1.15rem;
    margin: 0 0 8px;
}

.mission-card-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 14px;
}

.mission-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.mission-card-content .btn {
    margin-top: auto;
}

/* Seção de progresso geral */
#overallPerformance {
    max-width: 900px;
    margin: 0 auto 50px;
    padding: 30px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    border-radius: 20px;
    border: 2px solid var(--primary);
    box-shadow: 0 10px 40px rgba(0, 255, 128, 0.2);
}

#overallPerformance h3 {
    color: var(--primary);
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.stat-card {
    text-align: center;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 15px;
    border: 2px solid var(--primary);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    container-type: inline-size;
    container-name: stat-card;
}

.stat-card.secondary {
    border-color: var(--secondary);
}

.stat-card.accent {
    border-color: var(--accent);
}

/* Card Nível Atual: texto se adapta ao tamanho do container para manter padrão dos outros cards */
.stat-card.accent .stat-value {
    font-size: clamp(0.8rem, 4cqw + 0.85rem, 1.35rem);
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
}

@container stat-card (max-width: 140px) {
    .stat-card.accent .stat-value { font-size: 0.95rem; }
}
@container stat-card (max-width: 110px) {
    .stat-card.accent .stat-value { font-size: 0.8rem; }
}

.stat-card.info {
    border-color: #60A5FA;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
}

.stat-value.primary {
    color: var(--primary);
}

.stat-value.secondary {
    color: var(--secondary);
}

.stat-value.accent {
    color: var(--accent);
}

.stat-value.info {
    color: #60A5FA;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ===== CARDS DE PROGRESSO: RESPONSIVIDADE ===== */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }
    .stat-card {
        padding: 14px 10px;
        border-radius: 12px;
    }
    .stat-value {
        font-size: 1.75rem;
        margin-bottom: 4px;
    }
    .stat-card.accent .stat-value {
        font-size: 1.15rem;
    }
    .stat-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }
    .stat-card {
        padding: 12px 8px;
    }
    .stat-value {
        font-size: 1.5rem;
    }
    .stat-card.accent .stat-value {
        font-size: 1rem;
    }
    .stat-label {
        font-size: 0.7rem;
    }
}

.overall-performance-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .overall-performance-card {
        padding: 1rem;
    }
    .overall-performance-title {
        font-size: 1.1rem;
    }
}

/* ===== NAVEGAÇÃO E MENU ===== */
.brand-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: inherit;
}

.menu-highlight {
    color: var(--primary);
}

#studentMenu {
    display: none;
}

.student-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-name {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.logout-link {
    color: #ff6b6b;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 107, 107, 0.3);
    transition: all 0.3s;
    font-size: 0.85rem;
    text-decoration: none;
}

.logout-link:hover {
    background: rgba(255, 107, 107, 0.1);
}

/* ===== CODE HEADER DOTS (macOS style) ===== */
.code-dot-red {
    background: #FF5F56;
}

.code-dot-yellow {
    background: #FFBD2E;
}

.code-dot-green {
    background: #27C93F;
}

/* ===== GRADE DE TÓPICOS ===== */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* ===== CALL TO ACTION ===== */
.cta-card {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    border: 2px solid var(--primary);
    text-align: center;
}

.cta-card h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.cta-card p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.btn-cta-large {
    font-size: 1.2rem;
    padding: 1.25rem 2.5rem;
}

/* ===== CARD DE RECOMPENSA (missões) ===== */
.mission-reward-card {
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    border-radius: 16px;
    border: 2px solid var(--primary);
    text-align: center;
}

.mission-reward-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.reward-item-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.reward-item-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.reward-item-level {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.visualization-tip {
    margin-top: 1.5rem;
    color: var(--text-secondary);
}

/* ===== PÁGINA DE CERTIFICADO ===== */
.celebration-header {
    text-align: center;
    margin-bottom: 3rem;
}

.hero-badge-inline {
    display: inline-flex;
    margin-bottom: 1rem;
}

.celebration-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 1rem;
}

.celebration-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.certificate-course-name {
    font-size: 1.3rem;
    color: var(--primary);
}

.certificate-stats-grid {
    margin: 2rem 0;
}

.certificate-stat-label {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.certificate-stat-value {
    color: var(--text-secondary);
}

.certificate-code-wrapper {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 3rem 0;
}

.next-courses-section {
    margin-top: 4rem;
}

.next-courses-title {
    text-align: center;
    margin-bottom: 2rem;
}

.next-courses-intro {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.next-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.next-course-link {
    text-decoration: none;
}

/* ===== RESPONSIVIDADE (Missão 02: cards dentro do container e visíveis no mobile) ===== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .container {
        padding: 0 1rem;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .content-page {
        padding: 2rem 0;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .content-card {
        padding: 1.5rem 1rem;
        overflow-x: hidden;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .code-block-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .copy-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== PREVIEW DE TELAS (Web/Mobile Apps) ===== */
.screen-preview {
    background: var(--bg-code);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.screen-preview img,
.screen-preview video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Mobile Device Frame (opcional para Flutter/apps) */
.mobile-frame {
    max-width: 375px;
    margin: 2rem auto;
    background: #000;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 8px solid #1a1a1a;
}

.mobile-frame img,
.mobile-frame video {
    width: 100%;
    height: auto;
    border-radius: 32px;
    display: block;
}

/* Desktop Browser Frame (para previews web) */
.browser-frame {
    background: var(--bg-code);
    border-radius: 12px;
    overflow: hidden;
    margin: 2rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.browser-header {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.browser-dots {
    display: flex;
    gap: 0.5rem;
}

.browser-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.browser-url {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-left: 1rem;
}

.browser-content {
    background: white;
    overflow: auto;
}

.browser-content img,
.browser-content video {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsividade para previews */
@media (max-width: 768px) {
    .screen-preview,
    .browser-frame {
        margin: 1.5rem -1rem; /* Expande até as bordas no mobile */
        border-radius: 0;
        padding: 1rem;
    }

    .mobile-frame {
        max-width: 100%;
        padding: 8px;
        border-width: 4px;
        border-radius: 24px;
    }

    .mobile-frame img,
    .mobile-frame video {
        border-radius: 20px;
    }

    .browser-header {
        padding: 0.5rem 0.75rem;
    }

    .browser-dots span {
        width: 10px;
        height: 10px;
    }

    .browser-url {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
        margin-left: 0.5rem;
    }
}

/* ===== SEO PROFESSIONAL CARD ===== */
/* Card pai integrado ao tema do painel */
.seo-professional-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--primary);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.seo-professional-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

.seo-professional-card h2 {
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0;
}

.seo-professional-card h3 {
    color: var(--primary);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-professional-card > h4 {
    color: var(--secondary);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.seo-professional-card > h5 {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0.75rem 0 0.5rem;
}

.seo-professional-card > p, 
.seo-professional-card > li {
    color: var(--text-secondary);
}

.seo-intro {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    padding: 1.25rem;
    background: rgba(var(--primary-rgb), 0.1);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    color: var(--text-primary);
}

/* Fundo e separação visual por tema nas seções de SEO */
.seo-section {
    margin: 2.5rem 0;
    padding: 2rem;
    background: rgba(var(--primary-rgb), 0.06);
    border-radius: 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.seo-section h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.25);
}

/* ===== ISOLAMENTO DOS CARDS INTERNOS DE SEO ===== */
/* Resetar herança e aplicar estilos próprios */
.seo-inner-card,
.seo-inner-card *,
.seo-inner-card *::before,
.seo-inner-card *::after {
    all: unset;
    box-sizing: border-box;
}

/* Reaplica estilos básicos após reset */
.seo-inner-card {
    display: block;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    margin: 2rem 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid #E5E7EB;
}

.seo-inner-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
}

.seo-inner-card-header.seo-technical {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.seo-inner-card-header.seo-content {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.seo-inner-card-header.seo-offpage {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.seo-inner-card-header i {
    display: inline-block;
    font-size: 2rem;
    color: #FFFFFF;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
}

.seo-inner-card-header h3 {
    display: block;
    margin: 0;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
}

.seo-inner-card-body {
    display: block;
    padding: 2rem;
    color: #2D3748;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.seo-inner-card-body p {
    display: block;
    margin: 0 0 1rem 0;
    color: #4A5568;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.7;
}

.seo-inner-card-body ul,
.seo-inner-card-body ol {
    display: block;
    margin: 1rem 0;
    padding: 0 0 0 1.5rem;
    list-style: disc;
}

.seo-inner-card-body li {
    display: list-item;
    margin: 0.5rem 0;
    color: #4A5568;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.7;
}

.seo-inner-card-body code {
    display: inline;
    background: rgba(102, 126, 234, 0.15);
    color: #4F46E5;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
}

.seo-inner-card-body strong {
    display: inline;
    font-weight: 700;
    color: inherit;
}

.seo-inner-card-body h4 {
    display: block;
    color: #2D3748;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1rem 0 0.75rem;
    font-family: inherit;
    line-height: 1.4;
}

.seo-inner-card-body h5 {
    display: block;
    color: #2D3748;
    font-size: 1rem;
    font-weight: 600;
    margin: 0.75rem 0 0.5rem;
    font-family: inherit;
    line-height: 1.4;
}

.seo-pillar-intro {
    display: block;
    font-size: 1.1rem;
    color: #4A5568;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(102, 126, 234, 0.05);
    border-left: 4px solid #667EEA;
    border-radius: 6px;
    font-family: inherit;
    line-height: 1.7;
}

/* SEO Subcards - Isolamento completo */
.seo-subcard {
    display: block;
    background: #F9FAFB;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.seo-subcard-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #667EEA;
    color: #667EEA;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-subcard-title i {
    display: inline-block;
    font-size: 1.5rem;
    font-style: normal;
    color: inherit;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-subcard-title strong {
    display: inline;
    font-weight: 700;
    color: inherit;
}

.seo-subcard-content {
    display: block;
    color: #4A5568;
    line-height: 1.7;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-subcard-content p {
    display: block;
    color: #4A5568;
    margin-bottom: 1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
}

.seo-subcard-content code {
    display: inline;
    background: rgba(102, 126, 234, 0.15);
    color: #4F46E5;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
}

.seo-subcard-content strong {
    display: inline;
    font-weight: 700;
    color: inherit;
}

/* SEO Detail Cards - Isolados */
.seo-detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.seo-detail-card {
    display: block;
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #E0E7FF;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-detail-icon {
    display: block;
    font-size: 2.5rem;
    color: #667EEA;
    margin-bottom: 1rem;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-detail-card h4 {
    display: block;
    color: #4F46E5 !important;
    font-size: 1.1rem !important;
    margin: 0 0 0.75rem !important;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
}

.seo-detail-card p {
    display: block;
    color: #4A5568 !important;
    font-size: 0.95rem !important;
    line-height: 1.6;
    margin: 0 !important;
    font-family: inherit;
}

/* SEO Items - Isolados */
.seo-item {
    display: block;
    background: #FFFFFF;
    padding: 1.25rem;
    border-radius: 8px;
    border-left: 4px solid #667EEA;
    margin-bottom: 1.25rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-item code {
    display: inline;
    background: rgba(102, 126, 234, 0.15);
    color: #4F46E5;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Consolas', 'Monaco', monospace;
}

.seo-item p {
    display: block;
    color: #4A5568 !important;
    margin: 0.75rem 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.7;
    font-family: inherit;
}

.seo-example {
    display: block;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.75rem;
    border-radius: 6px;
    color: #065F46;
    font-size: 0.9rem;
    margin-top: 0.75rem;
    font-weight: 500;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

/* SEO Semantic Grid - Isolados */
.seo-semantic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.seo-semantic-item {
    display: block;
    background: #FFFFFF;
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid #E5E7EB;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-semantic-item code {
    display: block;
    background: rgba(102, 126, 234, 0.1);
    color: #4F46E5;
    padding: 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: 'Consolas', 'Monaco', monospace;
}

.seo-semantic-item p {
    display: block;
    color: #6B7280 !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    line-height: 1.5;
    font-family: inherit;
}

/* SEO Note, Warning, Tip - Isolados */
.seo-note, .seo-warning, .seo-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-note {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3B82F6;
}

.seo-note i {
    display: inline-block;
    color: #3B82F6;
    font-size: 1.25rem;
    margin-top: 0.1rem;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-note p {
    display: block;
    margin: 0 !important;
    color: #1E40AF !important;
    font-family: inherit;
    font-size: 0.95rem !important;
    line-height: 1.7;
}

.seo-warning {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #EF4444;
}

.seo-warning i {
    display: inline-block;
    color: #EF4444;
    font-size: 1.25rem;
    margin-top: 0.1rem;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-warning p {
    display: block;
    margin: 0 !important;
    color: #991B1B !important;
    font-family: inherit;
    font-size: 0.95rem !important;
    line-height: 1.7;
}

.seo-tip {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #F59E0B;
}

.seo-tip i {
    display: inline-block;
    color: #F59E0B;
    font-size: 1.25rem;
    margin-top: 0.1rem;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-tip p {
    display: block;
    margin: 0 !important;
    color: #92400E !important;
    font-family: inherit;
    font-size: 0.95rem !important;
    line-height: 1.7;
}

/* SEO Heading Structure - Isolados */
.seo-heading-structure {
    display: block;
    margin-top: 1rem;
}

.seo-heading-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border-left: 4px solid;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-heading-item.seo-h1 {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #EF4444;
}

.seo-heading-item.seo-h2 {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: #3B82F6;
}

.seo-heading-item.seo-h3 {
    background: rgba(16, 185, 129, 0.08);
    border-left-color: #10B981;
}

.seo-heading-item.seo-h4 {
    background: rgba(139, 92, 246, 0.08);
    border-left-color: #8B5CF6;
}

.seo-heading-item code {
    display: inline;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #2D3748;
}

.seo-heading-item p {
    display: block;
    margin: 0 !important;
    color: #4A5568 !important;
    font-size: 0.95rem !important;
    line-height: 1.7;
    font-family: inherit;
}

/* SEO Performance Cards - Isolados */
.seo-perf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.seo-perf-card {
    display: block;
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #E5E7EB;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-perf-metric {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #667EEA;
    margin-bottom: 0.75rem;
    font-family: inherit;
}

.seo-perf-card p {
    display: block;
    color: #2D3748 !important;
    font-size: 1rem !important;
    font-weight: 600;
    margin: 0.5rem 0 !important;
    font-family: inherit;
    line-height: 1.4;
}

.seo-perf-card span {
    display: block;
    color: #6B7280;
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.5;
}

.seo-checklist-mini {
    display: block;
    background: #FFFFFF;
    padding: 1.25rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.seo-check-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #4A5568;
    font-size: 0.95rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

.seo-check-item i {
    display: inline-block;
    color: #10B981;
    font-size: 1.1rem;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* SEO Comparison - Isolados */
.seo-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.seo-comparison-bad,
.seo-comparison-good {
    display: block;
    padding: 1.25rem;
    border-radius: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-comparison-bad {
    background: rgba(239, 68, 68, 0.08);
    border: 2px solid #FCA5A5;
}

.seo-comparison-good {
    background: rgba(16, 185, 129, 0.08);
    border: 2px solid #6EE7B7;
}

.seo-comparison-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-family: inherit;
}

.seo-comparison-bad .seo-comparison-label {
    color: #DC2626;
}

.seo-comparison-good .seo-comparison-label {
    color: #059669;
}

.seo-comparison code {
    display: block;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    word-break: break-all;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #2D3748;
    line-height: 1.5;
}

.seo-image-best-practices {
    display: block;
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #FFFFFF;
    border-radius: 8px;
    border: 2px solid #E5E7EB;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-image-best-practices h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #2D3748 !important;
    font-size: 1rem !important;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
}

.seo-image-best-practices i {
    display: inline-block;
    color: #667EEA;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-image-best-practices .seo-example {
    margin: 1rem 0;
}

.seo-image-best-practices p {
    display: block;
    color: #4A5568 !important;
    font-size: 0.95rem !important;
    line-height: 1.7;
    margin: 0.5rem 0 !important;
    font-family: inherit;
}

/* SEO Keyword Types, E-A-T, Practice Grid, etc - Todos Isolados */
.seo-keyword-types,
.seo-eat-grid,
.seo-practice-grid,
.seo-strategy-cards,
.seo-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.seo-keyword-type,
.seo-eat-item,
.seo-practice-item,
.seo-strategy-card,
.seo-metric-card {
    display: block;
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #E5E7EB;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: all 0.3s ease;
}

.seo-strategy-card:hover {
    border-color: #667EEA;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.seo-keyword-type h5,
.seo-eat-item h5,
.seo-practice-item h5,
.seo-strategy-card h5 {
    display: block;
    color: #2D3748 !important;
    margin: 0 0 0.75rem !important;
    font-weight: 700;
    font-size: 1rem !important;
    font-family: inherit;
    line-height: 1.4;
}

.seo-keyword-type p,
.seo-eat-item p,
.seo-practice-item p,
.seo-strategy-card p {
    display: block;
    font-size: 0.9rem !important;
    color: #6B7280 !important;
    line-height: 1.6;
    margin: 0 !important;
    font-family: inherit;
}

.seo-keyword-type strong {
    display: inline;
    font-weight: 700;
    color: inherit;
}

.seo-eat-letter {
    display: flex;
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 50%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-practice-item i,
.seo-strategy-icon {
    display: block;
    font-size: 2.5rem;
    color: #667EEA;
    margin-bottom: 1rem;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-metric-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #667EEA;
    margin-bottom: 0.75rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-metric-card p {
    display: block;
    font-size: 0.9rem !important;
    color: #6B7280 !important;
    line-height: 1.6;
    margin: 0 !important;
    font-family: inherit;
}

/* SEO Backlink Quality - Isolado */
.seo-backlink-quality {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.seo-backlink-good,
.seo-backlink-bad {
    display: block;
    padding: 1.5rem;
    border-radius: 12px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-backlink-good {
    background: rgba(16, 185, 129, 0.08);
    border: 2px solid #6EE7B7;
}

.seo-backlink-bad {
    background: rgba(239, 68, 68, 0.08);
    border: 2px solid #FCA5A5;
}

.seo-backlink-good h5 {
    display: block;
    color: #059669 !important;
    margin-bottom: 1rem !important;
    font-weight: 700;
    font-size: 1.1rem !important;
    font-family: inherit;
    line-height: 1.4;
}

.seo-backlink-bad h5 {
    display: block;
    color: #DC2626 !important;
    margin-bottom: 1rem !important;
    font-weight: 700;
    font-size: 1.1rem !important;
    font-family: inherit;
    line-height: 1.4;
}

.seo-backlink-good ul,
.seo-backlink-bad ul {
    display: block;
    list-style: none;
    padding-left: 0;
    margin: 0 0 1rem 0;
}

.seo-backlink-good li,
.seo-backlink-bad li {
    display: block;
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: #4A5568;
    font-size: 0.9rem;
    line-height: 1.7;
    font-family: inherit;
}

.seo-backlink-good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10B981;
    font-weight: bold;
}

.seo-backlink-bad li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #EF4444;
    font-weight: bold;
}

.seo-warning-box {
    display: block;
    background: rgba(239, 68, 68, 0.15);
    padding: 0.75rem;
    border-radius: 6px;
    color: #991B1B;
    font-weight: 600;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

/* SEO Benefits Grid - Integrado ao tema do painel */
.seo-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.seo-benefit-card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 2px solid rgba(var(--primary-rgb), 0.2);
}

.seo-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
    border-color: var(--primary);
}

.seo-benefit-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.seo-benefit-card h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.seo-benefit-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* SEO Pillars - Removidos (substituídos por cards internos isolados) */

/* SEO Code Block Override - Integrado ao tema */
.seo-professional-card .code-block {
    margin: 2rem 0;
    background: var(--bg-code);
}

.seo-professional-card .code-block-header {
    background: rgba(var(--primary-rgb), 0.15);
    border-bottom: 1px solid var(--primary);
}

.seo-professional-card .code-block-header span {
    color: var(--primary);
}

.seo-professional-card .code-block-content {
    background: var(--bg-code);
}

/* SEO Tools Grid - Integrado ao tema */
.seo-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.seo-tool-card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 2px solid rgba(var(--primary-rgb), 0.2);
}

.seo-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
    border-color: var(--primary);
}

.seo-tool-icon {
    font-size: 2.25rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.seo-tool-card h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.seo-tool-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.seo-tool-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.seo-tool-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* SEO Checklist - Integrado ao tema */
.seo-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.seo-checklist-category {
    background: var(--bg-card);
    padding: 1.75rem;
    border-radius: 12px;
    border: 2px solid rgba(var(--primary-rgb), 0.2);
}

.seo-checklist-category h4 {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
    font-size: 1.1rem;
}

.seo-checklist-category i.fas {
    color: var(--primary);
}

.seo-checklist-category ul {
    list-style: none;
    padding-left: 0;
}

.seo-checklist-category li {
    color: var(--text-secondary);
    padding: 0.5rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.seo-checklist-category li i {
    color: var(--success);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.seo-checklist-category code {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
}

/* SEO Expert Tip - Integrado ao tema */
.seo-expert-tip {
    background: rgba(var(--primary-rgb), 0.1);
    border-left: 6px solid var(--primary);
    padding: 2rem;
    border-radius: 12px;
    margin: 2.5rem 0;
    display: flex;
    gap: 1.5rem;
}

.seo-expert-icon {
    font-size: 3rem;
    color: var(--primary);
    flex-shrink: 0;
}

.seo-expert-content h4 {
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.seo-expert-content p {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.seo-expert-content ul {
    list-style: none;
    padding-left: 1.5rem;
}

.seo-expert-content li {
    padding: 0.5rem 0;
    position: relative;
    line-height: 1.7;
    color: var(--text-secondary);
}

.seo-expert-content li::before {
    content: "✓";
    position: absolute;
    left: -1.5rem;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.2rem;
}

/* SEO Resources - Integrado ao tema */
.seo-resources {
    background: rgba(var(--primary-rgb), 0.08);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2.5rem;
    border: 2px solid rgba(var(--primary-rgb), 0.3);
}

.seo-resources h3 {
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.seo-resources ul {
    list-style: none;
    padding-left: 0;
}

.seo-resources li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
}

.seo-resources li:last-child {
    border-bottom: none;
}

.seo-resources a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-resources a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* SEO Tool Button - Botões para ferramentas e recursos */
.seo-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, #667EEA 100%);
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 255, 128, 0.25);
}

.seo-tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 128, 0.35);
    background: linear-gradient(135deg, #00E57F 0%, #5A67D8 100%);
    color: #FFFFFF;
}

.seo-tool-btn i {
    font-size: 0.9rem;
}

/* Botão Premium (para ferramentas pagas) */
.seo-tool-btn-premium {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.seo-tool-btn-premium:hover {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

/* Grupo de botões (para múltiplos links) */
.seo-tool-btn-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.seo-tool-btn-group .seo-tool-btn {
    margin-top: 0;
    flex: 1;
    min-width: 140px;
}

/* Ajuste dos cards de benefícios para equilibrar com botões */
.seo-benefit-card {
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.seo-benefit-card p {
    flex-grow: 1;
    margin-bottom: 0.5rem;
}

/* SEO Tools Grid */
.seo-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.seo-tool-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.seo-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.seo-tool-icon {
    font-size: 2.25rem;
    color: #667EEA;
    margin-bottom: 1rem;
}

.seo-tool-card h4 {
    color: #2D3748;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.seo-tool-card p {
    color: #4A5568;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.seo-tool-link {
    color: #667EEA;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.seo-tool-link:hover {
    color: #5A67D8;
    text-decoration: underline;
}

/* SEO Checklist - Removido (substituído por versão interna isolada) */

/* SEO Expert Tip - Removido (substituído por card interno isolado) */

/* SEO Resources - Removido (substituído por card interno isolado) */

/* ===== NOVOS ESTILOS PARA CARDS INTERNOS DE SEO (ISOLADOS) ===== */

/* SEO Checklist Internal (dentro de card interno isolado) */
.seo-checklist-internal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.seo-checklist-internal-category {
    display: block;
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #E5E7EB;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-checklist-internal-category h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #667EEA;
    color: #667EEA !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
}

.seo-checklist-internal-category h4 i {
    display: inline-block;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: inherit;
}

.seo-checklist-internal-category ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.seo-checklist-internal-category li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #4A5568;
    font-size: 0.9rem;
    line-height: 1.7;
    font-family: inherit;
}

.seo-checklist-internal-category li i {
    display: inline-block;
    color: #10B981;
    margin-top: 0.2rem;
    flex-shrink: 0;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* SEO Tools Detail Grid (dentro de card interno isolado) */
.seo-tools-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.seo-tool-detail-card {
    display: block;
    background: #FFFFFF;
    padding: 1.75rem;
    border-radius: 12px;
    border: 2px solid #E5E7EB;
    position: relative;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: all 0.3s ease;
}

.seo-tool-detail-card:hover {
    border-color: #667EEA;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.seo-tool-detail-card.seo-tool-premium {
    border-color: #F59E0B;
}

.seo-premium-badge {
    display: inline-block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #F59E0B;
    color: #FFFFFF;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.5px;
}

.seo-tool-detail-icon {
    display: block;
    font-size: 2.5rem;
    color: #667EEA;
    margin-bottom: 1rem;
    text-align: center;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-tool-detail-card h5 {
    display: block;
    color: #2D3748 !important;
    font-size: 1.15rem !important;
    font-weight: 700;
    margin: 0 0 0.75rem !important;
    text-align: center;
    font-family: inherit;
    line-height: 1.4;
}

.seo-tool-detail-card p {
    display: block;
    color: #6B7280 !important;
    font-size: 0.9rem !important;
    line-height: 1.7;
    margin: 0 0 1rem !important;
    text-align: center;
    font-family: inherit;
}

.seo-tool-features {
    display: block;
    margin: 1.25rem 0;
    padding: 1rem;
    background: #F9FAFB;
    border-radius: 8px;
}

.seo-tool-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    color: #4A5568;
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.5;
}

.seo-tool-feature i {
    display: inline-block;
    color: #10B981;
    font-size: 0.9rem;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-tool-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #667EEA;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s;
    font-family: inherit;
    justify-content: center;
    margin-top: 0.5rem;
}

.seo-tool-detail-link:hover {
    color: #4F46E5;
    text-decoration: underline;
}

.seo-tool-detail-link i {
    display: inline-block;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* SEO Expert Header */
.seo-inner-card-header.seo-expert-header {
    background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
}

/* SEO Focus Cards */
.seo-focus-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.seo-focus-card {
    display: block;
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #E5E7EB;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: all 0.3s ease;
}

.seo-focus-card:hover {
    border-color: #667EEA;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.12);
}

.seo-focus-number {
    display: flex;
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    color: #FFFFFF;
    font-size: 1.75rem;
    font-weight: 700;
    border-radius: 50%;
    font-family: inherit;
}

.seo-focus-card h5 {
    display: block;
    color: #2D3748 !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    margin: 0 0 0.75rem !important;
    font-family: inherit;
    line-height: 1.4;
}

.seo-focus-card p {
    display: block;
    color: #6B7280 !important;
    font-size: 0.9rem !important;
    line-height: 1.6;
    margin: 0 !important;
    font-family: inherit;
}

/* SEO Mindset Cards */
.seo-mindset-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.seo-mindset-card {
    display: block;
    padding: 1.5rem;
    border-radius: 12px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-mindset-do {
    background: rgba(16, 185, 129, 0.08);
    border: 2px solid #6EE7B7;
}

.seo-mindset-dont {
    background: rgba(239, 68, 68, 0.08);
    border: 2px solid #FCA5A5;
}

.seo-mindset-card h5 {
    display: block;
    font-size: 1.15rem !important;
    font-weight: 700;
    margin: 0 0 1rem !important;
    font-family: inherit;
    line-height: 1.4;
}

.seo-mindset-do h5 {
    color: #059669 !important;
}

.seo-mindset-dont h5 {
    color: #DC2626 !important;
}

.seo-mindset-card ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.seo-mindset-card li {
    display: block;
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: #4A5568;
    font-size: 0.9rem;
    line-height: 1.7;
    font-family: inherit;
}

.seo-mindset-do li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10B981;
    font-weight: bold;
}

.seo-mindset-dont li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #EF4444;
    font-weight: bold;
}

/* SEO Timeline */
.seo-timeline {
    display: block;
    margin-top: 1.5rem;
}

.seo-timeline-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: #FFFFFF;
    border-radius: 10px;
    border-left: 4px solid #667EEA;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-timeline-period {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 0.75rem;
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 8px;
    text-align: center;
    flex-shrink: 0;
    font-family: inherit;
}

.seo-timeline-content h5 {
    display: block;
    color: #2D3748 !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    margin: 0 0 0.5rem !important;
    font-family: inherit;
    line-height: 1.4;
}

.seo-timeline-content p {
    display: block;
    color: #6B7280 !important;
    font-size: 0.9rem !important;
    line-height: 1.6;
    margin: 0 !important;
    font-family: inherit;
}

/* SEO Resources Header */
.seo-inner-card-header.seo-resources-header {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}

/* SEO Expert Header */
.seo-inner-card-header.seo-expert-header {
    background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
}

/* SEO Resource Cards (dentro de card interno isolado) */
.seo-resource-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.seo-resource-card {
    display: block;
    background: #FFFFFF;
    padding: 1.75rem;
    border-radius: 12px;
    border: 2px solid #E5E7EB;
    position: relative;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: all 0.3s ease;
}

.seo-resource-card:hover {
    border-color: #667EEA;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.seo-resource-card.seo-resource-official {
    border-color: #10B981;
}

.seo-resource-card.seo-resource-official:hover {
    border-color: #059669;
}

.seo-resource-card.seo-resource-course {
    border-color: #F59E0B;
}

.seo-resource-badge {
    display: inline-block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #10B981;
    color: #FFFFFF;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.5px;
}

.seo-resource-badge-free {
    background: #10B981;
}

.seo-resource-badge-paid {
    background: #F59E0B;
}

.seo-resource-icon {
    display: block;
    font-size: 2.5rem;
    color: #667EEA;
    margin-bottom: 1rem;
    text-align: center;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.seo-resource-card.seo-resource-official .seo-resource-icon {
    color: #10B981;
}

.seo-resource-card.seo-resource-course .seo-resource-icon {
    color: #F59E0B;
}

.seo-resource-card h5 {
    display: block;
    color: #2D3748 !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    margin: 0 0 0.75rem !important;
    text-align: center;
    font-family: inherit;
    line-height: 1.4;
}

.seo-resource-card p {
    display: block;
    color: #6B7280 !important;
    font-size: 0.9rem !important;
    line-height: 1.7;
    margin: 0 0 1.25rem !important;
    text-align: center;
    font-family: inherit;
}

.seo-resource-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #667EEA;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s;
    font-family: inherit;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
}

.seo-resource-link:hover {
    color: #4F46E5;
    text-decoration: underline;
}

.seo-resource-link i {
    display: inline-block;
    font-style: normal;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* SEO Checklist - Removido da raiz (agora só usado dentro dos cards do tema) */
.seo-checklist {
    display: none;
}

/* SEO Expert Tip - Removido da raiz (agora só usado dentro dos cards do tema) */
.seo-expert-tip {
    display: none;
}

/* SEO Resources - Removido da raiz (agora só usado dentro dos cards do tema) */
.seo-resources {
    display: none;
}
}

.seo-checklist-category i.fas {
    color: #667EEA;
}

.seo-checklist-category ul {
    list-style: none;
    padding-left: 0;
}

.seo-checklist-category li {
    color: #2D3748;
    padding: 0.5rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.seo-checklist-category li i {
    color: #48BB78;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.seo-checklist-category code {
    background: rgba(102, 126, 234, 0.1);
    color: #5A67D8;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
}

/* SEO Expert Tip */
.seo-expert-tip {
    background: rgba(255, 230, 109, 0.15);
    border-left: 6px solid #FFE66D;
    padding: 2rem;
    border-radius: 12px;
    margin: 2.5rem 0;
    display: flex;
    gap: 1.5rem;
}

.seo-expert-icon {
    font-size: 3rem;
    color: #FFE66D;
    flex-shrink: 0;
}

.seo-expert-content h4 {
    color: #FFE66D;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.seo-expert-content p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.seo-expert-content ul {
    list-style: none;
    padding-left: 1.5rem;
}

.seo-expert-content li {
    padding: 0.5rem 0;
    position: relative;
    line-height: 1.7;
}

.seo-expert-content li::before {
    content: "✓";
    position: absolute;
    left: -1.5rem;
    color: #FFE66D;
    font-weight: bold;
    font-size: 1.2rem;
}

/* SEO Resources */
.seo-resources {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2.5rem;
}

.seo-resources h3 {
    color: #FFE66D;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.seo-resources ul {
    list-style: none;
    padding-left: 0;
}

.seo-resources li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.seo-resources li:last-child {
    border-bottom: none;
}

.seo-resources a {
    color: #A0EADE;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-resources a:hover {
    color: #FFE66D;
    text-decoration: underline;
}

/* SEO Responsive — cards internos dentro do container e visíveis no mobile */
@media (max-width: 768px) {
    /* Container principal SEO: sem overflow, dentro da viewport */
    .seo-professional-card {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }

    .seo-professional-card * {
        box-sizing: border-box;
    }

    .seo-section {
        padding: 1.25rem 1rem;
        margin: 1.5rem 0;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .seo-section h3 {
        font-size: 1.1rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .seo-benefits-grid,
    .seo-tools-grid,
    .seo-checklist {
        grid-template-columns: 1fr;
        gap: 1rem;
        min-width: 0;
    }

    .seo-benefit-card {
        min-height: auto;
        max-width: 100%;
        min-width: 0;
        padding: 1.25rem 1rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .seo-benefit-card h4,
    .seo-benefit-card p {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .seo-expert-tip {
        flex-direction: column;
        text-align: center;
    }

    .seo-expert-icon {
        font-size: 2.5rem;
    }

    .seo-expert-content ul {
        text-align: left;
    }

    .seo-detail-cards,
    .seo-semantic-grid,
    .seo-perf-cards,
    .seo-keyword-types,
    .seo-eat-grid,
    .seo-practice-grid,
    .seo-strategy-cards,
    .seo-metrics-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .seo-comparison,
    .seo-backlink-quality {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    /* Cards internos SEO (pilares, subcards): contidos e visíveis */
    .seo-inner-card {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        border-radius: 12px;
    }

    .seo-inner-card-header {
        padding: 1rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .seo-inner-card-header i {
        font-size: 1.5rem;
    }

    .seo-inner-card-header h3 {
        font-size: 1.1rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .seo-inner-card-body {
        padding: 1rem;
        min-width: 0;
        overflow-x: hidden;
    }

    .seo-subcard {
        padding: 1rem;
        min-width: 0;
        overflow-x: hidden;
    }

    .seo-subcard-title {
        flex-wrap: wrap;
        word-break: break-word;
    }

    .seo-subcard-content {
        min-width: 0;
        overflow-x: hidden;
    }

    /* Blocos de código: scroll horizontal se necessário, sem quebrar layout */
    .seo-professional-card .code-block,
    .content-card .code-block {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1rem 0;
    }

    .seo-professional-card .code-block-content,
    .content-card .code-block-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .seo-professional-card .code-block-content code,
    .content-card .code-block-content code {
        word-break: normal;
        overflow-wrap: normal;
    }

    /* Responsividade dos botões de ferramentas */
    .seo-tool-btn-group {
        flex-direction: column;
    }

    .seo-tool-btn-group .seo-tool-btn {
        width: 100%;
        min-width: auto;
    }

    .seo-tool-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ===== UTILITIES ===== */
.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 2rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.hidden {
    display: none !important;
}

/* ===== MENU DRAWER (mobile): forçar branco em todos os links e submenu ===== */
@media (max-width: 968px) {
    .navbar .nav-mobile-drawer,
    .navbar .nav-mobile-drawer .nav-center,
    .navbar .nav-mobile-drawer .nav-right {
        color: #ffffff !important;
    }
    .navbar .nav-mobile-drawer .dropdown-menu,
    .navbar .nav-mobile-drawer .dropdown-menu *,
    .navbar .nav-mobile-drawer .dropdown-menu li,
    .navbar .nav-mobile-drawer .dropdown-menu li a,
    .navbar .nav-mobile-drawer .dropdown-menu li a i,
    .navbar .nav-mobile-drawer .dropdown-menu li a span,
    .navbar .nav-mobile-drawer .nav-menu-center li a,
    .navbar .nav-mobile-drawer .nav-menu-center li a i,
    .navbar .nav-mobile-drawer .nav-menu-center li a span,
    .navbar .nav-mobile-drawer .nav-menu-right li a,
    .navbar .nav-mobile-drawer .nav-menu-right li a i,
    .navbar .nav-mobile-drawer .nav-menu-right li a span,
    .navbar .nav-mobile-drawer .dropdown-toggle,
    .navbar .nav-mobile-drawer .dropdown-toggle i,
    .navbar .nav-mobile-drawer .nav-link-home,
    .navbar .nav-mobile-drawer .nav-link-home i,
    .navbar .nav-mobile-drawer .dropdown-chevron-btn,
    .navbar .nav-mobile-drawer .dropdown-chevron-btn i {
        color: #ffffff !important;
    }

    /* SEO - Responsividade dos novos cards internos */
    .seo-tools-detail-grid {
        grid-template-columns: 1fr;
    }

    .seo-focus-cards {
        grid-template-columns: 1fr;
    }

    .seo-mindset-cards {
        grid-template-columns: 1fr;
    }

    .seo-timeline-item {
        flex-direction: column;
        gap: 1rem;
    }

    .seo-timeline-period {
        min-width: 100%;
    }

    .seo-resource-cards {
        grid-template-columns: 1fr;
    }

    .seo-checklist-internal {
        grid-template-columns: 1fr;
    }
}