.inordo-loading { --loading-size: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; line-height: 1.4; color: #243b30; }
.inordo-loading--compact { --loading-size: 22px; gap: 7px; font: inherit; color: inherit; }
.inordo-loading--page { --loading-size: 48px; }
.inordo-loading-mark { position: relative; display: inline-block; width: var(--loading-size, 32px); height: var(--loading-size, 32px); flex: 0 0 var(--loading-size, 32px); color: inherit; }
.inordo-loading-mark i { position: absolute; left: 12%; width: 55%; height: 8%; border-radius: 2px; background: currentColor; transform-origin: 50% 50%; animation: inordo-order 2s cubic-bezier(.45,0,.25,1) infinite; }
.inordo-loading-mark i:nth-child(1) { top: 22%; width: 39%; --line-x: -3px; --line-y: -4px; --line-angle: -24deg; }
.inordo-loading-mark i:nth-child(2) { top: 46%; --line-x: 4px; --line-y: 0px; --line-angle: 14deg; animation-delay: -.08s; }
.inordo-loading-mark i:nth-child(3) { top: 70%; width: 45%; --line-x: -2px; --line-y: 4px; --line-angle: -16deg; animation-delay: -.16s; }
.inordo-loading-mark i:nth-child(4) { top: 19%; left: 77%; width: 7%; height: 60%; background: #bc913f; --line-x: 2px; --line-y: 3px; --line-angle: 12deg; animation-delay: -.24s; }
@keyframes inordo-order { 0%, 100% { transform: translate(var(--line-x), var(--line-y)) rotate(var(--line-angle)); opacity: .5; } 38%, 67% { transform: translate(0, 0) rotate(0); opacity: 1; } }
.inordo-loading-activity { position: fixed; z-index: 1600; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 9px 14px; border: 1px solid #d7ddd6; border-radius: 12px; background: #fffdf9; box-shadow: 0 5px 20px #1e302710; pointer-events: none; }
.inordo-loading-mark[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .inordo-loading-mark i { animation: none; transform: none; opacity: 1; } }