/* v124: branded loading states for Roon ERP. */
.roon-loading-layer{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  padding:20px;background:rgba(250,248,243,.88);backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
html.roon-loader-visible .roon-loading-layer{opacity:1;visibility:visible;pointer-events:auto}
.roon-loading-card{
  width:min(270px,calc(100vw - 40px));padding:24px 22px 19px;text-align:center;
  background:rgba(255,255,255,.97);border:1px solid #e8e2d7;border-radius:20px;
  box-shadow:0 16px 48px rgba(41,39,32,.12);
}
.roon-loading-logo{display:block;width:min(142px,75%);height:67px;margin:0 auto;object-fit:contain;animation:roon-logo-breathe 1.8s ease-in-out infinite}
.roon-loading-progress{display:block;position:relative;overflow:hidden;width:100%;height:4px;margin-top:13px;border-radius:99px;background:#f1ece1}
.roon-loading-progress>span{display:block;width:34%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#aa925b,#80692e,#c4ad73);animation:roon-progress-sweep 1.15s ease-in-out infinite}
.roon-loading-message{display:block;min-height:21px;margin-top:12px;color:#625333;font-size:13px;font-weight:600;line-height:1.5}
.roon-inline-loading{display:inline-flex;align-items:center;gap:8px}
.roon-inline-spinner{display:inline-block;width:15px;height:15px;flex:0 0 15px;border:2px solid #e8e2d7;border-top-color:#80692e;border-radius:50%;animation:roon-spin .75s linear infinite;vertical-align:-3px}
.v87-live-toolbar.is-loading [data-live-status]::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;border:2px solid #e8e2d7;border-top-color:#80692e;border-radius:50%;animation:roon-spin .75s linear infinite;vertical-align:-2px}
@keyframes roon-logo-breathe{0%,100%{transform:scale(.985);opacity:.86}50%{transform:scale(1.015);opacity:1}}
@keyframes roon-progress-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(410%)}}
@keyframes roon-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){.roon-loading-card{width:min(250px,calc(100vw - 36px));padding:21px 18px 17px}.roon-loading-logo{height:60px}}
@media(prefers-reduced-motion:reduce){
  .roon-loading-layer,.roon-loading-logo,.roon-loading-progress>span,.roon-inline-spinner,.v87-live-toolbar.is-loading [data-live-status]::before{animation:none!important;transition:none!important}
  .roon-loading-progress>span{width:100%;opacity:.65}
}
@media print{.roon-loading-layer{display:none!important}}