*,*: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);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background:var(--color-bg);background-image:var(--color-bg-gradient);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 20%,rgba(201,168,76,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(201,168,76,.02) 0%,transparent 50%);pointer-events:none;z-index:0}.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--space-6);padding-bottom:env(safe-area-inset-bottom,var(--space-6))}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:50vh}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:var(--container-max);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fadeInUp var(--transition-slow) both}.card--glass{background:var(--color-surface-glass);border-color:var(--color-border-strong)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.quiz-badge{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-light));color:var(--color-text-on-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-6);box-shadow:var(--shadow-glow);letter-spacing:-1px}.quiz-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);text-align:center;margin-bottom:var(--space-2);letter-spacing:-.02em}.quiz-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;margin-bottom:var(--space-8)}.form-group{margin-bottom:var(--space-6)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.form-input{display:block;width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);min-height:var(--touch-target)}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.form-input::placeholder{color:var(--color-text-muted)}.form-hint{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.form-error{font-size:var(--font-size-sm);color:var(--color-error);margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-error-bg);border-radius:var(--radius-sm);animation:fadeInUp var(--transition-fast) both}.input-wrapper{position:relative}.password-toggle{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-1);font-size:var(--font-size-lg);min-width:var(--touch-target);min-height:var(--touch-target);display:flex;align-items:center;justify-content:center}.password-toggle:hover{color:var(--color-text)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-target);padding:var(--space-3) var(--space-6);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{width:100%;background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));color:var(--color-text-on-primary);box-shadow:var(--shadow-sm),0 0 0 0 var(--color-primary-glow)}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-1px)}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.btn--secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-strong)}.btn--secondary:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-primary)}.options-list{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;margin-bottom:var(--space-6)}.option-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:var(--touch-target);font-size:var(--font-size-base);text-align:left;width:100%}.option-card:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.option-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.option-card[aria-checked=true],.option-card.selected{border-color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 1px var(--color-primary),var(--shadow-sm)}.option-letter{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-surface);border:1.5px solid var(--color-border-strong);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-shrink:0;transition:all var(--transition-fast);text-transform:uppercase}.option-card.selected .option-letter{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}.option-text{flex:1}.progress-bar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}.progress-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);white-space:nowrap}.progress-track{flex:1;height:4px;background:var(--color-surface);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary-light));border-radius:var(--radius-full);transition:width var(--transition-normal)}.status-icon{font-size:var(--font-size-3xl);text-align:center;margin-bottom:var(--space-4)}.status-text{text-align:center;font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text);margin-bottom:var(--space-2)}.status-detail{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-primary);animation:pulse 1.5s ease-in-out infinite;margin-right:var(--space-2);vertical-align:middle}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.connection-status{position:fixed;bottom:var(--space-4);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:var(--color-text-secondary);z-index:100;box-shadow:var(--shadow-md);transition:opacity var(--transition-normal)}.connection-status[hidden]{display:none}.connection-dot{width:6px;height:6px;border-radius:50%;background:var(--color-success)}.connection-dot.disconnected{background:var(--color-error);animation:pulse 1s ease-in-out infinite}.finish-decoration{font-size:3rem;text-align:center;margin-bottom:var(--space-4);line-height:1.2}.finish-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--space-4);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.finish-message{text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:1.7}.timer{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.timer-value{font-family:var(--font-family-mono);font-weight:var(--font-weight-bold);color:var(--color-text);font-size:var(--font-size-lg)}.timer-value.urgent{color:var(--color-error);animation:pulse .5s ease-in-out infinite}.explanation-box{margin-top:var(--space-4);padding:var(--space-4);background:var(--color-info-bg);border:1px solid rgba(85,136,224,.2);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);line-height:1.6}.explanation-box:before{content:"💡 "}.privacy-notice{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--font-size-xs);color:var(--color-text-muted);text-align:center;line-height:1.6}.text-center{text-align:center}@keyframes confettiFall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;z-index:200;pointer-events:none;animation:confettiFall 3s ease-in forwards}