:root {
  color-scheme: light;
  --ink: #18221d;
  --muted: #64716a;
  --line: #d9e1dc;
  --paper: #ffffff;
  --surface: #f2f5f3;
  --green: #146c45;
  --green-soft: #e6f3eb;
  --coral: #b94435;
  --coral-soft: #fdece8;
  --blue: #246a8d;
  --blue-soft: #e9f2f7;
  --yellow: #e6b84a;
  --shadow: 0 10px 28px rgba(24, 34, 29, 0.07);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--surface); color: var(--ink); }
body { margin: 0; min-width: 320px; }
button, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
svg { height: 18px; width: 18px; }

.topbar {
  align-items: center;
  background: var(--ink);
  color: #fff;
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 28px;
}
.brand { align-items: center; color: #fff; display: flex; font-weight: 750; gap: 10px; text-decoration: none; }
.brand-mark { align-items: center; background: var(--yellow); border-radius: 5px; color: var(--ink); display: inline-flex; height: 32px; justify-content: center; width: 32px; }
.environment { align-items: center; display: flex; font-size: 13px; gap: 8px; }
.status-dot { background: #6fd099; border-radius: 50%; height: 8px; width: 8px; }

.shell { margin: 0 auto; max-width: 1220px; padding: 26px 28px 36px; }
.page-heading { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 22px; }
.eyebrow, .kicker { color: var(--green); font-size: 11px; font-weight: 800; margin: 0 0 6px; text-transform: uppercase; }
h1, h2, h3, p { letter-spacing: 0; }
h1 { font-size: 30px; line-height: 1.25; margin: 0; }
h2 { font-size: 19px; line-height: 1.35; margin: 0; }
h3 { font-size: 14px; line-height: 1.45; margin: 0; }
.subhead { color: var(--muted); line-height: 1.65; margin: 8px 0 0; max-width: 720px; }
.heading-facts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.heading-facts span { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; display: inline-flex; font-size: 12px; font-weight: 700; gap: 6px; padding: 8px 10px; }
.heading-facts span:first-child { color: var(--green); }
.heading-facts span:last-child { color: var(--blue); }

.tabs { border-bottom: 1px solid var(--line); display: flex; gap: 24px; margin-bottom: 18px; }
.tab-button { align-items: center; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); display: inline-flex; gap: 7px; padding: 10px 1px; }
.tab-button[aria-selected="true"] { border-bottom-color: var(--green); color: var(--ink); font-weight: 750; }
.tab-panel[hidden] { display: none; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); min-width: 0; }
.toolbar { align-items: end; display: grid; gap: 14px; grid-template-columns: 220px minmax(240px, 1fr) auto 42px; margin-bottom: 14px; padding: 14px; }
.scenario-control label { display: block; font-size: 12px; font-weight: 750; margin-bottom: 6px; }
.scenario-control select { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; color: var(--ink); min-height: 42px; padding: 0 11px; width: 100%; }
.toolbar-copy { align-self: center; display: grid; gap: 4px; }
.toolbar-copy strong { font-size: 14px; }
.toolbar-copy span { color: var(--muted); font-size: 12px; }
.button, .icon-button { align-items: center; border-radius: 5px; display: inline-flex; justify-content: center; min-height: 42px; }
.button { border: 1px solid transparent; font-weight: 750; gap: 8px; padding: 0 15px; }
.button-primary { background: var(--green); color: #fff; }
.button-primary:hover { background: #0f5938; }
.button:disabled { cursor: wait; opacity: .62; }
.icon-button { background: #fff; border: 1px solid var(--line); color: var(--muted); width: 42px; }

.summary-strip { background: var(--ink); border-radius: 6px; color: #fff; display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 14px; overflow: hidden; }
.summary-strip div { border-right: 1px solid #34423a; display: grid; gap: 3px; min-height: 66px; padding: 13px 15px; }
.summary-strip div:last-child { border-right: 0; }
.summary-strip span { color: #b6c1ba; font-size: 11px; }
.summary-strip strong { font-size: 14px; }
.severity-ok { color: #7ce0a8; }
.severity-p1 { color: #ff9f8e; }

.workspace-grid { display: grid; gap: 14px; grid-template-columns: minmax(360px, .82fr) minmax(440px, 1.18fr); }
.panel-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 70px; padding: 14px 17px; }
.mono { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.chain-list { list-style: none; margin: 0; padding: 8px 17px 15px; }
.chain-list li { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 38px minmax(0, 1fr) 62px; min-height: 70px; }
.chain-list li:last-child { border-bottom: 0; }
.layer-icon { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; color: var(--muted); display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.chain-list b { display: block; font-size: 14px; }
.chain-list small { color: var(--muted); display: block; line-height: 1.45; margin-top: 3px; }
.layer-status { color: var(--muted); font-size: 12px; font-weight: 750; text-align: right; }
.chain-list li.checking .layer-icon { background: var(--blue-soft); border-color: #bcd5e2; color: var(--blue); }
.chain-list li.checking .layer-status { color: var(--blue); }
.chain-list li.pass .layer-icon { background: var(--green-soft); border-color: #b9dbc7; color: var(--green); }
.chain-list li.pass .layer-status { color: var(--green); }
.chain-list li.fail .layer-icon { background: var(--coral-soft); border-color: #efc1b7; color: var(--coral); }
.chain-list li.fail .layer-status { color: var(--coral); }

.report-panel { min-height: 445px; }
.report-badge { border-radius: 4px; font-size: 11px; font-weight: 800; padding: 6px 9px; }
.report-badge.neutral { background: var(--surface); color: var(--muted); }
.report-badge.ok { background: var(--green-soft); color: var(--green); }
.report-badge.p1 { background: var(--coral-soft); color: var(--coral); }
.report-body { padding: 7px 18px 18px; }
.report-body section { border-bottom: 1px solid var(--line); padding: 11px 0; }
.report-body section:last-child { border-bottom: 0; }
.report-body h3 { color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.report-body p { color: #425048; font-size: 13px; line-height: 1.62; margin: 5px 0 0; }
.empty-state { align-items: center; color: var(--muted); display: flex; flex-direction: column; justify-content: center; min-height: 370px; text-align: center; }
.empty-state svg { color: var(--blue); height: 30px; width: 30px; }
.empty-state p { color: var(--ink); font-weight: 700; margin: 12px 0 4px; }

.content-layout { display: grid; gap: 0; grid-template-columns: 1.25fr .75fr; }
.content-layout > article { background: var(--paper); border: 1px solid var(--line); border-radius: 7px 0 0 7px; padding: 24px; }
.guide-steps { list-style: none; margin: 19px 0 0; padding: 0; }
.guide-steps li { border-top: 1px solid var(--line); display: grid; gap: 13px; grid-template-columns: 32px 1fr; padding: 15px 0; }
.guide-steps li > span { align-items: center; background: var(--green-soft); border-radius: 5px; color: var(--green); display: inline-flex; font-weight: 800; height: 30px; justify-content: center; width: 30px; }
.guide-steps p { color: var(--muted); line-height: 1.55; margin: 4px 0 0; }
.boundary-band { background: var(--blue-soft); border: 1px solid #bfd5e0; border-left: 0; border-radius: 0 7px 7px 0; padding: 24px; }
.check-list { display: grid; gap: 13px; list-style: none; margin: 20px 0; padding: 0; }
.check-list li { align-items: start; display: grid; font-size: 13px; gap: 9px; grid-template-columns: 18px 1fr; line-height: 1.55; }
.check-list svg { color: var(--green); }
.boundary-note { border-top: 1px solid #bfd5e0; color: #496271; font-size: 12px; line-height: 1.65; margin: 0; padding-top: 15px; }

.evidence-table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.evidence-table { border-collapse: collapse; width: 100%; }
.evidence-table th, .evidence-table td { border-bottom: 1px solid var(--line); padding: 15px 17px; text-align: left; }
.evidence-table th { background: var(--surface); font-size: 12px; }
.evidence-table td { font-size: 13px; }
.evidence-table tr:last-child td { border-bottom: 0; }
.pass-text { color: var(--green); font-weight: 750; }
.footer { color: var(--muted); display: flex; font-size: 11px; justify-content: space-between; margin: 0 auto; max-width: 1220px; padding: 0 28px 24px; }

@media (max-width: 880px) {
  .page-heading { align-items: start; flex-direction: column; }
  .heading-facts { justify-content: start; }
  .toolbar { grid-template-columns: 1fr auto; }
  .toolbar-copy { grid-column: 1 / -1; grid-row: 2; }
  .workspace-grid { grid-template-columns: 1fr; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .summary-strip div { border-bottom: 1px solid #34423a; }
  .content-layout { grid-template-columns: 1fr; }
  .content-layout > article { border-radius: 7px 7px 0 0; }
  .boundary-band { border-left: 1px solid #bfd5e0; border-radius: 0 0 7px 7px; border-top: 0; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 16px; }
  .environment { font-size: 0; }
  .shell { padding: 20px 16px 28px; }
  h1 { font-size: 25px; }
  .tabs { gap: 14px; overflow-x: auto; }
  .tab-button { flex: 0 0 auto; }
  .toolbar { grid-template-columns: 1fr 42px; }
  .scenario-control { grid-column: 1 / -1; }
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .summary-strip div:last-child { grid-column: 1 / -1; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-header { align-items: start; flex-direction: column; gap: 8px; }
  .chain-list li { grid-template-columns: 38px minmax(0, 1fr); padding: 8px 0; }
  .layer-status { grid-column: 2; text-align: left; }
  .footer { flex-direction: column; gap: 5px; padding: 0 16px 20px; }
}

/* Course evidence pages */
.artifact-body { background: #eef2ef; }
.artifact-shell { margin: 0 auto; max-width: 1240px; padding: 28px; }
.artifact-title { align-items: end; display: flex; justify-content: space-between; margin-bottom: 18px; }
.artifact-title h1 { font-size: 27px; }
.artifact-label { background: var(--ink); border-radius: 4px; color: #fff; font-size: 11px; font-weight: 800; padding: 7px 9px; }
.artifact-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.artifact-block { background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 18px; }
.artifact-block.wide { grid-column: 1 / -1; }
.artifact-block h2 { align-items: center; display: flex; font-size: 16px; gap: 8px; margin-bottom: 11px; }
.artifact-block h2 svg { color: var(--green); }
.artifact-block p, .artifact-block li { color: #46534b; font-size: 13px; line-height: 1.62; }
.artifact-block p { margin: 0; }
.artifact-block ul, .artifact-block ol { margin: 0; padding-left: 20px; }
.artifact-block li + li { margin-top: 5px; }
.job-summary { background: var(--green-soft); border-left: 4px solid var(--green); border-radius: 0 6px 6px 0; color: var(--ink); font-size: 16px; font-weight: 750; line-height: 1.6; margin-bottom: 14px; padding: 14px 17px; }
.acceptance-row { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
.acceptance-row div { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 12px; }
.acceptance-row strong { display: block; font-size: 18px; margin-bottom: 4px; }
.acceptance-row span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.danger-block { background: var(--coral-soft); border-color: #efc1b7; }
.danger-block h2 { color: var(--coral); }
.workflow-cards { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); }
.workflow-card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; min-height: 146px; padding: 13px; position: relative; }
.workflow-card span { align-items: center; background: var(--ink); border-radius: 4px; color: #fff; display: inline-flex; font-size: 11px; font-weight: 800; height: 27px; justify-content: center; width: 27px; }
.workflow-card h3 { font-size: 14px; margin: 12px 0 6px; }
.workflow-card p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0; }
.workflow-card.decision { border-top: 3px solid var(--yellow); }
.workflow-card.agent { border-top: 3px solid var(--blue); }
.workflow-card.human { border-top: 3px solid var(--coral); }
.flow-lane { background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 20px; }
.flow-row { align-items: stretch; display: grid; gap: 24px; grid-template-columns: repeat(5, 1fr); position: relative; }
.flow-row::before { background: var(--line); content: ""; height: 2px; left: 8%; position: absolute; right: 8%; top: 45px; }
.flow-node { background: var(--paper); border: 2px solid var(--green); border-radius: 6px; min-height: 92px; padding: 13px; position: relative; text-align: center; z-index: 1; }
.flow-node b { display: block; font-size: 13px; margin-bottom: 4px; }
.flow-node small { color: var(--muted); line-height: 1.4; }
.flow-node.source { border-color: var(--blue); }
.flow-node.human { border-color: var(--coral); }
.flow-branches { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.flow-branches div { border-left: 4px solid var(--line); background: var(--surface); border-radius: 0 5px 5px 0; padding: 11px; }
.flow-branches div:nth-child(1) { border-color: #7f2f26; }
.flow-branches div:nth-child(2) { border-color: var(--coral); }
.flow-branches div:nth-child(3) { border-color: var(--yellow); }
.flow-branches div:nth-child(4) { border-color: var(--green); }
.flow-branches b { display: block; font-size: 12px; margin-bottom: 3px; }
.flow-branches small { color: var(--muted); line-height: 1.4; }
.profile-layout { display: grid; gap: 14px; grid-template-columns: .72fr 1.28fr; }
.profile-sidebar { background: var(--ink); border-radius: 7px; color: #fff; padding: 20px; }
.profile-sidebar .profile-icon { align-items: center; background: var(--yellow); border-radius: 6px; color: var(--ink); display: flex; height: 44px; justify-content: center; margin-bottom: 15px; width: 44px; }
.profile-sidebar h2 { font-size: 20px; }
.profile-sidebar p { color: #bac5be; font-size: 12px; line-height: 1.6; }
.profile-meta { border-top: 1px solid #3c4941; display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; }
.profile-meta div { display: flex; font-size: 12px; justify-content: space-between; }
.profile-meta span { color: #9eaaa2; }
.profile-main { background: var(--paper); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.code-header { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; font-size: 12px; font-weight: 750; justify-content: space-between; padding: 11px 15px; }
.profile-sections { display: grid; gap: 0; grid-template-columns: 1fr 1fr; }
.profile-section { border-bottom: 1px solid var(--line); padding: 14px 16px; }
.profile-section:nth-child(odd) { border-right: 1px solid var(--line); }
.profile-section h3 { color: var(--green); margin-bottom: 6px; }
.profile-section p, .profile-section li { color: #46534b; font-size: 11px; line-height: 1.55; }
.profile-section p { margin: 0; }
.profile-section ul { margin: 0; padding-left: 17px; }
.run-hero { background: var(--ink); border-radius: 7px; color: #fff; display: grid; gap: 18px; grid-template-columns: 1.2fr repeat(4, .65fr); margin-bottom: 14px; padding: 18px; }
.run-hero h1 { font-size: 23px; }
.run-hero p { color: #bac5be; font-size: 11px; margin: 5px 0 0; }
.run-metric { border-left: 1px solid #3c4941; padding-left: 15px; }
.run-metric span { color: #9eaaa2; display: block; font-size: 10px; }
.run-metric strong { display: block; font-size: 18px; margin-top: 6px; }
.process-track { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); }
.process-step { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.process-step .step-top { align-items: center; display: flex; justify-content: space-between; }
.process-step .step-top svg { color: var(--green); }
.process-step .checkmark { color: var(--green); font-size: 11px; font-weight: 800; }
.process-step h3 { margin: 10px 0 5px; }
.process-step p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; }
.manifest-table { border-collapse: collapse; width: 100%; }
.manifest-table td { border-bottom: 1px solid var(--line); font-size: 12px; padding: 10px 5px; }
.manifest-table tr:last-child td { border-bottom: 0; }
.manifest-table td:first-child { color: var(--muted); width: 45%; }
.manifest-table td:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.report-document { background: var(--paper); border: 1px solid var(--line); border-radius: 7px; margin: 0 auto; max-width: 920px; padding: 28px 34px; }
.report-document .doc-meta { border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font-size: 11px; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; }
.report-document h1 { font-size: 23px; }
.report-document h2 { color: var(--green); font-size: 16px; margin: 20px 0 8px; }
.report-document p, .report-document li { color: #3f4d45; font-size: 12px; line-height: 1.65; }
.report-document ul, .report-document ol { margin: 0; padding-left: 22px; }

@media (max-width: 900px) {
  .artifact-grid, .profile-layout { grid-template-columns: 1fr; }
  .workflow-cards, .process-track { grid-template-columns: repeat(2, 1fr); }
  .flow-row { grid-template-columns: 1fr; }
  .flow-row::before { display: none; }
  .run-hero { grid-template-columns: 1fr 1fr; }
}