:root { --bg:#f6f7f9; --card:#fff; --fg:#1d2330; --muted:#6b7280; --line:#e3e6ea; --accent:#2f5bd3; --ok:#18794e; --err:#c0392b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161b; --card:#1d2027; --fg:#e6e8ec; --muted:#9aa1ad; --line:#30343d; --accent:#7ea2ff; --ok:#5fd39a; --err:#ff8a7a; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.6 system-ui,"Hiragino Sans","Yu Gothic UI",sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); }
header h1 { font-size:18px; margin:0; }
main { max-width:900px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
h2 { font-size:16px; margin:0 0 10px; }
input, textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; margin:4px 0 8px; }
label { display:block; color:var(--muted); font-size:13px; }
button { padding:8px 16px; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; white-space:nowrap; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); padding:4px 10px; }
button.danger { color:var(--err); }
.row { display:flex; gap:8px; align-items:center; }
.row input { margin:0; }
.drop { border:2px dashed var(--line); border-radius:10px; padding:28px 12px; text-align:center; cursor:pointer; color:var(--muted); margin-bottom:10px; }
.drop.over { border-color:var(--accent); color:var(--accent); }
.log div { font-size:13px; }
.ok { color:var(--ok); } .err { color:var(--err); }
.copy { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
code { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 10px; word-break:break-all; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:6px 4px; border-bottom:1px solid var(--line); vertical-align:top; }
.num { text-align:right; }
.badge { font-size:11px; background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:0 4px; color:var(--muted); }
.hit { border-top:1px solid var(--line); padding:8px 0; }
.hit p { margin:4px 0 0; white-space:pre-wrap; font-size:13px; color:var(--muted); }
.ver { text-align:right; font-size:11px; color:#999; margin-top:20px; }
.login { max-width:380px; margin:10vh auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px; }
.login h1 { font-size:20px; margin-top:0; }
.login button { width:100%; margin-top:8px; }
.who { background:var(--bg); border-radius:6px; padding:8px 10px; font-size:14px; }
@media (max-width:600px) { table th:nth-child(3), table td:nth-child(3), table th:nth-child(5), table td:nth-child(5) { display:none; } }