.eco-loader { position: absolute; inset: 0; z-index: 1080; display: grid; place-items: center; pointer-events: none; color: #0d9488; background: transparent; border-radius: inherit; }
.eco-loader--page { position: fixed; background: #f4f7fa45; }
.eco-loader__content { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 16px; background: #fffffff2; border-radius: 6px; }
.eco-loader__wave { display: flex; align-items: center; justify-content: center; gap: 5px; width: 72px; max-width: 100%; height: 36px; flex: none; background: transparent; }
.eco-loader__bar { --wave-peak: 1; display: block; width: 6px; height: 32px; flex: none; border-radius: 999px; background: #0d9488; transform: scaleY(.3); transform-origin: center; animation: eco-wave 1.2s ease-in-out infinite; }
.eco-loader__bar:nth-child(1) { --wave-peak: .65; animation-delay: -.6s; }
.eco-loader__bar:nth-child(2) { --wave-peak: .82; animation-delay: -.5s; }
.eco-loader__bar:nth-child(3) { --wave-peak: .94; animation-delay: -.4s; }
.eco-loader__bar:nth-child(4) { animation-delay: -.3s; }
.eco-loader__bar:nth-child(5) { --wave-peak: .94; animation-delay: -.2s; }
.eco-loader__bar:nth-child(6) { --wave-peak: .82; animation-delay: -.1s; }
.eco-loader__bar:nth-child(7) { --wave-peak: .65; animation-delay: 0s; }
.eco-loader--page .eco-loader__wave { height: 44px; }
.eco-loader--page .eco-loader__bar { height: 36px; }
.eco-loader__message { color: #173349; font: 13px/1.5 var(--eco-font, system-ui, sans-serif); text-align: center; overflow-wrap: anywhere; }
.eco-loader--inline { background: inherit; }
.eco-loader--inline .eco-loader__content { flex-direction: row; gap: 6px; padding: 0 6px; background: transparent; max-width: 100%; }
.eco-loader--inline .eco-loader__wave { width: 29px; height: 18px; gap: 3px; }
.eco-loader--inline .eco-loader__bar { --wave-low: .5; width: 3px; height: 16px; background: currentColor; }
.eco-loader--inline .eco-loader__bar:nth-child(3) { --wave-peak: 1; }
.eco-loader--inline .eco-loader__bar:nth-child(4) { --wave-peak: .82; }
.eco-loader--inline .eco-loader__bar:nth-child(5) { --wave-peak: .65; }
.eco-loader--inline .eco-loader__message { display: none; }
@keyframes eco-wave { 0%,100% { transform: scaleY(var(--wave-low,.3)); } 50% { transform: scaleY(var(--wave-peak)); } }
@media(prefers-reduced-motion:reduce) { .eco-loader__bar { animation: none; transform: scaleY(.6); } }