/* Pervichka · цвета продукта и оформление результата: «фото» документа с рамками полей и форма 1С.
   Всё внутри снимка в cqw от его ширины (511 px на экране 1440 = 100cqw), чтобы метки масштабировались вместе с листом. */
:root {
  --brand: #1f4e5f; --brand-2: #2e7189; --brand-ink: #173c49; --brand-soft: #e8f1f3; --brand-line: #c8dce2;
  --accent: #e5989b; --accent-soft: #fcefef; --accent-ink: #9e3b47;
}
.pk { display: flex; flex-direction: column; gap: 12px; }

/* что агент понял из сообщения */
.pk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 31px; }
.pk-chips-l { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.pk-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); }
.pk-chip.c2 { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 65%, transparent); }

.pk-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* снимок: стол, лист, тень, рамки, штамп */
.pk-sw { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); white-space: nowrap; }
.pk-sh .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pk-sh .st { color: var(--good-ink); }
.pk-shot { position: relative; container-type: inline-size; padding: 2.4%; border-radius: 12px; overflow: hidden; border: 1px solid var(--brand-line); --scan-h: 400px; }
.pk-shot.pdf { background: #e6e9ec; }
.pk-desk.w-h { position: absolute; inset: 0; z-index: 0; opacity: 1; transform: none;
  background:
    repeating-linear-gradient(101deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(101deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 29px),
    radial-gradient(130% 110% at 22% 12%, #3f6d7d, #1f4e5f 48%, #10303a);
  transition: opacity 1s .4s var(--ease); }
.pk-desk.w-h.in { opacity: 0; }
.pk-tilt.w-h { position: relative; z-index: 1; opacity: 1;
  transform: perspective(1100px) rotateX(15deg) rotateY(-5deg) rotateZ(-7deg) scale(.82) translateY(1.5%);
  filter: drop-shadow(0 2.6cqw 2.2cqw rgba(4, 18, 24, .62));
  transition: transform 1.45s cubic-bezier(.55, 0, .2, 1), filter 1.45s ease; }
.pk-tilt.w-h.in { transform: none; filter: drop-shadow(0 0 0 rgba(4, 18, 24, 0)); }
.pk-shot.chek .pk-tilt.w-h { transform: perspective(1100px) rotateX(10deg) rotateY(6deg) rotateZ(10deg) scale(.86); }
.pk-shot.chek .pk-tilt.w-h.in { transform: none; }
.pk-shot.pdf .pk-tilt.w-h { opacity: 0; transform: scale(.97); filter: drop-shadow(0 .5cqw 1.2cqw rgba(20, 30, 40, .2)); transition: opacity .5s, transform .5s; }
.pk-shot.pdf .pk-tilt.w-h.in { opacity: 1; transform: none; }
.pk-shade.w-h { position: absolute; inset: 0; z-index: 2; opacity: 1; transform: none; pointer-events: none;
  background:
    radial-gradient(75% 65% at 100% 100%, rgba(10, 22, 28, .55), transparent 70%),
    linear-gradient(112deg, rgba(255, 246, 225, .16) 0%, transparent 38%, rgba(10, 22, 28, .22) 100%);
  transition: opacity .9s .5s var(--ease); }
.pk-shade.w-h.in { opacity: 0; }
.pk-shot.chek .pk-shade.w-h { background:
    linear-gradient(171deg, transparent 17%, rgba(0, 0, 0, .14) 18.5%, rgba(255, 255, 255, .5) 20%, transparent 23%),
    linear-gradient(7deg, transparent 50%, rgba(0, 0, 0, .13) 51.5%, rgba(255, 255, 255, .45) 53%, transparent 56%),
    linear-gradient(176deg, transparent 72%, rgba(0, 0, 0, .12) 73.5%, rgba(255, 255, 255, .4) 75%, transparent 78%),
    radial-gradient(90% 60% at 100% 100%, rgba(10, 22, 28, .5), transparent 72%); }
.pk-shot .w-scan { z-index: 4; }
.pk-ov { position: absolute; inset: 0; z-index: 3; }

/* бумага, чеки, чернила (на снимке и в фото переписки) */
.pk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pk-svg text { font-family: Arial, "Liberation Sans", "Helvetica Neue", Helvetica, sans-serif; fill: #1e2528; }
.pk-svg .b { font-weight: 700; }
.pk-svg .g { fill: #6e797d; }
.pk-svg .g2 { fill: #4c575b; }
.pk-svg .pk-m { font-family: Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace; fill: #2b2b2b; }
.pk-svg .pk-hw { font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; fill: #2546a8; font-weight: 700; }
.pk-pp { fill: #fdfdfb; stroke: #d3d9da; stroke-width: 1; }
.pk-ln { fill: none; stroke: #3a444a; stroke-width: .9; }
.pk-ln2 { fill: none; stroke: #3a444a; stroke-width: 1.2; }
.pk-th { fill: #edf0f0; }
.pk-grid { fill: none; stroke: #8f9a9e; stroke-width: .6; }
.pk-sl { fill: none; stroke: #6e797d; stroke-width: .7; }
.pk-ink { fill: none; stroke: #2546a8; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pk-seal { opacity: .8; }
.pk-seal circle { fill: none; stroke: #3554b0; }
.pk-svg .pk-seal text { fill: #3554b0; font-weight: 700; }
.pk-rc { fill: #fffefa; stroke: #d8d2c2; stroke-width: .7; }
.pk-dash { fill: none; stroke: #8a8a8a; stroke-width: .8; stroke-dasharray: 2.5 2; }
.pk-qr { fill: #262626; shape-rendering: crispEdges; }
.pk-qrb { fill: #fff; }
.pk-tape { fill: rgba(236, 240, 226, .62); stroke: rgba(170, 175, 150, .45); stroke-width: .6; }

/* рамка поля: полупрозрачная заливка и четыре уголка видоискателя, метка с уверенностью */
.pk-fr { position: absolute; --k: 1.5cqw; --s: .42cqw; border-radius: .4cqw;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--k) var(--s), linear-gradient(var(--c) 0 0) left top / var(--s) var(--k),
    linear-gradient(var(--c) 0 0) right top / var(--k) var(--s), linear-gradient(var(--c) 0 0) right top / var(--s) var(--k),
    linear-gradient(var(--c) 0 0) left bottom / var(--k) var(--s), linear-gradient(var(--c) 0 0) left bottom / var(--s) var(--k),
    linear-gradient(var(--c) 0 0) right bottom / var(--k) var(--s), linear-gradient(var(--c) 0 0) right bottom / var(--s) var(--k),
    color-mix(in srgb, var(--c) 14%, transparent);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 .14cqw color-mix(in srgb, var(--c) 50%, transparent); }
.pk-fr.x { --s: .5cqw; background-color: color-mix(in srgb, var(--c) 17%, transparent); box-shadow: 0 0 0 .3cqw var(--c); }
.pk-tg { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: .7cqw; white-space: nowrap; font-style: normal;
  font: 700 2.45cqw/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; background: var(--c);
  padding: .45cqw 1.05cqw .5cqw; border-radius: .8cqw; box-shadow: 0 .2cqw .7cqw rgba(0, 0, 0, .2); }
.pk-tg b { font-weight: 800; padding-left: .7cqw; border-left: .15cqw solid rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.pk-tg.t { bottom: calc(100% + .45cqw); left: -.15cqw; }
.pk-tg.tr { bottom: calc(100% + .45cqw); right: -.15cqw; }
.pk-tg.b { top: calc(100% + .45cqw); left: .5cqw; }
.pk-tg.br { top: calc(100% + .45cqw); right: .5cqw; }
.pk-tg.ri { left: calc(100% + .9cqw); top: 50%; translate: 0 -50%; }
.pk-tg.li { right: calc(100% + .9cqw); top: 50%; translate: 0 -50%; }
.pk-tg.bl { top: calc(100% + .45cqw); right: calc(100% - 3cqw); }
.pk-tg.in { right: .6cqw; top: 50%; translate: 0 -50%; }
.pk-tg.l { right: calc(100% + 3.6cqw); top: 50%; translate: 0 -50%; }
.pk-tg.r { left: calc(100% + 3.6cqw); top: 50%; translate: 0 -50%; }
.pk-ld { position: absolute; top: 50%; width: 3.6cqw; border-top: .3cqw solid var(--c); }
.pk-ld.l { right: 100%; }
.pk-ld.r { left: 100%; }

/* штамп агента на снимке */
.pk-stamp { position: absolute; z-index: 5; right: 3.6cqw; bottom: 3.2cqw; --rot: -7deg; display: flex; flex-direction: column; align-items: center; gap: .2cqw;
  padding: 1cqw 2.6cqw 1.1cqw; border: .62cqw solid var(--st); border-radius: 1.6cqw; color: var(--st); background: rgba(255, 255, 255, .9);
  text-transform: uppercase; pointer-events: none; box-shadow: inset 0 0 0 .4cqw color-mix(in srgb, var(--st) 22%, transparent); }
.pk-stamp.w-stamp:not(.in) { transform: rotate(var(--rot)) scale(1.45); }
.pk-stamp b { font-size: 3.2cqw; font-weight: 850; letter-spacing: .07em; line-height: 1.1; }
.pk-stamp span { font-size: 2.25cqw; font-weight: 700; letter-spacing: .05em; }
.pk-stamp.bad { --st: #c62f3b; }
.pk-stamp.warn { --st: #b06900; }
.pk-stamp.ok { --st: #15803d; }

/* форма 1С: поля в цветах рамок, замечание, проводки, итог */
.pk-1c { position: relative; container-type: inline-size; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #d6dcda;
  border-radius: 12px; box-shadow: 0 10px 24px -16px rgba(23, 60, 73, .5); overflow: hidden; }
.pk-1h { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: linear-gradient(180deg, #fbfcfb, #f1f4f3); border-bottom: 1px solid #e2e6e4; }
.pk-logo { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #ffd84d; color: #6e1a12; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1); }
.pk-1t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pk-1t b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-1t small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-fs { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 5px 10px; padding: 10px 14px 0; }
.pk-f { display: contents; }
.pk-fl { font-size: 13px; color: var(--muted); }
.pk-fv { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 31px; padding: 3px 6px 3px 11px; border: 1px solid #cfd6d4;
  border-radius: 6px; background: #fff; overflow: hidden; }
.pk-fv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.pk-fx { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-ok { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.pk-ok.ok { color: var(--good-ink); background: var(--good-soft); }
.pk-ok.warn { color: var(--warn-ink); background: var(--warn-soft); }
.pk-ok.bad { color: var(--bad-ink); background: var(--bad-soft); }
.pk-x { display: flex; align-items: center; gap: 10px; margin: 9px 14px 0; padding: 8px 12px; border-radius: 10px; }
.pk-x > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pk-xt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-xt b { font-size: 14.5px; line-height: 1.25; }
.pk-xt small { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.pk-x em { flex: none; font-style: normal; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.pk-x.bad { background: var(--bad-soft); color: var(--bad-ink); box-shadow: inset 4px 0 0 var(--bad); }
.pk-x.warn { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 4px 0 0 var(--warn); }
.pk-x.ok { background: var(--good-soft); color: var(--good-ink); box-shadow: inset 4px 0 0 var(--good); }
.pk-x.in { animation: pk-ring 1.4s var(--ease) .15s; }
@keyframes pk-ring { 0% { outline: 0 solid transparent; } 25% { outline: 4px solid color-mix(in srgb, currentColor 25%, transparent); outline-offset: 1px; } 100% { outline: 4px solid transparent; outline-offset: 7px; } }
.pk-post { margin: 9px 14px 0; }
.pk-ph { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px 2px; }
.pk-pr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 5px 10px 5px 13px;
  border-radius: 8px; background: var(--page); font-size: 14px; overflow: hidden; }
.pk-pr + .pk-pr { margin-top: 4px; }
.pk-pr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.pk-acc { white-space: nowrap; color: var(--ink-2); }
.pk-acc b { font-weight: 750; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.pk-pw { min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-pr em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 8px 14px 12px; padding-top: 8px; border-top: 2px solid var(--ink); }
.pk-tot > span { font-weight: 650; font-size: 15.5px; }
.pk-tot > b { font-size: 26px; line-height: 1; letter-spacing: -.025em; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* превью и итоговый вид: результат в ширину сцены на 1440, шаги сразу зелёные */
.w-og .pk { max-width: 920px; margin: 0 auto; }
.w-final .w-st, .w-final .w-st i { transition: none !important; animation: none !important; }

/* узкая форма 1С (ноутбук, телефон): длинные названия переносятся, описания проводок прячутся */
@container (max-width: 360px) {
  .pk-1t b, .pk-fx { white-space: normal; }
}
@container (max-width: 330px) {
  .pk-pw { display: none; }
  .pk-pr { grid-template-columns: auto auto; justify-content: space-between; }
}
/* телефон: снимок над формой */
@container (max-width: 700px) {
  .pk-body { grid-template-columns: minmax(0, 1fr); }
}