:root { --ink:#2B2A29; --ink2:#55524F; --ink3:#8A8681; --hair:#D9D6D1; --bg:#F6F5F3; --card:#fff; --red:#C40606; --green:#1E6B34; --amber:#9A6200;
  --redsoft:#FBEDEC; --greensoft:#E6F3EA; --ambersoft:#FFF4DC; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--red); color: #fff;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
#bar h1 { font-size: 17px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#back { background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 0 8px 4px 0; }
#net { font-size: 12px; opacity: .9; white-space: nowrap; }
main { max-width: 760px; margin: 0 auto; padding: 12px 12px 96px; }
.card { background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; }
.card h2 { font-size: 16px; margin: 0 0 6px; } .card h3 { font-size: 14px; margin: 10px 0 4px; color: var(--ink2); }
.muted { color: var(--ink3); font-size: 13px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
button, .btn { font: inherit; border-radius: 8px; border: 1px solid var(--hair); background: #fff; color: var(--ink); padding: 10px 14px; min-height: 44px; }
button.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
button.wide { width: 100%; } button:disabled { opacity: .5; }
input, select, textarea { font: inherit; width: 100%; padding: 10px; border: 1px solid var(--hair); border-radius: 8px; background: #fff; color: var(--ink); }
label { display: block; font-size: 13px; color: var(--ink2); margin: 8px 0 3px; }
.err { color: var(--red); font-size: 14px; margin-top: 6px; }
.bar { height: 8px; border-radius: 4px; background: var(--hair); overflow: hidden; display: flex; margin: 6px 0; }
.bar i { display: block; height: 100%; } .bar .p { background: var(--green); } .bar .f { background: var(--red); } .bar .s { background: var(--ink3); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--hair); }
.list li:first-child { border-top: 0; }
.num { min-width: 34px; font-weight: 700; color: var(--ink2); text-align: right; }
.st { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid var(--hair); margin-top: 1px; }
.st.pass { background: var(--green); border-color: var(--green); } .st.fail { background: var(--red); border-color: var(--red); } .st.skip { background: var(--ink3); border-color: var(--ink3); }
.stage { font-weight: 700; margin: 14px 2px 6px; } .group { font-size: 13px; color: var(--ink2); margin: 10px 2px 4px; font-weight: 600; }
.trans { background: var(--ambersoft); border: 1px solid #E7C777; color: var(--amber); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 6px 0; }
.cond { background: #F1F0EE; border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 6px 0; }
.flag { background: var(--ambersoft); border-left: 3px solid #E7A500; padding: 6px 10px; font-size: 13px; margin: 6px 0; border-radius: 0 6px 6px 0; }
ol.steps { margin: 6px 0; padding-left: 26px; } ol.steps li { margin: 5px 0; } .sub { font-weight: 600; margin: 8px 0 2px; }
.crit { border-left: 3px solid var(--red); padding: 4px 10px; margin: 8px 0; white-space: pre-line; }
.verdict { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.verdict button { font-weight: 700; } .verdict .on.pass { background: var(--green); color: #fff; border-color: var(--green); }
.verdict .on.fail { background: var(--red); color: #fff; border-color: var(--red); } .verdict .on.skip { background: var(--ink3); color: #fff; border-color: var(--ink3); }
.nav { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--hair); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.nav button { flex: 1; } table { width: 100%; border-collapse: collapse; font-size: 14px; } td, th { text-align: left; padding: 6px 4px; border-top: 1px solid var(--hair); vertical-align: top; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 80px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 14px; z-index: 9; max-width: 90vw; }
.pill { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #EEE; color: var(--ink2); white-space: nowrap; }
.pill.dirty { background: var(--ambersoft); color: var(--amber); }