body{
  margin:0;
  
  background:#0f172a;
  color:#fff;
}

h1{
  text-align:center;
  padding:30px;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  padding:20px;
}

/* CARD */
.card{
  background:rgba(30,41,59,0.9);
  padding:20px;
  border-radius:16px;
  text-align:center;
  transition:.3s;
  position:relative;
}
.card:hover{
  transform:translateY(-5px);
  background:rgba(51,65,85,0.9);
  box-shadow:0 10px 25px rgba(0,255,255,0.1);
}

/* COPY BUTTON */
.copy{
  position:absolute;
  top:10px;
  right:10px;
  background:#22c55e;
  padding:6px 12px;
  font-size:12px;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
  transition:.2s;
}
.copy:hover{opacity:.8;}

/* RADIO BASE */
.radio input{display:none;}
.radio span{
  width:28px;height:28px;
  border:2px solid #64748b;
  display:inline-block;
  border-radius:50%;
  position:relative;
  transition:.3s all;
}
.radio input:checked + span::after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  background:var(--color,#22c55e);
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* VARIATIONS PREMIUM */
.round span{border-radius:50%;}
.glow input:checked + span{box-shadow:0 0 15px var(--color);}
.scale input:checked + span{transform:scale(1.2);}
.gradient input:checked + span{background:var(--color);}
.neon input:checked + span{box-shadow:0 0 12px var(--color),0 0 25px var(--color);border-color:var(--color);}
.soft span{border-color:#94a3b8;}
.glass span{backdrop-filter:blur(12px);background:rgba(255,255,255,0.1);}
.thick span{border-width:3px;}
.dashed span{border-style:dashed;}
.square span{border-radius:4px;}



@media(max-width:768px){
h1 {
    font-size:22px
}
	
	
	
	
}