/* ==============================================
           1. VARIÁVEIS DE TEMA (FORNECIDAS POR VOCÊ)
           ============================================= */
        :root {
            color-scheme: light;
            --bg-color: #f8fafc;
            --bg-color-hover: #dce1e6;
            --text-color: #334155;
            --bg-color-section: #ffffff;
            --bg-color-card: #f1f5f9;
            --bg-color-input-text: #1e293b;
            --texto-study: #0f172a;
            --bg-color-button-active: #3f63f5;
            --bg-color-button-active-hover: #1743f3;
            --bg-color-badge-card: #e0e7ff;
            --text-badge-card: #3f63f5;
            --scroll-track: #f1f5f9;
            --scroll-thumb: #cbd5e1;
            --scroll-thumb-hover: #94a3b8;
            --color-glass: rgba(255, 255, 255, 0.5);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                color-scheme: dark;
                --bg-color: #121314;
                --bg-color-hover: #35383b;
                --text-color: #e0e0e0;
                --bg-color-section: #191a1b;
                --bg-color-card: #242526;
                --bg-color-input-text: #ffffff;
                --texto-study: #ffffff;
                --bg-color-button-active: #3f63f5;
                --bg-color-button-active-hover: #1743f3;
                --bg-color-badge-card: #202020;
                --text-badge-card: #3f63f5;
                --scroll-track: #121314;
                --scroll-thumb: #242526;
                --scroll-thumb-hover: #494c4e;
                --color-glass: rgba(0, 0, 0, 0.5);
            }
        }

        /* Lógica do botão checkbox (Inversão manual) */
        @media (prefers-color-scheme: light),
        (prefers-color-scheme: no-preference) {
            :root:has(.theme-checkbox:checked) {
                color-scheme: dark;
                --bg-color: #121314;
                --bg-color-hover: #35383b;
                --text-color: #e0e0e0;
                --bg-color-section: #191a1b;
                --bg-color-card: #242526;
                --bg-color-input-text: #ffffff;
                --texto-study: #ffffff;
                --bg-color-button-active: #3ff56c;
                --bg-color-button-active-hover: #1743f3;
                --bg-color-badge-card: #202020;
                --text-badge-card: #3f63f5;
                --scroll-track: #121314;
                --scroll-thumb: #242526;
                --scroll-thumb-hover: #494c4e;
                --color-glass: rgba(0, 0, 0, 0.5);
            }
        }

        @media (prefers-color-scheme: dark) {
            :root:has(.theme-checkbox:checked) {
                color-scheme: light;
                --bg-color: #f8fafc;
                --bg-color-hover: #dce1e6;
                --text-color: #334155;
                --bg-color-section: #ffffff;
                --bg-color-card: #f1f5f9;
                --bg-color-input-text: #1e293b;
                --texto-study: #0f172a;
                --bg-color-button-active: #3f63f5;
                --bg-color-button-active-hover: #1743f3;
                --bg-color-badge-card: #e0e7ff;
                --text-badge-card: #3f63f5;
                --scroll-track: #f1f5f9;
                --scroll-thumb: #cbd5e1;
                --scroll-thumb-hover: #94a3b8;
                --color-glass: rgba(255, 255, 255, 0.5);
            }
        }

        /* ==============================================
           2. ESTILIZAÇÃO IDENTICA AO DESIGN ANTERIOR
           ============================================= */
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Topo com botão voltar (Simulando uma barra de navegação) */
        .nav-header {
            max-width: 680px;
            margin: 40px auto 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 8px 12px;
            border-radius: 6px;
            transition: background-color 0.2s;
        }

        .btn-back:hover {
            background-color: var(--bg-color-hover);
        }

        /* Container Principal */
        main {
            max-width: 680px;
            margin: 20px auto 60px auto;
            padding: 40px;
            background-color: var(--bg-color-section);
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            transition: background-color 0.3s ease;
        }

        /* Cabeçalho do Documento */
        .doc-header {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 32px;
            border-bottom: 2px solid var(--bg-color-card);
            padding-bottom: 20px;
        }

        .icon-shield {
            background-color: var(--bg-color-badge-card);
            color: var(--text-badge-card);
            padding: 12px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .doc-header h1 {
            color: var(--texto-study);
            font-size: 1.8rem;
            font-weight: 800;
            margin: 0 0 4px 0;
            letter-spacing: -0.025em;
            text-transform: uppercase;
        }

        .badge-info {
            display: inline-block;
            background-color: var(--bg-color-card);
            color: var(--text-color);
            font-size: 0.75rem;
            font-weight: 700;
            padding: 4px 8px;
            border-radius: 4px;
            letter-spacing: 0.05em;
        }

        /* Seções e Conteúdo */
        section {
            margin-bottom: 32px;
        }

        section h2 {
            color: var(--texto-study);
            font-size: 1.25rem;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 12px;
        }

        p,
        li {
            font-size: 1.05rem;
            margin-bottom: 16px;
        }

        ul {
            margin-top: 8px;
            margin-bottom: 16px;
            padding-left: 24px;
        }

        li {
            margin-bottom: 8px;
        }

        strong {
            color: var(--texto-study);
            font-weight: 600;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* Rodapé interno */
        .doc-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px dashed var(--bg-color-card);
            font-size: 0.9rem;
            color: var(--text-color);
            opacity: 0.8;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--scroll-track);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--scroll-thumb);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-thumb-hover);
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .nav-header {
                margin-top: 20px;
            }

            main {
                margin: 10px 20px 40px 20px;
                padding: 24px;
            }

            .doc-header h1 {
                font-size: 1.4rem;
            }

            .doc-header {
                gap: 12px;
            }
        }