*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:#f4f6fb;
  color:#333;
  transition:0.3s;
}

/* Dark Mode */
body.dark{
  background:#0f172a;
  color:#eee;
}

/* Header */
header{
  padding:15px 20px;
  background:#111827;
  color:#fff;
  display:flex;
  justify-content:space-between;
}

.copy-btn{
  cursor:pointer;
  border:none;
  padding:8px 12px;
  border-radius:6px;
}

/* Layout */
.containerg{
  width:90%;
  max-width:1100px;
  margin:auto;
  padding:20px;
}

.generator{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

/* Preview Box */
.preview{
  height:200px;
  background:#fff;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
      margin: 30px 0px;
}

/* Controls */
.controls label{
  font-size:14px;
}

.controls input{
  width:100%;
  margin:10px 0;
}

/* Code Box */
.code{
  background:#111;
  color:#0f0;
  padding:15px;
  border-radius:8px;
  margin-top:15px;
  font-size:14px;
}

/* Copy Button */
.copy-btn{
  margin-top:10px;
  background:#2563eb;
  color:#fff;
}

/* Toast */
.toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#000;
  color:#fff;
  padding:10px 20px;
  border-radius:20px;
  opacity:0;
}

.toast.show{opacity:1;}
footer{
	margin-top:55px
}
/* Mobile */
@media(max-width:768px){
  .generator{
    grid-template-columns:1fr;
  }
}