/* Миниатюры эффектов из галереи мини-приложения. Извлечено из
   miniapp/frontend/src/index.css скриптом `npm run sync` — не править вручную.
   Подключается напрямую страницами /video-to-circle-telegram/. */

.video-memo-skin-swatch { width: 46px; height: 46px; border-radius: 50%; border: 5px solid var(--accent); background: #20242d; }
.video-memo-skin-swatch--clean { border: 1px solid var(--border-default); background: radial-gradient(circle, #4b5563 0 72%, transparent 74%); }
.video-memo-skin-swatch--event-horizon {
  border-color: #d8faff;
  background:
    radial-gradient(circle, #06070a 0 54%, transparent 57%),
    conic-gradient(from 210deg, #ff6a3d, #fff6d5, #79eaff, #24124c, #ff6a3d);
  box-shadow: 0 0 12px rgba(94, 224, 255, .85), inset 0 0 8px #000;
}
.video-memo-skin-swatch--fireline {
  border: 0;
  background:
    radial-gradient(ellipse at 50% 110%, #fff4b0 0 16%, #ff8a18 36%, #ff2920 58%, transparent 72%),
    #11151b;
  box-shadow: 0 0 12px rgba(255, 92, 28, .78), inset 0 -4px 7px rgba(255, 231, 130, .44);
}
.video-memo-skin-swatch--plasma-voice {
  border-color: #dfffff;
  background:
    radial-gradient(circle, #090b20 0 50%, transparent 54%),
    conic-gradient(from 20deg, #315cff, #00d9ff, #efffff, #7a35ff, #315cff);
  box-shadow: 0 0 13px rgba(0, 217, 255, .82), inset 0 0 8px #050713;
}
.video-memo-skin-swatch--one-minute {
  border: 0;
  background:
    radial-gradient(circle, #20242d 0 53%, transparent 55%),
    radial-gradient(circle at 85% 26%, #fff 0 4%, #52e7ff 5% 9%, transparent 12%),
    conic-gradient(from -90deg, #f3ffff 0 12%, #52e7ff 34%, #5568ff 70%, #34404d 70% 100%);
  box-shadow:
    0 0 11px rgba(82, 231, 255, .65),
    inset 0 0 0 1px rgba(243, 255, 255, .24);
}
.video-memo-skin-swatch--spark-circuit {
  border: 0;
  background:
    radial-gradient(circle at 77% 19%, #fff 0 4%, #60f6ff 5% 10%, transparent 14%),
    radial-gradient(circle, #20242d 0 55%, transparent 57%),
    conic-gradient(from -48deg, transparent 0 13%, #5264ff 20%, #60f6ff 34%, #fff 39%, transparent 44% 100%);
  box-shadow: 0 0 12px rgba(96, 246, 255, .72), inset 0 0 0 1px rgba(96, 246, 255, .20);
}
.video-memo-skin-swatch--vhs-dropout {
  border: 0;
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(255,255,255,.78) 37% 43%, transparent 44%),
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.16) 4px, rgba(0,0,0,.22) 5px 7px),
    linear-gradient(90deg, #ff2d8f 0 30%, #20242d 30% 38%, #f5fbff 38% 64%, #20242d 64% 71%, #00e5ff 71% 100%);
  box-shadow: 0 0 10px rgba(0,229,255,.38), inset 4px 0 0 rgba(255,45,143,.45), inset -4px 0 0 rgba(0,229,255,.45);
}
.video-memo-skin-swatch--floating-hearts {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath fill='%23ffd1e3' d='M13.5 18.2C9.8 15 5 17.7 5 21.6c0 4.2 4.2 6.8 8.5 10.2 4.3-3.4 8.5-6 8.5-10.2 0-3.9-4.8-6.6-8.5-3.4Z'/%3E%3Cpath fill='%23ff7eb6' d='M31.8 8.3c-2.5-2.2-5.8-.3-5.8 2.4 0 2.9 2.9 4.7 5.8 7 3-2.3 5.9-4.1 5.9-7 0-2.7-3.4-4.6-5.9-2.4Z'/%3E%3Cpath fill='%23ff477e' d='M29.2 24.3c-4.1-3.6-9.4-.6-9.4 3.9 0 4.7 4.7 7.6 9.4 11.3 4.8-3.7 9.5-6.6 9.5-11.3 0-4.5-5.4-7.5-9.5-3.9Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(145deg, #352134, #151c28);
  box-shadow: 0 0 11px rgba(255,71,126,.52), inset 0 0 0 1px rgba(255,209,227,.20);
}
.video-memo-skin-swatch--soap-bubble {
  border: 1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(ellipse at 31% 18%, rgba(255,255,255,.96) 0 7%, rgba(255,255,255,.28) 15%, transparent 27%),
    radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(255,99,189,.17) 68%, rgba(101,234,255,.30) 83%, rgba(255,255,255,.55) 100%),
    linear-gradient(180deg, rgba(101,234,255,.30), transparent 35% 65%, rgba(255,246,199,.32)),
    #17202a;
  box-shadow: 0 0 11px rgba(101,234,255,.38), inset 4px 6px 9px rgba(255,255,255,.38), inset -5px -7px 10px rgba(255,99,189,.22);
}
.video-memo-skin-swatch--snow-globe {
  border: 0;
  background:
    radial-gradient(circle at 25% 24%, #fff 0 2%, transparent 3%),
    radial-gradient(circle at 70% 18%, #fff 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 48% 38%, #c9f2ff 0 2%, transparent 3%),
    radial-gradient(circle at 82% 49%, #fff 0 1.8%, transparent 3%),
    radial-gradient(circle at 18% 55%, #c9f2ff 0 2%, transparent 3%),
    linear-gradient(168deg, transparent 0 61%, #fff 62% 69%, #c9f2ff 70% 80%, #7898d8 100%),
    radial-gradient(circle, #31516d 0 42%, #14283d 74%, #09131f 100%);
  box-shadow: 0 0 11px rgba(201,242,255,.52), inset 0 0 9px rgba(255,255,255,.22);
}
.video-memo-skin-swatch--cosmic-glitter {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23fff' d='M44 4Q45 18 58 20Q45 22 44 38Q43 22 30 20Q43 18 44 4Z'/%3E%3Cpath fill='%2300f5ff' fill-opacity='.75' d='M18 31Q19 40 27 42Q19 44 18 54Q17 44 9 42Q17 40 18 31Z'/%3E%3Cpath fill='%23ff2d6f' d='M47 41Q48 47 54 49Q48 51 47 58Q46 51 40 49Q46 47 47 41Z'/%3E%3Cpath fill='%23ffe45c' d='M17 8Q18 12 22 13Q18 14 17 19Q16 14 12 13Q16 12 17 8Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 72% 23%, #fff 0 3%, #00f5ff 4% 8%, transparent 18%),
    radial-gradient(circle at 28% 66%, #fff 0 2%, #ff2d6f 3% 7%, transparent 16%),
    radial-gradient(circle at 38% 24%, #ffe45c 0 2%, transparent 7%),
    radial-gradient(circle at 80% 68%, #ff59d6 0 2%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(0,245,255,.12), transparent 58%),
    conic-gradient(from 215deg, #15152d, #21102b, #10202e, #15152d);
  box-shadow: 0 0 12px rgba(0,245,255,.42), inset 0 0 9px rgba(255,45,111,.22);
}
.video-memo-skin-swatch--signal-interruption {
  border: 0;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,.8) 48% 51%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 22% 76%, rgba(0,0,0,.42)),
    linear-gradient(90deg, #eee 0 8%, #f4e900 8% 18%, #00d8e8 18% 28%, #1bcf35 28% 38%, #e000c7 38% 48%, transparent 48%),
    repeating-radial-gradient(circle at 75% 50%, #e8e8e8 0 1px, #252525 1px 2px, #929292 2px 3px, #090909 3px 4px),
    #15191f;
  box-shadow: 0 0 10px rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.18);
}
.video-memo-skin-swatch--terminal {
  border: 0;
  background:
    linear-gradient(180deg, transparent 0 44%, rgba(216,255,210,.78) 47% 50%, transparent 54%),
    repeating-linear-gradient(to bottom, rgba(57,255,112,.24) 0 1px, rgba(0,8,2,.62) 1px 3px),
    radial-gradient(circle, #1a8f3e 0 18%, #075825 54%, #010b04 100%);
  box-shadow: 0 0 11px rgba(57,255,112,.52), inset 0 0 12px rgba(0,0,0,.86);
}
.video-memo-skin-swatch--matrix-rain {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Crect width='46' height='46' fill='%23021208'/%3E%3Cg font-family='ui-monospace,Menlo,Consolas,monospace' font-size='7' font-weight='700' text-anchor='middle'%3E%3Ctext x='3.4' y='8' fill='%2339ff70' opacity='0.25'%3EX%3C/text%3E%3Ctext x='3.4' y='15' fill='%2339ff70' opacity='0.44'%3E7%3C/text%3E%3Ctext x='3.4' y='22' fill='%2339ff70' opacity='0.63'%3E9%3C/text%3E%3Ctext x='3.4' y='29' fill='%23eafff0'%3E5%3C/text%3E%3Ctext x='11.9' y='8' fill='%2339ff70' opacity='0.10'%3E0%3C/text%3E%3Ctext x='11.9' y='15' fill='%2339ff70' opacity='0.10'%3E1%3C/text%3E%3Ctext x='11.9' y='22' fill='%2339ff70' opacity='0.25'%3E2%3C/text%3E%3Ctext x='11.9' y='29' fill='%2339ff70' opacity='0.44'%3E1%3C/text%3E%3Ctext x='11.9' y='36' fill='%2339ff70' opacity='0.63'%3EX%3C/text%3E%3Ctext x='11.9' y='43' fill='%23eafff0'%3EK%3C/text%3E%3Ctext x='20.4' y='8' fill='%2339ff70' opacity='0.63'%3E0%3C/text%3E%3Ctext x='20.4' y='15' fill='%23eafff0'%3E2%3C/text%3E%3Ctext x='28.9' y='8' fill='%2339ff70' opacity='0.10'%3E3%3C/text%3E%3Ctext x='28.9' y='15' fill='%2339ff70' opacity='0.25'%3E0%3C/text%3E%3Ctext x='28.9' y='22' fill='%2339ff70' opacity='0.44'%3E1%3C/text%3E%3Ctext x='28.9' y='29' fill='%2339ff70' opacity='0.63'%3E9%3C/text%3E%3Ctext x='28.9' y='36' fill='%23eafff0'%3E9%3C/text%3E%3Ctext x='37.4' y='8' fill='%2339ff70' opacity='0.44'%3E1%3C/text%3E%3Ctext x='37.4' y='15' fill='%2339ff70' opacity='0.63'%3E3%3C/text%3E%3Ctext x='37.4' y='22' fill='%23eafff0'%3E1%3C/text%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle, #0a3a1c 0 46%, #04190c 100%);
  box-shadow: 0 0 12px rgba(57, 255, 112, .48), inset 0 0 10px rgba(0, 0, 0, .72);
}
/* Надпись идёт по кольцу, как в самом стиле: горизонтальные строки поперёк
   кружка читались как ошибка вёрстки. Два повтора вместо четырёх — на 46px
   мельче 8px буквы сливаются в шум.
   Буквы центрирует не dominant-baseline (WebKit на iOS его для textPath не
   применяет, и надпись уезжала к внешнему краю ленты), а сам путь: он проложен
   на полвысоты прописной ниже центра ленты, поэтому строка стоит по центру
   в любом движке. */
.video-memo-skin-swatch--ribbon-text {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cdefs%3E%3Cpath id='ribbon' d='M23 8.2a14.8 14.8 0 1 1 0 29.6 14.8 14.8 0 1 1 0-29.6'/%3E%3C/defs%3E%3Ccircle cx='23' cy='23' r='17.8' fill='none' stroke='%23f6f8ff' stroke-width='10.4'/%3E%3Ctext fill='%2311141a' font-family='Arial,Helvetica,sans-serif' font-size='8.4' font-weight='700' letter-spacing='.2'%3E%3CtextPath href='%23ribbon' startOffset='2%25'%3ETEXT %E2%80%A2 TEXT %E2%80%A2%3C/textPath%3E%3C/text%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 34% 28%, #93a9c6 0, #4d5c76 60%, #232c3e 100%);
  box-shadow: 0 0 10px rgba(246,248,255,.30), inset 0 0 0 1px rgba(255,255,255,.16);
}
.video-memo-skin-swatch--orbit { border-style: dotted; }
.video-memo-skin-swatch--rec { border-color: #ff3b30; }
.video-memo-skin-swatch--neon-pulse {
  border: 0;
  background:
    radial-gradient(circle, #20242d 0 54%, transparent 56%),
    repeating-conic-gradient(from 12deg, #fff2c4 0 1deg, #ffad54 1.5deg 3deg, transparent 3.5deg 7deg),
    radial-gradient(circle, transparent 56%, #ff642c 68%, transparent 77%);
  box-shadow: 0 0 12px rgba(255, 173, 84, .72), inset 0 0 7px rgba(255, 242, 196, .48);
}
.video-memo-skin-swatch--brutalist {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='23' r='23' fill='%23151b24'/%3E%3Cg%3E%3Crect x='20' y='2' width='6' height='6' fill='%23fff'/%3E%3Crect x='30' y='5' width='6' height='6' fill='%2355d7ff'/%3E%3Crect x='37' y='13' width='7' height='7' fill='%237c5cff'/%3E%3Crect x='38' y='24' width='6' height='6' fill='%23ff4fd8'/%3E%3Crect x='31' y='34' width='7' height='7' fill='%2355d7ff'/%3E%3Crect x='20' y='38' width='6' height='6' fill='%23fff'/%3E%3Crect x='9' y='34' width='7' height='7' fill='%23ff4fd8'/%3E%3Crect x='2' y='24' width='6' height='6' fill='%237c5cff'/%3E%3Crect x='3' y='13' width='7' height='7' fill='%2355d7ff'/%3E%3Crect x='10' y='5' width='6' height='6' fill='%23ff4fd8'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  box-shadow: 0 0 11px rgba(85,215,255,.42), inset 0 0 0 1px rgba(255,255,255,.12);
  image-rendering: pixelated;
}
.video-memo-skin-swatch--chrome {
  border: 0;
  background:
    radial-gradient(circle, #20242d 0 53%, transparent 55%),
    radial-gradient(at 78% 55%, #c299ff 0, transparent 38%),
    radial-gradient(at 24% 25%, #69f5ff 0, transparent 36%),
    radial-gradient(at 52% 88%, #ff7da7 0, transparent 39%),
    conic-gradient(from 20deg, #f9fdff, #c299ff, #69f5ff, #ffcf78, #f9fdff);
  box-shadow: 0 0 13px rgba(194,153,255,.62), inset 0 0 8px rgba(105,245,255,.35);
}