:root { --ink:#14213d; --muted:#5c677d; --line:#d9dee7; --accent:#b8862b; --bg:#f7f8fb; --warn:#a4161a; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
.top { padding:1.5rem 1rem 0.5rem; max-width:1100px; margin:0 auto; }
.top h1 { margin:0; }
.note { color:var(--muted); margin:.25rem 0 0; }
.disclaimer { color:var(--warn); font-size:.95rem; margin:.75rem 0 0; max-width:1100px; }
.grid { display:grid; gap:1rem; padding:1rem; max-width:1100px; margin:0 auto; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem; }
.card.wide { grid-column:1 / -1; }
label { display:block; margin:.5rem 0; font-weight:600; }
input, select, textarea { display:block; width:100%; margin-top:.25rem; padding:.6rem; font:inherit; border:1px solid var(--line); border-radius:8px; }
button { min-height:44px; padding:.6rem 1rem; margin-top:.5rem; border:0; border-radius:8px; background:var(--ink); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; }
iframe { width:100%; height:480px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.errors { color:var(--warn); min-height:1.2em; }
.msg { color:var(--muted); min-height:1.2em; }
.foot { max-width:1100px; margin:0 auto; padding:0 1rem 2rem; color:var(--muted); font-size:.9rem; }
textarea { min-height:260px; font-family:ui-monospace, Menlo, monospace; font-size:.9rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.4rem; border-bottom:1px solid var(--line); vertical-align:top; }
tr.p5 td:first-child, tr.p4 td:first-child { color:var(--warn); font-weight:700; }
.counts { color:var(--muted); }
.draft { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.6rem; }
.table-wrap { overflow-x:auto; }
#qr { display:flex; justify-content:center; padding:.5rem; background:#fff; border:1px solid var(--line); border-radius:8px; min-height:200px; align-items:center; }
#qr svg { max-width:220px; height:auto; }
.hint { color:var(--muted); font-size:.9rem; font-weight:400; }