/* Shared loading / feedback styles (storefront + admin) */
.ux-bar { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ux-bar i { display: block; height: 100%; width: 0; background: var(--ux-color, #111); transition: width .4s ease; }
.ux-bar.on { opacity: 1; }
button.is-loading, input.is-loading { cursor: progress !important; opacity: .75; pointer-events: none; }
button.is-loading::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-inline-end: 8px; vertical-align: -2px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ux-spin .7s linear infinite; }
.ux-skel { background: linear-gradient(90deg, #ececec 25%, #f6f6f6 40%, #ececec 65%); background-size: 400% 100%; animation: ux-shimmer 1.3s ease-in-out infinite; border-radius: 4px; }
.ux-skel.line { height: 14px; margin: 12px 0; } .ux-skel.block { height: 90px; margin: 14px 0; border-radius: 10px; }
.ux-toast { position: fixed; inset-inline: 16px; bottom: 20px; margin-inline: auto; max-width: 420px; background: #111; color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 14px; z-index: 9999; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; text-align: center; }
.ux-toast.on { opacity: 1; transform: none; }
@keyframes ux-spin { to { transform: rotate(360deg); } }
@keyframes ux-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ux-skel { animation: none; } button.is-loading::before { animation-duration: 1.6s; } .ux-bar i { transition: none; } }