*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--border-color: #30363d;--text-primary: #c9d1d9;--text-secondary: #8b949e;--accent-blue: #58a6ff;--accent-green: #238636;--accent-red: #da3633;--added-bg: #1a4721;--added-line-bg: #2ea04326;--removed-bg: #5d1f1f;--removed-line-bg: #f8514926;--font-mono: "SF Mono", "Fira Code", "Consolas", monospace}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}.container{max-width:1400px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:2rem}header h1{font-size:2rem;font-weight:600;margin-bottom:.5rem}.subtitle{color:var(--text-secondary);font-size:1rem}.input-section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.input-panel{display:flex;flex-direction:column}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-bottom:none;border-radius:6px 6px 0 0;font-weight:500}textarea{flex:1;min-height:200px;padding:1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:0 0 6px 6px;color:var(--text-primary);font-family:var(--font-mono);font-size:14px;resize:vertical;line-height:1.5}textarea:focus{outline:none;border-color:var(--accent-blue)}textarea::placeholder{color:var(--text-secondary)}.actions{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}button{padding:.625rem 1.25rem;border:1px solid var(--border-color);border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:var(--accent-green);color:#fff;border-color:var(--accent-green)}.btn-primary:hover{background:#2ea043}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:#30363d}.btn-clear,.btn-small{padding:.375rem .75rem;font-size:12px;background:transparent;color:var(--text-secondary)}.btn-clear:hover,.btn-small:hover{color:var(--text-primary);background:var(--bg-secondary)}.diff-section,.merge-section{margin-bottom:2rem}.diff-header,.merge-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}.diff-header h2,.merge-header h2{font-size:1.25rem;font-weight:600}.merge-header p{color:var(--text-secondary);font-size:14px}.diff-stats{display:flex;gap:1rem;font-size:14px}.stat-added{color:#3fb950}.stat-removed{color:#f85149}.view-toggle{margin-left:auto;display:flex;background:var(--bg-tertiary);border-radius:6px;overflow:hidden}.view-btn{background:transparent;border:none;border-radius:0;color:var(--text-secondary)}.view-btn.active{background:var(--bg-secondary);color:var(--text-primary)}.view-btn:hover:not(.active){color:var(--text-primary)}.merge-actions{display:flex;gap:.5rem;margin-left:auto}.diff-container{border:1px solid var(--border-color);border-radius:6px;overflow:hidden}.split-view{display:flex}.diff-panel{flex:1;min-width:0}.diff-panel:first-child{border-right:1px solid var(--border-color)}.diff-panel-header{padding:.5rem 1rem;background:var(--bg-tertiary);font-size:12px;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.diff-content{font-family:var(--font-mono);font-size:13px;overflow-x:auto;max-height:500px;overflow-y:auto}.diff-line{display:flex;min-height:24px;line-height:24px}.line-num{min-width:50px;padding:0 8px;text-align:right;color:var(--text-secondary);background:var(--bg-tertiary);-webkit-user-select:none;user-select:none;font-size:12px}.line-sign{width:20px;text-align:center;-webkit-user-select:none;user-select:none}.line-content{flex:1;padding:0 8px;white-space:pre}.diff-line.added{background:var(--added-line-bg)}.diff-line.added .line-sign{color:#3fb950}.diff-line.removed{background:var(--removed-line-bg)}.diff-line.removed .line-sign{color:#f85149}.diff-line.placeholder{background:var(--bg-secondary);opacity:.5}.diff-line.unchanged{background:var(--bg-secondary)}.merge-content{border:1px solid var(--border-color);border-radius:6px;overflow:hidden;margin-bottom:1.5rem;max-height:400px;overflow-y:auto}.merge-block{border-bottom:1px solid var(--border-color)}.merge-block:last-child{border-bottom:none}.merge-block-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:var(--bg-tertiary)}.merge-block-label{font-size:12px;font-weight:500;text-transform:uppercase}.merge-added .merge-block-label{color:#3fb950}.merge-removed .merge-block-label{color:#f85149}.merge-block-actions{display:flex;gap:.5rem}.merge-choice{padding:.25rem .75rem;font-size:12px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary)}.merge-choice:hover{color:var(--text-primary);border-color:var(--text-secondary)}.merge-choice.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.merge-block-content{padding:.75rem 1rem;font-family:var(--font-mono);font-size:13px;line-height:1.5;background:var(--bg-secondary)}.merge-added .merge-block-content{background:var(--added-line-bg)}.merge-removed .merge-block-content{background:var(--removed-line-bg)}.merge-unchanged .merge-block-content{background:var(--bg-secondary)}.selected-left.merge-removed .merge-block-content,.selected-right.merge-added .merge-block-content{border-left:3px solid #3fb950}.selected-left.merge-added .merge-block-content,.selected-right.merge-removed .merge-block-content{opacity:.4;border-left:3px solid var(--accent-red)}.merge-result{display:flex;flex-direction:column}.merge-result textarea{min-height:150px;background:var(--bg-primary)}@media (max-width: 768px){.container{padding:1rem}.input-section{grid-template-columns:1fr}.split-view{flex-direction:column}.diff-panel:first-child{border-right:none;border-bottom:1px solid var(--border-color)}.diff-header,.merge-header{flex-direction:column;align-items:flex-start}.view-toggle,.merge-actions{margin-left:0}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#484f58}.tool-tabs{display:flex;gap:.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.tool-tab{padding:.75rem 1.5rem;background:transparent;border:none;color:var(--text-secondary);font-size:15px;font-weight:500;cursor:pointer;border-radius:6px 6px 0 0;transition:all .2s;position:relative}.tool-tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.tool-tab.active{color:var(--accent-blue);background:var(--bg-tertiary)}.tool-tab.active:after{content:"";position:absolute;bottom:-.5rem;left:0;right:0;height:2px;background:var(--accent-blue)}.tool-content{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.json-input-section{margin-bottom:1.5rem}.json-input-section .input-panel{display:flex;flex-direction:column}.json-input-section textarea{min-height:250px}.header-actions{display:flex;gap:.5rem}.json-result-section{margin-top:1.5rem}.json-status{padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;font-size:14px;display:flex;align-items:center;gap:.5rem}.json-status.success{background:var(--added-line-bg);border:1px solid var(--accent-green);color:#3fb950}.json-status.error{background:var(--removed-line-bg);border:1px solid var(--accent-red);color:#f85149}.json-output-panel{margin-bottom:1.5rem}.json-output-panel textarea{min-height:200px;background:var(--bg-primary)}.json-tree-panel{border:1px solid var(--border-color);border-radius:6px;overflow:hidden}.json-tree{padding:1rem;background:var(--bg-secondary);font-family:var(--font-mono);font-size:13px;max-height:400px;overflow:auto}.json-tree-item{padding-left:1.5rem;position:relative}.json-tree-item:before{content:"";position:absolute;left:.5rem;top:0;bottom:0;width:1px;background:var(--border-color)}.json-tree-key{color:#79c0ff}.json-tree-string{color:#a5d6ff}.json-tree-number{color:#79c0ff}.json-tree-boolean{color:#ff7b72}.json-tree-null{color:#8b949e;font-style:italic}.json-tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:.25rem}.json-tree-toggle:before{content:"▼";font-size:10px;color:var(--text-secondary);transition:transform .2s}.json-tree-toggle.collapsed:before{transform:rotate(-90deg)}.json-tree-toggle.collapsed+.json-tree-children{display:none}.json-tree-bracket,.json-tree-comma{color:var(--text-secondary)}.json-tree-line{line-height:1.6;white-space:nowrap}.json-tree-line:hover{background:var(--bg-tertiary)}.timestamp-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}.timestamp-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem}.timestamp-card h3{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.current-time-display{display:flex;flex-direction:column;gap:.75rem}.time-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.time-label{color:var(--text-secondary);font-size:14px;min-width:100px}.time-value{color:var(--text-primary);font-size:14px;flex:1}.timestamp-mono{font-family:var(--font-mono);color:var(--accent-blue)}.convert-row{display:flex;gap:.75rem;margin-bottom:1rem}.convert-row input{flex:1;padding:.625rem 1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:var(--font-mono);font-size:14px}.convert-row input:focus{outline:none;border-color:var(--accent-blue)}.convert-row input::placeholder{color:var(--text-secondary)}.convert-result{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.datetime-inputs{display:flex;flex-direction:column;gap:.75rem}.datetime-row{display:flex;gap:.75rem}.datetime-row input[type=date],.datetime-row input[type=time]{flex:1;padding:.625rem 1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:14px}.datetime-row input:focus{outline:none;border-color:var(--accent-blue)}.datetime-row input[type=date]::-webkit-calendar-picker-indicator,.datetime-row input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.8);cursor:pointer}#timestamp-tool .btn-copy{padding:.25rem .5rem;font-size:11px;white-space:nowrap}@media (max-width: 768px){.timestamp-section{grid-template-columns:1fr}.datetime-row,.convert-row{flex-direction:column}}