/* Minimal, premium: near-monochrome, hairline borders, generous space, one quiet accent.
   Status colours are kept, but desaturated and used sparingly. Class names are unchanged. */
:root {
  --bg: #f7f7f6; --surface: #ffffff; --ink: #0d0d0f; --ink-2: #3a3a3f; --muted: #6e6e75; --faint: #a1a1a8;
  --line: rgba(13, 13, 15, .08); --line-strong: rgba(13, 13, 15, .14); --hover: rgba(13, 13, 15, .04);
  --accent: #0d0d0f; --accent-soft: #f1f1f3; --link: #2747c7;
  --ok: #1d7a4e; --ok-soft: #eef7f2; --ok-line: rgba(29, 122, 78, .22);
  --warn: #9a5b00; --warn-soft: #fbf5ea; --warn-line: rgba(154, 91, 0, .22);
  --err: #c0352b; --err-soft: #fdf3f2; --err-line: rgba(192, 53, 43, .22);
  --info: #3d5a8a; --info-soft: #f2f5fa; --info-line: rgba(61, 90, 138, .2);
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 1px rgba(13, 13, 15, .03), 0 8px 24px -12px rgba(13, 13, 15, .10);
  --shadow-lg: 0 2px 6px rgba(13, 13, 15, .05), 0 24px 60px -20px rgba(13, 13, 15, .22);
  --ring: 0 0 0 4px rgba(13, 13, 15, .06);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.028em; margin: 0 0 8px; font-weight: 600; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; letter-spacing: -.012em; }
h3 { font-size: 11px; margin: 0 0 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
p { margin: 0 0 10px; }
::selection { background: rgba(13, 13, 15, .12); }
.muted { color: var(--muted); } .faint { color: var(--faint); } .mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.small { font-size: 13px; } .tiny { font-size: 12px; }
.row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; } .hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* next action (analyst) */
.act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act > span { font-weight: 500; }
.act.risk > span { color: var(--err); }
.act.request > span, .act.reply > span, .act.review > span, .act.stuck > span { color: var(--ink); }
.act.waiting > span { color: var(--muted); font-weight: 400; }
.qaction { font-size: 13px; margin: 8px 0 2px; color: var(--ink-2); }
.qaction b { font-weight: 600; color: var(--ink); }
.qaction.risk, .qaction.risk b { color: var(--err); }
.att { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); margin: 6px 6px 0 0; }
.att.ok { background: var(--ok-soft); color: var(--ok); }
.att.bad { background: var(--err-soft); color: var(--err); }
.cc { font: 600 11px/1 var(--mono); letter-spacing: .04em; padding: 4px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--ink-2); }

/* top bar: frosted, hairline */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(247, 247, 246, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; gap: 16px; }
.brand { font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); display: inline-block; position: relative; }
.brand-mark::after { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 4px; border-radius: 2px; background: var(--bg); box-shadow: 0 6px 0 var(--bg); }
.nav { display: flex; gap: 2px; margin-left: 12px; padding: 3px; border-radius: 11px; background: rgba(13, 13, 15, .045); }
.nav button, .tab { background: none; border: 0; font: inherit; font-size: 14px; color: var(--muted); padding: 6px 13px; border-radius: 8px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease); }
.nav button:hover, .tab:hover { color: var(--ink); }
.nav button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(13, 13, 15, .08), 0 0 0 1px var(--line); }
.tab { border: 1px solid transparent; }
.tab.on { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }

/* buttons */
.btn { font: inherit; font-size: 14px; font-weight: 500; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  height: 38px; padding: 0 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:hover { background: #fafafa; border-color: rgba(13, 13, 15, .22); text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn.primary, .btn.accent { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(13, 13, 15, .18); }
.btn.primary:hover, .btn.accent:hover { background: #26262b; }
.btn.danger { color: var(--err); border-color: var(--err-line); }
.btn.danger:hover { background: var(--err-soft); }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.plain::before { display: none; }
.pill.approved, .pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.pending, .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.rejected, .pill.err { background: var(--err-soft); color: var(--err); }
.pill.draft, .pill.info { background: var(--info-soft); color: var(--info); }
.sev { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; }
.sev.block { background: var(--err); color: #fff; } .sev.fix { background: var(--err-soft); color: var(--err); }
.sev.explain { background: var(--warn-soft); color: var(--warn); } .sev.auto { background: var(--ok-soft); color: var(--ok); }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card.flat { box-shadow: none; }

/* ---------- vendor form ---------- */
.shell { max-width: 640px; margin: 0 auto; padding: 48px 24px 140px; }
.issue .one { color: var(--ink-2); font-size: 14px; }
.issue details.more { display: inline-block; font-size: 13px; color: var(--muted); margin: 0; }
.issue details.more > summary { list-style: none; cursor: pointer; height: 30px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 8px; }
.issue details.more > summary::-webkit-details-marker { display: none; }
.issue details.more > summary:hover { background: var(--hover); color: var(--ink); }
.issue details.more[open] { display: block; flex-basis: 100%; order: 9; }
.issue details.more[open] > summary { display: none; }
.issue details.more p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.issue details.more p.muted { color: var(--muted); }
.issue ol li > div > b { display: block; font-weight: 600; margin-bottom: 2px; }
.steps { display: flex; gap: 8px; margin: 0 0 40px; }
.step { flex: 1; border: 0; background: none; font: inherit; text-align: left; padding: 0; cursor: pointer; color: var(--faint); }
.step .bar { height: 2px; border-radius: 2px; background: var(--line-strong); margin-bottom: 10px; transition: background .3s var(--ease); }
.step.on { color: var(--ink); } .step.on .bar { background: var(--ink); }
.step.done { color: var(--muted); } .step.done .bar { background: var(--ink-2); opacity: .45; }
.step.has-issue .bar { background: var(--err); opacity: 1; }
.step .n { font-size: 12px; font-weight: 500; letter-spacing: -.005em; } .step:disabled { cursor: default; }
.lede { color: var(--muted); font-size: 15px; margin-bottom: 34px; }
.field { margin-bottom: 22px; position: relative; }
.field label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
.field label .opt { font-weight: 400; color: var(--faint); margin-left: 6px; }
.field input, .field select, textarea {
  width: 100%; font: inherit; font-size: 15px; height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--surface); color: var(--ink); outline: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: 0 1px 1px rgba(13, 13, 15, .02); }
textarea { height: auto; padding: 11px 14px; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.field input::placeholder, textarea::placeholder { color: #b4b4ba; }
.field input:hover, .field select:hover { border-color: rgba(13, 13, 15, .22); }
.field input:focus, .field select:focus, textarea:focus { border-color: var(--ink); box-shadow: var(--ring); }
.field .hint { font-size: 12.5px; color: var(--faint); margin-top: 7px; line-height: 1.45; }
.field .note { font-size: 12.5px; margin-top: 7px; display: none; }
.field.ok .note { display: block; color: var(--ok); } .field.ok .hint { display: none; }
.field.ok input, .field.ok select { border-color: var(--ok-line); padding-right: 40px; }
.field.ok::after { content: ""; position: absolute; right: 15px; top: 44px; width: 14px; height: 14px; border-radius: 50%; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.field.ok:has(select)::after { right: 38px; }
.field.ok select { padding-right: 60px; }
.field.error input, .field.error select { border-color: var(--err); box-shadow: 0 0 0 4px rgba(192, 53, 43, .07); }
.field.warn input, .field.warn select { border-color: var(--warn); box-shadow: 0 0 0 4px rgba(154, 91, 0, .07); }
.field.info input, .field.info select { border-color: var(--info-line); }
.field .tag { position: absolute; right: 0; top: 0; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; display: none; }
.field.error .tag { display: block; background: var(--err-soft); color: var(--err); }
.field.warn .tag { display: block; background: var(--warn-soft); color: var(--warn); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.section-label { margin: 40px 0 18px; padding-top: 0; border-top: 0; }
.section-label:first-of-type { margin-top: 0; }
.choice { display: grid; gap: 8px; }
.choice label { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; font-weight: 500; color: var(--ink); padding: 13px 15px;
  border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; background: var(--surface); margin: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.choice label:hover { border-color: rgba(13, 13, 15, .28); }
.choice input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--ink); flex: none; }
.choice label.sel { border-color: var(--ink); box-shadow: var(--ring); }
.choice .d { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 1px; }

/* issue cards: explain and resolve in place */
.issue { border: 1px solid var(--err-line); background: linear-gradient(180deg, #fffafa, #fff); border-radius: 14px; padding: 16px 18px;
  margin: -6px 0 24px; animation: pop .32s var(--ease); box-shadow: 0 8px 24px -16px rgba(192, 53, 43, .25); }
.issue.explain { border-color: var(--warn-line); background: linear-gradient(180deg, #fffcf6, #fff); box-shadow: 0 8px 24px -16px rgba(154, 91, 0, .22); }
.issue.explained { border-color: var(--info-line); background: linear-gradient(180deg, #f8fafd, #fff); box-shadow: none; }
.issue .t { font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; }
.issue > .t::before, .issue > div > .t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--err); flex: none; transform: translateY(-1px); }
.issue.explain > .t::before, .issue.explain > div > .t::before { background: var(--warn); }
.issue.explained > .t::before, .issue.explained > div > .t::before { background: var(--info); }
.issue .links { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.issue .links b { color: var(--ink-2); font-weight: 500; }
.issue ol { margin: 8px 0 4px; padding-left: 18px; } .issue ol li { margin-bottom: 12px; } .issue ol li::marker { color: var(--faint); }
.issue .need { background: var(--accent-soft); border: 0; border-radius: 9px; padding: 9px 12px; margin: 10px 0; font-size: 13.5px; color: var(--ink-2); }
.issue .need b { font-weight: 600; color: var(--ink); }
.issue details { font-size: 13px; color: var(--muted); margin: 6px 0; } .issue summary { cursor: pointer; }
.issue .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.issue textarea { margin-top: 10px; min-height: 76px; font-size: 14px; }
.accepted-note { font-size: 13px; color: var(--ok); background: var(--ok-soft); border-radius: 10px; padding: 9px 13px; margin: -8px 0 22px; }
.banner { border-radius: 14px; padding: 16px 18px; margin-bottom: 24px; border: 1px solid var(--line); background: var(--surface); }
.banner.ok { background: var(--ok-soft); border-color: var(--ok-line); } .banner.err { background: var(--err-soft); border-color: var(--err-line); }
.banner.warn { background: var(--warn-soft); border-color: var(--warn-line); } .banner.info { background: var(--info-soft); border-color: var(--info-line); }
.banner .big { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.995); } to { opacity: 1; transform: none; } }

/* footer nav: frosted */
.foot { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(247, 247, 246, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); z-index: 15; }
.foot-in { max-width: 640px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 12px; align-items: center; }
.save { font-size: 12.5px; color: var(--faint); }

/* documents */
.doc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.doc.error { border-color: var(--err-line); } .doc.ok { border-color: var(--ok-line); }
.doc .head { display: flex; gap: 12px; align-items: center; }
.doc .name { font-weight: 600; letter-spacing: -.01em; }
.drop { margin-top: 14px; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 20px; text-align: center; color: var(--muted); cursor: pointer;
  font-size: 14px; transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.drop:hover, .drop.over { border-color: var(--ink); background: #fafafa; color: var(--ink); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 13px; margin-top: 10px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }

/* live run view */
.run { margin: 12px 0 2px; }
.stage { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start; padding: 6px 0; position: relative; }
.stage:not(:last-child)::before { content: ""; position: absolute; left: 9.5px; top: 27px; bottom: -6px; width: 1px; background: var(--line-strong); }
.stage.done:not(:last-child)::before { background: var(--ok-line); }
.dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; z-index: 1; transition: background .25s var(--ease), border-color .25s var(--ease); }
.stage.running .dot { border-color: var(--ink); border-top-color: transparent; animation: spin .8s linear infinite; }
.stage.done .dot { background: var(--ok); border-color: var(--ok); } .stage.done .dot::after { content: "✓"; }
.stage.failed .dot { background: var(--err); border-color: var(--err); } .stage.failed .dot::after { content: "!"; }
.stage.warn .dot { background: var(--warn); border-color: var(--warn); } .stage.warn .dot::after { content: "…"; }
.stage .sname { font-weight: 500; } .stage.pending .sname { color: var(--faint); font-weight: 400; }
.stage .sdetail { font-size: 13px; color: var(--muted); } .stage .ms { font-size: 11.5px; color: var(--faint); font-family: var(--mono); padding-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.run.compact { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.run.compact .stage { display: flex; gap: 6px; align-items: center; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--accent-soft); font-size: 12px; }
.run.compact .stage::before { display: none; } .run.compact .dot { width: 15px; height: 15px; font-size: 8.5px; border-width: 1.5px; }
.run.compact .sdetail, .run.compact .ms { display: none; } .run.compact .sname { font-weight: 500; }

/* demo helper: a slim, quiet strip so it never competes with the form */
.demo { background: #0d0d0f; color: #d9d9de; font-size: 12.5px; }
.demo-in { max-width: 1200px; margin: 0 auto; padding: 7px 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.demo b { font-weight: 500; color: #fff; letter-spacing: .01em; }
.demo select { font: inherit; background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;
  height: 28px; padding: 0 8px; max-width: 100%; }
.demo select option { color: #0d0d0f; }
.demo .btn { height: 28px; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .14); font-size: 12.5px; }
.demo .btn:hover { background: rgba(255, 255, 255, .16); }
.demo .blurb { color: #9c9ca4; }
.demo a { color: #d9d9de !important; }

/* ---------- analyst ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 96px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 28px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.kpi .v { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12.5px; color: var(--muted); font-weight: 500; } .kpi .s { font-size: 12px; color: var(--faint); margin-top: 4px; line-height: 1.4; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.click { cursor: pointer; } tr.click td { transition: background .15s var(--ease); } tr.click:hover td { background: #fafafa; }
tr:last-child td { border-bottom: 0; }
.tablecard { padding: 4px 6px; overflow-x: auto; }
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-bottom: 30px; }
.qcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; color: inherit;
  box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.qcard:hover { border-color: var(--line-strong); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.sig { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-top: 7px; color: var(--ink-2); }
.sig i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--faint); transform: translateY(-1px); }
.sig.risk i { background: var(--err); } .sig.stuck i { background: var(--warn); } .sig.reply i { background: var(--link); } .sig.review i { background: var(--info); }
.bars .b { display: grid; grid-template-columns: 220px 1fr 44px; gap: 12px; align-items: center; font-size: 13px; margin-bottom: 9px; }
.bars .track { background: var(--accent-soft); border-radius: 999px; height: 8px; overflow: hidden; }
.bars .fill { height: 100%; background: var(--ink); border-radius: 999px; }
.bars .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); gap: 20px; align-items: start; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols2 > .card + .card { margin-top: 0; }
.finding { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; position: relative; }
.finding::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--line-strong); }
.finding.block::before { background: var(--err); } .finding.fix::before { background: rgba(192, 53, 43, .55); }
.finding.explain::before { background: var(--warn); } .finding.auto::before, .finding.accepted::before { background: var(--ok); }
.finding.resolved { opacity: .55; }
.finding .ft { font-weight: 600; letter-spacing: -.01em; }
.ev { font-size: 13px; background: var(--accent-soft); border-radius: 9px; padding: 9px 12px; margin-top: 10px; }
.ev .kv { margin-top: 0; }
.timeline { font-size: 13px; max-height: 560px; overflow: auto; }
.tl { display: grid; grid-template-columns: 62px 16px 1fr; gap: 6px; padding: 6px 0; align-items: start; }
.tl .ts { color: var(--faint); font-family: var(--mono); font-size: 11px; padding-top: 2px; }
.tl .who { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--line-strong); }
.tl.vendor .who { background: var(--link); } .tl.system .who { background: var(--faint); } .tl.analyst .who { background: var(--ok); }
.tl.bad .txt { color: var(--err); } .tl.good .txt { color: var(--ok); }
.msg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; font-size: 13px; }
.msg.in { background: #f7f8fc; border-color: rgba(39, 71, 199, .14); }
.msg pre { white-space: pre-wrap; font: inherit; margin: 8px 0 0; color: var(--ink-2); }
.msg .mh { display: flex; gap: 8px; justify-content: space-between; color: var(--muted); font-size: 12px; }
.nextact { border-color: var(--line-strong); }
.diff td.old { color: var(--muted); text-decoration: line-through; } .diff td.new { font-weight: 600; }
.modal-bg { position: fixed; inset: 0; background: rgba(13, 13, 15, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  z-index: 50; display: grid; place-items: center; padding: 20px; animation: fade .2s var(--ease); }
.modal { background: var(--surface); border-radius: 18px; padding: 26px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); animation: pop .28s var(--ease); }
.modal h2 { font-size: 18px; }
.modal textarea, .modal input, .modal select, .side textarea, .side input { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: 10px; margin-bottom: 10px; outline: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.modal textarea:focus, .modal input:focus { border-color: var(--ink); box-shadow: var(--ring); }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: rgba(13, 13, 15, .92); color: #fff; padding: 11px 18px;
  border-radius: 12px; z-index: 60; font-size: 13.5px; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: rise .3s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* landing */
.hero { max-width: 880px; margin: 0 auto; padding: 96px 24px 72px; }
.hero h1 { font-size: 46px; letter-spacing: -.035em; line-height: 1.05; } .hero .lede { font-size: 18px; max-width: 620px; line-height: 1.55; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; }
.door { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; color: inherit; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.door:hover { border-color: var(--line-strong); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.door .k { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: .09em; text-transform: uppercase; }
.door .h { font-size: 21px; font-weight: 600; margin: 8px 0 6px; letter-spacing: -.02em; }

@media (max-width: 860px) {
  .cols, .cols2, .doors { grid-template-columns: 1fr; } .two { grid-template-columns: 1fr; gap: 0; }
  h1 { font-size: 25px; } .hero h1 { font-size: 34px; } .bars .b { grid-template-columns: 130px 1fr 40px; }
  .step .n span { display: none; } .foot .help { display: none; } .demo .blurb { display: none; } .nav { margin-left: 0; }
  .topbar-in { flex-wrap: wrap; height: auto; padding: 10px 20px; } .shell { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.foot-in > span { white-space: nowrap; }
.foot .help { overflow: hidden; text-overflow: ellipsis; }
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--muted); }
.ico svg { display: block; }
.contact .row { align-items: flex-start; gap: 12px; }
.contact .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--ink-2); }
.stuck-note { color: var(--err); margin-top: 6px; }
.stuck-note a { color: inherit; text-decoration: underline; }

/* vendor: submitting and next steps */
.submitting { text-align: center; padding: 60px 0; }
.spin { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--ink); animation: spin .8s linear infinite; margin-bottom: 18px; }
.next-steps { margin-top: 18px; }
.ns { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ns:last-child { border-bottom: 0; }
.ns .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--faint); }
.ns.done .ico { background: var(--ok-soft); color: var(--ok); }
.ns.on .ico { background: var(--info-soft); color: var(--info); }
.ns.on.warn .ico { background: var(--warn-soft); color: var(--warn); }
.ns b { font-weight: 600; }

/* document preview */
.doc .head { align-items: center; }
.doc-ph { width: 54px; height: 70px; border-radius: 8px; border: 1px dashed var(--line-strong); color: var(--faint); flex: none; display: grid; place-items: center; }
.doc-thumb { position: relative; width: 54px; height: 70px; flex: none; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(13, 13, 15, .06); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.doc-thumb:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.doc-thumb iframe { width: 340px; height: 440px; border: 0; transform: scale(.16); transform-origin: 0 0; pointer-events: none; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-thumb-eye { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 6px; background: rgba(255, 255, 255, .9); display: grid; place-items: center; }
.doc-thumb-eye .ico svg { width: 12px; height: 12px; }
.doc-modal { max-width: 820px; }
.doc-modal iframe { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; }
.doc-modal img { width: 100%; margin-top: 12px; border-radius: 10px; }

/* ---------- analyst console: one grid for every row ---------- */
.page-title h1 { font-size: 26px; margin: 0 0 4px; }
.page-title .lede { margin: 0 0 22px; font-size: 14px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.pill .ico { color: inherit; margin-right: 2px; }
.kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.kpi { display: flex; flex-direction: column; min-height: 118px; }
.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-top .ico { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--ink-2); }
.kpi .v { margin: 12px 0 4px; }
.kpi .s { margin-top: auto; }
.kpi.attn { background: linear-gradient(180deg, #fffaf6, #fff); border-color: var(--warn-line); }
.kpi.attn .kpi-top .ico { background: var(--warn-soft); color: var(--warn); }
.qsec { margin-bottom: 34px; }
.qsec-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.qsec-h h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.qsec-h p { margin: 0; font-size: 13px; color: var(--muted); }
.count { font: 600 12px/1 var(--font); padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.qtable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.qhead, .qrow { display: grid; grid-template-columns: 92px minmax(200px, 1.5fr) minmax(170px, 1.1fr) 120px minmax(260px, 2fr) 64px; gap: 16px; align-items: center; padding: 0 20px; }
.qhead { height: 40px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); background: #fcfcfb; }
.qrow { min-height: 72px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: inherit; position: relative; transition: background .15s var(--ease); }
.qrow:last-child { border-bottom: 0; }
.qrow:hover { background: #fafafa; text-decoration: none; }
.qrow::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.qrow.p-high::before { background: var(--err); } .qrow.p-medium::before { background: var(--warn); }
.qrow.p-high { background: linear-gradient(90deg, rgba(192, 53, 43, .035), transparent 40%); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.age { color: var(--muted); font-size: 13px; }
.prio { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.prio.high { background: var(--err-soft); color: var(--err); } .prio.medium { background: var(--warn-soft); color: var(--warn); } .prio.low { background: var(--accent-soft); color: var(--muted); }
.v-cell b { display: block; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.v-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); }
.tag-s { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--info-soft); color: var(--info); }
.tag-s.dup { background: var(--warn-soft); color: var(--warn); cursor: help; }
.stage-cell { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.stage-cell .dots { display: flex; gap: 4px; }
.dot-s { width: 22px; height: 4px; border-radius: 4px; background: var(--line-strong); }
.dot-s.done { background: var(--ink-2); opacity: .5; } .dot-s.on { background: var(--ink); }
.stage-cell.closed .dot-s { background: var(--line); }
.st-l { font-weight: 500; } .st-d { color: var(--muted); margin-left: 6px; }
.wait { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.wait.w-you { color: var(--ink); font-weight: 500; } .wait.w-you .ico { color: var(--ink); }
.wait.w-risk-team { color: var(--err); } .wait.w-risk-team .ico { color: var(--err); }
.wait.w-vendor, .wait.w-nobody { color: var(--muted); }
.qrow .act { flex-wrap: nowrap; gap: 9px; font-size: 13.5px; }
.qrow .act .act-l { flex: 1; min-width: 0; line-height: 1.35; }
.act.risk .ico, .act.risk .act-l { color: var(--err); }
.act.waiting .act-l, .act.none .act-l { color: var(--muted); }
.empty { display: flex; align-items: center; gap: 10px; padding: 22px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: 14px; }
.empty .ico { color: var(--ok); }
.toolbar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(13, 13, 15, .045); flex-wrap: wrap; }
.seg button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.seg button .n { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(13, 13, 15, .08), 0 0 0 1px var(--line); }
.search { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); min-width: 280px; }
.search input { border: 0; outline: 0; font: inherit; font-size: 14px; flex: 1; background: none; }
.mail-list { display: grid; gap: 8px; }
.mail-item { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--warn-line); background: linear-gradient(180deg, #fffcf6, #fff); border-radius: 12px; }
.mail-item select { font: inherit; font-size: 13px; height: 32px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 8px; max-width: 260px; }
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qhead { display: none; }
  .qrow { grid-template-columns: 1fr auto; grid-template-areas: "vendor prio" "stage age" "action action"; gap: 10px; }
  .qrow > :nth-child(1) { grid-area: prio; justify-self: end; } .qrow > :nth-child(2) { grid-area: vendor; } .qrow > :nth-child(3) { grid-area: stage; }
  .qrow > :nth-child(4) { display: none; } .qrow > :nth-child(5) { grid-area: action; } .qrow > :nth-child(6) { grid-area: age; }
}
.nav button, .brand, .topbar-in .btn, .live { white-space: nowrap; }

/* ---------- case page ---------- */
.case-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.case-head h1 { margin-bottom: 6px; }
.case-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.case-meta .ico { margin-left: 6px; } .case-meta .ico:first-child { margin-left: 0; }
.case-meta .mono { margin-left: 8px; }
.case-pills { display: flex; gap: 8px; align-items: center; }
.case-pills .prio { height: 26px; }
.banner.outcome { margin-bottom: 14px; }
.stagebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; }
.sb { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--faint); }
.sb i { height: 4px; border-radius: 4px; background: var(--line-strong); }
.sb.done { color: var(--muted); } .sb.done i { background: var(--ink-2); opacity: .45; }
.sb.on { color: var(--ink); font-weight: 500; } .sb.on i { background: var(--ink); }
.sb-d { font-size: 12px; color: var(--muted); font-weight: 400; }
.card-h { display: flex; align-items: center; gap: 9px; }
.card-h .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--ink-2); }
.nexttask { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-strong); margin-bottom: 12px;
  background: linear-gradient(180deg, #fbfbfd, #fff); }
.nexttask.risk { border-color: var(--err-line); background: linear-gradient(180deg, #fffafa, #fff); }
.nexttask.risk .ico, .nexttask.risk .nt-l { color: var(--err); }
.nexttask .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); }
.nexttask.risk .ico { background: var(--err-soft); }
.nt-k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nt-l { font-size: 15px; font-weight: 500; margin-top: 2px; }
.doc-row { display: flex; gap: 14px; align-items: flex-start; }
.links-row { display: flex; gap: 16px; margin-top: 12px; }
.links-row a { display: inline-flex; gap: 6px; align-items: center; }
.links-row .ico { color: var(--link); }
.contact-list { display: grid; gap: 10px; font-size: 14px; }
.contact-list > div { display: flex; gap: 10px; align-items: center; }
.contact-list .ico { color: var(--faint); }

/* review: a read-only copy of the registration */
.summary { padding: 6px 22px; }
.sum-sec { padding: 16px 0; border-bottom: 1px solid var(--line); }
.sum-sec:last-child { border-bottom: 0; }
.sum-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sum-h h3 { margin: 0; }
.sum-row { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 16px; padding: 6px 0; font-size: 14px; }
.sum-k { color: var(--muted); }
.sum-v { color: var(--ink); word-break: break-word; }
.sum-row.bad .sum-v { color: var(--err); }
.sum-doc { display: flex; gap: 14px; align-items: center; padding: 8px 0; }
.submitted-copy { margin-top: 16px; }
.submitted-copy > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 6px 0; }
.seg button .n.hot { color: var(--warn); font-weight: 600; }

/* vendor conversation */
.convo { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 340px; overflow: auto; }
.cmsg { padding: 8px 12px; border-radius: 10px; max-width: 88%; border: 1px solid var(--line); }
.cmsg.me { align-self: flex-end; background: var(--hover); }
.cmsg.them { align-self: flex-start; }
.cmsg .cbody { white-space: pre-wrap; margin-top: 2px; }
.contact textarea { width: 100%; box-sizing: border-box; }

/* monitoring: month on month */
.mom-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.mom { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.mom-v { font-size: 24px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mom-d { font-size: 12px; color: var(--muted); }
.mom-d.up-good { color: var(--ok); } .mom-d.up-bad { color: var(--err); }
.trend { width: 100%; height: auto; display: block; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); margin-top: 4px; }
.trend-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }