:root{
  --bg:#0f1117; --panel:#181b24; --line:#2a2f3d; --text:#e8eaf0; --dim:#98a0b3;
  --accent:#5aa9ff; --ok:#3ddc97; --ng:#ff6b6b; --code:#11141b;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.7; padding-bottom:3rem;
}
header{padding:1.5rem 1rem .5rem;text-align:center}
h1{margin:0;font-size:1.6rem;letter-spacing:.04em}
.sub{margin:.3rem 0 0;color:var(--dim);font-size:.85rem}
main{max-width:720px;margin:0 auto;padding:1rem}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:1rem; margin-bottom:1rem;
}
.lbl{display:block;font-weight:700;margin-bottom:.5rem;font-size:.95rem}
select,input{
  width:100%; padding:.75rem; font-size:1rem; border-radius:8px;
  border:1px solid var(--line); background:var(--code); color:var(--text);
}
/* iOSで勝手に拡大されないよう16px以上を維持 */
input{font-size:16px}
.note{margin:.6rem 0 0;color:var(--dim);font-size:.82rem}
.field{margin-top:.75rem}
.field label{display:block;font-size:.85rem;color:var(--dim);margin-bottom:.25rem}
.send{
  width:100%; padding:1rem; font-size:1.05rem; font-weight:700; cursor:pointer;
  border:none; border-radius:10px; background:var(--accent); color:#06101f;
}
.send:active{opacity:.8}
.reset{
  width:100%; margin-top:.6rem; padding:.7rem; font-size:.9rem; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--dim);
}
.io h2{
  font-size:.95rem; margin:0 0 .6rem; display:flex; align-items:center; gap:.5rem;
}
.tag{font-size:.7rem;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:.1rem .5rem}
.code{
  background:var(--code); border:1px solid var(--line); border-radius:8px;
  padding:.8rem; overflow-x:auto; font-size:.8rem; line-height:1.6; margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre;
}
.status{margin:0 0 .6rem;font-weight:700;font-size:.9rem}
.status.ok{color:var(--ok)} .status.ng{color:var(--ng)}
.foot{text-align:center;color:var(--dim);font-size:.78rem;margin-top:1.5rem}
.foot code{background:var(--code);padding:.15rem .4rem;border-radius:4px}

/* ── JSONツリー ───────────────────────────────────────────
   型が色で分かること、入れ子が目で追えることを優先する。
   1行=1つのdivで、インデントは深さから計算して与える（入れ子にしない）。 */
.code{white-space:normal}
.j-tree{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8rem; line-height:1.7;
}
.j-row{padding:.05rem 0; overflow-wrap:anywhere}
.j-row.j-stack .j-str{display:block; padding-left:.8rem; margin-top:.1rem}
.j-head{cursor:pointer; user-select:none}
.j-head:active{opacity:.6}
.j-tog{color:var(--dim); font-size:.7rem; margin-right:.25rem}
.j-kids.hidden{display:none}
.j-count{color:var(--dim); font-size:.7rem; margin:0 .15rem}
.j-key{color:#7dd3fc; white-space:nowrap}
.j-str{color:#a5e887}
.j-num{color:#ffb86c}
.j-bool{color:#c792ea}
.j-null{color:#6b7280; font-style:italic}
.j-p{color:#6b7280}
.j-label{font-size:.72rem; color:var(--dim); margin:.7rem 0 .3rem}
.j-label.dim{opacity:.7}
.dim{color:var(--dim)}

/* ── リクエスト行 ── */
.u-line{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; line-height:1.9}
.m{
  font-size:.68rem; font-weight:800; letter-spacing:.06em;
  padding:.15rem .45rem; border-radius:4px; font-family:ui-monospace,monospace;
}
.m-get{background:#1e3a5f; color:#7dd3fc}
.m-post{background:#1c3d2e; color:#6ee7a7}
.u-host{color:var(--dim); font-size:.72rem; word-break:break-all;
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.u-path{color:var(--text); font-size:.78rem; font-weight:600; word-break:break-all;
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.u-q{margin-top:.35rem; padding-left:.4rem; font-size:.75rem;
     font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.u-k{color:#7dd3fc}
.u-v{color:#a5e887}

/* ── 返ってきた内容の高さを抑える ──────────────────────────
   JSONは全階層を開いて見せる方針だが、LoLのチャンピオン1件でも
   skins が95個あってページが3万px を超える。そのままだと
   1回送るたびに操作部まで延々スクロールして戻ることになるので、
   枠の中でスクロールさせてページ自体は短く保つ。 */
#res{max-height:70vh; overflow:auto; -webkit-overflow-scrolling:touch}

/* 長い文章はキーの下に落として、横幅を全部使って読ませる */