:root{
  --radius: 14px;
  --header-h: 64px;
  --footer-h: 44px;
  --shadow: 0 8px 24px rgba(0,0,0,.30);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* light defaults (will be overridden in theme blocks) */
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-2: #f9fbff;
  --panel-3: #f1f4f9;
  --text: #0f141b;
  --muted: #5a6675;
  --accent: #2a72e5;
  --danger: #d7263d;
  --ok: #128a53;
  --border: #d9e1ea;

  /* code colors (default/light) */
  --json-key: #0550ae;
  --json-string: #116329;
  --json-number: #9a6700;
  --json-bool: #0a3069;
  --json-null: #57606a;
}
html[data-theme="dark"]{
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1c2129;
  --panel-3: #202632;
  --text: #e8eef5;
  --muted: #9aa7b5;
  --accent: #4da3ff;
  --danger: #ff5d6c;
  --ok: #35d07f;
  --border: #2b3440;
  color-scheme: dark;
  --json-key: #79c0ff;
  --json-string: #7ee787;
  --json-number: #ffa657;
  --json-bool: #a5d6ff;
  --json-null: #c9d1d9;
}
html[data-theme="light"]{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-2: #f9fbff;
  --panel-3: #eef3f8;
  --text: #0f141b;
  --muted: #627084;
  --accent: #2a72e5;
  --danger: #c01f34;
  --ok: #0f7a49;
  --border: #d7e0ea;
  color-scheme: light;
}

*{box-sizing:border-box}
html, body{height:100%;}
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.45; }

header.app{
  position:fixed; inset-block-start:0; inset-inline:0; height:var(--header-h);
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel), black 6%), var(--panel));
  border-block-end:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 16px; z-index:10;
}
.logo{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), white 35%) 70%); box-shadow:0 4px 12px color-mix(in oklab, var(--accent), black 75%);} 
header.app h1{ font-size:18px; margin:0; letter-spacing:.2px; }
.sub{ color:var(--muted); font-size:12px; margin-inline-start:auto }

.theme-select{ display:flex; align-items:center; gap:8px; font-size:12px;}
.theme-select select{ background:var(--panel-3); border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:10px; min-width: 175px!important;}

footer.app{
  position:fixed; inset-inline:0; inset-block-end:0; height:var(--footer-h);
  background:var(--panel); border-block-start:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; color:var(--muted); font-size:12px; z-index:9;
}
footer.app a{ color:var(--accent); text-decoration:none }

main{ position:relative; height:calc(100vh - var(--header-h) - var(--footer-h)); padding:12px; padding-block-start:calc(12px + 0px); overflow:hidden; padding-top:70px; }

.grid{ display:grid; gap:12px; height:100%; grid-template-columns: 2fr 6px 1.2fr 6px 1fr; align-items:stretch; }
.gutter{ background:var(--panel-3); border:1px solid var(--border); border-radius:10px; cursor:col-resize; box-shadow:var(--shadow); }
.gutter:hover{ filter:brightness(1.03) }

.col{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column; overflow:hidden }
.col header{ position:sticky; inset-block-start:0; height:auto; background:transparent; border:0; padding:14px 16px; gap:8px; z-index:0; }
.col h2{ font-size:14px; margin:0; color:color-mix(in oklab, var(--accent), white 65%); letter-spacing:.3px; font-weight:600 }

.col.left{ background:var(--panel-2) }
.col.middle{ background:var(--panel) }
.col.right{ background:var(--panel-3) }

.col-body{ flex:1; display:flex; flex-direction:column; overflow:auto; }

.section{ padding:0 16px 16px 16px; display:flex; flex-direction:column; gap:12px; }

textarea, pre, code, input, select, button{ font-family:var(--mono) }

textarea{ width:100%; flex:1; resize:none; padding:14px; border-radius:10px; background:color-mix(in oklab, var(--panel-3), black 6%); color:var(--text); border:1px solid var(--border); outline:none; transition: box-shadow .15s ease, border-color .15s ease; }
textarea:focus{ border-color:color-mix(in oklab, var(--accent), black 10%); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%); }

.controls{ display:flex; flex-direction:column; gap:12px }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
label{ font-size:13px; color:color-mix(in oklab, var(--text), var(--muted) 45%) }
.spacer{ flex:1 }

input[type="number"], select{ background:color-mix(in oklab, var(--panel-3), black 6%); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:10px; width:110px; }
.btn{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:color-mix(in oklab, var(--panel-3), black 6%); color:var(--text); cursor:pointer; font-weight:600; }
.btn:hover{ filter:brightness(1.05) }
.btn.accent{ background:linear-gradient(180deg,color-mix(in oklab, var(--panel-3), var(--accent) 10%), var(--panel-3)); border-color:color-mix(in oklab, var(--accent), black 35%) }
.btn.ok{ border-color:color-mix(in oklab, var(--ok), black 35%); background:color-mix(in oklab, var(--ok), var(--panel) 85%) }
.btn.danger{ border-color:color-mix(in oklab, var(--danger), black 35%); background:color-mix(in oklab, var(--danger), var(--panel) 85%) }

.result-wrap{ position:relative; display:flex; flex-direction:column; gap:0; height:100% }
.result-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px 0 16px; min-height:0 }
.status{ font-size:12px; color:var(--muted) }
.status.ok{ color:var(--ok) }
.status.err{ color:var(--danger) }
.result{ flex:1; overflow:auto; border-top:1px solid var(--border); background:color-mix(in oklab, var(--panel-3), black 6%); padding:0 16px 14px 16px; line-height:1.35; }
pre{ margin:0; white-space:pre; font-family:var(--mono); font-size:13px }

.tree{ font-family:var(--mono); font-size:13px; line-height:1.4; padding-top:0; margin-top:0 }
.tree details{ padding-left:12px; }
.tree summary{ cursor:pointer; user-select:none }
.tree .k{ color:var(--json-key); }
.tree .v-string{ color:var(--json-string); }
.tree .v-number{ color:var(--json-number); }
.tree .v-bool{ color:var(--json-bool); }
.tree .v-null{ color:var(--json-null); font-style:italic }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

@media (max-width: 900px){ .grid{ grid-template-columns: 1fr 6px 1fr 6px 1fr; } }
@media (max-width: 768px){
  .grid{ grid-template-columns: 1fr; }
  .gutter{ display:none }
  .col{ height:auto }
  main{ height:auto; padding-bottom:calc(var(--footer-h) + 12px); overflow:visible; }
}