:root{--color-bg: #ffffff;--color-bg-secondary: #f7f8fa;--color-text: #1a1a2e;--color-text-secondary: #555566;--color-text-hint: #999;--color-primary: #667eea;--color-primary-dark: #764ba2;--color-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--color-gradient-90: linear-gradient(90deg, #667eea 0%, #764ba2 100%);--color-success: #4CAF50;--color-success-light: #8BC34A;--color-danger: #f44336;--color-warning: #ffc107;--color-border: rgba(128, 128, 128, .2);--color-card-bg: rgba(102, 126, 234, .05);--color-card-border: rgba(102, 126, 234, .15);--max-width: 600px;--padding-page: 20px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);color:var(--color-text);background:var(--color-bg);line-height:1.5;-webkit-font-smoothing:antialiased}.app-container{min-height:100vh;max-width:var(--max-width);margin:0 auto;padding:var(--padding-page);display:flex;flex-direction:column;gap:20px}.progress-bar-container{width:100%;position:sticky;top:0;z-index:10;background:var(--color-bg);padding:12px 0 8px}.progress-bar{width:100%;height:4px;background:var(--color-border);border-radius:10px;overflow:hidden;margin-bottom:6px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-success) 0%,var(--color-success-light) 100%);transition:width .3s ease-in-out;border-radius:10px}.progress-text{text-align:center;font-size:12px;color:var(--color-text-hint);font-weight:400}.card{background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--radius-md);padding:20px;width:100%}.card-elevated{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:0 4px 20px #00000014;overflow:hidden}.card-gradient{padding:32px 24px;text-align:center;color:#fff;background:var(--color-gradient)}.title-lg{font-size:24px;font-weight:700;line-height:1.3;margin-bottom:8px}.title-md{font-size:18px;font-weight:600;line-height:1.4;margin-bottom:12px}.title-sm{font-size:16px;font-weight:600;line-height:1.4}.subtitle{font-size:14px;color:var(--color-text-secondary);line-height:1.5}.text-body{font-size:15px;line-height:1.6;color:var(--color-text)}.text-hint{font-size:13px;color:var(--color-text-hint);font-style:italic;line-height:1.4}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:100%}.btn-primary{background:var(--color-gradient-90);color:#fff;box-shadow:0 4px 12px #667eea4d}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{background:#8080804d;color:#80808099;cursor:not-allowed;box-shadow:none}.btn-secondary{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{opacity:.8}.btn-outline{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-outline:hover{background:#667eea0d}.nav-buttons{display:flex;gap:12px;width:100%;margin-top:8px}.nav-buttons .btn-back{flex:0 0 auto;min-width:80px;max-width:30%;padding:12px 16px;font-size:15px}.nav-buttons .btn-next{flex:1}.option-item{background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:all .2s ease;display:flex;align-items:flex-start;gap:12px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.option-item:hover{background:#667eea14;border-color:var(--color-primary)}.option-item:before{content:"";width:20px;height:20px;min-width:20px;border:2px solid rgba(128,128,128,.4);border-radius:50%;background:transparent;transition:all .2s ease;margin-top:2px}.option-item.selected{background:#667eea1f;border-color:var(--color-primary)}.option-item.selected:before{border-color:var(--color-primary);background:var(--color-primary);box-shadow:inset 0 0 0 4px #fff}.option-item .option-text{font-size:15px;line-height:1.5;color:var(--color-text)}.option-item.selected .option-text{font-weight:500}.options-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.option-block{background:var(--color-card-bg);border:1px solid var(--color-card-border);padding:16px;border-radius:var(--radius-sm)}.option-block-text{margin-bottom:12px;line-height:1.5;font-size:14px;color:var(--color-text)}.option-block-buttons{display:flex;gap:10px}.select-btn{flex:1;padding:10px 8px;border:1px solid var(--color-border);background:#8080800d;color:var(--color-text);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;font-size:14px;text-align:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.select-btn:hover{background:#667eea1a}.select-btn.selected-most{background:#4caf5040;border-color:var(--color-success);font-weight:600}.select-btn.selected-least{background:#f4433633;border-color:var(--color-danger);font-weight:600}.binary-choice{display:flex;flex-direction:column;gap:16px}.binary-option{background:var(--color-card-bg);border:2px solid var(--color-card-border);border-radius:var(--radius-md);padding:20px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.binary-option:hover{border-color:var(--color-primary)}.binary-option.selected{border-color:var(--color-primary);background:#667eea1a;box-shadow:0 0 0 1px var(--color-primary)}.binary-option .option-text{font-size:15px;line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-fade{animation:fadeIn .4s ease-out}.animate-bounce{animation:bounce .6s ease-in-out}@media(max-width:480px){:root{--padding-page: 16px}.title-lg{font-size:20px}.title-md{font-size:16px}.card{padding:16px}.btn{padding:12px 20px;font-size:15px}.select-btn{font-size:13px;padding:8px 6px}.option-item{padding:12px 14px}.option-item .option-text{font-size:14px}}@media(max-width:360px){.select-btn{font-size:11px;padding:6px 4px}.option-block-buttons{gap:6px}}