:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #dbeafe;--color-secondary: #f59e0b;--color-success: #10b981;--color-danger: #ef4444;--color-warning: #f97316;--color-bg: #f8fafc;--color-card: #ffffff;--color-text: #1e293b;--color-text-secondary: #64748b;--color-border: #e2e8f0;--color-locked: #cbd5e1;--color-available: #3b82f6;--color-learning: #f59e0b;--color-mastered: #10b981;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;--font-mono: "SF Mono", "Fira Code", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{background:var(--color-primary);color:#fff;padding:12px 20px;display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:var(--shadow-md)}.app-brand{display:flex;align-items:center;gap:10px}.app-icon{font-size:28px}.app-header h1{font-size:20px;font-weight:700;letter-spacing:1px}.app-subtitle{font-size:13px;opacity:.85;margin-left:auto}.app-nav{display:flex;gap:4px;padding:8px 12px;background:var(--color-card);border-bottom:1px solid var(--color-border);flex-shrink:0;overflow-x:auto;scrollbar-width:none}.app-nav::-webkit-scrollbar{display:none}.nav-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}.nav-btn:hover{background:var(--color-primary-light);color:var(--color-primary)}.nav-btn.active{background:var(--color-primary);color:#fff}.nav-icon{font-size:16px}.app-main{flex:1;overflow:hidden;position:relative}.knowledge-map{width:100%;height:100%;overflow:auto;position:relative;background:linear-gradient(135deg,#f0f4ff,#e0e7ff,#f0f4ff);cursor:grab}.knowledge-map:active{cursor:grabbing}.map-canvas-container{width:1600px;height:900px;position:relative}.map-canvas{width:100%;height:100%}.map-legend{position:absolute;bottom:16px;left:16px;background:#fffffff2;padding:12px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:8px;font-size:13px}.legend-item{display:flex;align-items:center;gap:8px}.legend-dot{width:14px;height:14px;border-radius:50%}.legend-dot.locked{background:var(--color-locked)}.legend-dot.available{background:var(--color-available)}.legend-dot.learning{background:var(--color-learning)}.legend-dot.mastered{background:var(--color-mastered)}.module-header{padding:12px 20px;background:var(--color-card);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:12px}.module-badge{width:12px;height:12px;border-radius:50%}.module-title{font-size:18px;font-weight:700}.module-desc{color:var(--color-text-secondary);font-size:13px}.node-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}.node-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.node-card-header{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--color-border)}.node-status-badge{width:12px;height:12px;border-radius:50%;flex-shrink:0}.node-name{font-size:18px;font-weight:700}.node-body{padding:16px 20px}.node-summary{color:var(--color-text-secondary);font-size:14px;line-height:1.6;margin-bottom:12px}.node-meta{display:flex;gap:16px;font-size:13px;color:var(--color-text-secondary)}.node-actions{padding:12px 20px;display:flex;gap:8px;border-top:1px solid var(--color-border);background:var(--color-bg)}.learning-space{height:100%;display:flex;flex-direction:column;overflow:hidden}.learning-header{padding:16px 20px;background:var(--color-card);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.learning-title{font-size:20px;font-weight:700}.learning-progress{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-secondary)}.progress-bar{width:120px;height:8px;background:var(--color-border);border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--color-success);border-radius:4px;transition:width .5s}.learning-nav{display:flex;gap:4px;padding:12px 20px;background:var(--color-card);border-bottom:1px solid var(--color-border);flex-shrink:0;overflow-x:auto}.step-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-card);color:var(--color-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}.step-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.step-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.step-btn.completed{border-color:var(--color-success);color:var(--color-success)}.step-icon{font-size:14px}.learning-content{flex:1;overflow-y:auto;padding:20px;background:var(--color-bg)}.content-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:20px;max-width:800px;margin-left:auto;margin-right:auto}.content-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}.content-text{font-size:16px;line-height:1.8;color:var(--color-text);margin-bottom:16px}.content-highlight{background:var(--color-primary-light);padding:16px 20px;border-radius:var(--radius-md);border-left:4px solid var(--color-primary);font-size:15px;color:var(--color-primary-dark);margin:16px 0}.discover-panel{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;max-width:800px;margin:0 auto}.discover-title{font-size:18px;font-weight:700;margin-bottom:8px}.discover-instructions{color:var(--color-text-secondary);font-size:14px;margin-bottom:20px}.interactive-canvas-container{border:2px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:20px;background:#fafafa}.feedback-area{padding:16px;border-radius:var(--radius-md);margin-bottom:16px;font-size:15px;line-height:1.6}.feedback-area.success{background:#dcfce7;border:1px solid #86efac;color:#166534}.feedback-area.error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}.feedback-area.hint{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}.guess-options{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.guess-option{padding:12px 24px;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-card);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;min-width:80px;text-align:center}.guess-option:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)}.guess-option.selected-correct{border-color:var(--color-success);background:#dcfce7;color:#166534}.guess-option.selected-wrong{border-color:var(--color-danger);background:#fee2e2;color:#991b1b}.three-step-card{display:flex;flex-direction:column;gap:16px}.step-card{padding:20px;border-radius:var(--radius-md);border-left:4px solid}.step-card.what{border-color:var(--color-primary);background:var(--color-primary-light)}.step-card.like{border-color:var(--color-secondary);background:#fef3c7}.step-card.for{border-color:var(--color-success);background:#dcfce7}.step-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.step-card.what .step-label{color:var(--color-primary)}.step-card.like .step-label{color:var(--color-secondary)}.step-card.for .step-label{color:var(--color-success)}.step-content{font-size:15px;line-height:1.7}.method-kit{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;max-width:800px;margin:0 auto}.kit-name{font-size:20px;font-weight:700;color:var(--color-primary);margin-bottom:12px}.kit-rhyme{background:var(--color-primary-light);padding:16px 20px;border-radius:var(--radius-md);font-size:16px;font-weight:600;color:var(--color-primary-dark);text-align:center;margin-bottom:20px;font-style:italic}.steps-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.step-item{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;background:var(--color-bg);border-radius:var(--radius-md)}.step-number{width:32px;height:32px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.step-detail h4{font-size:15px;font-weight:700;margin-bottom:4px}.step-detail p{font-size:14px;color:var(--color-text-secondary);line-height:1.5}.example-box{border:2px solid var(--color-primary-light);border-radius:var(--radius-md);padding:20px;margin-bottom:20px;background:#fafafa}.example-title{font-size:16px;font-weight:700;color:var(--color-primary);margin-bottom:12px}.example-problem{font-size:15px;font-weight:600;margin-bottom:12px;padding:12px;background:#fff;border-radius:var(--radius-sm);border-left:3px solid var(--color-primary)}.example-steps{display:flex;flex-direction:column;gap:8px}.example-step{font-size:14px;padding:8px 12px;background:#fff;border-radius:var(--radius-sm);color:var(--color-text);line-height:1.5}.key-idea{margin-top:12px;padding:12px;background:var(--color-primary-light);border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--color-primary-dark)}.mind-voice{background:#f0f9ff;border:2px dashed #7dd3fc;border-radius:var(--radius-md);padding:16px 20px;margin-bottom:20px;font-size:14px;line-height:1.7;color:#0c4a6e;font-style:italic}.mind-voice:before{content:"💭 ";font-style:normal}.traps-section{margin-bottom:20px}.traps-title{font-size:16px;font-weight:700;color:var(--color-danger);margin-bottom:12px;display:flex;align-items:center;gap:6px}.trap-item{padding:16px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-md);margin-bottom:12px}.trap-name{font-weight:700;color:var(--color-danger);margin-bottom:8px;font-size:14px}.trap-desc{font-size:14px;color:var(--color-text);margin-bottom:8px;line-height:1.5}.trap-example{font-size:13px;color:var(--color-text-secondary);background:#fff;padding:8px 12px;border-radius:var(--radius-sm);margin-bottom:8px}.trap-avoid{font-size:13px;color:var(--color-success);font-weight:600}.variations-section{margin-top:20px}.variations-title{font-size:16px;font-weight:700;margin-bottom:12px}.variation-item{padding:12px 16px;background:var(--color-bg);border-radius:var(--radius-md);margin-bottom:8px;font-size:14px}.variation-type{font-weight:700;color:var(--color-secondary);margin-bottom:4px;font-size:13px}.variation-hint{color:var(--color-text-secondary);font-size:13px;margin-top:4px}.exercise-panel{height:100%;display:flex;flex-direction:column;overflow:hidden}.exercise-header{padding:16px 20px;background:var(--color-card);border-bottom:1px solid var(--color-border);flex-shrink:0}.exercise-content{flex:1;overflow-y:auto;padding:20px}.exercise-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;max-width:800px;margin:0 auto 20px}.exercise-number{font-size:13px;color:var(--color-text-secondary);margin-bottom:8px}.exercise-question{font-size:17px;font-weight:600;line-height:1.6;margin-bottom:20px}.exercise-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.exercise-option{padding:14px 18px;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-card);font-size:15px;cursor:pointer;transition:all .2s;text-align:left}.exercise-option:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.exercise-option.selected{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary-dark)}.exercise-option.correct{border-color:var(--color-success);background:#dcfce7;color:#166534}.exercise-option.wrong{border-color:var(--color-danger);background:#fee2e2;color:#991b1b}.exercise-fill-input{width:100%;padding:14px 18px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:16px;margin-bottom:20px;transition:border-color .2s}.exercise-fill-input:focus{outline:none;border-color:var(--color-primary)}.exercise-actions{display:flex;gap:12px}.btn{padding:12px 24px;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-success{background:var(--color-success);color:#fff}.btn-danger{background:var(--color-danger);color:#fff}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.btn-sm{padding:8px 16px;font-size:13px}.btn-lg{padding:16px 32px;font-size:16px}.mistake-book{height:100%;overflow-y:auto;padding:20px}.mistake-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.mistake-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.mistake-card-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border)}.mistake-card-body{padding:16px 20px}.mistake-card-footer{padding:12px 20px;background:var(--color-bg);display:flex;gap:12px}.error-type-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}.error-type-badge.concept{background:#dbeafe;color:#1e40af}.error-type-badge.calculation{background:#fce7f3;color:#9d174d}.error-type-badge.method{background:#fef3c7;color:#92400e}.error-type-badge.reading{background:#d1fae5;color:#065f46}.report-panel{height:100%;overflow-y:auto;padding:20px}.report-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.report-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px}.report-card-title{font-size:16px;font-weight:700;color:var(--color-text-secondary);margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.report-stat{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.report-stat-value{font-size:36px;font-weight:700;color:var(--color-primary)}.report-stat-label{font-size:14px;color:var(--color-text-secondary)}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.achievement-item{padding:16px;background:var(--color-bg);border-radius:var(--radius-md);text-align:center;transition:all .2s}.achievement-item.unlocked{background:var(--color-primary-light);border:2px solid var(--color-primary)}.achievement-item.locked{opacity:.5}.achievement-icon{font-size:32px;margin-bottom:8px}.achievement-name{font-size:13px;font-weight:600;margin-bottom:4px}.achievement-desc{font-size:11px;color:var(--color-text-secondary)}.method-library{height:100%;overflow-y:auto;padding:20px}.method-library-grid{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:20px}.method-library-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;cursor:pointer;transition:all .2s;border:2px solid transparent}.method-library-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.number-line-container{width:100%;height:320px;position:relative;background:#fafafa;border-radius:var(--radius-md);overflow:hidden}.number-line-controls{display:flex;gap:12px;padding:12px 16px;background:var(--color-card);border-top:1px solid var(--color-border);align-items:center}.number-line-question{font-size:15px;font-weight:600;margin-bottom:16px;color:var(--color-text)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-text-secondary);text-align:center;padding:40px}.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state-text{font-size:16px;margin-bottom:8px}.empty-state-hint{font-size:14px;opacity:.7}.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}.tag-easy{background:#dcfce7;color:#166534}.tag-medium{background:#fef3c7;color:#92400e}.tag-hard{background:#fee2e2;color:#991b1b}@media (max-width: 768px){.app-nav{padding:6px 8px}.nav-btn{padding:6px 10px;font-size:12px}.nav-label{display:none}.app-header h1{font-size:16px}.app-subtitle{display:none}.content-card{padding:16px}.report-grid{grid-template-columns:1fr}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}