/* Самостоятельный модуль. Подключать ПОСЛЕ стилей лендинга. */
#vhistory-viewer {
  --vhistory-cream: #f4efe6;
  --vhistory-navy: #0b1a2f;
  --vhistory-navy-light: #132840;
  --vhistory-gold: #c8a15a;
  --vhistory-gold-light: #e2c27b;
  --vhistory-line: rgba(200, 161, 90, .5);
  --vhistory-serif: Georgia, 'Times New Roman', serif;
  font: 16px/1.5 Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}
#vhistory-viewer, #vhistory-viewer * { box-sizing: border-box; }
#vhistory-viewer { text-align: left; letter-spacing: normal; text-transform: none; }
#vhistory-viewer button, #vhistory-viewer select {
  position: static; margin: 0; padding: 6px 10px; height: auto;
  box-shadow: none; transform: none; text-transform: none; letter-spacing: normal;
  background-image: none; -webkit-appearance: auto; appearance: auto;
}
#vhistory-viewer button::before, #vhistory-viewer button::after { content: none; }
#vhistory-viewer h2 { color: inherit; text-transform: none; letter-spacing: normal; padding: 0; }
#vhistory-viewer p { color: inherit; font: inherit; padding: 0; }
#vhistory-viewer canvas { max-width: none; max-height: none; border: 0; padding: 0; }
#vhistory-viewer[open] { display: flex; }
#vhistory-viewer:not([open]) { display: none; }
#vhistory-viewer {
  position: fixed; inset: 0; width: 100%; max-width: none;
  height: 100%; height: 100dvh; max-height: none; margin: 0;
  border: 0; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: transparent; color: var(--vhistory-cream); overflow: hidden;
}
#vhistory-viewer[open] { display: flex; align-items: center; justify-content: center; }
#vhistory-viewer::backdrop { background: rgba(0, 0, 0, .78); }
#vhistory-viewer .vhistory-panel {
  width: min(100%, 1040px); height: 100%; max-height: 1200px;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--vhistory-navy); border: 1px solid var(--vhistory-gold); border-radius: 12px;
  overflow: hidden; box-shadow: 0 18px 70px #0008;
}
#vhistory-viewer .vhistory-header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--vhistory-line); }
#vhistory-viewer .vhistory-header h2 { flex: 1; min-width: 0; margin: 0; font: 400 22px/1.25 var(--vhistory-serif); overflow-wrap: anywhere; }
#vhistory-viewer button, #vhistory-viewer .vhistory-zoom {
  min-width: 44px; min-height: 44px; border: 1px solid var(--vhistory-line); border-radius: 6px;
  background: var(--vhistory-navy-light); color: var(--vhistory-cream); cursor: pointer; font: inherit;
}
#vhistory-viewer button:disabled { opacity: .4; cursor: default; }
#vhistory-viewer .vhistory-close { flex: 0 0 44px; font-size: 30px; line-height: 1; }
#vhistory-viewer .vhistory-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
#vhistory-viewer .vhistory-counter { min-width: 72px; text-align: center; font-size: 14px; }
#vhistory-viewer .vhistory-zoom-label { display: flex; align-items: center; gap: 8px; margin-left: 12px; font-size: 14px; }
#vhistory-viewer .vhistory-zoom { padding: 6px; max-width: 150px; }
#vhistory-viewer .vhistory-stage {
  flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 12px;
  background: #242932; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#vhistory-viewer .vhistory-status { margin: 24px auto; max-width: 520px; text-align: center; line-height: 1.5; }
#vhistory-viewer .vhistory-canvas { display: block; margin: 0 auto; background: white; -webkit-touch-callout: none; user-select: none; }
#vhistory-viewer .vhistory-canvas[hidden], #vhistory-viewer .vhistory-status[hidden] { display: none; }
#vhistory-viewer :focus-visible { outline: 2px solid var(--vhistory-gold-light); outline-offset: 2px; }
@media (max-width: 600px) {
  #vhistory-viewer .vhistory-header { padding: 8px 10px; gap: 8px; }
  #vhistory-viewer .vhistory-header h2 { font-size: 18px; }
  #vhistory-viewer .vhistory-toolbar { gap: 6px; padding: 6px; }
  #vhistory-viewer .vhistory-zoom-label { margin-left: 0; font-size: 0; gap: 0; }
  #vhistory-viewer .vhistory-zoom { font-size: 13px; max-width: 114px; }
  #vhistory-viewer .vhistory-stage { padding: 6px; }
}
@media print { #vhistory-viewer { display: none !important; } }


/* Существующее оформление «История ВЕЛОР» сохраняется. */
button.story-link[data-vhistory-pdf] {
  appearance: none; cursor: pointer; text-align: left;
}
button.story-link[data-vhistory-pdf]:focus-visible {
  outline: 2px solid #e2c27b; outline-offset: 5px;
}