:root { --ink:#1f2328; --muted:#646b73; --line:#d5d9de; --bg:#f6f7f8; --card:#fff;
  --accent:#0b5cad; --ok:#1a7f37; --warn:#9a6700; --bad:#b42318; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font: 16px/1.5 system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:600; color:var(--ink); text-decoration:none; }
.who { display:flex; gap:10px; align-items:center; margin:0; color:var(--muted); }
main { max-width:760px; margin:0 auto; padding:16px; }
h1 { font-size:1.3rem; margin:8px 0 12px; }
h2 { font-size:1.05rem; margin:22px 0 8px; }
a { color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; margin:10px 0; }
.row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.muted { color:var(--muted); font-size:.9rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size:.85rem; word-break:break-all; }
.tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.85rem;
  border:1px solid var(--line); background:var(--bg); white-space:nowrap; }
.tag.ok { color:var(--ok); border-color:var(--ok); }
.tag.warn { color:var(--warn); border-color:var(--warn); }
.tag.bad { color:var(--bad); border-color:var(--bad); }
dl { display:grid; grid-template-columns:7em 1fr; gap:4px 12px; margin:0; }
dt { color:var(--muted); }
dd { margin:0; }
ul.plain { list-style:none; padding:0; margin:0; }
ul.plain li { padding:6px 0; border-top:1px solid var(--line); }
ul.plain li:first-child { border-top:0; }
label { display:block; margin:10px 0 4px; font-weight:500; }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=password], select, textarea {
  width:100%; padding:9px 10px; font:inherit; border:1px solid var(--line); border-radius:6px; background:#fff; }
fieldset { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:4px 14px 14px; background:var(--card); }
legend { padding:0 6px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0 12px; }
button { font:inherit; padding:10px 16px; border-radius:6px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:var(--accent); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.link { background:none; border:0; color:var(--accent); padding:0; text-decoration:underline; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.actions form { margin:0; }
.notice { border-left:4px solid var(--warn); background:#fff8e6; padding:10px 12px; border-radius:4px; margin:10px 0; }
.error { border-left-color:var(--bad); background:#fdecea; }