[hidden] { display: none !important; }
:root { --g: #1a7f4b; --y: #d98e04; --r: #c62828; --bg: #f4f6f5; --fg: #1d2421; --mut: #6b7570; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--fg); padding-bottom: 76px; }
header { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--g); color: #fff; }
header .brand { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; }
header .brand img { height: 26px; background: #fff; border-radius: 14px; padding: 2px 4px; }
.login .logo { width: 100%; max-width: 280px; display: block; margin: 4px auto 16px; }
.login h1 { text-align: center; margin: 0; }
.login > .muted { text-align: center; }
header .where { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
header select, header #storeName { width: 100%; margin: 0; font-size: 18px; font-weight: 700; }
header select { border-radius: 8px; border: 0; padding: 5px 6px; color: var(--fg); }
header #storeName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header #who { font-size: 13px; opacity: .95; line-height: 1.25; }
header #who b { display: block; font-size: 14px; }
header #who span { display: block; font-size: 12px; opacity: .9; }
header #logoutBtn { flex: none; align-self: center; background: #fff; color: var(--g); border: 0; border-radius: 10px; padding: 8px 12px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; font-size: 13px; }
main { padding: 12px; max-width: 720px; margin: 0 auto; }
nav#tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 6px; padding: 8px; background: #fff; box-shadow: 0 -2px 8px #0002; }
nav#tabs button { flex: 1; padding: 12px 4px; border: 0; border-radius: 10px; background: #e8ecea; font-size: 15px; }
nav#tabs button.primary { background: var(--g); color: #fff; font-weight: 600; }
.card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px #0001; }
.login { max-width: 360px; margin: 40px auto; }
label { display: block; margin: 10px 0; font-size: 14px; color: var(--mut); }
input, select, textarea { width: 100%; padding: 11px; font-size: 16px; border: 1px solid #ccd3cf; border-radius: 8px; margin-top: 4px; background: #fff; color: var(--fg); }
button { font: inherit; cursor: pointer; }
button.primary, button.btn { padding: 11px 16px; border: 0; border-radius: 10px; background: var(--g); color: #fff; font-weight: 600; }
button.btn.sec { background: #e8ecea; color: var(--fg); }
button.btn.warn { background: var(--y); }
button.btn.danger { background: var(--r); }
button.big { width: 100%; padding: 14px; font-size: 17px; margin-top: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tile { border: 0; border-radius: 12px; padding: 14px; text-align: left; color: #fff; }
.tile b { display: block; font-size: 30px; }
.t-md { background: var(--y); } .t-rm { background: #e65100; } .t-ex { background: var(--r); } .t-soon { background: #546e7a; }
.tile.active { outline: 3px solid var(--fg); }
.item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef1ef; }
.item:last-child { border-bottom: 0; }
.item img, .ph { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: #e8ecea; flex: none; }
.item .t { flex: 1; min-width: 0; }
.item .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--mut); font-size: 13px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff; }
.b-ok { background: var(--g); } .b-markdown { background: var(--y); } .b-remove { background: #e65100; } .b-expired { background: var(--r); }
.days { font-weight: 700; font-size: 18px; text-align: right; min-width: 52px; }
.err { color: var(--r); min-height: 1em; }
.warnbox { background: #fff4e0; border-left: 4px solid var(--y); padding: 8px 10px; border-radius: 6px; margin: 8px 0; font-size: 14px; }
.okbox { background: #e6f4ec; border-left: 4px solid var(--g); padding: 8px 10px; border-radius: 6px; margin: 8px 0; font-size: 14px; }
#cam, .cam { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; max-height: 60vh; width: 100%; }
#cam video, .cam video { width: 100%; height: 100%; object-fit: cover; }
#cam .frame, .cam .frame { position: absolute; inset: 25% 12%; border: 3px solid #fff8; border-radius: 12px; }
.prod-head { display: flex; gap: 12px; align-items: center; }
.prod-head img, .prod-head .ph { width: 84px; height: 84px; }
h2 { font-size: 18px; margin: 4px 0 10px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 20; }
.seg { display: flex; gap: 6px; margin: 6px 0; }
.seg button { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #ccd3cf; background: #fff; }
.seg button.on { background: var(--g); color: #fff; border-color: var(--g); }
header .brand small, .login h1 small { display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; opacity: .85; line-height: 1; }
.login h1 small { font-size: 13px; color: var(--mut); margin-bottom: 4px; }
.camctl { margin: 8px 0 0; align-items: center; }
.camctl label { margin: 0; }
.camctl input[type=range] { padding: 0; border: 0; }
.dp { margin: 6px 0 10px; }
.dpv { font-size: 34px; font-weight: 700; letter-spacing: .04em; text-align: center; padding: 10px; border: 2px solid var(--g); border-radius: 12px; background: #fff; font-variant-numeric: tabular-nums; }
.dpv .lbl { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--mut); }
.dpi { text-align: center; font-size: 14px; color: var(--mut); min-height: 1.4em; margin: 6px 0; }
.dpi.good { color: var(--g); font-weight: 600; } .dpi.bad { color: var(--r); font-weight: 600; }
.dpk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dpk button { padding: 12px 0; font-size: 24px; font-weight: 600; border: 0; border-radius: 12px; background: #e8ecea; color: var(--fg); touch-action: manipulation; }
.dpk button:active { background: #cfd8d3; }
.dpk button.fn { font-size: 18px; background: #dfe5e2; }
.dpq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.dpq button { padding: 10px 0; border: 1px solid var(--g); border-radius: 10px; background: #fff; color: var(--g); font-weight: 600; font-size: 14px; }
#backBar { max-width: 720px; margin: 0 auto; padding: 8px 12px 0; }
#backBtn { border: 0; background: none; color: var(--g); font-size: 17px; font-weight: 600; padding: 6px 0; }
nav#tabs button.cur:not(.primary) { outline: 2px solid var(--g); }
.item .dt { font-size: 15px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ind { flex: none; width: 66px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-left: 2px solid #2b2f2d; padding-left: 8px; font-size: 28px; font-weight: 700; line-height: 1; }
.ind small { font-size: 11px; font-weight: 500; color: var(--mut); margin-top: 3px; }
.ind.k-ok { color: var(--g); } .ind.k-markdown { color: var(--y); } .ind.k-remove, .ind.k-expired { color: var(--r); font-size: 36px; }
.dpv { cursor: pointer; position: relative; }
.dpv .edit { display: none; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--g); }
.dpv.closed .edit { display: block; }
header .brand { flex: none; }
@media (max-width: 380px) { header .brand > span { display: none; } }
.drows { border: 1px solid #dfe5e2; border-radius: 12px; overflow: hidden; margin: 6px 0; background: #fff; }
.drow { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-bottom: 1px solid #eef1ef; }
.drow:last-child { border-bottom: 0; }
.drow > span { flex: 1; font-size: 15px; }
.dval { flex: none; min-width: 150px; padding: 10px 12px; border: 2px solid #ccd3cf; border-radius: 10px; background: #fff; color: var(--fg);
  font-size: 20px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; touch-action: manipulation; }
.dval.on { border-color: var(--g); box-shadow: 0 0 0 3px #1a7f4b33; }
.dval .muted { font-size: 15px; font-weight: 500; }
.dval small { display: block; font-size: 11px; font-weight: 500; color: var(--mut); }
.dpok { width: 100%; margin-top: 8px; }
.t-ret { background: #6a4fb3; }
.ind.k-return { color: #6a4fb3; }
.retbox { border: 2px solid #6a4fb3; border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: #f5f2fc; }
button.btn.ret { background: #6a4fb3; }
.phedit { margin: 0; position: relative; display: block; flex: none; cursor: pointer; color: var(--g); }
.phedit span { display: block; text-align: center; font-size: 12px; margin-top: 3px; }
.card.search { display: flex; gap: 8px; align-items: center; }
.card.search input { margin: 0; }
.card.search button { flex: none; font-size: 22px; padding: 8px 14px; }
.scanov { position: fixed; inset: 0; z-index: 30; background: var(--bg); padding: 12px; overflow: auto; }
.drow input.retd { width: 80px; flex: none; margin: 0; text-align: right; }
header .brand { cursor: pointer; }
.mods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mod { border: 0; border-radius: 14px; padding: 18px 12px; background: #fff; box-shadow: 0 1px 3px #0002; font-size: 17px; font-weight: 600; color: var(--fg); text-align: center; }
.mod i { display: block; font-style: normal; font-size: 34px; margin-bottom: 6px; }
.mod small { display: block; font-size: 12px; font-weight: 500; color: var(--mut); }
.mod.soon { opacity: .55; }
.mod.adm { background: #e8ecea; }
.hello h2 { margin: 0; } .hello p { margin: 4px 0 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; }
label.chk { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--fg); font-size: 15px; }
label.chk input { width: 20px; height: 20px; margin: 0; flex: none; }
.urow { cursor: pointer; } .urow.off .n { color: var(--mut); text-decoration: line-through; }
.rtab { overflow-x: auto; } .rtab table { border-collapse: collapse; width: 100%; font-size: 14px; }
.rtab th, .rtab td { padding: 8px 6px; border-bottom: 1px solid #eef1ef; text-align: center; } .rtab td:first-child { text-align: left; }
.rtab th { font-size: 12px; font-weight: 600; color: var(--mut); } .rtab input { width: 20px; height: 20px; margin: 0; }
#invUrl { font-size: 13px; margin: 6px 0; }
#rgWrap { margin: 8px 0; }
#rgWrap > .lbl { font-size: 14px; color: var(--mut); margin-bottom: 4px; }
.geo { border: 1px solid #e3e6e3; border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.geo b { display: block; font-size: 14px; margin: 2px 0; }
.addrow { margin: 10px 0 4px; }
.addrow .btn { width: 100%; }
.grp { font-size: 13px; font-weight: 600; color: var(--mut); margin: 12px 0 2px; text-transform: uppercase; letter-spacing: .04em; }
.about { text-align: center; margin: 18px 0 8px; font-size: 13px; }
.about a { color: var(--mut); }
.dpk { gap: 6px; }
body.padopen nav#tabs { display: none; }
body.padopen { padding-bottom: 12px; }
.drow { scroll-margin-top: 70px; }
.t-tr { background: #4527a0; } .t-del { background: #37474f; }
.tile.t-nav { background: #fff; color: var(--fg); box-shadow: 0 1px 3px #0002; font-weight: 600; font-size: 16px; }
.tile.t-nav i { display: block; font-style: normal; font-size: 28px; margin-bottom: 4px; }
.item.nr, .card.nr { background: #ffe600; }
.item.nr { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.nrb { display: inline-block; margin: 2px 0; padding: 1px 8px; border-radius: 10px; background: #3a2e00; color: #ffe600; font-size: 12px; font-weight: 700; }
.pact { padding: 4px 0 10px; border-bottom: 1px solid #eef1ef; }
.pact .btn { flex: 1; }
.modal { position: fixed; inset: 0; z-index: 40; background: #0007; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mbox { background: #fff; border-radius: 14px; padding: 18px; max-width: 420px; width: 100%; }
.mbox p { margin: 0 0 8px; font-size: 16px; }
#addBox, .card { scroll-margin-top: 84px; }
.drow .sdel { flex: none; padding: 8px 12px; margin-left: 4px; }
/* 0.10: шапка и строка «Назад» с выбором магазина закреплены вверху */
#topWrap { position: sticky; top: 0; z-index: 6; background: var(--bg); }
#topWrap header { position: static; }
#backBar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
#backBar #storeSel, #backBar #storeName { margin: 0 0 0 auto; width: auto; max-width: 62%; font-size: 16px; font-weight: 700; }
#backBar #storeSel { padding: 8px 10px; border: 2px solid var(--g); border-radius: 10px; background: #fff; color: var(--fg); }
#backBar #storeName { color: var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header #who b, header #who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header #who b { font-size: 16px; }
#addBox, .card { scroll-margin-top: 130px; }
.drow { scroll-margin-top: 130px; }
.srow { cursor: pointer; }
.srow .chev { font-style: normal; font-size: 22px; color: var(--mut); }
.lightbox { position: fixed; inset: 0; z-index: 50; background: #000e; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lightbox img { width: min(100%, 720px); max-height: 85vh; object-fit: contain; border-radius: 8px; }
.lightbox .lbx { color: #fff9; font-size: 13px; }
.mnum { margin: 4px 0; font-size: 20px; }
img.zoom { cursor: zoom-in; }
/* 0.11: «Уведомления» и фото без искажений */
.nsup { font-weight: 700; font-size: 14px; margin: 8px 0 2px; color: var(--fg); }
.nrow { border-radius: 10px; padding: 0 10px; margin: 4px 0; }
.nrow .item { border-bottom: 0; cursor: pointer; }
.nrow .pact { border-bottom: 0; padding-top: 0; }
.n-need { background: #fff3c4; border-left: 4px solid #f2b705; } .n-overdue { background: #fbd5d5; border-left: 4px solid var(--r); } .n-work { background: #dff3e6; border-left: 4px solid var(--g); }
.item img, .prod-head img, .ph { object-fit: contain !important; background: #eef1ef; }
/* 0.12: три цифры светофора на «Уведомлениях», лишние партии */
.tl3 { display: flex; gap: 6px; margin-bottom: 4px; }
.tl3 i { font-style: normal; font-weight: 800; font-size: 20px; min-width: 38px; height: 38px; border-radius: 19px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border: 2px solid #fff8; }
.l-y { background: #f2c200; color: #3a2e00; } .l-g { background: #2e9d5b; color: #fff; } .l-r { background: #d32f2f; color: #fff; }
.t-extra { background: #8d6e63; }
.c-r { color: var(--r); } .c-g { color: var(--g); }
.hrow { cursor: pointer; }
.needact { background: var(--r); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-align: center; border-radius: 8px; padding: 6px; margin: 4px 0 8px; }
.suplist { border: 1px solid #d5dbd8; border-radius: 10px; margin: -4px 0 10px; overflow: hidden; background: #fff; }
.suplist .sopt { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef1ef; background: #fff; font: inherit; color: inherit; }
.suplist .sopt:last-child { border-bottom: 0; }
.suplist .snew { color: #1b7a43; font-weight: 600; }
.sclosed { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #c62828; color: #fff; font-size: 12px; font-weight: 700; }
.needphoto { background: #fff3cd; border: 2px solid #f2c200; }
.needphoto .phbtn { display: block; text-align: center; margin-top: 10px; cursor: pointer; padding: 13px 16px; border-radius: 10px; background: var(--g); color: #fff; font-weight: 600; }

/* 0.17: «осталось N дн.» в уведомлениях; поиск поставщика закреплён; шапка — подписи и названия на одной линии */
.left { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 8px; border: 2px solid #e32228; background: #e32228; color: #fff; animation: leftblink 1s steps(1) infinite; }
@keyframes leftblink { 50% { background: #fff; color: #e32228; } }
.stick { position: sticky; z-index: 4; background: #fff; padding: 6px 0; margin: 0 0 4px; }
.stick input { margin: 0; }
header .brand > span, header #who { display: flex; flex-direction: column; justify-content: center; }
header .brand small, header #who b { height: 18px; line-height: 18px; margin: 0; }
header .brand > span { font-size: 18px; line-height: 20px; }
header #who span { height: 20px; line-height: 20px; }
header .brand img { align-self: center; }

/* 0.18: глаз в поле пароля */
.pwwrap { position: relative; display: block; }
.pwwrap input { padding-right: 48px; }
.pwwrap .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 20px; padding: 6px 8px; cursor: pointer; line-height: 1; width: auto; margin: 0; }

/* 0.19, правка 62: широкий экран (монитор, планшет горизонтально) — на «Сегодня» плитки и кнопки слева на месте, справа прокрутка списка */
@media (min-width: 900px) {
  body.p-home main { max-width: none; display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 16px; align-items: start; }
  body.p-home #backBar { max-width: none; }
  body.p-home #tiles { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--toph, 110px) + 8px); margin: 0;
    max-height: calc(100vh - var(--toph, 110px) - 96px); overflow-y: auto; }
  body.p-home #lst { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  body.p-home main > .btn { grid-column: 1; grid-row: 2; }
  body.p-home nav#tabs { right: auto; width: 484px; box-sizing: border-box; box-shadow: 2px -2px 8px #0002; border-top-right-radius: 12px; }
}

/* 0.21: на широком экране «Сегодня» как приложение — страница не двигается (ни вбок, ни вверх-вниз), прокручивается только список справа */
@media (min-width: 900px) {
  html:has(body.p-home), body.p-home { height: 100%; overflow: hidden; }
  body.p-home { padding-bottom: 0; }
  body.p-home main { height: calc(100dvh - var(--toph, 110px)); box-sizing: border-box; padding-bottom: 12px; grid-template-rows: auto auto minmax(0, 1fr); }
  body.p-home #tiles { position: static; max-height: calc(100dvh - var(--toph, 110px) - 96px); }
  body.p-home #lst { grid-row: 1 / -1; align-self: stretch; height: auto; min-height: 0; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
html, body { overflow-x: clip; }

/* 0.22: широкий экран — выбор магазина слева над плитками, список уведомлений поднят до шапки */
@media (min-width: 900px) {
  body.p-home #topWrap { background: transparent; pointer-events: none; }
  body.p-home #topWrap > * { pointer-events: auto; }
  body.p-home #backBar { width: 484px; max-width: 484px; margin: 0; box-sizing: border-box; padding: 8px 12px 0; background: var(--bg); }
  body.p-home #backBar #storeSel, body.p-home #backBar #storeName { margin: 0 0 0 16px; flex: 1; max-width: none; }
  body.p-home main { margin-top: calc(-1 * var(--bbh, 50px)); height: calc(100dvh - var(--hdh, 60px)); padding-top: 12px; }
  body.p-home #tiles { margin-top: var(--bbh, 50px); max-height: calc(100dvh - var(--hdh, 60px) - var(--bbh, 50px) - 110px); }
}

/* 0.23: широкий экран, карточка товара — название и фото слева на месте, партии и история справа прокручиваются */
@media (min-width: 900px) {
  body.p-prod #topWrap { background: transparent; pointer-events: none; }
  body.p-prod #topWrap > * { pointer-events: auto; }
  body.p-prod #backBar { width: 484px; max-width: 484px; margin: 0; box-sizing: border-box; padding: 8px 12px 0; background: var(--bg); }
  body.p-prod #backBar #storeSel, body.p-prod #backBar #storeName { margin: 0 0 0 16px; flex: 1; max-width: none; }
  body.p-prod main { max-width: none; margin-top: calc(-1 * var(--bbh, 50px)); padding: 12px 12px 12px 496px; }
  body.p-prod main > .card:first-child { position: fixed; left: 12px; top: calc(var(--hdh, 60px) + var(--bbh, 50px) + 4px); width: 460px;
    box-sizing: border-box; margin: 0; max-height: calc(100dvh - var(--hdh, 60px) - var(--bbh, 50px) - 110px); overflow-y: auto; z-index: 3; }
  body.p-prod main > .card:first-child .prod-head { flex-direction: column; align-items: stretch; gap: 8px; }
  body.p-prod .prod-head > div:last-child { display: contents; }
  body.p-prod .prod-head > * , body.p-prod .prod-head > div:last-child > * { order: 3; }
  body.p-prod .prod-head > div:last-child > h2 { order: 1; margin: 0; }
  body.p-prod .prod-head > :first-child { order: 2; }
  body.p-prod main > .card:first-child .prod-head > .ph, body.p-prod main > .card:first-child .prod-head > img, body.p-prod .prod-head .phedit, body.p-prod .prod-head .phedit img, body.p-prod .prod-head .phedit .ph { width: 100%; }
  body.p-prod main > .card:first-child .prod-head img { height: auto; max-height: min(260px, 32vh); }
  body.p-prod main > .card:first-child .prod-head .ph { max-height: 32vh; }
  body.p-prod main > .card:first-child .prod-head .ph { height: 160px; }
  body.p-prod nav#tabs { right: auto; width: 484px; box-sizing: border-box; box-shadow: 2px -2px 8px #0002; border-top-right-radius: 12px; }
}

/* 0.24: поиск товара в карточке (правка 63), «Поставщики» — карточка слева (правка 64) */
.wideonly { display: none; }
.pqlist { max-height: 440px; overflow-y: auto; margin-top: 6px; border: 1px solid #dfe5e2; border-radius: 10px; }
.pqi { padding: 10px 12px; min-height: 24px; border-bottom: 1px solid #eef1ef; cursor: pointer; }
.pqi:hover { background: #eef6f1; }
.pqi.nr { background: #ffe600; }
.psearch input { margin: 0; }
.srow.sel { background: #e3f1e8; border-radius: 8px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef1ef; }
.kv span { color: var(--mut, #667); }
@media (min-width: 900px) {
  .wideonly { display: block; }
  body.wl #topWrap { background: transparent; pointer-events: none; }
  body.wl #topWrap > * { pointer-events: auto; }
  body.wl #backBar { width: 484px; max-width: 484px; margin: 0; box-sizing: border-box; padding: 8px 12px 0; background: var(--bg); }
  body.wl #backBar #storeSel, body.wl #backBar #storeName { margin: 0 0 0 16px; flex: 1; max-width: none; }
  body.wl main { max-width: none; margin-top: calc(-1 * var(--bbh, 50px)); padding: 12px 12px 12px 496px; }
  body.wl main > .card:first-child { position: fixed; left: 12px; top: calc(var(--hdh, 60px) + var(--bbh, 50px) + 4px); width: 460px;
    box-sizing: border-box; margin: 0; max-height: calc(100dvh - var(--hdh, 60px) - var(--bbh, 50px) - 110px); overflow-y: auto; z-index: 3; }
  body.wl nav#tabs { right: auto; width: 484px; box-sizing: border-box; box-shadow: 2px -2px 8px #0002; border-top-right-radius: 12px; }
  body.wl #sqBox { top: var(--hdh, 60px) !important; }
  body.wl .srow { cursor: pointer; }
}

/* 0.25: поиск в карточке — с картинками, как в «Номенклатуре» */
.pqlist { max-height: min(640px, 60vh); }
.pqlist .item.pqi { margin: 0; padding: 8px 12px; border-radius: 0; }

/* 0.26: «Номенклатура» на широком экране — слева «Выберите товар» */
@media (min-width: 900px) { body.wl .card.search { position: sticky; top: var(--hdh, 60px); z-index: 2; } }

/* 0.27: широкий экран (товар, номенклатура, поставщики) как приложение: страница не ездит, прокручивается только правая колонка */
@media (min-width: 900px) {
  html:has(body.wl), body.wl { height: 100%; overflow: hidden; }
  body.wl { padding-bottom: 0; }
  body.wl main { height: calc(100dvh - var(--hdh, 60px)); box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
  body.wl #sqBox, body.wl .card.search { position: sticky; top: 0 !important; z-index: 2; }
}
input, select, textarea { font-size: 16px; }
@media (min-width: 900px) { body.wl #sqBox { box-shadow: 0 -30px 0 #fff, 0 4px 6px -4px #0002; } }

/* 0.28: поиск в карточке товара тоже на месте; без увеличения пальцами */
@media (min-width: 900px) {
  body.wl .card.psearch { position: sticky; top: 0; z-index: 2; box-shadow: 0 -30px 0 var(--bg), 0 4px 8px -4px #0003; }
  body.wl #sqBox { position: sticky; top: 0; }
}

/* 0.30: телефон повернули горизонтально — просим вернуть вертикально */
body.phone::after { content: "Поверните телефон вертикально"; white-space: pre; display: none; position: fixed; inset: 0; z-index: 100;
  background: var(--g); color: #fff; font-size: 22px; font-weight: 700; text-align: center; align-items: center; justify-content: center; line-height: 1.6; }
@media (orientation: landscape) and (max-height: 500px) { body.phone::after { display: flex; } }

/* 0.31: рамка выбранной плитки не обрезается; большая картинка телефона при повороте; потянуть вниз — обновить */
@media (min-width: 900px) { body.p-home #tiles { padding: 4px; margin-left: -4px; margin-right: -4px; } }
body.phone::before { content: "📱"; display: none; position: fixed; z-index: 101; left: 0; right: 0; top: 8%; text-align: center; font-size: 42vh; line-height: 1; }
@media (orientation: landscape) and (max-height: 500px) {
  body.phone::before { display: block; }
  body.phone::after { align-items: flex-end; padding-bottom: 8vh; box-sizing: border-box; }
}
#ptr { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 50; background: #fff; color: var(--g); border-radius: 20px;
  padding: 6px 14px; font-weight: 700; box-shadow: 0 2px 8px #0003; display: none; }

/* 0.32: цвета плиток — фирменные цвета «Светофора»: красный, жёлтый #FCEC00, зелёный #93C740 */
.tile.t-ex, .tile.t-rm { background: #e32228; color: #fff; }
.tile.t-ret, .tile.t-soon { background: #fcec00; color: #1d2421; }
.tile.t-extra, .tile.t-del { background: #93c740; color: #1d2421; }
.tile.active { outline: 3px solid #1d2421; outline-offset: 0; }

/* 0.34: полоса «нет связи / не отправлено» */
/* 0.35: нет связи — шапка и нижняя панель жёлтые, «Нет связи» мигает раз в секунду */
body.offline header, body.offline nav#tabs { background: #fcec00; color: #1d2421; }
body.offline header #who, body.offline header #who span { color: #1d2421; }
#netLbl { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-align: right; white-space: nowrap; }
#netLbl[hidden] { display: none; }
#netLbl .blink { color: #e32228; font-size: 15px; animation: netblink 1s steps(1) infinite; }
#netLbl small { font-size: 11px; font-weight: 600; }
@keyframes netblink { 50% { opacity: 0; } }

/* 0.39: модуль «Фотоотчёты» */
.c-y { color: #b07d00; }
.phbtns { gap: 8px; margin: 6px 0; }
.item.phi { cursor: pointer; align-items: center; }
.item.ph-missed { border-left: 4px solid #e32228; padding-left: 8px; }
.item.ph-open { border-left: 4px solid #fcec00; padding-left: 8px; }
.item.ph-done, .item.ph-late { border-left: 4px solid #93c740; padding-left: 8px; }
.phpick { flex: 1; text-align: center; cursor: pointer; }
.phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; }
.phgrid figure { margin: 0; position: relative; }
.phgrid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.phgrid figcaption { font-size: 11px; color: var(--mut); text-align: center; }
.phgrid figure.bad img { outline: 3px solid #e32228; }
.phgrid figure.bad figcaption { color: #e32228; }
.phx { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border-radius: 14px; border: 0; background: #000a; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.cmt { background: #f3f5f4; border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.cmt.mine { background: #e5f4e4; }
#phCm textarea { width: 100%; box-sizing: border-box; margin: 8px 0; }
.pgrid td[data-id] { cursor: pointer; font-weight: 700; }
.pgrid .g-ok { color: #2e7d32; } .pgrid .g-late { color: #b07d00; background: #fff8d6; } .pgrid .g-miss { color: #fff; background: #e32228; } .pgrid .g-open { color: var(--mut); }
.pgrid td, .pgrid th { padding: 6px 4px; min-width: 26px; }
.schrow { display: grid; grid-template-columns: 96px 1fr 64px; gap: 6px; align-items: center; margin: 6px 0; }
.schrow input { margin: 0; }
.schrow { grid-template-columns: 1fr 70px; row-gap: 2px; }
.schrow .schN { grid-column: 1 / -1; font-size: 14px; }
.pgrid td:first-child, .pgrid th:first-child { position: sticky; left: 0; background: #fff; white-space: nowrap; text-align: left; padding-right: 8px; z-index: 1; }

/* 0.40: свои значки вместо эмодзи (Windows 7) */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mod i .ic { width: 40px; height: 40px; stroke-width: 1.5; color: var(--g); }
.mod.soon i .ic { color: var(--mut); }
.tile i .ic { width: 30px; height: 30px; color: var(--g); }
.eye .ic { width: 20px; height: 20px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.dot-r { background: #e32228; } .dot-y { background: #fcec00; box-shadow: inset 0 0 0 1px #c9b800; } .dot-g { background: #93c740; }

/* 0.41: фотоотчёты — дни слева, лента фото справа */
.phday { border-top: 1px solid #eef1ef; padding: 10px 6px; cursor: pointer; border-radius: 8px; }
.phday.sel { background: #e5f4e4; }
.phdh { display: flex; justify-content: space-between; font-size: 13px; }
.phtheme { font-size: 13px; color: var(--mut); margin: 2px 0 6px; }
.phst { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.phsn { font-size: 18px; font-weight: 700; }
.phst.wait .phsn { color: var(--mut); font-weight: 600; }
.phtm { font-size: 13px; }
.star { color: #f2b600; font-size: 26px; line-height: 1; }
.tick { color: var(--g); font-size: 22px; font-weight: 700; }
.phfh { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 10px 4px; }
.phfh b { font-size: 18px; display: block; }
.phright.solo .phfh { top: var(--toph); }
.phfs { display: flex; justify-content: space-between; align-items: flex-start; }
.phwork b { font-size: 20px; }
.cmrow { display: flex; gap: 6px; align-items: flex-end; } .cmrow textarea { flex: 1; margin: 0; } .cmrow .btn { flex: none; }
header .brand > span > span { font-weight: 700; }
@media (min-width: 900px) {
  .phwrap { display: grid; grid-template-columns: 460px 1fr; gap: 16px; align-items: start; }
  .phright { position: sticky; top: calc(var(--toph) + 8px); max-height: calc(100vh - var(--toph) - 16px); overflow-y: auto; }
  body:has(.phwrap) main { max-width: none; }
}
@media (min-width: 900px) { .phright .phgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* 0.42: фото в ленте во всю ширину, «?!», вопрос/ответ к фото, подгрузка прошлых дней */
.phtheme { font-size: 17px; font-weight: 700; color: var(--fg); margin: 4px 0 8px; }
.phph { margin: 10px 0 14px; }
.phimg { position: relative; }
.phimg img { width: 100%; display: block; border-radius: 10px; background: #eef1ef; min-height: 120px;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.phq { position: absolute; top: 8px; right: 8px; min-width: 40px; height: 34px; padding: 0 8px; border: 0; border-radius: 17px;
  font-weight: 800; font-size: 16px; color: #fff; background: #e32228; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.phq.done { background: #93c740; }
.phq.sm { position: static; display: inline-block; min-width: 0; height: auto; padding: 1px 6px; font-size: 12px; border-radius: 8px; box-shadow: none; }
.phth { background: #f8faf9; border: 1px solid #e3e8e5; border-radius: 10px; padding: 8px; margin-top: 6px; }
.phth .cmrow { margin-top: 6px; }
.phth textarea[disabled] { background: #f0f2f1; }
.cmt.q { background: #fff1f1; } .cmt.ans { background: #e5f4e4; }
.phfix { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.phfix img, .phfix figure img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }
.phfix figure { margin: 0; position: relative; }
.phfixrow { align-items: center; gap: 8px; margin-top: 6px; }
.phhint { font-size: 13px; margin: 0 4px 6px; }
.phpull { text-align: center; color: var(--mut); font-size: 13px; padding: 8px; cursor: pointer; border-radius: 8px; transition: background .2s; }
.phpull.go { background: #e5f4e4; color: var(--fg); font-weight: 600; }
.phsec + .phsec, .phpull + .phsec { margin-top: 4px; }
.phright { overscroll-behavior-y: contain; }
.phth textarea { font: inherit; font-size: 15px; }
/* 0.42: кнопки «Сетка выполнения» и «График» закреплены сверху левой колонки */
#phl .phbtns { position: sticky; top: var(--toph, 110px); z-index: 4; background: #fff; margin: -14px -14px 6px; padding: 14px 14px 8px; border-radius: 12px 12px 0 0; box-shadow: 0 6px 6px -6px #0002; }
/* 0.42: фото открывается на весь экран, фото отчёта листаются вбок */
.lightbox { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 0; gap: 0; align-items: center; background: #000; }
.lightbox img { flex: 0 0 100vw; width: 100vw; height: 100vh; height: 100dvh; max-height: none; object-fit: contain; border-radius: 0; scroll-snap-align: center; }
.lightbox .lbx { position: fixed; left: 0; right: 0; bottom: 10px; text-align: center; pointer-events: none; text-shadow: 0 1px 3px #000; }
.phmk { display: flex; align-items: center; gap: 6px; flex: none; }
.phst .phq.sm, .phmk .phq.sm { font-size: 14px; padding: 3px 8px; }
.pgrid .phq.sm { font-size: 11px; padding: 1px 4px; }
.phfi { scroll-margin-top: calc(var(--toph, 110px) + 70px); }
/* 0.42: сетка выполнения по светофору: выполнено — зелёный, с опозданием / в другой день — жёлтый, не сдан — красный */
.pgrid td[data-k] { cursor: pointer; font-weight: 700; }
.pgrid .g-ok { color: #fff; background: #93c740; } .pgrid .g-late { color: #1d2421; background: #fcec00; }
.pgrid td.g-ok, .pgrid td.g-late, .pgrid td.g-miss { border: 1px solid #fff; }
.pgrid .phq.sm { box-shadow: 0 0 0 2px #fff; }
.pgmon { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 4px 0 8px; } .pgmon b { font-size: 17px; text-align: center; } .pgmon .btn { flex: none; width: auto; padding: 8px 12px; font-size: 14px; } .pgmon #pgNext { justify-self: end; } .pgmon #pgPrev { justify-self: start; }
.rtab table.pgrid { width: auto; }
/* 0.43: сетка — день недели над датой, выходные зелёным, статистика закреплена справа, магазин — слева */
.pgrid th small { display: block; font-size: 11px; font-weight: 600; }
.pgrid th.wknd { color: #fff; background: #93c740; border: 1px solid #fff; }
.pgrid .st { position: sticky; background: #fff; z-index: 1; white-space: nowrap; font-size: 13px; }
.pgrid th.st { font-size: 11px; line-height: 1.2; white-space: normal; min-width: 52px; }
.pgrid .st3 { right: 0; } .pgrid .st2 { right: 56px; } .pgrid .st1 { right: 112px; box-shadow: -6px 0 6px -6px #0003; }
.pgrid .st1, .pgrid .st2, .pgrid .st3 { width: 56px; min-width: 56px; max-width: 56px; box-sizing: border-box; }
.pgrid td:first-child { box-shadow: 6px 0 6px -6px #0003; }
.pc-g { color: #2e7d32; } .pc-y { color: #b07d00; } .pc-r { color: #e32228; }
.pgrid .sh { display: none; }
@media (max-width: 600px) {
  .pgrid .lg { display: none; } .pgrid .sh { display: inline; font-size: 14px; }
  .pgrid .st1, .pgrid .st2, .pgrid .st3 { width: 40px; min-width: 40px; max-width: 40px; }
  .pgrid .st2 { right: 40px; } .pgrid .st1 { right: 80px; }
  .pgrid th.st { min-width: 40px; }
}
/* 0.43: «?!» после ответа директора — жёлтый (красный — ждёт ответа) */
.phq.done { background: #fcec00; color: #1d2421; }
.pglg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--fg); margin: 6px 0 4px; }
.pglg span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pglg i { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; }
.pglg i.g-ok { color: #fff; background: #93c740; } .pglg i.g-late { background: #fcec00; } .pglg i.g-miss { color: #fff; background: #e32228; } .pglg i.g-open { color: var(--mut); border: 1px solid #dde3e0; }
.pglg .phq.sm { font-size: 12px; padding: 2px 6px; }
/* 0.43: вход — без «СВЕТОФОР» (он есть на логотипе), флаг Казахстана слева */
.login h1.kzh { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kzflag { width: 42px; height: 21px; border-radius: 3px; box-shadow: 0 0 0 1px #0001; flex: none; }
/* 0.44: фотоотчёты, широкий экран — «Назад» и магазин над левой колонкой, лента фото начинается сразу под шапкой */
@media (min-width: 900px) {
  body.phw #backBar { position: absolute; left: 0; top: 100%; width: 460px; height: 52px; max-width: none; margin: 0 0 0 12px; padding: 0; box-sizing: border-box; background: var(--bg); }
  body.phw #phl { margin-top: var(--bbh2, 52px); }
  body.phw #phl .phbtns { top: calc(var(--toph, 60px) + var(--bbh2, 52px)); }
}
.schro { padding: 8px 0; border-top: 1px solid #eef1ef; } .schro div { font-size: 16px; margin-top: 2px; } .schro .muted { font-size: 13px; }
/* 0.44: сетка выполнения на широком экране — на всю ширину, «Назад» слева */
@media (min-width: 900px) {
  body.wideP main, body.wideP #backBar { max-width: none; }
  body.wideP .pgrid td:first-child { min-width: 140px; }
  body.wideP .pgrid td:not(:first-child):not(.st), body.wideP .pgrid th:not(:first-child):not(.st) { min-width: 36px; }
}
/* 0.45: фотоотчёты — «?!» на фото вдвое больше с белой каймой; плашки «Сегодня» (зелёная) и «Завтра» (жёлтая);
   сегодняшний день светло-зелёный и на телефоне; «не сдан» мигает раз в секунду; «Назад» слева */
.phimg .phq { top: 10px; right: 10px; min-width: 80px; height: 64px; border-radius: 32px; font-size: 32px; padding: 0 14px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.phday.today { background: #e5f4e4; }
.phday.sel { background: #e5f4e4; }
.phdh b.pl-g, .phdh b.pl-y { display: inline-block; padding: 3px 10px; border-radius: 8px; }
.phdh b.pl-g { background: #93c740; color: #fff; }
.phdh b.pl-y { background: #fcec00; color: #1d2421; }
.phdh { align-items: center; }
.blink1 { animation: blink1 1s steps(1) infinite; }
@keyframes blink1 { 50% { opacity: 0; } }
@media (min-width: 900px) { body.leftBack #backBar { max-width: none; } }
.phday.tmrw { cursor: default; }
.phalld { width: 100%; margin-top: 8px; } #phl:has(.phalld) { margin-bottom: 8px; }
@media (max-width: 899px) { .phwrap .phright .phfh { top: var(--toph, 110px); } }
/* 0.47: модуль «Задачи» — плашки групп по светофору, выбранная задача подсвечена */
.tkgrp { margin: 12px 0 2px; font-size: 13px; }
.tkgrp b { display: inline-block; padding: 3px 10px; border-radius: 8px; background: #eef1ef; }
.tkgrp b.pl-r { background: #e32228; color: #fff; } .tkgrp b.pl-g { background: #93c740; color: #fff; } .tkgrp b.pl-y { background: #fcec00; color: #1d2421; }
.tki { cursor: pointer; border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.tki.sel { background: #e5f4e4; }
.tki .chev { font-style: normal; font-size: 22px; color: var(--mut); }
.tkst { margin: 8px 0; font-size: 16px; }
.tkcard h2 { margin: 4px 0 6px; }
.pgrid sup { font-size: 9px; margin-left: 1px; }
/* 0.50: значок «?!» на плитках главного меню; магазин крупно в списке задач; магазин справа над карточкой */
.mod { position: relative; }
.modq { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 10px; font-weight: 800; font-size: 15px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.modq.r { background: #e32228; color: #fff; } .modq.y { background: #fcec00; color: #1d2421; }
.tkstore { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
@media (min-width: 900px) {
  body.wl #backBar #storeName, body.p-prod #backBar #storeName { text-align: right; }
}
/* 1.3: фото упаковки — даты с фото */
.ocrbox { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 13px 16px; border-radius: 10px; background: var(--g); color: #fff; font-weight: 600; margin: 4px 0 6px; }
.ocrbox svg { width: 22px; height: 22px; }
#ocrMsg { min-height: 1.2em; margin-bottom: 6px; } #ocrMsg.good { color: var(--g); font-weight: 600; }
/* 1.3: уведомления */
.pushc b { display: flex; align-items: center; gap: 6px; } .pushc svg, #pushSet svg { width: 20px; height: 20px; vertical-align: -4px; }
.pushc .row, #pushSet .row { display: flex; gap: 8px; margin-top: 8px; } .pushc .row .btn, #pushSet .row .btn { flex: 1; }
/* 1.5: «Сертификаты» */
.chip { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; background: #e3e7e5; color: #1d2421; white-space: nowrap; flex: none; }
.chip.pl-r { background: #e32228; color: #fff; } .chip.pl-g { background: #93c740; color: #fff; } .chip.pl-y { background: #fcec00; color: #1d2421; }
.crt { cursor: pointer; } .certph { display: flex; align-items: center; justify-content: center; } .certph svg { width: 28px; height: 28px; opacity: .6; }
.certprev { display: block; margin: 8px 0; } .certprev img { width: 100%; max-height: 520px; object-fit: contain; border: 1px solid #e3e7e5; border-radius: 8px; background: #fff; }
.certprev .certph { width: 100%; height: 160px; border-radius: 8px; }
#cup { margin-top: 8px; } #cup label.btn { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } #cup svg, .warnbox label svg, #pCert svg { width: 20px; height: 20px; vertical-align: -4px; }
.ctext { white-space: pre-wrap; font-size: 12px; max-height: 300px; overflow: auto; } #cCam #cam { margin: 8px 0; }
.warnbox label.btn { display: block; text-align: center; margin-top: 8px; cursor: pointer; }
.cbtn { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 11px 14px; border-radius: 10px; background: var(--g); color: #fff; font-weight: 600; text-decoration: none; margin-top: 8px; }
.cbtn.sec { background: #e3e7e5; color: #1d2421; } .cbtn svg { width: 20px; height: 20px; }
.dcam { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--g); color: #fff; cursor: pointer; }
.dcam svg { width: 24px; height: 24px; }
.dcam.done { background: #93c740; } #ocrMsg svg { width: 18px; height: 18px; vertical-align: -3px; } #ocrMsg { margin: 6px 0; }

/* 1.5.6: главная кнопка приёмки крупнее — жмут на ходу, в зале */
#bf button.primary.big { padding: 20px 16px; font-size: 20px; border-radius: 14px; margin-top: 10px; }

/* 1.5.7: экран съёмки даты — широкий кадр 16:9 */
.camwrap { position: fixed; inset: 0; background: #000; z-index: 300; display: flex; flex-direction: column; }
.camwrap video { flex: 1; width: 100%; object-fit: cover; }
.camrow { display: flex; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: #000; }
.cbtn { flex: 1; padding: 18px; font-size: 19px; font-weight: 600; border: 0; border-radius: 14px; background: #2b2b2b; color: #fff; }
.cbtn.cs { background: var(--g); }

/* 1.5.9: админская проверка распознавания дат */
pre.ocrtext { white-space: pre-wrap; word-break: break-word; background: #f5f7f6; border-radius: 10px; padding: 10px; margin: 8px 0 0; font-size: 13px; max-height: 260px; overflow: auto; }
.tagd { display: inline-block; background: #eef6ee; border: 1px solid #cfe3cf; border-radius: 8px; padding: 4px 8px; margin: 2px 4px 2px 0; font-weight: 600; }

/* 1.6.4: разметка эталона на странице «Проверка дат» */
.lbl { border-top: 1px solid #eef1ef; margin-top: 10px; }
.lbl label { display: block; margin: 8px 0; }
.lbl input[type=date] { width: 100%; padding: 12px; border: 1px solid #d6dcd9; border-radius: 10px; font-size: 17px; }

/* 1.6.7: превью загруженного фото на странице «Проверка дат» */
img.shot { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #f2f5f3; border-radius: 12px; margin: 6px 0 10px; }

/* 1.7.8: просмотр фото — выше заглушки поворота, и в горизонтали кадр занимает весь экран */
.lightbox { z-index: 200; }
body.lbx-open.phone::after, body.lbx-open.phone::before { display: none !important; }
@media (orientation: landscape) {
  .lightbox { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0; gap: 0; background: #000; }
  .lightbox img { flex: 0 0 auto; margin: auto; width: auto; max-width: 100vw; height: auto; max-height: 100dvh; object-fit: contain; border-radius: 0; }
  .lightbox .lbx { position: fixed; left: 0; right: 0; bottom: 6px; text-align: center; color: #fff9; font-size: 12px; }
}

/* 1.9: таблица сертификатов — производитель, продукция, дата, номер, привязка */
.crtc { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
.crtp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv b { text-align: right; font-weight: 600; }

/* 2.0: список сертификатов — скан слева, данные по центру, действия справа */
.crt { align-items: flex-start; gap: 10px; }
.crtimg { flex: none; cursor: zoom-in; }
.crtinfo { cursor: pointer; flex: 1; min-width: 0; }
.crtchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.crtact { display: flex; flex-direction: column; gap: 6px; flex: none; }
.icb { border: 0; background: #eef1ef; border-radius: 10px; width: 38px; height: 38px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #1d2421; cursor: pointer; }
.icb svg { width: 20px; height: 20px; }
.icb.del { color: #e32228; font-weight: 700; }
.icb.cam { color: #1a7f4b; }
.searchbar { position: relative; display: flex; gap: 8px; align-items: center; }
.searchbar input { flex: 1; }
.chip.pl-r { background: #e32228; color: #fff; }