:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16211b;
  background: #eef2ef;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.topbar {
  height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 max(24px, calc((100vw - 1120px) / 2));
  color: white; background: #173f2d; border-bottom: 4px solid #d9a928;
}
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: #d9a928; color: #173f2d; font-weight: 800; }
.topbar strong, .topbar span { display: block; }
.topbar strong { font-size: 18px; }
.topbar span { margin-top: 2px; color: #c7d8ce; font-size: 12px; }
main { padding: 48px 24px; }
.workspace { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: start; }
form { background: white; border: 1px solid #d8ded9; border-radius: 6px; padding: 28px; box-shadow: 0 8px 24px rgba(21, 48, 35, .06); }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend, .field > span { margin-bottom: 9px; font-size: 13px; font-weight: 700; color: #39483f; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #bbc7bf; border-radius: 5px; overflow: hidden; }
.segmented label { min-width: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; place-items: center; min-height: 42px; padding: 8px; background: #f7f9f7; font-size: 14px; cursor: pointer; }
.segmented label + label span { border-left: 1px solid #bbc7bf; }
.segmented input:checked + span { background: #dfece4; color: #145b37; box-shadow: inset 0 -3px #278656; font-weight: 700; }
.fields { display: grid; gap: 18px; }
.field span { display: block; }
.field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #aebbb3; border-radius: 4px; font: inherit; letter-spacing: 0; }
.field input:focus { outline: 3px solid rgba(39, 134, 86, .17); border-color: #278656; }
.primary { width: 100%; height: 46px; margin-top: 26px; border: 0; border-radius: 4px; background: #19643d; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.primary:hover { background: #124f30; }
.primary:disabled { opacity: .65; cursor: wait; }
.search-icon { display: inline-block; width: 12px; height: 12px; margin-right: 9px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.search-icon::after { content: ""; position: absolute; width: 6px; height: 2px; background: currentColor; right: -5px; bottom: -3px; transform: rotate(45deg); }
.status-panel { min-height: 390px; background: white; border-top: 4px solid #278656; padding: 28px; box-shadow: 0 8px 24px rgba(21, 48, 35, .06); }
.empty-state { min-height: 330px; display: grid; place-content: center; justify-items: center; text-align: center; color: #66736b; }
.empty-state strong { color: #2b3930; margin: 16px 0 4px; }
.document-icon { width: 45px; height: 56px; border: 2px solid #9bac9f; position: relative; }
.document-icon::after { content: ""; position: absolute; left: 9px; right: 9px; top: 17px; height: 2px; background: #9bac9f; box-shadow: 0 9px #9bac9f, 0 18px #9bac9f; }
.spinner { width: 42px; height: 42px; border: 4px solid #d9e2dc; border-top-color: #278656; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result-header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 18px; border-bottom: 1px solid #dce2de; }
.eyebrow { color: #278656; font-size: 11px; font-weight: 800; text-transform: uppercase; }
h2 { margin: 4px 0 0; font-size: 21px; }
.icon-button { width: 32px; height: 32px; border: 1px solid #cad3cd; background: white; cursor: pointer; font-size: 18px; }
.message { margin: 18px 0; padding: 12px; background: #fff3ce; border-left: 3px solid #d9a928; }
.raw-result { white-space: pre-wrap; line-height: 1.6; }
table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px; text-align: left; border-bottom: 1px solid #dce2de; vertical-align: top; }
th { color: #35453b; background: #f2f5f3; }
@media (max-width: 820px) {
  main { padding: 24px 14px; }
  .workspace { grid-template-columns: 1fr; }
  .status-panel { min-height: 300px; }
  .empty-state { min-height: 240px; }
}