/* DIAMDOR sklad: ONE design system for every screen (the SPA and the standalone pages), redone 28.10.2026.
   Look: diamdor.ru (Manrope, light grey page, white panels with thin borders, square corners, dark primary buttons, orange accent).
   Order of this file: 1 tokens · 2 base · 3 header and navigation · 4 layout · 5 components · 6 screens (search, item card, tag, tags list,
   prepayments, clients, statuses, print) · 7 phone adjustments.
   Page CSS files (kanban.css, prepay.css, clients.css, statuses.css, print.css, client-picker.css) hold ONLY what is specific to that page.
   Components (class names): .btn (.light .gold .danger .sm .auto) · .input / select.input / textarea.input · .fld (label + field) · .chip ·
   .badge (.ok .bad .gold .warn) · .panel (.blk) with .ph heading · .spec table · .list/.row2 lists · .ov + .modal dialogs · .toast ·
   .empty / .loading / .err states · details.more («Подробнее») · details.menu («Ещё»). */

/* ---------------------------------------------------------------- 1 tokens */
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/fonts/manrope-v20-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/fonts/manrope-v20-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/fonts/manrope-v20-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* colour */
  --bg: #f8f9fa; --fg: #1d2024; --card: #fff; --soft: #f1f2f4; --primary: #ef7a38; --muted: #6b7077; --border: #dfe2e6;
  --bad: #c8321f; --ok: #2f8f5b; --warn: #b7791f; --bar: #FF6A00;
  --ok-bg: #eaf7ee; --warn-bg: #fffaf0; --bad-bg: #fdf1ef; --primary-bg: #fff4ea;
  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* type scale */
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px;
  /* controls: big on a phone, compact with a mouse */
  --ctl: 48px; --ctl-sm: 40px; --pad: 14px;
  --top-h: 78px;
}
@supports (color: oklch(0 0 0)) {
  :root { --bg: oklch(0.98 0.002 250); --fg: oklch(0.20 0.01 250); --primary: oklch(0.70 0.18 45); --muted: oklch(0.50 0.01 250); --border: oklch(0.90 0.005 250); --bad: oklch(0.577 0.245 27.325); --ok: oklch(0.55 0.12 150); --soft: oklch(0.96 0.005 250); }
}
@media (hover: hover) and (pointer: fine) { :root { --ctl: 40px; --ctl-sm: 32px; --top-h: 76px; } }

/* ---------------------------------------------------------------- 2 base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs-md)/1.45 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; }
h1 { font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
h2 { font-size: var(--fs-md); font-weight: 700; margin: var(--s5) 0 var(--s2); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.noprint { }
mark { background: color-mix(in srgb, var(--primary) 28%, transparent); color: inherit; padding: 0 1px; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------------------------------------------------------------- 3 header: orange bar + one row of tabs, the same on every screen */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 30px; padding: env(safe-area-inset-top) var(--pad) 0; background: var(--bar); color: #fff; font-size: 12px; }
.appbar .brand { display: flex; align-items: center; color: #fff; }
.appbar .brand b { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; font-size: 12px; }
.appbar .brand img { display: none; height: 20px; width: auto; filter: brightness(0) invert(1); }
.appbar .who { display: flex; align-items: center; gap: var(--s3); min-width: 0; font-size: var(--fs-sm); }
.appbar .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.appbar .out { background: none; border: 0; padding: 0 0 0 var(--s1); min-height: 30px; color: #fff; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nav { display: flex; align-items: stretch; min-height: 46px; padding: 0 var(--pad); background: var(--bg); border-bottom: 1px solid var(--border); }
.nav .logo { display: flex; align-items: center; margin-right: var(--s5); flex: none; }
.nav .logo img { display: block; width: 132px; height: auto; }
.nav a.t { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s4); font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.nav a.t:hover { color: var(--fg); }
.nav a.t.on { color: var(--fg); border-bottom-color: var(--primary); }
/* «Ещё ▾» of the phone nav (shell.js): hidden on a desktop, where every tab is in the row */
.nav .more-wrap { display: none; }
.nav .more-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; min-width: 0; }
.nav .more-btn .ml { overflow: hidden; text-overflow: ellipsis; }
.nav .more-btn::after { content: '▾'; font-size: 11px; flex: none; }
.nav .more-btn[aria-expanded=true]::after { content: '▴'; }
.nav .more-btn.on { color: var(--fg); border-bottom-color: var(--primary); }
.nav .nav-menu { position: absolute; z-index: 40; right: var(--pad); top: calc(100% + 1px); min-width: 220px; max-width: calc(100vw - 2 * var(--pad)); display: grid; background: var(--card); border: 1px solid var(--fg); }
.nav .nav-menu[hidden] { display: none; }
.nav .nav-menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); border-bottom: 1px solid var(--border); font-size: var(--fs-md); font-weight: 600; color: var(--fg); }
.nav .nav-menu a:last-child { border-bottom: 0; }
.nav .nav-menu a:hover { background: var(--bg); }
.nav .nav-menu a.on { box-shadow: inset 3px 0 0 var(--primary); }
/* section tabs inside «Предоплаты» (second level, lighter than the main tabs) */
.subnav { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s4); }
.subnav a { display: inline-flex; align-items: center; min-height: var(--ctl-sm); padding: 0 var(--s4); border: 1px solid var(--border); background: var(--card); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.subnav a.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.subnav a:not(.on):hover { color: var(--fg); border-color: var(--fg); }

/* ---------------------------------------------------------------- 4 layout */
main { max-width: 720px; margin: 0 auto; padding: var(--s4) var(--pad) 80px; }
main.wide { max-width: 1240px; }
main.single { max-width: 720px; }
.back { display: inline-flex; align-items: center; min-height: var(--ctl-sm); margin-bottom: var(--s1); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.back:hover { color: var(--fg); }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s3); }
.pagehead .btn { width: auto; flex: none; }
.row { display: flex; gap: var(--s2); }
.row > * { flex: 1; min-width: 0; }
.row.auto > * { flex: 0 1 auto; }
.row.wrap { flex-wrap: wrap; }
.row2 { display: flex; gap: var(--s2); }
.row2 > * { flex: 1; min-width: 0; }
.stack { display: grid; gap: var(--s2); }
.gap10 { height: 10px; }
.sp { flex: 1 1 auto; }

/* ---------------------------------------------------------------- 5 components */
/* buttons: one dark primary per screen, the rest light; «.gold» only for the main call to action of a flow */
.btn { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; min-height: var(--ctl); padding: 0 var(--s4); border: 1px solid var(--fg); background: var(--fg); color: var(--bg); border-radius: 0; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; }
.btn:hover { opacity: .9; }
.btn.light { background: var(--card); color: var(--fg); border-color: var(--border); }
.btn.light:hover { border-color: var(--fg); opacity: 1; }
.btn.gold { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.danger { background: var(--card); color: var(--bad); border-color: var(--bad); }
.btn.sm { min-height: var(--ctl-sm); padding: 0 var(--s3); font-size: var(--fs-sm); }
.btn.auto, .pagehead .btn, .opts .btn { width: auto; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { background: none; border: 0; padding: var(--s2) 0; min-height: var(--ctl-sm); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.link:hover { color: var(--fg); }
.link.left { justify-self: start; }
.link.danger { color: var(--bad); }

/* fields */
.input { width: 100%; height: var(--ctl); border: 1px solid var(--border); background: var(--card); border-radius: 0; padding: 0 var(--s3); font-size: 16px; outline: none; }
@media (hover: hover) and (pointer: fine) { .input { font-size: 14px; } }
.input:focus { border-color: var(--primary); }
textarea.input, .ta { height: auto; padding: var(--s3); line-height: 1.35; resize: vertical; font-family: inherit; }
select.input { appearance: none; padding-right: 36px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7077' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
input[disabled].input, .input[disabled] { background: var(--bg); color: var(--muted); }
label.fld, div.fld { display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
label.fld .input, div.fld .input { font-weight: 400; color: var(--fg); }
.err { color: var(--bad); font-size: var(--fs-sm); margin: var(--s2) 0 0; }
.note { color: var(--muted); font-size: var(--fs-sm); margin: var(--s2) 0; }
.chk { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); min-height: var(--ctl-sm); }
.chk input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.opts { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0; }
.seg { display: flex; }
.seg button { flex: 1; min-height: var(--ctl); border: 1px solid var(--border); background: var(--card); font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.seg button + button { border-left: 0; }
.seg button[aria-pressed=true] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* chips (filters, toggles) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip, .cls-chip, .ch-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--ctl-sm); padding: 0 var(--s3); border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.chip:hover, .cls-chip:hover, .ch-chip:hover { border-color: var(--fg); }
.chip[aria-pressed=true], .cls-chip.on, .ch-chip.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.cls-chip .cls-n { color: inherit; opacity: .7; }

/* badges: a short status word */
.badge, .pp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 0 var(--s2); border: 1px solid var(--border); color: var(--muted); background: var(--card); vertical-align: middle; white-space: nowrap; }
.card .meta .badge { white-space: normal; max-width: 100%; }
.badge.ok, .pp-badge.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.badge.bad, .pp-badge.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.cp-dnc { display: inline-flex; padding: 0 6px; border: 1px solid var(--bad); color: var(--bad); background: var(--bad-bg); font-size: 11px; font-weight: 600; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.badge.gold { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.badge.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }

/* panels: a white block with a heading; .ph is its heading line (a title on the left, one small action on the right) */
.panel, .blk { background: var(--card); border: 1px solid var(--border); padding: var(--s3) var(--s4); margin-top: var(--s3); display: grid; gap: 10px; }
.ph, .blk > .bt, .panel > .bt { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0; font-size: var(--fs-md); font-weight: 700; }
.ph .btn, .ph .link { width: auto; flex: none; }
.ph .sub { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.prog .hint, .hint.ok, .hint.wait { font-size: var(--fs-sm); font-weight: 600; }
.hint.ok, .okline { color: var(--ok); }
.hint.wait { color: var(--primary); }

/* states: empty (what to do next), loading, error */
.empty { padding: var(--s5) var(--s4); border: 1px dashed var(--border); background: var(--card); text-align: center; color: var(--muted); font-size: var(--fs-sm); display: grid; gap: var(--s2); justify-items: center; }
.empty b { color: var(--fg); font-size: var(--fs-md); }
.loading { color: var(--muted); font-size: var(--fs-sm); padding: var(--s3) 0; }
.loading::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: var(--s2); border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.warnbox { border: 1px solid var(--warn); background: var(--warn-bg); padding: 10px var(--s3); font-size: var(--fs-sm); color: #7a4e0c; }
.aiwarn, .fitwarn { border: 1px solid var(--primary); background: var(--card); padding: 10px var(--s3); font-size: var(--fs-sm); flex-basis: 100%; }
.aiwarn ul { margin: 6px 0 0; padding-left: 18px; }
.aichk { border: 1px solid var(--border); background: var(--card); padding: 10px var(--s3); font-size: var(--fs-sm); display: grid; gap: 6px; }
.aichk.ok { border-color: var(--ok); background: var(--ok-bg); } .aichk.ok b { color: var(--ok); }
.aichk.bad { border-color: var(--bad); background: var(--bad-bg); } .aichk.bad b { color: var(--bad); }
.aichk.none { color: var(--muted); }
.aichk ul { margin: 0; padding-left: 18px; }
.aichk .muted { font-size: 12px; }
.prog { background: var(--card); border: 1px solid var(--border); padding: var(--s3); margin-top: 10px; }
.prog.bad { border-color: var(--bad); }
.prog.warn { border-color: var(--warn); background: var(--warn-bg); }
.prog.warn .warntxt { margin: 0; color: #7a4e0c; font-weight: 600; font-size: 14px; }
.prog .t { margin-top: 8px; font-size: var(--fs-sm); }
.prog .hint { margin-top: 8px; }
.steps { display: flex; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.steps span.on { color: var(--primary); font-weight: 700; }
.steps span.past { color: var(--fg); }
.bar { height: 6px; background: var(--border); margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s; }
.bar i.indet { width: 35%; animation: indet 1.2s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.tech { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
pre.tech { white-space: pre-wrap; margin: 6px 0 0; }
.conf { padding: var(--s3); display: grid; gap: var(--s2); border: 1px solid var(--bad); background: var(--card); }
.conf p { font-size: 14px; }
.vid .conf { border: 0; border-top: 1px solid var(--border); }

/* «Подробнее»: help and technical text is folded away, never a wall of text */
details.more { font-size: var(--fs-sm); color: var(--muted); }
details.more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-weight: 600; color: var(--muted); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--muted); border-radius: 50%; font-size: 11px; font-weight: 700; }
details.more[open] > summary { color: var(--fg); }
details.more > :not(summary) { margin-top: var(--s2); }
/* «Ещё»: the rare actions of a screen */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: var(--ctl-sm); padding: 0 var(--s3); border: 1px solid var(--border); background: var(--card); font-size: var(--fs-sm); font-weight: 700; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: '▾'; font-size: 11px; color: var(--muted); }
details.menu[open] > summary { border-color: var(--fg); }
details.menu .menu-list { position: absolute; z-index: 40; right: 0; top: calc(100% + 4px); min-width: 220px; display: grid; background: var(--card); border: 1px solid var(--fg); }
details.menu .menu-list > * { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--s3); border: 0; border-bottom: 1px solid var(--border); background: var(--card); font-size: var(--fs-sm); font-weight: 600; text-align: left; text-decoration: none; color: var(--fg); }
details.menu .menu-list > *:last-child { border-bottom: 0; }
details.menu .menu-list > *:hover { background: var(--bg); }
details.menu .menu-list .danger { color: var(--bad); }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 90; max-width: calc(100vw - 28px); padding: 10px var(--s4); background: var(--fg); color: var(--bg); font-size: var(--fs-sm); font-weight: 600; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .15s, transform .15s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bad); color: #fff; }

/* tables: .spec = key / value, .hlist = a list of rows with columns */
table.spec { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); border: 1px solid var(--border); }
table.spec td { padding: 8px var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
table.spec tr:last-child td { border-bottom: 0; }
table.spec td:first-child { width: 38%; color: var(--muted); font-size: var(--fs-sm); }
table.spec td:last-child { font-weight: 600; overflow-wrap: anywhere; }
.hlist { background: var(--card); border: 1px solid var(--border); }
.hrow { display: grid; grid-template-columns: 70px 90px 1fr 120px 150px 110px 230px; gap: var(--s3); align-items: center; padding: var(--s3) var(--pad); border-bottom: 1px solid var(--border); font-size: 14px; }
.hrow:last-child { border-bottom: 0; }
a.hrow:hover { background: var(--bg); }
.hrow.hh, .cls-hh { padding-top: 9px; padding-bottom: 9px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); background: var(--bg); }
.hrow .r { text-align: right; }
.hrow .c-n { font-weight: 700; }
.hrow .c-c small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.hrow.off .strike { text-decoration: line-through; color: var(--muted); }
.hrow.off .c-c small { color: var(--bad); }
.pp-filters { display: grid; grid-template-columns: 1fr; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
@media (min-width: 760px) { .pp-filters { grid-template-columns: 1fr 190px auto; } }
.pp-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); }
.pp-pager .btn { width: auto; min-width: 110px; }

/* dialogs: one overlay + one panel (the old .pp-ov / .cp-ov / .dlg and .pp-modal / .cp-modal / .dpanel names are the same thing) */
.ov, .pp-ov, .cp-ov, .dlg { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--pad) var(--pad); background: rgba(20, 22, 26, .45); overflow: auto; }
.modal, .pp-modal, .cp-modal { width: 100%; max-width: 480px; display: grid; gap: var(--s3); padding: var(--s4); background: var(--bg); border: 1px solid var(--border); font-size: var(--fs-md); color: var(--fg); }
.modal h2, .pp-modal h2, .cp-modal h2 { margin: 0; font-size: var(--fs-lg); }
.modal textarea.input, .pp-modal textarea.input, .cp-modal textarea.input { height: auto; padding: var(--s3); }
.modal .row .btn, .pp-modal .row .btn { width: 100%; }
.dlg { z-index: 40; padding: 0; align-items: stretch; background: rgba(0, 0, 0, .5); }
.dpanel { background: var(--bg); width: 100%; max-width: 680px; display: flex; flex-direction: column; min-height: 0; }
.dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--pad); border-bottom: 1px solid var(--border); background: var(--card); }
.dhead .x { width: 44px; height: 44px; flex: none; border: 1px solid var(--border); background: none; font-size: 26px; line-height: 1; }
.dbody { flex: 1; overflow-y: auto; padding: var(--s3) var(--pad) calc(24px + env(safe-area-inset-bottom)); display: grid; gap: var(--s3); align-content: start; }
.dbody h3 { margin: 10px 0 0; font-size: var(--fs-sm); font-weight: 700; }
.dbody p { margin: 0; }
@media (min-width: 700px) { .dlg { align-items: center; padding: var(--s5); } .dpanel { max-height: calc(100vh - 48px); border: 1px solid var(--border); } .ov, .pp-ov, .cp-ov { padding-top: 10vh; } }

/* cards of a result list */
.res { display: grid; gap: var(--s2); margin-top: var(--s1); }
.card { display: block; background: var(--card); border: 1px solid var(--border); padding: 10px var(--s3); }
a.card:hover, button.card:hover { border-color: var(--fg); }
.card:active { border-color: var(--primary); }
.card.has-av { display: flex; gap: var(--s3); align-items: flex-start; }
.card .body { flex: 1; min-width: 0; }
.card .nm { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.card .meta b { color: var(--fg); font-weight: 700; }
.av { position: relative; flex: none; width: 56px; height: 56px; border: 1px solid var(--border); background: #fff; }
.av img { width: 100%; height: 100%; object-fit: contain; display: block; }
.av.none { background: var(--bg); }
/* a larger preview on hover of any thumbnail (owner rule) */
@media (hover: hover) and (pointer: fine) {
  .av:hover img, .cover:not(.none):hover img { position: absolute; left: 0; top: 0; width: 240px; height: 240px; z-index: 10; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.18); object-fit: contain; }
  .cover:not(.none):hover img { width: 320px; height: 320px; }
}

/* ---------------------------------------------------------------- 6 screens */
/* login */
.login { max-width: 380px; margin: var(--s6) auto 0; padding: var(--s5) var(--s4); display: grid; gap: var(--s3); background: var(--card); border: 1px solid var(--border); }
.login h1 { text-align: left; font-size: var(--fs-xl); }
.login .btn.light { font-weight: 600; }

/* search */
.sbox { position: relative; }
.sbox .input { height: calc(var(--ctl) + 6px); padding-right: 48px; }
.sbox .x { position: absolute; right: 0; top: 0; width: 48px; height: calc(var(--ctl) + 6px); border: 0; background: none; font-size: 22px; color: var(--muted); }
.hist-list { display: grid; gap: var(--s2); }
.hist-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.card.hq { text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer; }
main:has(.sbox) { max-width: 860px; }

/* item card: what is it, where is it, media, tag, GIIS, site */
main:has(.item-page) { max-width: 720px; }
.item-page { display: grid; gap: 0; }
.cover { position: relative; display: block; width: 96px; height: 96px; padding: 0; border: 1px solid var(--border); background: #fff; cursor: zoom-in; }
.cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cover.none { cursor: default; background: var(--bg); color: var(--muted); font-size: 11px; }
.zoom { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.82); overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: var(--s4); cursor: zoom-out; }
.zoom img { width: 355px; max-width: none; height: auto; background: #fff; image-rendering: pixelated; }
.zoom.photo img { width: min(100%, 900px); image-rendering: auto; }
.stline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stg { display: inline-block; padding: 2px 10px; border: 1px solid var(--fg); font-size: var(--fs-sm); font-weight: 700; }
.stg.none { border-color: var(--border); color: var(--muted); font-weight: 600; }
.stg.in_stock, .stg.ready { border-color: var(--ok); color: var(--ok); }
.stg.late { border-color: var(--bad); color: var(--bad); }
.due { font-size: 14px; }
.due.bad { color: var(--bad); font-weight: 700; }
.due.soon { color: var(--warn); }
.item-page .stage { padding: 10px var(--s4); }
.vid { background: var(--card); border: 1px solid var(--border); }
.thumb { position: relative; display: block; width: 100%; background: #111; height: clamp(240px, 52vh, 440px); aspect-ratio: auto !important; overflow: hidden; border: 0; padding: 0; }
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #111; }
.thumb .play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.thumb .play::after { content: ''; margin-left: 5px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.vid .info { padding: 10px var(--s3) 0; font-size: var(--fs-sm); color: var(--muted); }
.sthumb { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 1px solid var(--border); background: #111; overflow: hidden; }
.sthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpanel { padding: 10px var(--s3) 0; display: grid; gap: 6px; }
.fpanel.busy { opacity: .6; }
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: start; }
@media (min-width: 700px) { .fgrid { grid-template-columns: repeat(6, 1fr); } }
.fcell { position: relative; display: grid; gap: 2px; justify-items: start; }
@media (hover: hover) and (pointer: fine) {
  .sthumb:hover { overflow: visible; z-index: 10; }
  .fcell:nth-child(6n+5) .sthumb:hover img, .fcell:nth-child(6n) .sthumb:hover img { left: auto; right: 0; }
  .sthumb:hover img { position: absolute; left: 0; top: 0; width: 200px; height: 356px; max-width: none; object-fit: contain; background: #111; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
}
.vid .sqrow { padding: 10px var(--s3) 0; display: flex; gap: var(--s3); align-items: center; }
.sqthumb { position: relative; flex: 0 0 72px; width: 72px; height: 72px; border: 1px solid var(--border); background: #111; }
.sqthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sqinfo { display: grid; gap: 6px; min-width: 0; }
.sqinfo .row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sqinfo .btn { white-space: nowrap; width: auto; flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
  .sqthumb:hover img { position: absolute; left: 0; top: 0; width: 240px; height: 240px; z-index: 10; max-width: none; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
}
.vid .acts { padding: 10px var(--s3) var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; }
.vid .acts .btn { flex: 1 1 120px; width: auto; }
.tagimg { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #111; border: 1px solid var(--border); }
.hist { display: flex; gap: var(--s2); overflow-x: auto; margin-top: var(--s2); }
.hist a { flex: none; width: 90px; font-size: var(--fs-xs); color: var(--muted); }
.hist img { display: block; width: 90px; height: 90px; object-fit: cover; border: 1px solid var(--border); }
.sitecard { display: flex; gap: var(--s3); align-items: flex-start; color: inherit; }
.sitecard .body { flex: 1; min-width: 0; }
.sitecard .nm { font-weight: 600; overflow-wrap: anywhere; }
.sitecard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: var(--fs-sm); }
details.specs { margin-top: var(--s3); background: var(--card); border: 1px solid var(--border); }
details.specs summary { padding: var(--s3) var(--s4); cursor: pointer; font-size: var(--fs-md); font-weight: 700; }
details.specs table.spec { border: 0; border-top: 1px solid var(--border); }
details.specs.reads { margin-top: 0; }
details.specs .note { padding: 0 var(--s4) 10px; }
/* facts of the item card: big tiles + the barcode as a picture (app.js factsBlock, barcode.js) */
.facts { margin-top: var(--s3); display: grid; gap: var(--s2); }
.facts .fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-items: stretch; }
.fact { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px var(--s3) 12px; background: var(--card); border: 1px solid var(--border); }
.fact .fl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fact .fv { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fact.price, .fact.wide { grid-column: 1 / -1; }
.fact.price { border-color: var(--fg); }
.fact.price .fv { font-size: 34px; }
.fact.txt .fv { font-size: 20px; line-height: 1.2; }
.fact.unmapped .fv { color: var(--warn); }
/* small barcode in the header of the card (owner 29.10.2026: «меньше и справа от цены и артикула») */
.ca-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s4); }
.ca-id { display: grid; gap: 6px; min-width: 0; }
.bcm { display: grid; gap: var(--s2); justify-items: end; }
.ca-side { display: grid; gap: var(--s2); justify-items: end; margin-left: auto; }
.ca-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); }
.ca-side .abtn.print { width: 160px; min-height: 44px; padding: 4px 8px; }
.bc { display: grid; justify-items: end; gap: 2px; }
.bc-svg { display: block; width: 160px; height: 40px; }
.bc-n { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
@media (min-width: 560px) { .facts .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fact.price, .fact.wide:not(.purpose) { grid-column: auto; } .fact.last3 { grid-column: 1 / -1; } .fact.last2 { grid-column: span 2; } }
#purposeSlot:empty { display: none; }

.cprice { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 32px; line-height: 1.05; }
/* ---- item card (owner 29.10.2026: layout «Витрина», media modest): the photo and the thumbnails are small, the data takes the width */
.item-page { display: grid; gap: var(--s3); }
.item-page > div { min-width: 0; }
.item-page h1 { margin: 0; font-size: var(--fs-lg); }
.item-page .cover { margin: 0; }
.ca-info { display: grid; gap: var(--s3); align-content: start; }
.ca-info > .abar, .ca-info > .pm, .ca-info .facts { margin: 0; }
/* phone: the photo + the video + the tag in one row of small squares (the media strip dissolves into this grid), the progress boxes take the next row */
.ca-cover { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); gap: var(--s2); align-items: start; }
.ca-cover .mstrip { display: contents; }
.ca-cover .mt .mcap { padding: 3px 5px; font-size: 11px; }
.ca-cover .mt .mdur { right: 4px; top: 4px; font-size: 11px; }
.ca-cover .mt.add b { font-size: 14px; }
.ca-cover .mt.add span { font-size: 11px; }
@media (min-width: 900px) {
  main:has(.item-page) { max-width: 1120px; }
  .item-page { grid-template-columns: 280px minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
  .ca-cover { grid-template-columns: 1fr; }
  .ca-cover .cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .ca-cover .mstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 116px)); gap: var(--s2); }
  .ca-cover .mstrip > #prog-video, .ca-cover .mstrip > #prog-tag { grid-column: 1 / -1; }
  .cprice { font-size: 36px; }
  .bc-svg { width: 190px; }
  .ca-side .abtn.print { width: 190px; }
}

/* media panels of the item card: header strip, content edge to edge */
.panel.media { padding: 0; gap: 0; }
.panel.media > .ph { padding: 10px var(--s4); border-bottom: 1px solid var(--border); min-height: 48px; }
.panel.media .vid { border: 0; border-bottom: 1px solid var(--border); }
.panel.media .vid:last-child { border-bottom: 0; }
.panel.media .empty { border: 0; }
.panel.media .tagimg { border: 0; max-height: 380px; }
.panel.media .pbody { padding: var(--s3) var(--s4); display: grid; gap: var(--s2); }
.panel.media #prog-video:not(:empty), .panel.media #prog-tag:not(:empty) { padding: 0 var(--s3) var(--s3); }

/* GIIS and UIN block */
.giis-age { font-weight: 600; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); background: var(--card); }
.giis-age.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.giis-age.warn { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
.giis-fresh { display: grid; gap: 6px; }
.uinblk .urow { display: grid; gap: var(--s2); }
.unum { font-weight: 700; font-size: var(--fs-md); overflow-wrap: anywhere; }
.ustat { display: inline-block; justify-self: start; padding: 4px 10px; border: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--muted); }
.ustat.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.ustat.warn { border-color: var(--warn); color: #8a5a0c; background: var(--warn-bg); }
.ustat.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.uinblk .note { margin: 0; }
.uinblk .kids { display: grid; gap: 2px; color: var(--muted); }
.cand { display: grid; gap: 4px; text-align: left; width: 100%; padding: 10px var(--s3); border: 1px solid var(--border); background: var(--card); font: inherit; color: inherit; }
.cand:hover, .cand:active { border-color: var(--primary); }
.cand .nm { font-weight: 600; overflow-wrap: anywhere; }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.confirm { display: grid; gap: 10px; border: 1px solid var(--primary); background: var(--card); padding: var(--s3); }
.confirm h3 { margin: 0; font-size: var(--fs-sm); font-weight: 700; }
.findbtn { flex: 0 0 110px; }

/* tag screen: history of variants, form + live preview */
main:has(#tag-h1) { max-width: 720px; }
.tag-item { margin: 4px 0 var(--s3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.f { display: grid; gap: 6px; }
.fl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.fl .lim { font-weight: 400; font-size: var(--fs-xs); }
.fl .mk { margin-left: auto; color: var(--primary); font-weight: 700; font-size: 12px; }
.fl .mk .link { padding: 0 0 0 6px; min-height: 0; font-size: 12px; color: var(--primary); }
.fl .tplbtn { padding: 0; min-height: 0; font-size: 12px; color: var(--primary); font-weight: 700; text-decoration: none; }
.f.edited .input { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.f.over .input { border-color: var(--bad); }
.f.over .lim { color: var(--bad); font-weight: 700; }
.tagform { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.tagscreen { display: grid; gap: var(--s4); }
.pv { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.pv figure { margin: 0; flex: 1 1 0; min-width: 0; max-width: 355px; }
.pv figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
.pv .pvimg { display: block; width: 100%; height: auto; aspect-ratio: 355 / 591; background: #fff; border: 1px solid var(--border); cursor: zoom-in; transition: opacity .15s; }
.pv .pvimg:not([src]) { visibility: hidden; }
.pv.busy .pvimg { opacity: .55; }
.pv .err { flex-basis: 100%; }
.tlist { display: grid; gap: var(--s2); }
.tplmenu { border: 1px solid var(--border); background: #fff; margin-top: 6px; display: flex; flex-direction: column; }
.tplmenu .tpl { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer; font: inherit; }
.tplmenu .tpl:hover { background: var(--primary-bg); }
.tplmenu .tpl span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: pre-wrap; }
.tplmenu .note, .tplmenu .err { padding: 6px 10px; margin: 0; }
.vcard { display: flex; gap: var(--s3); align-items: flex-start; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.vcard .body { flex: 1; min-width: 0; }
.vthumb { position: relative; flex: none; width: 54px; height: 90px; border: 1px solid var(--border); background: #fff; }
.vthumb img { width: 100%; height: 100%; display: block; }
@media (hover: hover) and (pointer: fine) {
  .vthumb:hover img { position: absolute; left: 0; top: 0; width: 237px; height: 394px; z-index: 10; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
}
.vsum { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.vhead { display: grid; gap: 2px; font-size: 14px; }
.vhead .note { margin: 6px 0 0; }
.failed { border: 1px solid var(--border); background: var(--card); margin-top: var(--s3); font-size: var(--fs-sm); }
.failed summary { padding: 10px var(--s3); cursor: pointer; color: var(--muted); }
.failed .frow { padding: 8px var(--s3); border-top: 1px solid var(--border); display: grid; gap: 2px; }
.failed .link { justify-self: start; min-height: 32px; padding: 4px 0; }
.helper { display: grid; gap: 6px; }
.helper .prog { display: grid; gap: var(--s2); margin-top: 0; }
@media (min-width: 900px) {
  main:has(#tag-h1) { max-width: 1120px; }
  main:has(#tag-h1) .tlist { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .tagscreen { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; column-gap: var(--s5); }
  .tagscreen .tagpv { order: 2; position: sticky; top: calc(var(--top-h) + var(--s3)); }
  .tagscreen .tagform { order: 1; }
}

/* tags queue */

/* order status chip (kanban, prepayments, statuses) */
.schip { --c: #999999; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 10px 2px 7px; border: 1px solid var(--c); background: #fff; color: var(--fg); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
@supports (color: color-mix(in srgb, red 10%, white)) { .schip { border-color: color-mix(in srgb, var(--c) 55%, #fff); background: color-mix(in srgb, var(--c) 13%, #fff); } }
.schip svg { flex: none; color: var(--c); }
.schip .schip-name { overflow: hidden; text-overflow: ellipsis; }
.schip.off { opacity: .55; }
.schip.none { --c: #c9ccd0; color: var(--muted); font-weight: 400; padding-left: 10px; }
.pp-ord { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: var(--fs-sm); }
a.pp-ord:hover { text-decoration: underline; }
.pp-warn { color: var(--primary); font-size: 14px; font-weight: 600; }
.pp-dry { margin: 0 0 var(--s3); padding: 8px var(--s3); border: 1px solid var(--primary); color: var(--fg); font-size: var(--fs-sm); background: var(--primary-bg); }
.pp-fail { max-width: 560px; padding: var(--s4); border: 1px solid var(--border); background: var(--card); }
.pp-miss { margin: 0 0 6px; font-size: var(--fs-md); font-weight: 700; }
.pp-cancelnote { margin: 0; padding: 10px var(--s3); border: 1px solid var(--bad); background: var(--bad-bg); color: var(--bad); font-size: 14px; }
.pp-orderbox { display: grid; gap: var(--s2); padding: var(--s3) var(--pad); border: 1px solid var(--border); background: var(--card); }
.pp-orderbox .lab, .pp-first .lab { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.pp-orderbox .btn { width: auto; justify-self: start; }
.pp-first { display: grid; gap: 6px; }

/* client view, «История изменений» */
.cl-h { margin: var(--s5) 0 var(--s2); font-size: var(--fs-md); font-weight: 700; color: var(--fg); }
.cl-list .cl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s4); padding: 10px var(--pad); border-bottom: 1px solid var(--border); font-size: 14px; }
.cl-list .cl-row:last-child { border-bottom: 0; }
.cl-list a.cl-row:hover { background: var(--bg); }
.cl-list .cl-row.off .strike { text-decoration: line-through; color: var(--muted); }
.cl-list .r { margin-left: auto; }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.cl-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cl-head .cl-edit { width: auto; flex: none; }
.ch { background: var(--card); border: 1px solid var(--border); }
.ch > .note, .ch > .link { margin: 0; padding: var(--s3) var(--pad); display: block; }
.ch-off { margin: 0; padding: var(--s3) var(--pad) 0; font-weight: 700; }
.ch-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--pad); border-bottom: 1px solid var(--border); background: var(--bg); }
.ch-chips { display: flex; }
.ch-chips .ch-chip { margin-left: -1px; }
.ch-chips .ch-chip:first-child { margin-left: 0; }
.ch-tz { font-size: 12px; }
.ch-e { padding: 10px var(--pad); border-bottom: 1px solid var(--border); font-size: 14px; }
.ch-e:last-child { border-bottom: 0; }
.ch-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); }
.ch-t { color: var(--muted); font-size: var(--fs-sm); }
.ch-w { font-weight: 700; }
.ch-ai, .ch-new { padding: 0 6px; border: 1px solid var(--primary); color: var(--primary); font-size: var(--fs-xs); font-weight: 700; align-self: center; }
.ch-new { border-color: var(--border); color: var(--muted); }
.ch-c { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.ch-c li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.ch-l { flex: none; min-width: 120px; color: var(--muted); font-size: 12px; }
.ch-v { overflow-wrap: anywhere; }
.ch-c .ch-v:not(b) { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.ch-c .ch-v.solo { text-decoration: none; color: var(--fg); }
.ch-none { color: var(--muted); font-size: var(--fs-sm); }
.ch-arr { color: var(--muted); }
.ch-to { min-width: 0; overflow-wrap: anywhere; }
.ch-n { margin: 4px 0 0; }
.ch-e.ai { background: #fffaf5; }

/* print preview screen of the tags */
.upd-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: #1d2024; color: #fff; display: flex; gap: var(--s3); align-items: center; justify-content: space-between; padding: var(--s3) var(--pad) calc(12px + env(safe-area-inset-bottom)); font-weight: 600; }
.upd-banner .btn { background: var(--primary); border-color: var(--primary); color: #fff; width: auto; }

/* scanner */
.scan { position: fixed; inset: 0; z-index: 130; background: #000; display: flex; flex-direction: column; color: #fff; }
.scan video { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.scan .frame { position: absolute; left: 10%; right: 10%; top: 22%; height: 26%; border: 2px solid var(--primary); pointer-events: none; }
.scan .panel { background: #111; padding: var(--s3) var(--pad) calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 10px; border: 0; margin: 0; }
.scan .msg { font-size: var(--fs-sm); min-height: 20px; }
.scan .input { height: 48px; background: #fff; color: #111; }
.scan form { display: flex; gap: var(--s2); }
.scan form .btn { width: 120px; }
.scan .btn.light { background: transparent; color: #fff; border-color: #555; }

@media print { html, body { background: #fff !important; } .noprint, .top { display: none !important; } }

/* ---------------------------------------------------------------- 7 phone adjustments */
@media (max-width: 700px) {
  .appbar .brand b { display: none; }
  .appbar .brand img { display: block; }
  .nav { padding: 0; }
  .nav .logo { display: none; }
  .nav a.t { flex: 1 1 0; justify-content: center; padding: 0 2px; font-size: 12.5px; }
  /* the tabs flagged `more` in shell.js NAV move into the «Ещё ▾» menu */
  .nav a.t.more { display: none; }
  .nav .more-wrap { display: flex; flex: 1 1 0; position: static; }
  .appbar .who span { max-width: 36vw; }
}
@media (max-width: 380px) { .nav a.t { font-size: 12px; } }
@media (max-width: 700px) { .subnav { flex-wrap: nowrap; gap: 6px; } .subnav a { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 12.5px; white-space: nowrap; } }
@media (max-width: 899px) {
  .hrow.hh, .cls-hh { display: none; }
  .hrow { grid-template-columns: 1fr auto; grid-template-areas: "c s" "n t" "d k" "o o"; gap: 4px var(--s3); }
  .hrow .c-n { grid-area: n; } .hrow .c-c { grid-area: c; } .hrow .c-s { grid-area: s; } .hrow .c-d { grid-area: d; color: var(--muted); font-size: 12px; }
  .hrow .c-k { grid-area: k; color: var(--muted); font-size: 12px; text-align: right; overflow-wrap: anywhere; } .hrow .c-t { grid-area: t; text-align: right; } .hrow .c-o { grid-area: o; }
  .hrow .c-o:empty { display: none; }
}
@media (max-width: 560px) { .ch-l { flex-basis: 100%; min-width: 0; } .ch-bar { flex-wrap: wrap; } }
.tagrep { display: grid; gap: 4px; }
.tagrep p { margin: 0; }

/* ---- Action bar of the item card + UIN picker + weight / accept dialogs (owner 28.10.2026). One grouped block: deploy it as one hunk. ---- */
.abar { display: grid; gap: var(--s2); margin: var(--s3) 0 var(--s1); }
.abtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.abtn { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 60px; padding: 6px var(--s2); border: 1px solid var(--border); background: var(--card); color: var(--fg); border-radius: 0; font: inherit; text-align: center; min-width: 0; }
.abtn:hover, .abtn:active { border-color: var(--fg); }
.abtn.print { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.abtn .al { font-size: 14px; font-weight: 700; line-height: 1.2; }
.abtn .as { max-width: 100%; font-size: 12px; line-height: 1.2; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abtn.print .as { color: rgba(255, 255, 255, .72); }
.abtn .as.ok { color: var(--ok); font-weight: 600; }
.abtn .as.warn, .abtn.print .as.warn { color: var(--warn); font-weight: 600; }
.abtn.print .as.warn { color: #ffd089; }
.abar .abig { width: 100%; }
@media (min-width: 900px) { .abtn { min-height: 56px; } .abar { margin-top: var(--s4); } }
/* UIN picker: sticky search, rows with UIN + weight on one line */
.psearch { position: sticky; top: 0; z-index: 2; padding: var(--s1) 0 var(--s2); background: var(--bg); }
.cand .ctop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.cand .cw { font-weight: 700; white-space: nowrap; }
.cand .cst { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); }
.cand .cst .ustat { padding: 1px 8px; font-size: 12px; }
.cand.off { opacity: .6; cursor: default; }
.cand.off:hover { border-color: var(--border); }
.small.bad { color: var(--bad); font-weight: 600; }
details.manual { background: var(--card); border: 1px solid var(--border); padding: var(--s3); display: grid; gap: var(--s2); }
details.manual summary { cursor: pointer; font-weight: 600; min-height: 28px; }
details.manual[open] summary { margin-bottom: var(--s2); }
/* weight and accept dialogs */
.unit { display: flex; align-items: center; gap: var(--s2); }
.unit b { font-size: var(--fs-md); }
.gw { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border: 1px solid var(--ok); background: var(--ok-bg); padding: 10px var(--s3); }
.warnv { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--warn); font-weight: 700; }
.dbody > :empty:not(.inf-tail) { display: none; } /* the empty sentinel of infinite.js must stay rendered, else the observer never fires */
/* test mode strip under the orange bar (shell.js, `me.test_mode`) */
.testbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 var(--s1); min-height: 26px; padding: 2px var(--pad); background: var(--warn-bg); border-bottom: 1px solid var(--warn); color: #8a5a0c; font-size: 12px; line-height: 1.3; text-align: center; }
/* metal ball next to a colour (metal.js; the mirror balls of the site) */
.mball { position: relative; isolation: isolate; display: inline-block; flex: none; border-radius: 50%; vertical-align: middle; }
.mball img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.mball::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -14%; height: 26%; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgb(34 24 12 / .5), rgb(34 24 12 / 0) 70%); pointer-events: none; }
.mball.dark { background: radial-gradient(circle at 35% 30%, #6b6b6b, #1d1d1f 62%, #000); }
.fact .cols { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* DataMatrix next to the UIN: small in the line of the card, 120 px in the UIN dialog */
.dm { display: block; flex: none; background: #fff; image-rendering: pixelated; }
.uinblk .uhead { display: flex; align-items: center; gap: var(--s3); }
.uinblk .uhead .dm { width: 120px; height: 120px; border: 1px solid var(--border); }
.uinblk .uhead .ut { display: grid; gap: var(--s2); min-width: 0; }
/* media strip of the card (app.js mediaStrip): two thumbnails + progress; the full panels open in a dialog */
.mstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: var(--s2); align-items: stretch; }
.mstrip > #prog-video, .mstrip > #prog-tag { grid-column: 1 / -1; }
.mstrip > #prog-video:empty, .mstrip > #prog-tag:empty { display: none; }
.mt { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 1px solid var(--border); background: #111; color: #fff; cursor: pointer; }
.mt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt .mplay { position: absolute; left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.mt .mplay::after { content: ''; position: absolute; left: 13px; top: 9px; border-left: 11px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.mt .mdur { position: absolute; right: 6px; top: 6px; padding: 1px 6px; background: rgba(0, 0, 0, .65); font-size: 12px; font-weight: 700; }
.mt .mcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px; background: rgba(0, 0, 0, .62); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: left; }
.mt .mcap.ok { background: rgba(47, 143, 91, .92); }
.mt .mcap.bad { background: rgba(200, 50, 31, .92); }
.mt .mcap.wait { background: rgba(183, 121, 31, .92); }
.mt.add { display: grid; align-content: center; justify-items: center; gap: 2px; border: 1px dashed var(--muted); background: var(--card); color: var(--fg); }
.mt.add b { font-size: 16px; }
.mt.add span { font-size: 12px; color: var(--muted); }
.dlg.mediadlg .dbody { align-content: start; }
.ca-cover { display: grid; gap: var(--s2); align-content: start; }
/* the top of the card is the article (owner 29.10.2026: no composed title) */
.item-page h1.cart { display: flex; align-items: baseline; gap: var(--s2); font-size: 28px; font-weight: 800; line-height: 1.1; }
.item-page h1.cart small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
/* item parameters (itemparams.js, default prefix .ip-): line 1 category + brand, line 2 collection + model, chips */
.ip-l1 { font-weight: 700; overflow-wrap: anywhere; }
.ip-l2 { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ip-cs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.ip-ch { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; min-height: 20px; border: 1px solid var(--border); background: var(--card); font-size: 12px; font-weight: 600; }
.ip-ch.balls { gap: 2px; padding: 0 4px; }
/* the star of the 750 purity (itemparams.js SkladItem.purity): small, gold */
.pstar { color: #c49a1a; font-size: .9em; margin-left: 1px; }
.ip-cc { display: inline-flex; align-items: center; gap: 2px; }
/* «Назначение и этап»: one block (app.js purposeStageBlock; the purpose part comes from purpose.js without its own frame) */
.pm { gap: var(--s2); padding: var(--s3); }
.pm.unset { border-color: var(--warn); background: var(--warn-bg); }
.pm .pu-sec { margin: 0; }
.pm .fact.purpose, .pm .fact.purpose.unset, .pm .fact.purpose.sold { border: 0; background: none; padding: 0; gap: 4px; }
.pm .fact.purpose .fl { display: none; }
.pm .fact.purpose .fv { font-size: 20px; }
.pm .pu-bare .fv { font-size: 20px; }
.pm.unset .pu-bare .fv { color: var(--warn); }
.pm .fact.purpose .pu-line:empty { display: none; }
.pm-stage { display: grid; gap: 2px; padding-top: var(--s2); border-top: 1px solid var(--border); }
.pm-stage .stline { gap: 4px 10px; }
.pm-stage .note { margin: 0; }
.pm-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pm-btns .btn { width: auto; flex: 1 1 auto; }
.pm-btns .pu-confirm { flex: 1 1 100%; display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--border); background: var(--bg); }
.pm-btns .pu-confirm .row { display: flex; gap: var(--s2); }
.pm-btns .pu-confirm .row > * { flex: 1 1 0; width: auto; }
/* the UIN tile of the action bar is the GIIS block when a UIN is linked: DataMatrix + number + status + freshness (app.js actionBar) */
.abtn.w .as { font-size: 22px; font-weight: 700; line-height: 1.1; }
.abtns { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* УИН | Вес */
.abtns.uinwide { grid-template-columns: minmax(0, 1fr); }  /* phone: the UIN block and the weight each take a row */
@media (max-width: 559px) { .abtns.uinwide .abtn.w { grid-auto-flow: column; justify-content: space-between; justify-items: start; min-height: 48px; padding: 0 var(--s3); } }
.abtn.uin.wide { display: flex; align-items: center; justify-content: flex-start; gap: var(--s3); padding: 8px var(--s3); text-align: left; }
.abtn.uin .uin-dm { display: flex; gap: var(--s2); flex: none; }
.abtn.uin .uin-dm .dm { width: 56px; height: 56px; border: 1px solid var(--border); }
.abtn.uin .uin-tx { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.abtn.uin .gl-r { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); }
.abtn.uin .gl-r b { font-size: var(--fs-md); overflow-wrap: anywhere; }
.abtn.uin .ustat { padding: 1px 8px; font-size: 12px; }
.abtn.uin .giis-age { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; }
@media (min-width: 560px) {
  .abtns.uinwide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.abtn.print .as.p2 { white-space: normal; text-align: center; font-size: 11px; }
.abtn .as:empty { display: none; }
/* stock badge: liquid-glass capsule (glass.css .schip; the tint comes from --c) */
.schip.sb { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 9px; font-size: 13px; font-weight: 700; color: var(--fg); white-space: nowrap; }
.schip.sb.ok { --c: #2f8f5b; } .schip.sb.warn { --c: #e0a02c; } .schip.sb.bad { --c: #c8321f; }
.schip.sb .sdot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.abtn.uin .gf { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.abtn.uin .gf .warn { color: #b05a00; font-weight: 700; }
/* «Камни»: our stone accounting vs GIIS (app.js stonesBlock) */
.blk.stones { padding: var(--s3); gap: 6px; margin: 0; }
.blk.stones .bt { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stones .st-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); font-size: var(--fs-lg); }
.stones .st-sum .warn { color: #b05a00; }
.stones .st-rows { display: grid; gap: 2px; font-size: 13px; }
.stones .st-r { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.stones .st-g { font-size: 13px; font-weight: 600; }
.stones .st-g.warn { color: #b05a00; font-weight: 700; }
/* «Действия»: the preset buttons of the card as liquid-glass chips (app.js actionsBlock) */
.blk.acts { padding: var(--s3); gap: var(--s2); margin: 0; }
.blk.acts .bt { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.blk.acts .bt .small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.acts-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.act-btn { border: 0; background: none; padding: 0; cursor: pointer; }
.act-btn .schip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 14px 4px 11px; font-size: 14px; font-weight: 700; color: var(--fg); }
.act-btn:active .schip, .act-btn:hover .schip { filter: brightness(.97); }