.file-diff-container{min-height:100vh;background:#fff;padding:2rem}.diff-card{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);padding:2rem;max-width:1400px;margin:0 auto}.neon-text{font-size:2rem;font-weight:700;text-align:center;color:var(--text-primary, #1f2937);margin-bottom:.5rem}.subtitle{text-align:center;color:var(--text-secondary);font-size:1rem;margin-bottom:2rem}.upload-section{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;margin-bottom:2rem;align-items:center}.upload-box{border:3px dashed #667eea;border-radius:15px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:#667eea0d;min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center}.upload-box:hover{border-color:#764ba2;background:#667eea1a;transform:translateY(-2px)}.upload-icon{font-size:3rem;margin-bottom:1rem}.upload-hint{color:var(--text-tertiary);font-size:.85rem;margin-top:.5rem}.upload-divider{font-size:1.5rem;font-weight:700;color:#667eea;background:var(--bg-card);padding:1rem;border-radius:var(--radius-full);width:60px;height:60px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px var(--space-3) #667eea4d}.file-info-box{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-icon{font-size:3rem}.file-name{font-weight:600;color:var(--text-primary);word-break:break-all;max-width:100%}.file-size{color:var(--text-tertiary);font-size:.9rem}.controls-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;background:var(--bg-card);border-radius:10px;margin-bottom:1.5rem;flex-wrap:wrap;box-shadow:0 2px var(--space-2) #0000001a}.mode-selector{display:flex;gap:.5rem}.mode-btn{padding:.5rem 1rem;border:2px solid #667eea;background:var(--bg-card);border-radius:var(--space-2);cursor:pointer;font-weight:600;color:#667eea;transition:all .3s ease}.mode-btn:hover{background:#667eea1a}.mode-btn.active{background:#667eea;border-color:transparent}.options{display:flex;gap:1rem;align-items:center}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text-secondary);font-size:.95rem}.checkbox-label input[type=checkbox]{cursor:pointer;width:18px;height:18px}.action-btns{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:none;border-radius:var(--space-2);font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#667eea}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px var(--space-3) #667eea66}.btn-secondary{background:linear-gradient(135deg,var(--color-warning-500) 0%,#d97706 100%);color:#fff}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 4px var(--space-3) #f59e0b66}.btn-danger{background:linear-gradient(135deg,var(--color-danger-500) 0%,var(--color-danger-600) 100%);color:#fff}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 4px var(--space-3) #ef444466}.statistics-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem;padding:1.5rem;background:var(--bg-card);border-radius:15px;box-shadow:0 4px var(--space-4) #0000001a}.stat-item{text-align:center;padding:1rem;border-radius:10px;background:#667eea0d;display:flex;flex-direction:column;gap:.5rem}.stat-item.highlight{background:linear-gradient(135deg,#667eea1a,#764ba21a);border:2px solid rgba(102,126,234,.3)}.stat-label{color:var(--text-secondary);font-size:.9rem}.stat-value{font-size:1.8rem;font-weight:700;color:var(--text-primary)}.stat-value.stat-equal{color:#10b981}.stat-value.stat-delete{color:var(--color-danger-500)}.stat-value.stat-insert{color:var(--color-info-500)}.stat-value.stat-similarity{color:#667eea}.diff-result-section{margin-bottom:2rem}.diff-result-section h3{color:#667eea;margin-bottom:1rem;font-size:1.3rem}.diff-view-side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--bg-card);border-radius:15px;overflow:hidden;box-shadow:0 4px var(--space-4) #0000001a}.diff-column{display:flex;flex-direction:column}.column-header{padding:1rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--color-gray-200)}.column-header.left{background:linear-gradient(135deg,#ef44441a,#dc26261a);color:var(--color-danger-500)}.column-header.right{background:linear-gradient(135deg,#3b82f61a,#2563eb1a);color:var(--color-info-500)}.file-info{font-size:.85rem;color:var(--text-tertiary)}.diff-content{flex:1;overflow-y:auto;max-height:600px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9rem}.diff-line{display:flex;align-items:flex-start;padding:.25rem .5rem;line-height:1.6;border-bottom:1px solid var(--color-gray-100)}.line-number{display:inline-block;width:50px;text-align:right;color:#9ca3af;-webkit-user-select:none;user-select:none;flex-shrink:0;padding-right:1rem;font-size:.85rem}.line-text{flex:1;white-space:pre-wrap;word-break:break-all}.line-equal{background:var(--bg-card)}.line-delete{background:#ef44441a;border-left:3px solid var(--color-danger-500)}.line-insert{background:#3b82f61a;border-left:3px solid var(--color-info-500)}.line-empty{background:var(--color-gray-50);color:var(--color-gray-300)}.diff-view-unified{background:var(--bg-card);border-radius:15px;padding:1.5rem;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9rem;max-height:600px;overflow-y:auto;box-shadow:0 4px var(--space-4) #0000001a}.diff-chunk{margin-bottom:2rem;border:1px solid var(--color-gray-200);border-radius:var(--space-2);overflow:hidden}.chunk-header{background:#667eea1a;color:#667eea;padding:.5rem 1rem;font-weight:600;border-bottom:1px solid var(--color-gray-200)}.line-prefix{display:inline-block;width:30px;text-align:center;font-weight:700;-webkit-user-select:none;user-select:none}.line-context{background:var(--bg-card)}.tips-section,.usage-section{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:15px;padding:2rem;margin-bottom:2rem}.tips-section h3,.usage-section h3{color:#667eea;margin-bottom:1.5rem;font-size:1.3rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.feature-item{background:var(--bg-card);padding:1.5rem;border-radius:10px;text-align:center;transition:all .3s ease}.feature-item:hover{transform:translateY(-4px);box-shadow:0 4px var(--space-3) #0000001a}.feature-icon{font-size:2rem;margin-bottom:.5rem}.feature-title{font-weight:600;color:#667eea;margin-bottom:.5rem}.feature-desc{color:var(--text-secondary);font-size:.9rem}.usage-section ul{list-style:none;padding:0}.usage-section li{color:var(--text-secondary);position:relative;padding:.5rem 0 .5rem 1.5rem}.usage-section li:before{content:"•";position:absolute;left:0;color:#667eea;font-weight:700;font-size:1.2rem}.line-delete-demo{background:#ef444433;padding:.2rem .5rem;border-radius:4px;border-left:3px solid var(--color-danger-500)}.line-insert-demo{background:#3b82f633;padding:.2rem .5rem;border-radius:4px;border-left:3px solid var(--color-info-500)}.line-equal-demo{background:#667eea1a;padding:.2rem .5rem;border-radius:4px}@media (max-width: 1024px){.diff-view-side-by-side,.upload-section{grid-template-columns:1fr}.upload-divider{transform:rotate(90deg)}}@media (max-width: 768px){.file-diff-container{padding:1rem}.diff-card{padding:1.5rem}.neon-text{font-size:1.8rem}.controls-bar{flex-direction:column;align-items:stretch}.mode-selector,.options,.action-btns{width:100%;justify-content:center}.statistics-panel{grid-template-columns:repeat(2,1fr)}.features-grid{grid-template-columns:1fr}}