.site-loading-indicator[hidden] { display: none; }
.site-loading-indicator { position: fixed; top: calc(4.75rem + env(safe-area-inset-top, 0px)); right: 1rem; z-index: 10050; display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .9rem; max-width: calc(100vw - 2rem); border: 1px solid var(--border, #555); border-left: 3px solid var(--red, #e8192c); border-radius: 6px; background: var(--card, #161616); color: var(--white, #f2f2f2); box-shadow: 0 4px 18px rgba(0,0,0,.22); font-family: var(--font-ui, sans-serif); font-size: .9rem; font-weight: 700; line-height: 1.3; pointer-events: none; }
.site-loading-spinner { display: inline-block; flex: 0 0 auto; width: 1rem; height: 1rem; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: site-loading-turn .8s linear infinite; }
.site-loading-indicator > .site-loading-spinner { color: var(--red, #e8192c); }
.site-loading-button > .site-loading-spinner { margin-inline-start: .4rem; vertical-align: middle; }
@keyframes site-loading-turn { to { transform: rotate(360deg); } }
@media (max-width: 639px) { .site-loading-indicator { left: 50%; right: auto; transform: translateX(-50%); width: max-content; font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { .site-loading-spinner { animation-duration: 2s; } }