:root { --bg:#f4f5f7; --panel:#fff; --fg:#1b2a41; --muted:#5b6577; --line:#d5d9e0;
  --accent:#1b2a41; --on-accent:#fff; --ok:#2b6a2b; --ok-bg:#eef5ee; --err:#c62828; --err-bg:#fdecec; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
header { display:flex; gap:12px; align-items:center; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); }
header .who { margin-left:auto; color:var(--muted); font-size:13px; }
main { max-width:860px; margin:0 auto; padding:16px; }
h1 { font-size:20px; margin:8px 0 12px; }
h2 { font-size:15px; margin:0 0 8px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.card.entered { background:var(--ok-bg); border-color:#9fc39f; }
table.fields { width:100%; border-collapse:collapse; }
table.fields td, table.fields th { padding:5px 6px; border-top:1px solid var(--line); text-align:left; vertical-align:middle; }
table.fields tr:first-child td, table.fields tr:first-child th { border-top:0; }
td.box { width:6.5em; color:var(--muted); font-size:12px; white-space:nowrap; }
th { font-weight:600; width:13em; }
td.val { font-family:ui-monospace,Consolas,monospace; font-size:16px; overflow-wrap:anywhere; }
td.val.muted { font-family:inherit; font-size:14px; }
td:last-child { width:5.5em; text-align:right; }
button { font:inherit; padding:5px 12px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--fg); cursor:pointer; }
button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); margin-top:8px; }
button.copy.ok { background:var(--ok); color:#fff; border-color:var(--ok); }
button:disabled { opacity:.6; cursor:default; }
.tag { font-size:12px; font-weight:600; margin-left:8px; padding:2px 6px; border-radius:4px; background:#fff3cd; }
.tag.done { background:var(--ok); color:#fff; }
.muted { color:var(--muted); }
.error { background:var(--err-bg); color:var(--err); padding:8px 10px; border-radius:6px; }
form.inline { display:inline; }
.stack label { display:block; margin:10px 0; font-weight:600; }
.stack input { display:block; width:100%; margin-top:4px; font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:5px; }
.narrow { max-width:360px; }
@media (max-width:600px) {
  table.fields tr { display:grid; grid-template-columns:3.2em 1fr auto; align-items:center; border-top:1px solid var(--line); padding:4px 0; }
  table.fields tr:first-child { border-top:0; }
  table.fields td, table.fields th { border-top:0; padding:2px 4px; width:auto; }
  td.box { grid-row:1; grid-column:1; }
  table.fields th { grid-row:1; grid-column:2 / 4; }
  td.val { grid-row:2; grid-column:1 / 3; font-size:15px; }
  td:last-child { grid-row:2; grid-column:3; }
  main { padding:12px 16px; }
}
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:4px 12px; }
.review label { display:block; font-size:13px; font-weight:600; margin:6px 0; }
.review label.wide { grid-column:1 / -1; }
.review input, .review select, .review textarea { display:block; width:100%; margin-top:3px; font:inherit; font-weight:400; padding:5px 7px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--fg); }
.review input[type=radio], .review input[type=checkbox] { display:inline; width:auto; margin:0 6px 0 0; }
.review label.chk { display:flex; align-items:center; margin:10px 0; }
.review fieldset { border:0; padding:0; margin:0; min-width:0; }
.need input, .need select, .need textarea, td.need input, label.chk.need { border:2px solid var(--err) !important; }
label.chk.need { padding:4px 6px; border-radius:5px; }
table.products { width:100%; border-collapse:collapse; margin:8px 0; font-size:13px; }
table.products th { width:auto; font-size:12px; text-align:left; padding:2px 4px; }
table.products td { padding:2px 3px; }
.products-wrap, .card { overflow-x:auto; }
.warn { background:#fff3cd; padding:6px 10px; border-radius:6px; }
.ok-box { background:var(--ok-bg); border:1px solid #9fc39f; padding:8px 10px; border-radius:6px; }
.actions { display:flex; gap:10px; margin:12px 0 30px; }
.drop { display:block; border:2px dashed #8a94a6; border-radius:8px; padding:22px 14px; text-align:center; background:#f8f9fb; cursor:pointer; }
.drop.over { border-color:var(--accent); background:#eef1f6; }
.drop .big { display:block; font-weight:700; font-size:16px; margin-bottom:4px; }
.drop input { display:block; margin:10px auto 0; }
ul.list { padding-left:18px; }
table.products { table-layout:fixed; min-width:680px; }
table.products th:nth-child(1) { width:3.2em; }
table.products th:nth-child(2) { width:26%; }
table.products th:nth-child(3) { width:9em; }
table.products th:nth-child(4) { width:4.5em; }
table.products th:nth-child(5) { width:5em; }
table.products th:nth-child(7) { width:11em; }
table.products select { padding:5px 2px; }
table.log { width:100%; border-collapse:collapse; background:var(--panel); font-size:13px; }
table.log th, table.log td { border-top:1px solid var(--line); padding:4px 6px; text-align:left; width:auto; }
.inline-form { display:flex; gap:8px; align-items:end; margin-bottom:8px; }
.inline-form label { font-weight:600; font-size:13px; }
.inline-form input { display:block; font:inherit; padding:5px 7px; border:1px solid var(--line); border-radius:5px; }