/* вынесен из inline-<style> страницы generate.html (SEC-11: style-src без unsafe-inline) */
    /* ─── Share/Download кнопки на превью и в галерее ─── */
    .media-actions {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      gap: 6px;
      z-index: 10;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.2s, transform 0.2s;
      pointer-events: none;
    }
    .gallery-item:hover .media-actions,
    .compare-stage:hover .media-actions,
    .result-frame:hover .media-actions,
    .media-actions.always-visible,
    .media-actions:focus-within {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .media-action-btn {
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid rgba(244,241,255,0.18);
      border-radius: 10px;
      background: rgba(7,5,13,0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #f4f1ff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      font-size: 16px;
    }
    .media-action-btn:hover {
      background: rgba(139,92,255,0.25);
      border-color: rgba(167,139,255,0.6);
      transform: scale(1.05);
    }
    .media-action-btn:active {
      transform: scale(0.95);
    }
    .media-action-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Мини-уведомление "Скопировано" */
    .toast-copy {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      padding: 12px 22px;
      background: linear-gradient(135deg, #8b5cff, #ff3ec9);
      color: #fff;
      font-size: 0.88rem;
      font-weight: 700;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(139,92,255,0.4);
      /* [Ф-АВТО1] Выше лайтбокса ракурсов (10000): скачивание/копирование
         вызывается и из него тоже, а тост на 9999 оказался бы за его фоном. */
      z-index: 10001;
      opacity: 0;
      transition: opacity 0.25s, transform 0.25s;
      pointer-events: none;
    }
    .toast-copy.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* На мобиле кнопки показаны всегда (нет hover) */
    @media (hover: none) {
      .media-actions { opacity: 1; transform: none; pointer-events: auto; }
    }

    /* Кнопки на основном превью — слегка покрупнее */
    .result-frame .media-actions {
      top: 14px;
      right: 14px;
    }
    .result-frame .media-actions .media-action-btn {
      width: 40px;
      height: 40px;
    }

    /* ─── [Ф-АВТО1] Лайтбокс ракурсов ─── */
    @keyframes anglesLbFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .angles-lightbox {
      position: fixed; inset: 0;
      /* 10000 — выше #orderModal (9999, инлайн-стиль в order-modal.js) и всех
         слоёв compare-widget (.cmp-fs 1100, .cmp-modal 1300). На index.html у
         аналогичного лайтбокса 1100, но там этих соседей нет. */
      z-index: 10000;
      display: none;
      align-items: center; justify-content: center;
      padding: 20px;
      background: rgba(7,5,13,0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow-y: auto;
      animation: anglesLbFadeIn 0.25s ease;
    }
    .angles-lightbox.visible { display: flex; }
    .angles-lightbox-content {
      position: relative;
      width: 100%; max-width: 980px;
      max-height: 92vh;
      display: flex; flex-direction: column;
      background: linear-gradient(180deg, #110a1f, #0a0716);
      border: 1px solid rgba(139,92,255,0.25);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(139,92,255,0.15);
    }
    .angles-lightbox-media {
      position: relative;
      width: 100%;
      aspect-ratio: 3/2;
      max-height: 60vh;
      background: #050309;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .angles-lightbox-media img {
      width: 100%; height: 100%;
      object-fit: contain;
    }
    .angles-lightbox-nav {
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(13,10,24,0.85);
      border: 1px solid rgba(139,92,255,0.35);
      color: #fff;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 5;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .angles-lightbox-nav:hover {
      background: linear-gradient(135deg,#8b5cff,#ff3ec9);
      border-color: transparent;
      transform: translateY(-50%) scale(1.08);
    }
    .angles-lightbox-nav.prev { left: 16px; }
    .angles-lightbox-nav.next { right: 16px; }
    .angles-lightbox-nav svg {
      width: 20px; height: 20px;
      stroke: currentColor; fill: none;
      stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    }
    .angles-lightbox-nav:disabled { opacity: 0.3; pointer-events: none; }
    .angles-lightbox-dots {
      position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 8px;
      z-index: 5;
      padding: 6px 12px;
      background: rgba(7,5,13,0.5);
      border-radius: 99px;
    }
    .angles-lightbox-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(244,241,255,0.3);
      border: none; cursor: pointer;
      transition: background 0.2s, width 0.2s;
    }
    .angles-lightbox-dot.active {
      background: linear-gradient(135deg,#00e5ff,#8b5cff);
      width: 24px; border-radius: 99px;
    }
    .angles-lightbox-counter {
      position: absolute; top: 14px;
      /* Не right:14px: там стоит крестик (36px + отступ), и на index.html
         счётчик из-за этого на десктопе полностью скрыт под ним (z-index 4
         против 10), а на мобиле его спасают отдельным медиа-правилом.
         Сдвигаем сразу левее крестика — обе метки видны на любой ширине. */
      right: 58px;
      padding: 6px 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem; font-weight: 700;
      color: #fff;
      background: rgba(7,5,13,0.7);
      border-radius: 99px;
      z-index: 4;
    }
    .angles-lightbox-close {
      position: absolute; top: 14px; right: 14px;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(7,5,13,0.9);
      border: 1px solid rgba(139,92,255,0.35);
      color: #fff;
      font-size: 1.1rem; font-weight: 700;
      cursor: pointer;
      z-index: 10;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .angles-lightbox-close:hover {
      background: linear-gradient(135deg,#ff3ec9,#8b5cff);
      border-color: transparent;
      transform: scale(1.1) rotate(90deg);
    }
    .angles-lightbox-actions {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      padding: 18px 20px 22px;
      min-height: 74px;
      background: linear-gradient(180deg, transparent, rgba(139,92,255,0.06));
    }
    /* buildMediaActions() рисует .media-actions, рассчитанную на появление по
       наведению на родителя (.gallery-item / .compare-stage / .result-frame):
       по умолчанию у неё opacity:0 и pointer-events:none. Внутри лайтбокса
       такого родителя нет, поэтому панель раскладываем в поток и показываем
       всегда — иначе кнопки были бы в разметке, но невидимы и некликабельны. */
    .angles-lightbox-actions .media-actions {
      position: static;
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    @media (max-width: 720px) {
      .angles-lightbox { padding: 12px; }
      .angles-lightbox-content { max-height: 95vh; overflow-y: auto; }
      .angles-lightbox-media { max-height: 50vh; }
      .angles-lightbox-actions { padding: 14px 14px 18px; }
    }