:root{--bg: #f8fafc;--bg2: #ffffff;--bg3: #f1f5f9;--text: #0f172a;--text2: #64748b;--accent: #2563eb;--accent-light: #dbeafe;--green: #16a34a;--green-light: #dcfce7;--amber: #d97706;--amber-light: #fef3c7;--red: #dc2626;--red-light: #fee2e2;--border: #e2e8f0;--radius: 10px;--radius-sm: 6px;--shadow: 0 1px 3px rgba(0,0,0,.04);--shadow-lg: 0 8px 40px rgba(0,0,0,.12);--font: "Inter", system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", "Fira Code", monospace}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--font);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh}#header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;z-index:100}.logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:24px;color:var(--accent);font-weight:700;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--accent-light);border-radius:8px}.logo h1{font-size:15px;font-weight:700}.logo small{font-size:10px;color:var(--text2);font-family:var(--mono)}.header-right{display:flex;align-items:center;gap:8px}.header-btn{padding:5px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:11px;cursor:pointer;font-family:var(--font);color:var(--text2);transition:all .15s}.header-btn:hover{background:var(--accent-light);color:var(--accent)}#status-bar{font-size:11px;color:var(--accent);font-family:var(--mono);padding:5px 12px;background:var(--accent-light);border-radius:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#chat-main{flex:1;display:flex;flex-direction:column;padding:16px 20px;overflow:hidden;max-width:900px;width:100%;margin:0 auto}#chat-messages{flex:1;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:12px}.message{display:flex;gap:8px;max-width:85%;animation:fadeIn .2s ease}.message.user{align-self:flex-end;flex-direction:row-reverse}.message.assistant{align-self:flex-start}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.msg-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.message.user .msg-avatar{background:var(--accent-light)}.message.assistant .msg-avatar{background:var(--bg3)}.msg-content{display:flex;flex-direction:column;gap:3px;min-width:0}.msg-text{padding:10px 14px;border-radius:var(--radius);font-size:13px;line-height:1.6;word-wrap:break-word}.message.user .msg-text{background:var(--accent);color:#fff}.message.assistant .msg-text{background:var(--bg2);border:1px solid var(--border)}.msg-text h2{font-size:16px;font-weight:700;margin:6px 0 4px}.msg-text h3{font-size:14px;font-weight:600;margin:5px 0 3px}.msg-text h4{font-size:12px;font-weight:600;margin:4px 0 2px;color:var(--text2)}.msg-text p{margin:2px 0}.msg-text ul{padding-left:18px;margin:3px 0}.msg-text li{margin:2px 0}.msg-text strong{font-weight:600;color:var(--accent)}.message.user .msg-text strong{color:#fff}.msg-text code{background:var(--bg3);padding:1px 5px;border-radius:3px;font-size:11px;font-family:var(--mono)}.msg-text hr{border:none;border-top:1px solid var(--border);margin:8px 0}.msg-meta{font-size:9px;color:var(--text2);font-family:var(--mono);display:flex;flex-wrap:wrap;gap:3px}.concept-tag{background:var(--bg3);padding:1px 6px;border-radius:10px;font-size:9px;color:var(--accent)}.msg-time{font-size:8px;color:var(--text2)}.typing-dots{display:flex;gap:3px;padding:10px 14px}.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text2);animation:bounce 1.4s infinite}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{transform:translateY(0);opacity:.3}30%{transform:translateY(-6px);opacity:1}}#chat-input-area{display:flex;gap:8px;margin-top:12px;flex-shrink:0}#chat-input{flex:1;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:13px;resize:none;outline:none;transition:border-color .2s,box-shadow .2s}#chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2563eb14}#chat-input::placeholder{color:#94a3b8}#send-btn{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font)}#send-btn:hover{background:#1d4ed8}#send-btn:active{transform:scale(.97)}.modal-overlay{position:fixed;inset:0;background:#0f172a66;display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(2px)}.modal-overlay.hidden{display:none}.modal{background:var(--bg2);border-radius:14px;box-shadow:var(--shadow-lg);width:520px;max-height:85vh;display:flex;flex-direction:column;animation:modalIn .2s ease}.modal-wide{width:700px}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}.modal-header h2{font-size:15px;font-weight:700}.modal-close{width:28px;height:28px;border:none;background:var(--bg3);border-radius:50%;font-size:14px;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all .15s}.modal-close:hover{background:var(--red-light);color:var(--red)}.modal-body{padding:16px 20px;overflow-y:auto}.overall-mastery{text-align:center;padding:12px;background:var(--bg3);border-radius:var(--radius);margin-bottom:12px}.overall-mastery .big-number{font-size:36px;font-weight:800;color:var(--accent);line-height:1}.overall-mastery .big-label{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.mastery-bar-outer{height:6px;background:var(--border);border-radius:3px;margin-top:8px;overflow:hidden}.mastery-bar-inner{height:100%;background:linear-gradient(90deg,var(--amber),var(--green));border-radius:3px;transition:width .4s ease}.state-counters{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}.state-counter{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bg3);border-radius:var(--radius-sm);font-size:11px;font-family:var(--mono)}.state-counter .dot{width:8px;height:8px;border-radius:50%}.state-counter .count{font-weight:700;margin-left:auto}.modal-body h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:6px;margin-top:12px}.weak-areas,.recommendations,.strengths-list{display:flex;flex-direction:column;gap:4px}.weak-item,.rec-item,.strength-item{font-size:11px;padding:5px 8px;border-radius:var(--radius-sm);font-family:var(--mono);display:flex;align-items:center;gap:6px}.weak-item{background:var(--red-light);color:var(--red)}.rec-item{background:var(--accent-light);color:var(--accent);cursor:pointer}.rec-item:hover{filter:brightness(.95)}.strength-item{background:var(--green-light);color:var(--green)}.badge{background:#0000000f;padding:1px 5px;border-radius:3px;font-size:9px;margin-left:auto}#concept-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}.concept-item{font-size:11px;padding:4px 8px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text2);font-family:var(--mono);display:flex;align-items:center;gap:5px}.concept-item:hover{background:var(--bg3);color:var(--text)}.concept-item .status-dot{width:6px;height:6px;border-radius:50%}.concept-item .status-dot.unseen{background:#cbd5e1}.concept-item .status-dot.seen{background:#94a3b8}.concept-item .status-dot.learning{background:var(--amber)}.concept-item .status-dot.practiced{background:var(--accent)}.concept-item .status-dot.mastered{background:var(--green)}.reset-btn{width:100%;padding:7px 0;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-size:10px;cursor:pointer;font-family:var(--mono);margin-top:14px;transition:all .15s}.reset-btn:hover{background:var(--red-light);border-color:var(--red);color:var(--red)}#graph-viz{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}#graph-viz svg{display:block}.graph-legend-hint{font-size:10px;color:var(--text2);margin-top:8px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}