:root {
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#1a2940;
  background:#f5f7fb;
  font-synthesis:none;
  line-height:1.5
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
header {
  height:78px;
  background:#fff;
  border-bottom:1px solid #e3e8f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(24px,calc((100vw - 1360px)/2));
  gap:20px
}
header>div {
  display:flex;
  align-items:center;
  gap:12px
}
.brand {
  background:#2258da;
  color:white;
  border-radius:10px;
  padding:7px 10px;
  font-weight:750
}
.brand-name {
  font-weight:650
}
.tag {
  font-size:12px;
  background:#edf2fd;
  padding:3px 9px;
  border-radius:20px;
  color:#436393
}
#health {
  font-size:13px;
  color:#65768c
}
main {
  max-width:1360px;
  margin:auto;
  padding:38px 24px
}
.eyebrow {
  font-size:11px;
  letter-spacing:.15em;
  color:#587499;
  font-weight:700
}
h1 {
  font-size:32px;
  letter-spacing:-.03em;
  margin:8px 0
}
h2 {
  font-size:17px;
  margin:0
}
p {
  margin:7px 0
}
.intro>p:last-child {
  color:#65768c
}
.dropzone {
  margin-top:26px;
  border:1.5px dashed #9cb5df;
  background:#f9fbff;
  border-radius:14px;
  padding:25px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.dropzone.dragover {
  background:#e6eeff;
  border-color:#2258da
}
.dropzone p {
  font-size:13px;
  color:#65768c
}
input[type=file] {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}
.button,button {
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border-radius:8px;
  padding:10px 15px;
  text-decoration:none;
  border:1px solid #d9e2ef;
  background:#fff;
  color:#29456f;
  display:inline-block
}
.primary {
  background:#2258da;
  color:white;
  border-color:#2258da
}
.secondary {
  background:#fff
}
.button:focus-visible,button:focus-visible,select:focus-visible {
  outline:3px solid #94b5fa;
  outline-offset:2px
}
button:disabled {
  opacity:.45;
  cursor:default
}
.notice {
  min-height:24px;
  font-size:13px;
  color:#99461e;
  margin:12px 0
}
.upload-option {
  display:block;
  margin-top:14px;
  font-size:13px;
  color:#65768c;
}
.summary {
  display:flex;
  gap:40px;
  align-items:center;
  padding:18px 24px;
  background:#fff;
  border:1px solid #e3e8f0;
  border-radius:12px
}
.summary>div {
  display:flex;
  flex-direction:column
}
.summary strong {
  font-size:23px;
  font-weight:650
}
.summary span {
  font-size:11px;
  color:#73829a
}
.summary>a {
  margin-left:auto
}
.workspace {
  display:grid;
  grid-template-columns:310px 1fr;
  gap:20px;
  margin-top:22px;
  min-height:490px
}
aside,.detail {
  background:#fff;
  border:1px solid #e3e8f0;
  border-radius:12px;
  padding:22px
}
.muted {
  color:#73829a;
  font-size:12px
}
.job {
  display:block;
  text-align:left;
  width:100%;
  border:1px solid #e6ebf3;
  border-radius:9px;
  margin-top:10px;
  padding:12px;
  background:white;
  font-weight:400
}
.job.active {
  border-color:#759eea;
  background:#f0f5ff
}
.job-title {
  display:block;
  overflow-wrap:anywhere;
  font-weight:600;
  font-size:13px
}
.job-meta {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:5px;
  font-size:11px;
  color:#627693
}
.status {
  font-size:11px;
  display:inline-block;
  padding:2px 7px;
  background:#edf2f8;
  color:#496180;
  border-radius:6px
}
.completed {
  background:#e8f5ed;
  color:#277246
}
.failed {
  background:#fff0eb;
  color:#a65337
}
.running {
  background:#eaf0ff;
  color:#2258da
}
progress {
  display:block;
  width:100%;
  height:5px;
  accent-color:#2258da;
  margin-top:10px
}
.detail-header {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:20px;
  border-bottom:1px solid #e8edf4;
  padding-bottom:18px
}
.detail-header h2 {
  overflow-wrap:anywhere
}
.result-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 245px;
  gap:22px;
  margin-top:18px
}
.preview {
  background:#eef1f6;
  border-radius:9px;
  padding:12px;
  min-height:340px;
  display:flex;
  align-items:start;
  justify-content:center
}
.preview img {
  width:100%;
  height:auto;
  object-fit:contain;
  max-height:720px
}
.result-panel h3 {
  font-size:21px;
  line-height:1.3;
  margin:12px 0
}
.result-panel .label {
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#71829b;
  margin-top:18px
}
.evidence {
  font-size:13px;
  overflow-wrap:anywhere;
  background:#f7f9fc;
  border-left:3px solid #c2d3ee;
  padding:10px
}
.warning {
  font-size:12px;
  color:#996329
}
.controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  gap:8px
}
.review {
  border-top:1px solid #e6ebf2;
  padding-top:18px;
  margin-top:20px
}
.review select {
  width:100%;
  font:inherit;
  font-size:13px;
  padding:9px;
  border:1px solid #cbd7e7;
  border-radius:8px;
  background:white;
  margin:8px 0
}
.review button {
  width:100%;
  margin-top:7px
}
.reviewed {
  font-size:12px;
  color:#277246;
  margin-top:10px
}
.empty {
  text-align:center;
  padding:100px 20px;
  color:#7a8ba2
}
.empty h2 {
  color:#415875;
  margin:12px 0
}
.empty p {
  font-size:13px
}
.empty-icon {
  font-size:50px;
  color:#a3b9d8
}
.error {
  background:#fff5f0;
  color:#944f30;
  padding:18px;
  border-radius:9px;
  margin-top:20px;
  font-size:14px
}
footer {
  color:#8b98aa;
  font-size:11px;
  margin-top:24px;
  text-align:center
}
@media(max-width:1050px) {
  .workspace {
  grid-template-columns:250px 1fr
}
.result-layout {
  grid-template-columns:1fr
}
.summary {
  gap:20px
}
.summary>a {
  font-size:11px
}

}
@media(max-width:680px) {
  header {
  padding:0 18px
}
.brand-name {
  font-size:13px
}
.tag {
  display:none
}
main {
  padding:25px 16px
}
h1 {
  font-size:26px
}
.dropzone {
  padding:20px;
  align-items:start;
  flex-direction:column
}
.summary {
  flex-wrap:wrap;
  gap:20px
}
.summary>a {
  margin-left:0
}
.workspace {
  grid-template-columns:1fr
}
.empty {
  padding:60px 10px
}
#health {
  max-width:110px;
  font-size:11px
}

}