.quiz-header{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:52px;padding:12px 20px;display:flex}.quiz-header-left{align-items:center;gap:12px;display:flex}.back-arrow{color:var(--text-primary);justify-content:center;align-items:center;width:28px;height:28px;font-size:22px;font-weight:700;display:inline-flex}.topic-pill{background:var(--primary-light);color:var(--primary);font-family:var(--font-body);border-radius:20px;padding:4px 14px;font-size:15px;font-weight:500}.counter{align-items:baseline;display:inline-flex}.counter-current{font-family:var(--font-display);color:var(--text-primary);font-size:26px;font-weight:700}.counter-total{font-family:var(--font-body);color:var(--text-secondary);font-size:16px;font-weight:400}.progress-bar{background:var(--border);width:100%;height:6px;overflow:hidden}.progress-bar-fill{background:var(--accent-yellow);height:100%;transition:width .4s}
.sheet-overlay{z-index:100;background:#0009;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--color-surface,#1a1a2e);border:1px solid var(--color-border,#2a2a4a);border-bottom:none;border-radius:12px 12px 0 0;flex-direction:column;gap:1.25rem;width:100%;max-width:480px;max-height:90vh;padding:1.5rem 1.5rem 2rem;animation:.2s ease-out sheet-slide-up;display:flex;position:relative;overflow-y:auto}@keyframes sheet-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-header{justify-content:space-between;align-items:center;display:flex}.sheet-title{color:var(--color-text,#fff);margin:0;font-size:1.05rem;font-weight:600}.sheet-close{cursor:pointer;color:var(--color-text-muted,#888);background:0 0;border:none;border-radius:4px;padding:.25rem;font-size:1rem;line-height:1;transition:color .15s}.sheet-close:hover{color:var(--color-text,#fff)}.sheet-chips{flex-wrap:wrap;gap:.5rem;display:flex}.sheet-chip{background:var(--color-bg,#0f0f1a);border:1px solid var(--color-border,#2a2a4a);color:var(--color-text-muted,#aaa);cursor:pointer;border-radius:999px;padding:.45rem .85rem;font-size:.85rem;transition:border-color .15s,color .15s,background .15s}.sheet-chip:hover{color:var(--color-text,#fff)}.sheet-chip-active{border-color:var(--color-accent,#7c6aff);color:var(--color-text,#fff);background:color-mix(in srgb, var(--color-accent,#7c6aff) 12%, transparent)}.sheet-textarea{background:var(--color-bg,#0f0f1a);border:1px solid var(--color-border,#2a2a4a);color:var(--color-text,#fff);resize:vertical;border-radius:6px;outline:none;min-height:72px;padding:.6rem .75rem;font-family:inherit;font-size:.95rem;transition:border-color .15s}.sheet-textarea:focus{border-color:var(--color-accent,#7c6aff)}.sheet-label{color:var(--color-text-muted,#aaa);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}.sheet-field{flex-direction:column;gap:.5rem;display:flex}.sheet-submit{width:100%}.sheet-error{color:#ff6b6b;margin:0;font-size:.85rem}.sheet-done{color:var(--color-text,#fff);text-align:center;padding:1rem 0;font-size:.95rem}.sheet-stars{gap:.35rem;display:flex}.sheet-star{cursor:pointer;color:var(--color-border,#2a2a4a);background:0 0;border:none;padding:0;font-size:1.6rem;line-height:1;transition:color .15s}.sheet-star-on{color:var(--color-accent,#ffe55c)}
.quiz-screen{background:var(--surface)}.question-area{border-bottom:1px dashed var(--border);padding:20px 20px 16px}.question-title{font-family:var(--font-display);color:var(--text-primary);margin:0 0 8px;font-size:26px;font-weight:700;line-height:1.3}.question-text{font-family:var(--font-body);color:var(--text-secondary);margin:0 0 12px;font-size:16px;font-weight:400;line-height:1.5}.question-meta{align-items:center;gap:10px;display:flex}.report-flag{cursor:pointer;color:var(--text-secondary);font-family:var(--font-body);opacity:.65;background:0 0;border:none;border-radius:6px;margin-left:auto;padding:2px 6px;font-size:12px;transition:opacity .15s,color .15s}.report-flag:hover{opacity:1;color:var(--text-primary)}.difficulty-badge{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.05em;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}.difficulty-beginner{background:var(--success-light);color:var(--success)}.difficulty-intermediate{color:#b45309;background:#fff8e1}.difficulty-advanced{background:var(--error-light);color:var(--error)}.tiles{grid-template-columns:1fr 1fr;gap:14px;padding:16px 20px;display:grid}.tiles-tf{grid-template-columns:1fr 1fr}.tile{background:var(--surface);border:2px solid var(--border);text-align:left;border-radius:12px;flex-direction:column;gap:8px;min-height:90px;padding:14px 12px;transition:border-color .12s,background .12s,transform .12s;display:flex}.tile:hover:not(.tile-feedback){border-color:var(--primary);transform:scale(1.02)}.tile-selected{background:var(--selected-bg);border-color:var(--primary)}.tile-tf{text-align:center;justify-content:center;align-items:center;min-height:110px}.tile-tf .tile-top{justify-content:center}.tile-tf .tile-letter{font-size:40px}.tile-tf .tile-text{font-size:20px}.tile-top{justify-content:space-between;align-items:center;display:flex}.tile-letter{font-family:var(--font-display);color:var(--text-secondary);font-size:20px;font-weight:700}.tile-text{font-family:var(--font-body);color:var(--text-primary);font-size:16px;line-height:1.25}.checkbox{border:2px solid var(--border);color:#fff;background:0 0;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;display:inline-flex}.checkbox-checked{background:var(--primary);border-color:var(--primary)}.quiz-footer{border-top:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;margin-top:auto;padding:14px 20px;display:flex}.dots{align-items:center;gap:6px;display:flex}.dot{border:1px solid var(--border);background:0 0;border-radius:50%;width:8px;height:8px;display:inline-block}.dot-past{background:var(--text-primary);border-color:var(--text-primary)}.dot-current{background:var(--accent-yellow);border:1px solid var(--text-primary);width:12px;height:12px}.tile-feedback{pointer-events:none}.tile-correct{background:var(--success-light);border-color:var(--success)}.tile-wrong{background:var(--error-light);border-color:var(--error)}.tile-mark{font-family:var(--font-display);font-size:18px;font-weight:700}.tile-mark-correct{color:var(--success)}.tile-mark-wrong{color:var(--error)}
.result-banner{border:2px solid;border-radius:10px;align-items:center;gap:14px;margin:14px 20px 0;padding:14px 16px;animation:.3s ease-out bannerIn;display:flex}@keyframes bannerIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.banner-correct{background:var(--success-light);border-color:var(--success)}.banner-correct .banner-icon,.banner-correct .banner-headline{color:var(--success)}.banner-wrong{background:var(--error-light);border-color:var(--error)}.banner-wrong .banner-icon,.banner-wrong .banner-headline{color:var(--error)}.banner-icon{text-align:center;width:28px;font-size:22px;font-weight:700}.banner-headline{font-family:var(--font-display);font-size:18px;font-weight:700}.banner-sub{font-family:var(--font-body);color:var(--text-secondary);font-size:14px}.question-area-dim{border-bottom:none;padding:12px 20px 8px}.question-text-dim{font-family:var(--font-body);color:var(--text-secondary);margin:0;font-size:16px;font-weight:400;line-height:1.3}.explanation-block{background:var(--surface-alt);border:1px solid var(--border);border-radius:10px;margin:12px 20px;padding:14px 16px}.explanation-head{justify-content:space-between;align-items:center;display:flex}.explanation-text{font-family:var(--font-body);color:var(--text-primary);margin-top:8px;font-size:15px;line-height:1.5}.explanation-cta{margin-top:auto;padding:0 20px 20px}.explanation-next{width:100%;padding:14px 28px}
.results-screen{background:var(--surface)}.score-hero{border-bottom:1px solid var(--border);align-items:center;gap:20px;padding:24px 20px;display:flex}.score-circle{border:3px solid var(--text-primary);background:var(--accent-yellow);width:88px;height:88px;font-family:var(--font-display);color:var(--text-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:24px;font-weight:700;animation:.4s cubic-bezier(.34,1.56,.64,1) pop;display:flex}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.score-headline{font-family:var(--font-display);margin:0 0 4px;font-size:28px;font-weight:700}.score-sub{font-family:var(--font-body);color:var(--text-secondary);font-size:15px}.xp-section{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:16px;padding:12px 20px;display:flex}.xp-item{font-family:var(--font-body);color:var(--text-secondary);background:var(--surface-raised,var(--surface));border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:14px}.breakdown{padding:14px 20px 10px}.breakdown .section-label{margin-bottom:10px}.breakdown-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.breakdown-row{border:2px solid var(--border);border-radius:8px;align-items:center;gap:10px;padding:7px 12px;display:flex}.row-ok{background:var(--success-light);border-color:var(--success)}.row-bad{background:var(--error-light);border-color:var(--error)}.q-num{font-family:var(--font-mono);color:var(--text-secondary);flex-shrink:0;width:32px;font-size:11px}.q-label{font-family:var(--font-body);text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);flex:1;font-size:14px;overflow:hidden}.q-mark{font-family:var(--font-display);flex-shrink:0;font-size:14px;font-weight:700}.mark-ok{color:var(--success)}.mark-bad{color:var(--error)}.weak-areas{border-top:1px dashed var(--border);padding:12px 20px}.weak-areas .section-label{margin-bottom:10px}.weak-chips{flex-wrap:wrap;gap:8px;display:flex}.weak-chip{background:var(--accent-yellow);color:var(--text-primary);border:2px solid var(--text-primary);font-family:var(--font-body);box-shadow:2px 2px 0 var(--text-primary);border-radius:20px;padding:5px 14px;font-size:14px;transition:transform 80ms,box-shadow 80ms}.weak-chip:active{box-shadow:none;transform:translate(2px,2px)}.results-ctas{gap:12px;margin-top:auto;padding:12px 20px 24px;display:flex}.results-cta-primary,.results-cta-ghost{flex:1}.feedback-link{cursor:pointer;color:var(--text-secondary);font-family:var(--font-body);text-align:center;background:0 0;border:none;width:100%;padding:0 20px 20px;font-size:13px;transition:color .15s}.feedback-link:hover{color:var(--text-primary)}
.auth-overlay{z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.auth-modal{background:var(--color-surface,#1a1a2e);border:1px solid var(--color-border,#2a2a4a);border-radius:12px;flex-direction:column;gap:1.5rem;width:100%;max-width:380px;padding:2rem;display:flex;position:relative}.auth-close{cursor:pointer;color:var(--color-text-muted,#888);background:0 0;border:none;border-radius:4px;padding:.25rem;font-size:1rem;line-height:1;transition:color .15s;position:absolute;top:.75rem;right:.75rem}.auth-close:hover{color:var(--color-text,#fff)}.auth-tabs{border-bottom:1px solid var(--color-border,#2a2a4a);gap:.5rem;padding-bottom:.75rem;display:flex}.auth-tab{cursor:pointer;color:var(--color-text-muted,#888);background:0 0;border:none;border-radius:4px;padding:.25rem .5rem;font-size:.95rem;transition:color .15s}.auth-tab:hover{color:var(--color-text,#fff)}.auth-tab-active{color:var(--color-text,#fff);font-weight:600}.auth-form{flex-direction:column;gap:1rem;display:flex}.auth-field{color:var(--color-text-muted,#aaa);flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.auth-field input{background:var(--color-bg,#0f0f1a);border:1px solid var(--color-border,#2a2a4a);color:var(--color-text,#fff);border-radius:6px;outline:none;padding:.6rem .75rem;font-size:.95rem;transition:border-color .15s}.auth-field input:focus{border-color:var(--color-accent,#7c6aff)}.auth-error{color:#ff6b6b;margin:0;font-size:.85rem}.auth-submit{width:100%;margin-top:.25rem}.auth-guest{cursor:pointer;color:var(--color-text-muted,#888);text-align:center;background:0 0;border:none;width:100%;padding:.25rem;font-size:.85rem;transition:color .15s}.auth-guest:hover{color:var(--color-text,#fff)}