.jscom .form-group {
  margin-bottom:20px;
}
.jscom h2 {
    text-align: center;
    margin-top: 40px;
}
.jscom label {
  display:block; margin-bottom:8px; font-weight:600; color:#444;
}
.jscom textarea {
  width:100%; padding:12px; border:1px solid #ccc; border-radius:8px; box-sizing:border-box; font-family:monospace; font-size:14px; resize:vertical; min-height:200px; transition:border 0.3s;
}
.jscom textarea:focus {
  border-color:#007bff; outline:none; box-shadow:0 0 6px rgba(0, 123, 255, 0.3);
}
.jscom button {
  background:linear-gradient(135deg, #28a745, #218838); color:white; padding:12px 24px; border:none; border-radius:8px; cursor:pointer; font-size:16px; font-weight:bold; transition:transform 0.2s, box-shadow 0.3s;
}
.jscom button:hover {
  transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.2);
}
.jscom button.copy {
  background:linear-gradient(135deg, #007bff, #0056b3); margin-top:10px;
}
.jscom .error-box {
  padding:12px; background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; border-radius:8px; margin-bottom:20px;
}
.jscom .controls {
  text-align:center;
}
.jscom article {
    background: #293838;
    padding: 20px;
    border: solid 1px #dddddd;
    border-radius: 0 20px;
}
.jscom article p {
    text-align: left;
    color: #d3f5ff;
    line-height: 1.3em;
}
.jscom article p::before {
  content:"❝"; padding-right:7px; font-size:26px; color:#7c7c7c; vertical-align:middle;
}
@media (max-width:768px) {
  .jscom button {
    width:100%; margin-top:10px;
  }
}
@media (max-width:600px) {
    .jscom h2 {
        font-size: 1.4rem;
    }
}
@keyframes fadeIn {
  from {
    opacity:0; transform:translateY(15px);
  }
  to {
    opacity:1; transform:translateY(0);
  }
}