/* Finval Manual v2 — оболочка просмотрщика.
   ВАЖНО: лист (.sheet) сравнивается с эталоном пиксель-в-пиксель, поэтому здесь
   нет ни одного правила по тегам (img, p, svg, button…) — только классы vw-*.
   Внутрь листа заходят лишь отладочные режимы (.vw-frames) и переменная --paper. */

:root {
  --vw-bar:        #1e2a35;
  --vw-bar-2:      #0f1820;
  --vw-tools:      #16212a;
  --vw-pasteboard: #2b3640;
  --vw-ink:        #e8eef2;
  --vw-mute:       #9fb1bd;
  --vw-dim:        #6b7c88;
  --vw-accent:     #4b6cff;
  --vw-line:       rgba(255, 255, 255, .12);
  --vw-ok:         #22c55e;
  --vw-warn:       #f59e0b;
  --vw-bad:        #ef4444;
  --vw-bar-h:      48px;
  --vw-tools-h:    0px;           /* вторая строка ушла в меню «Вид» */
  --vw-rail-w:     200px;
  --vw-panel-w:    300px;
  --vw-tw:         84px;          /* ширина страницы-миниатюры в рельсе */
  --vw-tr:         1.41891;       /* высота/ширина листа (задаётся из манифеста) */
}

html, body.vw { height: 100%; margin: 0; }
body.vw {
  display: grid;
  grid-template-rows: var(--vw-bar-h) 0 minmax(0, 1fr);
  grid-template-columns: var(--vw-rail-w) minmax(0, 1fr) var(--vw-panel-w);
  background: var(--vw-pasteboard);
  color: var(--vw-ink);
  font: 13px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
body.vw.vw-no-rail  { --vw-rail-w: 0px; }
body.vw.vw-no-panel { --vw-panel-w: 0px; }
.vw-no-rail .vw-rail, .vw-no-panel .vw-panel { display: none; }

/* ── загрузка / ошибка ─────────────────────────────────────────────── */
.vw-loading {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 100;
  background: var(--vw-pasteboard); color: var(--vw-mute); font-size: 14px; letter-spacing: .02em; text-align: center;
}
.vw-loading__err { max-width: 460px; color: var(--vw-ink); line-height: 1.5; }
.vw-loading__err small { display: block; color: var(--vw-mute); margin-top: 8px; font-size: 12.5px; }
.vw-spin {
  width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--vw-accent);
  animation: vw-spin .8s linear infinite;
}
@keyframes vw-spin { to { transform: rotate(360deg); } }

/* ── иконки Carbon ─────────────────────────────────────────────────── */
.vw-ic { width: 16px; height: 16px; flex: none; fill: currentColor; display: block; }

/* ── кнопки и группы ───────────────────────────────────────────────── */
.vw-btn {
  appearance: none; flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; min-width: 30px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--vw-line); border-radius: 7px;
  background: rgba(255, 255, 255, .05); color: var(--vw-ink);
  font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.vw-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
.vw-btn:focus-visible { outline: 2px solid var(--vw-accent); outline-offset: 1px; }
.vw-btn[aria-pressed="true"] { background: var(--vw-accent); border-color: var(--vw-accent); color: #fff; }
.vw-btn:disabled { opacity: .35; cursor: default; }
.vw-btn--sq { padding: 0; width: 30px; }
.vw-btn--ghost { background: transparent; border-color: transparent; }
.vw-btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: transparent; }
.vw-btn--sm { height: 26px; min-width: 26px; font-size: 12px; padding: 0 8px; }
.vw-btn--sm.vw-btn--sq { width: 26px; padding: 0; }
.vw-badge {
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.vw-btn[aria-pressed="true"] .vw-badge { background: rgba(255, 255, 255, .28); }
.vw-badge:empty { display: none; }

.vw-group { display: flex; align-items: center; gap: 6px; flex: none; }
.vw-seg { display: inline-flex; flex: none; border: 1px solid var(--vw-line); border-radius: 7px; overflow: hidden; }
.vw-seg .vw-btn { border: none; border-radius: 0; height: 28px; }
.vw-seg .vw-btn + .vw-btn { border-left: 1px solid var(--vw-line); }
.vw-sep { width: 1px; height: 20px; background: var(--vw-line); flex: none; margin: 0 4px; }
.vw-spacer { flex: 1 1 auto; min-width: 8px; }
.vw-val { font-size: 12px; color: var(--vw-mute); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.vw-range { accent-color: var(--vw-accent); width: 96px; margin: 0; }
.vw-range:disabled { opacity: .35; }

/* ── верхняя строка: заголовок, навигация, вид, масштаб ─────────────── */
.vw-bar {
  grid-column: 1 / -1; grid-row: 1; z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 0 12px; min-width: 0;
  background: linear-gradient(180deg, var(--vw-bar) 0%, var(--vw-bar-2) 100%);
  border-bottom: 1px solid var(--vw-line);
}
.vw-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
.vw-title__model { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.vw-title__sub { font-size: 12px; color: var(--vw-mute); overflow: hidden; text-overflow: ellipsis; }
.vw-pos { display: flex; align-items: center; gap: 4px; flex: none; }
.vw-pos__lbl { min-width: 128px; text-align: center; font-variant-numeric: tabular-nums; line-height: 1.15; }
.vw-pos__main { display: block; font-size: 13px; font-weight: 600; }
.vw-pos__sub { display: block; font-size: 10.5px; color: var(--vw-mute); }
.vw-pos__sub:empty { display: none; }

/* ── меню «Вид» (бывшая вторая строка): поповер под кнопкой ──────────── */
.vw-tools {
  position: fixed; top: calc(var(--vw-bar-h) + 6px); left: 12px; z-index: 90; width: 300px; box-sizing: border-box;
  display: none; flex-direction: column; gap: 0; padding: 6px;
  background: var(--vw-tools); border: 1px solid var(--vw-line); border-radius: 10px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
}
.vw-tools.is-on { display: flex; }
.vw-menu__sec { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; }
.vw-menu__sec + .vw-menu__sec { border-top: 1px solid var(--vw-line); }
.vw-menu__lbl { font-size: 10.5px; color: var(--vw-dim); letter-spacing: .06em; text-transform: uppercase; }
.vw-tools .vw-seg { display: flex; }
.vw-tools .vw-seg .vw-btn { flex: 1 1 0; height: 28px; padding: 0 6px; }
.vw-tools .vw-menu__row { justify-content: flex-start; height: 30px; width: 100%; text-decoration: none; }
.vw-tools .vw-menu__row .vw-kbd { margin-left: auto; color: inherit; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); opacity: .8; }
.vw-tools .vw-op .vw-range { flex: 1; }
.vw-tools .vw-op { width: 100%; }
.vw-op { display: flex; align-items: center; gap: 6px; flex: none; color: var(--vw-mute); }
.vw-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--vw-mute); flex: none; }
.vw-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--vw-ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.vw-live.is-err i { background: var(--vw-bad); box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
.vw-live.is-busy i { background: var(--vw-warn); }

/* ── левый рельс: миниатюры ────────────────────────────────────────── */
.vw-rail {
  grid-column: 1; grid-row: 3; z-index: 30; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--vw-bar-2); border-right: 1px solid var(--vw-line);
}
.vw-rail__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--vw-line); }
.vw-rail__head .vw-range { flex: 1; width: auto; }
.vw-rail__list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 0 24px; scrollbar-width: thin; }

.vw-th {
  appearance: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; margin: 0 0 10px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.vw-th__row { position: relative; display: flex; }
.vw-th__pg {
  position: relative; width: var(--vw-tw); height: calc(var(--vw-tw) * var(--vw-tr));
  background: #fff; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .6);
}
.vw-th__pg--blank { background: transparent; box-shadow: none; }
.vw-th__pg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vw-th__pg.is-missing::after { content: "нет эталона"; position: absolute; inset: 0; display: grid; place-items: center; color: #9aa7b3; font-size: 9px; }
.vw-th__row::after {
  content: ""; position: absolute; inset: -3px; border: 2px solid transparent; border-radius: 2px; pointer-events: none;
  transition: border-color .12s;
}
.vw-th:hover .vw-th__row::after { border-color: rgba(255, 255, 255, .3); }
.vw-th.is-active .vw-th__row::after { border-color: var(--vw-accent); }
.vw-th__lbl { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10.5px; color: var(--vw-mute); font-variant-numeric: tabular-nums; }
.vw-th.is-active .vw-th__lbl { color: var(--vw-ink); }
.vw-th__n { display: inline-flex; align-items: center; gap: 3px; }
.vw-th__n em { font-style: normal; color: var(--vw-dim); }
.vw-th__qa { display: inline-flex; gap: 7px; }
.vw-th__qa:empty { display: none; }
.vw-th__ready {
  position: absolute; top: -5px; right: -5px; z-index: 2; width: 14px; height: 14px; border-radius: 50%;
  background: var(--vw-ok); color: #fff; display: grid; place-items: center; border: 1.5px solid var(--vw-bar-2);
}
.vw-th__ready .vw-ic { width: 10px; height: 10px; }
.vw-th__cmt {
  position: absolute; top: -5px; left: -5px; z-index: 2; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
  border-radius: 999px; background: var(--vw-accent); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  border: 1.5px solid var(--vw-bar-2);
}

/* точка/оценка автосверки (qa/scores.json) */
.vw-qa { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.vw-qa i { width: 6px; height: 6px; border-radius: 50%; background: var(--vw-dim); flex: none; }
.vw-qa--ok i { background: var(--vw-ok); }
.vw-qa--warn i { background: var(--vw-warn); }
.vw-qa--bad i { background: var(--vw-bad); }

/* ── сцена (монтажный стол) ────────────────────────────────────────── */
.vw-stage {
  grid-column: 2; grid-row: 3; min-width: 0; min-height: 0; position: relative;
  overflow: auto; display: grid; place-items: safe center; padding: 28px;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.vw-canvas { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vw-sizer { position: relative; flex: none; }
.vw-spread {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  display: flex; justify-content: center; align-items: flex-start;
}
.vw-pg { position: relative; flex: none; }
/* рамка страницы = ровно лист (обрезной формат). Сброс наследуемых свойств, чтобы
   лист рендерился как в viewer/page.html (там body без стилей). */
.vw-pg__box {
  position: relative; display: block; isolation: isolate; background: #fff;
  box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .55);
  font: initial; line-height: normal; color: #000; letter-spacing: normal; word-spacing: normal;
  text-align: start; text-indent: 0; text-transform: none; white-space: normal; cursor: auto;
  -webkit-font-smoothing: auto;
}
.vw-pg.is-loading .vw-pg__box::after {
  content: ""; position: absolute; inset: 0; z-index: 9;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, 0) 100%);
}
.vw-spread.vw-pageclick .vw-pg__box { cursor: zoom-in; }
.vw-spread.vw-pageclick.vw-mode-page .vw-pg__box { cursor: zoom-out; }

/* подложка: оригинальная страница InDesign (JPEG ровно 2× листа) */
.vw-ref {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.vw-u-on .vw-ref { display: block; opacity: var(--vw-op, .2); }
.vw-u-on.vw-u-diff .vw-ref { opacity: 1; mix-blend-mode: difference; }
.vw-u-on.vw-u-split .vw-ref { opacity: 1; }
/* «Под»: бумага листа прозрачная — эталон просвечивает сквозь наш текст и графику */
.vw-u-on.vw-u-under .vw-pg__box { --paper: transparent; }
/* «Наш слой» выкл. — остаётся только эталон */
.vw-hide-ours .vw-pg__box > .sheet { visibility: hidden; }

/* отладка: рамки фреймов (только по кнопке) */
.vw-frames .sheet .tf { outline: calc(.5px * var(--vw-inv, 1)) solid #00b4ff; }
.vw-frames .sheet .gf,
.vw-frames .sheet svg.shape { outline: calc(.5px * var(--vw-inv, 1)) solid #ff00ff; }

/* направляющие полей 36.85 pt — как margin guides в InDesign */
.vw-guides {
  position: absolute; inset: 36.85pt; display: none; pointer-events: none;
  outline: calc(.5px * var(--vw-inv, 1)) solid #ff00ff;
}
.vw-guides-on .vw-guides { display: block; }

/* шторка */
.vw-split {
  position: absolute; top: -10px; bottom: -10px; width: 0; z-index: 5; display: none;
  left: calc(var(--vw-split, .5) * 100%); pointer-events: none;   /* тянет .vw-split-hit под ней */
}
.vw-split.is-on { display: block; }
.vw-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--vw-accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.vw-split__grip {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 26px; height: 40px; border-radius: 8px; background: var(--vw-accent); color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6);
}
.vw-split__tag {
  position: absolute; top: 0; transform: translateY(-100%); padding: 2px 7px; border-radius: 5px;
  font-size: 11px; white-space: nowrap; background: rgba(15, 24, 32, .85); color: var(--vw-ink);
}
.vw-split__tag--l { right: 6px; }
.vw-split__tag--r { left: 6px; }
.vw-split-hit { position: absolute; inset: 0; z-index: 4; display: none; cursor: ew-resize; }
.vw-split-hit.is-on { display: block; }

/* подписи под страницами (вне масштабируемого слоя → всегда читаемые) */
.vw-caps { display: flex; justify-content: center; flex: none; }
.vw-cap {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  font-size: 11.5px; color: var(--vw-mute); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.vw-cap b { color: var(--vw-ink); font-weight: 600; }
.vw-cap a { color: var(--vw-mute); display: inline-flex; padding: 2px; border-radius: 4px; }
.vw-cap a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.vw-cap .vw-ic { width: 13px; height: 13px; }

/* ── пин-комментарии: отдельный слой над листом ────────────────────── */
.vw-pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.vw-show-pins .vw-pins { display: block; }
.vw-cmode .vw-pins { pointer-events: auto; cursor: crosshair; }
.vw-pin {
  appearance: none; position: absolute; width: 24px; height: 24px; padding: 0; margin: 0; box-sizing: border-box;
  transform: translate(-50%, -50%) scale(var(--vw-inv, 1)); transform-origin: center;
  border-radius: 50% 50% 50% 4px; border: 2px solid #fff; background: var(--vw-accent); color: #fff;
  font: 700 11.5px/1 ui-sans-serif, system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .55);
}
.vw-pin:hover { filter: brightness(1.1); }
.vw-pin.is-resolved { background: var(--vw-ok); }
.vw-pin.is-active { box-shadow: 0 0 0 4px rgba(75, 108, 255, .45), 0 3px 10px -2px rgba(0, 0, 0, .55); }
.vw-pin.is-flash { animation: vw-pin-flash .9s ease 2; }
@keyframes vw-pin-flash { 50% { box-shadow: 0 0 0 10px rgba(75, 108, 255, .0), 0 0 0 5px rgba(75, 108, 255, .6); } }
.vw-pin--ghost { background: #fff; border: 2px dashed var(--vw-accent); color: var(--vw-accent); pointer-events: none; }

.vw-composer {
  position: fixed; z-index: 80; width: 264px; box-sizing: border-box; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; color: #1e2a35; border: 1px solid #d8e1e8; border-radius: 12px;
  box-shadow: 0 20px 52px -16px rgba(0, 0, 0, .55);
}
.vw-composer__hd { font-size: 12.5px; font-weight: 700; }
.vw-input {
  width: 100%; box-sizing: border-box; border: 1px solid #d8e1e8; border-radius: 8px; padding: 7px 9px;
  font: inherit; font-size: 13px; color: #1e2a35; background: #fbfcfd; resize: vertical;
}
.vw-input:focus { outline: none; border-color: var(--vw-accent); }
.vw-composer__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vw-composer__hint { font-size: 10.5px; color: #8190a0; }
.vw-composer .vw-btn, .vw-panel .vw-btn { color: #2a3742; background: #eef2f5; border-color: #dde5ea; }
.vw-composer .vw-btn:hover, .vw-panel .vw-btn:hover { background: #e3eaef; border-color: #cdd9e1; }
.vw-btn--primary, .vw-composer .vw-btn--primary { background: var(--vw-accent); border-color: var(--vw-accent); color: #fff; }
.vw-btn--primary:hover, .vw-composer .vw-btn--primary:hover { background: var(--vw-accent); filter: brightness(1.08); }

/* ── правая панель: статус разворота + комментарии ─────────────────── */
.vw-panel {
  grid-column: 3; grid-row: 3; z-index: 30; min-height: 0;
  display: flex; flex-direction: column;
  background: #f6f8f9; color: #1e2a35; border-left: 1px solid #d8e1e8;
}
.vw-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.vw-panel__title { font-size: 14px; font-weight: 700; }
.vw-panel__pos { font-size: 11px; color: #8190a0; font-variant-numeric: tabular-nums; }
.vw-status {
  appearance: none; margin: 0 16px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 12px; border-radius: 9px; border: 1px solid #e6b9b5; background: #fff4f3; color: #b3261d;
  font: inherit; font-size: 13px; font-weight: 600; text-align: left;
}
.vw-status__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #d8a7a3; background: #fff; display: grid; place-items: center; color: transparent; flex: none; }
.vw-status__box .vw-ic { width: 13px; height: 13px; }
.vw-status.is-ready { border-color: #9fdcbe; background: #e9f9f1; color: #15803d; }
.vw-status.is-ready .vw-status__box { border-color: var(--vw-ok); background: var(--vw-ok); color: #fff; }
.vw-status__sub { margin-left: auto; font-size: 11px; font-weight: 400; color: #8190a0; }
.vw-panel__qa { margin: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: #5b6b78; }
.vw-panel__qa:empty { display: none; }
.vw-panel__qa .vw-qa i { background: #b8c4cd; }
.vw-panel__qa .vw-qa--ok i { background: var(--vw-ok); }
.vw-panel__qa .vw-qa--warn i { background: var(--vw-warn); }
.vw-panel__qa .vw-qa--bad i { background: var(--vw-bad); }
.vw-tabs { display: flex; gap: 4px; margin: 0 16px; border-bottom: 1px solid #e1e8ed; }
.vw-tab {
  appearance: none; border: 0; background: none; padding: 8px 4px; margin-bottom: -1px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: #5b6b78; border-bottom: 2px solid transparent;
}
.vw-tab + .vw-tab { margin-left: 12px; }
.vw-tab[aria-selected="true"] { color: #1e2a35; font-weight: 600; border-bottom-color: var(--vw-accent); }
.vw-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
.vw-panel__empty { font-size: 12.5px; color: #8190a0; padding: 14px 0 4px; line-height: 1.5; }
.vw-panel__hint { font-size: 11.5px; color: #9aa7b3; line-height: 1.45; }
.vw-panel__group { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #8190a0; margin: 12px 0 2px; }
.vw-panel__foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #e4ebf0; background: #eef2f5;
  font-size: 11px; color: #5b6b78;
}
.vw-panel__foot .vw-btn { height: 26px; font-size: 11.5px; padding: 0 8px; }
.vw-src { display: inline-flex; align-items: center; gap: 5px; }
.vw-src i { width: 7px; height: 7px; border-radius: 50%; background: var(--vw-ok); }
.vw-src.is-local i { background: #94a3b8; }
.vw-src.is-offline i { background: var(--vw-bad); }

.vw-cmt {
  margin: 8px 0; padding: 8px 10px; cursor: pointer; background: #fff;
  border: 1px solid #e4ebf0; border-left: 3px solid var(--vw-accent); border-radius: 8px;
  transition: box-shadow .12s, border-color .12s;
}
.vw-cmt:hover { box-shadow: 0 4px 14px -6px rgba(24, 30, 58, .25); }
.vw-cmt.is-active { border-color: var(--vw-accent); box-shadow: 0 0 0 2px rgba(75, 108, 255, .18); }
.vw-cmt.is-resolved { border-left-color: var(--vw-ok); opacity: .75; }
.vw-cmt.is-resolved .vw-cmt__text { text-decoration: line-through; color: #8190a0; }
.vw-cmt__hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.vw-cmt__no {
  flex: none; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px 9px 9px 3px;
  background: var(--vw-accent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; align-self: center;
}
.vw-cmt.is-resolved .vw-cmt__no { background: var(--vw-ok); }
.vw-cmt__author { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vw-cmt__meta { margin-left: auto; font-size: 10.5px; color: #8190a0; font-variant-numeric: tabular-nums; flex: none; }
.vw-cmt__text { font-size: 12.5px; line-height: 1.45; color: #2a3742; white-space: pre-wrap; word-break: break-word; }
.vw-cmt__act { display: flex; gap: 6px; margin-top: 7px; }
.vw-cmt__btn {
  appearance: none; font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid #dde5ea; background: #f4f7f9; color: #2a3742;
}
.vw-cmt__btn:hover { background: #e8eef2; }
.vw-cmt__btn--del { color: #b3261d; border-color: #ecc9c6; background: #fdf4f3; }
.vw-cmt__btn--del:hover { background: #fbe7e5; }
.vw-cmt__btn--del.is-armed { background: #b3261d; border-color: #b3261d; color: #fff; }

/* ── всплывающие: тост, справка по клавишам ────────────────────────── */
.vw-toast {
  position: fixed; right: calc(var(--vw-panel-w) + 16px); bottom: 16px; z-index: 90; max-width: 360px;
  padding: 8px 12px; border-radius: 8px; background: rgba(15, 24, 32, .92); color: var(--vw-ink);
  border: 1px solid var(--vw-line); font-size: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.vw-toast.is-on { opacity: 1; transform: none; }
.vw-help {
  position: fixed; top: calc(var(--vw-bar-h) + 8px); right: 12px; z-index: 85; width: 330px;
  padding: 14px 16px; border-radius: 12px; background: #fff; color: #1e2a35; border: 1px solid #d8e1e8;
  box-shadow: 0 20px 52px -16px rgba(0, 0, 0, .55); font-size: 12.5px; display: none;
}
.vw-help.is-on { display: block; }
.vw-help h3 { margin: 0 0 8px; font-size: 13px; }
.vw-help dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; }
.vw-help dt { white-space: nowrap; }
.vw-help dd { margin: 0; color: #2a3742; }
.vw-kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 4px; text-align: center;
  background: #eef2f5; border: 1px solid #d8e1e8; border-bottom-width: 2px; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* узкие окна: прячем второстепенные подписи */
@media (max-width: 1280px) { .vw-title__sub, .vw-hide-narrow { display: none; } }
@media (max-width: 1120px) { .vw-hide-xnarrow, .vw-pos__sub { display: none; } }

/* ── «Лента»: развороты/страницы подряд, вертикальная прокрутка ─────── */
.vw-flow { display: none; }
body.vw-flow-on .vw-canvas { display: none; }
body.vw-flow-on .vw-stage { place-items: start center; }
body.vw-flow-on .vw-flow { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 50vh; }
.vw-row { position: relative; flex: none; }
.vw-flow .vw-caps { margin-bottom: 26px; }

/* ── правка текста (E) ─────────────────────────────────────────────── */
.vw-btn--save:not([disabled]) { background: #e0a100; border-color: #e0a100; color: #1b1300; }
.vw-btn--save[disabled] { opacity: .5; }
.vw-editing .sheet .gf, .vw-editing .sheet .master, .vw-editing .sheet svg.shape { pointer-events: none; }
.vw-editing .sheet [contenteditable="true"] { cursor: text; outline: none; border-radius: 1px; }
.vw-editing .sheet [contenteditable="true"]:hover { box-shadow: 0 0 0 .75pt rgba(0, 177, 235, .55); }
.vw-editing .sheet [contenteditable="true"]:focus { box-shadow: 0 0 0 1pt #00b1eb; background: rgba(0, 177, 235, .05); }
.vw-editing .sheet .vw-dirty { box-shadow: 0 0 0 1pt #e0a100; }
.vw-editing .sheet .vw-dirty:focus { box-shadow: 0 0 0 1pt #e0a100; background: rgba(224, 161, 0, .06); }
.vw-btn[hidden] { display: none; }
@media (max-width: 1360px) { .vw-has-edit .vw-lbl { display: none; } }

/* ── подсветка вопросов (Q): жёлтый фон у текста с вопросом, жёлтая рамка у картинки под новый контент ── */
.vw-hl .sheet .hl-q { background: rgba(255, 212, 0, .55); box-shadow: 0 0 0 .6pt rgba(255, 212, 0, .55); border-radius: 1px; }
.vw-hl .sheet .hl-new { outline: 1.5pt solid #ffc400; outline-offset: -.75pt; }
.vw-hl .sheet .hl-new::after {
  content: "нужен контент новой модели"; position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none;
  padding: 2pt 5pt; background: #ffc400; color: #1b1300; font: 700 6.5pt/1.2 ui-sans-serif, system-ui, sans-serif;
  border-bottom-right-radius: 3pt; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.vw-hl .sheet .hl-new::before {
  content: ""; position: absolute; inset: 0; z-index: 29; pointer-events: none; background: rgba(255, 212, 0, .14);
}