:root { --bg:#fff; --fg:#1a1a1a; --muted:#6b7280; --line:#e5e7eb;
        --ok:#166534; --bad:#b91c1c; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111418; --fg:#e8eaed; --muted:#9aa0a6; --line:#2a2f36;
          --ok:#4ade80; --bad:#f87171; }
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); margin: 0 auto; padding: 2rem 1rem;
       max-width: 60rem; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
body.narrow { max-width: 22rem; }
h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.muted { color: var(--muted); font-size: .9rem; }
table.check { border-collapse: collapse; width: 100%; margin: 1.25rem 0; }
table.check td { border-top: 1px solid var(--line); padding: .5rem .4rem; vertical-align: top; }
table.check td:first-child { width: 1.5rem; font-weight: 700; }
table.check td:nth-child(2) { width: 12rem; }
tr.ok td:first-child { color: var(--ok); }
tr.bad td:first-child { color: var(--bad); }
tr.bad td:last-child { color: var(--bad); }
p.bad { color: var(--bad); }
form label { display: block; margin: .75rem 0; }
form input { display: block; width: 100%; padding: .5rem; margin-top: .25rem;
             border: 1px solid var(--line); border-radius: .375rem;
             background: var(--bg); color: var(--fg); font-size: 1rem; }
button { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: .375rem;
         background: var(--fg); color: var(--bg); font-size: 1rem; cursor: pointer; }

h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.card { border: 1px solid var(--line); border-radius: .5rem; padding: 1rem 1.25rem;
        margin: 1.25rem 0; }
.card p.muted { margin: .25rem 0 .75rem; }
table.list { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; }
table.list th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--muted);
                border-bottom: 1px solid var(--line); padding: .35rem .4rem; }
table.list td { border-top: 1px solid var(--line); padding: .35rem .4rem; vertical-align: middle; }
table.list tr.bad td { color: var(--bad); }
table.list tr.warn-row td:first-child { border-left: 3px solid var(--bad); }
table.items input { width: 100%; padding: .3rem .4rem; border: 1px solid transparent;
                    border-radius: .25rem; background: transparent; color: var(--fg);
                    font: inherit; }
table.items input:hover { border-color: var(--line); }
table.items input:focus { border-color: var(--muted); outline: none; background: var(--bg); }
table.items input.num { width: 6rem; text-align: right; }
table.items input.unit { width: 5rem; }
table.items td:last-child { text-align: center; width: 4rem; }
ul.warn { border-left: 3px solid var(--bad); margin: .5rem 0; padding: .25rem 0 .25rem 1rem;
          list-style: none; }
ul.warn li { margin: .35rem 0; }
button.ghost { background: transparent; color: var(--fg); }

.specs { font-size: .8rem; color: var(--muted); margin: .15rem 0 .1rem .4rem;
         display: flex; flex-wrap: wrap; gap: .15rem .9rem; }
.specs b { font-weight: 600; }
.specs .code { font-family: ui-monospace, Menlo, monospace; color: var(--fg);
               background: var(--line); border-radius: .2rem; padding: 0 .3rem; }

.scroll { overflow-x: auto; margin: 1rem 0; }
table.markup { min-width: 100%; white-space: nowrap; }
table.markup th { padding: .3rem .25rem; vertical-align: top; }
table.markup select { font-size: .78rem; padding: .2rem; max-width: 11rem;
                      border: 1px solid var(--line); border-radius: .25rem;
                      background: var(--bg); color: var(--fg); }
table.markup td { font-size: .82rem; max-width: 16rem; overflow: hidden;
                  text-overflow: ellipsis; }
table.markup tr.header-row td { font-weight: 600; }

a.mark { font-size: .8rem; margin-right: .5rem; white-space: nowrap; }