:root {
  --bg: #0A1A14;
  --bg-card: #122A20;
  --text: #C8E8D8;
  --text-sec: #80B8A0;
  --text-muted: #3A6850;
  --primary: #00B894;
  --secondary: #55EFC4;
  --accent: #FDCB6E;
  --red: #FF6B6B;
  --border: rgba(0,184,148,0.06);
  --radius: 12px;
  --font: 'Inter',system-ui,sans-serif;
  --mono: 'JetBrains Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}

.header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px}
.header h1{font-size:.88rem;font-weight:700;color:var(--primary)}
.header-right{display:flex;gap:4px;align-items:center}
.search{width:150px;padding:4px 8px;font-size:.64rem}

.btn{padding:4px 10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-sec);font-family:var(--font);font-size:.66rem;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn.primary{background:var(--primary);color:#0A1A14;border:none;font-weight:600}

.app{max-width:1000px;margin:0 auto;padding:12px}

.layout{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;position:relative}
.panel h2{font-size:.56rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.badge{font-size:.48rem;background:var(--primary);color:#0A1A14;padding:1px 5px;border-radius:10px;font-weight:600}

.input{padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:rgba(255,255,255,.02);color:var(--text);font-family:var(--font);font-size:.7rem}
.input:focus{outline:none;border-color:var(--primary)}

.editor{width:100%;min-height:350px;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.15);color:var(--text);font-family:var(--mono);font-size:.64rem;padding:10px;line-height:1.6;resize:vertical}
.editor:focus{outline:none;border-color:var(--primary)}

.status-bar{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.status-bar span{font-size:.58rem;color:var(--text-muted)}
.status-bar .error{color:var(--red)}
.status-bar .ok{color:var(--primary)}

/* Tree */
.tree{max-height:400px;overflow-y:auto;font-size:.62rem}
.tree-node{margin-left:12px}
.tree-key{cursor:pointer;padding:2px 4px;border-radius:3px;transition:.15s;display:inline-flex;align-items:center;gap:3px}
.tree-key:hover{background:rgba(0,184,148,.06)}
.tree-key .key-name{color:var(--primary);font-family:var(--mono);font-weight:500}
.tree-key .val{color:var(--secondary);font-family:var(--mono);font-size:.58rem}
.tree-key .val-str{color:var(--accent)}
.tree-key .val-num{color:#74B9FF}
.tree-key .val-bool{color:var(--red)}
.tree-toggle{cursor:pointer;font-size:.5rem;color:var(--text-muted);width:10px;display:inline-block;text-align:center}
.tree-path{font-size:.5rem;color:var(--text-muted);margin-left:6px;opacity:0;transition:.15s}
.tree-key:hover .tree-path{opacity:1}

.copied-toast{position:fixed;bottom:20px;right:20px;background:var(--primary);color:#0A1A14;padding:6px 12px;border-radius:8px;font-size:.66rem;font-weight:600;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){.layout{grid-template-columns:1fr}}