/* Стили перенесены из прототипа «Закупочный цикл» (styles.css) и макета заказчика («Приложение 1»);
   убраны роли и экраны, которых нет в демо; добавлены формы входа и ввода строк. */
:root{
  --bg:#0b1020; --bg2:#0e1527; --panel:#11182b; --panel2:#151e34; --line:#2a3654; --row:#26324d;
  --text:#e9eef9; --muted:#93a1bb; --accent:#7dd3fc; --green:#86efac; --yellow:#fde68a; --red:#fca5a5;
  --btn:#14283a; --btnline:#3b5870; --btntext:#dff5ff; --node:#111b2e; --nodeline:#33415f;
  --alertbg:#1c1b16; --alertline:#e9ca6d; --alerttext:#d9cfaa; --lockbg:#1a1530; --lockline:#8b7bd8;
  --header:rgba(9,14,27,.94);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f5f9; --bg2:#eef1f6; --panel:#ffffff; --panel2:#f7f9fc; --line:#d5dce8; --row:#e3e8f0;
    --text:#152033; --muted:#5b6880; --accent:#0b6e99; --green:#18794e; --yellow:#8a6100; --red:#b42318;
    --btn:#e6f2f9; --btnline:#9cc3d8; --btntext:#0c3d57; --node:#f7f9fc; --nodeline:#c9d2e0;
    --alertbg:#fff8e1; --alertline:#d4a72c; --alerttext:#5d4700; --lockbg:#f2effd; --lockline:#7b68d0;
    --header:rgba(243,245,249,.94);
  }
}
:root[data-theme="light"]{
  --bg:#f3f5f9; --bg2:#eef1f6; --panel:#ffffff; --panel2:#f7f9fc; --line:#d5dce8; --row:#e3e8f0;
  --text:#152033; --muted:#5b6880; --accent:#0b6e99; --green:#18794e; --yellow:#8a6100; --red:#b42318;
  --btn:#e6f2f9; --btnline:#9cc3d8; --btntext:#0c3d57; --node:#f7f9fc; --nodeline:#c9d2e0;
  --alertbg:#fff8e1; --alertline:#d4a72c; --alerttext:#5d4700; --lockbg:#f2effd; --lockline:#7b68d0;
  --header:rgba(243,245,249,.94);
}
:root{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
header{padding:12px 16px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--header);backdrop-filter:blur(10px);z-index:5}
h1{margin:0;font-size:20px} h2{font-size:16px;margin:0 0 12px} h3{font-size:14px;margin:0 0 8px}
.sub{color:var(--muted);margin-top:4px;font-size:13px}
.bar{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
nav button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;padding:7px 11px;cursor:pointer;font:inherit;font-size:13px}
nav button.active{border-color:var(--accent);color:var(--text);background:var(--panel2)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Карточка 17: рабочая область во всю ширину окна, без max-width; отступ 16 px. */
main{width:100%;margin:0;padding:16px 16px 40px}
.screen{display:none}.screen.active{display:block}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px}
/* Элементы сеток не растягивают страницу шире окна: таблицы прокручиваются внутри .scroll. */
.card,.grid>*,.winlayout>*,.scroll{min-width:0}
.kpi{font-size:24px;font-weight:700;margin:3px 0}.label{color:var(--muted);font-size:12px}
.good{color:var(--green)}.warn{color:var(--yellow)}.bad{color:var(--red)}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:12px;color:var(--muted);white-space:nowrap}
.pill:empty{display:none}
.pill.good{border-color:var(--green);color:var(--green)}.pill.warn{border-color:var(--yellow);color:var(--yellow)}.pill.bad{border-color:var(--red);color:var(--red)}.pill.blue{border-color:var(--accent);color:var(--accent)}
.scroll{overflow-x:auto}
.table{width:100%;border-collapse:collapse;min-width:640px}.table th,.table td{padding:8px;border-bottom:1px solid var(--row);text-align:left;vertical-align:top}
.table th{color:var(--muted);font-size:12px;font-weight:600}
.num{text-align:right!important;white-space:nowrap}
.btn{border:1px solid var(--btnline);background:var(--btn);color:var(--btntext);border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit;font-size:13px}
.btn.alt{background:transparent;border-color:var(--line);color:var(--text)}
.btn:disabled,.chip:disabled{opacity:.5;cursor:not-allowed}
select,input:not([type=file]){background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:14px;max-width:100%}
.small{font-size:13px;color:var(--muted)}.section{margin-top:16px}
.alert{border-left:3px solid var(--alertline);background:var(--alertbg);padding:10px 12px;border-radius:7px;color:var(--alerttext);font-size:14px}
footer{color:var(--muted);font-size:12px;margin-top:24px;max-width:80ch}
/* Три колонки через minmax; высота от окна (100dvh), чат прижат к низу без двойной прокрутки. */
.cp{display:grid;grid-template-columns:minmax(220px,18%) minmax(0,1fr) minmax(280px,24%);gap:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);height:calc(100dvh - 150px);min-height:520px;overflow:hidden}
.cp-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.cp-side h3,.cp-right h3{font-size:12px;color:var(--muted);font-weight:600;margin:12px 12px 6px}
.cp-list{overflow-y:auto;flex:1}
.cp-new{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.cp-item{display:block;width:100%;text-align:left;background:none;border:none;border-left:3px solid transparent;padding:8px 12px;color:var(--text);cursor:pointer;font:inherit;font-size:14px}
.cp-item small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.cp-item.active{background:var(--panel2);border-left-color:var(--accent)}
.cp-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cp-head{padding:10px 16px;border-bottom:1px solid var(--line)}
.cp-head h2{margin:0;font-size:15px}
.mini-steps{display:flex;gap:3px;margin-top:8px}
.mini-steps i{flex:1;height:5px;border-radius:3px;background:var(--nodeline)}
.mini-steps i.done{background:var(--green)}.mini-steps i.now{background:var(--yellow)}
.cp-thread{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;font-size:14px}
.msg .meta{font-size:12px;color:var(--muted);margin-bottom:3px}
.msg .bubble{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--panel2)}
.msg.user{align-self:flex-end}
.msg.user .bubble{background:var(--btn);border-color:var(--btnline)}
.msg.sys{align-self:center;max-width:94%}
.msg.sys .bubble{background:transparent;border-style:dashed;font-size:14px;color:var(--muted)}
.cp-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px 0;border-top:1px solid var(--line)}
.chip{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.cp-comp{display:flex;gap:8px;padding:8px 16px 12px;align-items:flex-end}
.cp-comp textarea{flex:1;resize:none;min-height:56px;max-height:120px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--text);font:inherit;font-size:14px}
.cp-comp .btn{height:40px}
.cp-right{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:10px 4px;cursor:pointer;font:inherit;font-size:12.5px}
.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}
.cp-pane{overflow-y:auto;flex:1;padding-bottom:10px}
.fileline{display:flex;justify-content:space-between;gap:8px;padding:6px 12px;font-size:13px;border-bottom:1px solid var(--row)}
.vsteps{list-style:none;margin:8px 12px;padding:0}
.vsteps li{padding:5px 0 5px 18px;position:relative;font-size:14px;color:var(--muted)}
.vsteps li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;border:2px solid var(--nodeline)}
.vsteps li.done{color:var(--text)}.vsteps li.done::before{background:var(--green);border-color:var(--green)}
.vsteps li.now{color:var(--text);font-weight:600}.vsteps li.now::before{background:var(--yellow);border-color:var(--yellow)}
.stepper{display:flex;gap:0;overflow-x:auto;padding:4px 0 12px;margin:0;list-style:none}
.stepper li{flex:1 0 108px;position:relative}
.stepper li span{display:block;width:100%;color:var(--muted);font-size:12px;padding:30px 4px 4px;text-align:center}
.stepper li span::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;border:2px solid var(--nodeline);background:var(--panel);z-index:1}
.stepper li:not(:last-child)::after{content:"";position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nodeline)}
.stepper li.done::after{background:var(--green)}
.stepper li.done span::before{background:var(--green);border-color:var(--green)}
.stepper li.now span{color:var(--text);font-weight:600}
.stepper li.now span::before{background:var(--yellow);border-color:var(--yellow)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:6px 0 6px 14px;border-left:2px solid var(--nodeline);font-size:14px}
.timeline li b{display:block;font-size:12px;color:var(--muted);font-weight:600}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.kv span:nth-child(odd){color:var(--muted)}
.winlayout{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.drop{outline:2px dashed var(--accent);outline-offset:-6px}
.stroka-forma{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.stroka-forma input[name=naimenovanie]{flex:2 1 220px}
.stroka-forma input{flex:1 1 120px}
details summary{cursor:pointer}
.vhod{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.vhod-forma{width:min(380px,100%);display:flex;flex-direction:column;gap:10px}
.vhod-forma input{width:100%}
.oshibka-polosa{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--red);color:var(--red);padding:8px 14px;border-radius:8px;z-index:9;max-width:90vw}
/* < 1100 px: досье уходит под чат; < 760 px: всё в одну колонку. Таблицы прокручиваются внутри .scroll. */
@media(max-width:1100px){.cp{grid-template-columns:minmax(200px,26%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:auto;min-height:0}.cp-main{min-height:420px}.cp-right{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:280px}.g4,.g3{grid-template-columns:1fr 1fr}.winlayout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){main{padding:12px}header{padding:10px 12px}.g4,.g3,.g2,.cp{grid-template-columns:minmax(0,1fr)}.cp{grid-template-rows:auto minmax(0,1fr) auto}.cp-side{max-height:220px;border-right:0;border-bottom:1px solid var(--line)}.cp-main{min-height:360px}.cp-comp{flex-wrap:wrap}.cp-comp .btn{height:auto}}

/* Карточка 3: КП и документ рядом */
.kp-set{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,30%);gap:14px;align-items:start}
.kp-set>*{min-width:0}
.kp-card{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;background:var(--panel2)}
.kp-card h3{margin:0 0 6px;font-size:14px}
.kp-shapka{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;margin-bottom:8px}
.kp-shapka span b{color:var(--muted);font-weight:600;margin-right:4px}
.znach{cursor:pointer;border-bottom:1px dotted var(--accent);white-space:nowrap}
.znach:hover{color:var(--accent)}
.znach.warn{border-bottom-color:var(--yellow);color:var(--yellow)}
.znach.bad{border-bottom-color:var(--red);color:var(--red)}
.pometka{display:inline-block;border:1px solid var(--yellow);color:var(--yellow);border-radius:5px;padding:0 5px;font-size:12px;margin-left:4px;white-space:nowrap}
.pometka.bad{border-color:var(--red);color:var(--red)}
.doc-panel{border:1px solid var(--line);border-radius:10px;background:var(--panel2);position:sticky;top:150px;max-height:calc(100dvh - 170px);display:flex;flex-direction:column}
.doc-panel .row{padding:8px 12px;border-bottom:1px solid var(--line)}
.doc-panel h3{margin:0;font-size:13px}
.doc-frags{overflow:auto;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:6px 0}
.frag{display:flex;gap:8px;padding:1px 10px;white-space:pre-wrap;word-break:break-word}
.frag i{color:var(--muted);font-style:normal;min-width:36px;text-align:right;flex:0 0 auto}
.frag.active{background:var(--btn);outline:1px solid var(--accent);border-radius:4px}
.frag mark{background:var(--yellow);color:#111;border-radius:2px}
@media(max-width:1100px){.kp-set{grid-template-columns:minmax(0,1fr)}.doc-panel{position:static;max-height:360px}}

/* Карточка 7: сопоставление */
.sost{display:inline-block;border-radius:999px;padding:1px 8px;font-size:12px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.sost.predlozheno{border-color:var(--accent);color:var(--accent)}
.sost.podtverzhdeno,.sost.ispravleno{border-color:var(--green);color:var(--green)}
.sost.otkloneno,.sost.ne_sopostavleno{border-color:var(--red);color:var(--red)}
.sost.nizhe{border-color:var(--yellow);color:var(--yellow)}
.ochered-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ochered-acts select{max-width:260px}