*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--bg-card: #1a1d27;--bg-surface: #232734;--border: #2e3346;--text: #e4e6ed;--text-dim: #8b8fa3;--accent: #6c63ff;--accent-hover: #5a52e0;--green: #22c55e;--red: #ef4444;--yellow: #eab308;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body{min-height:100vh}#root{width:100%}.app{max-width:800px;margin:0 auto;padding:0 1rem 3rem}.main{display:flex;flex-direction:column;gap:1.25rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--border);margin-bottom:1rem}.header-left{display:flex;align-items:center;gap:.5rem}.logo{font-size:1.5rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.5rem}.logo-icon{font-size:1.6rem}.header-right{display:flex;gap:1rem}.stat-badge{display:flex;flex-direction:column;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:.35rem .75rem;min-width:60px}.stat-value{font-size:1.25rem;font-weight:700;color:var(--accent);line-height:1.2}.stat-label{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.toolbar-left{display:flex;gap:.5rem}.difficulty-filter{display:flex;gap:2px;background:var(--bg-surface);border-radius:6px;padding:2px;border:1px solid var(--border)}.btn-filter{padding:.3rem .65rem;border:none;border-radius:4px;font-size:.75rem;font-weight:500;font-family:inherit;background:transparent;color:var(--text-dim);cursor:pointer;text-transform:capitalize;transition:all .15s ease}.btn-filter:hover{color:var(--text)}.btn-filter.active{background:var(--accent);color:#fff}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:6px;border:none;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease;font-family:inherit}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.challenge-info{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem}.challenge-header-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.difficulty-badge{padding:.15rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.05em}.category-badge{padding:.15rem .6rem;border-radius:999px;font-size:.7rem;font-weight:500;background:var(--bg-surface);color:var(--text-dim);border:1px solid var(--border)}.completed-badge{padding:.15rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;background:#22c55e26;color:var(--green);border:1px solid rgba(34,197,94,.3)}.challenge-title{font-size:1.3rem;font-weight:600;margin-bottom:.75rem}.challenge-description p{color:var(--text-dim);font-size:.9rem;margin-bottom:.35rem}.challenge-description pre,.desc-code{background:var(--bg-surface);padding:.75rem 1rem;border-radius:6px;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;overflow-x:auto;margin:.5rem 0}.editor-wrapper{border-radius:10px;overflow:hidden;border:1px solid var(--border)}.editor-wrapper .cm-editor{font-size:.9rem}.editor-wrapper .cm-editor .cm-scroller{font-family:JetBrains Mono,Fira Code,monospace}.actions{display:flex;align-items:center;gap:1rem}.loading-hint{font-size:.8rem;color:var(--text-dim)}.test-results{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem}.results-heading{font-size:.95rem;font-weight:600;margin-bottom:.75rem}.results-heading.all-pass{color:var(--green)}.results-heading.some-fail{color:var(--red)}.test-list{display:flex;flex-direction:column;gap:.5rem}.test-case{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .75rem;border-radius:6px;background:var(--bg-surface)}.test-icon{font-weight:700;font-size:.9rem;line-height:1.4}.test-case.pass .test-icon{color:var(--green)}.test-case.fail .test-icon{color:var(--red)}.test-details{flex:1;min-width:0}.test-label{font-size:.85rem;font-weight:500}.test-diff{margin-top:.3rem;font-size:.8rem;color:var(--text-dim)}.test-diff code{background:var(--bg);padding:.1rem .3rem;border-radius:3px;font-family:JetBrains Mono,Fira Code,monospace;font-size:.75rem}.test-error{color:var(--red);font-family:JetBrains Mono,Fira Code,monospace;font-size:.75rem;word-break:break-word}.solution-section{display:flex;flex-direction:column;gap:1rem}.solution-content{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem}.solution-content h3{font-size:1rem;margin-bottom:.75rem}.solution-content .cm-editor{border-radius:6px;font-size:.85rem}.explanation{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.explanation h4{font-size:.9rem;margin-bottom:.4rem;color:var(--text)}.explanation p{font-size:.85rem;color:var(--text-dim);line-height:1.6}.divider{border:none;border-top:1px solid var(--border);margin:.5rem 0}.btn-stats-toggle{align-self:flex-start}.stats-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.stats-header h3{font-size:1rem}.btn-close{background:none;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;padding:0;line-height:1}.btn-close:hover{color:var(--text)}.stats-overview{font-size:.9rem;color:var(--text-dim);margin-bottom:1rem}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.stats-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:.5rem}.stat-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.stat-row-label{font-size:.8rem;min-width:65px;color:var(--text);text-transform:capitalize}.progress-bar{flex:1;height:6px;background:var(--bg-surface);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}.stat-row-count{font-size:.75rem;color:var(--text-dim);min-width:30px;text-align:right}.stats-actions{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.import-msg{font-size:.8rem;color:var(--text-dim)}@media(max-width:600px){.stats-grid{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.header{flex-wrap:wrap;gap:.5rem}}