:root { --accent:#2b7a3b; --accent2:#0066b8; --bg:#fafafa; --card:#fff; --text:#222; --muted:#6b7280; --err:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
.topbar { display:flex; align-items:center; gap:1rem; padding:.7rem 1rem; background:#14532d; color:#fff; position:sticky; top:0; z-index:10; }
.topbar .brand { font-weight:800; color:#fff; text-decoration:none; margin-right:auto; }
.topbar nav { display:flex; gap:.5rem; flex-wrap:wrap; }
.topbar nav a { color:#fff; text-decoration:none; font-size:.9rem; padding:.25rem .4rem; border-radius:6px; }
.topbar nav a:hover { background:rgba(255,255,255,.15); }
main { max-width:820px; margin:1rem auto; padding:0 1rem; }
h1 { font-size:1.35rem; margin-top:.5rem; }
h2 { font-size:1.05rem; margin-top:1.2rem; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
.hidden { display:none; }
label { display:flex; flex-direction:column; gap:.25rem; margin:.5rem 0 .75rem; font-weight:600; }
input, select, button, textarea { font:inherit; }
input[type=text], input[type=search], input[type=number], input[type=datetime-local], select, input[type=file] {
  padding:.5rem .6rem; border:1px solid #c7c7c7; border-radius:8px; background:var(--card); width:100%; }
input:focus, select:focus { outline:2px solid var(--accent2); }
button, .button { cursor:pointer; padding:.5rem .9rem; border-radius:8px; font-weight:600; }
button.primary, .button { background:var(--accent); color:#fff; border:none; }
button.ghost, a.ghost { background:transparent; color:var(--accent2); border:1px solid var(--accent2); }
button.danger { background:var(--err); color:#fff; border:none; }
.chain-row { display:flex; gap:.5rem; flex-wrap:wrap; border:1px dashed #c7c7c7; border-radius:10px; padding:.75rem; }
.chain-row legend { font-weight:700; }
.tap { flex:1 1 40%; }
.tap input { display:none; }
.tap span { display:block; text-align:center; padding:.7rem 0; border-radius:10px; border:2px solid #d0d0d0; background:#fff; font-weight:700; }
.tap input:checked + span { background:var(--accent); color:#fff; border-color:var(--accent); }
.pair { border:1px solid #ddd; border-radius:10px; padding:.6rem 1rem; margin-bottom:.75rem; background:var(--card); }
.pair h3 { margin:.25rem 0 .25rem; font-size:1rem; }
.photos img { width:100%; max-width:320px; border-radius:8px; margin:.25rem; }
.chart { overflow-x:auto; }
.chart svg { display:block; width:100%; height:auto; max-width:820px; }
.notice { background:#fff3cd; border:1px solid #f0dba0; border-radius:8px; padding:.6rem; margin:.5rem 0; }
table { border-collapse:collapse; width:100%; background:var(--card); }
th, td { border:1px solid #ddd; padding:.5rem .6rem; text-align:left; font-size:.9rem; }
th { background:#eef4ee; }
.down { color:var(--accent); font-weight:700; }
.up { color:var(--err); font-weight:700; }
.ok { color:var(--accent); }
.err { color:var(--err); }
.results { list-style:none; padding:0; margin-inline-start:0; }
.results li { padding:.6rem .7rem; margin:.25rem 0; border-radius:8px; background:var(--card); display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; }
.results li a { color:var(--accent2); font-weight:700; text-decoration:none; }
.results li a:hover { text-decoration:underline; }
.example .muted span { margin-inline-start:.5rem; }
.report { display:flex; gap:.3rem; align-items:center; margin:0; }
.report input { padding:.2rem .4rem; font-size:.8rem; width:auto; min-width:120px; border-radius:6px; }
.report button { font-size:.8rem; padding:.15rem .5rem; }
.job { border:1px solid #ddd; border-radius:10px; padding:1rem; margin:.75rem 0; background:var(--card); }
pre.raw { white-space:pre-wrap; font-size:.8rem; overflow-wrap:anywhere; }
.note { background:#eef4ee; border:1px solid #cfe0cf; padding:.6rem; border-radius:8px; }