/* DocExamV3 capability demo — self-contained, no external assets. */

:root {
  --bg: #f5f6f8; --panel: #ffffff; --ink: #1c2733; --muted: #67788a;
  --line: #e3e8ee; --accent: #1656c4; --accent-soft: #e8effc;
  --ok: #1c8a4c; --ok-bg: #e6f6ec;
  --warn: #b7791f; --warn-bg: #fcf3e2;
  --bad: #c22f2f; --bad-bg: #fdebeb;
  --minor: #5b6b7c; --minor-bg: #eef1f4;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --panel: #1a2029; --ink: #e6ecf3; --muted: #8fa0b3;
    --line: #2a3340; --accent: #6ea3ff; --accent-soft: #1d2a44;
    --ok: #4cc582; --ok-bg: #17321f;
    --warn: #e3a94f; --warn-bg: #3a2d14;
    --bad: #ef6b6b; --bad-bg: #3a1a1a;
    --minor: #9aa9b8; --minor-bg: #232b35;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.65 "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  padding-bottom: 3.4rem;
}
#topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1.4rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { cursor: pointer; }
.brand-mark { font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.brand-sub { color: var(--muted); margin-left: .6rem; font-size: .9rem; }
#topbar-right { display: flex; gap: .6rem; align-items: center; }
main { max-width: 1200px; margin: 0 auto; padding: 1.4rem; }
footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 15;
  background: var(--panel); border-top: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; text-align: center; padding: .45rem 1rem;
}
.hidden { display: none !important; }

/* ---- scenario picker ---- */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.scenario-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.2rem; cursor: pointer; transition: border-color .15s, transform .15s;
}
.scenario-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.scenario-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.scenario-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.scenario-card .meta { margin-top: .7rem; font-size: .75rem; color: var(--muted); font-family: var(--mono); }

/* ---- timeline ---- */
.timeline { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 1.2rem; }
.tl-step {
  display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: .82rem; cursor: pointer; color: var(--muted); white-space: nowrap;
}
.tl-step .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tl-step.done { color: var(--ink); }
.tl-step.done .dot { background: var(--ok); }
.tl-step.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tl-step.active .dot { background: var(--accent); }
.tl-step.running .dot { background: var(--warn); animation: pulse 1s infinite; }
.tl-step .dur { color: var(--muted); font-size: .72rem; font-family: var(--mono); }
@keyframes pulse { 50% { opacity: .3; } }

/* ---- panels / cards ---- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.panel h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.panel h3 { margin: 1rem 0 .5rem; font-size: .98rem; }
.step-meta { color: var(--muted); font-size: .78rem; margin-bottom: .8rem; font-family: var(--mono); }
.note { color: var(--muted); font-size: .85rem; }

.banner { border-radius: 10px; padding: .8rem 1rem; font-weight: 600; margin: .6rem 0 1rem; }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner .sub { display: block; font-weight: 400; font-size: .85rem; margin-top: .25rem; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; }
.badge.CRITICAL { background: var(--bad-bg); color: var(--bad); }
.badge.MAJOR { background: var(--warn-bg); color: var(--warn); }
.badge.MINOR, .badge.INFORMATIONAL { background: var(--minor-bg); color: var(--minor); }
.chip { display: inline-block; padding: .05rem .5rem; border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-left: .4rem; }
.chip.nollm { margin-left: 0; border-color: var(--warn); color: var(--warn); background: var(--warn-bg); font-family: inherit; }

/* ---- tables ---- */
table.kv, table.grid { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.kv td, table.grid td, table.grid th { padding: .4rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.kv td.k { width: 220px; color: var(--muted); }
table.grid th { text-align: left; color: var(--muted); font-weight: 600; font-size: .8rem; }
tr.hl-ai td { background: var(--accent-soft); }
.field-pre { white-space: pre-wrap; font-family: var(--mono); font-size: .8rem; margin: 0; }
.table-scroll { overflow-x: auto; }

/* ---- finding / discrepancy cards ---- */
.finding {
  border: 1px solid var(--line); border-left: 4px solid var(--minor);
  border-radius: 10px; padding: .8rem 1rem; margin: .7rem 0; background: var(--panel);
}
.finding.CRITICAL { border-left-color: var(--bad); }
.finding.MAJOR { border-left-color: var(--warn); }
.finding-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.finding-title { font-weight: 700; }
.clause { background: var(--minor-bg); border-radius: 8px; padding: .55rem .75rem; font-family: var(--mono); font-size: .8rem; white-space: pre-wrap; margin: .4rem 0; }
.amend { background: var(--ok-bg); border-radius: 8px; padding: .55rem .75rem; font-size: .86rem; margin-top: .45rem; }
.amend::before { content: "改证建议 · "; font-weight: 700; color: var(--ok); }
.mechanism { font-size: .86rem; color: var(--ink); }
details { margin: .4rem 0; }
details summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
details pre { background: var(--minor-bg); padding: .6rem .8rem; border-radius: 8px; font-size: .78rem; overflow-x: auto; white-space: pre-wrap; }

/* ---- tabs ---- */
.tabs { display: flex; gap: .4rem; margin: .6rem 0 .9rem; flex-wrap: wrap; }
.tab { padding: .3rem .85rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .85rem; color: var(--muted); background: var(--panel); }
.tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* ---- documents gallery ---- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.doc-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.doc-card img { width: 100%; aspect-ratio: 210/297; object-fit: cover; object-position: top; cursor: zoom-in; display: block; background: #fff; }
.doc-card .doc-info { padding: .5rem .7rem; font-size: .8rem; }
.doc-card .doc-type { font-weight: 700; font-size: .84rem; }
.doc-card .doc-sub { color: var(--muted); font-family: var(--mono); font-size: .72rem; }

#lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 100; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
#lightbox img { max-width: 92vw; max-height: 92vh; box-shadow: 0 8px 40px rgba(0,0,0,.5); background: #fff; }

/* ---- buttons / controls ---- */
.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: .4rem .9rem; cursor: pointer; font-size: .86rem; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-small { padding: .15rem .6rem; font-size: .76rem; }
.mode-toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.mode-toggle span { padding: .25rem .8rem; font-size: .8rem; cursor: pointer; color: var(--muted); }
.mode-toggle span.active { background: var(--accent); color: #fff; }
.live-count { font-size: .78rem; color: var(--muted); align-self: center; }

/* ---- nav between steps ---- */
.step-nav { display: flex; justify-content: space-between; margin-top: 1rem; }

/* ---- live step gate ---- */
.live-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border-radius: 10px; padding: .7rem 1rem; margin: .6rem 0 1rem; font-size: .9rem; font-weight: 600; }
.live-bar.paused { background: var(--accent-soft); border: 1px solid var(--accent); }
.live-bar.paused button { margin-left: auto; }
.live-bar.running { background: var(--warn-bg); color: var(--warn); }
.live-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--warn); animation: pulse 1s infinite; }

/* ---- honest framing ---- */
.framing { background: var(--accent-soft); border-radius: 10px; padding: .7rem 1rem; font-size: .84rem; margin-bottom: 1rem; }

/* ---- disposition ---- */
.dispo-doc { background: var(--minor-bg); border-radius: 10px; padding: .9rem 1.1rem; font-family: var(--mono); font-size: .8rem; white-space: pre-wrap; }
.checklist li { margin: .35rem 0; }

/* ---- contrast (scenario D) ---- */
.contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .contrast-grid { grid-template-columns: 1fr; } }
.contrast-col { border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1.1rem; }
.contrast-col.good { border-top: 4px solid var(--ok); }
.contrast-col.blocked { border-top: 4px solid var(--bad); }

/* ---- live console ---- */
#live-console {
  position: fixed; bottom: 2.2rem; left: 0; right: 0; height: 220px; z-index: 30;
  background: #0d1117; color: #9fd3a8; border-top: 2px solid var(--accent);
  display: flex; flex-direction: column;
}
#live-console .console-head { display: flex; justify-content: space-between; align-items: center; padding: .3rem .9rem; color: #ccc; font-size: .8rem; background: #161b22; }
#console-body { flex: 1; overflow-y: auto; margin: 0; padding: .5rem .9rem; font-family: var(--mono); font-size: .74rem; line-height: 1.5; }

.langfuse-link { font-size: .76rem; }
.error-box { background: var(--bad-bg); color: var(--bad); border-radius: 8px; padding: .7rem 1rem; margin: .6rem 0; }