.quiz-container{max-width:1000px;margin:0 auto}.quiz-step{display:none;animation:fadeIn 0.3s ease}.quiz-step.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.quiz-question{text-align:center;margin-bottom:30px}.quiz-question h2{font-size:1.8em;color:#121212;margin-bottom:10px}.quiz-question p{color:#666055}.quiz-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:30px}.quiz-option{padding:20px;border:2px solid #e6dccb;border-radius:15px;cursor:pointer;text-align:center;transition:all 0.3s;background:#fff}.quiz-option:hover{border-color:#a97d1f;transform:translateY(-3px);box-shadow:0 5px 20px rgb(199 155 56 / .2)}.quiz-option.selected{border-color:#a97d1f;background:#0d0c0a;color:#fff}.quiz-option .option-icon{font-size:2em;margin-bottom:10px}.quiz-option .option-color{width:60px;height:60px;border-radius:50%;margin:0 auto 10px;border:3px solid #fff;box-shadow:0 2px 10px rgb(0 0 0 / .2)}.quiz-option .option-name{font-weight:600;font-size:1em}.quiz-option .option-desc{font-size:.8em;color:#666055;margin-top:5px}.quiz-option.selected .option-desc{color:rgb(255 255 255 / .9)}.quiz-option .option-count{font-size:.8em;color:#888;margin-top:5px}.quiz-option.selected .option-count{color:rgb(255 255 255 / .8)}.quiz-progress{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.progress-dot{width:12px;height:12px;border-radius:50%;background:#e6dccb;transition:all 0.3s}.progress-dot.active{background:#0d0c0a;transform:scale(1.2)}.progress-dot.completed{background:#4caf50}.quiz-nav{display:flex;justify-content:center;gap:15px;margin-top:20px}.quiz-nav button{padding:12px 30px;border:none;border-radius:25px;cursor:pointer;font-size:1em;font-weight:600;transition:all 0.3s}.btn-prev{background:#e6dccb;color:#121212}.btn-prev:hover{background:#d0d0d0}.btn-next{background:#0d0c0a;color:#fff}.btn-next:disabled{opacity:.5;cursor:not-allowed}.info-box{background:#fffdf9;padding:20px;border-radius:15px;margin-bottom:25px;border-left:4px solid #c79b38;grid-column:1 / -1;text-align:left;cursor:default}.info-box:hover{transform:none;box-shadow:none;border-color:#a97d1f}.info-box h4{color:#121212;margin:0 0 10px 0;font-size:1.1em}.info-box p{color:#121212;margin:0;line-height:1.5}.explain-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;margin-top:15px;font-size:.9em}.explain-table th,.explain-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e6dccb}.explain-table th{background:#0d0c0a;color:#fff;font-weight:600}.explain-table tr:hover{background:#fffdf9}.step-preview{margin-top:30px}.preview-section{background:#fffdf9;padding:20px;border-radius:15px;margin-top:20px}.preview-section h4{color:#121212;margin:0 0 15px 0}.preview-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;font-size:.9em}.preview-table th,.preview-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e6dccb}.preview-table th{background:#0d0c0a;color:#fff;font-weight:600}.preview-table tr:hover{background:#f0f0f0}.preview-more{text-align:center;color:#666055;margin-top:10px;font-style:italic}.compare-section{background:linear-gradient(135deg,#fff3cd 0%,#ffeaa7 100%);padding:25px;border-radius:15px;margin-bottom:30px;box-shadow:0 2px 10px rgb(0 0 0 / .1)}.compare-section h3{color:#856404;margin:0 0 20px 0}.compare-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}.compare-table th,.compare-table td{padding:12px;text-align:left;border-bottom:1px solid #e6dccb}.compare-table th{background:#0d0c0a;color:#fff}.compare-table tr:hover{background:#fffdf9}.btn-small{padding:5px 12px!important;font-size:0.85em!important}.filters select{padding:10px 15px;border:2px solid #e6dccb;border-radius:10px;font-size:.95em;background:#fff;cursor:pointer;transition:all 0.3s ease;min-width:180px}.filters select:hover{border-color:#a97d1f}.filters select:focus{outline:none;border-color:#a97d1f;box-shadow:0 0 0 3px rgb(199 155 56 / .15)}.filters select option:disabled{color:#bbb!important;background:#f5f5f5;font-style:italic}.filters select option{padding:8px}.tab-btn{padding:14px 28px;border:none;border-radius:12px;cursor:pointer;font-size:1em;font-weight:600;transition:all 0.3s ease;background:linear-gradient(135deg,#e6dccb 0%,#d0d0d0 100%);color:#555;position:relative;overflow:hidden}.tab-btn:hover{background:linear-gradient(135deg,#d0d0d0 0%,#c0c0c0 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .15)}.tab-btn.active{background:#0d0c0a;color:#fff;box-shadow:0 4px 15px rgb(199 155 56 / .4)}.tab-btn.active:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(199 155 56 / .5)}#reset-filters{padding:12px 24px;border:none;border-radius:10px;cursor:pointer;font-size:.95em;font-weight:600;transition:all 0.3s ease;background:#121212;color:#fff;display:inline-flex;align-items:center;gap:6px}#reset-filters:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgb(231 76 60 / .4)}#reset-filters:active{transform:translateY(0)}.btn-prev{background:linear-gradient(135deg,#95a5a6 0%,#7f8c8d 100%)!important;color:white!important;padding:14px 32px!important;border:none!important;border-radius:12px!important;cursor:pointer!important;font-size:1em!important;font-weight:600!important;transition:all 0.3s ease!important;display:inline-flex;align-items:center!important;gap:8px!important}.btn-prev:hover{background:linear-gradient(135deg,#7f8c8d 0%,#6c7a7d 100%)!important;transform:translateY(-2px)!important;box-shadow:0 4px 15px rgb(127 140 141 / .4)!important}.btn-next{background:#0d0c0a!important;color:white!important;padding:14px 32px!important;border:none!important;border-radius:12px!important;cursor:pointer!important;font-size:1em!important;font-weight:600!important;transition:all 0.3s ease!important;display:inline-flex;align-items:center!important;gap:8px!important}.btn-next:hover:not(:disabled){transform:translateY(-2px)!important;box-shadow:0 4px 20px rgb(199 155 56 / .5)!important}.btn-next:disabled{background:linear-gradient(135deg,#bdc3c7 0%,#a1a8ab 100%)!important;opacity:0.7!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}.color-finder button,.color-finder .btn{font-family:inherit;outline:none}.color-finder button:focus,.color-finder .btn:focus{outline:none;box-shadow:0 0 0 3px rgb(199 155 56 / .3)}@media (max-width:768px){.quiz-options{grid-template-columns:repeat(2,1fr)}.explain-table{font-size:.8em}.explain-table th,.explain-table td{padding:8px}.preview-table{font-size:.8em}.compare-table{font-size:.85em}.compare-table th,.compare-table td{padding:8px}.filters select{min-width:100%}.tab-btn{padding:12px 20px;font-size:.9em}#reset-filters{padding:10px 18px;font-size:.9em}.btn-prev,.btn-next{padding:12px 24px!important;font-size:0.95em!important}}@media (max-width:480px){.quiz-options{grid-template-columns:1fr}.tab-btn{padding:10px 16px;font-size:.85em}}#color-finder-app .explain-table th,#color-finder-app .preview-table th,#color-finder-app .compare-table th{background:#0d0c0a!important;color:#fff!important}#color-finder-app .progress-dot.completed{background:#c79b38}#color-finder-app .info-box{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}#color-finder-app .explain-table{min-width:520px}