*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f3ff;--bg2:#fff;--bg3:#ede8ff;--bg-hover:#e4deff;--border:#c9bfee;--border-soft:#ddd7f7;--text:#0e0825;--text-sub:#2a1760;--text-dim:#5b45a0;--accent:#6631f7;--accent-light:#7c4dff;--accent-soft:#ede8ff;--accent-hover:#5420e0;--green:#059669;--green-soft:#d1fae5;--green-text:#065f46;--orange:#ea580c;--orange-soft:#fff0e6;--blue:#2563eb;--blue-soft:#dbeafe;--teal:#0891b2;--teal-soft:#cffafe;--easy:#059669;--easy-soft:#d1fae5;--medium:#d97706;--medium-soft:#fef3c7;--hard:#dc2626;--hard-soft:#fee2e2;--danger:#dc2626;--danger-soft:#fee2e2;--radius:10px;--radius-sm:7px;--shadow-sm:0 1px 4px #6631f712;--shadow:0 3px 14px #6631f71a;--shadow-lg:0 10px 40px #6631f72e}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14.5px;line-height:1.6}h1,h2,h3,h4,h5{font-family:Plus Jakarta Sans,Inter,system-ui,sans-serif;font-weight:700}#root{min-height:100vh}input,textarea,select{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);outline:none;width:100%;padding:8px 12px;font-family:Inter,inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6631f726}textarea{resize:vertical}button{cursor:pointer;font-family:inherit}a{color:inherit;text-decoration:none}.app{flex-direction:column;min-height:100vh;display:flex}.app-main{width:100%;max-width:960px;margin:0 auto;padding:28px 24px}.app-header{background:var(--bg2);border-bottom:2px solid var(--border-soft);z-index:200;align-items:center;gap:12px;height:62px;padding:0 24px;display:flex;position:sticky;top:0;box-shadow:0 2px 12px #6631f714}.header-left{flex:none;align-items:center;gap:10px;display:flex}.header-center{flex:1;max-width:360px}.header-right{align-items:center;gap:8px;margin-left:auto;display:flex}.nav-logo-img{border-radius:8px;flex-shrink:0}.logo{letter-spacing:-.5px;background:linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Plus Jakarta Sans,sans-serif;font-size:18px;font-weight:800}.nav-links{gap:4px;display:flex}.hamburger{color:var(--text-dim);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:background .15s;display:none}.hamburger:hover{background:var(--bg3);color:var(--text)}.mobile-icon-btn{color:var(--text-dim);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:background .15s;display:none}.mobile-icon-btn:hover{background:var(--bg3)}.mobile-search-bar{background:var(--bg2);border-bottom:2px solid var(--border-soft);padding:10px 16px}.mobile-menu{background:var(--bg2);border-bottom:2px solid var(--border-soft);z-index:199;flex-direction:column;gap:2px;padding:8px 12px;display:flex;position:sticky;top:62px}.mobile-menu-item{border-radius:var(--radius-sm);color:var(--text-sub);background:0 0;border:none;align-items:center;gap:10px;padding:10px 14px;font-family:Plus Jakarta Sans,inherit;font-size:15px;font-weight:600;transition:background .15s;display:flex}.mobile-menu-item:hover{background:var(--bg3)}.mobile-menu-item.active{background:var(--accent-soft);color:var(--accent)}@media (width<=640px){.header-center,.nav-links{display:none}.hamburger,.mobile-icon-btn{display:flex}.app-main{padding:16px}}.btn{border-radius:var(--radius-sm);border:none;align-items:center;gap:6px;padding:8px 18px;font-family:Plus Jakarta Sans,inherit;font-size:14px;font-weight:700;transition:background .15s,box-shadow .15s,transform .1s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 10px #6631f74d}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 4px 16px #6631f766}.btn-ghost{color:var(--text-dim);border:1.5px solid var(--border);background:0 0}.btn-ghost:hover{background:var(--bg3);color:var(--text-sub);border-color:var(--accent)}.btn-outline{color:var(--accent);border:1.5px solid var(--accent);background:0 0}.btn-outline:hover{background:var(--accent-soft)}.btn-danger{background:var(--danger);color:#fff;box-shadow:0 2px 8px #dc262640}.btn-danger:hover{background:#b91c1c}.btn-sm{padding:5px 12px;font-size:12.5px}.nav-btn{border-radius:var(--radius-sm);color:var(--text-dim);background:0 0;border:none;align-items:center;gap:6px;padding:7px 14px;font-family:Plus Jakarta Sans,inherit;font-size:13.5px;font-weight:700;transition:background .15s,color .15s;display:inline-flex}.nav-btn:hover{background:var(--bg3);color:var(--text)}.nav-btn.active{background:var(--accent-soft);color:var(--accent)}.icon-btn{color:var(--text-dim);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:5px;transition:color .15s,background .15s;display:inline-flex}.icon-btn:hover{color:var(--text-sub);background:var(--bg3)}.icon-btn.danger:hover{color:var(--danger);background:var(--danger-soft)}.icon-btn.accent:hover{color:var(--accent);background:var(--accent-soft)}.search-bar{background:var(--bg3);border:1.5px solid var(--border);border-radius:99px;align-items:center;gap:7px;padding:7px 14px;transition:border-color .15s,box-shadow .15s;display:flex}.search-bar:focus-within{border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px #6631f71f}.search-bar input{color:var(--text);box-shadow:none;background:0 0;border:none;width:100%;padding:0;font-size:13.5px}.search-bar input:focus{box-shadow:none}.search-bar input::placeholder{color:var(--text-dim)}.search-icon{color:var(--text-dim);flex-shrink:0}.toolbar{margin-bottom:20px}.inline-add-form{background:var(--bg2);border:1.5px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;padding:14px 16px;display:flex}.inline-add-form input{flex:1;min-width:180px}.topic-add-form{max-width:540px}.empty-state{text-align:center;padding:72px 24px}.empty-icon{margin-bottom:16px;font-size:52px}.empty-state h3{color:var(--text);margin-bottom:8px;font-size:20px}.empty-state p{color:var(--text-dim);font-size:15px;line-height:1.7}.empty-hint{color:var(--text-dim);padding:8px 4px;font-size:13px}.loading-state{color:var(--text-dim);flex-direction:column;align-items:center;gap:16px;padding:80px 0;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:30px;height:30px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.topic-card{background:var(--bg2);border:1.5px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:18px;transition:box-shadow .2s;overflow:hidden}.topic-card:hover{box-shadow:var(--shadow)}.topic-header{border-bottom:1.5px solid var(--border-soft);flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;display:flex}.topic-name{color:var(--text);flex-shrink:0;font-family:Plus Jakarta Sans,sans-serif;font-size:16px;font-weight:800}.topic-meta{flex:1;align-items:center;gap:10px;min-width:100px;display:flex}.topic-stats{color:var(--text-dim);white-space:nowrap;font-size:12.5px;font-weight:700}.topic-progress{background:var(--bg3);border-radius:99px;flex:1;max-width:140px;height:6px;overflow:hidden}.topic-bar{background:linear-gradient(90deg, var(--accent), #a78bfa);border-radius:99px;height:100%;transition:width .4s}.topic-actions{align-items:center;gap:5px;margin-left:auto;display:flex}.patterns-container{flex-direction:column;gap:6px;padding:10px;display:flex}.collapse-btn{color:var(--text-dim)}.inline-edit{background:var(--bg3);border:1.5px solid var(--accent);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:inherit;font-weight:inherit;outline:none;width:auto;padding:3px 10px;display:inline}.topic-inline-edit{font-size:16px;font-weight:800}.pattern-section{background:var(--bg);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);overflow:hidden}.pattern-header{background:var(--bg3);align-items:center;gap:7px;padding:9px 12px;display:flex}.pattern-name{color:var(--text-sub);font-family:Plus Jakarta Sans,sans-serif;font-size:13.5px;font-weight:700}.count-badge{background:var(--bg2);border:1.5px solid var(--border);color:var(--text-dim);white-space:nowrap;border-radius:99px;padding:1px 8px;font-size:11.5px;font-weight:700}.mini-progress{background:var(--border);border-radius:99px;width:56px;height:4px;overflow:hidden}.mini-bar{background:var(--green);border-radius:99px;height:100%;transition:width .35s}.pattern-actions{gap:2px;margin-left:auto;display:flex}.problems-list{flex-direction:column;gap:3px;padding:6px 10px 10px;display:flex}.problem-row{border-radius:var(--radius-sm);border:1.5px solid #0000;align-items:center;gap:9px;padding:7px 10px;transition:background .1s;display:flex}.problem-row:hover{background:var(--bg2);border-color:var(--border-soft)}.problem-row.is-done .problem-name{color:var(--green);font-weight:700;text-decoration:none}.problem-check{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}.diff-badge{border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:800;display:flex}.diff-badge.diff-easy{background:var(--easy-soft);color:var(--easy)}.diff-badge.diff-medium{background:var(--medium-soft);color:var(--medium)}.diff-badge.diff-hard{background:var(--hard-soft);color:var(--hard)}.problem-name{cursor:pointer;color:var(--text);flex:1;align-items:center;gap:4px;font-size:14px;font-weight:500;display:flex}.expand-icon{color:var(--text-dim);flex-shrink:0}.problem-date{color:var(--text-dim);white-space:nowrap;font-size:12px}.problem-actions{flex-shrink:0;gap:2px;display:flex}.problem-notes-expanded{border-radius:var(--radius-sm);border:1.5px solid var(--border-soft);background:var(--bg2);margin:0 10px 10px 36px;overflow:hidden}.note-block{border-bottom:1px solid var(--border-soft);flex-direction:column;gap:6px;padding:10px 14px;display:flex}.note-block:last-child{border-bottom:none}.note-tag{letter-spacing:.06em;text-transform:uppercase;border-radius:99px;width:fit-content;padding:2px 9px;font-size:11px;font-weight:800;display:inline-block}.intuition-tag{background:var(--blue-soft);color:var(--blue)}.approach-tag{background:var(--teal-soft);color:var(--teal)}.complexity-tag{background:var(--orange-soft);color:var(--orange)}.note-block p{color:var(--text-sub);white-space:pre-wrap;font-size:13.5px;line-height:1.7}.diff-row{gap:7px;display:flex}.diff-btn{background:var(--bg3);color:var(--text-dim);border:2px solid #0000;border-radius:99px;padding:5px 16px;font-family:inherit;font-size:12.5px;font-weight:700;transition:all .15s}.diff-btn.diff-easy.active,.diff-btn.diff-easy:hover{background:var(--easy-soft);color:var(--easy);border-color:var(--easy)}.diff-btn.diff-medium.active,.diff-btn.diff-medium:hover{background:var(--medium-soft);color:var(--medium);border-color:var(--medium)}.diff-btn.diff-hard.active,.diff-btn.diff-hard:hover{background:var(--hard-soft);color:var(--hard);border-color:var(--hard)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0e082580;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--bg2);border:1.5px solid var(--border);width:100%;max-width:580px;box-shadow:var(--shadow-lg);border-radius:14px;max-height:90vh;overflow-y:auto}.modal-header{border-bottom:1.5px solid var(--border-soft);background:var(--bg2);z-index:1;justify-content:space-between;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.modal-header h3{color:var(--text);font-size:16px;font-weight:800}.modal-body{padding:20px}.confirm-dialog{background:var(--bg2);border:1.5px solid var(--border);width:100%;max-width:380px;box-shadow:var(--shadow-lg);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:32px 28px;display:flex}.confirm-icon-wrap{background:var(--danger-soft);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.confirm-icon{color:var(--danger)}.confirm-dialog h3{color:var(--text);font-size:18px;font-weight:800}.confirm-dialog p{color:var(--text-dim);font-size:14px;line-height:1.6}.confirm-actions{gap:10px;width:100%;margin-top:6px;display:flex}.confirm-actions .btn{flex:1;justify-content:center}.form{flex-direction:column;gap:14px;display:flex}.form-row{gap:14px;display:flex}.form-col{flex-direction:column;flex:1;gap:6px;display:flex}.form label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:800}.form-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.checkbox-label{color:var(--text-sub);cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.checkbox-label input{width:auto}.notes-section{flex-direction:column;gap:10px;display:flex}.notes-section-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:800}.notes-grid{flex-direction:column;gap:10px;display:flex}.note-field{flex-direction:column;gap:6px;display:flex}.note-label{letter-spacing:.06em;text-transform:uppercase;border-radius:99px;width:fit-content;padding:2px 9px;font-size:11px;font-weight:800;display:inline-block}.intuition-label{background:var(--blue-soft);color:var(--blue)}.approach-label{background:var(--teal-soft);color:var(--teal)}.complexity-label{background:var(--orange-soft);color:var(--orange)}@media (width<=540px){.form-row{flex-direction:column}}.search-results{flex-direction:column;gap:4px;display:flex}.search-count{color:var(--text-dim);margin-bottom:10px;font-size:13px;font-weight:700}.search-result-item{background:var(--bg2);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);margin-bottom:6px;overflow:hidden}.search-context{color:var(--accent);background:var(--accent-soft);border-bottom:1px solid var(--border-soft);padding:5px 10px;font-size:11.5px;font-weight:800}.search-empty{text-align:center;color:var(--text-dim);padding:40px 0}.dashboard{flex-direction:column;gap:20px;display:flex}.stat-cards{flex-wrap:wrap;gap:12px;display:flex}.stat-card{background:var(--bg2);border:1.5px solid var(--border-soft);border-radius:var(--radius);min-width:130px;box-shadow:var(--shadow-sm);flex:1;align-items:center;gap:14px;padding:16px 20px;transition:box-shadow .2s,transform .15s;display:flex}.stat-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.stat-icon-wrap{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.stat-icon-wrap.green{background:var(--green-soft);color:var(--green)}.stat-icon-wrap.muted{background:var(--bg3);color:var(--text-dim)}.stat-icon-wrap.orange{background:var(--orange-soft);color:var(--orange)}.stat-icon-wrap.blue{background:var(--blue-soft);color:var(--blue)}.stat-icon-wrap.purple{background:var(--accent-soft);color:var(--accent)}.stat-val{color:var(--text);font-family:Plus Jakarta Sans,sans-serif;font-size:28px;font-weight:800;line-height:1}.stat-label{color:var(--text-dim);margin-top:3px;font-size:12.5px;font-weight:600}.card{background:var(--bg2);border:1.5px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px 20px}.card-title{color:var(--text);margin-bottom:14px;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:800;display:block}.op-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.op-pct{color:var(--accent);font-size:16px;font-weight:800}.op-track{background:var(--bg3);border-radius:99px;height:10px;overflow:hidden}.op-bar{background:linear-gradient(90deg, var(--accent), #a78bfa);border-radius:99px;height:100%;transition:width .5s}.diff-stats{gap:20px;margin-top:12px;display:flex}.diff-easy-stat,.diff-med-stat,.diff-hard-stat{align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.dot{border-radius:50%;width:9px;height:9px;display:inline-block}.easy-dot{background:var(--easy)}.med-dot{background:var(--medium)}.hard-dot{background:var(--hard)}.diff-easy-stat{color:var(--easy)}.diff-med-stat{color:var(--medium)}.diff-hard-stat{color:var(--hard)}.heatmap{align-items:flex-end;gap:8px;margin-top:4px;display:flex}.heatmap-col{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.heatmap-bar-wrap{justify-content:center;align-items:flex-end;width:100%;height:60px;display:flex}.heatmap-bar{background:var(--border);border-radius:5px 5px 0 0;width:100%;max-width:40px;min-height:4px;transition:height .35s}.heatmap-bar.active{background:linear-gradient(180deg, #a78bfa, var(--accent))}.heatmap-count{color:var(--accent);min-height:16px;font-size:12px;font-weight:800}.heatmap-day{color:var(--text-dim);font-size:11.5px;font-weight:600}.auth-page{background:linear-gradient(135deg,#f5f3ff 0%,#ede8ff 50%,#f0ecff 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--bg2);border:1.5px solid var(--border-soft);width:100%;max-width:400px;box-shadow:var(--shadow-lg);text-align:center;border-radius:20px;flex-direction:column;align-items:center;gap:14px;padding:40px 36px;display:flex}.auth-logo-wrap{border-radius:18px;width:72px;height:72px;overflow:hidden;box-shadow:0 4px 20px #6631f740}.auth-logo-wrap img{width:100%;height:100%}.auth-title{color:var(--text);margin-top:4px;font-size:26px;font-weight:800}.auth-sub{color:var(--text-dim);max-width:280px;font-size:15px;line-height:1.6}.google-btn{background:var(--bg2);border:2px solid var(--border);width:100%;color:var(--text);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:12px;margin-top:8px;padding:13px 20px;font-family:Plus Jakarta Sans,inherit;font-size:15px;font-weight:700;transition:border-color .15s,box-shadow .15s,background .15s;display:flex}.google-btn:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 16px #6631f726}.google-btn:disabled{opacity:.6;cursor:not-allowed}.auth-note{color:var(--text-dim);margin-top:4px;font-size:12.5px}