:root{--color-primary:#6200ee;--color-primary-variant:#3700b3;--color-secondary:#03dac6;--color-secondary-variant:#018786;--color-background:#f5f5f5;--color-surface:#fff;--color-error:#b00020;--color-on-primary:#fff;--color-on-secondary:#000;--color-on-background:#000;--color-on-surface:#000;--color-on-error:#fff;--color-text:#333;--color-subtext:#666;--color-border:#e0e0e0;--spacing-small:8px;--spacing-medium:16px;--spacing-large:24px;--spacing-xlarge:32px;--font-family:"Roboto", sans-serif;--font-size-h1:2rem;--font-size-h2:1.5rem;--font-size-body:1rem;--font-size-button:1rem;--font-weight-bold:bold;--font-weight-normal:normal;--border-radius:8px;--button-bg:var(--color-secondary);--button-color:var(--color-on-secondary);--button-padding:16px 32px;--button-font-size:var(--font-size-button);--button-font-weight:var(--font-weight-bold)}*{box-sizing:border-box}body{font-family:var(--font-family);color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:linear-gradient(#fffc,#fffc),url(/assets/bg-BEW9iMn2.png);background-repeat:repeat;background-size:auto;margin:0;padding:0}.quiz-container{background-color:var(--color-background);color:var(--color-text);min-height:100vh;font-family:var(--font-family);background-image:linear-gradient(#fffc,#fffc),url(/assets/bg-BEW9iMn2.png);background-repeat:repeat;background-size:auto;flex-direction:column;display:flex}.quiz-header{background-color:var(--color-primary);color:var(--color-on-primary);padding:var(--spacing-medium);text-align:center;box-shadow:0 2px 4px #0000001a}.quiz-header h1{font-size:1.5rem;font-weight:var(--font-weight-bold);margin:0}.quiz-header p{opacity:.8;margin:4px 0 0}.quiz-main{padding:var(--spacing-large);flex-direction:column;flex:1;justify-content:center;width:100%;max-width:800px;margin:0 auto;display:flex}.quiz-footer{padding:var(--spacing-medium);text-align:center;color:var(--color-subtext);font-size:.8rem}h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold)}h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold)}p{font-size:var(--font-size-body)}.btn{background-color:var(--button-bg);color:var(--button-color);padding:var(--button-padding);border-radius:var(--border-radius);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-transform:uppercase;cursor:pointer;border:none;width:100%;font-size:1rem;font-weight:700}.btn-start,.btn-next{width:250px}.btn-user-option{max-width:300px}.input-field{width:100%;max-width:300px;padding:var(--spacing-medium);border:2px solid var(--color-border);border-radius:var(--border-radius);font-size:var(--font-size-body);font-family:var(--font-family);color:var(--color-text);background-color:var(--color-surface);transition:border-color .3s}.input-field:focus{border-color:var(--color-primary);outline:none}.input-field.error{border-color:var(--color-error)}.card{background-color:var(--color-surface);border-radius:var(--border-radius);padding:var(--spacing-large);margin:var(--spacing-medium) 0;box-shadow:0 2px 8px #0000001a}.welcome-section{text-align:center}.welcome-section img{border-radius:var(--border-radius);max-width:100%;max-height:300px;margin:0 auto var(--spacing-large) auto}.welcome-section h2{margin-bottom:var(--spacing-medium)}.welcome-section p{margin-bottom:var(--spacing-xlarge)}.result-section{text-align:center}.result-section h2{margin-bottom:var(--spacing-medium)}.result-section p{margin-bottom:var(--spacing-large)}.result-section img{border-radius:var(--border-radius);max-width:100%;max-height:300px;margin:var(--spacing-large) auto}.question-container{text-align:center;flex-direction:column;align-items:center;display:flex}.question-container h2{margin-bottom:var(--spacing-large)}.question-container p{margin-bottom:var(--spacing-medium);color:var(--color-subtext)}.options-container{gap:var(--spacing-medium);margin:var(--spacing-medium) 0;flex-direction:column;display:flex}.input-container{align-items:center;gap:var(--spacing-medium);flex-direction:column;display:flex}.input-container h2{margin-bottom:var(--spacing-small)}.input-container p{color:var(--color-subtext);margin-bottom:var(--spacing-medium)}.gender-options{gap:var(--spacing-medium);margin:var(--spacing-large) 0;display:flex}.gender-options .btn-option{flex:1;max-width:150px}.text-center{text-align:center}.mb-small{margin-bottom:var(--spacing-small)}.mb-medium{margin-bottom:var(--spacing-medium)}.mb-large{margin-bottom:var(--spacing-large)}.mb-xlarge{margin-bottom:var(--spacing-xlarge)}.mt-small{margin-top:var(--spacing-small)}.mt-medium{margin-top:var(--spacing-medium)}.mt-large{margin-top:var(--spacing-large)}.mt-xlarge{margin-top:var(--spacing-xlarge)}.result-action-btn{color:#fff;cursor:pointer;border:none;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1.25rem 1rem;font-size:.9rem;font-weight:600;display:flex}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .3s}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .3s}.error-message{color:var(--color-error);text-align:left;width:100%;max-width:300px;margin-top:4px;font-size:.875rem}