/* Shared loading experience for desktop + mobile. */
.lesson-exam-loading,
.training-test-loading{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 50% 38%,rgba(185,233,104,.10),transparent 28%),
    linear-gradient(180deg,#f8fbf9 0%,#f3f7f5 100%);
  color:#173b30;
  overflow:hidden;
}

.platform-loader{
  width:min(430px,88vw);
  display:grid;
  justify-items:center;
  text-align:center;
  gap:12px;
}
.platform-loader-mark{
  position:relative;
  width:96px;
  height:96px;
  margin-bottom:4px;
}
.platform-loader-ring,
.platform-loader-ring::before,
.platform-loader-ring::after{
  position:absolute;
  inset:0;
  content:"";
  border-radius:50%;
}
.platform-loader-ring{
  border:1px solid rgba(28,105,79,.18);
  animation:platformLoaderSpin 3.8s linear infinite;
}
.platform-loader-ring::before{
  inset:10px;
  border:1px dashed rgba(28,105,79,.28);
  animation:platformLoaderReverse 2.8s linear infinite;
}
.platform-loader-ring::after{
  inset:24px;
  border:1px solid rgba(185,233,104,.72);
  box-shadow:0 0 0 8px rgba(185,233,104,.08);
  animation:platformLoaderPulse 1.8s ease-in-out infinite;
}
.platform-loader-core{
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:2px solid #1e7054;
  background:#f8fbf9;
  box-shadow:0 0 0 7px rgba(30,112,84,.06);
  animation:platformLoaderCore 2s ease-in-out infinite;
}
.platform-loader-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b9e968;
  box-shadow:0 0 14px rgba(185,233,104,.8);
  top:7px;
  left:44px;
  transform-origin:4px 41px;
  animation:platformLoaderOrbit 2.4s linear infinite;
}
.platform-loader-kicker{
  margin-top:3px;
  color:#6b8178;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.platform-loader h2{
  margin:0;
  color:#12372c;
  font-size:26px;
  line-height:1.15;
  font-weight:600;
}
.platform-loader p{
  margin:0;
  color:#6d7d77;
  font-size:14px;
  line-height:1.5;
}
.platform-loader-track{
  position:relative;
  width:min(260px,72vw);
  height:3px;
  margin-top:8px;
  border-radius:999px;
  overflow:hidden;
  background:#dfe9e4;
}
.platform-loader-track::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -42%;
  width:42%;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#2b795c 35%,#b9e968 72%,transparent);
  animation:platformLoaderBar 1.65s ease-in-out infinite;
}
.platform-loader-dots{
  display:flex;
  align-items:center;
  gap:5px;
  height:10px;
}
.platform-loader-dots i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#7d948b;
  animation:platformLoaderDots 1.25s ease-in-out infinite;
}
.platform-loader-dots i:nth-child(2){animation-delay:.15s}.platform-loader-dots i:nth-child(3){animation-delay:.3s}

@keyframes platformLoaderSpin{to{transform:rotate(360deg)}}
@keyframes platformLoaderReverse{to{transform:rotate(-360deg)}}
@keyframes platformLoaderPulse{50%{transform:scale(.88);opacity:.55}}
@keyframes platformLoaderCore{50%{transform:translate(-50%,-50%) rotate(135deg) scale(.88)}}
@keyframes platformLoaderOrbit{to{transform:rotate(360deg)}}
@keyframes platformLoaderBar{0%{left:-42%}55%,100%{left:100%}}
@keyframes platformLoaderDots{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

@media(max-width:760px){
  .lesson-exam-loading,.training-test-loading{padding:20px}
  .platform-loader{width:min(330px,88vw);gap:10px}
  .platform-loader-mark{width:82px;height:82px}
  .platform-loader-ring::before{inset:9px}
  .platform-loader-ring::after{inset:21px}
  .platform-loader-core{width:21px;height:21px}
  .platform-loader-dot{top:5px;left:37px;transform-origin:4px 36px}
  .platform-loader h2{font-size:23px}
  .platform-loader p{font-size:13px;max-width:290px}
}

@media(prefers-reduced-motion:reduce){
  .platform-loader-ring,.platform-loader-ring::before,.platform-loader-ring::after,.platform-loader-core,.platform-loader-dot,.platform-loader-track::after,.platform-loader-dots i{animation:none!important}
}