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;}

/* CHECKBOX BASE */
.checkbox input{display:none;}
.checkbox span{
  width:28px;height:28px;
  border:2px solid #64748b;
  display:inline-block;
  border-radius:8px;
  position:relative;
  transition:.3s all;
}
.checkbox input:checked + span::after{
  content:"";
  position:absolute;
  width:6px;height:12px;
  border:2px solid #fff;
  border-top:none;border-left:none;
  transform:rotate(45deg);
  top:5px;left:10px;
}

/* TOGGLE BASE */
.toggle span{
  width:52px;height:28px;
  background:#334155;
  border-radius:50px;
  display:inline-block;
  position:relative;
  transition:.3s all;
}
.toggle span::after{
  content:"";
  width:22px;height:22px;
  background:#fff;
  position:absolute;
  top:3px;left:3px;
  border-radius:50%;
  transition:.3s all;
}
.toggle input:checked + span::after{
  transform:translateX(24px) scale(1.05);
}

/* 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;}
.card input{
  display:none
}

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