:root {
            --roxo: #330066;
            --roxo-hover: #4a0090;
            --lilas: #A994E6;
            --lilas-light: #d4c8f0;
            --lilas-bg: #f0ecf8;
            --off-white: #F6F5F3;
            --grafite: #2C2C34;
            --dourado: #CC9900;
            --cinza: #CCCCCC;
            --cinza-light: #E8E8E8;
            --sucesso: #7A8C3C;
            --alerta: #CC9900;
            --erro: #8B2252;
            --info: #A994E6;
            --radius: 12px;
        }

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

        body {
            font-family: 'Public Sans', system-ui, sans-serif;
            font-weight: 300;
            line-height: 1.6;
            color: var(--grafite);
            background: var(--off-white);
        }

        /* === LAYOUT === */
        .page-grid {
            display: grid;
            grid-template-columns: 260px 1fr;
            min-height: 100vh;
        }

        /* === SIDEBAR === */
        .sidebar {
            background: var(--roxo);
            color: var(--off-white);
            padding: 2rem 0;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            border-right: 1px solid rgba(169, 148, 230, 0.2);
        }

        .sidebar-logo {
            padding: 0 1.5rem 2rem;
            border-bottom: 1px solid rgba(169, 148, 230, 0.15);
            margin-bottom: 1.5rem;
        }

        .sidebar-logo h1 {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 1.4rem;
            letter-spacing: -0.02em;
        }

        .sidebar-logo .badge {
            display: inline-block;
            background: var(--lilas);
            color: var(--roxo);
            font-size: 0.65rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 20px;
            margin-top: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .sidebar-section {
            padding: 0 1rem;
            margin-bottom: 1.5rem;
        }

        .sidebar-section-title {
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--lilas);
            padding: 0 0.5rem;
            margin-bottom: 0.5rem;
        }

        .sidebar a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: rgba(246, 245, 243, 0.7);
            text-decoration: none;
            padding: 0.4rem 0.75rem;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 400;
            transition: all 0.15s ease;
        }

        .sidebar a:hover {
            color: var(--off-white);
            background: rgba(169, 148, 230, 0.15);
        }

        .sidebar a.active {
            color: var(--off-white);
            background: rgba(169, 148, 230, 0.2);
            font-weight: 600;
        }

        .sidebar a .num {
            font-size: 0.7rem;
            color: var(--lilas);
            font-weight: 600;
            min-width: 1.2rem;
        }

        /* === MAIN === */
        .main {
            padding: 3rem 4rem;
            max-width: 960px;
        }

        /* === HEADER === */
        .hero {
            margin-bottom: 4rem;
        }

        .hero-eyebrow {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--lilas);
            margin-bottom: 0.75rem;
        }

        .hero h1 {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 3.2rem;
            color: var(--roxo);
            line-height: 1.1;
            margin-bottom: 1rem;
            letter-spacing: -0.02em;
        }

        .hero p {
            font-size: 1.15rem;
            color: rgba(44, 44, 52, 0.7);
            max-width: 640px;
            line-height: 1.7;
        }

        /* === SUMMARY CARDS === */
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin: 2.5rem 0 4rem;
        }

        .summary-card {
            background: white;
            border: 1px solid var(--cinza-light);
            border-radius: var(--radius);
            padding: 1.25rem;
            transition: all 0.2s ease;
        }

        .summary-card:hover {
            border-color: var(--lilas);
            box-shadow: 0 4px 12px rgba(51, 0, 102, 0.08);
        }

        .summary-card .label {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(44, 44, 52, 0.5);
            margin-bottom: 0.5rem;
        }

        .summary-card .value {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--roxo);
        }

        .summary-card .meta {
            font-size: 0.8rem;
            color: rgba(44, 44, 52, 0.5);
            margin-top: 0.25rem;
        }

        /* === SECTIONS === */
        .section {
            margin-bottom: 4rem;
            scroll-margin-top: 2rem;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .section-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--roxo);
            color: var(--off-white);
            border-radius: 8px;
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .section h2 {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--roxo);
            letter-spacing: -0.01em;
        }

        .section h3 {
            font-family: 'Fraunces', serif;
            font-weight: 600;
            font-size: 1.2rem;
            color: var(--grafite);
            margin: 2rem 0 1rem;
        }

        .section p {
            margin-bottom: 1rem;
            line-height: 1.7;
        }

        /* === CONTENT BLOCKS === */
        .card {
            background: white;
            border: 1px solid var(--cinza-light);
            border-radius: var(--radius);
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .card-title {
            font-family: 'Fraunces', serif;
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--grafite);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* === PHASE CARDS === */
        .phase-card {
            background: white;
            border: 1px solid var(--cinza-light);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 1.5rem;
            transition: all 0.2s ease;
        }

        .phase-card:hover {
            border-color: var(--lilas);
            box-shadow: 0 4px 16px rgba(51, 0, 102, 0.06);
        }

        .phase-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--cinza-light);
            cursor: pointer;
        }

        .phase-header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .phase-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .phase-icon.foundations { background: var(--lilas-bg); }
        .phase-icon.components { background: #e0f2fe; }
        .phase-icon.patterns { background: #fef3c7; }
        .phase-icon.content { background: #d1fae5; }
        .phase-icon.site { background: #fce7f3; }

        .phase-title {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--grafite);
        }

        .phase-subtitle {
            font-size: 0.8rem;
            color: rgba(44, 44, 52, 0.5);
            margin-top: 0.15rem;
        }

        .phase-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .badge-now { background: var(--roxo); color: white; }
        .badge-next { background: var(--lilas-bg); color: var(--roxo); }
        .badge-later { background: #f3f4f6; color: #6b7280; }

        .phase-body {
            padding: 1.5rem;
        }

        .phase-body ul {
            list-style: none;
            margin: 0;
        }

        .phase-body li {
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(0,0,0,0.04);
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            font-size: 0.9rem;
        }

        .phase-body li:last-child { border-bottom: none; }

        .phase-body li .check {
            width: 18px;
            height: 18px;
            border: 2px solid var(--cinza);
            border-radius: 4px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .phase-body li strong {
            font-weight: 600;
        }

        .phase-body li .detail {
            color: rgba(44, 44, 52, 0.6);
            font-size: 0.82rem;
        }

        /* === TOKEN PYRAMID === */
        .pyramid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            margin: 2rem 0;
        }

        .pyramid-level {
            padding: 1rem 2rem;
            text-align: center;
            color: white;
            font-weight: 600;
            font-size: 0.85rem;
            position: relative;
        }

        .pyramid-level:nth-child(1) {
            background: var(--roxo);
            border-radius: var(--radius) var(--radius) 0 0;
            width: 50%;
        }

        .pyramid-level:nth-child(2) {
            background: #5a1a99;
            width: 70%;
        }

        .pyramid-level:nth-child(3) {
            background: var(--lilas);
            color: var(--roxo);
            border-radius: 0 0 var(--radius) var(--radius);
            width: 90%;
        }

        .pyramid-label {
            font-size: 0.7rem;
            opacity: 0.8;
            margin-top: 0.25rem;
            font-weight: 400;
        }

        /* === TABLE === */
        .ds-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            font-size: 0.85rem;
        }

        .ds-table th {
            text-align: left;
            padding: 0.75rem 1rem;
            font-weight: 600;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(44, 44, 52, 0.5);
            border-bottom: 2px solid var(--cinza-light);
        }

        .ds-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid rgba(0,0,0,0.04);
            vertical-align: top;
        }

        .ds-table tr:hover td {
            background: rgba(169, 148, 230, 0.04);
        }

        .ds-table code {
            background: var(--lilas-bg);
            color: var(--roxo);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
        }

        /* === STATUS === */
        .status {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .status-dot.green { background: var(--success); }
        .status-dot.yellow { background: var(--warning); }
        .status-dot.red { background: var(--danger); }
        .status-dot.blue { background: var(--info); }
        .status-dot.gray { background: var(--cinza); }

        /* === CALLOUT === */
        .callout {
            border-radius: var(--radius);
            padding: 1.25rem 1.5rem;
            margin: 1.5rem 0;
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }

        .callout.insight {
            background: var(--lilas-bg);
            border: 1px solid rgba(169, 148, 230, 0.3);
        }

        .callout.warning {
            background: #fef3c7;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .callout.reference {
            background: #e0f2fe;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }

        .callout.decision {
            background: #d1fae5;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .callout-icon {
            font-size: 1.2rem;
            flex-shrink: 0;
            margin-top: 0.1rem;
        }

        .callout-text {
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .callout-text strong {
            font-weight: 600;
        }

        /* === COMPARISON === */
        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .comparison-card {
            border-radius: var(--radius);
            padding: 1.25rem;
            border: 1px solid;
        }

        .comparison-card.do {
            border-color: rgba(16, 185, 129, 0.3);
            background: #f0fdf4;
        }

        .comparison-card.dont {
            border-color: rgba(239, 68, 68, 0.3);
            background: #fef2f2;
        }

        .comparison-card h4 {
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.75rem;
        }

        .comparison-card.do h4 { color: var(--success); }
        .comparison-card.dont h4 { color: var(--danger); }

        .comparison-card code {
            display: block;
            background: white;
            padding: 0.75rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            line-height: 1.5;
            margin: 0.5rem 0;
            white-space: pre;
        }

        /* === TIMELINE === */
        .timeline {
            position: relative;
            margin: 2rem 0;
            padding-left: 2rem;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 7px;
            top: 8px;
            bottom: 8px;
            width: 2px;
            background: linear-gradient(to bottom, var(--roxo), var(--lilas), var(--cinza));
        }

        .timeline-item {
            position: relative;
            margin-bottom: 2rem;
        }

        .timeline-dot {
            position: absolute;
            left: -2rem;
            top: 6px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 3px solid var(--off-white);
        }

        .timeline-dot.active { background: var(--roxo); }
        .timeline-dot.next { background: var(--lilas); }
        .timeline-dot.future { background: var(--cinza); }

        .timeline-content h4 {
            font-family: 'Fraunces', serif;
            font-weight: 600;
            font-size: 1rem;
            color: var(--grafite);
            margin-bottom: 0.25rem;
        }

        .timeline-content p {
            font-size: 0.85rem;
            color: rgba(44, 44, 52, 0.6);
            margin-bottom: 0;
        }

        .timeline-content .week {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--lilas);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* === DIVIDER === */
        .divider {
            height: 1px;
            background: var(--cinza-light);
            margin: 3rem 0;
        }

        /* === COLOR SWATCHES === */
        .swatch-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin: 1.5rem 0;
        }

        .swatch {
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--cinza-light);
        }

        .swatch-color {
            height: 64px;
        }

        .swatch-info {
            padding: 0.5rem 0.75rem;
            background: white;
            font-size: 0.75rem;
        }

        .swatch-info strong {
            display: block;
            font-weight: 600;
            margin-bottom: 0.15rem;
        }

        .swatch-info code {
            color: rgba(44, 44, 52, 0.5);
            font-family: monospace;
            font-size: 0.7rem;
        }

        /* === SITEMAP === */
        .sitemap {
            background: white;
            border: 1px solid var(--cinza-light);
            border-radius: var(--radius);
            padding: 1.5rem;
            margin: 1.5rem 0;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            font-size: 0.8rem;
            line-height: 2;
            color: var(--grafite);
        }

        .sitemap .folder {
            color: var(--roxo);
            font-weight: 600;
        }

        .sitemap .file {
            color: rgba(44, 44, 52, 0.6);
        }

        .sitemap .tag {
            display: inline-block;
            background: var(--lilas-bg);
            color: var(--roxo);
            font-size: 0.65rem;
            padding: 1px 6px;
            border-radius: 4px;
            margin-left: 0.5rem;
            font-family: 'Public Sans', sans-serif;
            font-weight: 600;
        }

        .sitemap .tag.now { background: var(--roxo); color: white; }
        .sitemap .tag.next { background: var(--lilas-bg); }

        /* === FOOTER === */
        .footer {
            margin-top: 4rem;
            padding: 2rem 0;
            border-top: 1px solid var(--cinza-light);
            text-align: center;
            font-size: 0.8rem;
            color: rgba(44, 44, 52, 0.4);
        }

        /* === RESPONSIVE === */
        @media (max-width: 1024px) {
            .page-grid { grid-template-columns: 1fr; }
            .sidebar { display: none; }
            .main { padding: 2rem 1.5rem; }
            .summary-grid { grid-template-columns: repeat(2, 1fr); }
            .comparison-grid { grid-template-columns: 1fr; }
        }

        /* Smooth scroll */
        html { scroll-behavior: smooth; }

        /* === IMPRESSÃO / PDF === */
        @media print {
            /* Layout: remover sidebar, usar largura total */
            .page-grid {
                display: block !important;
            }
            .sidebar {
                display: none !important;
            }
            .main {
                padding: 2rem !important;
                max-width: 100% !important;
            }

            /* Abrir todos os exemplos interativos */
            .exemplo-conteudo {
                max-height: none !important;
                opacity: 1 !important;
                overflow: visible !important;
            }
            .exemplo-toggle {
                background: var(--lilas-bg) !important;
                border-color: var(--lilas) !important;
                pointer-events: none;
            }
            .exemplo-toggle .seta {
                transform: rotate(180deg);
            }

            /* Evitar quebra de página no meio de blocos */
            .fund-section,
            .cor-card,
            .comb-card,
            .regra-card,
            .exemplo-inner,
            .contraste-card,
            .phase-card,
            .card,
            .section,
            .mini-toast,
            table, thead, tbody, tr {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }

            /* Títulos nunca ficam sozinhos no fim da página */
            .fund-header,
            .fund-section-title,
            .secao-titulo,
            .section-title,
            .sub-titulo,
            h1, h2, h3, h4 {
                page-break-after: avoid !important;
                break-after: avoid !important;
            }

            /* Separadores podem quebrar */
            .divider, .separador {
                page-break-before: auto;
            }

            /* Grids de cores: manter juntos */
            .cores-grid,
            .comb-grid,
            .regras-grid,
            .contraste-grid,
            .swatch-grid {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }

            /* Fundações header: nova página antes */
            .fund-header {
                page-break-before: always !important;
                break-before: page !important;
                margin-top: 0 !important;
                padding-top: 1rem !important;
            }

            /* Primeiro fund-header não precisa de quebra */
            .fund-header:first-of-type {
                page-break-before: auto !important;
                break-before: auto !important;
            }

            /* Esconder animações */
            * {
                animation: none !important;
                transition: none !important;
            }

            /* Garantir cores no print */
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }

            /* Tabelas: não cortar linhas */
            .mini-table tr,
            .ds-table tr {
                page-break-inside: avoid !important;
            }

            /* Cards de componentes (Top 20): não quebrar */
            div[style*="margin-bottom:1.25rem"] {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
        }

        /* === FUNDAÇÕES: ESTILOS === */
        .fund-header {
            margin: 4rem 0 2rem;
            padding: 3rem 0 2rem;
            border-top: 3px solid var(--roxo);
        }

        .fund-header .header-eyebrow {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--lilas);
            margin-bottom: 0.5rem;
        }

        .fund-header h1 {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 2.5rem;
            color: var(--roxo);
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .fund-header p {
            font-size: 1rem;
            color: #999;
            margin-top: 0.75rem;
            max-width: 600px;
        }

        .fund-section {
            margin-bottom: 3rem;
        }

        .fund-section-title {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.6rem;
            color: var(--roxo);
            margin-bottom: 0.4rem;
        }

        .fund-section-desc {
            color: #999;
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
            max-width: 600px;
        }

        .fund-sub-titulo {
            font-family: 'Fraunces', serif;
            font-weight: 600;
            font-size: 1.15rem;
            color: var(--roxo);
            margin: 2rem 0 0.75rem;
        }

        /* Cor cards */
        .cores-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .cor-card {
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.06);
            background: white;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .cor-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(51, 0, 102, 0.08);
        }

        .cor-amostra {
            height: 100px;
            display: flex;
            align-items: flex-end;
            padding: 0.6rem;
        }

        .cor-amostra .nome-sobre {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 5px;
            background: rgba(255,255,255,0.9);
            color: var(--grafite);
        }

        .cor-info {
            padding: 0.85rem 1rem 1rem;
        }

        .cor-nome {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--grafite);
            margin-bottom: 0.2rem;
        }

        .cor-hex {
            font-family: monospace;
            font-size: 0.8rem;
            color: var(--roxo);
            background: rgba(169,148,230,0.1);
            padding: 2px 7px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 0.4rem;
            cursor: pointer;
        }

        .cor-hex:hover { background: rgba(169,148,230,0.25); }

        .cor-uso {
            font-size: 0.78rem;
            color: var(--grafite);
            line-height: 1.5;
        }

        .cor-significado {
            font-size: 0.7rem;
            color: #999;
            font-style: italic;
            margin-top: 0.25rem;
        }

        .cor-variavel {
            font-family: monospace;
            font-size: 0.65rem;
            color: #999;
            margin-top: 0.4rem;
            padding-top: 0.4rem;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        /* Combinações */
        .comb-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .comb-card {
            border-radius: var(--radius);
            padding: 1.75rem;
            min-height: 130px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .comb-titulo {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 0.4rem;
        }

        .comb-corpo {
            font-size: 0.85rem;
            line-height: 1.5;
            opacity: 0.85;
        }

        .comb-label {
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.5;
            margin-top: 0.75rem;
        }

        /* Contraste */
        .contraste-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .contraste-card {
            border-radius: 8px;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid rgba(0,0,0,0.06);
        }

        .contraste-ratio {
            font-family: monospace;
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 5px;
            font-weight: 600;
        }

        .contraste-ratio.pass { background: rgba(122,140,60,0.12); color: #4A5A1E; }
        .contraste-ratio.fail { background: rgba(139,34,82,0.12); color: #6B1A3F; }

        /* Regras do/don't */
        .regras-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .regra-card {
            border-radius: var(--radius);
            padding: 1.25rem;
            border: 1px solid;
        }

        .regra-card.certo { background: #f0fdf4; border-color: rgba(16,185,129,0.2); }
        .regra-card.errado { background: #fef2f2; border-color: rgba(239,68,68,0.2); }

        .regra-titulo {
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.6rem;
        }

        .regra-card.certo .regra-titulo { color: #7A8C3C; }
        .regra-card.errado .regra-titulo { color: #8B2252; }

        .regra-item {
            font-size: 0.82rem;
            padding: 0.3rem 0;
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
        }

        /* Toggle interativo */
        .exemplo-toggle {
            width: 100%;
            background: white;
            border: 1px solid rgba(169,148,230,0.25);
            border-radius: 8px;
            padding: 0.85rem 1.25rem;
            margin: 1.25rem 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s ease;
            font-family: 'Public Sans', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--roxo);
        }

        .exemplo-toggle:hover {
            background: rgba(169,148,230,0.06);
            border-color: var(--lilas);
        }

        .exemplo-toggle .seta {
            transition: transform 0.25s ease;
            font-size: 0.65rem;
            color: var(--lilas);
        }

        .exemplo-toggle.aberto .seta { transform: rotate(180deg); }

        .exemplo-conteudo {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease;
            opacity: 0;
        }

        .exemplo-conteudo.aberto {
            max-height: 4000px;
            opacity: 1;
        }

        .exemplo-inner {
            background: white;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .exemplo-label {
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--lilas);
            padding: 0.85rem 1.25rem 0;
        }

        .exemplo-preview {
            padding: 1.25rem;
        }

        /* Mini componentes */
        .mini-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 1rem;
            border-radius: 7px;
            font-family: 'Public Sans', sans-serif;
            font-weight: 600;
            font-size: 0.8rem;
            border: none;
            cursor: pointer;
        }

        .mini-btn-primary { background: var(--roxo); color: #F6F5F3; }
        .mini-btn-secondary { background: transparent; color: var(--roxo); border: 1px solid var(--roxo); }
        .mini-btn-ghost { background: transparent; color: var(--roxo); }
        .mini-btn-danger { background: #8B2252; color: white; }
        .mini-btn-success { background: var(--sucesso); color: white; }

        .mini-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.15rem 0.5rem;
            border-radius: 20px;
            font-size: 0.65rem;
            font-weight: 600;
        }

        .mini-input {
            width: 100%;
            padding: 0.5rem 0.7rem;
            border: 1px solid #ccc;
            border-radius: 7px;
            font-family: 'Public Sans', sans-serif;
            font-size: 0.8rem;
            font-weight: 300;
            color: var(--grafite);
            background: white;
            outline: none;
        }

        .mini-input:focus {
            border-color: var(--lilas);
            box-shadow: 0 0 0 3px rgba(169,148,230,0.15);
        }

        .mini-input::placeholder { color: #ccc; }

        .mini-label {
            font-family: 'Public Sans', sans-serif;
            font-weight: 600;
            font-size: 0.75rem;
            color: var(--grafite);
            margin-bottom: 0.3rem;
            display: block;
        }

        .mini-toast {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.75rem 1rem;
            border-radius: 7px;
            font-family: 'Public Sans', sans-serif;
            font-size: 0.8rem;
            border-left: 4px solid;
        }

        .mini-sidebar {
            background: var(--roxo);
            border-radius: 8px;
            padding: 1rem;
            width: 180px;
        }

        .mini-sidebar-item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.4rem 0.6rem;
            border-radius: 5px;
            font-family: 'Public Sans', sans-serif;
            font-size: 0.75rem;
            color: rgba(246,245,243,0.6);
            margin-bottom: 0.1rem;
        }

        .mini-sidebar-item.ativo {
            background: rgba(169,148,230,0.2);
            color: #F6F5F3;
            font-weight: 600;
        }

        .mini-table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Public Sans', sans-serif;
            font-size: 0.75rem;
        }

        .mini-table th {
            text-align: left;
            padding: 0.5rem 0.6rem;
            font-weight: 600;
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #999;
            border-bottom: 2px solid rgba(0,0,0,0.06);
        }

        .mini-table td {
            padding: 0.5rem 0.6rem;
            border-bottom: 1px solid rgba(0,0,0,0.04);
            color: var(--grafite);
            font-weight: 300;
        }

        .fund-callout {
            border-radius: var(--radius);
            padding: 1rem 1.25rem;
            margin: 1.25rem 0;
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            font-size: 0.85rem;
            line-height: 1.6;
        }

        .fund-callout.warning {
            background: #fef3c7;
            border: 1px solid rgba(245,158,11,0.3);
        }

        @media (max-width: 1024px) {
            .cores-grid { grid-template-columns: 1fr !important; }
            .comb-grid, .regras-grid, .contraste-grid { grid-template-columns: 1fr; }
        }

        /* === DATAVIZ === */
        .chart-palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 1.5rem 0; }
        .chart-palette-item { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
        .chart-swatch { height: 72px; display: flex; align-items: flex-end; padding: 0.5rem; }
        .chart-swatch-label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.88); color: var(--grafite); }
        .chart-swatch-info { padding: 0.6rem 0.75rem 0.75rem; background: white; }
        .chart-swatch-role { font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.82rem; color: var(--grafite); margin-bottom: 0.15rem; }
        .chart-swatch-hex { font-family: monospace; font-size: 0.72rem; color: var(--roxo); background: rgba(169,148,230,0.1); padding: 1px 6px; border-radius: 4px; display: inline-block; margin-bottom: 0.3rem; cursor: pointer; }
        .chart-swatch-hex:hover { background: rgba(169,148,230,0.25); }
        .chart-swatch-var { font-family: monospace; font-size: 0.68rem; color: rgba(44,44,52,0.45); display: block; }
        .chart-demo-box { background: white; border: 1px solid var(--cinza-light); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 1.5rem 0; }
        .chart-demo-title { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(44,44,52,0.4); margin-bottom: 0.25rem; }
        .chart-demo-subtitle { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1rem; color: var(--grafite); margin-bottom: 1.25rem; }
        .chart-bars-area { display: flex; align-items: flex-end; gap: 0.6rem; height: 100px; padding-bottom: 0.25rem; border-bottom: 1px solid var(--cinza-light); }
        .chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
        .chart-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: opacity 0.15s ease; }
        .chart-bar-fill:hover { opacity: 0.75; cursor: pointer; }
        .chart-bar-x { font-size: 0.65rem; color: rgba(44,44,52,0.45); text-align: center; margin-top: 0.4rem; }
        .chart-legend { display: flex; gap: 1.25rem; margin-top: 1rem; flex-wrap: wrap; }
        .chart-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: rgba(44,44,52,0.6); }
        .chart-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
        .chart-rule-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.82rem; }
        .chart-rule-table th { text-align: left; padding: 0.6rem 0.75rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(44,44,52,0.45); border-bottom: 2px solid var(--cinza-light); }
        .chart-rule-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--grafite); font-weight: 300; vertical-align: top; }
        .chart-rule-table tr:hover td { background: rgba(169,148,230,0.04); }
        .chart-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
        @media (max-width: 768px) { .chart-palette-grid { grid-template-columns: 1fr 1fr; } }