.hero{text-align:center;padding:2rem 0}.hero h1{color:var(--primary-color);margin:0 0 .5rem;font-size:2rem}.hero p{color:var(--text-secondary);margin:0}.tool-section{max-width:1200px;margin:0 auto}.tool-tabs{border-bottom:1px solid var(--border-color);flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.tab-button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:.75rem 1.5rem;font-weight:500;transition:all .2s}.tab-button.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.tab-button:hover{color:var(--primary-color)}.tab-content{display:none}.tab-content.active{display:block}.diff-container{background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem}.input-section{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;display:grid}.input-group{flex-direction:column;display:flex}.input-group label{color:var(--text-primary);margin-bottom:.5rem;font-weight:500}.input-group textarea{border:1px solid var(--border-color);resize:vertical;background:var(--input-bg);min-height:200px;color:var(--text-primary);border-radius:4px;padding:.75rem;font-family:Courier New,monospace;font-size:.875rem}.input-group textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #3b82f61a}.controls{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.btn{cursor:pointer;border:none;border-radius:4px;padding:.75rem 1.5rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-block}.btn-primary{background:var(--button-bg);color:var(--button-text)}.btn-primary:hover{background:var(--button-hover)}.btn-secondary{background:var(--card-bg);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--input-bg)}.options{gap:1rem;margin-left:auto;display:flex}.options label{color:var(--text-secondary);cursor:pointer;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.options input[type=checkbox]{margin:0}.diff-result{background:var(--input-bg);border:1px solid var(--border-color);border-radius:4px;min-height:100px;max-height:600px;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;overflow:auto}.diff-result:empty:before{content:"Diff results will appear here...";color:var(--text-secondary);padding:1rem;font-style:italic;display:block}.diff-container-side-by-side{grid-template-columns:1fr 1fr;min-height:400px;display:grid}.diff-panel{border-right:1px solid var(--border-color);overflow:auto}.diff-panel:last-child{border-right:none}.diff-panel-header{background:var(--card-bg);border-bottom:1px solid var(--border-color);color:var(--text-primary);z-index:1;padding:.5rem 1rem;font-weight:500;position:sticky;top:0}.diff-panel-content{padding:0}.diff-line{border-bottom:1px solid #0000;align-items:flex-start;min-height:1.5em;margin:0;padding:.125rem 0;display:flex}.diff-line:hover{background-color:#00000005}[data-theme=dark] .diff-line:hover{background-color:#ffffff05}.diff-line-number{width:50px;color:var(--text-secondary);text-align:right;background:var(--card-bg);border-right:1px solid var(--border-color);flex-shrink:0;padding:0 .5rem;font-size:.75rem;display:inline-block}.diff-line-content{white-space:pre-wrap;word-break:break-all;flex:1;padding:0 .75rem}.diff-line-added{background-color:#22c55e1a}.diff-line-added .diff-line-number{color:#16a34a;background-color:#22c55e26}.diff-line-added .diff-line-content{color:#16a34a}.diff-line-removed{background-color:#ef44441a}.diff-line-removed .diff-line-number{color:#dc2626;background-color:#ef444426}.diff-line-removed .diff-line-content{color:#dc2626}.diff-line-unchanged{color:var(--text-primary)}.diff-line-empty{background-color:#64748b0d}.diff-line-empty .diff-line-content{color:var(--text-secondary);font-style:italic}.json-error{color:#dc2626;background-color:#ef44441a;border-radius:4px;margin-bottom:1rem;padding:.5rem;font-size:.875rem}@media (max-width:768px){.input-section{grid-template-columns:1fr}.controls{flex-direction:column;align-items:stretch}.options{justify-content:center;margin-left:0}.hero h1{font-size:1.5rem}.diff-container-side-by-side{grid-template-columns:1fr;max-height:none}.diff-panel{border-right:none;border-bottom:1px solid var(--border-color)}.diff-panel:last-child{border-bottom:none}.diff-line-number{width:40px;font-size:.7rem}}