/* Hacker-vibe dark theme */
body{
  margin:0;font-family:'Courier New',monospace;background:#0d1117;color:#c9d1d9;
  display:flex;justify-content:center;align-items:flex-start;min-height:100vh;
}
.panel{
  width:95%;max-width:1200px;margin-top:40px;text-align:center;
}
h1{color:#58a6ff;margin:0 0 16px}
.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
section h2{margin:0 0 8px;font-size:1.1rem;color:#7ee787}
textarea{
  width:100%;min-height:420px;background:#161b22;color:#c9d1d9;
  border:1px solid #30363d;border-radius:8px;padding:12px;resize:vertical;
  transition: opacity 0.5s ease; /* For fade-in on output */
}
textarea.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}
.btn{
  margin-top:10px;padding:8px 18px;border:none;border-radius:8px;cursor:pointer;
  background:#238636;color:#fff;transition:transform 0.1s, box-shadow 0.2s;
}
.btn:hover{
  transform:scale(1.05);
  box-shadow: 0 0 10px #238636; /* Glowing hover */
}
.btn:active {
  animation: pulse 0.2s; /* Click pulse */
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
#lightning {
  display: inline-block;
  animation: glow 1.5s infinite alternate; /* Pulsing lightning bolt */
}
@keyframes glow {
  from { text-shadow: 0 0 5px #58a6ff; }
  to { text-shadow: 0 0 15px #58a6ff, 0 0 25px #58a6ff; }
}
.copied-msg {
  display: none;
  margin-top: 5px;
  color: #7ee787;
  font-size: 0.9rem;
  animation: fadeOut 2s forwards;
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}