:root {
  --ink: #17211e; --muted: #66736e; --paper: #f5f6f2; --card: #fff;
  --line: #dfe4df; --green: #155d4a; --green-soft: #e8f2ed;
  --red: #b54336; --amber: #a96b12; --amber-soft: #fff3dc; --blue: #315f78;
  --shadow: 0 12px 40px rgba(29, 48, 41, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.showcase .workflow-actions, body.showcase #follow-up, body.showcase .action-buttons, body.showcase #chat-form { display: none; }
body.showcase .workflow-card { background: linear-gradient(115deg, #17211e, #245f50); }
body.showcase .workflow-copy::after { content: "Prebuilt sample assessment · Read-only"; display: block; margin-top: 5px; color: #b8c5c0; font-size: 11px; font-weight: 700; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
.topbar { height: 72px; padding: 0 max(24px, calc((100vw - 1440px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.brand { display: flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 10px; font-weight: 800; font-size: 18px; }
.brand strong { display: block; font-size: 18px; letter-spacing: -.02em; }.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 22px; }.role-picker { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.role-picker select { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 7px 28px 7px 10px; color: var(--ink); }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.connection i { width: 8px; height: 8px; background: #2e9d70; border-radius: 50%; box-shadow: 0 0 0 5px rgba(46,157,112,.12); }
main { max-width: 1440px; margin: 0 auto; padding: 52px 24px 80px; }
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: end; margin-bottom: 30px; }
.kicker, .section-kicker, .case-label { font-size: 10px; line-height: 1; letter-spacing: .14em; font-weight: 750; color: var(--green); }
.intro h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.02; letter-spacing: -.055em; margin: 12px 0 18px; max-width: 800px; }
.intro > div > p { color: var(--muted); max-width: 720px; font-size: 17px; line-height: 1.6; margin: 0; }
.plain-guide { background: #e9ede8; border-radius: 16px; padding: 20px 22px; }.plain-guide summary { font-weight: 700; cursor: pointer; }
.guide-grid { display: grid; gap: 14px; margin-top: 18px; }.guide-grid div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 12px; line-height: 1.5; }.guide-grid span { color: var(--muted); }
.workflow-card { background: var(--ink); color: white; border-radius: 18px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow); }
.workflow-copy { display: flex; gap: 14px; align-items: center; }.step-number { width: 35px; height: 35px; display: grid; place-items: center; flex: none; border-radius: 50%; background: rgba(255,255,255,.12); font-weight: 800; }
.workflow-copy h2 { font-size: 16px; margin: 0 0 4px; }.workflow-copy p { font-size: 12px; color: #b8c5c0; margin: 0; }
.workflow-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }.workflow-actions select { color: white; border: 1px solid #475551; background: #26332f; border-radius: 9px; padding: 10px 30px 10px 12px; }
.button { border: 0; border-radius: 9px; padding: 11px 15px; font-size: 12px; font-weight: 700; transition: transform .15s, box-shadow .15s, opacity .15s; }.button:hover:not(:disabled) { transform: translateY(-1px); }.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: #2c7f66; color: white; box-shadow: 0 7px 18px rgba(44,127,102,.2); }.button.quiet { background: #eef0eb; color: var(--ink); }.workflow-card .button.quiet { background: #394742; color: white; }.button.outline { background: transparent; color: inherit; border: 1px solid currentColor; }.button-arrow { margin-left: 10px; }
.run-panel { margin: 12px 0 28px; padding: 17px 20px; background: white; border: 1px solid var(--line); border-radius: 14px; }.run-head { display: flex; align-items: center; gap: 12px; }
.run-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 800; }.run-panel.working .run-icon { color: transparent; background: transparent; border: 3px solid #d6e0dc; border-top-color: var(--green); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }.run-head div { display: flex; flex-direction: column; gap: 2px; }.run-head strong { font-size: 13px; }.run-head span { color: var(--muted); font-size: 12px; }.run-head time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.run-steps { margin: 16px 0 0 42px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.run-steps span { color: #9ca7a3; font-size: 11px; display: flex; align-items: center; gap: 7px; }.run-steps i { width: 7px; height: 7px; border-radius: 50%; background: #d7ddda; }
.run-steps span.done { color: var(--green); font-weight: 700; }.run-steps span.done i { background: var(--green); }.run-steps span.active { color: var(--ink); font-weight: 700; }.run-steps span.active i { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.case-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 34px 0 16px; }.case-header h2 { font-size: 29px; letter-spacing: -.035em; margin: 7px 0 6px; }.case-header p { margin: 0; color: var(--muted); max-width: 840px; line-height: 1.5; }
.case-controls { display: flex; align-items: center; gap: 10px; }.status-pill { padding: 7px 10px; border-radius: 999px; font-size: 10px; text-transform: capitalize; background: var(--green-soft); color: var(--green); font-weight: 800; }.status-pill.neutral { background: #e9ece9; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }.metric { position: relative; min-height: 128px; background: white; border: 1px solid var(--line); border-radius: 15px; padding: 18px; overflow: hidden; }.metric::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--line); }
.metric.affected::before { background: var(--red); }.metric.uncertain::before { background: var(--amber); }.metric.clear::before { background: var(--green); }.metric.waiting::before { background: var(--blue); }.metric span { display: block; font-size: 12px; font-weight: 700; }.metric strong { display: block; font-size: 38px; letter-spacing: -.05em; margin: 8px 0 4px; }.metric small { color: var(--muted); font-size: 10px; }
.main-grid, .lower-grid, .audit-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); gap: 12px; margin-top: 12px; }.lower-grid { grid-template-columns: .9fr 1.1fr; }.audit-grid { grid-template-columns: 1fr 1fr; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); min-width: 0; }.card-header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 17px; }.card-header h2 { font-size: 21px; letter-spacing: -.025em; margin: 6px 0; }.card-header p { color: var(--muted); line-height: 1.5; margin: 0; font-size: 12px; max-width: 690px; }.card-header.compact { align-items: flex-start; }
.legend { white-space: nowrap; font-size: 10px; color: var(--muted); padding-top: 6px; }.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 4px 0 10px; }.dot:first-child { margin-left: 0; }.dot.affected { background: var(--red); }.dot.uncertain { background: var(--amber); }.dot.clear { background: var(--green); }
.count-badge { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800; }
.journey { min-height: 380px; padding-top: 18px; }.journey-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.journey-group h3 { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; margin: 0 0 10px; }
.journey-node { position: relative; padding: 13px 13px 12px 16px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 9px; background: #fcfdfb; }.journey-node::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #aeb8b4; }.journey-node.affected::before { background: var(--red); }.journey-node.uncertain::before { background: var(--amber); }.journey-node.clear::before { background: var(--green); }
.journey-node small { display: block; color: var(--muted); font-size: 9px; text-transform: capitalize; }.journey-node b { display: block; margin: 5px 0; font-size: 13px; overflow-wrap: anywhere; }.journey-node p { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 0; }.journey-node .connections { margin-top: 8px; padding-top: 7px; border-top: 1px solid #edf0ed; color: var(--blue); font-size: 9px; }
.scroll-list { height: 490px; overflow: auto; padding: 14px 4px 2px 0; scrollbar-width: thin; }.action-item, .evidence-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: #fdfefc; }.action-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.risk-label, .state-label { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }.risk-label.critical { color: var(--red); }.risk-label.high { color: var(--amber); }.state-label { color: var(--muted); }.action-item h3, .evidence-item h3 { font-size: 13px; margin: 8px 0 5px; }.action-item p, .evidence-item p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; }
.action-buttons { display: flex; gap: 7px; margin-top: 12px; }.action-buttons button { padding: 8px 11px; }.approve { color: white; background: var(--green); }.reject { color: var(--ink); background: #edf0ec; }.completed-state { display: inline-flex; margin-top: 10px; padding: 5px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.evidence-item summary { cursor: pointer; list-style: none; }.evidence-item summary::-webkit-details-marker { display: none; }.evidence-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; text-transform: capitalize; }.evidence-content { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--line); white-space: pre-wrap; }
.chat-log { height: 390px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 2px; }.message { max-width: 88%; padding: 12px 14px; border-radius: 12px; font-size: 12px; line-height: 1.55; }.message.agent { background: var(--green-soft); border-bottom-left-radius: 3px; }.message.user { background: var(--ink); color: white; align-self: flex-end; border-bottom-right-radius: 3px; }.message h4 { font-size: 13px; margin: 8px 0 3px; }.message code { background: rgba(0,0,0,.07); padding: 1px 3px; border-radius: 3px; }
.chat-card form { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }.chat-card input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 12px 13px; outline: 0; }.chat-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.timeline { list-style: none; padding: 14px 0 0; margin: 0; max-height: 260px; overflow: auto; }.timeline li { position: relative; padding: 0 0 15px 23px; font-size: 11px; line-height: 1.45; }.timeline li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }.timeline li::after { content: ""; position: absolute; left: 5px; top: 15px; bottom: 2px; width: 1px; background: var(--line); }.timeline li:last-child::after { display: none; }.timeline time { display: block; color: var(--muted); font-size: 9px; margin-bottom: 2px; }
.receipt-list { padding-top: 14px; min-height: 150px; }.receipt { border: 1px solid var(--line); border-radius: 10px; padding: 11px; margin-bottom: 8px; font-size: 10px; }.receipt b { display: block; font-size: 12px; margin-bottom: 4px; }.receipt code { color: var(--muted); word-break: break-all; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); }.empty-state b { color: var(--ink); font-size: 13px; margin: 7px 0 3px; }.empty-state p { font-size: 11px; margin: 0; max-width: 260px; line-height: 1.5; }.empty-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #edf0ec; color: var(--green); font-weight: 800; }
.muted { color: var(--muted); }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
#toast { position: fixed; right: 24px; bottom: 24px; max-width: 380px; padding: 12px 16px; color: white; background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; font-size: 12px; z-index: 50; }#toast.show { opacity: 1; transform: none; }
@media (max-width: 1050px) { .intro, .main-grid, .lower-grid, .audit-grid { grid-template-columns: 1fr; }.workflow-card { align-items: flex-start; flex-direction: column; }.workflow-actions { justify-content: flex-start; }.scroll-list { height: auto; max-height: 520px; } }
@media (max-width: 720px) { .topbar { padding: 0 14px; }.role-picker { display: none; }.connection span { display: none; }main { padding: 30px 12px 60px; }.intro { gap: 22px; }.intro h1 { font-size: 40px; }.guide-grid div { grid-template-columns: 1fr; gap: 4px; }.workflow-actions { width: 100%; }.workflow-actions > * { flex: 1; }.run-steps { grid-template-columns: 1fr 1fr; row-gap: 12px; margin-left: 0; }.case-header { align-items: flex-start; flex-direction: column; }.metrics { grid-template-columns: 1fr 1fr; }.journey-columns { grid-template-columns: 1fr; }.legend { display: none; }.card { padding: 17px; } }