@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-color:#0b0f19;--panel-bg:#111827;--header-bg:#111827cc;--border-color:#1f2937;--text-main:#f3f4f6;--text-muted:#9ca3af;--text-accent:#60a5fa;--diff-add-bg:#064e3b;--diff-add-text:#a7f3d0;--diff-remove-bg:#7f1d1d;--diff-remove-text:#fecaca;--diff-empty-bg:#111827;--diff-line-num-bg:#1f2937;--diff-line-num-text:#6b7280;--btn-primary:#3b82f6;--btn-primary-hover:#2563eb;--btn-secondary:#374151;--btn-secondary-hover:#4b5563}.diff-app.light-theme{--bg-color:#f8fafc;--panel-bg:#fff;--header-bg:#ffffffd9;--border-color:#e2e8f0;--text-main:#1e293b;--text-muted:#64748b;--text-accent:#3b82f6;--diff-add-bg:#dcfce7;--diff-add-text:#166534;--diff-remove-bg:#fee2e2;--diff-remove-text:#991b1b;--diff-empty-bg:#f8fafc;--diff-line-num-bg:#f1f5f9;--diff-line-num-text:#94a3b8;--btn-secondary:#e2e8f0;--btn-secondary-hover:#cbd5e1}.diff-app.light-theme .sidebar{background-color:#fffffff2}.diff-app.light-theme .header-title h1{color:#0f172a}.diff-app.light-theme .btn-secondary{color:#475569}.diff-app.light-theme .icon-btn{color:#64748b}.diff-app.light-theme .icon-btn:hover{color:#0f172a;background-color:#e2e8f0}.diff-app.light-theme .stat-pill{background-color:#f1f5f9}.diff-app.light-theme .merge-controls{background-color:#fff;border-color:#cbd5e1}.diff-app.light-theme .merge-btn{color:#64748b}.diff-app.light-theme .merge-btn:hover{color:#0f172a;background-color:#f1f5f9}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,sans-serif;line-height:1.5}.diff-app{height:100vh;display:flex;overflow:hidden}.sidebar{border-right:1px solid var(--border-color);z-index:20;background-color:#111827f2;flex-direction:column;width:260px;padding:1.5rem 1rem;display:flex}.brand{border-bottom:1px solid #ffffff0d;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:0 .5rem 2rem;display:flex}.brand-icon{color:#60a5fa}.brand-text{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:700}.nav-menu{flex-direction:column;flex:1;gap:.5rem;display:flex}.nav-item{color:var(--text-muted);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:.5rem;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--text-main);background-color:#3b82f61a}.nav-item.active{color:#60a5fa}.sidebar-bottom{flex-direction:column;gap:1rem;display:flex}.pro-badge{color:#a78bfa;text-transform:uppercase;background:linear-gradient(135deg,#60a5fa1a,#a78bfa1a);border:1px solid #a78bfa33;border-radius:.5rem;align-items:center;gap:.5rem;padding:.75rem;font-size:.75rem;font-weight:600;display:flex}.user-profile{color:var(--text-muted);align-items:center;gap:.75rem;padding:.5rem;font-size:.875rem;font-weight:500;display:flex}.main-content{background-color:var(--bg-color);flex-direction:column;flex:1;display:flex;overflow-y:auto}.diff-header{border-bottom:1px solid var(--border-color);background-color:#0000;justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.header-title h1{color:var(--text-main);font-size:1.5rem;font-weight:600;line-height:1.2}.text-muted{color:var(--text-muted);font-size:.875rem}.header-brand{background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;display:flex}.header-actions{gap:1rem;display:flex}.btn{cursor:pointer;border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-primary{background-color:var(--btn-primary);color:#fff;box-shadow:0 4px 6px -1px #3b82f633,0 2px 4px -1px #3b82f61a}.btn-primary:hover{background-color:var(--btn-primary-hover);transform:translateY(-1px)}.btn-secondary{background-color:var(--btn-secondary);color:#fff}.btn-secondary:hover{background-color:var(--btn-secondary-hover)}.checkbox-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:.5rem;margin-right:1rem;font-size:.875rem;display:flex}.stats-bar{border-bottom:1px solid var(--border-color);gap:1.5rem;padding:1rem 2rem;display:flex}.stat-card{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:.5rem;align-items:baseline;gap:.75rem;padding:.75rem 1.25rem;display:flex}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.stat-val{font-size:1.25rem;font-weight:700}.text-accent{color:var(--text-accent)}.text-green{color:#34d399}.text-red{color:#f87171}.diff-container{flex:1;gap:1.5rem;padding:1.5rem 2rem;display:flex;overflow:hidden}.editor-panel{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:.75rem;flex-direction:column;flex:1;display:flex;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.panel-header{border-bottom:1px solid var(--border-color);background-color:#1f293780;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;font-weight:600;display:flex}.panel-header .label{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.panel-actions{gap:.5rem;display:flex}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:.25rem .5rem;transition:all .2s;display:inline-flex}.icon-btn:hover{color:#fff;background-color:#374151}.icon-btn.icon-btn-danger:hover{color:#fca5a5;background-color:#7f1d1d}.text-editor{resize:none;width:100%;color:var(--text-main);font-family:JetBrains Mono,monospace;font-size:var(--editor-font-size,.875rem);background:0 0;border:none;outline:none;flex:1;padding:1.25rem;line-height:1.6}.diff-view-mode{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:.75rem;flex-direction:column;flex:1;display:flex;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a}.diff-header-bar{border-bottom:1px solid var(--border-color);background-color:#1f293780;padding:.75rem 1.25rem;display:flex}.diff-header-bar .col{color:var(--text-muted);text-align:center;flex:1;font-size:.875rem;font-weight:600}.diff-content{font-family:JetBrains Mono,monospace;font-size:var(--editor-font-size,.875rem);flex-direction:column;flex:1;line-height:1.5;display:flex;overflow-y:auto}.diff-line{width:100%;display:flex}.diff-half{flex:1;min-width:0;display:flex}.diff-half.added{background-color:#064e3b4d}.diff-half.removed{background-color:#7f1d1d4d}.diff-half.empty{background-color:var(--diff-empty-bg)}.line-num{text-align:right;width:3rem;color:var(--diff-line-num-text);background-color:var(--diff-line-num-bg);-webkit-user-select:none;user-select:none;border-right:1px solid var(--border-color);flex-shrink:0;justify-content:flex-end;align-items:center;padding:0 .5rem;font-size:.75rem;display:flex}.line-content{white-space:var(--word-wrap,pre-wrap);word-break:break-all;flex:1;min-height:1.5rem;padding:0 .75rem}.diff-app.light-theme .line-content{color:#1e293b}.added .line-content{color:var(--diff-add-text);background-color:var(--diff-add-bg)}.removed .line-content{color:var(--diff-remove-text);background-color:var(--diff-remove-bg)}.chunk-change{border-top:1px solid #0000;border-bottom:1px solid #0000;transition:border-color .2s}.chunk-change:hover{border-color:#374151}.merge-controls{z-index:10;opacity:0;background-color:#1f2937;border:1px solid #4b5563;border-radius:.25rem;gap:.25rem;padding:.25rem;transition:opacity .2s;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #00000080}.diff-line.group:hover .merge-controls{opacity:1}.merge-btn{color:#d1d5db;cursor:pointer;background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:.25rem;display:flex}.merge-btn:hover{color:#fff;background-color:#4b5563}.placeholder-view{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;width:100%;height:auto;min-height:100%;display:flex}@media (width<=768px){.diff-app{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--border-color);flex-direction:row;align-items:center;width:100%;height:auto;padding:1rem;overflow-x:auto}.brand{border-bottom:none;margin-bottom:0;padding:0}.nav-menu{flex-direction:row;flex:none;gap:.25rem}.nav-item{width:auto;padding:.5rem}.nav-item span,.sidebar-bottom{display:none}.main-content{height:calc(100vh - 60px)}}.placeholder-content{background-color:var(--panel-bg);border:1px solid var(--border-color);text-align:center;border-radius:1rem;flex-direction:column;align-items:center;gap:1.5rem;max-width:480px;padding:4rem;display:flex;box-shadow:0 10px 25px -5px #0003}.placeholder-icon{color:var(--text-muted);opacity:.5;margin-bottom:.5rem}.placeholder-content h2{color:var(--text-main);font-size:1.5rem;font-weight:700}.placeholder-content p{color:var(--text-muted);line-height:1.6}.feature-page{width:100%;max-width:1200px;margin:0 auto;padding:2.5rem}.feature-header{border-bottom:1px solid var(--border-color);background-color:var(--bg-color);z-index:10;margin-top:-2.5rem;margin-bottom:2rem;padding-top:2.5rem;padding-bottom:1.5rem;position:sticky;top:0}.feature-header h2{color:var(--text-main);margin-bottom:.5rem;font-size:1.875rem;font-weight:700}.feature-header p{color:var(--text-muted)}.saved-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;display:grid}.saved-card{background-color:var(--panel-bg);border:1px solid var(--border-color);cursor:pointer;border-radius:.75rem;flex-direction:column;gap:1.25rem;padding:1.5rem;transition:all .2s;display:flex}.saved-card:hover{border-color:#4b5563;transform:translateY(-4px);box-shadow:0 10px 20px -5px #0000004d}.saved-card-header h3{color:var(--text-main);margin-bottom:.25rem;font-size:1.125rem;font-weight:600}.saved-date{color:var(--text-muted);font-size:.75rem}.saved-card-stats{gap:.75rem;margin-top:auto;font-size:.875rem;font-weight:600;display:flex}.saved-card-actions{display:flex}.stat-pill{background-color:#1f293780;border-radius:.25rem;align-items:center;padding:.25rem .5rem;display:flex}.relative{position:relative}.line-hover-group .line-merge-btn{opacity:0;pointer-events:none}.line-hover-group:hover .line-merge-btn{opacity:1;pointer-events:auto}.line-merge-btn{color:#fff;cursor:pointer;z-index:10;background-color:#374151;border:none;border-radius:.25rem;padding:.1rem .3rem;font-size:12px;transition:opacity .2s,background-color .2s;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 2px #0003}.line-merge-btn:hover{background-color:#4b5563}.diff-app.light-theme .line-merge-btn{color:#1e293b;background-color:#e2e8f0}.diff-app.light-theme .line-merge-btn:hover{background-color:#cbd5e1}.line-merge-btn.right{right:4.5rem}.line-merge-btn.left{left:4.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.diff-container>*{animation:.4s ease-out forwards fadeIn}.editor-panel:nth-child(2){animation-delay:.1s}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#374151}