:root { --bg:#f6f7f9; --card:#fff; --text:#1d2330; --muted:#667085; --accent:#2563eb; --err:#b42318; --border:#d0d5dd; }
* { box-sizing: border-box; }
body { margin:0; padding:16px; background:var(--bg); color:var(--text); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.card { max-width:720px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:20px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
h1 { margin:0; font-size:20px; }
input { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; }
input:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
button { padding:7px 14px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:disabled, input:disabled { opacity:.55; cursor:not-allowed; }
table { width:100%; border-collapse:collapse; margin-top:12px; table-layout:fixed; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
th:first-child { width:40%; }
td { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; overflow-wrap:anywhere; white-space:pre-wrap; }
td.empty { color:var(--muted); font-style:italic; font-family:inherit; }
.status { margin:12px 0 0; min-height:1.4em; color:var(--muted); font-size:13px; }
.status.error { color:var(--err); }
.muted { margin:12px 0 0; color:var(--muted); font-size:12px; }