@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/inter-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/inter-400-latin.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/inter-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/inter-600-latin.woff2) format('woff2')}

/* Приложение — ВитаГид, и цвета взяты из его логотипа: синий знак #5884EB с
   тёмной половиной #233B76, тёплый почти-чёрный #1C1917 у начертания. Шрифт
   Inter — тот же, что в личном кабинете ВитаГида.
   Фирменный стиль СИТИЛАБ живёт только в самих отчётах: приложение делает
   лаборатория-заказчик, документ выдаёт лаборатория. */
:root{
  --brand:#5884eb; --brand-deep:#233b76; --brand-wash:#eef2fd;
  --alarm:#d94a5a;
  /* --muted несёт подписи разделов, сноски и размеры файлов — это текст, а не
     украшение, поэтому оттенок подобран под контраст 4,6:1 на белом. */
  --ink:#1c1917; --ink-2:#4c5561; --muted:#767f8b;
  --line:#e4e6ea; --line-2:#eeeff2;
  --paper:#ffffff; --wash:#f4f5f7;
  --ok:#3f9142; --warn:#c07a12;
  --rail:132px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme=light])){
  --brand:#7fa0f2; --brand-deep:#a8bff7; --brand-wash:#1a2340;
  --alarm:#ef7383;
  --ink:#f2f2f0; --ink-2:#b3b8c0; --muted:#8d949e;
  --line:#2b2c30; --line-2:#232428;
  --paper:#141416; --wash:#1b1c1f;
  --ok:#67b96a; --warn:#e0a445;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;min-height:100vh}
h1,h2{margin:0;font-weight:600;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
a{color:var(--brand-deep);text-decoration:none}
a:hover{text-decoration:underline}
/* Радиус контура наследуется от самого элемента: собственный радиус здесь
   рисовал бы скруглённую рамку поверх поля с другим скруглением. */
:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* --- шапка ------------------------------------------------------------- */
.top{display:flex;align-items:center;gap:14px;height:56px;padding:0 24px;
  border-bottom:1px solid var(--line)}
.top .logo{display:block;height:19px;width:auto}
.top .name{font-size:13px;color:var(--muted);padding-left:14px;
  border-left:1px solid var(--line);line-height:1.2}
.top nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:13px}
.top nav a{color:var(--ink-2)}
.top nav a.on{color:var(--ink)}
.top nav .who{color:var(--muted);padding-left:20px;border-left:1px solid var(--line)}

.wrap{width:100%;max-width:900px;margin:0 auto;padding:40px 24px 80px;flex:1}
.page-h{font-size:26px}
.page-sub{margin-top:8px;color:var(--ink-2);max-width:58ch}

/* --- линейка бланка ------------------------------------------------------
   Одна вертикальная линия проходит через всю страницу. Слева от неё подпись
   раздела, справа содержимое. Так устроен лабораторный бланк, и так все числа
   и подписи встают на одну вертикаль. */
.form{display:grid;grid-template-columns:var(--rail) 1fr;margin-top:34px}
.form>dt{text-align:right;padding:0 20px 0 0;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.9}
.form>dd{margin:0;padding:0 0 30px 20px;border-left:1px solid var(--line);min-width:0}
.form>dd:last-of-type{padding-bottom:0}
.note{margin-top:7px;font-size:12.5px;color:var(--muted)}

/* --- поля и кнопки ------------------------------------------------------- */
input,select{font:inherit;font-size:14px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:9px 11px;width:100%;
  max-width:340px}
select{appearance:none;padding-right:30px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 47%,calc(100% - 11px) 47%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input:hover,select:hover{border-color:var(--muted)}
.btn{appearance:none;border:1px solid var(--brand);border-radius:6px;
  background:var(--brand);color:#fff;font:inherit;font-size:14px;font-weight:600;
  padding:10px 22px;cursor:pointer}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn:disabled{background:var(--paper);border-color:var(--line);color:var(--muted);
  cursor:default}
.linkbtn{appearance:none;background:none;border:0;padding:0;font:inherit;
  color:var(--brand-deep);cursor:pointer;text-decoration:underline}
.act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* --- приём файлов -------------------------------------------------------- */
.drop{border:1px dashed var(--line);border-radius:6px;padding:22px 20px;
  text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-wash)}
.drop b{display:block;font-weight:600}
.drop span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.files{list-style:none;margin:14px 0 0;padding:0}
.files li{display:flex;align-items:center;gap:12px;padding:8px 0;
  border-top:1px solid var(--line-2);font-size:13.5px}
.files li:last-child{border-bottom:1px solid var(--line-2)}
.files .n{font:12px/1 var(--mono);color:var(--muted)}
.files .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .sz{font:12px/1 var(--mono);color:var(--muted)}
.x{appearance:none;border:0;background:none;color:var(--muted);font-size:17px;
  line-height:1;padding:0 2px;cursor:pointer}
.x:hover{color:var(--alarm)}

/* --- лента выполнения ----------------------------------------------------
   Слева не время суток, а сколько прошло от старта: разбор идёт минуты, и
   вопрос у оператора всегда «сколько уже», а не «который час». */
.run{display:grid;grid-template-columns:var(--rail) 1fr;font-size:13.5px;
  margin-top:34px}
.run .t{text-align:right;padding:0 20px 0 0;font:12px/1.75 var(--mono);
  color:var(--muted);white-space:nowrap}
.run .s{margin:0;padding:0 0 11px 20px;border-left:1px solid var(--line);
  position:relative;color:var(--ink-2);line-height:1.65}
.run .s::before{content:"";position:absolute;left:-3.5px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--line);outline:3px solid var(--paper)}
.run .s.on{color:var(--ink)}
.run .s.on::before{background:var(--brand);animation:beat 1.6s ease-in-out infinite}
.run .s.end::before{background:var(--brand)}
.run .s.fail::before{background:var(--alarm)}
/* Последний шаг не обрывает линию: под ним идёт блок отчётов на той же
   вертикали, и разрыв читался бы как ошибка вёрстки. */
.run+#result .form{margin-top:0}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.run .s.on::before{animation:none}}

/* --- выдача -------------------------------------------------------------- */
.out{list-style:none;margin:0;padding:0}
.out li{border-top:1px solid var(--line-2)}
.out li:last-child{border-bottom:1px solid var(--line-2)}
.out a{display:flex;align-items:baseline;gap:14px;padding:11px 0;color:var(--ink)}
.out a:hover{text-decoration:none}
.out a:hover .nm{color:var(--brand-deep)}
.out .k{font:11px/1 var(--mono);letter-spacing:.06em;color:var(--brand-deep);
  width:44px;flex:0 0 44px}
.out .when{font:11.5px/1 var(--mono);color:var(--muted);width:44px;flex:0 0 44px}
.out .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.out .sz{font:12px/1 var(--mono);color:var(--muted);white-space:nowrap}

.alert{border:1px solid var(--alarm);border-radius:6px;padding:14px 16px;
  font-size:13.5px;color:var(--ink-2)}
.alert b{display:block;color:var(--alarm);margin-bottom:6px}
.alert ul{margin:0;padding-left:18px}
.alert li{margin:3px 0}

/* --- таблица истории ------------------------------------------------------ */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:0 12px 8px 0;
  border-bottom:1px solid var(--line)}
.tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line-2);
  vertical-align:baseline}
.tbl .num{font:12.5px/1 var(--mono);white-space:nowrap}
.tbl th:last-child,.tbl td:last-child{padding-right:0;text-align:right;
  white-space:nowrap}
.chip{display:inline-block;padding:2px 7px;margin-left:5px;border-radius:4px;
  border:1px solid var(--line);font:10.5px/1.5 var(--mono);color:var(--ink-2)}
.chip:hover{border-color:var(--brand);text-decoration:none}
.del{appearance:none;border:1px solid transparent;background:none;color:var(--muted);
  font:inherit;font-size:15px;line-height:1;padding:3px 7px;border-radius:5px;
  cursor:pointer}
.del:hover{color:var(--alarm);border-color:var(--line)}
.del.armed{font-size:12px;color:var(--alarm);border-color:var(--alarm)}
.dim{color:var(--muted)}
.bad{color:var(--alarm)}

/* --- вход ----------------------------------------------------------------- */
.enter{max-width:470px;margin:11vh auto 0;padding:0 24px}
.enter .logo{display:block;height:26px;width:auto;margin-bottom:30px}
.enter .form{--rail:92px;margin-top:30px}
.enter .form>dd{padding-bottom:18px}
.enter input{max-width:100%}
.err{margin-top:18px;font-size:13px;color:var(--alarm)}
.fine{margin-top:26px;font-size:12px;color:var(--muted);line-height:1.6}

@media (max-width:720px){
  .top{padding:0 16px;gap:10px}
  .top .name,.top .wide{display:none}
  .top nav{gap:14px}
  .top nav .who{padding-left:14px}
  .wrap{padding:28px 16px 56px}
  .form,.run{grid-template-columns:1fr}
  .form>dt{text-align:left;padding:0 0 6px;line-height:1.5}
  .form>dd{padding:0 0 26px;border-left:0}
  .run .t{text-align:left;padding:0;color:var(--muted)}
  .run .s{padding:0 0 14px;border-left:0}
  .run .s::before{display:none}
  .tbl th:nth-child(4),.tbl td:nth-child(4),
  .tbl th:nth-child(7),.tbl td:nth-child(7){display:none}
}