/* ============================================================================
 * frame.css — оформление рамки (общий файл для index.html и кастомизатора)
 * ----------------------------------------------------------------------------
 * Всё внутри .ov. Рамка рисуется SVG; здесь — цвета классов украшений,
 * слои, эффекты, пластины меток и анимации. Движение — только transform /
 * opacity (композитор), без анимации blur / box-shadow.
 * ========================================================================== */

.ov { position: relative; overflow: hidden; background: transparent; contain: layout paint style;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.ov * { box-sizing: border-box; }
.ov-g { position: absolute; inset: 0; pointer-events: none; }
.ov-svg { position: absolute; left: 0; top: 0; overflow: visible; display: block; }

/* ---- цвета украшений: заливки и контуры ---- */
.ov .a  { fill: var(--ov-a); }
.ov .a2 { fill: var(--ov-a2); }
.ov .a3 { fill: var(--ov-a3); }
.ov .s  { fill: var(--ov-s); }
.ov .s2 { fill: var(--ov-s2); }
.ov .s3 { fill: var(--ov-s3); }
.ov .c  { fill: var(--ov-c); }
.ov .c2 { fill: var(--ov-c2); }
.ov .h  { fill: var(--ov-h); }
.ov .k  { fill: var(--ov-k); }
.ov .o  { fill: var(--ov-o); }
.ov .o2 { fill: var(--ov-o2); }
.ov .b  { fill: var(--ov-b); }
.ov .la { fill: none; stroke: var(--ov-a); }
.ov .l2 { fill: none; stroke: var(--ov-a2); }
.ov .l3 { fill: none; stroke: var(--ov-a3); }
.ov .ls { fill: none; stroke: var(--ov-s); }
.ov .ls2 { fill: none; stroke: var(--ov-s2); }
.ov .lc { fill: none; stroke: var(--ov-c); }
.ov .lh { fill: none; stroke: var(--ov-h); }
.ov .lk { fill: none; stroke: var(--ov-k); }
.ov .lo { fill: none; stroke: var(--ov-o); }
.ov .lb { fill: none; stroke: var(--ov-b); }
.ov .nf { fill: none; }

/* ============================================================================
 *  УКРАШЕНИЯ: анимации (transform / opacity)
 *  amp — амплитуда уровня анимации, spd — скорость, decor — Decor Motion
 * ========================================================================== */
.ov .an { transform-box: fill-box; transform-origin: 50% 50%; animation-duration: calc(var(--d, 7s) / (var(--ov-spd, 1) * var(--ov-decor, 1)));
  animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.ov .an-float { --d: 7s; animation-name: ov-float; animation-direction: alternate; }
.ov .an-drift { --d: 11s; animation-name: ov-drift; animation-direction: alternate; }
.ov .an-sway  { --d: 6s; transform-origin: 50% 92%; animation-name: ov-sway; animation-direction: alternate; }
.ov .an-twinkle { --d: 3.6s; animation-name: ov-twinkle; }
.ov .an-pulse { --d: 4.4s; animation-name: ov-pulse; }
.ov .an-spin  { --d: 90s; animation-name: ov-spin; animation-timing-function: linear; }
.ov .an-flicker { --d: 2.6s; animation-name: ov-flicker; animation-timing-function: steps(1); }
@keyframes ov-float { from { transform: translateY(calc(var(--ov-amp, 1) * -3px)); } to { transform: translateY(calc(var(--ov-amp, 1) * 3px)); } }
@keyframes ov-drift { from { transform: translateX(calc(var(--ov-amp, 1) * -3px)) translateY(calc(var(--ov-amp, 1) * 1px)); } to { transform: translateX(calc(var(--ov-amp, 1) * 3px)) translateY(calc(var(--ov-amp, 1) * -1px)); } }
@keyframes ov-sway { from { transform: rotate(calc(var(--ov-amp, 1) * -2.6deg)); } to { transform: rotate(calc(var(--ov-amp, 1) * 2.6deg)); } }
@keyframes ov-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: calc(1 - 0.5 * var(--ov-amp, 1)); transform: scale(calc(1 - 0.1 * var(--ov-amp, 1))); } }
@keyframes ov-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + 0.06 * var(--ov-amp, 1))); } }
@keyframes ov-spin { to { transform: rotate(360deg); } }
@keyframes ov-flicker { 0%, 100% { opacity: 1; } 18% { opacity: 0.35; } 22% { opacity: 1; } 64% { opacity: 0.6; } 68% { opacity: 1; } }

/* Off / Pause / Lite / отдельные регуляторы */
.ov-noanim *, .ov-noanim *::before, .ov-noanim *::after { animation: none !important; }
.ov-paused *, .ov-paused *::before, .ov-paused *::after { animation-play-state: paused !important; }
.ov-nom-decor .an { animation: none !important; }
.ov-nom-glint .fx-glint, .ov-nom-glint .fx-lr { animation: none !important; opacity: 0 !important; }
.ov-nom-holo .fx-holo, .ov-nom-holo .fx-pearl { animation: none !important; }
.ov-holo-static .fx-holo, .ov-holo-static .fx-pearl, .ov-holo-static .plate-holo-strip { animation: none !important; }
.ov-nom-amb .fx-bloom, .ov-nom-amb .fx-dust, .ov-nom-amb .fx-star, .ov-nom-amb .fx-caustic { animation: none !important; }
.ov-lite .ov-g-fg .an, .ov-lite .ov-g-bg .an, .ov-lite .ov-edge .an { animation: none !important; }
.ov-lite .fx-dust, .ov-lite .fx-caustic { display: none; }

/* Тонкая тёмная кромка вокруг украшений: белые блики и светлые формы не пропадают на светлом фоне.
   Фильтр стоит на статичной группе (анимация — снаружи), в Lite выключен. */
.ov:not(.ov-lite) .ov-sh { filter: drop-shadow(0 1px 1.2px rgba(8, 12, 40, 0.42)); }

/* ============================================================================
 *  ЭФФЕКТЫ
 * ========================================================================== */
.ov-fx { position: absolute; inset: 0; }
.ov-fxm { position: absolute; inset: 0; overflow: hidden; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ov .fx { position: absolute; display: block; pointer-events: none; }

@keyframes ov-sweep { 0% { transform: translateX(calc(var(--fx-w) * -1)); } 46%, 100% { transform: translateX(var(--fx-end)); } }
.fx-lr { left: 0; top: -6%; height: 112%; width: var(--fx-w); will-change: transform;
  background: linear-gradient(100deg, transparent 6%, var(--ov-h) 50%, transparent 94%);
  opacity: calc(0.55 * var(--fx-i) * var(--fx-o)); transform: translateX(calc(var(--fx-w) * -1));
  animation: ov-sweep calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-glint))) cubic-bezier(.4, 0, .5, 1) infinite; }
.fx-lr2 { animation-delay: -9s; opacity: calc(0.4 * var(--fx-i) * var(--fx-o)); }
.fx-holo { left: 0; top: -6%; height: 112%; width: var(--fx-w); will-change: transform;
  background: linear-gradient(105deg, transparent 4%, var(--ov-o2) 24%, #ffd3f1 38%, #cffff3 52%, #d9ccff 66%, transparent 92%);
  opacity: calc(0.85 * var(--fx-i) * var(--fx-o)); transform: translateX(calc(var(--fx-w) * -1));
  animation: ov-sweep calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-holo))) cubic-bezier(.4, 0, .5, 1) infinite; }
@keyframes ov-shimmer { from { transform: translate(-3%, -2%) scale(1.02); } to { transform: translate(3%, 2%) scale(1.06); } }
.fx-pearl { inset: -10%; will-change: transform;
  background: radial-gradient(ellipse 28% 38% at 24% 30%, var(--ov-h) 0, transparent 70%), radial-gradient(ellipse 24% 34% at 74% 70%, var(--ov-o2) 0, transparent 70%),
    radial-gradient(ellipse 18% 26% at 52% 12%, var(--ov-h) 0, transparent 70%);
  opacity: calc(0.5 * var(--fx-i) * var(--fx-o));
  animation: ov-shimmer calc(10s / (var(--ov-spd) * var(--fx-s) * var(--ov-holo))) ease-in-out infinite alternate; }
@keyframes ov-caustic { to { transform: translate(var(--tile), var(--tile)); } }
@keyframes ov-caustic2 { to { transform: translate(calc(var(--tile) * -1), var(--tile)); } }
.fx-caustic { left: calc(var(--tile) * -1); top: calc(var(--tile) * -1); right: 0; bottom: 0; will-change: transform;
  background-image: var(--caustic);
  background-size: var(--tile) var(--tile); opacity: calc(0.45 * var(--fx-i) * var(--fx-o));
  animation: ov-caustic calc(26s / (var(--ov-spd) * var(--fx-s) * var(--ov-amb))) linear infinite; }
.fx-caustic2 { opacity: calc(0.3 * var(--fx-i) * var(--fx-o)); animation-name: ov-caustic2; animation-duration: calc(34s / (var(--ov-spd) * var(--fx-s) * var(--ov-amb))); }
@keyframes ov-breathe { from { opacity: calc(0.25 * var(--fx-i) * var(--fx-o)); } to { opacity: calc(0.95 * var(--fx-i) * var(--fx-o)); } }
.fx-bloom { left: 0; top: 0; opacity: calc(0.3 * var(--fx-i) * var(--fx-o)); overflow: visible;
  animation: ov-breathe calc(7s / (var(--ov-spd) * var(--fx-s) * var(--ov-amb))) ease-in-out infinite alternate; }
@keyframes ov-scan { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.fx-scan { left: 0; top: 0; width: calc(70px * var(--ov-k-px)); height: calc(3px * var(--ov-k-px)); border-radius: 3px; offset-rotate: auto; offset-anchor: 100% 50%;
  background: linear-gradient(90deg, transparent, var(--ov-h)); box-shadow: 0 0 calc(8px * var(--ov-k-px)) var(--ov-a2); opacity: calc(var(--fx-i) * var(--fx-o));
  animation: ov-scan calc(var(--fx-d) / var(--ov-spd)) linear infinite; }
.fx-scan2 { animation-delay: -4s; opacity: calc(0.6 * var(--fx-i) * var(--fx-o)); }
@keyframes ov-glint { 0%, 14%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); } 6% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(20deg); } }
.fx-glint { transform: translate(-50%, -50%); opacity: 0;
  background: radial-gradient(circle, var(--ov-h) 0 12%, transparent 40%), linear-gradient(90deg, transparent 0, var(--ov-h) 50%, transparent 100%) center / 100% 8% no-repeat, linear-gradient(0deg, transparent 0, var(--ov-h) 50%, transparent 100%) center / 8% 100% no-repeat;
  animation: ov-glint calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-glint))) ease-in-out infinite; animation-delay: var(--fx-delay); }
@keyframes ov-tw { 0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.5); } 50% { opacity: calc(var(--fx-i) * var(--fx-o)); transform: translate(-50%, -50%) scale(1); } }
.fx-star { transform: translate(-50%, -50%); background: var(--ov-h); opacity: 0.2;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: ov-tw calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-amb))) ease-in-out infinite; animation-delay: var(--fx-delay); }
@keyframes ov-dust { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: calc(0.9 * var(--fx-i) * var(--fx-o)); } 100% { opacity: 0; transform: translate(var(--fx-dx), var(--fx-dy)); } }
.fx-dust { border-radius: 50%; background: var(--ov-a2); opacity: 0;
  animation: ov-dust calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-amb))) linear infinite; animation-delay: var(--fx-delay); }
@keyframes ov-pix { 0%, 100% { opacity: 0; } 30% { opacity: calc(var(--fx-i) * var(--fx-o)); } 55% { opacity: 0; } 75% { opacity: calc(0.7 * var(--fx-i) * var(--fx-o)); } }
.fx-pix { background: var(--ov-a2); opacity: 0; animation: ov-pix calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s))) steps(1) infinite; animation-delay: var(--fx-delay); }

/* Alert pulse: один импульс, не постоянное свечение */
@keyframes ov-alertsweep { 0% { background-position: -70% 0; opacity: 0; } 12% { opacity: 1; } 100% { background-position: 170% 0; opacity: 0; } }
.fx-alert { left: 0; top: 0; right: 0; bottom: 0; opacity: 0;
  background: linear-gradient(100deg, transparent 10%, var(--ov-h) 38%, #ffd3f1 50%, #cffff3 62%, transparent 90%) -70% 0 / 46% 100% no-repeat; }
.ov-alert .fx-alert { animation: ov-alertsweep 1.5s cubic-bezier(.3, .1, .3, 1) 1; }
@keyframes ov-alertglow { 0%, 100% { filter: none; } 30% { filter: brightness(1.55) saturate(1.25); } }
.ov-alert .ov-g-frame { animation: ov-alertglow 1.5s ease-out 1; }
/* Состояния */
.ov[data-state="highlight"] .ov-g-hi { filter: brightness(1.2); }
@keyframes ov-livepulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.65; } }
.ov[data-state="live"] .ov-status .st-ind { animation: ov-livepulse 1.5s ease-in-out infinite; }
.ov-noanim .ov-status .st-ind, .ov-paused .ov-status .st-ind { animation: none !important; }

/* ============================================================================
 *  МЕТКИ, ПЛАСТИНЫ, СТАТУС
 * ========================================================================== */
.ov-label { position: absolute; white-space: nowrap; line-height: 1; display: flex; align-items: center; justify-content: center;
  padding: 0.5em var(--pad, 14px); color: var(--lbl-c, #fff); font-kerning: normal; }
.ov-label .pl-t { position: relative; z-index: 2; }
.ov-label::before, .ov-label::after { content: ""; position: absolute; pointer-events: none; }

.plate-none { padding: 0 0.15em; text-shadow: 0 0 2px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.25); }
.plate-glass-tab { border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.07) 56%, rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -0.5em 0.8em rgba(20, 30, 70, 0.14), 0 0.35em 1em rgba(10, 16, 40, 0.28);
  text-shadow: 0 1px 2px rgba(10, 16, 40, 0.5); overflow: hidden; }
.plate-glass-tab::before { left: 8%; right: 8%; top: 7%; height: 38%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); }
.plate-glass-tab::after { inset: 0; border-radius: inherit; background: var(--ov-a); opacity: 0.16; }
.plate-crystal { background: linear-gradient(135deg, var(--ov-a2) 0%, var(--ov-a) 46%, var(--ov-a3) 100%);
  clip-path: polygon(0.7em 0, calc(100% - 0.7em) 0, 100% 50%, calc(100% - 0.7em) 100%, 0.7em 100%, 0 50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); text-shadow: 0 1px 2px rgba(5, 8, 30, 0.55); padding-inline: calc(var(--pad, 14px) + 0.5em); }
.plate-crystal::before { inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 18%, transparent 18% 42%, rgba(255, 255, 255, 0.22) 42% 50%, transparent 50% 74%, rgba(0, 0, 0, 0.16) 74% 100%); }
.plate-holo-strip { border-radius: 0.2em; color: var(--lbl-c, #2a2750); padding: 0.4em var(--pad, 14px);
  background: linear-gradient(100deg, #fdfbff, var(--ov-o2) 22%, #cffff3 44%, #ffd3f1 66%, var(--ov-o2) 88%, #fdfbff); background-size: 220% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0.3em 0.9em rgba(10, 16, 40, 0.22);
  animation: ov-strip calc(12s / (var(--ov-spd, 1) * var(--ov-holo, 1))) ease-in-out infinite alternate; text-shadow: none; }
@keyframes ov-strip { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.plate-cyber { color: var(--lbl-c, var(--ov-a2)); background: linear-gradient(90deg, rgba(7, 12, 28, 0.82), rgba(7, 12, 28, 0.5));
  border-left: 0.2em solid var(--ov-a); clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 100%, 0 100%); padding-right: calc(var(--pad, 14px) + 0.7em);
  text-shadow: 0 0 0.6em var(--ov-a); }
.plate-cyber::after { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px); }
.plate-ribbon { background: linear-gradient(180deg, var(--ov-a2), var(--ov-a) 55%, var(--ov-a3));
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.8em) 50%, 100% 100%, 0 100%, 0.8em 50%); padding-inline: calc(var(--pad, 14px) + 0.9em);
  text-shadow: 0 1px 2px rgba(5, 8, 30, 0.5); }
.plate-ribbon::before { left: 0; right: 0; top: 0; height: 36%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent); }
.plate-editorial { padding: 0.5em 0 0; color: var(--lbl-c, var(--ov-b)); font-weight: 500; border-top: 1px solid currentColor; text-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.5); }
.plate-editorial::before { left: 0; top: -0.28em; width: 2.2em; height: 0.28em; background: var(--ov-c); }
.plate-pearl { border-radius: 999px; color: var(--lbl-c, #3a3558);
  background: radial-gradient(ellipse at 28% 22%, #fff 0, var(--ov-a2) 50%, var(--ov-a) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -0.4em 0.7em rgba(60, 40, 110, 0.18), 0 0.3em 0.9em rgba(10, 16, 40, 0.25); padding-left: calc(var(--pad, 14px) + 0.9em); text-shadow: none; }
.plate-pearl::before { left: 0.7em; top: 50%; width: 0.7em; height: 0.7em; margin-top: -0.35em; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, var(--ov-o2) 55%, var(--ov-s)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); }
.plate-gothic { color: var(--lbl-c, #f3dc9c); background: linear-gradient(180deg, #3d2c45, #1a1220);
  clip-path: polygon(0 50%, 0.9em 0, calc(100% - 0.9em) 0, 100% 50%, calc(100% - 0.9em) 100%, 0.9em 100%); padding-inline: calc(var(--pad, 14px) + 0.9em);
  box-shadow: inset 0 0 0 0.12em #c9a24a, inset 0 0 0 0.26em rgba(0, 0, 0, 0.6); text-shadow: 0 1px 2px #000; }
.plate-pixel { color: var(--lbl-c, #fff); background: var(--ov-a); border: 0.2em solid #140d26; border-radius: 0; text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0.16em 0.16em 0 rgba(255, 255, 255, 0.55), inset -0.16em -0.16em 0 rgba(0, 0, 0, 0.28); }
.plate-bubble { border-radius: 999px; background: linear-gradient(180deg, var(--ov-a2), var(--ov-a));
  box-shadow: inset 0 0.18em 0 rgba(255, 255, 255, 0.75), inset 0 -0.22em 0 rgba(0, 0, 0, 0.14), 0 0.3em 0.8em rgba(10, 16, 40, 0.25); text-shadow: 0 1px 2px rgba(5, 8, 30, 0.45); padding-inline: calc(var(--pad, 14px) + 0.3em); }
.plate-bubble::before { left: 12%; top: 14%; width: 22%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, 0.7); transform: rotate(-20deg); }
.plate-metal { color: var(--lbl-c, #4a3208); border-radius: 0.3em; background: linear-gradient(180deg, #fff6d6, #f2cf7a 44%, #b8862c 56%, #f0c868);
  box-shadow: inset 0 0 0 1px #6b4a10, inset 0 0.1em 0 rgba(255, 255, 255, 0.8), 0 0.3em 0.8em rgba(10, 16, 40, 0.3); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }

/* статус */
.st-w { display: inline-flex; align-items: center; gap: 0.55em; position: relative; z-index: 2; }
.st-ind { display: inline-block; width: 0.78em; height: 0.78em; flex: none; position: relative; --st: var(--st-c, var(--ov-c)); }
.st-dot { border-radius: 50%; background: var(--st); box-shadow: 0 0 0.6em var(--st); }
.st-ring { border-radius: 50%; border: 0.17em solid var(--st); box-shadow: 0 0 0.45em var(--st), inset 0 0 0.3em var(--st); }
.st-crystal { background: linear-gradient(135deg, #fff 0 26%, var(--st) 27% 60%, rgba(0, 0, 0, 0.35) 61%); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); width: 0.9em; height: 0.9em; }
.st-pearl { border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, var(--st) 62%, rgba(0, 0, 0, 0.35)); }
.st-pulse { border-radius: 50%; background: var(--st); }
.st-pulse::after { content: ""; position: absolute; inset: -0.3em; border-radius: 50%; border: 0.13em solid var(--st); opacity: 0; animation: ov-ring 1.8s ease-out infinite; }
@keyframes ov-ring { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
.ov-noanim .st-pulse::after, .ov-paused .st-pulse::after { animation: none; }
.st-img { height: 1.25em; width: auto; display: block; }
.st-anim-pulse .st-ind { animation: ov-livepulse 1.8s ease-in-out infinite; }
.st-anim-blink .st-ind { animation: ov-blink 1.4s steps(1) infinite; }
@keyframes ov-blink { 50% { opacity: 0.15; } }

/* ============================================================================
 *  v2 · подвески, орбиты, новые эффекты, Foreground Glass, пластины и значки
 * ========================================================================== */
.ov { --caustic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M0 36Q25 12 50 36T100 36T150 36T200 36' stroke-width='2.2' opacity='.9'/%3E%3Cpath d='M0 88Q25 62 50 88T100 88T150 88T200 88' stroke-width='1.4' opacity='.7'/%3E%3Cpath d='M0 140Q25 118 50 140T100 140T150 140T200 140' stroke-width='2.4' opacity='.85'/%3E%3Cpath d='M0 188Q25 164 50 188T100 188T150 188T200 188' stroke-width='1.2' opacity='.6'/%3E%3Cpath d='M30 0Q50 25 30 50T30 100T30 150T30 200' stroke-width='1.2' opacity='.55'/%3E%3Cpath d='M120 0Q140 25 120 50T120 100T120 150T120 200' stroke-width='1.8' opacity='.7'/%3E%3C/svg%3E"); }

/* подвески качаются вокруг точки подвеса; орбиты — очень медленный круг */
@keyframes ov-swing { from { transform: rotate(calc(var(--ov-amp, 1) * var(--sw, 1) * -4.5deg)); } to { transform: rotate(calc(var(--ov-amp, 1) * var(--sw, 1) * 4.5deg)); } }
.ov .an-swing { animation: ov-swing calc(5.2s / (var(--ov-spd, 1) * var(--ov-decor, 1))) ease-in-out infinite alternate; }
@keyframes ov-orbit { to { transform: rotate(360deg); } }
.ov .an-orbit { animation: ov-orbit 80s linear infinite; }
.ov-lite .an-swing, .ov-lite .an-orbit { animation: none !important; }
.ov-nom-decor .an-swing, .ov-nom-decor .an-orbit { animation: none !important; }

/* Glass Sweep — широкий мягкий проход (скорость бликов: --ov-hs) */
.fx-gs { left: 0; top: -6%; height: 112%; width: var(--fx-w); will-change: transform;
  background: linear-gradient(95deg, transparent 0, var(--ov-h) 46%, var(--ov-h) 54%, transparent 100%);
  opacity: calc(0.32 * var(--fx-i) * var(--fx-o)); transform: translateX(calc(var(--fx-w) * -1));
  animation: ov-sweep calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-glint) * var(--ov-hs, 1))) cubic-bezier(.4, 0, .5, 1) infinite; }
.fx-lr, .fx-holo { animation-duration: calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-glint) * var(--ov-hs, 1))); }
/* Crystal Refraction — тонкие радужные линии дрейфуют по полосе */
@keyframes ov-refr { from { transform: translateX(0); } to { transform: translateX(calc(var(--fx-step) * -5)); } }
.fx-refr { left: 0; top: -10%; height: 120%; width: calc(var(--fx-w) + var(--fx-step) * 6); will-change: transform;
  background: repeating-linear-gradient(112deg, transparent 0, transparent calc(var(--fx-step) - 3px), var(--ov-o2) calc(var(--fx-step) - 3px), var(--ov-o2) calc(var(--fx-step) - 2px),
    #cffff3 calc(var(--fx-step) - 2px), #cffff3 calc(var(--fx-step) - 1px), #ffd3f1 calc(var(--fx-step) - 1px), #ffd3f1 var(--fx-step));
  opacity: calc(0.55 * var(--fx-i) * var(--fx-o));
  animation: ov-refr calc(18s / (var(--ov-spd) * var(--fx-s) * var(--ov-glint))) ease-in-out infinite alternate; }
/* Edge Light Travel */
.fx-elt { left: 0; top: 0; width: var(--fx-len); height: var(--fx-th); border-radius: 999px; offset-rotate: auto; offset-anchor: 100% 50%;
  background: linear-gradient(90deg, transparent, var(--ov-h) 72%, #fff); opacity: calc(0.75 * var(--fx-i) * var(--fx-o));
  animation: ov-scan calc(var(--fx-d) / (var(--ov-spd) * var(--ov-hs, 1))) linear infinite; }
.fx-elt2 { animation-delay: calc(var(--fx-d) / -2); opacity: calc(0.5 * var(--fx-i) * var(--fx-o)); }
/* Butterfly Glow */
@keyframes ov-bgp { from { opacity: calc(0.25 * var(--fx-i) * var(--fx-o)); transform: translate(-50%, -50%) scale(0.9); } to { opacity: calc(0.75 * var(--fx-i) * var(--fx-o)); transform: translate(-50%, -50%) scale(1.08); } }
.fx-bg { transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--ov-c2) 0, transparent 66%); opacity: 0.3;
  animation: ov-bgp calc(4.6s / (var(--ov-spd) * var(--fx-s) * var(--ov-amb))) ease-in-out infinite alternate; animation-delay: var(--fx-delay); }
/* Magic Pulse — кольца от углов */
@keyframes ov-mp { 0% { transform: translate(-50%, -50%) scale(0.08); opacity: 0; } 15% { opacity: calc(0.8 * var(--fx-i) * var(--fx-o)); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.fx-mp { transform: translate(-50%, -50%) scale(0.08); border-radius: 50%; border: 2px solid var(--ov-c2); box-shadow: 0 0 10px var(--ov-c), inset 0 0 8px var(--ov-c); opacity: 0;
  animation: ov-mp calc(var(--fx-t) / (var(--ov-spd) * var(--fx-s) * var(--ov-amb))) ease-out infinite; animation-delay: var(--fx-delay); }
.ov-lite .fx-mp { box-shadow: none; }

/* Foreground Glass: поверх рамки, но только по полосе */
.ov-fg-glass { position: absolute; inset: 0; overflow: hidden; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ov .fg { position: absolute; display: block; pointer-events: none; }
.fg-refl { left: 0; top: 0; right: 0; bottom: 0; opacity: calc(0.9 * var(--fg-o));
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.28) 100%); }
.fg-sweep { left: 0; top: -6%; height: 112%; width: var(--fg-w); will-change: transform; transform: translateX(calc(var(--fg-w) * -1));
  background: linear-gradient(100deg, transparent 6%, var(--ov-h) 50%, transparent 94%); opacity: calc(0.5 * var(--fg-o));
  animation: ov-sweep calc(18s / (var(--ov-spd) * var(--fg-s) * var(--ov-hs, 1))) cubic-bezier(.4, 0, .5, 1) infinite; }
.fg-sweep2 { animation-delay: -9s; width: calc(var(--fg-w) * 0.5); }
@keyframes ov-film { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.fg-film { left: 0; top: 0; right: 0; bottom: 0; opacity: calc(0.62 * var(--fg-o)); background-size: 300% 100%;
  background-image: linear-gradient(118deg, var(--ov-o2), #ffd3f1, #cffff3, #d9ccff, var(--ov-o2), #ffe9c9, var(--ov-o2));
  animation: ov-film calc(34s / (var(--ov-spd) * var(--fg-s) * var(--ov-holo, 1))) ease-in-out infinite alternate; }
.fg-water { left: calc(var(--tile) * -1); top: calc(var(--tile) * -1); right: 0; bottom: 0; background-image: var(--caustic); background-size: var(--tile) var(--tile);
  opacity: calc(0.42 * var(--fg-o)); will-change: transform; animation: ov-caustic calc(30s / (var(--ov-spd) * var(--fg-s) * var(--ov-amb, 1))) linear infinite; }
.fg-water2 { opacity: calc(0.26 * var(--fg-o)); animation-name: ov-caustic2; }
.fg-facets { left: 0; top: 0; opacity: calc(1.2 * var(--fg-o)); }
.fg-gloss { left: 0; top: 0; right: 0; bottom: 0; opacity: calc(0.9 * var(--fg-o));
  background: radial-gradient(ellipse 60% 38% at 22% 0%, rgba(255, 255, 255, 0.65), transparent 70%), radial-gradient(ellipse 40% 30% at 90% 100%, rgba(255, 255, 255, 0.35), transparent 70%); }
.ov-noanim .fg, .ov-paused .fg { animation: none !important; }
.ov-lite .fg-water { display: none; }
.fx-caustic { background-image: var(--caustic); }

/* ---- декоративные значки у метки, подчёркивания, верхний акцент ---- */
.lb-dec { display: inline-flex; flex: none; width: calc(1.25em * var(--lbs, 1)); height: calc(1.25em * var(--lbs, 1)); margin: 0 0.45em; position: relative; z-index: 2; }
.lb-dec svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(8, 12, 40, 0.4)); }
.lb-dec.lb-l { margin-left: 0; }
.lb-dec.lb-r { margin-right: 0; }
.lb-top { position: absolute; left: 50%; top: calc(-0.85em * var(--lbs, 1)); width: calc(1.2em * var(--lbs, 1)); height: calc(1.2em * var(--lbs, 1)); transform: translateX(-50%); z-index: 3; }
.lb-top svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(8, 12, 40, 0.4)); }
.lb-ul { position: absolute; left: 8%; right: 8%; bottom: -0.28em; height: 0.24em; background: var(--ov-c2); z-index: 1; opacity: 0.95;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: auto 100%; mask-size: auto 100%; }
.lb-ul-line { height: 0.09em; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--ov-c2) 14%, var(--ov-c2) 86%, transparent); }
.lb-ul-double { height: 0.26em; background: linear-gradient(var(--ov-c2), var(--ov-c2)) top / 100% 0.07em no-repeat, linear-gradient(var(--ov-c2), var(--ov-c2)) bottom / 100% 0.07em no-repeat; }
.lb-ul-dots { height: 0.2em; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3'/%3E%3C/svg%3E"); -webkit-mask-size: 0.3em 100%; mask-size: 0.3em 100%; }
.lb-ul-pearls { height: 0.3em; bottom: -0.34em; background: radial-gradient(circle at 35% 30%, #fff 0, var(--ov-a2) 55%, var(--ov-a) 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4.4'/%3E%3C/svg%3E"); -webkit-mask-size: 0.36em 100%; mask-size: 0.36em 100%; }
.lb-ul-wave { height: 0.3em; bottom: -0.34em; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5Q5 0 10 5T20 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5Q5 0 10 5T20 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); -webkit-mask-size: 0.9em 100%; mask-size: 0.9em 100%; }
.lb-ul-stars { height: 0.36em; bottom: -0.4em; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z'/%3E%3C/svg%3E"); -webkit-mask-size: 0.6em 100%; mask-size: 0.6em 100%; }

/* ---- новые пластины меток ---- */
.plate-liquid-tab { border-radius: 999px; color: var(--lbl-c, #fff);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0.12em 0.2em rgba(255, 255, 255, 0.85), inset 0 -0.35em 0.7em rgba(20, 30, 90, 0.18), 0 0.6em 0.9em -0.2em rgba(10, 16, 50, 0.5), 0 0 1.1em rgba(130, 160, 255, 0.25);
  text-shadow: 0 1px 2px rgba(10, 16, 40, 0.55); padding-inline: calc(var(--pad, 14px) + 0.25em); }
.plate-liquid-tab::before { left: 10%; top: 8%; width: 38%; height: 30%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); transform: rotate(-4deg); }
.plate-liquid-tab::after { left: 22%; right: 22%; bottom: -0.55em; height: 0.4em; border-radius: 50%; background: radial-gradient(ellipse, rgba(10, 16, 50, 0.35), transparent 70%); z-index: -1; }
.plate-crystal-susp { color: var(--lbl-c, #fff); background: linear-gradient(135deg, var(--ov-a2) 0%, var(--ov-a) 50%, var(--ov-a3) 100%);
  clip-path: polygon(0 0.35em, 0.5em 0, calc(100% - 0.5em) 0, 100% 0.35em, 100% calc(100% - 0.35em), calc(100% - 0.5em) 100%, 0.5em 100%, 0 calc(100% - 0.35em));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); text-shadow: 0 1px 2px rgba(5, 8, 30, 0.55); margin-top: 0.9em; padding-inline: calc(var(--pad, 14px) + 0.3em); }
.plate-crystal-susp::before { inset: 0; background: linear-gradient(112deg, rgba(255, 255, 255, 0.45) 0 14%, transparent 14% 40%, rgba(255, 255, 255, 0.2) 40% 46%, transparent 46% 70%, rgba(0, 0, 0, 0.16) 70% 100%); }
.plate-crystal-susp::after { left: 12%; right: 12%; top: -1.1em; height: 1.1em; z-index: -1; background:
  linear-gradient(var(--ov-a2), var(--ov-a2)) left / 1px 100% no-repeat, linear-gradient(var(--ov-a2), var(--ov-a2)) right / 1px 100% no-repeat; }
.plate-pearl-chip { border-radius: 0.7em; color: var(--lbl-c, #3a3558); padding: 0.45em calc(var(--pad, 14px) * 0.8); text-shadow: none;
  background: radial-gradient(ellipse at 25% 20%, #fff 0, #fff7fb 35%, var(--ov-a2) 100%);
  box-shadow: inset 0 0 0 0.09em rgba(255, 255, 255, 0.95), inset 0 -0.3em 0.6em rgba(80, 50, 120, 0.15), 0 0.25em 0.6em rgba(10, 16, 40, 0.25); }
.plate-pearl-chip::before { right: 0.35em; top: 50%; width: 0.38em; height: 0.38em; margin-top: -0.19em; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--ov-o2) 60%, var(--ov-s)); }
.plate-holo-foil { color: var(--lbl-c, #231f45); text-shadow: none; padding: 0.42em calc(var(--pad, 14px) + 0.4em);
  clip-path: polygon(0.5em 0, 100% 0, calc(100% - 0.5em) 100%, 0 100%);
  background: linear-gradient(105deg, #fffaff, var(--ov-o2) 18%, #cffff3 38%, #ffd3f1 58%, #d9ccff 78%, #fffaff); background-size: 240% 100%;
  animation: ov-strip calc(10s / (var(--ov-spd, 1) * var(--ov-holo, 1))) ease-in-out infinite alternate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.plate-holo-foil::before { inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 6px); opacity: 0.6; }
.plate-glass-ribbon { color: var(--lbl-c, #fff); padding-inline: calc(var(--pad, 14px) + 1em); text-shadow: 0 1px 2px rgba(5, 8, 30, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)), linear-gradient(var(--ov-a), var(--ov-a));
  background-blend-mode: normal; clip-path: polygon(0 0, 100% 0, calc(100% - 0.9em) 50%, 100% 100%, 0 100%, 0.9em 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.plate-glass-ribbon::before { left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent); }
.plate-botanical { color: var(--lbl-c, #fff); border-radius: 1.3em 0.35em 1.3em 0.35em; padding-inline: calc(var(--pad, 14px) + 0.3em); text-shadow: 0 1px 2px rgba(5, 30, 20, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06)), linear-gradient(var(--ov-s), var(--ov-s));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0.3em 0.7em rgba(10, 16, 40, 0.25); }
.plate-botanical::before { left: 0.8em; right: 0.8em; bottom: 0.32em; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); }
.plate-butterfly { color: var(--lbl-c, #fff); border-radius: 999px; padding-inline: calc(var(--pad, 14px) + 1em); text-shadow: 0 1px 2px rgba(10, 8, 40, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06)), linear-gradient(var(--ov-s), var(--ov-s)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65); }
.plate-butterfly::before, .plate-butterfly::after { top: 50%; width: 1.5em; height: 1.2em; margin-top: -0.6em; background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.85), var(--ov-c) 70%);
  border-radius: 80% 20% 80% 20%; opacity: 0.9; }
.plate-butterfly::before { left: -1.1em; transform: rotate(-20deg); }
.plate-butterfly::after { right: -1.1em; transform: scaleX(-1) rotate(-20deg); }
.plate-celestial { color: var(--lbl-c, #f6e7b0); border-radius: 0.25em; padding-inline: calc(var(--pad, 14px) + 0.4em); text-shadow: 0 0 0.6em rgba(255, 220, 140, 0.6);
  background: radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 20%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px), linear-gradient(135deg, rgba(14, 18, 52, 0.85), rgba(32, 24, 70, 0.78));
  box-shadow: inset 0 0 0 1px rgba(245, 214, 140, 0.85), inset 0 0 0 0.22em rgba(14, 18, 52, 0.7), inset 0 0 0 calc(0.22em + 1px) rgba(245, 214, 140, 0.35); }
.plate-gothic-name { color: var(--lbl-c, #ecd9a2); border-radius: 0.15em; padding-inline: calc(var(--pad, 14px) + 0.5em); text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #4a3a52, #1d1424 55%, #120c18); clip-path: polygon(0.45em 0, calc(100% - 0.45em) 0, 100% 0.45em, 100% calc(100% - 0.45em), calc(100% - 0.45em) 100%, 0.45em 100%, 0 calc(100% - 0.45em), 0 0.45em);
  box-shadow: inset 0 0 0 0.1em #b8903f, inset 0 0 0 0.2em #1a1220, inset 0 0.3em 0.4em rgba(255, 255, 255, 0.08); }
.plate-gothic-name::before { left: 0.5em; top: 50%; width: 0.22em; height: 0.22em; margin-top: -0.11em; border-radius: 50%; background: #d6b45a; box-shadow: calc(100% + 0px) 0 0 #d6b45a; }
.plate-gothic-name::after { right: 0.5em; top: 50%; width: 0.22em; height: 0.22em; margin-top: -0.11em; border-radius: 50%; background: #d6b45a; }
.plate-cyber-id { color: var(--lbl-c, var(--ov-a2)); padding: 0.4em calc(var(--pad, 14px) + 1.6em) 0.4em calc(var(--pad, 14px) + 0.6em); text-shadow: 0 0 0.5em var(--ov-a);
  background: linear-gradient(90deg, rgba(7, 12, 28, 0.88), rgba(7, 12, 28, 0.55)); clip-path: polygon(0.6em 0, 100% 0, 100% calc(100% - 0.6em), calc(100% - 0.6em) 100%, 0 100%, 0 0.6em);
  box-shadow: inset 0 0 0 1px var(--ov-a); }
.plate-cyber-id::before { left: 0; top: 0; bottom: 0; width: 0.3em; background: var(--ov-a); }
.plate-cyber-id::after { right: 0.5em; top: 50%; width: 1em; height: 0.5em; margin-top: -0.25em; background: repeating-linear-gradient(90deg, var(--ov-a) 0 0.12em, transparent 0.12em 0.24em); opacity: 0.8; }
.plate-pixel-caption { color: var(--lbl-c, var(--ov-c2)); background: #0b0716; border-radius: 0; padding: 0.4em calc(var(--pad, 14px) + 0.2em); text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 -0.2em 0 0 var(--ov-a), 0 0.2em 0 0 var(--ov-a), -0.2em 0 0 0 var(--ov-a), 0.2em 0 0 0 var(--ov-a), -0.2em -0.2em 0 -0.05em #0b0716, 0.2em -0.2em 0 -0.05em #0b0716, 0.35em 0.35em 0 0 rgba(0, 0, 0, 0.35); }
.plate-magic-scroll { color: var(--lbl-c, #fff); padding-inline: calc(var(--pad, 14px) + 1.1em); border-radius: 0.4em; text-shadow: 0 1px 2px rgba(20, 8, 50, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07)), linear-gradient(var(--ov-s), var(--ov-s));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 0.35em 0.8em rgba(10, 16, 50, 0.28); }
.plate-magic-scroll::before, .plate-magic-scroll::after { top: -0.15em; bottom: -0.15em; width: 0.9em; border-radius: 50%; background: radial-gradient(ellipse at 40% 50%, rgba(255, 255, 255, 0.85), var(--ov-a2) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.plate-magic-scroll::before { left: -0.45em; }
.plate-magic-scroll::after { right: -0.45em; }
.plate-glass-tab { overflow: visible; }
.plate-glass-tab::after { border-radius: inherit; }

/* ---- новые индикаторы статуса ---- */
.st-liquid { border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 12%, rgba(255, 255, 255, 0.2) 30%, var(--st) 70%, rgba(0, 0, 0, 0.35)); box-shadow: 0 0 0.55em var(--st), inset 0 0 0.25em rgba(255, 255, 255, 0.8); }
.st-lens { border-radius: 50%; background: conic-gradient(from 20deg, #ffd3f1, #cffff3, #d9ccff, #ffe9c9, #ffd3f1); box-shadow: 0 0 0.5em rgba(220, 200, 255, 0.9), inset 0 0 0 0.1em rgba(255, 255, 255, 0.9); }
.st-lens::after { content: ""; position: absolute; left: 24%; top: 18%; width: 34%; height: 24%; border-radius: 50%; background: rgba(255, 255, 255, 0.85); transform: rotate(-25deg); }
.st-led { background: var(--st); border-radius: 0; width: 0.7em; height: 0.7em; box-shadow: 0 0 0.5em var(--st), inset 0.14em 0.14em 0 rgba(255, 255, 255, 0.75), inset -0.12em -0.12em 0 rgba(0, 0, 0, 0.3); }
.st-mask { background: var(--st); width: 0.95em; height: 0.95em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 0 0.3em var(--st)); }
.st-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3 7.2 7.8.6-6 5 1.9 7.6L12 17.7l-6.7 4.2 1.9-7.6-6-5 7.8-.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3 7.2 7.8.6-6 5 1.9 7.6L12 17.7l-6.7 4.2 1.9-7.6-6-5 7.8-.6z'/%3E%3C/svg%3E"); }
.st-heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5C5 16 1.5 12 1.5 7.8 1.5 4.6 4 2.5 6.8 2.5c2 0 3.8 1.1 5.2 3.2 1.4-2.1 3.2-3.2 5.2-3.2 2.8 0 5.3 2.1 5.3 5.3 0 4.2-3.5 8.200-10.500 13.700z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5C5 16 1.5 12 1.5 7.8 1.5 4.6 4 2.5 6.8 2.5c2 0 3.8 1.1 5.2 3.2 1.4-2.1 3.2-3.2 5.2-3.2 2.8 0 5.3 2.1 5.3 5.3 0 4.2-3.5 8.200-10.500 13.700z'/%3E%3C/svg%3E"); }
.st-node { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5l9.100 5.250v10.500L12 22.500 2.900 17.250V6.750zM12 5l-6 3.500v7L12 19l6-3.500v-7zM12 9.500a2.500 2.500 0 1 0 0 5 2.500 2.500 0 0 0 0-5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5l9.100 5.250v10.500L12 22.500 2.900 17.250V6.750zM12 5l-6 3.500v7L12 19l6-3.500v-7zM12 9.500a2.500 2.500 0 1 0 0 5 2.500 2.500 0 0 0 0-5z'/%3E%3C/svg%3E"); }
.st-rune { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.500v19M8 2.500l9 6.500-9 6.500M8 12.500l7 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.500v19M8 2.500l9 6.500-9 6.500M8 12.500l7 5'/%3E%3C/svg%3E"); }
.st-orn { display: inline-flex; width: 1.1em; height: 1.1em; flex: none; }
.st-orn svg { width: 100%; height: 100%; overflow: visible; }
.ov-lite .st-mask { filter: none; }

/* ---- Pixel Surface: без сглаживания ---- */
.ov[data-material="pixelsurf"] .ov-svg { shape-rendering: crispEdges; }

/* Performance Mode: всё, что в v2 использует фильтры, упрощается */
.ov-lite .lb-dec svg, .ov-lite .lb-top svg { filter: none; }
.ov-lite .fg-sweep2, .ov-lite .fx-elt2 { display: none; }
.ov-lite .fg-film { animation: none; }