* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#111827; --surface:#1f2937; --surface2:#273449; --text:#e5e7eb; --muted:#9ca3af; --border:#475569; --accent:#38bdf8; --key:#fb7185; --string:#86efac; --number:#fcd34d; --boolean:#c4b5fd; --null:#94a3b8; }
body.light { color-scheme: light; --bg:#f1f5f9; --surface:#fff; --surface2:#e2e8f0; --text:#172033; --muted:#64748b; --border:#cbd5e1; --accent:#0369a1; --key:#be123c; --string:#15803d; --number:#a16207; --boolean:#6d28d9; --null:#475569; }
html, body { height:100%; margin:0; font-family:Arial, sans-serif; }
body { background:var(--bg); color:var(--text); }
button, input, textarea { font:inherit; }
button, input { color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:7px 11px; }
button { cursor:pointer; }
button:hover, button.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.app-container { min-height:100%; display:flex; flex-direction:column; padding:12px; gap:10px; }
.top-tabs-container { display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap; }
.top-tabs, .top-icons, .viewer-actions, .text-actions, .info-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.icon-button { font-size:18px; padding:5px 9px; }
.main-panel { flex:1; display:flex; min-height:0; }
.panel { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; }
.viewer-actions, .text-actions { margin-bottom:9px; }
#load-url { min-width:240px; flex:1; }
#text-area { flex:1; min-height:360px; width:100%; resize:none; color:var(--text); background:#0b1220; border:1px solid var(--border); border-radius:9px; padding:14px; font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; }
body.light #text-area { background:#f8fafc; }
.message { min-height:22px; margin:0 0 7px; color:var(--muted); font-size:13px; }
.message.success { color:#22c55e; }
.message.error { color:#f87171; }
.viewer-content { flex:1; min-height:0; overflow:auto; font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.raw-json { margin:0; white-space:pre; }
.pretty-container { min-width:max-content; padding:4px; }
.branch { position:relative; }
.pretty-row { display:flex; align-items:center; gap:7px; min-height:26px; }
.child-container { margin-left:8px; padding-left:20px; border-left:1px dotted var(--border); }
.toggle-box { width:20px; height:20px; padding:0; border-radius:3px; line-height:18px; }
.toggle-box:disabled { visibility:hidden; }
.field-key { color:var(--key); font-weight:600; }
.field-meta { color:var(--muted); font-size:12px; }
.field-value::before { content:': '; color:var(--text); }
.type-string { color:var(--string); }
.type-number { color:var(--number); }
.type-boolean { color:var(--boolean); }
.type-null { color:var(--null); font-style:italic; }
.tree-svg { width:100%; min-width:700px; height:auto; min-height:420px; }
.tree-link { fill:none; stroke:var(--border); stroke-width:1.5; }
.tree-node text { fill:var(--text); font-size:12px; stroke:none; }
.parent-node { fill:var(--accent); }
.leaf-node { fill:var(--muted); }
.info-panel { position:fixed; z-index:10; top:5%; right:-410px; width:min(380px,92vw); height:90%; overflow:auto; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:12px 0 0 12px; box-shadow:0 10px 35px #0008; transition:right .25s ease; }
.info-panel.show { right:0; }
.tab-content { line-height:1.5; }
a { color:var(--accent); }
@media (max-width:650px) { .app-container{padding:7px}.text-actions>*{flex:1}#load-url{min-width:100%}.panel{padding:9px} }

.mode-controls { display:inline-flex; gap:7px; }
.mode-controls[hidden] { display:none !important; }
.info-panel h2 { margin-top:0; }
.info-panel .lead { color:var(--muted); font-size:1.02rem; }
.info-panel section { padding:10px 0; border-top:1px solid var(--border); }
.info-panel li { margin:7px 0; }
.tree-svg { cursor:grab; touch-action:none; user-select:none; }
.tree-svg:active { cursor:grabbing; }

.site-copyright { flex:1; color:var(--muted); text-align:center; font-size:12px; line-height:1.5; }
.top-tabs-container > .top-tabs, .top-tabs-container > .top-icons { flex-shrink:0; }
@media (max-width:650px) { .site-copyright { order:1; flex-basis:100%; font-size:11px; } }