:root{
  --cmdhr-spinner-bg: rgba(7, 15, 28, 0.82);
  --cmdhr-card-bg1: #0b1730;
  --cmdhr-card-bg2: #07101e;
  --cmdhr-primary: #0f315f;
  --cmdhr-primary-2: #183e71;
  --cmdhr-orange: #f2a10a;
  --cmdhr-orange-2: #ffbe2e;
  --cmdhr-white: #f5f7fb;
  --cmdhr-muted: #b3bfd3;
  --cmdhr-pill: rgba(255,255,255,0.06);
  --cmdhr-shadow: 0 24px 70px rgba(0,0,0,0.45);
  --cmdhr-radius: 28px;
}

.cmdhr-spinner-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 40%, rgba(45,87,151,0.20), transparent 35%),
    linear-gradient(180deg, rgba(3,8,18,0.70), rgba(3,8,18,0.88)),
    var(--cmdhr-spinner-bg);
  backdrop-filter: blur(5px);
}
.cmdhr-spinner-overlay.is-active{ display:flex; }

.cmdhr-spinner-card{
  width: min(92vw, 980px);
  min-height: min(84vh, 760px);
  border-radius: var(--cmdhr-radius);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  color: var(--cmdhr-white);
  box-shadow: var(--cmdhr-shadow);
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at 50% 30%, rgba(39,84,140,0.28), transparent 38%),
    linear-gradient(180deg, rgba(18,40,74,0.96), rgba(4,12,26,0.98));
}

.cmdhr-spinner-stage{
  position: relative;
  width: min(62vw, 420px);
  height: min(62vw, 420px);
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
}

.cmdhr-progress-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 210deg,
      rgba(255,255,255,0.96) 0deg 118deg,
      var(--cmdhr-orange) 118deg 206deg,
      rgba(22,47,86,0.96) 206deg 360deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 18px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 18px));
  filter: drop-shadow(0 0 18px rgba(242,161,10,0.18));
  animation: cmdhr-spin-ring 3.8s linear infinite;
}

.cmdhr-progress-ring::after{
  content:"";
  position:absolute;
  inset: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
}

.cmdhr-globe{
  position: absolute;
  inset: 42px;
  display: grid;
  place-items: center;
  perspective: 900px;
}

.cmdhr-globe-shell{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.03), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(21,44,78,0.65), rgba(8,15,28,0.18) 68%, transparent 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 80px rgba(255,255,255,0.02);
}

.cmdhr-latitudes,
.cmdhr-meridians{
  position:absolute;
  inset: 0;
  border-radius: 50%;
  opacity: .9;
  transform-style: preserve-3d;
}

.cmdhr-meridians{
  animation: cmdhr-spin-globe 5.2s linear infinite;
}

.cmdhr-latitudes{
  animation: cmdhr-spin-globe-rev 7.4s linear infinite;
}

.cmdhr-meridians::before,
.cmdhr-meridians::after,
.cmdhr-latitudes::before,
.cmdhr-latitudes::after{
  content:"";
  position:absolute;
  inset: 10%;
  border-radius: 50%;
}

.cmdhr-meridians::before{
  border: 2px solid rgba(53,97,154,0.34);
  transform: rotateY(0deg);
}
.cmdhr-meridians::after{
  border: 2px solid rgba(53,97,154,0.24);
  transform: rotateY(65deg);
}

.cmdhr-latitudes::before{
  inset: 18% 8%;
  border: 2px solid rgba(255,255,255,0.10);
  transform: rotateX(72deg);
}
.cmdhr-latitudes::after{
  inset: 33% 12%;
  border: 2px solid rgba(255,255,255,0.07);
  transform: rotateX(72deg);
}

.cmdhr-logo-core{
  position: relative;
  z-index: 3;
  width: min(48vw, 148px);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
}

.cmdhr-spinner-kicker{
  margin-top: 10px;
  color: #a8b8d4;
  font-size: clamp(14px, 2.1vw, 18px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cmdhr-spinner-title{
  margin-top: 14px;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
}

.cmdhr-spinner-text{
  margin-top: 12px;
  color: var(--cmdhr-muted);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.4;
}

.cmdhr-spinner-tags{
  margin-top: 28px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:center;
}

.cmdhr-spinner-tag{
  padding: 12px 18px;
  border-radius: 999px;
  color: #c8d4e7;
  font-size: clamp(14px, 2vw, 18px);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

@keyframes cmdhr-spin-ring{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes cmdhr-spin-globe{
  from{ transform: rotateZ(0deg) rotateY(0deg); }
  to{ transform: rotateZ(360deg) rotateY(360deg); }
}
@keyframes cmdhr-spin-globe-rev{
  from{ transform: rotateZ(360deg) rotateY(0deg); }
  to{ transform: rotateZ(0deg) rotateY(360deg); }
}

@media (max-width: 640px){
  .cmdhr-spinner-card{
    min-height: auto;
    padding: 26px 20px 28px;
  }
  .cmdhr-spinner-stage{
    width: min(76vw, 320px);
    height: min(76vw, 320px);
  }
  .cmdhr-globe{ inset: 34px; }
}

html.cmdhr-spinner-open, body.cmdhr-spinner-open{overflow:hidden;}