/* H1H4 — этапы анализа. Стили перенесены из автономной формы 1-в-1;
   дополнения для серверной версии — в конце файла. */
:root{
  --db:#1A2B4A; --ac:#2E5FA3; --as:#5D6D7E; --mg:#8A8A8A; --tx:#1C1C1C;
  --rule:#D0D7E3; --shade:#F2F4F7; --white:#FFFFFF;
  --ok:#1A7A1A; --okbg:#E6F2E6;
  --pa:#7D6608; --pabg:#FBF3D5;
  --er:#C0392B; --erbg:#FBE9E7;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Arial,Helvetica,sans-serif;color:var(--tx);background:var(--shade);font-size:14px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* Шапка */
.top{background:var(--db);color:#fff}
.top-in{max-width:1320px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.brand b{font-size:13px;letter-spacing:.14em}
.brand span{font-size:19px;font-weight:bold}
.beta{font-size:11px;border:1px solid rgba(255,255,255,.45);border-radius:3px;padding:1px 6px;margin-left:8px;vertical-align:3px;font-weight:normal}
.top .btn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.top .btn:hover{background:rgba(255,255,255,.1)}
.top .btn.primary{background:var(--ac);border-color:var(--ac)}
.top .btn.primary:hover{background:#3A6DB5}

/* Конвейер этапов — главный визуальный элемент */
.pipe-wrap{background:var(--db);padding:0 24px 22px}
.pipe{max-width:1272px;margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:0;position:relative}
.pcell{position:relative;background:transparent;border:0;color:#fff;text-align:left;padding:12px 14px 12px 14px;cursor:pointer;border-top:3px solid rgba(255,255,255,.18)}
.pcell:hover{background:rgba(255,255,255,.06)}
.pcell.sel{border-top-color:#fff;background:rgba(255,255,255,.08)}
.pcell .pn{font-size:12px;opacity:.65}
.pcell .pt{font-size:13px;font-weight:bold;margin:2px 0 8px;min-height:36px}
.pcell .pc{font-size:30px;font-weight:bold;line-height:1}
.pcell .pf{font-size:11px;margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;min-height:15px}
.pf .y{color:#F2D16B}.pf .r{color:#FF9C8F}
.pipe-note{max-width:1272px;margin:8px auto 0;color:rgba(255,255,255,.6);font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pipe-note button{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;padding:0;font-size:12px}

/* Раскладка */
.main{max-width:1320px;margin:0 auto;padding:22px 24px 60px;display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
@media (max-width:980px){.main{grid-template-columns:1fr}.pipe{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.pipe{grid-template-columns:repeat(7,1fr)}.pcell{padding:10px 4px;text-align:center}.pcell .pt{display:none}.pcell .pc{font-size:22px;margin-top:4px}.pcell .pf{justify-content:center;font-size:10px}.top-in,.main{padding-left:14px;padding-right:14px}.pipe-wrap{padding:0 14px 18px}}

.btn{border:1px solid var(--rule);background:#fff;border-radius:4px;padding:8px 13px;cursor:pointer;font-size:13px;white-space:nowrap}
.btn:hover{border-color:var(--ac)}
.btn.primary{background:var(--ac);color:#fff;border-color:var(--ac)}
.btn.primary:hover{background:#27528E}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.warn{background:var(--pabg);border-color:#E3CF8A;color:var(--pa)}
.btn.danger{color:var(--er);border-color:#E8B4AD}
.btn.danger:hover{background:var(--erbg)}
.btn.link{border:0;background:none;color:var(--ac);padding:4px 0;text-decoration:underline}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Список анализов */
.side{background:#fff;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--rule)}
.tabs button{flex:1;background:none;border:0;padding:12px;cursor:pointer;color:var(--as);border-bottom:2px solid transparent;font-weight:bold;font-size:13px}
.tabs button.on{color:var(--db);border-bottom-color:var(--ac)}
.filter-bar{padding:10px 14px;font-size:12px;color:var(--as);background:var(--shade);display:flex;justify-content:space-between;align-items:center}
.list{max-height:calc(100vh - 120px);overflow:auto}
.item{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--rule);padding:13px 14px;cursor:pointer}
.item:hover{background:#F8F9FB}
.item.sel{background:#EDF2FA;box-shadow:inset 3px 0 0 var(--ac)}
.item .r1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.item .asset{font-weight:bold;font-size:15px;color:var(--db)}
.item .meta{font-size:12px;color:var(--mg)}
.item .now{font-size:12px;margin:3px 0 8px;color:var(--as)}
.item .now.r{color:var(--er)}.item .now.y{color:var(--pa)}.item .now.g{color:var(--ok)}
.segs{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.seg{height:6px;border-radius:2px;background:var(--rule)}
.seg.ok{background:var(--ok)}.seg.pa{background:#D4B23A}.seg.er{background:var(--er)}
.empty{padding:30px 18px;color:var(--as);text-align:center}
.empty p{margin:0 0 14px}

/* Карточка анализа */
.detail{min-width:0}
.card{background:#fff;border:1px solid var(--rule);border-radius:6px}
.card-head{padding:18px 22px;border-bottom:1px solid var(--rule);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.card-head h2{margin:0;font-size:22px;color:var(--db)}
.card-head .sub{color:var(--as);font-size:13px;margin-top:3px}
.card-head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.banner{margin:14px 22px 0;padding:11px 14px;border-radius:4px;font-size:13px}
.banner.ok{background:var(--okbg);color:var(--ok)}
.banner.er{background:var(--erbg);color:var(--er)}
.banner.info{background:var(--shade);color:var(--as)}
.h4box{margin:14px 22px 0;padding:12px 14px;border:1px solid var(--rule);border-radius:4px;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center}
.h4box .lbl{font-weight:bold;font-size:13px;color:var(--db)}
.h4box small{grid-column:1/-1;color:var(--mg);font-size:12px;margin-top:-4px}
@media (max-width:560px){.h4box{grid-template-columns:1fr}}

.stages{padding:16px 22px 22px;position:relative}
.stage{position:relative;padding-left:46px}
.stage::before{content:"";position:absolute;left:15px;top:34px;bottom:-4px;width:2px;background:var(--rule)}
.stage:last-child::before{display:none}
.stage.ok::before{background:var(--ok)}
.num{position:absolute;left:0;top:10px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;background:#fff;border:2px solid var(--rule);color:var(--mg);font-size:14px}
.stage.ok .num{background:var(--ok);border-color:var(--ok);color:#fff}
.stage.pa .num{background:var(--pabg);border-color:#D4B23A;color:var(--pa)}
.stage.er .num{background:var(--er);border-color:var(--er);color:#fff}
.stage.cur .num{border-color:var(--ac);color:var(--ac)}
.stage.pa.cur .num{border-color:#D4B23A;color:var(--pa)}
.stage.er.cur .num{border-color:var(--er);color:#fff}
.shead{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;text-align:left;padding:14px 0 12px;cursor:pointer}
.shead .st{font-size:15px;font-weight:bold;color:var(--db)}
.shead .ss{font-size:12px;color:var(--mg);margin-top:1px}
.pill{margin-left:auto;font-size:12px;padding:3px 9px;border-radius:12px;white-space:nowrap;background:var(--shade);color:var(--as)}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.pa{background:var(--pabg);color:var(--pa)}
.pill.er{background:var(--erbg);color:var(--er)}
.pill.cur{background:#E4ECF7;color:var(--ac)}
.chev{width:10px;height:10px;border-right:2px solid var(--mg);border-bottom:2px solid var(--mg);transform:rotate(45deg);margin:0 4px 4px 2px;transition:transform .15s}
.stage.open .chev{transform:rotate(-135deg);margin-bottom:-2px}
.sbody{display:none;padding:0 0 18px}
.stage.open .sbody{display:block}
.sdesc{font-size:13px;color:var(--as);margin:0 0 14px;max-width:72ch}
.alert-box{border-radius:4px;padding:12px 14px;margin:0 0 14px;font-size:13px}
.alert-box.er{background:var(--erbg);color:var(--er);border:1px solid #EFC1BA}
.alert-box.pa{background:var(--pabg);color:var(--pa);border:1px solid #EAD89A}
.alert-box.ok{background:var(--okbg);color:var(--ok);border:1px solid #BFDDBF}
.alert-box b{display:block;margin-bottom:4px}
.alert-box ul{margin:4px 0 0;padding-left:18px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;max-width:760px}
@media (max-width:640px){.fields{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:5px}
.f.wide{grid-column:1/-1}
.f label,.f .lab{font-size:12px;font-weight:bold;color:var(--as)}
.f .req{color:var(--er);font-weight:normal}
.f .hint{font-size:12px;color:var(--mg);font-style:italic}
.f input[type=text],.f select,.f textarea{border:1px solid var(--rule);border-radius:4px;padding:8px 10px;background:#fff;width:100%}
.f textarea{min-height:62px;resize:vertical}
.f.miss input[type=text],.f.miss select,.f.miss textarea{border-color:#E39A90;background:#FFF8F7}
.seg-ctl{display:flex;flex-wrap:wrap;gap:6px}
.seg-ctl button{border:1px solid var(--rule);background:#fff;border-radius:4px;padding:7px 12px;cursor:pointer;font-size:13px}
.seg-ctl button.on{background:var(--db);border-color:var(--db);color:#fff}
.f.miss .seg-ctl button{border-color:#E39A90}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:13px;cursor:pointer;padding:6px 0}
.chk input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--ac)}
.f.miss .chk{color:var(--er)}
.tag{font-weight:normal;font-size:11px;margin-left:8px;padding:1px 6px;border-radius:3px;white-space:nowrap}
.tag.w{background:#FFF1D6;color:#8A5A00}
.tag.s{background:#E4ECF7;color:var(--ac)}
.tag.c{background:var(--shade);color:var(--as)}
.tag.a{background:var(--shade);color:var(--mg)}
.legend{margin:14px 22px 0;font-size:12px;color:var(--as);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.legend .tag{margin-left:0}
.multi{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;max-width:620px}
.multi .mgh{font-size:12px;font-weight:bold;color:var(--as);margin-bottom:2px}
.multi .chk{padding:3px 0}
@media (max-width:640px){.multi{grid-template-columns:1fr}}
.crit{border-collapse:collapse;width:100%;max-width:560px;font-size:13px}
.crit th,.crit td{border-bottom:1px solid var(--rule);padding:7px 8px;text-align:center}
.crit th:first-child,.crit td:first-child{text-align:left}
.crit th{font-size:12px;color:var(--as);font-weight:bold}
.crit input{width:17px;height:17px;accent-color:var(--ac)}
.crit .tot td{font-weight:bold;color:var(--db);border-bottom:0}
.auto{font-size:13px;padding:8px 10px;background:var(--shade);border-radius:4px;color:var(--db)}
.sacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.s6acts{margin-top:12px;padding:12px 14px;border:1px dashed var(--er);border-radius:4px}
.s6acts p{margin:0 0 10px;font-size:13px}
.cancelled{margin:0 22px 22px;padding:12px 14px;background:var(--shade);border-radius:4px;font-size:12px;color:var(--as)}
.cancelled b{color:var(--db)}
.cancelled div{margin-top:6px}
.placeholder{background:#fff;border:1px dashed var(--rule);border-radius:6px;padding:60px 30px;text-align:center;color:var(--as)}
.placeholder h3{margin:0 0 8px;color:var(--db)}

/* Модальное окно */
.modal-bg{position:fixed;inset:0;background:rgba(26,43,74,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-bg.on{display:flex}
.modal{background:#fff;border-radius:6px;max-width:520px;width:100%;padding:22px}
.modal h3{margin:0 0 6px;color:var(--db)}
.modal p{margin:0 0 12px;color:var(--as);font-size:13px}
.modal textarea,.modal select{width:100%;border:1px solid var(--rule);border-radius:4px;padding:9px 10px;margin-bottom:12px}
.modal textarea{min-height:90px}
.modal .row{display:flex;gap:8px;justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--db);color:#fff;padding:10px 18px;border-radius:4px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.foot{max-width:1320px;margin:0 auto;padding:0 24px 30px;color:var(--mg);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Серверная версия (26.09.2026): вход, статус сохранения, руководитель ── */
.who{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:12px}
.save{font-size:12px;padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;white-space:nowrap}
.save.ok{background:rgba(26,122,26,.35)}
.save.busy{background:rgba(255,255,255,.14)}
.save.er{background:rgba(192,57,43,.55)}
.save.off{background:rgba(212,178,58,.45)}
.owner-bar{padding:10px 14px;border-bottom:1px solid var(--rule);display:flex;gap:8px;align-items:center;font-size:12px;color:var(--as)}
.owner-bar select{flex:1;border:1px solid var(--rule);border-radius:4px;padding:6px 8px;background:#fff}
.owner-bar label{display:flex;gap:6px;align-items:center;white-space:nowrap;cursor:pointer}
.item.deleted{opacity:.6}
.badge{display:inline-block;font-size:11px;padding:1px 6px;border-radius:3px;background:var(--erbg);color:var(--er);margin-left:6px;font-weight:normal}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--db)}
.login{background:#fff;border-radius:6px;padding:28px 26px;width:100%;max-width:380px}
.login b{display:block;font-size:12px;letter-spacing:.14em;color:var(--as)}
.login h1{font-size:20px;color:var(--db);margin:4px 0 18px}
.login label{display:block;font-size:12px;font-weight:bold;color:var(--as);margin:0 0 5px}
.login input{width:100%;border:1px solid var(--rule);border-radius:4px;padding:10px 11px;margin-bottom:14px;font-size:16px}
.login .btn{width:100%;padding:11px;font-size:14px}
.login .err{color:var(--er);font-size:13px;min-height:18px;margin:-4px 0 10px}
.login .note{color:var(--mg);font-size:12px;margin-top:14px}
[hidden]{display:none!important}