:root {
  --bg: #ffffff; --fg: #16191d; --muted: #5c646e; --line: #d8dde3;
  --panel: #f5f7f9; --accent: #1f6feb; --ok: #1a7f37; --ng: #b42318; --mark: #ffe9a8;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151a; --fg:#e6e9ee; --muted:#9aa4b1; --line:#2b3240; --panel:#1a1f28;
          --accent:#4c8dff; --ok:#4ac26b; --ng:#ff7b72; --mark:#5a4a12; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,"Noto Sans JP",sans-serif; font-size:14px; line-height:1.7; }
header { padding:18px 20px 10px; border-bottom:1px solid var(--line); }
h1 { font-size:17px; margin:0 0 4px; font-weight:600; }
header p { margin:0; color:var(--muted); font-size:12.5px; }
main { padding:0 20px 60px; max-width:1100px; }
fieldset { border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin:14px 0; }
legend { font-size:12px; color:var(--muted); padding:0 6px; }
label { font-size:12.5px; }
.row { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; }
.row > div { display:flex; gap:6px; align-items:center; }
input[type=text], input[type=password], select, textarea {
  background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:4px;
  padding:6px 8px; font-size:13px; font-family:inherit;
}
textarea { width:100%; font-family:var(--mono); font-size:12.5px; line-height:1.85; resize:vertical; }
button { background:var(--accent); color:#fff; border:0; border-radius:4px; padding:7px 14px; font-size:13px; cursor:pointer; }
button.sec { background:transparent; color:var(--fg); border:1px solid var(--line); }
button:disabled { opacity:.5; cursor:default; }
nav { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-top:14px; }
nav button { background:transparent; color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0; padding:9px 14px; }
nav button.on { color:var(--fg); border-bottom-color:var(--accent); font-weight:600; }
section[hidden] { display:none; }
.stat { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 16px; margin:10px 0; }
.stat div { background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:7px 10px; }
.stat b { display:block; font-size:11px; color:var(--muted); font-weight:500; }
.stat span { font-family:var(--mono); font-size:14px; }
.msg { padding:8px 11px; border-radius:5px; font-size:12.5px; margin:8px 0; border:1px solid var(--line); background:var(--panel); }
.msg.ok { border-color:var(--ok); color:var(--ok); }
.msg.ng { border-color:var(--ng); color:var(--ng); }
pre.out { background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:10px 12px;
  white-space:pre-wrap; word-break:break-word; font-family:var(--mono); font-size:12.5px; line-height:1.9; max-height:340px; overflow:auto; }
mark { background:var(--mark); color:inherit; border-radius:2px; padding:0 1px; }
table { border-collapse:collapse; font-size:12.5px; margin:8px 0; }
th, td { border:1px solid var(--line); padding:4px 10px; text-align:left; font-family:var(--mono); }
th { background:var(--panel); font-weight:600; }
.bar { display:inline-block; height:9px; background:var(--accent); border-radius:2px; vertical-align:middle; }
.blocks { display:flex; flex-wrap:wrap; gap:3px; margin:6px 0; }
.blocks i { width:16px; height:16px; border-radius:3px; border:1px solid var(--line); font-style:normal;
  font-size:9px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.blocks i.hit { background:var(--ok); border-color:var(--ok); color:#fff; }
small.note { color:var(--muted); font-size:11.5px; display:block; margin-top:4px; }
code { font-family:var(--mono); font-size:12px; background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:0 4px; }

/* --- 変更前後の差分表示 --- */
del.wm { color:var(--ng); text-decoration:line-through; text-decoration-thickness:1px; opacity:.75; }
ins.wm { color:var(--ok); text-decoration:none; background:var(--mark); border-radius:2px; padding:0 1px; }
span.wm-same { border-bottom:1px dotted var(--line); }
span.bit0, span.bit1 { border-radius:2px; padding:0 1px; }
span.bit0 { background:color-mix(in srgb, var(--accent) 18%, transparent); }
span.bit1 { background:color-mix(in srgb, var(--ok) 22%, transparent); }
span.gap { color:var(--muted); }

/* --- フレーム上の役割 --- */
span.f-sync, span.f-idx, span.f-total, span.f-data, span.f-crc {
  border-bottom:2px solid transparent; padding-bottom:1px;
}
span.f-sync  { border-bottom-color:#8957e5; }
span.f-idx   { border-bottom-color:#1f6feb; }
span.f-total { border-bottom-color:#0aa2c0; }
span.f-data  { border-bottom-color:#1a7f37; background:var(--mark); }
span.f-crc   { border-bottom-color:#b42318; }
span.f-none  { color:var(--muted); }
span.dim     { opacity:.45; }

.legend { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:var(--muted); align-items:center; }
.legend em { font-style:normal; display:inline-flex; align-items:center; gap:4px; }
.legend em::before { content:''; width:14px; height:3px; border-radius:2px; background:currentColor; }
.legend em.sync::before  { background:#8957e5; }
.legend em.idx::before   { background:#1f6feb; }
.legend em.total::before { background:#0aa2c0; }
.legend em.data::before  { background:#1a7f37; }
.legend em.crc::before   { background:#b42318; }
.legend em.b0::before    { background:var(--accent); }
.legend em.b1::before    { background:var(--ok); }
.legend em.del::before   { background:var(--ng); }
.legend em.ins::before   { background:var(--mark); }

td.mono-wrap { font-family:var(--mono); word-break:break-all; max-width:420px; white-space:normal; }
tr.miss td { color:var(--ng); }