*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:sans-serif}body{display:flex;flex-direction:column;padding:20px;gap:10px;background:var(--bg);color:var(--fg)}.header{font-size:1.5rem;font-weight:700}.container{flex:1;display:flex;gap:10px}.left,.right{flex:1;padding:10px;border:1px solid #ccc;overflow:auto;border-radius:4px;background:var(--bg);color:var(--fg)}textarea#json-input{width:100%;height:100%;resize:none;border:none;outline:none;font-family:monospace;font-size:1rem;background:transparent;color:var(--fg)}#json-output{white-space:pre-wrap;font-family:monospace;font-size:1rem}.error-border{border-color:red!important}.footer{text-align:right;font-size:.9rem;color:var(--footer-text)}.header-content{display:flex;justify-content:space-between;align-items:center}.header-actions{display:flex;align-items:center;gap:10px}.header-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;cursor:pointer;border-radius:50%;transition:background .2s;color:#036}.header-icon:hover{background-color:#0000001a}.header-icon svg{width:24px;height:24px;fill:#0077b5;vertical-align:middle}button#theme-toggle{font-size:1.2rem;background:none;border:none;cursor:pointer;color:inherit}@media (max-width: 600px){.container{flex-direction:column;height:70vh;min-height:300px}.left,.right{height:50%;min-height:0;flex:none}textarea#json-input{height:100%}}.copy-btn{position:absolute;top:10px;right:20px;padding:4px 10px;font-size:.9rem;border:none;border-radius:3px;background:#636262;color:#fff;cursor:pointer;z-index:1;transition:background .2s}.copy-btn:hover{background:#005983;color:#fff}.right{position:relative}#json-output{margin-top:30px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root{--bg: #ffffff;--fg: #222222;--border: #cccccc;--accent: #003366;--footer-text: #333}[data-theme=dark]{--bg: #121212;--fg: #e0e0e0;--border: #444;--accent: #66ccff;--footer-text: #cccccc}body.dark{--bg: #121212;--text: #f0f0f0;--border: #444;background-color:var(--bg);color:var(--text)}.left,.right{background:var(--bg);color:var(--text);border-color:var(--border)}textarea#json-input,#json-output{background:transparent;color:var(--text)}.copy-btn{background:var(--border);color:var(--text)}.copy-btn:hover{background:#0077b5}button#theme-toggle{font-size:1.2rem;margin-right:10px;background:none;border:none;cursor:pointer;color:inherit}