:root{
  --bg:#f3f5f7; --card:#ffffff; --ink:#151e27; --soft:#5a6773;
  --rule:#d9e0e6; --accent:#e4531b; --accent-ink:#fff;
  --err:#ae3a34; --err-bg:#f5e2e0;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e151b; --card:#151f27; --ink:#e8eef3; --soft:#a0aeb9;
    --rule:#293742; --accent:#ff6a38; --accent-ink:#1a0e07;
    --err:#e27a73; --err-bg:#2c1815;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif;
}
.shell{min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px; gap:14px}
.card{
  background:var(--card); border:1px solid var(--rule); border-radius:14px;
  padding:28px 26px; width:100%; max-width:380px;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.06);
}
.brand{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:1.1rem;
}
h1{font-size:1.4rem; margin:0 0 1rem}
.hint{color:var(--soft); font-size:.9rem; margin:.6rem 0}
.secret{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1rem;
  background:var(--bg); border:1px solid var(--rule); border-radius:8px;
  padding:.5rem .7rem; word-break:break-all;
}
label{display:block; font-size:.85rem; color:var(--soft); margin:.8rem 0}
input{
  display:block; width:100%; margin-top:.3rem; padding:.6rem .7rem;
  font-size:1rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--rule); border-radius:8px;
}
input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
button,.btn{
  display:inline-block; margin-top:1rem; padding:.62rem 1.1rem;
  font-size:.95rem; font-weight:600; cursor:pointer; text-decoration:none;
  color:var(--accent-ink); background:var(--accent);
  border:1px solid var(--accent); border-radius:8px;
}
button.ghost,button.ghost:hover{
  background:transparent; color:var(--soft); border-color:var(--rule);
}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.err{
  color:var(--err); background:var(--err-bg);
  border:1px solid var(--err); border-radius:8px;
  padding:.5rem .7rem; font-size:.9rem; margin:.8rem 0;
}
.ok{
  color:var(--accent); border:1px solid var(--accent);
  border-radius:8px; padding:.5rem .7rem; font-size:.9rem; margin:.8rem 0;
}
form + form{margin-top:.4rem}
.qr{display:block; margin:.6rem 0; border-radius:8px; background:#fff; padding:8px}
.codes{
  list-style:none; padding:0; margin:1rem 0; display:grid;
  grid-template-columns:1fr 1fr; gap:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.codes li{
  background:var(--bg); border:1px solid var(--rule);
  border-radius:6px; padding:.4rem .5rem; text-align:center; letter-spacing:.04em;
}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; margin:1rem 0}
.kv dt{color:var(--soft); font-size:.85rem}
.kv dd{margin:0}
.foot{color:var(--soft); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase}
code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85em}

/* ============ приложение (широкие страницы) ============ */
body.app{display:block}
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
  padding:0 clamp(14px,3vw,28px); min-height:52px;
  background:var(--card); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:20;
}
.topbar .brand{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:700; text-decoration:none; margin:0;
}
.topnav{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.topnav > a, .navgroup > summary{
  color:var(--soft); text-decoration:none; font-size:.92rem;
  padding:.3rem 0; border-bottom:2px solid transparent;
  cursor:pointer; list-style:none; white-space:nowrap;
}
.topnav > a:hover, .navgroup > summary:hover{color:var(--ink)}
.topnav > a.on, .navgroup > summary.on{color:var(--ink); border-bottom-color:var(--accent)}
.navgroup{position:relative}
.navgroup > summary{display:inline-flex; align-items:center; gap:.25rem}
.navgroup > summary::-webkit-details-marker{display:none}
.navgroup > summary::after{content:"▾"; font-size:.7em; color:var(--soft)}
.navgroup[open] > summary::after{transform:rotate(180deg)}
.navgroup > .navmenu{
  position:absolute; top:calc(100% + .4rem); left:0; z-index:30;
  display:flex; flex-direction:column; min-width:12rem;
  background:var(--card); border:1px solid var(--rule); border-radius:10px;
  padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.12);
}
/* прозрачный «мостик» через зазор — курсор не теряет наведение по пути к меню */
.navgroup > .navmenu::before{
  content:""; position:absolute; left:0; right:0; top:-.6rem; height:.6rem;
}
.navgroup > .navmenu a{
  color:var(--soft); text-decoration:none; font-size:.9rem;
  padding:.45rem .6rem; border-radius:7px; border:none;
}
.navgroup > .navmenu a:hover{color:var(--ink); background:var(--bg)}
.navgroup > .navmenu a.on{color:var(--ink); background:var(--bg); font-weight:600}
/* выпадашка «Телефон» — показывает QR */
.navgroup > .navmenu.navmenu-qr{left:auto; right:0}   /* последний пункт — открывать влево от правого края */
.navmenu-qr{align-items:center; min-width:0; padding:10px; gap:4px}
.navmenu-qr img{width:176px; height:176px; display:block; border-radius:8px; background:#fff; padding:6px}
.navqr-cap{margin:2px 0 2px; font-size:.78rem; color:var(--soft); text-align:center; max-width:188px}
.navmenu-qr a{align-self:stretch; text-align:center}
.topbar .spacer{flex:1}
.whoami{color:var(--soft); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22vw}
.navws{font-weight:600}

.hamb{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-right:2px; flex:none;
  font-size:1.1rem; line-height:1; text-decoration:none;
  color:var(--soft); border:1px solid var(--rule); border-radius:8px;
}
.hamb:hover{color:var(--ink); border-color:var(--soft)}

/* ---- десктоп: ☰ не нужен; бренд и учётка в первой строке, навигация — своей строкой ---- */
@media (min-width:761px){
  .hamb{display:none}
  .topbar{flex-wrap:wrap; padding-top:6px; padding-bottom:2px; row-gap:2px}
  .topnav{
    order:5; flex-basis:100%; gap:10px 18px;
    margin-top:4px; padding-top:6px; border-top:1px solid var(--rule);
  }
}

/* ---- телефон: навигация прячется под ☰ ---- */
@media (max-width:760px){
  .navgroup > .navmenu{position:static; box-shadow:none; border:none; padding:2px 0 2px 1rem; min-width:0}
  .navgroup > .navmenu::before{display:none}
  .topbar{gap:10px}
  .whoami{display:none}
  .topnav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--card); border-bottom:1px solid var(--rule);
    padding:6px clamp(14px,3vw,28px) 10px;
    box-shadow:0 14px 28px rgba(0,0,0,.22);
  }
  .topbar.nav-open .topnav{display:flex}
  .topnav > a, .navgroup{border-top:1px solid var(--rule)}
  .topnav > a:first-child{border-top:none}
  .topnav > a, .navgroup > summary{padding:.7rem 0; font-size:1rem; border-bottom:none}
  .topnav > a.on, .navgroup > summary.on{color:var(--ink)}
}
.linkbtn{
  margin:0; padding:.35rem .7rem; font-size:.85rem; background:transparent;
  color:var(--soft); border:1px solid var(--rule); border-radius:7px; cursor:pointer;
  white-space:nowrap;
}
.linkbtn:hover{color:var(--ink); border-color:var(--soft)}

.appmain{max-width:1180px; margin:0 auto; padding:clamp(16px,3vw,28px)}
.appmain h1{font-size:1.5rem; margin:0}

.pagehead{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center;
  justify-content:space-between; margin-bottom:.6rem}
.count{font-size:.9rem; color:var(--soft); font-weight:400}
.search{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.search input{
  display:inline-block; width:min(60vw,380px); margin:0; padding:.5rem .7rem;
  font-size:.95rem;
}
.search button{margin:0; padding:.5rem 1rem; font-size:.9rem}
.search .clear{font-size:.85rem; color:var(--soft)}
.toggle{font-size:.85rem; color:var(--soft); margin:.2rem 0 1rem}
.toggle a{color:var(--accent)}

.tablewrap{overflow-x:auto; border:1px solid var(--rule); border-radius:10px}
table.grid{border-collapse:collapse; width:100%; font-size:.9rem; background:var(--card)}
table.grid th, table.grid td{
  text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--rule);
  vertical-align:top;
}
table.grid th{
  position:sticky; top:0; z-index:1; background:var(--card); color:var(--soft);
  font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
  box-shadow:inset 0 -1px 0 var(--rule);   /* граница не теряется при sticky + border-collapse */
}
table.grid td.colact, table.grid th.colact{white-space:nowrap; text-align:right; width:1%}
table.grid td.colact form{display:inline; margin:0}

/* поиск-выбор объекта (карточка расчёта) */
.objpick{position:relative; display:inline-block}
.objpick-list{
  position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:40;
  list-style:none; margin:0; padding:4px; max-height:260px; overflow-y:auto;
  background:var(--card); border:1px solid var(--rule); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.objpick-list li{
  padding:.4rem .55rem; border-radius:6px; cursor:pointer; font-size:.9rem;
}
.objpick-list li:hover, .objpick-list li:focus{background:var(--bg); outline:none}
.objpick-list li b{font-variant-numeric:tabular-nums}
table.grid tbody tr{cursor:pointer}
table.grid tbody tr:hover{background:var(--bg)}
table.grid td.num{white-space:nowrap; font-variant-numeric:tabular-nums}
table.grid td.wrap{min-width:220px; max-width:420px}
.cellwrap{display:inline-flex; align-items:center; gap:5px}
.cellwrap .auto-ck{flex:none; width:15px; height:15px; margin:0; cursor:pointer}
table.grid td.dot{width:22px; padding-right:0}
.swatch{display:inline-block; width:12px; height:12px; border-radius:3px;
  border:1px solid rgba(0,0,0,.2)}
.swatch.big{width:16px; height:16px; border-radius:4px}

.pager{display:flex; gap:16px; align-items:center; justify-content:center;
  margin:1.2rem 0; font-size:.9rem}
.pager a{color:var(--accent); text-decoration:none}
.pager span{color:var(--soft)}
.pager .of{font-variant-numeric:tabular-nums}
.empty{color:var(--soft); padding:2rem 0}

.fotbox{margin:.55rem 0 .2rem; line-height:1.55}
.fotbox > div{font-size:1.02rem; color:var(--soft)}
.fotbox .fot-main{font-size:1.2rem; color:var(--ink); margin-bottom:.1rem}
.fotbox .fot-main b{color:var(--accent)}
.fotbox a{display:inline-block; margin-top:.35rem}

.crumbs{margin:0 0 .8rem}
.crumbs a{color:var(--accent); text-decoration:none; font-size:.9rem}
.cardhead{display:flex; align-items:flex-start; gap:12px; margin-bottom:1rem}
.cardactions{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start}
.sub{color:var(--soft); font-size:.88rem; margin:.3rem 0 1.4rem}

/* карточка на телефоне: заголовок во всю ширину, кнопки — отдельной строкой */
@media (max-width:640px){
  .cardhead{flex-wrap:wrap; gap:8px}
  .cardhead > div[style*="flex:1"]{flex:1 1 100%; min-width:0}
  .cardhead h1{font-size:1.2rem; line-height:1.3; overflow-wrap:anywhere}
  .cardactions{flex:1 1 100%; justify-content:flex-start}
  .cardactions .btn, .cardactions button{flex:1 1 auto}
}

/* --- карточка объекта: вкладки и «Вид» --- */
.cardtabs{display:flex; flex-wrap:wrap; gap:2px; border-bottom:2px solid var(--rule);
  margin:.4rem 0 1rem}
.cardtabs button{background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-2px; padding:.5rem .9rem; font:inherit; color:var(--soft);
  cursor:pointer; border-radius:6px 6px 0 0}
.cardtabs button:hover{color:var(--ink); background:var(--bg)}
.cardtabs button.on{color:var(--ink); font-weight:600; border-bottom-color:var(--accent)}
.viewpanel{display:flex; flex-wrap:wrap; gap:1.5rem; background:var(--card);
  border:1px solid var(--rule); border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1rem}
.viewpanel[hidden]{display:none}
.viewpanel .vp-col{display:flex; flex-direction:column; gap:.25rem; font-size:.88rem}
.viewpanel .vp-fields{max-height:min(60vh,520px); overflow-y:auto; padding-right:8px}
.viewpanel .vp-grouprow{margin-top:.4rem}
.viewpanel .vp-fieldrow{margin-left:1.3rem; font-size:.82rem; color:var(--soft)}
.viewpanel label{display:flex; align-items:center; gap:.4rem}
.viewpanel input{width:auto; margin:0}
body.hide-empty .fld.empty{display:none}
.viewwrap{position:relative; margin:.2rem 0 .6rem; display:inline-block}
.viewwrap .viewpanel{position:absolute; z-index:25; margin-top:.3rem; left:0;
  flex-wrap:nowrap; gap:1.2rem; min-width:16rem;
  max-height:min(70vh,520px); overflow:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.16)}
.viewwrap .viewpanel label{font-size:.88rem; white-space:nowrap}
.viewwrap .vp-saved{color:var(--accent); align-self:flex-end; margin:0}
.tagmute{border:1px solid var(--rule); border-radius:999px; padding:.05em .6em;
  font-size:.8em}
.fgroup{
  background:var(--card); border:1px solid var(--rule); border-radius:10px;
  padding:1rem 1.1rem; margin-bottom:12px;
}
.fgroup h2{font-size:.95rem; margin:0 0 .7rem; color:var(--accent)}
.fgroup summary{cursor:pointer; font-weight:600; color:var(--soft); font-size:.9rem}
.fgroup dl{display:grid; grid-template-columns:1fr; gap:.5rem; margin:.7rem 0 0}
@media (min-width:640px){.fgroup dl{grid-template-columns:1fr 1fr}}
.fgroup dl > div{display:flex; flex-direction:column; gap:.1rem}
.fgroup dt{color:var(--soft); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.03em}
.fgroup dd{margin:0; white-space:pre-wrap; word-break:break-word}
.raw{display:block; color:var(--soft); font-size:.8em; margin-top:.15rem}
.contacts{margin:.6rem 0 0; padding-left:1.1rem}
.contacts li{margin:.2rem 0}
.rawjson{
  overflow-x:auto; background:var(--bg); border:1px solid var(--rule);
  border-radius:8px; padding:.8rem; font-size:.82rem; margin:.7rem 0 0;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* --- вкладки / фильтры / статусбар каталога --- */
.tabs{display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--rule); margin:.4rem 0 .8rem}
.tabs a{
  padding:.5rem .9rem; text-decoration:none; color:var(--soft); font-size:.92rem;
  border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0;
}
.tabs a span{font-size:.8em; color:var(--soft); background:var(--bg);
  border:1px solid var(--rule); border-radius:999px; padding:.05em .5em; margin-left:.3rem}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink); border-color:var(--rule); background:var(--card);
  font-weight:600; margin-bottom:-1px}
.tabs a.on span{border-color:var(--accent); color:var(--accent)}

.filters{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:end; margin-bottom:.7rem}
.filters label{margin:0; font-size:.78rem; color:var(--soft); display:flex;
  flex-direction:column; gap:.2rem}
.filters select{
  padding:.4rem .5rem; font-size:.9rem; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:7px; max-width:220px;
}
.filters label.chk{flex-direction:row; align-items:center; gap:.35rem; font-size:.88rem;
  color:var(--ink)}
.filters .chk input{width:auto; margin:0}
.filters .clear{font-size:.85rem; color:var(--accent); align-self:center}

.statusbar{
  background:var(--card); border:1px solid var(--rule); border-radius:8px;
  padding:.5rem .8rem; font-size:.85rem; color:var(--soft); margin-bottom:.8rem;
}
.statusbar b{color:var(--ink); font-variant-numeric:tabular-nums}

table.grid tr.t-changed td{background:color-mix(in srgb, #e0453a 12%, transparent)}
table.grid tr.t-dup td{background:color-mix(in srgb, #2f6bd8 12%, transparent)}
table.grid tr.t-negative td{background:color-mix(in srgb, #e08a2e 14%, transparent)}
table.grid tr.t-missing td{color:var(--soft)}

.legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin:1rem 0 .3rem; font-size:.8rem}
.legend .lg{padding:.1em .55em; border-radius:5px}
.legend .lg.t-changed{background:color-mix(in srgb, #e0453a 18%, transparent)}
.legend .lg.t-dup{background:color-mix(in srgb, #2f6bd8 18%, transparent)}
.legend .lg.t-negative{background:color-mix(in srgb, #e08a2e 20%, transparent)}
.legend .lg.t-missing{background:var(--bg); color:var(--soft)}
.foot-note{font-size:.82rem; color:var(--soft); margin:.2rem 0 1.5rem}
.foot-note a{color:var(--accent)}
.editable{color:var(--soft); font-size:.85em; margin-left:.2rem}

/* --- форма правки карточки --- */
.editform .fgroup{margin-bottom:12px}
.editgrid{display:grid; grid-template-columns:1fr; gap:.7rem}
@media (min-width:720px){.editgrid{grid-template-columns:1fr 1fr}}
.editgrid label{display:flex; flex-direction:column; gap:.2rem; margin:0}
.editgrid label span{font-size:.78rem; color:var(--soft); text-transform:uppercase; letter-spacing:.03em}
.editgrid input{width:100%; padding:.5rem .6rem; font-size:.95rem; margin:0}
.editform .row{margin-top:1rem}
.histgrid{font-size:.82rem; margin-top:.6rem}
.histgrid td.wrap{max-width:260px}

/* --- матрица прав --- */
.matgrid{display:grid; grid-template-columns:1fr; gap:.5rem}
@media (min-width:720px){.matgrid{grid-template-columns:1fr 1fr}}
.matgrid label{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem; margin:0}
.matgrid label span{font-size:.86rem; color:var(--ink)}
.matgrid select{padding:.35rem .5rem; font-size:.85rem; background:var(--card);
  color:var(--ink); border:1px solid var(--rule); border-radius:7px}
.matrix .fgroup{margin-bottom:10px}

/* --- чат --- */
.ubadge{background:var(--accent); color:var(--accent-ink); font-size:.7rem;
  border-radius:999px; padding:.02em .45em; margin-left:.15rem; font-weight:700}
.chatwrap{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:820px){.chatwrap{grid-template-columns:220px 1fr}}
.chan{display:flex; flex-direction:column; gap:2px; border:1px solid var(--rule);
  border-radius:10px; padding:6px; background:var(--card); align-self:start}
.chan a{padding:.45rem .6rem; border-radius:7px; text-decoration:none;
  color:var(--soft); font-size:.9rem}
.chan a:hover{color:var(--ink); background:var(--bg)}
.chan a.on{background:var(--bg); color:var(--ink); font-weight:600}
.chatmain{border:1px solid var(--rule); border-radius:10px; background:var(--card);
  display:flex; flex-direction:column; min-height:60vh}
.chatmain h2{margin:0; padding:.8rem 1rem; border-bottom:1px solid var(--rule);
  font-size:1rem}
.msgs{flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column;
  gap:.6rem; max-height:62vh}
.msg{max-width:80%; align-self:flex-start}
.msg.me{align-self:flex-end; text-align:right}
.msg .meta{font-size:.72rem; color:var(--soft)}
.msg .body{background:var(--bg); border:1px solid var(--rule); border-radius:10px;
  padding:.45rem .7rem; white-space:pre-wrap; word-break:break-word; display:inline-block}
.msg.me .body{background:var(--accent-soft); border-color:var(--accent-soft)}
.sendbar{display:flex; gap:8px; padding:.7rem; border-top:1px solid var(--rule);
  align-items:flex-end}
.sendbar textarea{flex:1; resize:vertical; min-height:2.2rem; max-height:8rem;
  padding:.5rem .6rem; font:inherit; color:var(--ink); background:var(--bg);
  border:1px solid var(--rule); border-radius:8px}
.sendbar button{margin:0; padding:.4rem 1rem}
.attbtn{display:inline-flex; align-items:center; justify-content:center;
  width:2.2rem; height:2.2rem; border:1px solid var(--rule); border-radius:8px;
  cursor:pointer; background:var(--bg); font-size:1.1rem; user-select:none}
.attbtn:hover{border-color:var(--accent)}
.attname{padding:0 .8rem .6rem; font-size:.8rem; color:var(--soft)}
.chan a.mng{margin-top:4px; border-top:1px solid var(--rule); border-radius:0;
  color:var(--accent); font-size:.85rem}
.msg .att-img{max-width:260px; max-height:260px; border-radius:10px;
  border:1px solid var(--rule); margin-top:.2rem}
.msg .att-file{display:inline-block; margin-top:.2rem; padding:.4rem .7rem;
  background:var(--bg); border:1px solid var(--rule); border-radius:10px;
  text-decoration:none; color:var(--ink); word-break:break-all}
.msg.me .att-file{background:var(--accent-soft); border-color:var(--accent-soft)}
details.grp{border:1px solid var(--rule); border-radius:8px; padding:.5rem .8rem;
  margin-bottom:.5rem; background:var(--card)}
details.grp summary{cursor:pointer}
fieldset.checks{border:1px solid var(--rule); border-radius:8px; padding:.6rem .8rem;
  margin:.6rem 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.2rem .8rem}
fieldset.checks legend{padding:0 .4rem; color:var(--soft); font-size:.85rem}
label.ck{display:flex; align-items:center; gap:.4rem; font-size:.9rem}
label.ck input{width:auto; margin:0}

/* --- сортировка и ресайз колонок каталога --- */
table.grid thead th.sortable{position:relative; padding-right:1.2rem}
table.grid thead th.sortable a{color:inherit; text-decoration:none; display:block}
table.grid thead th.sortable a:hover{color:var(--ink)}
table.grid thead th .sarr{color:var(--accent); font-size:.8em}
table.grid .colgrip{
  position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize;
  user-select:none;
}
table.grid .colgrip:hover{background:var(--accent-soft)}
table.grid{table-layout:auto}

/* --- рабочее пространство: контрастное «брутальное» оформление, синий+чёрный --- */
.wksp{
  --w-ink:#0a0f1c;        /* почти чёрный с синим уклоном */
  --w-blue:#12327a;       /* глубокий синий — основной акцент раздела */
  --w-blue-hi:#1e4fd6;    /* яркий синий */
  --w-card:#ffffff;
  --w-sub:#2b3448;        /* тёмно-серо-синий текст */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wksp{
    --w-ink:#e9eef7; --w-blue:#4f7dff; --w-blue-hi:#7ea2ff;
    --w-card:#0c1522; --w-sub:#9fb0c9;
  }
}
:root[data-theme="dark"] .wksp,
html.podlozhka-on .wksp{
  --w-ink:#e9eef7; --w-blue:#4f7dff; --w-blue-hi:#7ea2ff;
  --w-card:#0c1522; --w-sub:#9fb0c9;
}

/* объём и структура: чертёжная сетка + инженер со спины на фоне */
.wksp{position:relative; isolation:isolate}
.wksp::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--w-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--w-blue) 1px, transparent 1px);
  background-size:34px 34px; opacity:.06; pointer-events:none;
}
.wksp::after{
  content:""; position:absolute; right:0; bottom:0; z-index:-1;
  width:min(44%, 480px); height:min(78%, 620px);
  background:url("/static/engineer.svg") right bottom / contain no-repeat;
  opacity:.10; pointer-events:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wksp::after{opacity:.14; filter:invert(1)}
}
:root[data-theme="dark"] .wksp::after{opacity:.14; filter:invert(1)}
@media (max-width:640px){ .wksp::after{display:none} }

.wksp .homehead{border-bottom:3px solid var(--w-ink); padding-bottom:.6rem; margin-bottom:1.2rem}
.wksp .homehead h1{margin:0 0 .3rem; font-size:1.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.01em; color:var(--w-ink)}
.wksp .homehead .who{color:var(--w-sub); font-size:.85rem; font-weight:500}

.wksp .homesec{display:inline-block; margin:1.5rem 0 .7rem; padding:.22rem .7rem;
  background:var(--w-ink); color:#fff; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em}
.wksp .homesec:first-of-type{margin-top:.2rem}

.wksp .hometiles{display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); margin:0 0 .4rem}
.wksp .htile{display:flex; flex-direction:column; gap:.35rem; text-decoration:none;
  background:var(--w-card); border:2px solid var(--w-ink); border-radius:0;
  border-left-width:7px; border-left-color:var(--w-blue);
  padding:.95rem 1.05rem 1rem; color:var(--w-ink);
  box-shadow:5px 5px 0 var(--w-ink); transition:none}
.wksp .htile:hover{background:var(--w-blue); border-color:var(--w-ink);
  border-left-color:var(--w-ink); box-shadow:2px 2px 0 var(--w-ink);
  text-decoration:none}
.wksp .htile:hover .nm,
.wksp .htile:hover .ds,
.wksp .htile:hover .bg,
.wksp .htile:hover .bg b{color:#fff}
.wksp .htile .nm{font-weight:700; font-size:1rem; text-transform:uppercase;
  letter-spacing:.02em; color:var(--w-ink)}
.wksp .htile .ds{font-size:.83rem; color:var(--w-sub); line-height:1.45}
.wksp .htile .bg{margin-top:.2rem; font-size:.78rem; color:var(--w-sub);
  font-variant-numeric:tabular-nums; font-weight:600}
.wksp .htile .bg b{color:var(--w-blue); font-weight:800}

.wksp .statusbar{border:2px solid var(--w-ink); border-radius:0; color:var(--w-sub)}
.wksp .statusbar b{color:var(--w-ink)}

/* --- статусные метки расчётов --- */
.st{display:inline-block; padding:.05em .6em; border-radius:999px; font-size:.8rem;
  border:1px solid var(--rule); color:var(--soft); white-space:nowrap}
.st.s-считаем{border-color:var(--accent); color:var(--accent)}
.st.s-отправлено{border-color:#3b74d0; color:#3b74d0}
.st.s-выиграли,.st.s-в-работе{border-color:#2f7a4c; color:#2f7a4c}
.st.s-проиграли,.st.s-отказ{border-color:#b23b2b; color:#b23b2b}

/* --- денежное поле с ошибкой импорта + правка двойным щелчком --- */
.fld.bad dd .fval{color:var(--err); font-weight:600}
.fld.bad{background:var(--err-bg); border-radius:6px}
.fld .errtag{display:inline-block; margin-left:.5rem; font-size:.72rem; font-weight:600;
  color:var(--err); border:1px solid var(--err); border-radius:4px; padding:0 .4em;
  vertical-align:middle}
.fld.editable-fld{cursor:text}
.fld .inline-edit{display:inline-flex; gap:.4rem; align-items:center}
.fld .inline-edit input{width:12rem; padding:.2rem .45rem; font-size:.9rem; margin:0}
.fld .inline-msg{color:var(--err); font-size:.75rem}

/* --- карточка объекта: форма «Данные» как в настольном «Каталоге объектов» --- */
.card-warn{color:var(--err); margin:.2rem 0 .9rem; font-weight:600}
.dform-id, .dform{display:flex; flex-direction:column; gap:.45rem}
.dsep{border:0; border-top:1px solid var(--rule); margin:.7rem 0 1rem}
.drow{display:grid; grid-template-columns:minmax(120px,30%) 1fr; gap:.4rem 1rem;
  align-items:start}
.drow > label{text-align:right; color:var(--soft); font-size:.9rem; padding-top:.4rem}
.drow .dval{padding-top:.4rem; white-space:pre-wrap; word-break:break-word}
.drow .dval.strong{font-weight:700; color:var(--ink)}
.drow .dcell{display:flex; align-items:center; gap:.5rem}
.drow input{margin:0; width:100%; max-width:34rem}
.drow.bad input{border-color:var(--err)}
.drow.bad > label{color:var(--err)}
.drow .raw{display:block; margin-top:.15rem}
.dform-actions{display:flex; gap:.5rem; align-items:center; margin-top:1.1rem;
  padding-top:.8rem; border-top:1px solid var(--rule);
  position:sticky; bottom:0; background:var(--card)}
body.hide-empty .drow.empty{display:none}
@media (max-width:620px){
  .drow{grid-template-columns:1fr; gap:.15rem}
  .drow > label{text-align:left; padding-top:0}
  .drow .dval{padding-top:0}
}

/* ================= доска «Главная» ================= */

/* ---- мобильная плитка (раскладка «tiles») ---- */
.mhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:14px; flex-wrap:wrap}
.mhead h1{margin:0}
.mhead a{color:var(--accent); text-decoration:none; font-size:.85rem}
.mtiles{display:flex; flex-direction:column; gap:12px; max-width:520px}
.mtile{border:1px solid var(--rule); border-radius:14px; background:var(--card); overflow:hidden}
.mtile > summary{
  list-style:none; cursor:pointer; padding:1.1rem 1.1rem; font-size:1.2rem; font-weight:700;
  display:flex; align-items:center; justify-content:space-between;
}
.mtile > summary::-webkit-details-marker{display:none}
.mtile > summary::after{content:"▾"; color:var(--soft); font-size:.9em}
.mtile[open] > summary::after{transform:rotate(180deg)}
.mtile[open] > summary{border-bottom:1px solid var(--rule)}
.msub{display:flex; flex-direction:column}
.msub a{
  padding:.95rem 1.1rem; color:var(--ink); text-decoration:none; font-size:1.05rem;
  border-top:1px solid var(--rule);
}
.msub a:first-child{border-top:none}
.msub a:active{background:var(--bg)}
.mtile-link{
  display:flex; align-items:center; padding:1.1rem 1.1rem;
  font-size:1.2rem; font-weight:700; text-decoration:none;
  color:var(--accent-ink); background:var(--accent); border-color:var(--accent);
}

/* вкладки выбора объекта в приёме накладных */
.scan-tabs{display:flex; flex-wrap:wrap; gap:6px}
.scan-tabs button{
  margin:0; padding:.4rem .7rem; font-size:.85rem; font-weight:500;
  color:var(--soft); background:transparent;
  border:1px solid var(--rule); border-radius:999px; cursor:pointer;
}
.scan-tabs button.on{color:var(--accent-ink); background:var(--accent); border-color:var(--accent)}

/* колонка «быстрые ссылки» — сетка иконок */
.bcol-head .ql-addbtn{
  margin:0 0 0 auto; flex:none; align-self:center;
  width:24px; height:24px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem; font-weight:700; line-height:1; cursor:pointer;
  color:var(--accent-ink); background:var(--accent);
  border:1px solid var(--accent); border-radius:7px;
}
.bcol-head .ql-addbtn:hover{filter:brightness(1.08)}
.bcol-head .ql-addbtn[aria-expanded="true"]{filter:brightness(.88)}
.qlgrid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 6px; padding:4px 2px;
}
.qlgrid-rule{
  grid-column:1 / -1; height:1px; margin:2px 2px; background:var(--rule); border:0;
}
.qltile-wrap{ position:relative; display:flex; min-width:0; }
.qltile{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:6px 2px; border:0; background:transparent; cursor:pointer;
  text-decoration:none; color:var(--ink); font:inherit;
}
.qltile[role="button"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px }
.qltile-ic{
  position:relative; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:1.2rem; color:#fff; flex:none;
}
.qltile-ic b{font-size:1.15rem; font-weight:700}
.qltile-ic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff}
.qltile-ic img.appic{ object-fit:contain; background:transparent }
.qltile-nm{
  font-size:.7rem; line-height:1.15; text-align:center; color:var(--soft);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.qltile:hover .qltile-nm{color:var(--ink)}
.qltile:hover .qltile-ic{outline:2px solid var(--accent); outline-offset:2px}
.qltile.copied .qltile-ic::after{
  content:"скопировано"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.7); font-size:.5rem; border-radius:12px;
}
.qltile-del{
  position:absolute; top:-4px; right:2px; width:18px; height:18px; padding:0;
  border-radius:50%; border:1px solid var(--rule); background:var(--card);
  color:var(--soft); font-size:.8rem; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .12s;
}
.qltile-wrap:hover .qltile-del, .qltile-wrap:focus-within .qltile-del{opacity:1}
.qltile-del:hover{color:var(--err); border-color:var(--err)}
.qlapplist{
  list-style:none; margin:4px 0 0; padding:4px; max-height:210px; overflow-y:auto;
  border:1px solid var(--rule); border-radius:8px; background:var(--bg);
}
.qlapplist li{
  display:flex; align-items:center; gap:8px;
  padding:.3rem .5rem; border-radius:6px; font-size:.85rem; cursor:pointer;
}
.qlapplist li:hover{background:var(--card)}
.qlapplist li.sel{background:var(--accent); color:var(--accent-ink)}
.qlapplist li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.qlapp-ic{ width:20px; height:20px; flex:none; object-fit:contain }

/* модальное окно выбора приложения */
.qlapp-dlg{
  width:min(440px, 92vw); max-height:80vh; padding:14px;
  border:1px solid var(--rule); border-radius:14px;
  background:var(--card); color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.qlapp-dlg::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(2px) }
.qlapp-dlg-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 8px; padding:0;
}
.qlapp-dlg-head strong{font-size:1rem}
.qlapp-x{
  margin:0; width:28px; height:28px; padding:0; line-height:1;
  border:1px solid var(--rule); border-radius:50%; background:var(--bg);
  color:var(--soft); font-size:1.1rem; cursor:pointer;
}
.qlapp-x:hover{color:var(--err); border-color:var(--err)}
.qlapp-dlg input[type="search"]{
  width:100%; margin:0; font-size:.9rem; padding:.45rem .6rem;
  border:1px solid var(--rule); border-radius:8px; background:var(--bg); color:var(--ink);
}
.qlapp-dlg .qlapplist{ max-height:52vh; margin-top:8px }

.ql-kinds{display:flex; flex-direction:column; gap:6px; margin-bottom:6px}
.ql-kinds[hidden]{display:none}          /* иначе display:flex перебивает hidden */
.ql-kinds button{
  margin:0; text-align:left; padding:.55rem .7rem; font-size:.9rem; font-weight:500;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--rule); border-radius:9px; cursor:pointer;
}
.ql-kinds button:hover{border-color:var(--accent); color:var(--accent)}

.ql-form{padding:8px; border-top:1px solid var(--rule); display:flex;
  flex-direction:column; gap:6px; flex:none}
.ql-form[hidden]{display:none}          /* иначе display:flex перебивает hidden */
.ql-form input,.ql-form select{margin:0; width:100%; font-size:.85rem; padding:.4rem .5rem}
.ql-form button{margin:0}

.agent-status{ display:flex; align-items:center; gap:6px; margin:.3rem 8px 0; position:relative }
.agent-status .hint{ margin:0; flex:1; min-width:0 }
/* индикатор агента живёт в правом краю строки навигации — под кнопкой «Выйти» */
.topnav .agent-status{ margin:0 0 0 auto }
@media (max-width:760px){ #agentStatus{ display:none } }
.agent-dot{
  width:8px; height:8px; border-radius:50%; flex:none; background:var(--soft);
  box-shadow:none; transition:background .15s, box-shadow .15s;
}
.agent-dot.on{ background:#2ecc71; box-shadow:0 0 6px 1px rgba(46,204,113,.6) }
.agent-menu-wrap{ position:relative; flex:none }
.agent-menu-btn{
  width:22px; height:22px; padding:0; margin:0; line-height:1;
  border:1px solid var(--rule); border-radius:6px; background:var(--bg); color:var(--soft);
  cursor:pointer; font-size:.95rem;
}
.agent-menu-btn:hover{ color:var(--accent); border-color:var(--accent) }
.agent-menu{
  position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:230px;
  background:var(--card); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.4); padding:6px; display:flex; flex-direction:column; gap:2px;
}
.agent-menu[hidden]{ display:none }   /* иначе display:flex перебивает атрибут hidden — меню висит всегда */
.agent-menu-item{
  text-align:left; padding:.4rem .55rem; border-radius:6px; border:0; background:transparent;
  color:var(--ink); font-size:.83rem; cursor:pointer;
}
.agent-menu-item:hover{ background:var(--bg) }
.agent-menu-item:disabled{ color:var(--soft); cursor:default; background:transparent }
.agent-menu-info{
  padding:.4rem .55rem 0; font-size:.72rem; color:var(--soft);
  border-top:1px solid var(--rule); margin-top:2px;
}

.board-top{
  display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap;
}
.board-top .layout-link{color:var(--accent); text-decoration:none; font-size:.85rem}
.board-top .board-filter{margin:0}

.connect-card{display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start}
.connect-qr{border-radius:12px; background:#fff; padding:10px; flex:none; max-width:100%; height:auto}
.connect-body{flex:1; min-width:260px}
.connect-url{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.02rem; word-break:break-all;
  background:var(--bg); border:1px solid var(--rule); border-radius:8px;
  padding:.5rem .7rem; margin-bottom:.8rem;
}
.connect-steps{margin:.4rem 0 0; padding-left:1.2rem; line-height:1.6}
.connect-steps li{margin:.3rem 0}
.connect-steps ul{margin:.2rem 0}

.board-filter{
  display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap;
}
.board-filter label{display:flex; align-items:center; gap:8px; margin:0; color:var(--soft); font-size:.9rem}
.board-filter select{margin:0; padding:.4rem .6rem; font-size:.9rem; max-width:min(70vw,320px)}
.board-filter a{color:var(--accent); text-decoration:none; font-size:.85rem}

.board{
  display:grid; gap:14px;
  grid-template-columns:repeat(3, minmax(0,1fr)) minmax(220px, .8fr);
  align-items:start;
}
.bcol{
  display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--rule); border-radius:12px; background:var(--card);
  max-height:calc(100vh - 190px);
}
.bcol-head{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem; border-bottom:1px solid var(--rule);
  font-weight:700; font-size:.95rem; flex:none;
}
.bcol-head > a:first-child{color:var(--ink); text-decoration:none}
.bcol-head > a:first-child:hover{color:var(--accent)}
.bcol-head .raw{font-weight:400}
.bcol-head .bcol-add{
  margin-left:auto; width:22px; height:22px; padding:0; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1; cursor:pointer;
  border:1px solid var(--rule); background:transparent; color:var(--soft);
  text-decoration:none;
}
.bcol-head .bcol-add:hover{color:var(--accent); border-color:var(--accent)}
.bcol-list{overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:4px}
.bcol-empty{color:var(--soft); font-size:.85rem; padding:.6rem .4rem; margin:0}

/* колонка «Быстрые ссылки»: шапка и форма фиксированы, плитки программ
   прокручиваются внутри колонки, а не уезжают за нижний край экрана */
.bcol-links .ql-form{flex:none}
.bcol-links .qlgrid{flex:1 1 auto; min-height:80px; overflow-y:auto; overscroll-behavior:contain}

.bcard{
  display:block; padding:.45rem .55rem; border-radius:8px;
  text-decoration:none; color:var(--ink); border:1px solid transparent;
}
.bcard:hover{background:var(--bg); border-color:var(--rule)}
.bcard .nm{display:block; font-size:.9rem; line-height:1.3}
.bcard .mt{display:block; margin-top:.15rem; font-size:.76rem; color:var(--soft)}
.pill{
  display:inline-block; margin-left:.3rem; padding:0 .45em; border-radius:999px;
  border:1px solid var(--rule); font-size:.72rem; color:var(--soft);
}

@media (max-width:980px){
  .board{grid-template-columns:1fr 1fr}
  .bcol{max-height:60vh}
}
@media (max-width:560px){
  .board{grid-template-columns:1fr}
}