.quiz-container{max-width:700px;margin:0 auto}.breadcrumb{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);font-size:var(--font-size-sm);color:var(--color-text-light)}.breadcrumb a{color:var(--color-primary);transition:color var(--transition-fast)}.breadcrumb a:hover{color:var(--color-primary-dark)}.quiz-header{text-align:center;margin-bottom:var(--space-2xl)}.quiz-header h1{color:var(--color-primary);font-size:var(--font-size-3xl);margin-bottom:var(--space-md)}.quiz-intro{color:var(--color-text-light);font-size:var(--font-size-lg);line-height:1.6}.progress-container{background-color:var(--color-secondary);border-radius:var(--radius-full);height:12px;margin-bottom:var(--space-sm);overflow:hidden;position:relative}.progress-bar{background:linear-gradient(90deg,var(--color-primary),var(--color-primary-dark));height:100%;width:0%;transition:width var(--transition-base);border-radius:var(--radius-full)}.progress-text{display:block;text-align:center;font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--space-xl)}.question-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-3xl);box-shadow:0 4px 24px #00000014}.question-number{color:var(--color-primary);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:2px;margin-bottom:var(--space-sm);font-weight:600}.question-text{font-size:var(--font-size-2xl);color:var(--color-text);margin-bottom:var(--space-2xl);line-height:1.4;font-weight:600}.options-container{display:flex;flex-direction:column;gap:var(--space-sm)}.option-btn{width:100%;padding:var(--space-lg) var(--space-xl);background-color:var(--color-white);border:2px solid #e5e7eb;border-radius:var(--radius-lg);font-size:var(--font-size-base);color:var(--color-text);cursor:pointer;transition:all .2s ease;text-align:left;line-height:1.5;position:relative;display:flex;align-items:center;gap:var(--space-md)}.option-btn:before{content:"";width:22px;height:22px;min-width:22px;border:2px solid #d1d5db;border-radius:50%;transition:all .2s ease;background-color:var(--color-white)}.option-btn:hover{border-color:var(--color-primary);background-color:#fff8f5;transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.option-btn:hover:before{border-color:var(--color-primary)}.option-btn.selected{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white);transform:translateY(-2px);box-shadow:0 4px 16px #e877444d}.option-btn.selected:before{border-color:var(--color-white);background-color:var(--color-white);box-shadow:inset 0 0 0 5px var(--color-primary)}.results-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-3xl);box-shadow:var(--shadow-lg);text-align:center}.results-emoji{font-size:5rem;margin-bottom:var(--space-lg)}.results-title{font-size:var(--font-size-3xl);margin-bottom:var(--space-xl)}.score-display{margin-bottom:var(--space-xl)}.score-circle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;border:4px solid;background-color:var(--color-secondary-light)}.score-number{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-text)}.score-max{font-size:var(--font-size-sm);color:var(--color-text-light)}.results-description{font-size:var(--font-size-lg);color:var(--color-text);line-height:1.7;margin-bottom:var(--space-2xl);max-width:500px;margin-left:auto;margin-right:auto}.results-tips{background-color:var(--color-secondary-light);border-radius:var(--radius-md);padding:var(--space-xl);margin-bottom:var(--space-2xl);text-align:left}.results-tips h3{color:var(--color-accent);margin-bottom:var(--space-md)}.results-tips ul{list-style:none;padding:0}.results-tips li{padding:var(--space-sm) 0;padding-left:var(--space-lg);position:relative;color:var(--color-text);line-height:1.6}.results-tips li:before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700}.results-actions{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-xl)}.share-section{padding-top:var(--space-xl);border-top:1px solid var(--color-secondary)}.share-section p{color:var(--color-text-light);margin-bottom:var(--space-md);font-size:var(--font-size-sm)}.share-buttons{display:flex;justify-content:center;gap:var(--space-md)}.share-btn{padding:var(--space-sm) var(--space-lg);background-color:var(--color-secondary);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--transition-fast)}.share-btn:hover{background-color:var(--color-secondary-dark)}.community-stats{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-secondary);text-align:left}.community-stats h3{text-align:center;color:var(--color-accent);margin-bottom:var(--space-xs)}.stats-subtitle{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--space-lg)}.stats-chart{display:flex;flex-direction:column;gap:var(--space-sm)}.stat-row{display:grid;grid-template-columns:130px 1fr 45px;align-items:center;gap:var(--space-sm)}.stat-row.user-result .stat-label{font-weight:600;color:var(--color-primary)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text)}.stat-bar-container{height:20px;background-color:var(--color-secondary);border-radius:var(--radius-sm);overflow:hidden}.stat-bar{height:100%;border-radius:var(--radius-sm);transition:width .5s ease-out}.stat-percent{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);text-align:right}@media(max-width:768px){.quiz-header h1{font-size:var(--font-size-2xl)}.question-card{padding:var(--space-xl);border-radius:var(--radius-lg)}.question-text{font-size:var(--font-size-xl);margin-bottom:var(--space-xl)}.option-btn{padding:var(--space-md) var(--space-lg);font-size:var(--font-size-sm)}.option-btn:before{width:18px;height:18px;min-width:18px}.results-card{padding:var(--space-xl)}.results-emoji{font-size:4rem}.results-title{font-size:var(--font-size-2xl)}.stat-row{grid-template-columns:110px 1fr 40px}.stat-label{font-size:var(--font-size-xs)}.stat-bar-container{height:16px}}
