:root{--page-bg:#f8f4ec;--text-color:#51453c;--heading-color:#2f241c;--muted-text:#847468;--accent-strong:#9b5316;letter-spacing:.01em;color:var(--text-color);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#f28c281f,#0000 30%),linear-gradient(#fffaf0,#f7f2ea 38%,#f3efe7);font:18px/1.55 Trebuchet MS,Aptos,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}#root{width:min(1180px,100% - 24px);min-height:100svh;margin:0 auto}h1,h2,h3,strong{color:var(--heading-color)}h1{margin:.8rem 0 1rem;font-size:clamp(2.5rem,5vw,4.6rem);line-height:1}h2,h3,p{margin:0}h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15}h3{font-size:1.3rem;line-height:1.2}button,input,textarea,select{font:inherit}.app-shell{flex-direction:column;gap:2rem;padding:2rem 0 3rem;display:flex}.hero-panel,.stat-card,.topic-card,.question-card,.result-card,.review-card{background:#ffffffe0;border:1px solid #6c52371f;border-radius:24px;box-shadow:0 18px 40px #684f2e14}.hero-panel{background:radial-gradient(circle at 0 0,#f28c2847,#0000 30%),radial-gradient(circle at 100% 100%,#2a9d8f38,#0000 28%),linear-gradient(135deg,#fff8eafa,#f5fffcfa);justify-content:space-between;gap:1.5rem;padding:2rem;display:flex}.hero-copy{max-width:42rem}.eyebrow,.topic-badge,.question-tag{width:fit-content;color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase;background:#f8e8cee6;border-radius:999px;padding:.4rem .75rem;font-size:.85rem;display:inline-flex}.topic-badges{flex-wrap:wrap;gap:.5rem;display:flex}.category-badge{background:color-mix(in srgb, var(--topic-color) 18%, white);width:fit-content;color:var(--heading-color);border-radius:999px;padding:.4rem .75rem;font-size:.85rem;font-weight:600;display:inline-flex}.hero-text,.question-note{color:var(--muted-text);max-width:38rem}.hero-stats,.topic-grid,.topic-meta,.quiz-topbar,.answers-grid,.feedback-panel,.result-actions,.review-list,.progress-copy,.section-heading{display:flex}.hero-stats{flex-wrap:wrap;align-self:flex-end;gap:1rem}.stat-card{min-width:130px;padding:1rem 1.1rem}.stat-card strong,.score-pill{color:var(--heading-color);font-size:1.4rem;display:block}.stat-card span,.topic-meta span,.progress-copy span,.review-card span{color:var(--muted-text)}.topics-section,.quiz-section,.result-section{flex-direction:column;gap:1.5rem;display:flex}.filters-panel{background:#ffffffc7;border:1px solid #6c52371f;border-radius:20px;flex-wrap:wrap;align-items:end;gap:1rem;padding:1.25rem;display:flex}.filter-field{flex-direction:column;flex:260px;gap:.45rem;display:flex}.filter-field span{color:var(--heading-color);font-weight:600}.filter-field input,.filter-field select{min-height:52px;color:var(--heading-color);background:#fffdfaf2;border:1px solid #6c52372e;border-radius:14px;outline:none;padding:.85rem 1rem}.filter-field input:focus,.filter-field select:focus{border-color:#f28c28b8;box-shadow:0 0 0 4px #f28c281f}.filter-summary{background:#fff8eaf2;border-radius:16px;flex-direction:column;gap:.2rem;min-width:140px;padding:.9rem 1rem;display:flex}.filter-summary strong{font-size:1.35rem}.filter-summary span{color:var(--muted-text)}.section-heading{justify-content:space-between}.topic-grid,.answers-grid,.review-list,.result-actions,.topic-meta,.quiz-topbar,.feedback-panel{flex-wrap:wrap;gap:1rem}.topic-card,.question-card,.result-card,.review-card{padding:1.5rem}.topic-card{flex-direction:column;flex:280px;align-items:flex-start;gap:.9rem;display:flex;position:relative;overflow:hidden}.topic-card:after{content:"";background:color-mix(in srgb, var(--topic-color) 22%, white);border-radius:50%;width:140px;height:140px;position:absolute;bottom:-40px;right:-40px}.topic-meta{margin:auto 0 1.2rem}.primary-button,.ghost-button,.answer-button{cursor:pointer;font:inherit;border:none;transition:transform .18s,box-shadow .18s,background-color .18s}.primary-button,.ghost-button{border-radius:16px;padding:.9rem 1.2rem}.primary-button{color:#fff;background:linear-gradient(135deg,#f28c28,#df6c3b);box-shadow:0 14px 28px #d9742f47}.ghost-button{color:var(--heading-color);background:#ffffffd1;border:1px solid #6c523724}.primary-button:hover,.ghost-button:hover,.answer-button:hover:not(:disabled){transform:translateY(-2px)}.quiz-topbar{justify-content:space-between;align-items:center}.progress-block{flex:320px}.progress-copy{justify-content:space-between;margin-bottom:.5rem}.progress-track{background:#57759024;border-radius:999px;height:12px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg,#2a9d8f,#577590);height:100%}.score-pill{background:#fffbf3eb;border-radius:18px;padding:.8rem 1rem}.answers-grid{margin-top:1.4rem}.answer-button{min-height:88px;color:var(--heading-color);text-align:left;background:#fffcf6eb;border:1px solid #6c52371f;border-radius:18px;flex:280px;padding:1rem 1.1rem}.answer-button:disabled{cursor:default}.answer-button.is-correct{background:#2a9d8f29;border-color:#2a9d8f7a}.answer-button.is-wrong{background:#d628281f;border-color:#d6282852}.answer-button.is-muted{opacity:.7}.feedback-panel{background:#f6f8fbf5;border-radius:18px;justify-content:space-between;align-items:center;margin-top:1.4rem;padding:1.1rem}.result-summary{font-size:1.1rem}.review-card{flex:280px}.review-card.is-success{border-color:#2a9d8f3d}.review-card.is-fail{border-color:#d6282838}.empty-state{background:#fffcf6c2;border:1px dashed #6c523738;border-radius:20px;padding:1.5rem}@media (width<=900px){.app-shell{gap:1.2rem;padding-top:1rem}.hero-panel{flex-direction:column;padding:1.4rem}.hero-stats{align-self:stretch}.stat-card{flex:120px}.feedback-panel,.quiz-topbar,.progress-copy,.section-heading,.filters-panel{flex-direction:column;align-items:flex-start}.progress-block,.filter-field,.filter-summary{width:100%}.filters-panel{gap:.85rem;padding:1rem}.filter-field{flex:none}.filter-field input,.filter-field select{min-height:48px;padding:.75rem .9rem}.filter-summary{min-width:0;padding:.8rem .9rem}}@media (width<=640px){.filters-panel{border-radius:18px}.filter-field span{font-size:.98rem}.filter-field input,.filter-field select{border-radius:12px;min-height:46px}}
