:root{--color-primary:#4caf50;--color-primary-dark:#2e7d32;--color-primary-light:#81c784;--color-bg:#f5f5f5;--color-surface:#fff;--color-text:#333;--color-text-light:#666;--color-border:#ddd;--color-added:#d4edda;--color-added-text:#155724;--color-removed:#f8d7da;--color-removed-text:#721c24;--color-unchanged:#f8f9fa;--color-unchanged-text:#495057;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--border-radius:8px;--border-radius-sm:4px}*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;background-color:var(--color-bg);color:var(--color-text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{flex-direction:column;min-height:100vh;display:flex}.screen{min-height:100vh}.header{background-color:var(--color-primary);color:#fff;padding:var(--spacing-lg);text-align:center;box-shadow:0 2px 4px #0000001a}.header h1{margin:0;font-size:2rem;font-weight:600}.container{max-width:1400px;padding:var(--spacing-lg);flex:1;width:100%;margin:0 auto}.compare-screen{gap:var(--spacing-lg);flex-direction:column;display:flex}.input-section{gap:var(--spacing-md);flex-direction:column;display:flex}.input-labels{gap:var(--spacing-md);grid-template-columns:1fr 1fr;display:grid}.input-label{color:var(--color-text);padding:var(--spacing-sm) 0;font-weight:600}.text-inputs{gap:var(--spacing-md);grid-template-columns:1fr 1fr;display:grid}.text-area{width:100%;min-height:300px;padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--border-radius);resize:vertical;background-color:var(--color-surface);font-family:Monaco,Courier New,monospace;font-size:14px;line-height:1.6;transition:border-color .2s}.text-area:focus{border-color:var(--color-primary);outline:none}.text-area::placeholder{color:var(--color-text-light)}.controls{justify-content:center;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.button{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);cursor:pointer;background-color:var(--color-surface);color:var(--color-text);border:none;border:1px solid var(--color-border);font-size:1rem;font-weight:500;transition:all .2s}.button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.button:active{transform:translateY(0)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.button-primary{background-color:var(--color-primary);color:#fff;padding:var(--spacing-md) var(--spacing-xl);border:none;font-size:1.1rem}.button-primary:hover{background-color:var(--color-primary-dark)}.button-secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.button-secondary:hover{background-color:var(--color-bg)}.diff-output{background-color:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-lg);max-height:600px;overflow-y:auto}.diff-output h3{margin-bottom:var(--spacing-md);color:var(--color-text);font-size:1.2rem}.diff-lines{font-family:Monaco,Courier New,monospace;font-size:14px;line-height:1.8}.diff-line{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);white-space:pre-wrap;word-break:break-word;margin:2px 0}.diff-line-added{background-color:var(--color-added);color:var(--color-added-text);border-left:3px solid var(--color-primary)}.diff-line-removed{background-color:var(--color-removed);color:var(--color-removed-text);border-left:3px solid #dc3545}.diff-line-unchanged{background-color:var(--color-unchanged);color:var(--color-unchanged-text)}.diff-line-prefix{width:20px;margin-right:var(--spacing-sm);font-weight:700;display:inline-block}.empty-state{text-align:center;padding:var(--spacing-xl);color:var(--color-text-light)}.empty-state h3{margin-bottom:var(--spacing-sm);color:var(--color-text)}@media (width<=768px){.header h1{font-size:1.5rem}.text-inputs,.input-labels{grid-template-columns:1fr}.text-area{min-height:200px}.controls{flex-direction:column;width:100%}.button{width:100%}.container{padding:var(--spacing-md)}}