/* Общие стили обеих версий: защита, экран загрузки, просмотр листа (canvas + лупа), лайтбокс.
   Цвета задаются переменными версии: --bg, --fg, --accent, --line, --rl-bg, --rl-fg. */

html, body { -webkit-touch-callout: none; }
img, canvas, svg image { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }
.protect, .protect * { -webkit-user-select: none; user-select: none; }
.protect img { pointer-events: none; }
.no-print body { display: none !important; }
@media print { html { display: none !important; } }

/* ——— экран загрузки ——— */
.rl {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--rl-bg, #262C2F); color: var(--rl-fg, #EDEFEC);
  transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), opacity .4s .5s;
  clip-path: circle(150% at 50% 50%);
}
.rl.out { clip-path: circle(0% at 50% 50%); opacity: 0; pointer-events: none; }
.rl-skip .rl { display: none; }
.rl-logo { width: min(78vw, 520px); height: auto; overflow: visible; }
.rl-d { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.rl-l { fill: currentColor; fill-opacity: 0; }
.rl .rl-mark circle, .rl .rl-mark path { stroke-width: 2.2; }
.rl.run .rl-d { animation: rl-draw .95s cubic-bezier(.6, .1, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 85ms); }
.rl.run .rl-l { animation: rl-draw .95s cubic-bezier(.6, .1, .2, 1) forwards, rl-fill .5s ease forwards; animation-delay: calc(var(--i, 0) * 85ms), calc(var(--i, 0) * 85ms + 780ms); }
.rl.run .rl-dot { animation: rl-pop .4s .1s ease both; }
.rl-dot { transform-box: fill-box; transform-origin: center; opacity: 0; }
.rl-sub { position: absolute; bottom: 12vh; font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; opacity: 0; }
.rl.run .rl-sub { animation: rl-fade .6s 1.1s ease forwards; }
@keyframes rl-draw { to { stroke-dashoffset: 0; } }
@keyframes rl-fill { to { fill-opacity: 1; stroke-opacity: .0; } }
@keyframes rl-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes rl-fade { to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .rl { transition: none; }
  .rl-d { stroke-dashoffset: 0; } .rl-l { fill-opacity: 1; } .rl-dot { opacity: 1; }
  .rl.run .rl-d, .rl.run .rl-l, .rl.run .rl-dot { animation: none; }
}

/* ——— просмотр листа ——— */
.vw { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.vw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .1, 1); cursor: zoom-in; touch-action: none; }
.vw-canvas.swap { opacity: 0; transform: translateY(10px) scale(.992); }
.vw-canvas.lens { cursor: none; }
.vw-canvas.zoomed { cursor: grab; }
.vw-canvas.zoomed:active { cursor: grabbing; }
.vw.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 2px solid var(--vw-ring, currentColor); border-right-color: transparent; opacity: .5; animation: vw-spin .8s linear infinite;
}
.vw.is-error::after { content: "Не удалось загрузить лист"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; opacity: .6; }
@keyframes vw-spin { to { transform: rotate(360deg); } }

/* ——— лайтбокс ——— */
.lb {
  position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column;
  background: var(--lb-bg, rgb(20, 24, 26)); color: var(--lb-fg, #EDEFEC);
  opacity: 0; transition: opacity .28s ease; --vw-ring: var(--lb-ring, #C9A06B); --vw-lens-bg: var(--lb-lens-bg, #fff);
}
.lb[hidden] { display: none; }
.lb.on { opacity: 1; }
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem clamp(1rem, 3vw, 2rem); }
.lb-cap { display: flex; gap: .9rem; align-items: baseline; min-width: 0; }
.lb-title { font-weight: 500; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-count { opacity: .55; font-size: .85rem; font-variant-numeric: tabular-nums; }
.lb-tools { display: flex; gap: .5rem; flex-shrink: 0; }
.lb-btn { font: inherit; font-size: .85rem; color: inherit; background: transparent; border: 1px solid rgba(255, 255, 255, .28); border-radius: 99px; padding: .45rem .95rem; cursor: pointer; transition: background .2s, border-color .2s; }
.lb-btn:hover, .lb-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
.lb-stage { position: relative; flex: 1; min-height: 0; }
.lb-vw { position: absolute; inset: 0; }
.lb-nav { position: absolute; top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; border-radius: 50%; font: inherit; font-size: 1.2rem; color: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; z-index: 2; transition: background .2s; }
.lb-nav:hover { background: rgba(255, 255, 255, .2); }
.lb-prev { left: clamp(.5rem, 2vw, 1.5rem); } .lb-next { right: clamp(.5rem, 2vw, 1.5rem); }
.lb-text { margin: 0; padding: .7rem clamp(1rem, 3vw, 2rem) .2rem; font-size: .95rem; opacity: .85; max-width: 70ch; min-height: 1.6em; }
.lb-hint { margin: 0; padding: 0 clamp(1rem, 3vw, 2rem) 1rem; font-size: .78rem; opacity: .45; }
.lb-open, .lb-open body { overflow: hidden; }
@media (hover: none) { .lb-hint { display: none; } .lb-btn[data-a="lens"] { display: none; } }
@media (max-width: 640px) { .lb-btn[data-a="plus"], .lb-btn[data-a="minus"] { display: none; } .lb-nav { width: 2.5rem; height: 2.5rem; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }