:root { --fg:#1d2430; --muted:#6b7380; --line:#e3e6eb; --accent:#1f5fae; --ok:#1d7a3a; --err:#b42318; --bg:#f6f7f9; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); }
.top { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:8px; }
.brand { font-weight:700; color:var(--fg); text-decoration:none; } .brand span { color:var(--muted); font-weight:400; }
.top nav { display:flex; gap:14px; overflow-x:auto; max-width:100%; white-space:nowrap; scrollbar-width:none; }
.top nav::-webkit-scrollbar { display:none; }
.top nav a { color:var(--accent); text-decoration:none; }
@media (max-width: 600px) { .top { flex-direction:column; align-items:flex-start; } .top nav { width:100%; padding-bottom:2px; } }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; margin:18px auto; padding:18px 20px; max-width:960px; }
.card.narrow { max-width:420px; text-align:center; }
h1 { font-size:20px; margin:0 0 12px; } h2 { font-size:16px; margin:22px 0 8px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.btn { border:1px solid var(--line); background:#fff; padding:8px 14px; border-radius:6px; cursor:pointer; font:inherit; }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); width:100%; padding:12px; font-weight:600; }
.btn.small { padding:4px 10px; font-size:13px; } .btn.danger { color:var(--err); }
.status { margin-top:10px; min-height:1.4em; } .status.ok, .ok { color:var(--ok); } .status.err, .err { color:var(--err); }
table.grid { width:100%; border-collapse:collapse; } .grid td, .grid th { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); font-size:14px; }
.row { display:flex; gap:8px; flex-wrap:wrap; } .row input, .row select { padding:7px 9px; border:1px solid var(--line); border-radius:6px; font:inherit; }
@media (max-width: 600px) { .grid th:nth-child(5), .grid td:nth-child(5) { display:none; } }
/* house rule: a 2-letter+number code above every table / box, so it can be named in conversation */
.ref-code { display: inline-block; font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em;
            color: #8a93a3; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; margin: 0 0 6px; user-select: all; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }