/* Loading visuals match demo/smart-water/console-loading.css. Keep this local copy in sync when changing the common loading appearance; readiness is owned by the sales host. */
.web-demo-host #console-loading {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 32px 24px;
  box-sizing: border-box;
  border: 0;
  outline: none;
  border-radius: 0;
  overflow: auto;
  overscroll-behavior: contain;
  transform: none !important;
  background: radial-gradient(ellipse at 50% 42%, #123051 0, #07162e 40%, #030b1d 78%);
  color: #e6f5ff;
  box-shadow: none;
  backdrop-filter: none;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: center;
}
.web-demo-host #console-loading[open] { display: grid; place-items: center; }
.web-demo-host #console-loading:not([open]),
#console-loading [hidden] { display: none !important; }
.web-demo-host #console-loading::before,
.web-demo-host #console-loading::after { content: none; }
.web-demo-host #console-loading::backdrop { background: #030b1d; backdrop-filter: none; }
#console-loading .console-loading__content { width: min(100%, 460px); margin: auto; }
#console-loading .console-loading__emblem {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 20px auto 40px;
}
#console-loading .console-loading__emblem img {
  position: relative;
  z-index: 1;
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  /* Preserve the original mark: white ink, with its inverted black background blended away. */
  filter: invert(1);
  mix-blend-mode: screen;
}
#console-loading .console-loading__emblem::before,
#console-loading .console-loading__emblem::after {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: 0;
  border: 1px solid #58c9fa3d;
  border-radius: 50%;
  pointer-events: none;
}
#console-loading .console-loading__emblem::before {
  box-shadow: 0 0 32px #2f9be53b, inset 0 0 20px #2f9be526;
}
#console-loading .console-loading__emblem::after {
  border-color: #67ddff transparent #427cf0 transparent;
}
#console-loading #console-loading-title {
  margin: 0;
  color: #e6f5ff;
  font: 600 clamp(21px, 3vw, 28px)/1.5 "PingFang SC", "Microsoft YaHei", sans-serif;
  /* Match the first demo's final computed typography after its page styles. */
  letter-spacing: .01em;
  text-shadow: none;
}
#console-loading .console-loading__status {
  min-height: 24px;
  margin: 22px 0 18px;
  color: #abc5df;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
#console-loading .console-loading__track {
  width: min(100%, 240px);
  height: 3px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 3px;
  background: #254365;
}
#console-loading .console-loading__track i {
  display: block;
  width: 38%;
  height: 100%;
  margin-left: 31%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5aa3ff, #78e7ff);
}
#console-loading .console-loading__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
#console-loading .console-loading__actions a {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid #72cfff;
  border-radius: 5px;
  background: #174f80;
  color: #f0f9ff;
  font: 500 14px/1.5 "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  text-decoration: none;
}
#console-loading .console-loading__actions a:hover { background: #21649d; }
#console-loading .console-loading__actions a:focus-visible {
  outline: 2px solid #c4f2ff;
  outline-offset: 4px;
}
#console-loading [data-loading-continue] { background: transparent; border-color: #56789d; }
#console-loading[data-state="error"] .console-loading__status { color: #ffd796; }
#console-loading[data-state="error"] .console-loading__track { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  #console-loading[data-state="loading"]:not([data-motion="off"]) .console-loading__emblem::after {
    animation: console-loading-orbit 3s linear infinite;
  }
  #console-loading[data-state="loading"]:not([data-motion="off"]) .console-loading__track i {
    margin-left: 0;
    animation: console-loading-travel 1.8s ease-in-out infinite;
  }
  #console-loading[data-state="loading"][data-active="false"]:not([data-motion="off"]) .console-loading__emblem::after,
  #console-loading[data-state="loading"][data-active="false"]:not([data-motion="off"]) .console-loading__track i { animation-play-state: paused; }
}
@keyframes console-loading-orbit { to { transform: rotate(360deg); } }
@keyframes console-loading-travel {
  from { transform: translateX(-100%); }
  to { transform: translateX(364%); }
}

#console-loading[data-state="pending"] .console-loading__track { visibility: hidden; }
#console-loading noscript { display: block; margin-top: 18px; color: #ffd796; font-size: 14px; line-height: 1.75; }
#console-loading noscript a { display: block; margin-top: 12px; color: #b5e6ff; text-underline-offset: 3px; }
#console-loading noscript a:focus-visible { outline: 2px solid #c4f2ff; outline-offset: 4px; }