.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);max-width:600px;max-height:80vh;width:90%;overflow:hidden;animation:slideIn .3s ease}.modal-content.algorithm-modal{max-width:800px;max-height:85vh}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--border-color);background:var(--bg-primary)}.modal-title{font-size:16px;font-weight:600;color:var(--text-primary)}.modal-close{width:28px;height:28px;border:none;background:transparent;color:var(--text-secondary);font-size:20px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.modal-close:hover{background:var(--border-color);color:var(--text-primary)}.modal-tabs{display:flex;gap:4px;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-primary);border-bottom:1px solid var(--border-color);overflow-x:auto}.modal-tab{padding:8px 16px;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-radius:6px;transition:var(--transition-fast);white-space:nowrap}.modal-tab:hover{background:var(--border-color);color:var(--text-primary)}.modal-tab.active{background:var(--primary-color);color:#fff}.modal-body{padding:var(--spacing-md);overflow-y:auto;max-height:calc(85vh - 120px)}.algorithm-idea{line-height:1.8;color:var(--text-primary)}.algorithm-idea h3{font-size:15px;font-weight:600;margin:var(--spacing-lg) 0 var(--spacing-sm);color:var(--primary-color)}.algorithm-idea h3:first-child{margin-top:0}.algorithm-idea h4{font-size:14px;font-weight:600;margin:var(--spacing-md) 0 var(--spacing-sm);color:var(--text-primary)}.algorithm-idea p{margin-bottom:var(--spacing-sm);font-size:14px}.algorithm-idea ul{margin:var(--spacing-sm) 0;padding-left:var(--spacing-lg)}.algorithm-idea li{margin-bottom:var(--spacing-xs);font-size:14px}.algorithm-idea code{background:var(--bg-primary);padding:2px 6px;border-radius:3px;font-family:var(--font-mono);font-size:13px;color:var(--primary-dark)}.algorithm-idea .formula{background:var(--bg-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);margin:var(--spacing-sm) 0;font-family:var(--font-mono);font-size:13px;overflow-x:auto}.idea-card{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius);margin-bottom:var(--spacing-md);border-left:4px solid var(--primary-color)}.idea-card.highlight-card{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-left-color:var(--accent-color)}.card-icon{font-size:28px;flex-shrink:0}.card-content h3{margin:0 0 var(--spacing-xs) 0;color:var(--text-primary)}.card-content p{margin:0}.highlight-text{color:var(--primary-color);font-weight:600}.definition-box{background:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color)}.definition-box p{margin:0}.operations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin:var(--spacing-md) 0}@media(max-width:600px){.operations-grid{grid-template-columns:1fr}}.operation-card{padding:var(--spacing-md);border-radius:var(--border-radius);text-align:center;transition:var(--transition-fast)}.operation-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.insert-card{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:1px solid var(--op-insert)}.delete-card{background:linear-gradient(135deg,#ffebee,#ffcdd2);border:1px solid var(--op-delete)}.replace-card{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:1px solid var(--op-replace)}.op-icon{font-size:24px;margin-bottom:var(--spacing-xs)}.op-name{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.op-desc{font-size:12px;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.op-example{font-family:var(--font-mono);font-size:14px;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.op-example .arrow{color:var(--text-secondary)}.highlight-insert{background:var(--op-insert);color:#fff;padding:0 4px;border-radius:2px}.highlight-delete{background:var(--op-delete);color:#fff;padding:0 4px;border-radius:2px;text-decoration:line-through}.highlight-replace{background:var(--op-replace);color:#fff;padding:0 4px;border-radius:2px}.applications-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}@media(max-width:500px){.applications-list{grid-template-columns:1fr}}.app-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius)}.app-icon{font-size:18px}.app-text{font-size:13px}.state-definition{margin:var(--spacing-md) 0}.state-box{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:var(--border-radius);flex-wrap:wrap}.state-code{font-size:18px;font-weight:600;background:#fff;padding:4px 12px;border-radius:4px}.state-equals{font-size:18px;color:var(--text-secondary)}.state-meaning{font-size:14px}.case-analysis{display:flex;flex-direction:column;gap:var(--spacing-md)}.case-card{padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color)}.case-match{background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border-color:var(--success-color)}.case-diff{background:linear-gradient(135deg,#fff8e1,#ffecb3);border-color:var(--warning-color)}.case-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.case-icon{font-size:20px}.case-title{font-size:15px;font-weight:600;color:var(--text-primary)}.case-condition{margin-bottom:var(--spacing-sm)}.case-condition code{font-size:14px}.case-explanation{margin-bottom:var(--spacing-sm)}.case-explanation p{margin:0 0 var(--spacing-xs) 0;font-size:13px}.case-formula{background:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:4px;display:inline-block}.case-formula code{font-size:15px;font-weight:600;background:transparent;color:var(--primary-dark)}.three-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-sm)}@media(max-width:600px){.three-choices{grid-template-columns:1fr}}.choice-item{background:#fff;padding:var(--spacing-sm);border-radius:var(--border-radius);text-align:center}.choice-op{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.choice-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}.insert-icon{background:var(--op-insert)}.delete-icon{background:var(--op-delete)}.replace-icon{background:var(--op-replace)}.choice-name{font-weight:600;font-size:14px}.choice-desc{font-size:11px;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.choice-formula{font-size:12px;display:block}.boundary-conditions{display:flex;flex-direction:column;gap:var(--spacing-sm)}.boundary-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius);flex-wrap:wrap}.boundary-item code{font-size:14px;font-weight:600}.boundary-explain{font-size:13px;color:var(--text-secondary)}.example-intro{margin-bottom:var(--spacing-md)}.step-by-step{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.step-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius)}.step-number{width:28px;height:28px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}.step-content{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.step-operation{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;color:#fff}.replace-op{background:var(--op-replace)}.delete-op{background:var(--op-delete)}.insert-op{background:var(--op-insert)}.step-detail{font-family:var(--font-mono);font-size:14px;display:flex;align-items:center;gap:var(--spacing-xs)}.step-arrow{color:var(--text-secondary)}.char-highlight{background:var(--accent-color);color:#fff;padding:0 4px;border-radius:2px}.step-explain{font-size:12px;color:var(--text-secondary)}.correct-solution{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);padding:var(--spacing-md);border-radius:var(--border-radius);margin-bottom:var(--spacing-lg)}.correct-solution h4{margin:0 0 var(--spacing-sm) 0;color:var(--success-color)}.solution-steps{display:flex;flex-direction:column;gap:var(--spacing-xs)}.sol-step{display:flex;align-items:center;gap:var(--spacing-sm);font-size:14px}.sol-num{font-weight:600;color:var(--primary-color)}.sol-op{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;color:#fff}.replace-tag{background:var(--op-replace)}.delete-tag{background:var(--op-delete)}.insert-tag{background:var(--op-insert)}.sol-detail{font-family:var(--font-mono);font-size:13px}.dp-table-demo{overflow-x:auto;margin:var(--spacing-md) 0}.demo-table{border-collapse:collapse;margin:0 auto}.demo-table th,.demo-table td{width:40px;height:40px;text-align:center;border:1px solid var(--border-color);font-size:14px}.demo-table th,.header-cell{background:var(--cell-header);font-weight:600}.init-cell{background:#e3f2fd;color:var(--primary-dark)}.calc-cell{background:#fff}.match-cell{background:#c8e6c9;color:#2e7d32;font-weight:600}.result-cell{background:var(--accent-color);color:#fff;font-weight:700}.table-legend{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-sm);flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:var(--spacing-xs);font-size:12px;color:var(--text-secondary)}.legend-color.init{background:#e3f2fd}.legend-color.match{background:#c8e6c9}.legend-color.calc{background:#fff}.legend-color.result{background:var(--accent-color)}.reading-tip{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background:linear-gradient(135deg,#fff8e1,#ffecb3);border-radius:var(--border-radius);border-left:4px solid var(--accent-color)}.tip-icon{font-size:24px;flex-shrink:0}.tip-content{font-size:13px}.tip-content p{margin:var(--spacing-xs) 0 0 0}.formula-box{background:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--border-radius);margin:var(--spacing-md) 0}.formula-box.main-formula{background:linear-gradient(135deg,#e8eaf6,#c5cae9);border:1px solid #7986cb}.formula-case{margin-bottom:var(--spacing-md)}.formula-case:last-child{margin-bottom:0}.formula-condition{font-size:13px;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.formula-equation{background:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:4px;display:inline-block}.formula-equation code{font-size:15px;font-weight:600;background:transparent}.operation-mapping{display:flex;flex-direction:column;gap:var(--spacing-sm)}.mapping-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius);flex-wrap:wrap}.mapping-direction{display:flex;align-items:center;gap:var(--spacing-xs);min-width:120px}.dir-arrow{width:24px;height:24px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.mapping-op{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;color:#fff}.mapping-explain{font-size:13px;color:var(--text-secondary)}.complexity-box{display:flex;flex-direction:column;gap:var(--spacing-sm)}.complexity-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius);flex-wrap:wrap}.complexity-label{font-weight:600;font-size:14px;min-width:80px}.complexity-value{font-size:16px;font-weight:600;background:var(--primary-color);color:#fff;padding:4px 12px;border-radius:4px}.complexity-note{font-size:12px;color:var(--text-secondary)}.memory-tips{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}@media(max-width:600px){.memory-tips{grid-template-columns:1fr}}.tip-card{background:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color)}.tip-title{font-weight:600;font-size:14px;margin-bottom:var(--spacing-sm);color:var(--primary-color)}.tip-verse{font-size:13px;line-height:1.8}.tip-verse p{margin:0}.final-summary{background:linear-gradient(135deg,#e3f2fd,#bbdefb);padding:var(--spacing-md);border-radius:var(--border-radius);margin-top:var(--spacing-lg)}.final-summary h4{margin:0 0 var(--spacing-sm) 0;color:var(--primary-dark)}.final-summary p{margin:0;font-size:14px}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);min-height:50px}.header-left{display:flex;align-items:center}.back-link{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--primary-color);text-decoration:none;font-size:13px;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);transition:var(--transition-fast)}.back-link:hover{background:var(--bg-primary);color:var(--primary-dark)}.back-link svg{width:16px;height:16px}.header-center{flex:1;display:flex;justify-content:center}.title-link{color:var(--text-primary);text-decoration:none;font-size:18px;font-weight:600;transition:var(--transition-fast)}.title-link:hover{color:var(--primary-color)}.header-right{display:flex;align-items:center;gap:var(--spacing-md)}.algorithm-idea-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);font-size:13px;cursor:pointer;transition:var(--transition-fast)}.algorithm-idea-btn:hover{background:var(--primary-light);color:var(--text-light);border-color:var(--primary-light)}.algorithm-idea-btn svg{width:16px;height:16px}.github-section{display:flex;align-items:center;gap:var(--spacing-sm)}.github-link{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--text-primary);text-decoration:none;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);transition:var(--transition-fast)}.github-link:hover{background:var(--bg-primary)}.github-link svg{width:20px;height:20px}.star-count{display:flex;align-items:center;gap:2px;font-size:13px;color:var(--text-secondary)}.star-count svg{width:14px;height:14px;color:var(--accent-color)}.input-panel{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-xs) var(--spacing-sm);box-shadow:var(--shadow-sm);margin:var(--spacing-xs) var(--spacing-sm) 0}.input-inline{display:flex;align-items:center;gap:var(--spacing-xs);flex-wrap:nowrap}.input-label{font-size:13px;font-weight:500;color:var(--text-secondary);white-space:nowrap}.input-field{width:120px;padding:4px 8px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:13px;font-family:var(--font-mono);transition:var(--transition-fast)}.input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #2196f31a}.input-field.error{border-color:var(--error-color)}.action-btn{padding:4px 12px;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-primary);color:var(--text-primary);font-size:12px;cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.action-btn:hover,.action-btn.primary{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.action-btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.divider{color:var(--border-color);margin:0 4px}.example-btn{padding:2px 8px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-primary);color:var(--text-secondary);font-size:11px;cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.example-btn:hover{background:var(--secondary-color);color:var(--text-light);border-color:var(--secondary-color)}.error-message{color:var(--error-color);font-size:12px;margin-left:8px;white-space:nowrap}.code-panel{background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;flex:1;overflow:hidden}.code-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-sm);border-bottom:1px solid var(--border-color);background:var(--bg-primary)}.language-tabs{display:flex;gap:2px}.language-tab{padding:4px 10px;border:none;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;border-radius:4px;transition:var(--transition-fast)}.language-tab:hover{background:var(--bg-secondary);color:var(--text-primary)}.language-tab.active{background:var(--primary-color);color:var(--text-light)}.code-container{flex:1;overflow:auto;padding:var(--spacing-sm);background:#1e1e1e}.code-content{display:flex;font-family:var(--font-mono);font-size:12px;line-height:1.6}.line-numbers{display:flex;flex-direction:column;padding-right:var(--spacing-sm);border-right:1px solid #333;margin-right:var(--spacing-sm);color:#858585;-webkit-user-select:none;user-select:none;text-align:right;min-width:30px}.line-number{height:19.2px}.code-lines{flex:1;display:flex;flex-direction:column}.code-line{display:flex;align-items:center;height:19.2px;padding:0 var(--spacing-xs);border-radius:2px;transition:var(--transition-fast)}.code-line.highlighted{background:#ffeb3b33}.code-line-text{color:#d4d4d4;white-space:pre}.variable-value{margin-left:var(--spacing-md);padding:1px 6px;background:#4caf5033;border-radius:3px;color:#4caf50;font-size:11px}.code-line-text .keyword{color:#569cd6}.code-line-text .string{color:#ce9178}.code-line-text .number{color:#b5cea8}.code-line-text .comment{color:#6a9955}.code-line-text .function{color:#dcdcaa}.code-line-text .type{color:#4ec9b0}.code-line-text .operator{color:#d4d4d4}.canvas-container{flex:1;position:relative;overflow:hidden;background:linear-gradient(135deg,#f5f7fa,#e4e8ec)}.canvas-svg{width:100%;height:100%;cursor:grab}.canvas-svg:active{cursor:grabbing}.dp-table-group{transition:transform .3s ease}.dp-cell{stroke:var(--border-color);stroke-width:1;transition:fill .3s ease,stroke .3s ease}.dp-cell.cell-state-uninitialized{fill:var(--cell-uninitialized);stroke:var(--cell-border-uninitialized)}.dp-cell.cell-state-initialized{fill:var(--cell-initialized);stroke:var(--cell-border-initialized)}.dp-cell.cell-state-computing{fill:var(--cell-computing);stroke:var(--cell-border-computing);stroke-width:2}.dp-cell.cell-state-comparing{fill:var(--cell-comparing);stroke:var(--cell-border-comparing)}.dp-cell.cell-state-selected{fill:var(--cell-selected);stroke:var(--cell-border-selected);stroke-width:2}.dp-cell.cell-state-result{fill:var(--cell-result-new);stroke:var(--cell-border-result);stroke-width:2}.dp-cell.cell-state-final{fill:var(--cell-final);stroke:var(--cell-border-final);stroke-width:3}.dp-cell.header{fill:var(--cell-header)}.dp-cell.default{fill:var(--cell-default)}.dp-cell.current{fill:var(--cell-current);stroke:var(--accent-color);stroke-width:2}.dp-cell.compare{fill:var(--cell-compare)}.dp-cell.selected{fill:#ffd54f;stroke:#ff9800;stroke-width:2}.dp-cell.result{fill:var(--cell-result);stroke:var(--success-color);stroke-width:2}.dp-cell-text{font-family:var(--font-mono);font-size:14px;fill:var(--text-primary);text-anchor:middle;dominant-baseline:middle;pointer-events:none}.dp-cell-text.result{font-weight:600}.dp-header-text{font-family:var(--font-family);font-size:14px;fill:var(--text-secondary);text-anchor:middle;dominant-baseline:middle;pointer-events:none}.dp-header-text.empty-string{font-style:italic;fill:#999}.dp-header-text.highlighted{fill:var(--primary-color);font-weight:600;font-size:16px}.direction-label{font-size:10px;fill:#666;text-anchor:start;dominant-baseline:hanging}.selected-mark{font-size:12px;fill:#4caf50;text-anchor:end;dominant-baseline:hanging}.arrow-line{stroke:var(--primary-color);stroke-width:2;fill:none;marker-end:url(#arrowhead)}.arrow-line.match{stroke:#4caf50;marker-end:url(#arrowhead-match)}.arrow-label{font-family:var(--font-family);font-size:11px;fill:var(--text-primary);text-anchor:middle;font-weight:500}.arrow-label.match{fill:#2e7d32}.arrow-label-bg{fill:#fff;stroke:var(--primary-color);stroke-width:1}.arrow-label-bg.match{stroke:#4caf50;fill:#e8f5e9}.operation-label{font-family:var(--font-family);font-size:13px;font-weight:600;text-anchor:middle}.operation-label.insert{fill:var(--op-insert)}.operation-label.delete{fill:var(--op-delete)}.operation-label.replace{fill:var(--op-replace)}.operation-label.match{fill:var(--op-match)}.step-info-panel{position:absolute;top:var(--spacing-md);left:var(--spacing-md);background:#fffffffa;padding:var(--spacing-sm) var(--spacing-md);padding-top:calc(var(--spacing-sm) + 16px);border-radius:var(--border-radius);box-shadow:var(--shadow-md);max-width:320px;min-width:280px;max-height:calc(100% - 80px);overflow-y:auto;z-index:10;cursor:move;-webkit-user-select:none;user-select:none;transition:box-shadow .2s ease}.step-info-panel:hover{box-shadow:var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .15))}.step-info-panel.dragging{box-shadow:0 12px 32px #0003;opacity:.95}.panel-drag-hint{position:absolute;top:4px;left:50%;transform:translate(-50%);font-size:10px;color:#999;letter-spacing:2px;cursor:move}.step-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.step-number{font-size:12px;color:var(--text-secondary);font-weight:500}.operation-badge{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:500}.operation-badge.insert{background:#e3f2fd;color:#1565c0}.operation-badge.delete{background:#ffebee;color:#c62828}.operation-badge.replace{background:#fff3e0;color:#e65100}.operation-badge.match{background:#e8f5e9;color:#2e7d32}.operation-badge.init{background:#f3e5f5;color:#7b1fa2}.step-description{font-size:14px;color:var(--text-primary);font-weight:500;line-height:1.4;white-space:pre-line}.step-detail{font-size:12px;color:var(--text-secondary);margin-top:var(--spacing-xs);padding-top:var(--spacing-xs);border-top:1px solid var(--border-color);line-height:1.5;white-space:pre-line}.operation-choices{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-xs);padding-top:var(--spacing-xs);border-top:1px solid var(--border-color)}.operation-choices .choice{font-size:11px;padding:3px 8px;border-radius:4px;background:#f5f5f5;color:var(--text-secondary)}.operation-choices .choice.selected{background:#ffd54f;color:#333;font-weight:600}.zoom-controls{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-xs);z-index:10}.zoom-btn{width:32px;height:32px;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-secondary);color:var(--text-primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.zoom-btn:hover{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.legend{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:#fffffff2;padding:var(--spacing-sm);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);z-index:10}.legend-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.legend-item{display:flex;align-items:center;gap:var(--spacing-xs);font-size:11px;color:var(--text-secondary);margin-bottom:2px}.legend-color{width:16px;height:16px;border-radius:3px;border:1px solid var(--border-color)}.legend-color.uninitialized{background:var(--cell-uninitialized);border-color:var(--cell-border-uninitialized)}.legend-color.initialized{background:var(--cell-initialized);border-color:var(--cell-border-initialized)}.legend-color.computing{background:var(--cell-computing);border-color:var(--cell-border-computing)}.legend-color.comparing{background:var(--cell-comparing);border-color:var(--cell-border-comparing)}.legend-color.selected{background:var(--cell-selected);border-color:var(--cell-border-selected)}.legend-color.result{background:var(--cell-result-new);border-color:var(--cell-border-result)}.legend-color.final{background:var(--cell-final);border-color:var(--cell-border-final)}.legend-color.current{background:var(--cell-current)}.legend-color.compare{background:var(--cell-compare)}.control-panel{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--spacing-sm) var(--spacing-md)}.control-buttons{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.control-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-primary);color:var(--text-primary);font-size:13px;cursor:pointer;transition:var(--transition-fast);min-width:80px}.control-btn:hover{background:var(--primary-light);color:var(--text-light);border-color:var(--primary-light)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.primary{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.control-btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.control-btn svg{width:16px;height:16px}.shortcut-hint{font-size:10px;opacity:.7;margin-left:2px}.speed-control{display:flex;align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-md)}.speed-label{font-size:12px;color:var(--text-secondary);white-space:nowrap}.speed-slider-container{display:flex;align-items:center;gap:var(--spacing-xs)}.speed-slider{width:100px;height:4px;-webkit-appearance:none;appearance:none;background:var(--border-color);border-radius:2px;outline:none}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--primary-color);border-radius:50%;cursor:pointer;transition:var(--transition-fast)}.speed-slider::-webkit-slider-thumb:hover{background:var(--primary-dark);transform:scale(1.1)}.speed-value{font-size:12px;font-weight:500;color:var(--text-primary);min-width:35px}.progress-container{margin-top:var(--spacing-sm)}.progress-bar{position:relative;height:8px;background:var(--border-color);border-radius:4px;cursor:pointer;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--success-color),var(--primary-color));border-radius:4px;transition:width .1s ease}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--primary-color);border:2px solid white;border-radius:50%;box-shadow:var(--shadow-sm);cursor:grab;transition:var(--transition-fast)}.progress-handle:hover{transform:translate(-50%,-50%) scale(1.2)}.progress-handle:active{cursor:grabbing}.progress-info{display:flex;justify-content:space-between;margin-top:var(--spacing-xs);font-size:11px;color:var(--text-secondary)}.wechat-float{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);z-index:100}.wechat-trigger{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#07c160,#00a854);border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:var(--transition-normal)}.wechat-trigger:hover{transform:scale(1.1);box-shadow:0 8px 25px #07c16066}.wechat-trigger svg{width:28px;height:28px;fill:#fff}.wechat-trigger-text{font-size:8px;color:#fff;margin-top:2px;font-weight:500}.wechat-popup{position:absolute;bottom:70px;right:0;background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:var(--spacing-md);width:240px;animation:popupIn .3s ease}@keyframes popupIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.wechat-popup:after{content:"";position:absolute;bottom:-8px;right:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--bg-secondary)}.wechat-popup-title{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center;margin-bottom:var(--spacing-sm)}.wechat-popup-desc{font-size:12px;color:var(--text-secondary);text-align:center;margin-bottom:var(--spacing-sm)}.wechat-popup-highlight{color:#07c160;font-weight:500}.wechat-qr-image{width:100%;height:auto;border-radius:var(--border-radius);border:1px solid var(--border-color)}:root{--primary-color: #2196F3;--primary-light: #64B5F6;--primary-dark: #1976D2;--secondary-color: #00BCD4;--accent-color: #FF9800;--bg-primary: #f5f7fa;--bg-secondary: #ffffff;--bg-dark: #1e2a38;--text-primary: #2c3e50;--text-secondary: #7f8c8d;--text-light: #ffffff;--success-color: #4CAF50;--warning-color: #FF9800;--error-color: #f44336;--info-color: #2196F3;--cell-default: #ffffff;--cell-current: #FFE082;--cell-compare: #B3E5FC;--cell-result: #A5D6A7;--cell-header: #E3F2FD;--cell-uninitialized: #f5f5f5;--cell-initialized: #ffffff;--cell-computing: #FFE082;--cell-comparing: #B3E5FC;--cell-selected: #FFD54F;--cell-result-new: #A5D6A7;--cell-final: #81C784;--cell-border-uninitialized: #e0e0e0;--cell-border-initialized: #bdbdbd;--cell-border-computing: #FFA000;--cell-border-comparing: #03A9F4;--cell-border-selected: #FF9800;--cell-border-result: #4CAF50;--cell-border-final: #388E3C;--op-insert: #81C784;--op-delete: #E57373;--op-replace: #FFB74D;--op-match: #64B5F6;--border-color: #e0e0e0;--border-radius: 8px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .15);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "Fira Code", "Monaco", "Consolas", monospace;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary)}.app{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.main-content{display:flex;flex:1;overflow:hidden;padding:var(--spacing-sm);gap:var(--spacing-sm)}.left-panel{width:576px;min-width:500px;display:flex;flex-direction:column;gap:var(--spacing-sm);overflow:hidden}.canvas-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-md)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:3px}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}