html {
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        -webkit-overflow-scrolling: touch;
      }

      body {
        font-family: "Segoe UI", sans-serif;
        margin: 0;
        padding: 0;
        background: #f4f4f4;
        color: #222;
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100vh;
        height: auto;
        position: relative;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
      }

      #main-app {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        max-width: 100vw;
      }

      #main-app footer {
        margin-top: auto;
      }

      header {
        background-color: #003366;
        color: white;
        padding: 0.75rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      header img {
        height: 1.5rem;
        filter: brightness(0) invert(1);
        flex-shrink: 0;
      }

      header span {
        font-size: clamp(1rem, 2vw, 1.3rem);
        font-weight: 600;
        flex: 1;
        text-align: center;
        margin: 0 1rem;
        letter-spacing: 0.5px;
      }

      #breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        padding: 0.875rem 1.25rem;
        background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
        align-items: center;
        row-gap: 0.5rem;
        box-shadow:
          0 3px 5px -1px rgba(0, 0, 0, 0.1),
          0 1px 3px -1px rgba(0, 0, 0, 0.06),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid #cbd5e1;
        position: relative;
      }

      #breadcrumbs::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          #003366 0%,
          #00529c 50%,
          #0066cc 100%
        );
      }

      #breadcrumbs span {
        background: linear-gradient(145deg, #003366 0%, #1e40af 100%);
        color: white;
        padding: 0.5rem 1.125rem 0.5rem 0.875rem;
        font-size: clamp(0.8rem, 1.1vw, 0.925rem);
        font-weight: 600;
        user-select: none;
        cursor: pointer;
        margin-right: -0.4rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        clip-path: polygon(
          12px 0,
          100% 0,
          calc(100% - 12px) 50%,
          100% 100%,
          12px 100%,
          0 50%
        );
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow:
          0 3px 6px rgba(0, 51, 102, 0.2),
          0 1px 2px rgba(0, 51, 102, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        position: relative;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      #breadcrumbs span::before {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        right: 15px;
        height: calc(100% - 2px);
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.05) 100%
        );
        clip-path: polygon(
          13px 0,
          100% 0,
          calc(100% - 13px) 50%,
          100% 100%,
          13px 100%,
          0 50%
        );
        pointer-events: none;
      }

      #breadcrumbs span:hover {
        background: linear-gradient(145deg, #1e40af 0%, #3b82f6 100%);
        transform: translateY(-2px) scale(1.02);
        box-shadow:
          0 8px 16px rgba(0, 51, 102, 0.3),
          0 4px 8px rgba(0, 51, 102, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }

      #breadcrumbs span:first-child {
        padding: 0.5rem 1.125rem 0.5rem 1rem;
        clip-path: polygon(
          0 0,
          100% 0,
          calc(100% - 12px) 50%,
          100% 100%,
          0 100%
        );
        border-radius: 0.375rem 0 0 0.375rem;
      }

      #breadcrumbs span:first-child::before {
        left: 1px;
        clip-path: polygon(
          0 0,
          100% 0,
          calc(100% - 11px) 50%,
          100% 100%,
          0 100%
        );
      }

      #breadcrumbs span:last-child {
        background: linear-gradient(145deg, #00529c 0%, #3b82f6 100%);

        clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
        font-weight: 700;
        margin-right: 0;
        border-radius: 0 0.375rem 0.375rem 0;
        box-shadow:
          0 4px 8px rgba(0, 82, 156, 0.25),
          0 1px 3px rgba(0, 82, 156, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }

      #breadcrumbs span:last-child::before {
        right: 1px;
        clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
      }

      #breadcrumbs span:last-child:hover {
        background: linear-gradient(145deg, #3b82f6 0%, #60a5fa 100%);
        transform: translateY(-2px) scale(1.02);
      }

      /* Efeito de brilho em hover */
      #breadcrumbs span:hover::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          45deg,
          transparent 30%,
          rgba(255, 255, 255, 0.3) 50%,
          transparent 70%
        );
        clip-path: inherit;
        animation: shimmer 0.6s ease-out;
        pointer-events: none;
      }

      @keyframes shimmer {
        0% {
          transform: translateX(-100%);
          opacity: 0;
        }

        50% {
          opacity: 1;
        }

        100% {
          transform: translateX(100%);
          opacity: 0;
        }
      }

      #breadcrumbs svg {
        width: 16px;
        height: 16px;
        fill: white;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
        transition: all 0.3s ease;
      }

      #breadcrumbs span:hover svg {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        transform: scale(1.1);
      }

      #tree {
        padding: 1.25rem 1.5rem;
        overflow-x: hidden;
        overflow-y: auto;
        max-width: 100%;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: visible;
      }

      li {
        background: #fff;
        margin: 0.5rem 0;
        padding: 0.625rem 0.875rem;
        border-radius: 0.375rem;
        box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
        transition: background 0.2s ease;
        user-select: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: clamp(0.9rem, 1.2vw, 1rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      li:hover {
        background: #e6f0ff;
      }

      li::before {
        content: "▶";
        color: #003366;
        margin-right: 0.125rem;
      }

      #video-container {
        display: none;
        padding: 1.875rem 1.5rem 2rem 1.5rem;
        text-align: center;
        min-height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        max-width: 100%;
        box-sizing: border-box;
      }

      #video-title {
        font-size: clamp(1.2rem, 2vw, 1.5rem);
        font-weight: 500;
        margin-bottom: 1rem;
        color: #003366;
        user-select: none;
      }

      iframe {
        width: 100%;
        max-width: 45rem;
        aspect-ratio: 16/9;
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
        margin-bottom: 1rem;
      }

      /* Garantir que quando vídeo está ativo, a página seja rolável */
      #main-app:has(#video-container[style*="block"]) {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
      }

      footer {
        padding: 1.5rem;
        background: #e9edf3;
        text-align: center;
        font-size: clamp(0.9rem, 1.2vw, 1rem);
      }

      .whatsapp-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #25d366;
        color: white;
        padding: 0.6rem 1.2rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-weight: 500;
        transition: background 0.2s ease;
      }

      .whatsapp-button:hover {
        background: #1ebe5d;
      }

      .whatsapp-button svg {
        width: 20px;
        height: 20px;
        fill: white;
      }

      /* Botão de instalação do app (PWA) */
      .install-button {
        display: block;
        margin: 1.25rem auto 0;
        width: 100%;
        max-width: 20rem;
        padding: 0.75rem 1rem;
        background: #0f172a;
        color: #fff;
        border: none;
        border-radius: 0.625rem;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s ease;
      }

      .install-button:hover {
        background: #1e293b;
      }

      .install-button:disabled {
        opacity: 0.7;
        cursor: default;
      }

      /* Melhorar visibilidade e rolagem em telas pequenas */
      @media (max-width: 768px) {
        html,
        body {
          height: auto;
          min-height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          position: relative;
        }

        #main-app {
          height: auto;
          min-height: 100vh;
          overflow: visible;
          position: relative;
        }

        #tree {
          padding: 1rem;
          overflow: visible;
          max-height: none;
        }

        #video-container {
          padding: 1rem 0.75rem 1.5rem 0.75rem;
          margin-bottom: 1rem;
          max-height: none;
          overflow: visible;
          position: relative;
        }

        iframe {
          max-width: 100%;
          height: auto;
          aspect-ratio: 16/9;
        }

        footer {
          position: relative;
          margin-top: 1rem;
          padding: 1rem;
          min-height: auto;
          flex-shrink: 0;
        }

        #menu-toggle {
          display: flex !important;
        }

        /* Garantir que listas longas sejam roláveis */
        ul {
          max-height: none;
          overflow: visible;
        }

        li {
          white-space: normal;
          word-break: break-word;
          overflow-wrap: break-word;
        }
      }

      /* Especificamente para iPhones e dispositivos iOS */
      @media (max-width: 480px) {
        body {
          -webkit-text-size-adjust: 100%;
          touch-action: manipulation;
        }

        #main-app {
          -webkit-overflow-scrolling: touch;
        }
      }

      /* Menu Lateral */
      #side-menu {
        position: fixed;
        top: 0;
        left: -300px;
        width: 280px;
        height: 100vh;
        background: linear-gradient(180deg, #003366 0%, #1e40af 100%);
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        display: flex;
        flex-direction: column;
      }

      #side-menu.open {
        left: 0;
      }

      #menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
      }

      #menu-overlay.show {
        opacity: 1;
        visibility: visible;
      }

      .menu-header {
        padding: 2rem 1.5rem 1.5rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
      }

      .menu-header img {
        height: 2rem;
        filter: brightness(0) invert(1);
        margin-bottom: 0.75rem;
      }

      .menu-header h3 {
        color: white;
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
      }

      .menu-items {
        padding: 0.1rem 0;
        flex: 1;
      }

      .menu-item {
        display: block;
        padding: 1rem 1.5rem;
        color: white;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      .menu-item:hover {
        background: rgba(255, 255, 255, 0.1);
        border-left-color: #60a5fa;
        transform: translateX(5px);
      }

      .menu-item svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }

      .menu-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        opacity: 0.7;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.2s;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .menu-close:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
      }

      .menu-section {
        margin-bottom: 1rem;
      }

      .menu-section-title {
        color: #60a5fa;
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.75rem 1.5rem 0.5rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 0.5rem;
      }

      .menu-item.sub-item {
        padding-left: 2.5rem;
        font-size: 0.9rem;
        border-left: 2px solid transparent;
      }

      .menu-item.sub-item:hover {
        border-left-color: #60a5fa;
        transform: translateX(3px);
      }

      /* Search Results Styles */
      #video-search:focus {
        outline: none;
        border-color: #003366;
        box-shadow:
          0 0 0 3px rgba(0, 51, 102, 0.1),
          0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .search-result-item {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      .search-result-item:last-child {
        border-bottom: none;
      }

      .search-result-item:hover {
        background: #f8fafc;
      }

      .search-result-item:active {
        background: #e2e8f0;
      }

      .search-result-icon {
        width: 20px;
        height: 20px;
        fill: #003366;
        flex-shrink: 0;
      }

      .search-result-content {
        flex: 1;
        min-width: 0;
      }

      .search-result-name {
        font-weight: 600;
        color: #003366;
        margin-bottom: 0.25rem;
        font-size: 0.95rem;
      }

      .search-result-path {
        font-size: 0.8rem;
        color: #64748b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .search-loading {
        padding: 1rem;
        text-align: center;
        color: #64748b;
        font-size: 0.9rem;
      }

      .search-no-results {
        padding: 1.5rem;
        text-align: center;
        color: #64748b;
      }

      .search-no-results svg {
        width: 48px;
        height: 48px;
        fill: #cbd5e1;
        margin-bottom: 0.5rem;
      }

      #clear-search:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.1);
      }

      @media (max-width: 768px) {
        #search-container {
          padding: 0.75rem 1rem;
        }

        #video-search {
          font-size: 16px; /* Prevents zoom on iOS */
        }
      }

/* ===================================================== */
      /* Documentação Técnica - acesso evidente (index2.php)   */
      /* ===================================================== */
      #docs-section {
        padding: 0 1.5rem 1rem;
        background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
        border-bottom: 1px solid #cbd5e1;
      }

      .docs-button {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: 0.875rem 1.25rem;
        border: none;
        border-radius: 0.5rem;
        background: linear-gradient(145deg, #003366 0%, #1e40af 100%);
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow:
          0 4px 10px rgba(0, 51, 102, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: all 0.2s ease;
      }

      .docs-button:hover {
        background: linear-gradient(145deg, #1e40af 0%, #3b82f6 100%);
        transform: translateY(-1px);
        box-shadow:
          0 6px 14px rgba(0, 51, 102, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }

      .docs-button-icon {
        width: 22px;
        height: 22px;
        fill: #fff;
        flex-shrink: 0;
      }

      .docs-button span {
        flex: 1;
        text-align: left;
        letter-spacing: 0.3px;
      }

      .docs-button-chevron {
        width: 20px;
        height: 20px;
        fill: #fff;
        flex-shrink: 0;
        transition: transform 0.25s ease;
      }

      .docs-button.open .docs-button-chevron {
        transform: rotate(180deg);
      }

      .docs-panel {
        max-width: 600px;
        margin: 0 auto;
        background: #fff;
        border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition:
          max-height 0.3s ease,
          opacity 0.2s ease,
          margin-top 0.3s ease;
      }

      .docs-panel.open {
        max-height: 320px;
        overflow-y: auto;
        opacity: 1;
        margin-top: 0.75rem;
      }

      .docs-section-title {
        color: #003366;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.75rem 1.125rem 0.375rem;
        border-bottom: 1px solid #e2e8f0;
      }

      .docs-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1.125rem;
        color: #1e293b;
        text-decoration: none;
        font-size: 0.925rem;
        font-weight: 500;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s ease;
      }

      .docs-link:last-child {
        border-bottom: none;
      }

      .docs-link:hover {
        background: #f8fafc;
      }

      .docs-link svg {
        width: 20px;
        height: 20px;
        fill: #d97706;
        flex-shrink: 0;
      }

      .docs-empty {
        padding: 1.25rem;
        text-align: center;
        color: #64748b;
        font-size: 0.9rem;
      }

      @media (max-width: 768px) {
        #docs-section {
          padding: 0 1rem 0.875rem;
        }
      }

      /* ===== Menu Linktree (index4) ===== */

      .menu-links-section {
        padding: 0.875rem 1.25rem 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        flex-shrink: 0;
      }

      .menu-link-card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 0.625rem;
        padding: 0.75rem 1rem;
        color: white;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        transition: all 0.2s ease;
      }

      .menu-link-card:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.35);
        transform: translateY(-1px);
      }

      .menu-link-card-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .menu-link-card-icon svg {
        width: 18px;
        height: 18px;
        fill: white;
      }

      .menu-link-card span {
        flex: 1;
      }

      .menu-link-arrow {
        width: 16px;
        height: 16px;
        fill: rgba(255, 255, 255, 0.55);
        flex-shrink: 0;
      }

      /* Card de contato */
      .menu-contact-card {
        margin: 0.375rem 1.25rem 0.75rem;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.625rem;
        padding: 0.875rem 1rem;
      }

      .menu-contact-title {
        color: white;
        font-weight: 700;
        font-size: 0.875rem;
        margin-bottom: 0.125rem;
      }

      .menu-contact-subtitle {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
      }

      .menu-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 0.5rem;
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.4;
      }

      .menu-contact-item svg {
        width: 15px;
        height: 15px;
        fill: #60a5fa;
        flex-shrink: 0;
        margin-top: 1px;
      }

      .menu-contact-item a {
        color: #60a5fa;
        text-decoration: none;
        word-break: break-all;
      }

      .menu-contact-item a:hover {
        text-decoration: underline;
      }

      /* Divisor entre linktree e docs dinâmicos */
      .menu-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.12);
        margin: 0 1.25rem 0.5rem;
      }

      /* Label "Vídeos Tutoriais" acima da árvore */
      #videos-section-label {
        display: flex;
        align-items: center;
        padding: 0.875rem 1.5rem 0.5rem 1.5rem;
      }

      #videos-section-label span {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #003366;
        padding-left: 0.625rem;
        border-left: 3px solid #003366;
      }