:root{--color-bg-primary: #f8f9fa;--color-bg-secondary: #ffffff;--color-bg-tertiary: #f1f3f5;--color-bg-hover: #e9ecef;--color-text-primary: #212529;--color-text-secondary: #6c757d;--color-text-muted: #adb5bd;--color-border: #dee2e6;--color-border-focus: #4a6cf7;--color-same: #adb5bd;--color-modified: #fd7e14;--color-modified-bg: rgba(253, 126, 20, .08);--color-only-a: #dc3545;--color-only-a-bg: rgba(220, 53, 69, .06);--color-only-b: #28a745;--color-only-b-bg: rgba(40, 167, 69, .06);--color-risk: #dc3545;--color-accent: #4a6cf7;--color-accent-hover: #3a5ce7;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", "Consolas", monospace;--font-size-base: 15px;--font-size-sm: 13px;--font-size-xs: 12px;--transition-fast: .12s ease;--max-width: 1000px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-sans);font-size:var(--font-size-base);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}#root{min-height:100%;display:flex;flex-direction:column}h1,h2,h3{font-weight:600}button{font-family:inherit;font-size:var(--font-size-sm);font-weight:500;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--space-xs)}button:hover{background:var(--color-bg-hover);border-color:var(--color-text-muted)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}button.primary:hover{background:var(--color-accent-hover)}input,select{font-family:inherit;font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-secondary);color:var(--color-text-primary);transition:border-color var(--transition-fast)}input:focus,select:focus{outline:none;border-color:var(--color-accent)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-tertiary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.app{min-height:100%;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary)}.header-left{display:flex;align-items:center;gap:var(--space-lg)}.logo{font-size:17px;font-weight:600;display:flex;align-items:center;gap:var(--space-sm)}.mode-tabs{display:flex;gap:2px;background:var(--color-bg-tertiary);padding:3px;border-radius:var(--radius-md)}.mode-tab{padding:var(--space-xs) var(--space-md);border:none;background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.mode-tab:hover{color:var(--color-text-primary);background:transparent}.mode-tab.active{background:var(--color-bg-secondary);color:var(--color-text-primary);box-shadow:0 1px 2px #0000000d}.header-right{display:flex;align-items:center;gap:var(--space-lg)}.setting-group{display:flex;align-items:center;gap:var(--space-sm)}.setting-group label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.setting-group select{min-width:110px}.main{flex:1;max-width:var(--max-width);width:100%;margin:0 auto;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg)}.upload-section{display:flex;gap:var(--space-md)}.upload-zone{flex:1;border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-lg);text-align:center;cursor:pointer;transition:all var(--transition-fast);background:var(--color-bg-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm)}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--color-accent);background:var(--color-bg-tertiary)}.upload-zone.has-file{border-color:var(--color-only-b);border-style:solid}.upload-zone .icon{font-size:28px;opacity:.4}.upload-zone .label{font-size:var(--font-size-base);font-weight:500}.upload-zone .hint{font-size:var(--font-size-xs);color:var(--color-text-muted)}.upload-zone .file-name{font-size:var(--font-size-base);font-weight:500;color:var(--color-only-b)}.upload-zone .file-stats{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.upload-actions{display:flex;flex-direction:column;justify-content:center;gap:var(--space-sm)}.swap-btn{width:40px;height:40px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.swap-btn:hover{transform:rotate(180deg)}.upload-zone.single{max-width:360px}.stats-bar{display:flex;gap:var(--space-xl);padding:var(--space-md) var(--space-lg);background:var(--color-bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.stat{display:flex;align-items:baseline;gap:var(--space-sm)}.stat-value{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.stat.modified .stat-value{color:var(--color-modified)}.stat.only-a .stat-value{color:var(--color-only-a)}.stat.only-b .stat-value{color:var(--color-only-b)}.results{flex:1;display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-secondary);min-height:300px}.results-toolbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}.results-toolbar-left,.results-toolbar-right{display:flex;gap:var(--space-sm);align-items:center}.results-list{flex:1;overflow-y:auto;overflow-x:hidden}.results-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-muted);gap:var(--space-md);padding:var(--space-xl)}.results-empty .icon{font-size:40px;opacity:.3}.results-empty p{font-size:var(--font-size-base)}.diff-header{display:flex;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-bg-tertiary);cursor:pointer;transition:background var(--transition-fast);border-bottom:1px solid var(--color-border);-webkit-user-select:none;user-select:none}.diff-header:hover{background:var(--color-bg-hover)}.diff-header .expand-icon{width:24px;font-size:11px;color:var(--color-text-muted);transition:transform var(--transition-fast)}.diff-header .expand-icon.expanded{transform:rotate(90deg)}.diff-header .domain{flex:1;font-weight:500;font-size:var(--font-size-base)}.diff-header .count{font-size:var(--font-size-xs);padding:3px 8px;background:var(--color-bg-secondary);border-radius:var(--radius-sm);color:var(--color-text-secondary);margin-right:var(--space-sm)}.diff-header .risk-icon{color:var(--color-risk);font-size:14px}.diff-item{display:grid;grid-template-columns:180px 1fr auto;gap:var(--space-md);padding:var(--space-sm) var(--space-md);padding-left:calc(var(--space-md) + 24px);border-bottom:1px solid var(--color-border);align-items:center;transition:background var(--transition-fast)}.diff-item:hover{background:var(--color-bg-hover)}.diff-item.status-modified{background:var(--color-modified-bg)}.diff-item.status-only-a{background:var(--color-only-a-bg)}.diff-item.status-only-b{background:var(--color-only-b-bg)}.diff-item .username{font-family:var(--font-mono);font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-secondary)}.diff-item .password-diff{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-mono);font-size:var(--font-size-sm);min-width:0;overflow:hidden}.diff-item .arrow{color:var(--color-text-muted);flex-shrink:0}.diff-item .status-badge{font-size:var(--font-size-xs);padding:3px 8px;border-radius:var(--radius-sm);font-weight:500;flex-shrink:0}.diff-item .status-badge.modified{background:var(--color-modified);color:#fff}.diff-item .status-badge.only-a{background:var(--color-only-a);color:#fff}.diff-item .status-badge.only-b{background:var(--color-only-b);color:#fff}.password-cell{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:180px}.password-cell input{font-family:var(--font-mono);font-size:var(--font-size-sm);background:transparent;border:none;padding:0;color:var(--color-text-primary);min-width:0;flex:1}.password-cell input:focus{outline:none}.password-cell .peek-btn{padding:2px 4px;font-size:11px;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;opacity:.6;flex-shrink:0}.password-cell .peek-btn:hover{opacity:1}.merge-group{border-bottom:1px solid var(--color-border)}.merge-group.selected{background:var(--color-modified-bg)}.merge-group-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-tertiary);cursor:pointer;transition:background var(--transition-fast)}.merge-group-header:hover{background:var(--color-bg-hover)}.merge-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-accent)}.merge-group-header .domain{flex:1;font-weight:500;font-size:var(--font-size-base)}.merge-group-header .username{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.merge-group-header .count{font-size:var(--font-size-xs);color:var(--color-modified);padding:3px 8px;background:var(--color-modified-bg);border-radius:var(--radius-sm)}.merge-group-header .risk-icon{color:var(--color-risk);font-size:14px}.merge-details{padding:var(--space-sm) var(--space-md);padding-left:calc(var(--space-md) + 28px);background:var(--color-bg-secondary);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-sm)}.merge-urls{display:flex;flex-direction:column;gap:6px}.merge-urls-label{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:2px}.merge-url-item{display:flex;align-items:center;gap:var(--space-sm)}.merge-radio{width:14px;height:14px;cursor:pointer;accent-color:var(--color-accent)}.merge-url-item .url{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-family:var(--font-mono)}.merge-target{display:flex;align-items:center;gap:var(--space-sm);padding-top:var(--space-sm);border-top:1px dashed var(--color-border)}.merge-target-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.merge-target-url{font-size:var(--font-size-sm);font-family:var(--font-mono);color:var(--color-only-b)}.merge-password{display:flex;align-items:center;gap:var(--space-sm)}