/* Loading overlay with capybara loader (from loading.html/loading.css) + progress % */
.sg-load-overlay {
  position: fixed; inset: 0; z-index: 5000; display: none;
  align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s;
}
.sg-load-overlay.show { display: flex; opacity: 1; }
.sg-load-pop {
  background: var(--bg-card, #fff); border-radius: 22px; padding: 30px 34px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 280px; max-width: calc(100vw - 32px);
}
.sg-load-label { font-weight: 700; color: var(--text-main, #1b1b1b); font-size: 1.02rem; margin-top: 6px; }
.sg-load-bar { width: 100%; height: 8px; border-radius: 999px; background: var(--bg-soft, #e9eef5); overflow: hidden; margin-top: 4px; }
.sg-load-bar > i { display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand, #1591DC), var(--brand-dark, #2C5EAD)); transition: width .2s ease; }
.sg-load-bar.indeterminate > i { width: 40% !important; animation: sgLoadSlide 1.1s ease-in-out infinite; }
@keyframes sgLoadSlide { 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }
.sg-load-pct { font-size: .82rem; color: var(--text-muted, #667); font-variant-numeric: tabular-nums; }

/* ── capybara loader (verbatim from loading.css reference) ── */
.capybaraloader { width: 14em; height: 10em; position: relative; z-index: 1; --color: rgb(204,125,45); --color2: rgb(83,56,28); transform: scale(.7); }
.capybara { width: 100%; height: 7.5em; position: relative; z-index: 1; }
.capybaraloader .loader { width: 100%; height: 2.5em; position: relative; z-index: 1; overflow: hidden; }
.capy { width: 85%; height: 100%; background: linear-gradient(var(--color), 90%, var(--color2)); border-radius: 45%; position: relative; z-index: 1; animation: movebody 1s linear infinite; }
.capyhead { width: 7.5em; height: 7em; bottom: 0; right: 0; position: absolute; background-color: var(--color); z-index: 3; border-radius: 3.5em; box-shadow: -1em 0 var(--color2); animation: movebody 1s linear infinite; }
.capyear { width: 2em; height: 2em; background: linear-gradient(-45deg, var(--color), 90%, var(--color2)); top: 0; left: 0; border-radius: 100%; position: absolute; overflow: hidden; z-index: 3; }
.capyear:nth-child(2) { left: 5em; background: linear-gradient(25deg, var(--color), 90%, var(--color2)); }
.capyear2 { width: 100%; height: 1em; background-color: var(--color2); bottom: 0; left: .5em; border-radius: 100%; position: absolute; transform: rotate(-45deg); }
.capymouth { width: 3.5em; height: 2em; background-color: var(--color2); position: absolute; bottom: 0; left: 2.5em; border-radius: 50%; display: flex; justify-content: space-around; align-items: center; padding: .5em; }
.capylips { width: .25em; height: .75em; border-radius: 100%; transform: rotate(-45deg); background-color: var(--color); }
.capylips:nth-child(2) { transform: rotate(45deg); }
.capyeye { width: 2em; height: .5em; background-color: var(--color2); position: absolute; bottom: 3.5em; left: 1.5em; border-radius: 5em; transform: rotate(45deg); }
.capyeye:nth-child(4) { transform: rotate(-45deg); left: 5.5em; width: 1.75em; }
.capyleg { width: 6em; height: 5em; bottom: 0; left: 0; position: absolute; background: linear-gradient(var(--color), 95%, var(--color2)); z-index: 2; border-radius: 2em; animation: movebody 1s linear infinite; }
.capyleg2 { width: 1.75em; height: 3em; bottom: 0; left: 3.25em; position: absolute; background: linear-gradient(var(--color), 80%, var(--color2)); z-index: 2; border-radius: .75em; box-shadow: inset 0 -.5em var(--color2); animation: moveleg 1s linear infinite; }
.capyleg2:nth-child(3) { width: 1.25em; left: .5em; height: 2em; animation: moveleg2 1s linear infinite .075s; }
@keyframes moveleg { 0%{ transform: rotate(-45deg) translateX(-5%); } 50%{ transform: rotate(45deg) translateX(5%); } 100%{ transform: rotate(-45deg) translateX(-5%); } }
@keyframes moveleg2 { 0%{ transform: rotate(45deg); } 50%{ transform: rotate(-45deg); } 100%{ transform: rotate(45deg); } }
@keyframes movebody { 0%{ transform: translateX(0%); } 50%{ transform: translateX(2%); } 100%{ transform: translateX(0%); } }
.loaderline { width: 50em; height: .5em; border-top: .5em dashed var(--color2); animation: moveline 10s linear infinite; }
@keyframes moveline { 0%{ transform: translateX(0%); opacity: 0; } 5%{ opacity: 1; } 95%{ opacity: 1; } 100%{ opacity: 0; transform: translateX(-70%); } }