*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#0e1621;color:#fff;min-height:100vh;overflow-x:hidden;
}
#app{position:relative;width:100vw;min-height:100vh}

.screen{
  display:none;
  position:fixed;
  inset:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#0e1621;
}
.screen.active{
  display:flex;
}

/* ---- загрузка ---- */
#screen-loading{background:#0e1621}
.tg-logo{margin-bottom:24px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.spinner{
  width:44px;height:44px;border:3px solid #1c2c3a;
  border-top-color:#2AABEE;border-radius:50%;
  animation:spin .9s linear infinite;margin-bottom:16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:#708499;font-size:15px}

/* ---- проверка ---- */
#screen-check{background:linear-gradient(160deg,#0e1621 0%,#17212b 100%)}
.check-card{
  width:min(420px,92vw);background:#17212b;border-radius:16px;
  padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  border:1px solid #1f2c38;
}
.check-header{text-align:center;margin-bottom:28px}
.gift-icon{font-size:48px;margin-bottom:8px}
.check-header h1{font-size:22px;font-weight:600;margin-bottom:6px}
.sub{color:#708499;font-size:13px}

.progress-wrap{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.progress-bar{
  flex:1;height:8px;background:#1c2c3a;border-radius:99px;overflow:hidden;
}
.progress-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#2AABEE,#229ED9);
  transition:width .3s ease;
}
.progress-label{font-size:13px;color:#708499;min-width:38px;text-align:right}

.result{text-align:center;margin-bottom:20px}
.result-percent{
  font-size:56px;font-weight:700;line-height:1;
  background:linear-gradient(90deg,#2AABEE,#64b5ef);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.result-status{font-size:15px;color:#a0b0c0;margin-bottom:4px}
.result-detail{font-size:12px;color:#708499;min-height:16px}

.check-footer{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;color:#4a5c6e;padding-top:16px;border-top:1px solid #1f2c38;
}
.dot{width:6px;height:6px;border-radius:50%;background:#2AABEE;
     box-shadow:0 0 8px #2AABEE}

/* ---- успех ---- */
#screen-success{background:#0e1621}
.success-card{text-align:center;max-width:340px;padding:24px}
.success-icon{
  width:72px;height:72px;border-radius:50%;background:#2AABEE;
  color:#fff;font-size:36px;display:flex;align-items:center;
  justify-content:center;margin:0 auto 20px;
  animation:pop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.success-card h2{font-size:20px;margin-bottom:10px}
.success-card p{color:#708499;font-size:14px}