#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #101922;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: loaderFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.loader-cloud-icon {
  width: 36px;
  height: 36px;
  color: #258cf4;
  flex-shrink: 0;
}
.loader-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.loader-bar-track {
  width: 140px;
  height: 2px;
  background: #1e2a36;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 32px;
  animation: loaderFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.loader-bar-fill {
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, transparent, #258cf4, #60bfff, transparent);
  border-radius: 99px;
  animation: barSlide 1.4s ease-in-out infinite;
}
#root {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#root.ready {
  opacity: 1;
}
@keyframes loaderFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes barSlide {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(400%); }
}