:root {
  --ink:#18302b;
  --muted:#738079;
  --line:#e0e7e1;
  --bg:#f3f5f1;
  --green:#1b6b50;
  --soft:#eaf3ec;
  --danger:#b64036;
  --radius:15px;
  font-family:Inter,"Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input {
  font:inherit
}
button,a,input {
  outline-offset:4px
}
button {
  cursor:pointer;
  border:0;
  border-radius:8px;
  font-weight:600;
  transition:background .15s
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
a {
  color:var(--green);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
[hidden] {
  display:none!important
}
.topbar {
  height:83px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.5%;
  gap:20px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px
}
.brand-mark {
  background:var(--green);
  color:white;
  border-radius:10px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  font-size:22px
}
.brand strong {
  font-size:17px;
  display:block
}
.subtitle {
  font-size:10px;
  letter-spacing:1.3px;
  color:var(--muted);
  display:block;
  margin-top:5px
}
.header-links {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:12px
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#edf0eb;
  color:#536359;
  padding:6px 11px;
  border-radius:30px;
  font-size:11px;
  white-space:nowrap
}
.pill.completed,.pill.selected,.pill.online {
  background:#e7f3e9;
  color:#28664b
}
.pill.failed {
  background:#fbece8;
  color:var(--danger)
}
.pill.processing,.pill.screening,.pill.running {
  background:#e9f0fb;
  color:#36629d
}
.pill.uploaded {
  background:#fff2d9;
  color:#916820
}
main {
  max-width:1560px;
  margin:auto;
  padding:34px 4.5% 20px
}
p {
  line-height:1.65
}
.service-settings {
  margin-bottom:20px;
  font-size:11px;
  color:var(--muted)
}
.service-settings>summary {
  cursor:pointer;
  width:fit-content
}
.service-settings .data-path {
  margin-top:8px
}
.configuration {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px
}
.config-converter { grid-column:1 / -1; font-size:10px }
.config-item {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px
}
.config-name {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-bottom:4px
}
.config-value {
  font-size:11px;
  font-weight:650;
  overflow-wrap:anywhere
}
.config-check {
  font-size:10px;
  color:var(--green);
  white-space:nowrap
}
.config-check.missing {
  color:var(--danger)
}
.workspace {
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  align-items:start;
  gap:22px
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 3px 12px #203b2903
}
.control-panel {
  padding:21px;
  position:sticky;
  top:20px
}
.panel-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px
}
h2 {
  font-size:15px;
  margin:0
}
.tiny {
  font-size:10px;
  color:var(--muted)
}
.dropzone {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1.5px dashed #cbd6cb;
  border-radius:11px;
  min-height:167px;
  padding:18px 12px;
  margin-bottom:16px;
  cursor:pointer;
  background:#f8faf6;
  overflow-wrap:anywhere
}
.dropzone.drag {
  border-color:var(--green);
  background:var(--soft)
}
.upload-icon {
  font-size:29px;
  color:var(--green);
  line-height:1;
  margin-bottom:15px
}
.dropzone strong {
  font-size:12px;
  font-weight:600;
  max-width:100%
}
.dropzone span:last-of-type {
  font-size:10px;
  color:var(--muted);
  margin-top:7px
}
.dropzone input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}
.primary,.run-button {
  width:100%;
  min-height:42px;
  background:var(--green);
  color:#fff;
  font-size:12px
}
.primary:hover:not(:disabled),.run-button:hover:not(:disabled) {
  background:#11553e
}
.run-button {
  background:#edf3ed;
  color:var(--green);
  border:1px solid #cbdccd
}
.run-button:hover:not(:disabled) {
  color:#fff
}
.control-note {
  font-size:10px;
  color:var(--muted);
  margin:12px 0;
  line-height:1.75
}
.action-state {
  font-size:11px;
  margin:12px 0 0;
  color:#57705e;
  overflow-wrap:anywhere
}
progress {
  width:100%;
  height:6px;
  margin-top:12px;
  accent-color:var(--green)
}
.notice {
  background:#fff0eb;
  border:1px solid #f1d7cc;
  border-radius:7px;
  color:var(--danger);
  padding:10px;
  font-size:11px;
  line-height:1.65;
  margin-top:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.divider {
  height:1px;
  background:var(--line);
  margin:22px 0
}
.field-label {
  font-size:10px;
  font-weight:600;
  color:#617466;
  display:block;
  margin-bottom:8px
}
.restore-row {
  display:flex;
  gap:7px
}
.restore-row input {
  min-width:0;
  width:100%;
  font-size:10px;
  padding:10px 8px;
  border:1px solid var(--line);
  border-radius:7px
}
.secondary {
  background:#f4f6f2;
  border:1px solid var(--line);
  color:#526558;
  padding:7px 11px;
  font-size:10px;
  white-space:nowrap
}
.secondary:hover:not(:disabled) {
  background:#e8eee5
}
.data-path {
  padding:12px;
  border-radius:8px;
  background:#f5f7f3;
  margin-top:17px
}
.data-path code {
  font-size:10px;
  overflow-wrap:anywhere;
  color:#647668
}
.results-area {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px
}
.history-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  padding:17px 21px;
  list-style:none
}
.history-heading::-webkit-details-marker { display:none }
.history-heading strong { font-size:14px }
.history-heading .tiny { margin-left:12px }
.history-heading::after { content:'⌄'; color:var(--muted) }
.history-panel[open]>.history-heading::after { transform:rotate(180deg) }
.history-heading .pill { margin-left:auto }
.history-content { padding:0 21px 15px }
.history-filters { display:flex; gap:8px }
.history-filters input,.history-filters select {
  min-width:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:11px;
  padding:9px
}
.history-filters input { flex:1 }
.history-message { font-size:10px; color:var(--muted); margin:10px 0 }
.history-list { list-style:none; padding:0; margin:0; max-height:270px; overflow-y:auto; overscroll-behavior:contain }
.history-list li+li { border-top:1px solid var(--line) }
.history-entry { display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:8px; border:1px solid transparent }
.history-entry:hover { background:#f6f9f4; text-decoration:none }
.history-entry.current { background:var(--soft); border-color:#c4dacb }
.history-entry.blocked { cursor:wait; opacity:.65 }
.history-description { flex:1; min-width:0 }
.history-file { display:flex; align-items:center; justify-content:space-between; gap:10px }
.history-file strong { font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.history-file .pill { font-size:9px; padding:3px 8px }
.history-meta,.history-source { display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-size:10px; color:var(--muted) }
.history-pipeline { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.history-meta>span:last-child,.history-source>span { flex-shrink:0 }
.history-source code { font-size:9px; overflow-wrap:anywhere }
.history-missing { color:#9c6540 }
.history-open { font-size:10px; white-space:nowrap }
.history-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:11px }
.overview {
  padding:21px 25px
}
.file-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.file-heading h2 {
  font-size:17px;
  margin-top:7px;
  overflow-wrap:anywhere
}
.metrics {
  display:grid;
  grid-template-columns:1.8fr 1fr .6fr .7fr .9fr;
  gap:16px;
  margin:24px 0 20px
}
.metrics>div {
  border-right:1px solid var(--line);
  padding-right:12px;
  min-width:0
}
.metrics>div:last-child {
  border:0
}
.metrics span {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-bottom:8px
}
.metrics strong {
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere
}
.file-id-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid #edf0eb;
  padding-top:14px
}
.route-details {
  border-top:1px solid var(--line);
  padding:13px 0;
  font-size:11px;
  line-height:1.65
}
.route-details ul { margin:0; padding-left:18px }
.route-tools { color:var(--muted); margin-top:7px; overflow-wrap:anywhere }
.file-id-row code {
  color:#7c8980;
  font-size:10px;
  overflow-wrap:anywhere
}
.small-link {
  font-size:10px;
  white-space:nowrap
}
.tabs {
  display:flex;
  gap:26px;
  padding:0 25px;
  border-bottom:1px solid var(--line);
  overflow-x:auto
}
.tab {
  border-radius:0;
  background:none;
  padding:18px 0 15px;
  color:var(--muted);
  font-size:12px;
  border-bottom:3px solid transparent;
  white-space:nowrap
}
.tab.active {
  color:var(--green);
  border-bottom-color:var(--green)
}
.tab span {
  font-size:9px;
  margin-left:3px;
  border-radius:4px;
  background:#edf3eb;
  padding:2px 5px
}
.tab-content {
  padding:22px 25px;
  min-height:370px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:22px
}
.section-heading h3 {
  font-size:13px;
  margin:0
}
.section-heading p {
  font-size:10px;
  color:var(--muted);
  margin:6px 0 0
}
.stage-list {
  display:flex;
  flex-direction:column;
  gap:9px
}
.stage {
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden
}
.stage.nested {
  margin-left:20px;
  border-left:3px solid #dce9dd
}
.stage summary {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  cursor:pointer;
  list-style:none
}
.stage summary::-webkit-details-marker {
  display:none
}
.stage-icon {
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  flex-shrink:0;
  background:#eef4ec;
  color:var(--green)
}
.stage.running .stage-icon {
  background:#ebf1fb;
  color:#4674a2;
  animation:pulse 1.5s infinite
}
.stage.failed .stage-icon {
  background:#fff0eb;
  color:var(--danger)
}
.stage-label {
  flex:1;
  min-width:0
}
.stage-label strong {
  font-size:11px;
  display:block;
  font-weight:600
}
.stage-label span {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin-top:4px
}
.stage-time {
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}
.stage summary::after {
  content:'+';
  font-size:14px;
  color:var(--muted);
  margin-left:3px
}
.stage[open] summary::after {
  content:'−'
}
.stage-body {
  border-top:1px solid #edf1eb;
  padding:14px;
  background:#fafbf8
}
.stage-body h4 {
  font-size:10px;
  margin:10px 0 6px;
  color:#56705c
}
.stage-body h4:first-child {
  margin-top:0
}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:"SFMono-Regular",Consolas,"Noto Sans Mono",monospace;
  font-size:10px;
  line-height:1.75;
  margin:0
}
.stage-body pre {
  max-height:360px;
  overflow:auto
}
.stage-error {
  font-size:11px;
  color:var(--danger);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:8px
}
.empty {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  min-height:240px;
  color:var(--muted)
}
.empty>span {
  font-size:35px;
  color:#aabdab;
  margin-bottom:16px
}
.empty strong {
  font-size:12px;
  color:#60745f
}
.empty p,.empty-text {
  font-size:11px;
  color:var(--muted);
  line-height:1.9
}
.block-list {
  display:flex;
  flex-direction:column;
  gap:14px
}
.content-block {
  border:1px solid var(--line);
  border-radius:9px;
  padding:15px
}
.block-meta {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  color:var(--muted);
  margin-bottom:12px;
  flex-wrap:wrap
}
.block-meta strong {
  font-size:10px;
  color:var(--green)
}
.content-block pre {
  font-size:11px;
  max-height:420px;
  overflow:auto
}
.content-block details {
  border-top:1px solid var(--line);
  margin-top:13px;
  padding-top:10px
}
.content-block summary {
  cursor:pointer;
  font-size:10px;
  color:var(--green)
}
.content-block details pre {
  margin-top:9px;
  font-size:9px
}
.table-preview {
  width:100%;
  height:240px;
  border:1px solid var(--line);
  border-radius:5px;
  margin-top:12px
}
.artifact-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.artifact {
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px;
  min-width:0
}
.artifact img {
  width:100%;
  height:150px;
  object-fit:contain;
  background:#f7f9f5;
  border:1px solid #edf0e9;
  border-radius:5px;
  margin-bottom:9px
}
.artifact strong {
  display:block;
  font-size:10px;
  overflow-wrap:anywhere
}
.artifact .artifact-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:9px;
  font-size:10px;
  color:var(--muted)
}
.markdown-view {
  background:#f5f7f2;
  border:1px solid var(--line);
  border-radius:8px;
  padding:17px;
  max-height:650px;
  overflow:auto;
  font-size:10px
}
.button-group {
  display:flex;
  gap:7px
}
footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:25px;
  color:#8a958a;
  font-size:9px;
  line-height:1.7
}
.muted {
  color:var(--muted);
  font-size:11px
}
@keyframes pulse {
  50% {
    opacity:.45
  }
}
@media(min-width:1600px) {
  main {
    padding-top:44px
  }
  .workspace {
    grid-template-columns:315px minmax(0,1fr)
  }
}
@media(max-width:1000px) {
  .workspace {
    grid-template-columns:245px minmax(0,1fr);
    gap:15px
  }
  .control-panel {
    padding:17px
  }
  .tabs {
    gap:20px;
    padding:0 18px
  }
  .overview,.tab-content {
    padding:19px
  }
  .configuration {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .metrics {
    grid-template-columns:1.8fr 1fr .7fr .8fr
  }
  .metrics>div:last-child {
    display:none
  }
  .metrics>div:nth-child(4) {
    border:0
  }
}
@media(max-width:700px) {
  .history-heading { padding:15px }
  .history-heading .tiny { display:none }
  .history-content { padding:0 12px 13px }
  .history-entry { padding:10px 6px; gap:7px }
  .history-meta,.history-source { flex-direction:column; gap:4px }
  .history-open { font-size:9px }
  .history-source code { font-size:8px }
  .history-filters { flex-wrap:wrap }
  .history-filters input { flex-basis:100% }
  .topbar {
    height:72px;
    padding:0 5%
  }
  .header-links {
    gap:12px
  }
  .header-links a {
    display:none
  }
  main {
    padding:25px 5%
  }
  .workspace {
    grid-template-columns:1fr
  }
  .control-panel {
    position:static
  }
  .dropzone {
    min-height:110px
  }
  .configuration {
    margin-bottom:17px;
    gap:7px
  }
  .config-item {
    padding:10px
  }
  .metrics {
    gap:10px
  }
  .metrics strong {
    font-size:11px
  }
  .file-id-row {
    align-items:flex-start
  }
  .tabs {
    gap:19px
  }
  .tab-content {
    min-height:300px
  }
  .artifact-list {
    grid-template-columns:1fr
  }
  .stage.nested {
    margin-left:10px
  }
  .stage summary {
    padding:11px 10px
  }
  .section-heading {
    align-items:flex-start
  }
  .section-heading p {
    max-width:240px
  }
  .section-heading .button-group {
    flex-direction:column
  }
  footer {
    flex-direction:column;
    gap:5px
  }
  .brand strong {
    font-size:14px
  }
  .subtitle {
    font-size:8px
  }
  .brand-mark {
    width:36px;
    height:36px;
    font-size:19px
  }
}

.markdown-preview {
  width: 100%;
  height: 720px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.stage-preview {
  width: 100%;
  height: 340px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
}
.stage-preview-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}