:root{--gap:18px;--panel-bg:#0f172a;--panel-fore:#e6eef8;--muted:#94a3b8}
*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
html,body{height:100%;margin:0;background:#0b1220;color:var(--panel-fore)}
.wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);height:100vh;padding:20px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:10px;padding:16px;overflow:auto;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.panel h2{margin:0 0 10px 0;font-size:16px}
.left .controls{display:flex;gap:8px;align-items:center;margin-bottom:10px}
button{background:#1f2937;border:1px solid rgba(255,255,255,0.04);color:var(--panel-fore);padding:8px 10px;border-radius:8px;cursor:pointer}
button:active{transform:translateY(1px)}
button:disabled{opacity:0.5;cursor:not-allowed}
.raw-container{display:flex;height:calc(100vh - 160px);background:#071028;border:1px solid rgba(255,255,255,0.03);border-radius:8px;overflow:hidden}
.line-numbers{width:48px;padding:12px 8px;text-align:right;color:var(--muted);font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;font-size:13px;line-height:1.5;background:rgba(15,23,42,0.6);user-select:none;pointer-events:none;flex-shrink:0;overflow:hidden;position:relative}
.line-numbers-inner{display:flex;flex-direction:column;gap:0}
.line-numbers-inner div{line-height:1.5;height:1.5em}
textarea#raw{flex:1;width:100%;height:100%;background:transparent;color:#dbeafe;border:none;padding:12px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;font-size:13px;line-height:1.5;resize:none}
.right{display:flex;flex-direction:column}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:4px;justify-content:space-between}
.status{margin-left:auto;color:var(--muted);font-size:13px}
#pathDisplay{color:#9fb6ff;font-size:13px;margin-bottom:10px;font-family:ui-monospace,monospace}
.tree{font-family:ui-monospace, monospace;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:8px;padding:12px;max-height:calc(100vh - 180px);overflow:auto}
.node{position:relative;padding-left:0}
.node .label{display:inline-flex;align-items:center;cursor:pointer;padding-left:0}
.tree-prefix{color:#64748b;font-family:ui-monospace,monospace;white-space:pre}
.arrow{color:#94a3b8;margin-right:4px;font-size:10px;user-select:none;width:12px;display:inline-block;text-align:center}
.arrow-placeholder{width:12px;margin-right:4px;display:inline-block}
.key{color:var(--muted)}
.value{margin-left:6px}
.val-string{color:#b7f7c6}
.val-number{color:#ffd580}
.val-boolean{color:#ffb86b}
.val-null{color:#9aa4b2}
.array-index{color:#9fb6ff}
.error{background:#3b0f0f;color:#ffdede;padding:8px;border-radius:6px;margin-bottom:8px}
.controls .small{padding:6px 8px;font-size:13px}
.footer{font-size:12px;color:var(--muted);padding-top:8px}
.status-icon{font-weight:bold;font-size:16px;line-height:1;cursor:default;width:16px;text-align:center;display:inline-block}
.status-icon.valid{color:#4ade80}
.status-icon.invalid{color:#f87171}
.label.highlight{background:rgba(159,182,255,0.18);border-radius:4px}
@media (max-width:900px){.wrap{grid-template-columns:1fr;grid-auto-rows:1fr}}