/* ============================================
   MAIN.CSS - Arquivo Principal
   Importa todos os módulos CSS
   ============================================ */

/* ============================================
   VARIÁVEIS CSS - Sistema de Design
   ============================================ */

:root {
  /* Cores - Tema Dark (padrão) */
  --color-bg-primary: rgb(30, 30, 30);
  --color-bg-secondary: rgb(37, 37, 38);
  --color-bg-accent: rgb(30, 30, 30);
  --color-text-primary: rgb(212, 212, 212);
  --color-text-secondary: rgb(133, 133, 133);
  --color-border-primary: rgb(60, 60, 60);
  --color-border-accent: rgb(0, 122, 204);
  
  /* Cores de status */
  --color-error: #f48771;
  --color-warning: #cca700;
  --color-info: #75beff;
  --color-success: #89d185;
  
  /* Cores de ícones */
  --color-icon-folder: rgb(133, 133, 133);
  --color-icon-file: rgb(78, 148, 206);
  --color-icon-java: #f89820;
  --color-icon-xml: #e37933;
  --color-icon-gitignore: #f05032;
  --color-icon-properties: #6db33f;
  --color-icon-yml: #cb171e;
  --color-icon-html: #e34c26;
  --color-icon-markdown: #083fa1;
  
  /* Tipografia */
  --font-family-mono: "Cascadia Code", "Droid Sans Mono", "monospace", monospace;
  --font-size-base: 12px;
  --font-size-small: 10px;
  --font-size-large: 14px;
  --font-size-title: 16px;
  
  /* Espaçamentos */
  --spacing-xs: 0.2em;
  --spacing-sm: 0.3em;
  --spacing-md: 0.5em;
  --spacing-lg: 0.8em;
  --spacing-xl: 1rem;
  --spacing-2xl: 1.5rem;
  
  /* Dimensões */
  --width-navigation: 380px;
  --width-menu: 60px;
  --height-header: 30px;
  --height-terminal: 250px;
  --height-footer: 20px;
  
  /* Transições */
  --transition-fast: 0.2s ease;
  --transition-normal: 250ms ease-in-out;
  
  /* Z-index */
  --z-index-menu: 1;
  --z-index-navigation: 10;
  --z-index-editor: 1;
  --z-index-dropdown: 1000;
  
  /* Syntax Highlighting - Tema Dark */
  /* Tag e nome da tag - Azul */
  --syntax-tag: #569CD6;
  --syntax-tag-name: #569CD6;
  /* Atributo - Azul claro */
  --syntax-attribute: #9CDCFE;
  /* Valor - Laranja */
  --syntax-value: #CE9178;
  /* Texto - Cinza claro */
  --syntax-text: #D4D4D4;
  /* Comentário - Verde */
  --syntax-comment: #6A9955;
  /* Símbolos (<, >, =) - Cinza */
  --syntax-symbol: #808080;
  --syntax-delimiter: #808080;
  --syntax-operator: #808080;
}

/* Tema Light */
body:has(#theme:checked) {
  --color-bg-primary: rgb(250, 250, 250);
  --color-bg-secondary: rgb(235, 235, 235);
  --color-bg-accent: rgb(202, 204, 207);
  --color-text-primary: rgb(44, 44, 44);
  --color-text-secondary: rgb(111, 111, 111);
  --color-border-primary: rgb(222, 222, 222);
  --color-border-accent: rgb(140, 0, 255);
  
  /* Syntax Highlighting - Tema Light */
  /* Tag e nome da tag - Azul */
  --syntax-tag: #0000FF;
  --syntax-tag-name: #0000FF;
  /* Atributo - Azul escuro */
  --syntax-attribute: #0451A5;
  /* Valor - Vermelho */
  --syntax-value: #A31515;
  /* Texto - Preto */
  --syntax-text: #000000;
  /* Comentário - Verde */
  --syntax-comment: #008000;
  /* Símbolos (<, >, =) - Preto */
  --syntax-symbol: #000000;
  --syntax-delimiter: #000000;
  --syntax-operator: #000000;
}

/* ============================================
   RESET CSS - Normalização
   ============================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--font-family-mono);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset de elementos específicos */
section,
div,
i,
span,
label,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
  padding: 0;
  margin: 0;
}

/* Inputs ocultos por padrão */
input[type="checkbox"],
input[type="radio"] {
  display: none;
}

/* Links */
a {
  text-decoration: none;
  color: inherit;
}

/* Listas */
ul,
ol {
  list-style: none;
}

/* Imagens */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Botões e inputs */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Foco acessível */
:focus-visible {
  outline: 2px solid var(--color-border-accent);
  outline-offset: 2px;
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */

body {
  background-color: var(--color-bg-primary);
  min-height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  max-width: 1600px;
  margin-inline: auto;
}

/* Media query para mobile landscape */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  body {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  body {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

main {
  border-right: 1px solid var(--color-bg-secondary);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  height: calc(100dvh - var(--height-footer));
}

main * {
  height: auto;
  outline: none;
}

#editor {
  width: 100%;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: var(--z-index-editor);
}

#editor > .terminal {
  flex-shrink: 0;
  order: 2;
}

/* Footer */
#footer {
  height: var(--height-footer);
  background-color: var(--color-bg-secondary);
  padding-inline: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

#footer div {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

#footer div > i {
  font-style: normal;
  font-size: var(--font-size-small);
  padding-inline: var(--spacing-sm);
  color: var(--color-text-secondary);
  cursor: default;
}

#footer div i:hover {
  background-color: var(--color-bg-primary);
}

#footer div span > i {
  font-style: normal;
  font-size: var(--font-size-small);
  margin-inline: 0;
  color: var(--color-text-secondary);
}

#footer i span {
  font-weight: 300;
}

#footer i a {
  text-decoration: none;
  color: var(--color-text-secondary);
}

/* Responsividade para telas muito largas e baixas (wide screens) */
@media (min-width: 1200px) and (max-height: 600px) {
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  main {
    height: calc(100dvh - var(--height-footer));
    overflow: hidden;
  }
  
  #editor {
    min-width: 0;
    overflow: hidden;
  }
  
  #header {
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .terminal {
    max-height: 40vh;
  }
}

/* Responsividade para mobile em landscape */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  main {
    position: relative;
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    margin-left: 60px;
    height: calc(100dvh - var(--height-footer));
    transition: width var(--transition-normal), margin-left var(--transition-normal);
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  body:has(#explorerView:checked) main,
  body:has(#extensionsView:checked) main {
    width: calc(100vw - 280px) !important;
    max-width: calc(100vw - 280px) !important;
    margin-left: 280px;
  }
  
  #editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    transition: margin var(--transition-normal);
    box-sizing: border-box !important;
  }
  
  #footer {
    padding-inline: var(--spacing-md);
    font-size: var(--font-size-small);
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    margin-left: 60px;
    transition: width var(--transition-normal), margin-left var(--transition-normal);
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  body:has(#explorerView:checked) #footer,
  body:has(#extensionsView:checked) #footer {
    width: calc(100vw - 280px) !important;
    max-width: calc(100vw - 280px) !important;
    margin-left: 280px;
  }
  
  #footer .hide {
    display: none;
  }
  
  .terminal {
    max-height: 30vh;
  }
}

/* Responsividade */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  main {
    position: relative;
    width: calc(100vw - 60px) !important; /* Largura total menos menu minimizado */
    max-width: calc(100vw - 60px) !important;
    margin-left: 60px; /* Espaço para o menu minimizado */
    height: calc(100dvh - var(--height-footer));
    transition: width var(--transition-normal), margin-left var(--transition-normal);
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Quando explorer ou extensions expandem, reduz a largura do main */
  body:has(#explorerView:checked) main,
  body:has(#extensionsView:checked) main {
    width: calc(100vw - 280px) !important; /* 60px menu + 220px explorer/extensions */
    max-width: calc(100vw - 280px) !important;
    margin-left: 280px;
  }
  
  #editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    transition: margin var(--transition-normal);
    box-sizing: border-box !important;
  }
  
  /* Footer ajustado para mobile */
  #footer {
    padding-inline: var(--spacing-md);
    font-size: var(--font-size-small);
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    margin-left: 60px;
    transition: width var(--transition-normal), margin-left var(--transition-normal);
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  /* Quando explorer ou extensions expandem, reduz a largura do footer */
  body:has(#explorerView:checked) #footer,
  body:has(#extensionsView:checked) #footer {
    width: calc(100vw - 280px) !important;
    max-width: calc(100vw - 280px) !important;
    margin-left: 280px;
  }
  
  #footer .hide {
    display: none;
  }
}

/* ============================================
   NAVEGAÇÃO - Sidebar e Menu
   ============================================ */

#navigation {
  display: flex;
  overflow: hidden;
  min-width: 0;
  gap: 0;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-index-navigation);
  height: calc(100dvh - var(--height-footer));
  max-height: calc(100dvh - var(--height-footer));
  min-height: calc(100dvh - var(--height-footer));
}

/* Menu Lateral */
.menu {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--spacing-md);
  background-color: var(--color-bg-accent);
  width: var(--width-menu);
  min-width: var(--width-menu);
  z-index: 1000;
  position: relative;
}

.menu i {
  color: var(--color-text-secondary);
  display: block;
  font-size: 22px;
  cursor: pointer;
  padding-block: var(--spacing-md);
}

.menu i.disabled {
  opacity: 0.5;
  cursor: default;
}

.menu i:first-child {
  padding-top: 0.1em;
}

.menu label[for="menu"] {
  color: var(--color-text-secondary) !important;
  display: block;
  font-size: 22px;
  cursor: pointer;
  padding-block: var(--spacing-md);
  width: 100%;
  text-align: center;
}

.menu label[for="menu"]:hover {
  color: var(--color-text-primary) !important;
}

.menu label[for="menu"] i {
  color: inherit !important;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Ícones do menu - hamburger e close */
.menu label[for="menu"] .hamburger-icon {
  display: inline-block;
  opacity: 1;
}

.menu label[for="menu"] .close-icon {
  display: none;
  opacity: 0;
}

/* Quando menu está checked (aberto), mostra close icon */
#menu:checked + label[for="menu"] .hamburger-icon {
  display: none;
  opacity: 0;
}

#menu:checked + label[for="menu"] .close-icon {
  display: inline-block;
  opacity: 1;
}

/* Quando menu não está checked (fechado), mostra hamburger icon */
#menu:not(:checked) + label[for="menu"] .hamburger-icon {
  display: inline-block;
  opacity: 1;
}

#menu:not(:checked) + label[for="menu"] .close-icon {
  display: none;
  opacity: 0;
}

.menu label,
.menu label i {
  color: var(--color-text-primary) !important;
  width: 100%;
  opacity: 1;
  cursor: pointer;
  padding-top: var(--spacing-md);
}

.menu label[for="explorerView"] {
  display: block;
  padding-block: var(--spacing-md);
  text-align: center;
}

.menu label[for="explorerView"] i {
  color: var(--color-text-secondary);
}

.menu label[for="explorerView"]:hover i {
  color: var(--color-text-primary);
}

#navigation:has(#explorerView:checked) .menu label[for="explorerView"] i {
  color: var(--color-text-primary);
}

#navigation:has(#extensionsView:checked) .menu label.extensions-icon {
  color: var(--color-text-primary);
}

.menu a {
  color: var(--color-text-secondary);
  display: block;
  font-size: 22px;
  cursor: pointer;
  padding-block: var(--spacing-md);
  text-decoration: none;
  width: 100%;
  text-align: center;
}

.menu a:hover {
  color: var(--color-text-primary);
}

.menu a i {
  color: inherit;
}

.menu a.git-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--spacing-md);
}

.menu a.git-icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-text-secondary);
}

.menu a.git-icon:hover svg {
  color: var(--color-text-primary);
}

.menu label.extensions-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--spacing-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  width: 100%;
}

.menu label.extensions-icon:hover {
  color: var(--color-text-primary);
}

.menu label.extensions-icon svg {
  width: 22px;
  height: 22px;
  color: inherit;
}

/* Menu de configurações */
.menu > div:last-child {
  position: relative;
  z-index: 1001;
}

.menu label.folder.settings {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--spacing-md);
  position: relative;
}

/* Badge de notificação para o menu de configurações */
.menu label.folder.settings[for="folderToggleSettings"]::after {
  content: "1";
  position: absolute;
  bottom: 0.2em;
  right: 0.2em;
  background-color: #007acc;
  color: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Badge de notificação para o menu de account */
.menu label.folder.settings[for="folderToggleAccounts"]::after {
  content: "3";
  position: absolute;
  bottom: 0.2em;
  right: 0.2em;
  background-color: #007acc;
  color: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.menu label.folder.settings svg {
  width: 22px;
  height: 22px;
  color: var(--color-text-secondary);
}

.menu label.folder.settings:hover svg {
  color: var(--color-text-primary);
}

.menu > div:last-child > div {
  position: relative;
  z-index: 1002;
}

.folder.settings ~ ul li input {
  display: block;
}

.folder.settings ~ ul {
  padding-block: var(--spacing-md);
  padding-inline: var(--spacing-lg);
  position: absolute;
  display: none;
  left: 66px;
  bottom: 0;
  min-width: 220px;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.5rem;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.4);
  list-style: none;
  z-index: 1002;
  font-size: var(--font-size-base);
}

.menu > div:last-child > div:first-child .folder.settings ~ ul {
  bottom: 60px;
}

.menu > div:last-child > div:last-child .folder.settings ~ ul {
  bottom: 0;
}

.folder.settings ~ ul li {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-primary);
  margin: 0;
  transition: background-color var(--transition-fast);
}

.folder.settings ~ ul li:last-child {
  border-bottom: none;
}

.folder.settings ~ ul li:hover {
  background-color: var(--color-bg-primary);
  border-radius: 0.2rem;
}

.folder.settings ~ ul li input[type="checkbox"] {
  cursor: pointer;
  width: auto;
  margin: 0;
  display: inline-block;
  appearance: checkbox;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  width: 16px;
  height: 16px;
  margin-left: var(--spacing-md);
}

.folder.settings ~ ul li label {
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-base);
  line-height: 1.4;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
}

.folder.settings ~ ul li a {
  text-decoration: none;
  color: var(--color-text-secondary);
  display: block;
  padding: 0;
  font-size: var(--font-size-base);
  line-height: 1.5;
  transition: color var(--transition-fast);
}

.folder.settings ~ ul li a:hover {
  color: var(--color-text-primary);
}

.folder.settings ~ ul li:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.folder.settings ~ ul hr {
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid var(--color-border-primary);
  height: 0;
}

.folder.settings ~ input[type="radio"]:checked ~ ul,
.menu > div:last-child > div:first-child .folder.settings ~ input[type="radio"]:checked ~ ul,
.menu > div:last-child > div:last-child .folder.settings ~ input[type="radio"]:checked ~ ul {
  display: block !important;
}

/* Mobile: menu lateral sempre visível minimizado */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  /* Navigation sempre visível no lado esquerdo */
  #navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px; /* Largura minimizada */
    min-width: 60px;
    max-width: 60px;
    height: 100%;
    z-index: 1000;
    display: block; /* Mudar para block para permitir posicionamento absoluto dos filhos */
    background-color: transparent;
    transition: width var(--transition-normal);
    overflow: visible; /* Permitir que explorer/extensions sejam visíveis */
    box-sizing: border-box;
  }
  
  /* Menu minimizado - apenas ícones verticais */
  .menu {
    width: 60px;
    min-width: 60px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-md) 0;
    background-color: var(--color-bg-accent);
    position: relative;
    z-index: 1001;
  }
  
  .menu > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  
  .menu > div:last-child {
    display: none;
  }
  
  /* Esconder hamburger em mobile - não precisamos mais */
  .menu label[for="menu"] {
    display: none !important;
  }
  
  /* Garantir que o menu checkbox também esteja escondido em mobile */
  #menu.desktop-only {
    display: none !important;
  }
  
  /* Ícones do menu em mobile - sempre visíveis */
  .menu label[for="explorerView"],
  .menu label.extensions-icon,
  .menu a.git-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--color-border-primary);
  }
  
  .menu label[for="explorerView"]:hover,
  .menu label.extensions-icon:hover,
  .menu a.git-icon:hover {
    background-color: var(--color-bg-primary);
  }
  
  .menu label[for="explorerView"] i,
  .menu label.extensions-icon svg,
  .menu a.git-icon svg {
    width: 24px;
    height: 24px;
  }
  
  /* Destaque quando ativo - será tratado via JavaScript se necessário */
  /* Por enquanto, o hover já indica interatividade */
  
  /* Explorer e Extensions - expandem quando ativos */
  .explorer,
  .extensions {
    position: fixed; /* Mudar para fixed para ficar acima de tudo */
    top: 0;
    left: 60px; /* Começa depois do menu minimizado */
    width: 0 !important; /* Forçar fechado por padrão em mobile */
    min-width: 0 !important;
    max-width: 0 !important;
    height: 100%;
    margin-left: 0;
    opacity: 0 !important;
    background-color: var(--color-bg-secondary);
    border: none;
    overflow: hidden;
    transition: width var(--transition-normal), opacity var(--transition-normal), z-index var(--transition-normal);
    z-index: 1; /* Atrás quando minimizado */
    pointer-events: none;
    visibility: hidden !important;
  }
  
  /* Quando Explorer está selecionado, expande e vai para frente */
  #explorerView:checked ~ .explorer {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9999 !important; /* Muito alto para ficar na frente de tudo */
    visibility: visible !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  /* Garantir que conteúdo interno do explorer seja visível quando expandido */
  /* Esconder estrutura de pastas em mobile */
  #explorerView:checked ~ .explorer .desktop-only {
    display: none !important;
  }
  
  /* Mostrar apenas lista mobile simplificada */
  #explorerView:checked ~ .explorer .mobile-only {
    display: block !important;
  }
  
  #explorerView:checked ~ .explorer .mobile-explorer-list,
  #explorerView:checked ~ .explorer .mobile-explorer-list li,
  #explorerView:checked ~ .explorer .mobile-explorer-list li label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Garantir que título apareça */
  #explorerView:checked ~ .explorer .title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Quando Extensions está selecionado, expande e vai para frente */
  #extensionsView:checked ~ .extensions {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9999 !important; /* Muito alto para ficar na frente de tudo */
    visibility: visible !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  /* Garantir que conteúdo interno do extensions seja visível quando expandido */
  #extensionsView:checked ~ .extensions .title,
  #extensionsView:checked ~ .extensions .folder.subTitle,
  #extensionsView:checked ~ .extensions .extension-item,
  #extensionsView:checked ~ .extensions li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* MOBILE: IMPORTANTE - ul são controladas pelos checkboxes individuais */
  /* Estado inicial: todas as listas começam escondidas */
  #extensionsView:checked ~ .extensions .folder.subTitle ~ input[type="checkbox"] ~ ul,
  #extensionsView:checked ~ .extensions .folder.subTitle ~ ul,
  #extensionsView:checked ~ .extensions #folderToggleInstalled ~ ul,
  #extensionsView:checked ~ .extensions #folderToggleRecommended ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* MOBILE: INSTALLED - Quando checkbox está marcado */
  #extensionsView:checked ~ .extensions #folderToggleInstalled:checked ~ ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* MOBILE: INSTALLED - Quando checkbox NÃO está marcado */
  #extensionsView:checked ~ .extensions #folderToggleInstalled:not(:checked) ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* MOBILE: RECOMMENDED - Quando checkbox está marcado */
  #extensionsView:checked ~ .extensions #folderToggleRecommended:checked ~ ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* MOBILE: RECOMMENDED - Quando checkbox NÃO está marcado */
  #extensionsView:checked ~ .extensions #folderToggleRecommended:not(:checked) ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* MOBILE: Regras genéricas como fallback */
  #extensionsView:checked ~ .extensions .folder.subTitle ~ input[type="checkbox"]:checked ~ ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  #extensionsView:checked ~ .extensions .folder.subTitle ~ input[type="checkbox"]:not(:checked) ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Quando um está ativo, o outro fica escondido e atrás */
  #explorerView:checked ~ .extensions {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important; /* Atrás quando minimizado */
    visibility: hidden !important;
  }
  
  #extensionsView:checked ~ .explorer {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important; /* Atrás quando minimizado */
    visibility: hidden !important;
  }
  
  /* Ajustar conteúdo do explorer/extensions */
  .explorer > div:first-child,
  .extensions > div:first-child {
    padding: 0; /* Sem padding em mobile para lista ocupar toda largura */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    background-color: var(--color-bg-secondary);
  }
  
  .explorer .title,
  .extensions .title {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    position: relative;
    z-index: 1;
  }
  
  /* Mobile explorer list - ajustes */
  .mobile-explorer-list {
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  
  .mobile-explorer-list li {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
  }
  
  .mobile-explorer-list li label {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    position: relative;
    z-index: 1;
    display: block;
  }
  
  /* Garantir que extension items também sejam visíveis */
  .extensions .extension-item {
    position: relative;
    z-index: 1;
  }
}

/* ============================================
   EXPLORER - Árvore de Arquivos
   ============================================ */

.explorer {
  background-color: var(--color-bg-secondary);
  width: var(--width-navigation);
  min-width: var(--width-navigation);
  max-width: var(--width-navigation);
  border: 1px solid var(--color-border-primary);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100dvh - var(--height-footer));
  min-height: calc(100dvh - var(--height-footer));
  max-height: calc(100dvh - var(--height-footer));
  margin-left: calc(-1 * var(--width-navigation));
  opacity: 0;
  pointer-events: none;
  position: relative;
  z-index: 2;
  transition: margin var(--transition-normal), opacity var(--transition-normal);
  /* Permitir resize dinâmico */
  resize: none; /* Desabilita resize padrão do navegador */
}

.explorer > div:first-child {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: auto;
}

/* Scrollbar do explorer - mesmo estilo do code view */
.explorer::-webkit-scrollbar,
.explorer > div:first-child::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.explorer::-webkit-scrollbar-track,
.explorer > div:first-child::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.explorer::-webkit-scrollbar-thumb,
.explorer > div:first-child::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: 4px;
}

.explorer::-webkit-scrollbar-thumb:hover,
.explorer > div:first-child::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Scrollbar para tema light */
body:has(#theme:checked) .explorer::-webkit-scrollbar-thumb,
body:has(#theme:checked) .explorer > div:first-child::-webkit-scrollbar-thumb {
  background: #b0b0b0;
}

body:has(#theme:checked) .explorer::-webkit-scrollbar-thumb:hover,
body:has(#theme:checked) .explorer > div:first-child::-webkit-scrollbar-thumb:hover {
  background: #909090;
}

.explorer .title {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  padding: 0.48em;
}

.explorer .subTitle.folder {
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  padding-block: 0.1em;
  padding-left: var(--spacing-lg);
  cursor: pointer;
  position: relative;
}

.explorer .subTitle.folder::before {
  content: none;
}

/* Projeto root no topo */
.explorer .subTitle.project-root {
  padding-left: var(--spacing-lg);
  font-weight: normal;
}

/* Seção inferior do explorer (OUTLINE e TIMELINE) */
.explorer-bottom {
  border-top: 1px solid var(--color-border-primary);
  padding-top: 0;
  margin-top: auto;
  flex-shrink: 0;
  background-color: var(--color-bg-secondary);
}

.explorer-bottom .outline-section,
.explorer-bottom .timeline-section {
  padding-left: var(--spacing-lg);
  margin: 0;
  position: relative;
}

.explorer-bottom .outline-section {
  border-top: 1px solid var(--color-border-primary);
}

.explorer-bottom .timeline-section {
  border-top: 1px solid var(--color-border-primary);
}

/* Setas de expansão para OUTLINE e TIMELINE - usando o mesmo padrão das outras pastas */
.explorer-bottom .outline-section:not(.disabled):has(+ input[type="checkbox"])::after,
.explorer-bottom .timeline-section:not(.disabled):has(+ input[type="checkbox"])::after {
  content: "▶";
  position: absolute;
  left: 0.2em;
  top: 0.3em;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  transition: all var(--transition-fast);
  pointer-events: none;
}

.explorer-bottom .outline-section:not(.disabled):has(+ input[type="checkbox"]:checked)::after,
.explorer-bottom .timeline-section:not(.disabled):has(+ input[type="checkbox"]:checked)::after {
  content: "▼";
  transform: none;
}

/* Conteúdo das seções OUTLINE e TIMELINE */
.explorer-bottom .outline-content,
.explorer-bottom .timeline-content {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: var(--spacing-xl);
  display: block;
}

.explorer-bottom .outline-content li,
.explorer-bottom .timeline-content li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mensagens vazias */
.explorer-empty-message {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  padding: 0.5em var(--spacing-lg);
  opacity: 0.7;
  font-style: italic;
  user-select: none;
  pointer-events: none;
}

/* Ocultar conteúdo quando colapsado */
.explorer-bottom input[type="checkbox"]:not(:checked) ~ ul {
  display: none;
}

.explorer label {
  color: var(--color-text-secondary);
  display: block;
  font-size: var(--font-size-base);
  cursor: pointer;
  padding-block: 0.1em;
  padding-left: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.explorer label::before {
  content: "\f13b";
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  color: var(--color-icon-file);
  padding-left: 2px;
  pointer-events: none;
}

.explorer label:hover {
  background-color: var(--color-bg-primary);
}

.explorer .folder {
  position: relative;
  color: var(--color-text-secondary);
  display: block;
  font-size: var(--font-size-base);
  cursor: pointer;
  padding-block: 0.1em;
  padding-left: var(--spacing-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.explorer .folder::before {
  content: "\f07b";
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  color: var(--color-icon-folder);
  margin-left: 1.2em;
  pointer-events: none;
}

.explorer .folder:not(.disabled):has(+ input)::before {
  content: "\f07b";
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  color: var(--color-icon-folder);
  margin-left: 1.2em;
  pointer-events: none;
}

.explorer .folder:hover {
  background-color: var(--color-bg-primary);
}

.explorer .folder.disabled {
  margin-left: 0;
  opacity: 0.5;
  cursor: default;
}

.folder ~ ul .folder.disabled {
  padding-left: 0 !important;
}

.explorer .file.disabled {
  margin-left: 0;
  opacity: 0.5;
  cursor: default;
}

.folder ~ ul .file.disabled {
  padding-left: 0 !important;
}

.folder ~ ul .file {
  padding-left: 0 !important;
}

.explorer .file.disabled::before {
  content: "\f87d";
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  pointer-events: none;
}

/* Ícones por tipo de arquivo */
.explorer .file.disabled.java::before {
  content: "\f4e4";
  color: var(--color-icon-java);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.xml::before {
  content: "\f1c9";
  color: var(--color-icon-xml);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.gitignore::before {
  content: "\f1fb";
  color: var(--color-icon-gitignore);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.properties::before {
  content: "\f1c9";
  color: var(--color-icon-properties);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.yml::before {
  content: "\f1c9";
  color: var(--color-icon-yml);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.sql::before {
  content: "\f1c0";
  color: var(--color-icon-file);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.sh::before,
.explorer .file.disabled[class*="sh"]::before {
  content: "\f120";
  color: var(--color-icon-file);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.json::before {
  content: "\f1c9";
  color: var(--color-icon-file);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.markdown::before,
.explorer .file.disabled.md::before {
  content: "\f0f6";
  color: var(--color-icon-markdown);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.dockerfile::before {
  content: "\f1c9";
  color: #0db7ed;
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.dockerignore::before {
  content: "\f1fb";
  color: var(--color-icon-gitignore);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.editorconfig::before {
  content: "\f013";
  color: var(--color-icon-file);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.gitattributes::before {
  content: "\f1fb";
  color: var(--color-icon-gitignore);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.disabled.html::before,
.explorer .file.html::before {
  content: "\f13b";
  color: var(--color-icon-html);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .file.html {
  cursor: pointer;
  position: relative;
  user-select: none;
}

.explorer .readme::before {
  content: "\f87d";
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  color: var(--color-icon-file);
  padding-left: 2px;
  pointer-events: none;
}

.explorer .readme.markdown::before {
  content: "\f0f6";
  color: var(--color-icon-markdown);
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  padding-left: 2px;
  font-size: var(--font-size-base);
  pointer-events: none;
}

.explorer .readme {
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* Sistema de setas para expansão */
.explorer .folder:not(.disabled):has(+ input[type="checkbox"])::after {
  content: "▶";
  position: absolute;
  left: 0.2em;
  top: 0.3em;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  transition: all var(--transition-fast);
  pointer-events: none;
}

.folder ~ ul .folder:not(.disabled):has(+ input[type="checkbox"])::after {
  content: "▶";
  position: absolute;
  left: 0.2em;
  top: 0.3em;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  transition: all var(--transition-fast);
  pointer-events: none;
}

.explorer .folder:not(.disabled):has(+ input[type="checkbox"]:checked)::after,
.folder ~ ul .folder:not(.disabled):has(+ input[type="checkbox"]:checked)::after {
  content: "▼";
  transform: none;
}

.folder ~ input[type="checkbox"] {
  display: none;
}

.folder ~ ul {
  position: relative;
  display: none;
  list-style: none;
  margin-left: 0;
  padding-left: var(--spacing-xl);
  overflow-x: hidden;
  min-width: 0;
}

.folder ~ ul li {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  min-width: 0;
  overflow: hidden;
}

.folder ~ ul > li > label {
  padding-left: 0 !important;
}

.folder ~ ul ul {
  padding-left: var(--spacing-xl);
}

.folder ~ ul ul > li > label {
  padding-left: 0 !important;
}

.folder ~ ul a {
  text-decoration: none;
}

.folder ~ ul .img::before {
  content: "\f1c5" !important;
  color: var(--color-icon-file) !important;
}

.folder ~ ul .img {
  padding-left: 0 !important;
}

.folder ~ input[type="checkbox"]:checked ~ ul {
  display: block;
}

/* Destaque de arquivo ativo */
main:has(#editor .editorContainer #header div #index:checked) #navigation .explorer .index,
main:has(#editor .editorContainer #header div #experience:checked) #navigation .explorer .experience,
main:has(#editor .editorContainer #header div #contact:checked) #navigation .explorer .contact,
main:has(#editor .editorContainer #header div #skills:checked) #navigation .explorer .skills,
main:has(#editor .editorContainer #header div #readme:checked) #navigation .explorer div .readme {
  background-color: var(--color-bg-primary);
}

/* Alternância entre explorer e extensions */
.menu:has(div #menu:checked) ~ #explorerView:checked ~ .explorer {
  margin-left: 0;
  opacity: 1;
  pointer-events: auto;
}

.menu:has(div #menu:checked) ~ #explorerView:checked ~ .extensions {
  margin-left: calc(-1 * var(--width-navigation));
  opacity: 0;
  pointer-events: none;
}

.menu:has(div #menu:checked) ~ #extensionsView:checked ~ .explorer {
  margin-left: calc(-1 * var(--width-navigation));
  opacity: 0;
  pointer-events: none;
}

.menu:has(div #menu:checked) ~ #extensionsView:checked ~ .extensions {
  margin-left: 0;
  opacity: 1;
  pointer-events: auto;
}

.menu:has(div #menu:not(:checked)) ~ .explorer,
.menu:has(div #menu:not(:checked)) ~ .extensions {
  margin-left: calc(-1 * var(--width-navigation));
  opacity: 0;
  pointer-events: none;
}

/* Mobile Explorer - Menu simplificado */
.mobile-explorer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-explorer-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-explorer-list li label {
  color: var(--color-text-secondary);
  display: block;
  font-size: var(--font-size-base);
  cursor: pointer;
  padding-block: 0.1em;
  padding-left: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mobile-explorer-list li label:hover {
  background-color: var(--color-bg-primary);
}

.mobile-explorer-list li label::before {
  content: "\f13b";
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 0.7em;
  color: var(--color-icon-file);
  padding-left: 2px;
  pointer-events: none;
}

.mobile-explorer-list li label.readme.markdown::before {
  content: "\f0f6";
  color: var(--color-icon-markdown);
}

.mobile-explorer-list li label.html::before {
  content: "\f13b";
  color: var(--color-icon-html);
}

@media (max-width: 992px) {
  .explorer {
    margin-left: 0px;
    opacity: 1;
  }

  .menu:has(div #menu:checked) ~ .explorer {
    margin-left: calc(-1 * var(--width-navigation));
    opacity: 0;
  }
}

/* Mobile: garantir que estilos mobile tenham prioridade */
@media (max-width: 768px) {
  .explorer {
    position: fixed !important;
    display: block !important;
    flex-direction: column !important;
    margin-left: 0 !important;
  }
  
  .explorer > div:first-child {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }
  
  /* Esconder estrutura de pastas em mobile */
  .explorer .desktop-only {
    display: none !important;
  }
  
  /* Mostrar apenas a lista mobile simplificada */
  .explorer .mobile-only {
    display: block !important;
  }
  
  /* Estilizar a lista mobile - linhas simples */
  .explorer .mobile-explorer-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  .explorer .mobile-explorer-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid var(--color-border-primary);
  }
  
  .explorer .mobile-explorer-list li:last-child {
    border-bottom: none;
  }
  
  .explorer .mobile-explorer-list li label {
    display: block !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text-secondary) !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background-color var(--transition-fast) !important;
  }
  
  .explorer .mobile-explorer-list li label:hover {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
  }
  
  /* Ícones para os arquivos */
  .explorer .mobile-explorer-list li label::before {
    content: "\f13b" !important;
    font-family: FontAwesome !important;
    display: inline-block !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit !important;
    padding-right: 0.7em !important;
    color: var(--color-icon-file) !important;
    padding-left: 2px !important;
    pointer-events: none !important;
  }
  
  .explorer .mobile-explorer-list li label.readme.markdown::before {
    content: "\f0f6" !important;
    color: var(--color-icon-markdown) !important;
  }
  
  .explorer .mobile-explorer-list li label.html::before {
    content: "\f13b" !important;
    color: var(--color-icon-html) !important;
  }
  
  /* Título do explorer em mobile */
  .explorer .title {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    font-size: var(--font-size-base) !important;
    background-color: var(--color-bg-primary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    margin: 0 !important;
  }
  
  /* Garantir visibilidade do conteúdo mobile */
  .explorer .title,
  .explorer .mobile-explorer-list,
  .explorer .mobile-explorer-list li,
  .explorer .mobile-explorer-list li label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Mobile: ajustes específicos */
@media (max-width: 768px) {
  .explorer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  
  .explorer .title {
    padding: 0.6em;
    font-size: var(--font-size-base);
  }
  
  /* Garantir que o menu mobile funcione corretamente */
  .menu:has(div #menu:checked) ~ #explorerView:checked ~ .explorer {
    margin-left: 0;
    opacity: 1;
    pointer-events: auto;
  }
  
  .menu:has(div #menu:not(:checked)) ~ .explorer {
    margin-left: calc(-100%);
    opacity: 0;
    pointer-events: none;
  }
}

/* ============================================
   BARRA DE RESIZE DO EXPLORER/EXTENSIONS
   ============================================ */

.explorer-resize-handle {
  width: 4px;
  min-width: 4px;
  max-width: 4px;
  background-color: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: background-color var(--transition-fast);
  height: calc(100dvh - var(--height-footer));
  display: none; /* Escondido por padrão */
}

/* Só mostra a barra quando explorer ou extensions estão visíveis */
.menu:has(div #menu:checked) ~ #explorerView:checked ~ .explorer-resize-handle,
.menu:has(div #menu:checked) ~ #extensionsView:checked ~ .explorer-resize-handle {
  display: block;
}

.menu:has(div #menu:not(:checked)) ~ .explorer-resize-handle {
  display: none;
}

/* Hover effect - mostra uma linha visual */
.explorer-resize-handle:hover {
  background-color: var(--color-border-accent);
}

/* Durante o resize, destaca mais a barra */
body.resizing .explorer-resize-handle {
  background-color: var(--color-border-accent);
  width: 4px;
}

/* Indicador visual quando está sobre a barra */
.explorer-resize-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-border-accent);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--transition-fast);
}

.explorer-resize-handle:hover::before {
  opacity: 1;
}

/* Tema light */
body:has(#theme:checked) .explorer-resize-handle:hover {
  background-color: var(--color-border-accent);
}

body:has(#theme:checked) .explorer-resize-handle::before {
  background-color: var(--color-border-accent);
}

/* Mobile - esconder barra de resize */
@media (max-width: 768px) {
  .explorer-resize-handle {
    display: none !important;
  }
}

/* ============================================
   EXTENSIONS - Formações e Certificações
   ============================================ */

.extensions {
  background-color: var(--color-bg-secondary);
  width: var(--width-navigation);
  min-width: var(--width-navigation);
  max-width: var(--width-navigation);
  border: 1px solid var(--color-border-primary);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: calc(-1 * var(--width-navigation));
  opacity: 0;
  pointer-events: none;
  position: relative;
  z-index: 1;
  transition: margin var(--transition-normal), opacity var(--transition-normal);
  height: calc(100dvh - var(--height-footer));
  min-height: calc(100dvh - var(--height-footer));
  max-height: calc(100dvh - var(--height-footer));
  /* Permitir resize dinâmico */
  resize: none; /* Desabilita resize padrão do navegador */
}

.extensions > div:first-child {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: auto;
}

.extensions .title {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  padding: 0.48em;
}

.extensions .extension-item {
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-left: 2rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  gap: 0.7em;
}

.extensions .extension-item span {
  flex: 1;
  line-height: 1.4;
  padding-top: 1px;
}

.extensions .extension-item:hover {
  background-color: var(--color-bg-primary);
}

.extensions .extension-item .extension-icon {
  font-size: 16px;
  color: var(--color-icon-file);
  width: 20px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.extensions .extension-item .extension-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-icon-file);
  stroke: var(--color-icon-file);
  flex-shrink: 0;
}

.extensions .extension-item:hover .extension-icon svg {
  color: rgb(90, 165, 220);
  stroke: rgb(90, 165, 220);
}

.extensions .folder.subTitle {
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  padding-block: 0.1em;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-md);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.extensions .folder.subTitle::before {
  content: none;
}

.extensions .folder.subTitle::after {
  content: "▶";
  position: absolute;
  left: 0.2em;
  top: 0.3em;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  transition: all var(--transition-fast);
  pointer-events: none;
}

.extensions .folder.subTitle:has(+ input[type="checkbox"]:checked)::after {
  content: "▼";
}

.extensions .section-title {
  flex: 1;
  margin-left: 1.2em;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extensions .section-count {
  background-color: var(--color-text-secondary);
  color: var(--color-bg-secondary);
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: bold;
  padding: 0 5px;
  flex-shrink: 0;
  line-height: 1;
  margin-left: auto;
  margin-right: 0;
  visibility: visible;
  opacity: 1;
}

.extensions .section-divider {
  border: none;
  border-top: 1px solid var(--color-border-primary);
  margin: var(--spacing-sm) 0;
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-md);
  height: 1px;
}

/* ============================================
   REGRAS PARA EXPANDIR/RETRAIR INSTALLED E RECOMMENDED
   Abordagem robusta usando IDs específicos e seletores genéricos
   ============================================ */

/* Esconder os checkboxes (são controlados pelos labels) */
.extensions .folder.subTitle ~ input[type="checkbox"],
.extensions input[type="checkbox"]#folderToggleInstalled,
.extensions input[type="checkbox"]#folderToggleRecommended {
  display: none !important;
}

/* SOBRESCREVER COMPLETAMENTE a regra geral do explorer.css (.folder ~ input[type="checkbox"]:checked ~ ul) */
/* Estado inicial: TODAS as listas começam escondidas por padrão */
/* Esta regra deve ter prioridade sobre a regra geral do explorer.css */
.extensions .folder.subTitle ~ input[type="checkbox"] ~ ul,
.extensions .folder.subTitle ~ ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* IMPORTANTE: Garantir que as regras usando IDs específicos tenham prioridade ABSOLUTA */
/* Estas regras devem ser aplicadas DEPOIS e ter prioridade sobre qualquer regra genérica */

/* DESKTOP: INSTALLED - Quando checkbox está marcado - mostrar APENAS esta lista */
/* Prioridade máxima usando ID específico */
.extensions #folderToggleInstalled:checked ~ ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* DESKTOP: INSTALLED - Quando checkbox NÃO está marcado - esconder esta lista */
/* Prioridade máxima usando ID específico */
.extensions #folderToggleInstalled:not(:checked) ~ ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* DESKTOP: RECOMMENDED - Quando checkbox está marcado - mostrar APENAS esta lista */
/* IMPORTANTE: Esta regra deve funcionar mesmo quando INSTALLED está expandido */
/* Prioridade máxima usando ID específico - deve sobrescrever qualquer regra genérica */
.extensions #folderToggleRecommended:checked ~ ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* DESKTOP: RECOMMENDED - Quando checkbox NÃO está marcado - esconder esta lista */
/* IMPORTANTE: Esta regra deve funcionar mesmo quando INSTALLED está expandido */
/* Prioridade máxima usando ID específico - deve sobrescrever qualquer regra genérica */
.extensions #folderToggleRecommended:not(:checked) ~ ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* REMOVER regras genéricas que podem interferir */
/* Usar APENAS regras específicas usando IDs para garantir funcionamento independente */
/* As regras específicas acima (usando #folderToggleInstalled e #folderToggleRecommended) */
/* devem ser suficientes e ter prioridade sobre qualquer regra genérica */

/* ============================================
   MOBILE: Abordagem ampla e robusta
   ============================================ */
@media (max-width: 768px) {
  .extensions {
    position: fixed !important;
    display: block !important;
    flex-direction: column !important;
    margin-left: 0 !important;
  }
  
  .extensions > div:first-child {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Garantir visibilidade dos elementos básicos */
  .extensions .title,
  .extensions .folder.subTitle,
  .extensions .extension-item,
  .extensions li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* IMPORTANTE: Esconder checkboxes no mobile */
  .extensions .folder.subTitle ~ input[type="checkbox"],
  .extensions input[type="checkbox"]#folderToggleInstalled,
  .extensions input[type="checkbox"]#folderToggleRecommended {
    display: none !important;
  }
  
  /* MOBILE: Estado inicial - TODAS as listas começam escondidas */
  .extensions .folder.subTitle ~ input[type="checkbox"] ~ ul,
  .extensions .folder.subTitle ~ ul,
  .extensions #folderToggleInstalled ~ ul,
  .extensions #folderToggleRecommended ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* MOBILE: INSTALLED - Quando checkbox está marcado */
  .extensions #folderToggleInstalled:checked ~ ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* MOBILE: INSTALLED - Quando checkbox NÃO está marcado */
  .extensions #folderToggleInstalled:not(:checked) ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* MOBILE: RECOMMENDED - Quando checkbox está marcado */
  .extensions #folderToggleRecommended:checked ~ ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* MOBILE: RECOMMENDED - Quando checkbox NÃO está marcado */
  .extensions #folderToggleRecommended:not(:checked) ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* MOBILE: Regras genéricas como fallback */
  .extensions .folder.subTitle ~ input[type="checkbox"]:checked ~ ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .extensions .folder.subTitle ~ input[type="checkbox"]:not(:checked) ~ ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* MOBILE: Quando a lista está visível, garantir que os itens também estejam */
  .extensions .folder.subTitle ~ input[type="checkbox"]:checked ~ ul li,
  .extensions #folderToggleInstalled:checked ~ ul li,
  .extensions #folderToggleRecommended:checked ~ ul li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ajustar folder.subTitle para manter título e contador na mesma linha */
  .extensions .folder.subTitle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    padding-left: var(--spacing-lg) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    gap: var(--spacing-sm) !important;
    line-height: 1.2 !important;
    flex-wrap: nowrap !important;
  }
  
  /* Ajustar section-title para ficar na mesma linha que a bolinha */
  .extensions .section-title {
    display: inline-block !important;
    margin-left: 1.2em !important;
    margin-right: var(--spacing-sm) !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }
  
  /* Ajustar bolinha (section-count) para ficar na mesma linha */
  .extensions .section-count {
    background-color: var(--color-text-secondary) !important;
    color: var(--color-bg-secondary) !important;
    border-radius: 50% !important;
    min-width: 14px !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    font-weight: bold !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-left: var(--spacing-sm) !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }
  
  /* Garantir que extension-item também fique bem formatado */
  .extensions .extension-item {
    padding: var(--spacing-md) var(--spacing-md) !important;
    padding-left: var(--spacing-lg) !important;
    font-size: var(--font-size-base) !important;
  }
  
  /* Ajustar section-divider */
  .extensions .section-divider {
    margin-left: var(--spacing-lg) !important;
    margin-right: var(--spacing-md) !important;
  }
  
  /* Título do extensions em mobile */
  .extensions .title {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    font-size: var(--font-size-base) !important;
    background-color: var(--color-bg-primary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    margin: 0 !important;
  }
}

/* ============================================
   EDITOR - Área Principal de Conteúdo
   ============================================ */

.editorContainer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  order: 1;
}

.editorContainer .editor {
  display: flex;
  flex-flow: column;
  flex: 1;
  min-height: 0;
  order: 1;
  position: relative;
  overflow: hidden;
}

#editor .editor {
  cursor: text;
}

#editor .editor a {
  cursor: pointer;
}

#editor .editor section {
  display: none;
  color: var(--color-text-secondary);
  padding-top: calc(var(--spacing-md) + 50px); /* Espaço para o botão flutuante */
  padding: calc(var(--spacing-md) + 50px) 4rem var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-large);
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

#editor:has(div #image:checked) ~ #navigation .explorer div .image {
  background-color: var(--color-bg-primary);
}

#header:has(div #image:checked) ~ .editor .image {
  margin-top: 2rem;
  margin-inline: auto;
  display: block;
}

/* Scrollbar do editor */
#editor .editorContainer .editor section::-webkit-scrollbar {
  height: 2px;
}

#editor .editorContainer .editor section::-webkit-scrollbar-track {
  border-inline: 1px solid var(--color-border-primary);
}

#editor .editorContainer .editor section::-webkit-scrollbar-thumb {
  background: #3c3c3c;
}

#editor .editorContainer .editor section::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Header com abas */
#header {
  background-color: var(--color-bg-secondary);
  height: var(--height-header);
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  position: relative;
}

#header div label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  padding-left: 0.8em;
  padding-right: 0.7em;
  border-right: 1px solid var(--color-border-primary);
  cursor: pointer;
  text-wrap: nowrap;
  height: 100%;
}

#header div label::before {
  content: "\f069";
  font-family: FontAwesome;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: var(--spacing-md);
  color: var(--color-border-accent);
}

#header div label::after {
  content: "\00d7";
  opacity: 0;
  font-size: 18px;
  padding-left: var(--spacing-md);
  color: white;
  font-weight: 300;
}

#header div input[type="radio"]:checked ~ label {
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-accent);
}

#header div input[type="radio"]:checked ~ label:after {
  opacity: 0.5;
  cursor: default;
}

/* Scrollbar do header */
#header::-webkit-scrollbar {
  height: 2px;
}

#header::-webkit-scrollbar-track {
  background: rgba(60, 60, 60, 0.5);
}

#header::-webkit-scrollbar-thumb {
  background: #3c3c3c;
}

#header::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Exibição de seções baseada em radio buttons */
#header:has(div #index:checked) ~ .editor .index {
  display: block !important;
}

#header:has(div #experience:checked) ~ .editor .experience {
  display: block !important;
}

#header:has(div #contact:checked) ~ .editor .contact {
  display: block !important;
}

#header:has(div #skills:checked) ~ .editor .skills {
  display: block !important;
}

#header:has(div #readme:checked) ~ .editor .readme {
  display: block !important;
}

/* Estilos específicos para README */
#editor .editor .readme {
  font-size: var(--font-size-base);
  padding: 0.3rem 2rem 0.3rem var(--spacing-xl);
}

/* Container principal do README - centralizado */
#editor .editor .readme .readme-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-xl) 0;
}

/* Wrapper da foto circular */
#editor .editor .readme .readme-photo-wrapper {
  margin-bottom: var(--spacing-2xl);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Picture tag */
#editor .editor .readme .readme-photo-wrapper picture {
  display: block;
  width: 200px;
  height: 200px;
}

/* Foto circular */
#editor .editor .readme .readme-photo {
  width: 200px;
  height: 200px;
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 4px solid var(--color-border-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: block;
  transition: transform var(--transition-normal);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

#editor .editor .readme .readme-photo:hover {
  transform: scale(1.05);
}

/* Conteúdo centralizado */
#editor .editor .readme .readme-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

#editor .editor .readme .readme-content h1 {
  font-size: var(--font-size-title);
  margin-bottom: var(--spacing-lg);
  text-align: center;
  width: 100%;
}

#editor .editor .readme .readme-content p {
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
  text-align: center;
  width: 100%;
}

#editor .editor .readme .readme-content p:last-child {
  margin-bottom: 0;
}

#editor .editor .readme .readme-content img {
  max-width: 100%;
  height: auto;
  max-height: 200px;
}

#editor .editor .readme .readme-content p img {
  max-width: 500px;
  max-height: 80px;
  width: auto;
  height: auto;
  display: inline-block;
  margin: var(--spacing-sm) 0;
}

#editor .editor .readme br {
  line-height: 0.5;
}

/* Ajuste quando terminal está colapsado */
/* Removido - regra vazia não necessária */

/* ============================================
   PREVIEW/CODE TOGGLE - Botão flutuante
   ============================================ */

/* Container flutuante do toggle */
.floating-toggle {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Esconde o checkbox */
.floating-toggle input[type="checkbox"] {
  display: none;
}

/* Botão de toggle flutuante */
.floating-toggle .preview-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  transition: all var(--transition-fast);
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.floating-toggle .preview-toggle-btn:hover {
  color: var(--color-border-accent);
  background-color: var(--color-bg-primary);
  border-color: var(--color-border-accent);
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
  transform: translateY(-1px);
}

.floating-toggle .preview-toggle-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.floating-toggle .preview-toggle-btn i {
  font-size: 16px;
  transition: transform var(--transition-fast);
}

.floating-toggle input[type="checkbox"]:checked ~ .preview-toggle-btn {
  color: var(--color-border-accent);
  background-color: var(--color-bg-primary);
  border-color: var(--color-border-accent);
}

.floating-toggle input[type="checkbox"]:checked ~ .preview-toggle-btn i {
  transform: scale(1.1);
}

/* ============================================
   CODE VIEW - Visualização do código formatado
   ============================================ */

.code-view-container {
  display: none;
  padding: var(--spacing-xl);
  padding-top: calc(var(--spacing-xl) + 50px); /* Espaço para o botão flutuante */
  background-color: var(--color-bg-primary);
  overflow: auto;
  font-family: var(--font-family-mono);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
  /* Melhorias de visualização */
  line-height: 1.8;
  tab-size: 2;
  -moz-tab-size: 2;
}

.code-view {
  margin: 0;
  padding: var(--spacing-lg);
  background: transparent;
  border: none;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-primary);
  white-space: pre;
  overflow-x: auto;
  overflow-y: visible;
  /* Melhorias de legibilidade */
  tab-size: 2;
  -moz-tab-size: 2;
  letter-spacing: 0.01em;
}

.code-view code {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* Syntax highlighting é gerenciado por syntax-highlight.css usando classes token.* */

/* ============================================
   CODE COPY BUTTON - Botão de copiar código
   ============================================ */

.code-copy-button {
  position: absolute;
  top: calc(var(--spacing-md) + 50px);
  right: var(--spacing-md);
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.code-copy-button:hover {
  color: var(--color-border-accent);
  background-color: var(--color-bg-primary);
  border-color: var(--color-border-accent);
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
  transform: translateY(-1px);
}

.code-copy-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.code-copy-button:focus {
  outline: 2px solid var(--color-border-accent);
  outline-offset: 2px;
}

.code-copy-button i {
  font-size: 14px;
  transition: transform var(--transition-fast);
}

.code-copy-button .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Scrollbar do code view - aplicado em todos os elementos que podem ter scroll */
.code-view-container::-webkit-scrollbar,
.code-view::-webkit-scrollbar,
.code-view-container .code-view::-webkit-scrollbar,
.code-view-container code::-webkit-scrollbar,
.code-view-container pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-view-container::-webkit-scrollbar-track,
.code-view::-webkit-scrollbar-track,
.code-view-container .code-view::-webkit-scrollbar-track,
.code-view-container code::-webkit-scrollbar-track,
.code-view-container pre::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.code-view-container::-webkit-scrollbar-thumb,
.code-view::-webkit-scrollbar-thumb,
.code-view-container .code-view::-webkit-scrollbar-thumb,
.code-view-container code::-webkit-scrollbar-thumb,
.code-view-container pre::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: 4px;
}

.code-view-container::-webkit-scrollbar-thumb:hover,
.code-view::-webkit-scrollbar-thumb:hover,
.code-view-container .code-view::-webkit-scrollbar-thumb:hover,
.code-view-container code::-webkit-scrollbar-thumb:hover,
.code-view-container pre::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Scrollbar para tema light */
body:has(#theme:checked) .code-view-container::-webkit-scrollbar-thumb,
body:has(#theme:checked) .code-view::-webkit-scrollbar-thumb,
body:has(#theme:checked) .code-view-container .code-view::-webkit-scrollbar-thumb,
body:has(#theme:checked) .code-view-container code::-webkit-scrollbar-thumb,
body:has(#theme:checked) .code-view-container pre::-webkit-scrollbar-thumb {
  background: #b0b0b0;
}

body:has(#theme:checked) .code-view-container::-webkit-scrollbar-thumb:hover,
body:has(#theme:checked) .code-view::-webkit-scrollbar-thumb:hover,
body:has(#theme:checked) .code-view-container .code-view::-webkit-scrollbar-thumb:hover,
body:has(#theme:checked) .code-view-container code::-webkit-scrollbar-thumb:hover,
body:has(#theme:checked) .code-view-container pre::-webkit-scrollbar-thumb:hover {
  background: #909090;
}

/* Ajuste quando terminal está colapsado */
main:has(.terminal .header #terminalToggle:checked) .code-view-container {
  max-height: calc(100dvh - 75px);
}

/* Quando em modo código, esconde todas as seções */
.editor.code-mode > section {
  display: none !important;
}

/* Quando o code-view-container está visível, garante que ocupe todo o espaço */
.editor:has(#codeViewContainer[style*="display: block"]) {
  position: relative;
}

.editor:has(#codeViewContainer[style*="display: block"]) > section {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================
   CONTACT PAGE - Estilos para página de contato
   ============================================ */

/* Container dos cards de contato */
#editor .editor .contact .contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Desabilita seleção de texto na seção de contato */
#editor .editor .contact {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Card individual de contato */
#editor .editor .contact .contact-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 2rem;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: auto;
}

#editor .editor .contact .contact-card:hover {
  border-color: var(--color-border-accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 122, 204, 0.2);
  background-color: var(--color-bg-primary);
}

/* Ícone do card */
#editor .editor .contact .contact-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  transition: transform var(--transition-normal);
}

#editor .editor .contact .contact-card:hover .contact-icon {
  transform: scale(1.1);
}

#editor .editor .contact .contact-icon.linkedin {
  background-color: rgba(0, 119, 181, 0.2);
  color: #0077b5;
}

#editor .editor .contact .contact-icon.github {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

#editor .editor .contact .contact-icon.email {
  background-color: rgba(0, 122, 204, 0.2);
  color: var(--color-border-accent);
}

/* Conteúdo do card */
#editor .editor .contact .contact-content {
  width: 100%;
}

#editor .editor .contact .contact-content h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
  font-weight: 600;
}

#editor .editor .contact .contact-content p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Link de contato (agora é um span dentro do card clicável) */
#editor .editor .contact .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-border-accent);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition-fast);
  word-break: break-all;
  pointer-events: none;
}

#editor .editor .contact .contact-card:hover .contact-link {
  color: rgb(0, 150, 255);
}

#editor .editor .contact .contact-link i {
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Título e subtítulo da página de contato */
#editor .editor .contact h1 {
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-size: 2rem;
}

#editor .editor .contact > p {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Responsividade para telas muito largas e baixas */
@media (min-width: 1200px) and (max-height: 600px) {
  #editor {
    min-width: 0;
    overflow: hidden;
  }
  
  #editor .editor section {
    padding: calc(var(--spacing-md) + 50px) var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  #header {
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Responsividade para mobile em landscape */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #editor {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #editor .editorContainer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #editor .editor {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #editor .editor section {
    padding: calc(var(--spacing-md) + 50px) var(--spacing-md) var(--spacing-md) var(--spacing-md) !important;
    font-size: var(--font-size-base);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  #editor .editor section * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }
  
  #header div {
    min-width: fit-content;
  }
  
  #header div label {
    padding-left: 0.6em;
    padding-right: 0.5em;
    font-size: var(--font-size-small);
    white-space: nowrap;
  }
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
  #editor {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #editor .editorContainer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #editor .editor {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #editor .editor section {
    padding: calc(var(--spacing-md) + 50px) var(--spacing-md) var(--spacing-md) var(--spacing-md) !important;
    font-size: var(--font-size-base);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  #editor .editor section * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #editor .editor .contact .contact-container {
    grid-template-columns: 1fr;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #editor .editor .contact h1 {
    font-size: 1.5rem;
  }
  
  #editor .editor .contact .contact-card {
    padding: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ajustar foto do README para mobile - manter circular */
  #editor .editor .readme .readme-photo-wrapper {
    margin-bottom: var(--spacing-xl) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  #editor .editor .readme .readme-photo-wrapper picture {
    width: 150px !important;
    height: 150px !important;
    display: block !important;
  }
  
  #editor .editor .readme .readme-photo {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 3px solid var(--color-border-accent) !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
  
  #header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }
  
  #header div {
    min-width: fit-content;
  }
  
  #header div label {
    padding-left: 0.6em;
    padding-right: 0.5em;
    font-size: var(--font-size-small);
    white-space: nowrap;
  }
  
  /* Garantir que imagens e iframes não ultrapassem */
  #editor .editor section img,
  #editor .editor section iframe,
  #editor .editor section video {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Ajustar código view para mobile */
  .code-view-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }
  
  .code-view {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  
  /* Em telas muito pequenas, reduzir ainda mais a foto do README */
  @media (max-width: 480px) {
    #editor .editor .readme .readme-photo-wrapper picture {
      width: 120px !important;
      height: 120px !important;
    }
    
    #editor .editor .readme .readme-photo {
      width: 120px !important;
      height: 120px !important;
      min-width: 120px !important;
      min-height: 120px !important;
      max-width: 120px !important;
      max-height: 120px !important;
      border: 2px solid var(--color-border-accent) !important;
    }
  }
}

/* ============================================
   TERMINAL BASE - Container, Header, Toggle
   ============================================ */

/* ============================================
   CONTAINER PRINCIPAL
   ============================================ */
.terminal {
  display: flex;
  flex-direction: column;
  height: var(--height-terminal);
  overflow: hidden;
  background-color: var(--color-bg-accent);
  transition: margin var(--transition-normal);
  position: relative;
  flex-shrink: 0;
}

/* Esconde os inputs radio visualmente */
.terminal > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* ============================================
   HEADER - Fixo no topo, sempre visível
   ============================================ */
.terminal .terminal-header {
  order: 1;
  border-top: 1px solid var(--color-border-accent);
  height: 35px;
  padding-left: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  overflow-x: auto;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background-color: var(--color-bg-accent);
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

.terminal .terminal-header label {
  font-style: normal;
  font-size: 11px;
  padding: 0.4em var(--spacing-lg);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.terminal .terminal-header label i {
  font-size: var(--font-size-base);
  opacity: 0.8;
}

.terminal .terminal-header label:hover {
  color: var(--color-text-primary);
}

.terminal .terminal-header label .terminal-tab-count {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: 0.1em 0.4em;
  border-radius: 10px;
  font-size: var(--font-size-small);
  font-weight: bold;
  margin-left: var(--spacing-xs);
}

/* Destaque de aba ativa no header */
.terminal:has(#problems:checked) .terminal-header .terminal-tab-problems,
.terminal:has(#output:checked) .terminal-header .terminal-tab-output,
.terminal:has(#terminals:checked) .terminal-header .terminal-tab-terminals,
.terminal:has(#debug:checked) .terminal-header .terminal-tab-debug,
.terminal:has(#ports:checked) .terminal-header .terminal-tab-ports {
  color: var(--color-border-accent);
  border-bottom-color: var(--color-border-accent);
}

/* ============================================
   CONTENT - Área de conteúdo abaixo do header
   ============================================ */
.terminal .content {
  order: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Esconde todos os conteúdos de abas por padrão */
.terminal .content .tab-content {
  display: none !important;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

/* Mostra APENAS o conteúdo da aba quando o radio correspondente está checked */
.terminal:has(#problems:checked) .content .tab-content.terminal-content-problems {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.terminal:has(#output:checked) .content .tab-content.terminal-content-output {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.terminal:has(#terminals:checked) .content .tab-content.terminal-content-terminal {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.terminal:has(#debug:checked) .content .tab-content.terminal-content-debug {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.terminal:has(#ports:checked) .content .tab-content.terminal-content-ports {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ============================================
   TERMINAL TOGGLE
   ============================================ */
.terminal .terminal-header input {
  display: none;
}

.terminal-toggle::before {
  content: "";
  position: absolute;
  border: solid var(--color-text-secondary);
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  width: 3px;
  top: 1em;
  right: 1em;
  margin-inline: var(--spacing-xl);
  margin-bottom: 3px;
  transform: rotate(45deg);
  transition: transform var(--transition-normal);
}

/* Terminal minimizado quando toggle está checked */
.terminal:has(.terminal-header #terminalToggle:checked) {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  overflow: hidden;
}

/* Garantir que o conteúdo fique escondido quando minimizado */
.terminal:has(.terminal-header #terminalToggle:checked) .content {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
  visibility: hidden !important;
}

/* Garantir que o header fique visível quando minimizado */
.terminal:has(.terminal-header #terminalToggle:checked) .terminal-header {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  flex-shrink: 0 !important;
}

#terminalToggle:checked + label::before {
  transform: rotate(225deg);
  top: 1.5em;
}

/* ============================================
   RESPONSIVIDADE - Telas largas e baixas
   ============================================ */

/* Telas muito largas e baixas (wide screens) */
@media (min-width: 1200px) and (max-height: 600px) {
  .terminal {
    max-height: 40vh;
    height: auto;
  }
  
  .terminal .terminal-header {
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .terminal .content {
    max-height: calc(40vh - 35px);
    overflow-y: auto;
  }
}

/* Mobile em landscape */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .terminal {
    max-height: 30vh;
    height: auto;
  }
  
  .terminal .terminal-header {
    overflow-x: auto;
    white-space: nowrap;
    font-size: 10px;
  }
  
  .terminal .terminal-header label {
    padding: 0.3em var(--spacing-md);
    font-size: 10px;
  }
  
  .terminal .content {
    max-height: calc(30vh - 35px);
    overflow-y: auto;
  }
  
  .terminal:has(.terminal-header #terminalToggle:checked) {
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    overflow: hidden;
  }
  
  .terminal:has(.terminal-header #terminalToggle:checked) .content {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .terminal:has(.terminal-header #terminalToggle:checked) .terminal-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================
   TERMINAL PROBLEMS - Aba de Problemas
   ============================================ */

.terminal .terminal-problems {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.terminal .terminal-problems-scrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font-family-mono);
  padding: var(--spacing-md) var(--spacing-xl);
}

.terminal .terminal-problem-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  cursor: pointer;
}

.terminal .terminal-problem-item:hover {
  background-color: var(--color-bg-secondary);
  padding-left: var(--spacing-sm);
  margin-left: calc(-1 * var(--spacing-sm));
  margin-right: calc(-1 * var(--spacing-sm));
  border-radius: 2px;
}

.terminal .terminal-problem-icon {
  margin-right: var(--spacing-md);
  font-size: var(--font-size-small);
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}

.terminal .terminal-problem-icon-error {
  color: var(--color-error);
}

.terminal .terminal-problem-icon-warning {
  color: var(--color-warning);
  font-size: var(--font-size-base);
}

.terminal .terminal-problem-icon-info {
  color: var(--color-info);
}

.terminal .terminal-problem-file {
  color: var(--color-text-primary);
  font-weight: 500;
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}

.terminal .terminal-problem-location {
  color: var(--color-text-secondary);
  margin-right: var(--spacing-md);
  font-size: 11px;
  flex-shrink: 0;
}

.terminal .terminal-problem-message {
  color: var(--color-text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   TERMINAL OUTPUT - Aba de Output
   ============================================ */

/* Container da aba output */
.terminal .terminal-content-output {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.terminal .terminal-output {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  position: relative;
}

/* Selector fixo no topo - NÃO scrolla, sempre visível */
.terminal .terminal-output-selector {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-primary);
  background-color: var(--color-bg-secondary);
  margin: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  order: 1;
}

.terminal .terminal-output-selector select {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  width: 200px;
}

/* Área de conteúdo com scroll - APENAS o texto scrolla */
.terminal .terminal-output-scrollable {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  font-family: var(--font-family-mono);
  font-size: 0.875rem; /* Fonte reduzida para melhor legibilidade */
  line-height: 1.2;
  white-space: pre;
  padding: var(--spacing-md) var(--spacing-xl);
  padding-bottom: 2.5rem !important; /* Espaço extra no final para última linha ser totalmente visível */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative;
  -webkit-overflow-scrolling: touch; /* Melhora scroll no iOS */
  background-color: var(--color-bg-accent);
  order: 2;
  width: 100% !important;
  box-sizing: border-box;
  /* Força scroll a funcionar */
  height: 0;
  color: var(--color-text-primary);
  margin: 0;
  margin-bottom: 0 !important;
  /* Garante que o conteúdo final seja visível */
  scroll-padding-bottom: calc(var(--spacing-xl) * 2);
  scroll-margin-bottom: calc(var(--spacing-xl) * 1.5);
}

.terminal .terminal-output-line {
  display: none; /* Não usado mais, texto é direto */
}

/* Scrollbar do output-tab - mesmo estilo do explorer e code view */
.terminal .terminal-output-scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.terminal .terminal-output-scrollable::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.terminal .terminal-output-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: 4px;
}

.terminal .terminal-output-scrollable::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Scrollbar para tema light */
body:has(#theme:checked) .terminal .terminal-output-scrollable::-webkit-scrollbar-thumb {
  background: #b0b0b0;
}

body:has(#theme:checked) .terminal .terminal-output-scrollable::-webkit-scrollbar-thumb:hover {
  background: #909090;
}

/* ============================================
   TERMINAL TERMINAL - Aba de Terminal Interativo
   ============================================ */

/* Container da aba terminal - GARANTE estrutura flex correta */
.terminal .terminal-content-terminal {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  position: relative;
}

/* Wrapper interno - GARANTE estrutura flex correta */
.terminal .terminal-terminal {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  position: relative;
  flex: 1 1 auto !important;
}

/* Header fixo no topo - NÃO scrolla, altura fixa */
.terminal .terminal-terminal-header {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  position: relative;
  width: 100%;
  height: auto;
  min-height: auto;
}

.terminal .terminal-terminal-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-xl);
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-primary);
  font-size: 11px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.terminal .terminal-terminal-icon {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.terminal .terminal-terminal-close {
  margin-left: auto;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--spacing-xs);
  opacity: 0.7;
}

.terminal .terminal-terminal-close:hover {
  opacity: 1;
  color: var(--color-text-primary);
}

/* Área de output do terminal com scroll - GARANTE SCROLL FUNCIONANDO */
.terminal .terminal-terminal-scrollable {
  /* Flexbox - CRÍTICO para scroll funcionar em flexbox */
  flex: 1 1 0% !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0% !important;
  min-height: 0 !important;
  
  /* Overflow - CRÍTICO para scroll aparecer */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* Dimensões - GARANTE que ocupe espaço disponível */
  width: 100% !important;
  position: relative !important;
  
  /* Estilos visuais */
  font-family: var(--font-family-mono);
  line-height: 1.6;
  white-space: normal;
  padding: var(--spacing-md) var(--spacing-xl);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  text-align: left;
  background-color: var(--color-bg-accent);
  box-sizing: border-box;
  
  /* Melhorias de scroll */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  
  /* Técnica para forçar scroll em flexbox - altura 0 com flex 1 */
  height: 0;
}

.terminal .terminal-terminal-scrollable > div {
  white-space: pre-wrap;
  margin-bottom: 2px;
}

.terminal .terminal-terminal-line {
  display: flex;
  align-items: baseline;
  margin-bottom: 2px;
}

.terminal .terminal-terminal-prompt {
  color: #00ff00;
  margin-right: var(--spacing-sm);
  font-weight: 500;
  flex-shrink: 0;
}

/* Cor do prompt para tema light */
body:has(#theme:checked) .terminal .terminal-terminal-prompt {
  color: #008000;
}

.terminal .terminal-terminal-command {
  color: var(--color-text-primary);
}

.terminal .terminal-terminal-info {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.terminal .terminal-terminal-banner {
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  font-weight: normal;
  white-space: pre;
  line-height: 1;
  display: block;
  margin: 0;
  padding: 0;
}

.terminal .terminal-terminal-success {
  color: var(--color-success);
}

/* Container do input do terminal - DENTRO do scrollable */
.terminal .terminal-terminal-input-container {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) 0;
  background-color: transparent;
  gap: var(--spacing-sm);
  position: relative;
  margin-top: var(--spacing-sm);
}

.terminal .terminal-terminal-prompt-input {
  color: #00ff00;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  font-weight: 500;
  flex-shrink: 0;
}

/* Cor do prompt do input para tema light */
body:has(#theme:checked) .terminal .terminal-terminal-prompt-input {
  color: #008000;
}

.terminal .terminal-terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  padding: 0;
  margin: 0;
}

.terminal .terminal-terminal-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.5;
}

/* Cursor piscante no input */
.terminal .terminal-terminal-input:focus {
  caret-color: var(--color-text-primary);
}

/* Scrollbar do terminal-tab - mesmo estilo do explorer e code view */
.terminal .terminal-terminal-scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.terminal .terminal-terminal-scrollable::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.terminal .terminal-terminal-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: 4px;
}

.terminal .terminal-terminal-scrollable::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Scrollbar para tema light */
body:has(#theme:checked) .terminal .terminal-terminal-scrollable::-webkit-scrollbar-thumb {
  background: #b0b0b0;
}

body:has(#theme:checked) .terminal .terminal-terminal-scrollable::-webkit-scrollbar-thumb:hover {
  background: #909090;
}

/* ============================================
   TERMINAL DEBUG - Aba de Debug Console
   ============================================ */

.terminal .terminal-debug {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.terminal .terminal-debug-scrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-md) var(--spacing-xl);
}

.terminal .terminal-debug-header {
  padding: var(--spacing-md) 0;
  color: var(--color-text-secondary);
  font-size: 11px;
  border-bottom: 1px solid var(--color-border-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  flex-shrink: 0;
}

.terminal .terminal-debug-content {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.terminal .terminal-debug-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: var(--color-bg-secondary);
  border-radius: 3px;
  margin-bottom: var(--spacing-xl);
}

.terminal .terminal-debug-message i {
  color: var(--color-border-accent);
  margin-top: var(--spacing-xs);
  flex-shrink: 0;
}

.terminal .terminal-debug-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.terminal .terminal-debug-info-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-base);
}

.terminal .terminal-debug-label {
  color: var(--color-text-secondary);
  min-width: 100px;
}

.terminal .terminal-debug-value {
  color: var(--color-text-primary);
}

/* ============================================
   TERMINAL PORTS - Aba de Portas
   ============================================ */

.terminal .terminal-ports {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.terminal .terminal-ports-scrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-md) var(--spacing-xl);
}

.terminal .terminal-ports-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  color: var(--color-text-secondary);
  font-size: 11px;
  border-bottom: 1px solid var(--color-border-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  flex-shrink: 0;
}

.terminal .terminal-ports-count {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: normal;
}

.terminal .terminal-ports-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  flex: 1;
}

.terminal .terminal-port-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6em;
  background-color: var(--color-bg-secondary);
  border-radius: 3px;
  font-size: var(--font-size-base);
  transition: background-color var(--transition-fast);
}

.terminal .terminal-port-item:hover {
  background-color: var(--color-bg-primary);
}

.terminal .terminal-port-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  flex: 1;
}

.terminal .terminal-port-number {
  color: var(--color-border-accent);
  font-weight: 600;
  min-width: 50px;
  font-family: var(--font-family-mono);
}

.terminal .terminal-port-label {
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
}

.terminal .terminal-port-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.terminal .terminal-port-status {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 3px;
}

.terminal .terminal-port-status-running {
  color: var(--color-success);
  background-color: rgba(137, 209, 133, 0.1);
}

.terminal .terminal-port-action-icon {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 11px;
  opacity: 0.7;
}

.terminal .terminal-port-action-icon:hover {
  opacity: 1;
  color: var(--color-border-accent);
}

.terminal .terminal-ports-footer {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-primary);
  margin-top: var(--spacing-md);
  flex-shrink: 0;
}

.terminal .terminal-ports-hint {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-style: italic;
}

/* ============================================
   SYNTAX HIGHLIGHTING - Colorização de Código
   Cores baseadas no Visual Studio Code Dark+ e Light+
   Usa classes token.* no padrão VS Code
   ============================================ */

/* Container de código */
.code-view,
pre code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--syntax-text);
  tab-size: 2;
  -moz-tab-size: 2;
}

/* ============================================
   TOKEN CLASSES - Padrão VS Code
   ============================================ */

/* Tag completa - usa a mesma cor do nome da tag */
.token.tag {
  color: var(--syntax-tag);
}

/* Nome da tag (div, span, section, etc.) */
.token.tag-name {
  color: var(--syntax-tag-name);
}

/* Atributo (class, id, type, etc.) */
.token.attr-name {
  color: var(--syntax-attribute);
}

/* Valor do atributo (strings entre aspas) */
.token.attr-value {
  color: var(--syntax-value);
}

/* Texto interno (conteúdo entre tags) */
.token.text {
  color: var(--syntax-text);
}

/* Comentário HTML (<!-- -->) */
.token.comment {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Símbolos de pontuação (<, >, =, /) */
.token.punctuation {
  color: var(--syntax-delimiter);
}

/* ============================================
   APLICAÇÃO EM CONTEXTOS ESPECÍFICOS
   ============================================ */

/* Aplicar estilos quando código está dentro de code-view */
.code-view .token.tag,
.code-view .token.tag-name {
  color: var(--syntax-tag-name);
}

.code-view .token.attr-name {
  color: var(--syntax-attribute);
}

.code-view .token.attr-value {
  color: var(--syntax-value);
}

.code-view .token.text {
  color: var(--syntax-text);
}

.code-view .token.comment {
  color: var(--syntax-comment);
  font-style: italic;
}

.code-view .token.punctuation {
  color: var(--syntax-delimiter);
}

/* Aplicar estilos quando código está dentro de language-html */
.language-html .token.tag,
.language-html .token.tag-name {
  color: var(--syntax-tag-name);
}

.language-html .token.attr-name {
  color: var(--syntax-attribute);
}

.language-html .token.attr-value {
  color: var(--syntax-value);
}

.language-html .token.text {
  color: var(--syntax-text);
}

.language-html .token.comment {
  color: var(--syntax-comment);
  font-style: italic;
}

.language-html .token.punctuation {
  color: var(--syntax-delimiter);
}

/* ============================================
   ESTILOS PARA ELEMENTOS DE CÓDIGO INLINE
   ============================================ */

code {
  color: var(--syntax-text);
  background: var(--color-bg-secondary);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

/* Estilos para blocos de código */
pre {
  background: var(--color-bg-secondary);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  border: 1px solid var(--color-border-primary);
}

pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--syntax-text);
}

/* Aplicar cores específicas quando dentro de code-view-container */
.code-view-container .code-view,
.code-view-container code {
  background: var(--color-bg-secondary);
  padding: 1rem;
  border-radius: 4px;
  display: block;
  overflow-x: auto;
}

/* ============================================
   UTILITIES - Classes auxiliares
   ============================================ */

/* Skip Link para acessibilidade */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-border-accent);
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Classes para controle mobile/desktop */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* Media queries para mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block;
  }
}

/* Classes para substituir estilos inline */
.inline-block {
  display: inline-block;
}

.content-indent {
  margin-left: 1rem;
}

.list-indent {
  margin-left: 1rem;
}

.skills-list {
  margin-left: 2rem;
}

.close-menu {
  padding: 0 !important;
  cursor: pointer;
}

.theme-label {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-right: 14px !important;
  cursor: pointer;
}

.footer-row {
  margin-top: -4px;
}

.iframe-preview {
  width: 100%;
  height: 400px;
}

.menu-account {
  margin-bottom: 0.3rem;
}