/* --- ESTILOS NATIVOS DO QUIZ (PRESERVADOS E ADAPTADOS PARA O TEMA DARK) --- */
        :root {
            --primary: #59ba7d;
            --secondary: #d4af37; /* Dourado Premium */
            --danger: #ff6b6b;
            --warning: #f1c40f; 
            --text-color: #ffffff;
            --text-muted: #a1a1aa;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f0c0a;
            color: var(--text-color);
            margin: 0;
            overflow-x: hidden;
        }

        /* Gradientes de Texto */
        .gradient-text { 
            background: linear-gradient(to right, #d4af37, #fcd34d); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
        }

        /* Container do Quiz */
        #quiz-wrapper {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .question-card {
            display: none;
            animation: fadeIn 0.4s ease;
            background: #191612;
            padding: 40px 30px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            border: 1px solid #27272a;
        }
        .question-card.active { display: block; }
        
        .dimensao-tag {
            display: inline-block;
            background: rgba(212, 175, 55, 0.1);
            color: var(--secondary);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 10px;
            border: 1px solid rgba(212, 175, 55, 0.2);
        }

        /* --- ESTRUTURA DOS BULLETS (ESCALA) --- */
        .scale-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-top: 25px;
            padding: 20px;
            box-sizing: border-box;
            background: linear-gradient(90deg, rgba(255,107,107,0.05) 0%, rgba(89,186,125,0.05) 100%);
            border-radius: 12px;
            border: 1px solid #27272a;
            transition: transform 0.2s ease; 
        }

        .scale-labels-row {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 16px;
        }

        .scale-label {
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .label-left { color: var(--danger); text-align: left; }
        .label-right { color: var(--primary); text-align: right; }

        .bullets-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            position: relative;
        }
        
        .bullets-wrapper::before {
            content: '';
            position: absolute;
            top: 50%; left: 10px; right: 10px; height: 2px;
            background: #333; z-index: 0; transform: translateY(-50%);
        }

        .bullet-btn {
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            background-color: #231f1a;
            border: 2px solid #444;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent; 
        }

        @media (hover: hover) and (pointer: fine) {
            .bullet-btn:hover { transform: scale(1.15); }
            .btn-disagree:hover { background-color: var(--danger); border-color: var(--danger); box-shadow: 0 0 15px rgba(255, 107, 107, 0.4); }
            .btn-agree:hover { background-color: var(--primary); border-color: var(--primary); box-shadow: 0 0 15px rgba(89, 186, 125, 0.4); }
        }

        .btn-disagree.selected { background-color: var(--danger); border-color: var(--danger); box-shadow: 0 0 15px rgba(255, 107, 107, 0.4); transform: scale(1.15); }
        .btn-agree.selected { background-color: var(--primary); border-color: var(--primary); box-shadow: 0 0 15px rgba(89, 186, 125, 0.4); transform: scale(1.15); }

        .size-lg { width: 44px; height: 44px; }
        .size-md { width: 34px; height: 34px; }
        .size-sm { width: 26px; height: 26px; }

        @media (max-width: 400px) {
            .scale-container { padding: 15px; }
            .size-lg { width: 38px; height: 38px; }
            .size-md { width: 30px; height: 30px; }
            .size-sm { width: 24px; height: 24px; }
        }

        .nav-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
        .btn-nav { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; padding: 10px 0; transition: color 0.3s; }
        .btn-nav:hover { color: #fff; }

        .progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: #191612; z-index: 100; }
        .progress-bar { height: 100%; background: var(--secondary); width: 0%; transition: width 0.3s; box-shadow: 0 0 10px var(--secondary); }

        #chart-container { background: #191612; padding: 20px; border-radius: 15px; border: 1px solid #27272a; margin-top: 30px; }
        #hiddenCanvasContainer { position: absolute; left: -9999px; top: -9999px; }

        /* Loader Nativo */
        .loader { border: 3px solid #333; border-top: 3px solid var(--secondary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 30px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .hidden { display: none !important; }

        /* Estilo do Visor de Curiosidade */
        .curiosity-visor {
            min-height: 20px;
            font-size: 0.75rem;
            color: #d4af37;
            font-weight: 800;
            text-align: center;
            margin-bottom: 25px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.8;
            animation: pulseCuriosity 3s infinite;
        }
        @keyframes pulseCuriosity {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }