*{margin: 0; padding: 0; box-sizing: border-box}:root{--primary-color: #4a90e2; --secondary-color: #50c878; --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --dark-color: #333; --light-color: #f8f9fa; --gray-color: #6c757d; --border-color: #dee2e6; --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15); --border-radius: 8px; --border-radius-lg: 12px}body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--dark-color); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px 0}.container{max-width: 800px; margin: 0 auto; padding: 0 20px}.header{text-align: center; margin-bottom: 40px; color: white}.title{font-size: 2.5rem; font-weight: bold; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)}.subtitle{font-size: 1.2rem; opacity: 0.9}.progress-container{display: flex; align-items: center; gap: 15px; margin-top: 20px}.progress-bar{flex: 1; height: 8px; background: rgba(255, 255, 255, 0.3); border-radius: 4px; overflow: hidden}.progress-fill{height: 100%; background: var(--success-color); transition: width 0.3s ease; border-radius: 4px}.progress-text{font-size: 0.9rem; color: white; min-width: 60px}.card{background: white; border-radius: var(--border-radius-lg); padding: 30px; margin-bottom: 20px; box-shadow: var(--shadow)}.intro-card{background: white; border-radius: var(--border-radius-lg); padding: 30px; margin-bottom: 30px; box-shadow: var(--shadow-lg)}.intro-card h2{color: var(--primary-color); margin-bottom: 15px; font-size: 1.5rem}.intro-card p{color: var(--gray-color); line-height: 1.8}.types-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px}.type-card{background: white; border-radius: var(--border-radius); padding: 25px; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer}.type-card:hover{transform: translateY(-5px); box-shadow: var(--shadow-lg)}.type-icon{font-size: 3rem; margin-bottom: 15px}.type-card h3{color: var(--primary-color); margin-bottom: 10px; font-size: 1.1rem}.type-card p{color: var(--gray-color); font-size: 0.9rem}.info-section{background: white; border-radius: var(--border-radius-lg); padding: 30px; margin-bottom: 30px; box-shadow: var(--shadow)}.info-section h2{color: var(--primary-color); margin-bottom: 20px; font-size: 1.5rem}.info-list{list-style: none; padding: 0}.info-list li{padding: 12px 0; padding-left: 30px; position: relative; color: var(--gray-color); border-bottom: 1px solid var(--border-color)}.info-list li:last-child{border-bottom: none}.info-list li:before{content: "✓"; position: absolute; left: 0; color: var(--success-color); font-weight: bold}.action-section{text-align: center; margin: 40px 0}.btn{padding: 15px 40px; font-size: 1.1rem; font-weight: bold; border: none; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; display: inline-block; text-decoration: none}.btn-primary{background: var(--primary-color); color: white}.btn-primary:hover{background: #357abd; transform: translateY(-2px); box-shadow: var(--shadow-lg)}.btn-secondary{background: var(--gray-color); color: white}.btn-secondary:hover{background: #5a6268; transform: translateY(-2px); box-shadow: var(--shadow-lg)}.btn-success{background: var(--success-color); color: white}.btn-success:hover{background: #218838; transform: translateY(-2px); box-shadow: var(--shadow-lg)}.btn-outline{background: transparent; color: white; border: 2px solid white}.btn-outline:hover{background: white; color: var(--primary-color)}.btn-large{padding: 20px 60px; font-size: 1.3rem}.loading-section{text-align: center; padding: 60px 20px; color: white}.spinner{border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid white; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 20px}@keyframes spin{0%{transform: rotate(0deg)}100%{transform: rotate(360deg)}} .test-section{background: white; border-radius: var(--border-radius-lg); padding: 30px; box-shadow: var(--shadow-lg)}.question-card{text-align: center; margin-bottom: 30px}.question-number{color: var(--primary-color); font-weight: bold; margin-bottom: 10px; font-size: 1.1rem}.question-category{color: var(--gray-color); font-size: 0.9rem; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px}.question-text{font-size: 1.4rem; color: var(--dark-color); line-height: 1.6; font-weight: 500}.options-container{display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px}.option-btn{display: flex; align-items: center; gap: 15px; padding: 18px 25px; background: var(--light-color); border: 2px solid var(--border-color); border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; text-align: left; width: 100%}.option-btn:hover{border-color: var(--primary-color); background: #e7f3ff; transform: translateX(5px)}.option-btn.selected{border-color: var(--primary-color); background: #e7f3ff; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2)}.option-label{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-color); color: white; border-radius: 50%; font-weight: bold; font-size: 1.1rem; flex-shrink: 0}.option-text{font-size: 1.1rem; color: var(--dark-color)}.navigation-buttons{display: flex; justify-content: space-between; gap: 15px}.navigation-buttons .btn{flex: 1}.result-section{animation: fadeIn 0.5s ease}@keyframes fadeIn{from{opacity: 0; transform: translateY(20px)}to{opacity: 1; transform: translateY(0)}} .primary-intelligence-card{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: var(--border-radius-lg); padding: 40px; margin-bottom: 30px; box-shadow: var(--shadow-lg); text-align: center}.primary-intelligence-card h2{margin-bottom: 25px; font-size: 1.5rem}.primary-intelligence-content{display: flex; flex-direction: column; align-items: center; gap: 20px}.intelligence-icon{font-size: 5rem}.intelligence-info h3{font-size: 2rem; margin-bottom: 15px}.intelligence-info p{font-size: 1.1rem; line-height: 1.8; opacity: 0.95}.scores-overview{background: white; border-radius: var(--border-radius-lg); padding: 30px; margin-bottom: 30px; box-shadow: var(--shadow)}.scores-overview h2{color: var(--primary-color); margin-bottom: 20px; font-size: 1.5rem}.scores-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px}.score-item{background: var(--light-color); border-radius: var(--border-radius); padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: transform 0.3s ease}.score-item:hover{transform: scale(1.02)}.score-name{font-weight: bold; color: var(--dark-color)}.score-value{font-size: 1.5rem; font-weight: bold; color: var(--primary-color)}.recommendations-section{background: white; border-radius: var(--border-radius-lg); padding: 30px; margin-bottom: 30px; box-shadow: var(--shadow)}.recommendations-section h2{color: var(--primary-color); margin-bottom: 25px; font-size: 1.5rem}.recommendation-card{background: var(--light-color); border-radius: var(--border-radius); padding: 25px; margin-bottom: 20px; border-left: 4px solid var(--primary-color)}.recommendation-card:last-child{margin-bottom: 0}.recommendation-header{display: flex; align-items: center; gap: 15px; margin-bottom: 15px}.recommendation-rank{background: var(--primary-color); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem}.recommendation-title{font-size: 1.3rem; font-weight: bold; color: var(--dark-color)}.recommendation-score{margin-left: auto; color: var(--success-color); font-weight: bold; font-size: 1.2rem}.recommendation-description{color: var(--gray-color); line-height: 1.8; margin-bottom: 20px}.recommendation-section-title{font-weight: bold; color: var(--dark-color); margin-bottom: 10px; margin-top: 15px}.recommendation-list{list-style: none; padding: 0}.recommendation-list li{padding: 8px 0; padding-left: 25px; position: relative; color: var(--gray-color)}.recommendation-list li:before{content: "•"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold}.success-case{background: #fff3cd; border-left: 4px solid var(--warning-color); padding: 15px; margin-top: 20px; border-radius: var(--border-radius)}.success-case strong{color: var(--dark-color)}.action-buttons{display: flex; gap: 15px; justify-content: center; flex-wrap: wrap}.action-buttons .btn{flex: 1; min-width: 150px}.footer{text-align: center; margin-top: 40px; color: white; opacity: 0.9; font-size: 0.9rem}@media (max-width: 768px){.title{font-size: 2rem}.subtitle{font-size: 1rem}.types-grid{grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px}.type-card{padding: 20px}.type-icon{font-size: 2.5rem}.type-card h3{font-size: 1rem}.question-text{font-size: 1.2rem}.option-btn{padding: 15px 20px}.option-text{font-size: 1rem}.navigation-buttons{flex-direction: column}.scores-grid{grid-template-columns: 1fr}.action-buttons{flex-direction: column}.primary-intelligence-content{text-align: center}} @media (max-width: 480px){.container{padding: 0 15px}.title{font-size: 1.8rem}.card{padding: 20px}.intro-card, .info-section, .test-section, .scores-overview, .recommendations-section{padding: 20px}.type-card{padding: 15px}.type-icon{font-size: 2rem}.question-text{font-size: 1.1rem}.option-btn{padding: 12px 15px}.option-label{width: 35px; height: 35px; font-size: 1rem}.option-text{font-size: 0.95rem}}