body{
 margin:0;font-family:Tahoma,sans-serif;direction:rtl;
 background:linear-gradient(135deg,#eef2ff,#fdfbff);
}
header{
 margin:15px auto;
 max-width:1100px;
 background:linear-gradient(135deg,#6a11cb,#2575fc);
 padding:10px;
 border-radius:18px;
 box-shadow:0 6px 20px rgba(0,0,0,.2);
}
nav{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
nav a{
 color:white;text-decoration:none;font-weight:bold;
 padding:6px 12px;border-radius:10px;font-size:14px;
}
nav a:hover{background:rgba(255,255,255,.25)}
main{min-height:70vh;display:flex;justify-content:center;align-items:center;padding:30px}
.box{
 background:white;padding:30px;border-radius:20px;
 max-width:900px;width:100%;text-align:center;
 box-shadow:0 10px 30px rgba(0,0,0,.15);
}
footer{text-align:center;padding:15px;background:#eee;font-size:14px}

button{
 padding:10px 22px;border:none;border-radius:12px;
 font-size:16px;cursor:pointer;
}
.anim{animation:pop .25s}
@keyframes pop{from{transform:scale(.8)}to{transform:scale(1)}}

/* CPS */
.cps-wrap{
 display:flex;justify-content:center;align-items:center;
}
.cps-ring{
 width:160px;height:160px;border-radius:50%;
 border:6px solid #00b894;
 display:flex;justify-content:center;align-items:center;
}
.cps-btn{
 width:110px;height:110px;border-radius:50%;
 background:#55efc4;font-size:18px;
}

/* Balls */
.side{
 position:fixed;left:10px;top:120px;
 background:white;padding:15px;border-radius:15px;
 box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.ball{
 width:45px;height:45px;border-radius:50%;
 background:radial-gradient(circle at 30% 30%, #fff, #ff7675);
 position:absolute;cursor:pointer;
}