/* Optional preview layer. Existing dimensions, actions, typography and focus stay owned by R4. */
html[data-interface="modern"] body { --liquid-colour: 118, 177, 148; }
html[data-interface="modern"] body[data-company="kozlov"] { --liquid-colour: 122, 171, 214; }
html[data-interface="modern"] .liquid-host { position: relative; isolation: isolate; }
html[data-interface="modern"] .liquid-host > .liquid-surface {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  overflow: hidden; contain: paint; pointer-events: none; user-select: none; opacity: 0;
}
.liquid-surface > span { position: absolute; inset: -45% -30%; pointer-events: none; border-radius: 45%; }
.liquid-flow {
  background: radial-gradient(ellipse at 34% 46%, rgba(var(--liquid-colour),.68), rgba(var(--liquid-colour),.20) 28%, transparent 53%), radial-gradient(ellipse at 72% 60%, #fff0 15%, #fffc 38%, #fff0 58%);
  transform-origin: 45% 55%;
}
.liquid-wake {
  background: radial-gradient(ellipse at 50% 46%, transparent 17%, #ffffffd0 30%, #ffffff10 45%, transparent 55%), radial-gradient(ellipse at 68% 66%, rgba(var(--liquid-colour),.44), transparent 42%);
  transform-origin: 60% 42%; opacity: .60;
}
/* Layers sit below unchanged content, and never obstruct native inputs or select popups. */
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse), (prefers-contrast: more), (forced-colors: active) {
  .liquid-surface { display: none !important; }
}
@media print { .liquid-surface { display: none !important; } }