:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;--bg-page: #F8F9FA;--surface: #FFFFFF;--surface-alt: #F8FAFC;--surface-hover: #F1F5F9;--accent: #F07A5A;--accent-hover: #EA580C;--accent-subtle: #FFF4F0;--accent-border: #FED7AA;--accent-ring: rgba(240, 122, 90, .22);--text-main: #0F172A;--text-body: #334155;--text-muted: #64748B;--text-light: #94A3B8;--border-subtle: #E2E8F0;--border-focus: #CBD5E1;--success: #10B981;--success-bg: #ECFDF5;--success-border: #A7F3D0;--success-text: #065F46;--success-badge: #DCFCE7;--success-badge-t:#15803D;--error: #EF4444;--error-bg: #FEF2F2;--error-border: #FECACA;--error-text: #991B1B;--error-badge: #FEE2E2;--error-badge-t: #B91C1C;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -4px rgba(0, 0, 0, .05);--shadow-glow: 0 4px 14px rgba(240, 122, 90, .3);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;color-scheme:light}body{background-color:var(--bg-page);background-image:radial-gradient(at 0% 0%,rgba(254,215,170,.2) 0px,transparent 55%),radial-gradient(at 100% 100%,rgba(254,202,202,.18) 0px,transparent 55%);background-attachment:fixed;color:var(--text-main);min-height:100vh;min-height:100dvh;padding:2.5rem 1rem max(3.5rem,env(safe-area-inset-bottom));line-height:1.5}@media (min-width: 640px){body{padding:3.5rem 1.5rem max(4.5rem,env(safe-area-inset-bottom))}}.app-container{width:100%;max-width:540px;margin:0 auto}.app-header{text-align:center;margin-bottom:2rem;padding:0 .5rem}.app-brand{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.5rem}.app-logo{font-size:1.75rem;line-height:1;background:linear-gradient(135deg,#ffedd5,#fee2e2);padding:8px 12px;border-radius:var(--radius-lg);border:1px solid #FFEDD5;box-shadow:0 2px 8px #f07a5a26;display:inline-flex;align-items:center;justify-content:center}.app-title{font-size:1.85rem;font-weight:800;letter-spacing:-.025em;color:var(--text-main);line-height:1.2}.app-subtitle{font-size:.95rem;color:var(--text-muted);max-width:380px;margin:.25rem auto 0;line-height:1.45;font-weight:500}.card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-md);margin-bottom:1.25rem;transition:box-shadow .2s ease,border-color .2s ease}@media (min-width: 640px){.card{padding:1.75rem}}.form-group{margin-bottom:1.25rem}.form-group:last-of-type{margin-bottom:1.5rem}.field-label{display:block;font-size:.8rem;font-weight:700;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem}.field-input{width:100%;height:50px;padding:0 1rem;border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);font-size:1rem;color:var(--text-main);background:var(--surface-alt);outline:none;transition:all .2s ease}.field-input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3.5px var(--accent-ring)}.field-input::placeholder{color:var(--text-light)}.chips-container{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}.chip{padding:.35rem .75rem;border-radius:var(--radius-full);background:var(--surface-alt);border:1px solid var(--border-subtle);font-size:.8rem;font-weight:600;color:var(--text-body);cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}.chip:hover{background:var(--surface-hover);color:var(--text-main);border-color:var(--border-focus)}.chip:active{transform:scale(.96)}.pill-group{display:flex;background:var(--surface-hover);border-radius:var(--radius-md);padding:4px;gap:4px}.pill-btn{flex:1;height:40px;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;background:transparent;color:var(--text-muted);transition:all .18s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center}.pill-btn:active{transform:scale(.98)}.pill-btn.active{background:var(--surface);color:var(--accent-hover);font-weight:700;box-shadow:var(--shadow-sm)}.pill-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stepper{display:flex;align-items:center;gap:.75rem}.stepper-btn{width:44px;height:44px;min-width:44px;border-radius:var(--radius-md);border:1.5px solid var(--border-subtle);background:var(--surface);font-size:1.25rem;font-weight:600;color:var(--text-main);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-user-select:none;user-select:none}.stepper-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}.stepper-btn:active:not(:disabled){transform:scale(.94)}.stepper-btn:disabled{opacity:.35;cursor:not-allowed}.stepper-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stepper-val{font-size:1.25rem;font-weight:800;min-width:2.25rem;text-align:center;color:var(--text-main);font-variant-numeric:tabular-nums}.stepper-caption{font-size:.85rem;color:var(--text-muted);font-weight:500;margin-left:.25rem}.error-banner{background:var(--error-bg);border:1.5px solid var(--error-border);border-radius:var(--radius-md);padding:.85rem 1rem;color:var(--error-text);font-size:.9rem;font-weight:600;line-height:1.45;display:flex;align-items:center;gap:.6rem;margin-bottom:1.25rem}.btn-generate,.btn-confirm{width:100%;height:52px;padding:0 1.25rem;background:linear-gradient(135deg,#f07a5a,#ea580c);color:#fff;border:none;border-radius:var(--radius-lg);font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-glow);letter-spacing:.01em}.btn-generate:hover:not(:disabled),.btn-confirm:hover:not(:disabled){background:linear-gradient(135deg,#ea580c,#c2410c);box-shadow:0 6px 18px #f07a5a73;transform:translateY(-1px)}.btn-generate:active:not(:disabled),.btn-confirm:active:not(:disabled){transform:translateY(0) scale(.98)}.btn-generate:disabled,.btn-confirm:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.btn-generate:focus-visible,.btn-confirm:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.btn-reset{width:100%;height:48px;padding:0 1.25rem;background:var(--surface);border:1.5px solid var(--border-subtle);border-radius:var(--radius-lg);font-size:.95rem;font-weight:700;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn-reset:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}.btn-reset:active{transform:scale(.98)}.btn-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.progress-card{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:.875rem;font-weight:600;color:var(--text-muted);margin-bottom:1rem;box-shadow:var(--shadow-sm)}.progress-highlight{font-weight:700;color:var(--accent);margin-left:.25rem}.progress-highlight.done{color:var(--success)}.question-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.1rem}.question-badge{background:var(--accent-subtle);color:var(--accent-hover);font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:var(--radius-full);white-space:nowrap;margin-top:2px;border:1px solid var(--accent-border);letter-spacing:.02em;flex-shrink:0}.question-title{font-size:1.05rem;font-weight:700;line-height:1.45;color:var(--text-main);margin:0}.options-container{display:flex;flex-direction:column;gap:.55rem}.option{display:flex;align-items:center;gap:.75rem;min-height:50px;padding:.75rem 1rem;border-radius:var(--radius-md);border:1.5px solid var(--border-subtle);background:var(--surface-alt);font-size:.95rem;font-weight:500;color:var(--text-main);cursor:pointer;transition:all .16s cubic-bezier(.16,1,.3,1);-webkit-user-select:none;user-select:none}.option:hover:not(.locked){border-color:var(--border-focus);background:var(--surface-hover)}.option:active:not(.locked){transform:scale(.99)}.option.selected{border-color:var(--accent);background:var(--accent-subtle);color:var(--text-main);box-shadow:0 0 0 1.5px var(--accent)}.option.selected .option-badge{background:var(--accent);color:#fff;border-color:var(--accent)}.option.correct{border-color:var(--success)!important;background:var(--success-bg)!important;color:var(--success-text)!important;font-weight:600;box-shadow:0 0 0 1.5px var(--success)}.option.correct .option-badge{background:var(--success)!important;color:#fff!important;border-color:var(--success)!important}.option.incorrect{border-color:var(--error)!important;background:var(--error-bg)!important;color:var(--error-text)!important;font-weight:600;box-shadow:0 0 0 1.5px var(--error)}.option.incorrect .option-badge{background:var(--error)!important;color:#fff!important;border-color:var(--error)!important}.option.locked{cursor:default}.option-badge{width:28px;height:28px;min-width:28px;border-radius:50%;background:var(--border-subtle);color:var(--text-muted);font-size:.775rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s ease;border:1px solid transparent}.option-label{flex:1;word-break:break-word;line-height:1.4}.status-tag{font-size:.75rem;font-weight:800;padding:2px 8px;border-radius:var(--radius-full);margin-left:.5rem;white-space:nowrap}.status-tag.correct{background:var(--success-badge);color:var(--success-badge-t)}.status-tag.incorrect{background:var(--error-badge);color:var(--error-badge-t)}.explanation-card{display:flex;align-items:flex-start;gap:.65rem;padding:.9rem 1rem;background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-top:1rem}.explanation-icon{font-size:1.1rem;line-height:1;margin-top:1px}.explanation-heading{font-size:.75rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}.explanation-body{font-size:.885rem;color:var(--text-body);line-height:1.55}.score-card{background:linear-gradient(135deg,#fff7f5,#f0fdf4);border:1.5px solid var(--accent-border);border-radius:var(--radius-xl);padding:1.6rem 1.25rem;text-align:center;margin-bottom:1.25rem;box-shadow:0 4px 20px -2px #f07a5a1f}.score-title-wrap{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}.score-number{font-size:2.25rem;font-weight:900;color:var(--text-main);letter-spacing:-.02em;margin-bottom:.35rem;font-variant-numeric:tabular-nums}.score-percent{font-size:1.35rem;font-weight:700;color:var(--text-muted);margin-left:.35rem}.score-feedback{font-size:.925rem;color:var(--text-muted);max-width:360px;margin:0 auto;line-height:1.45}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.skeleton{animation:pulse 1.4s ease-in-out infinite}.skeleton-line{background:var(--border-subtle);border-radius:var(--radius-sm);margin-bottom:.5rem}.skeleton-line:last-child{margin-bottom:0}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;flex-shrink:0}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both}