/* ─── Dark hacker base ─── */
body{
  margin:0;
  font-family:'Courier New',monospace;
  background:#0d1117;
  color:#c9d1d9;
  display:flex;
  justify-content:center;
  padding:30px 10px;
}
.card{
  width:100%;
  max-width:800px;
  background:#161b22;
  border:1px solid #30363d;
  border-radius:12px;
  padding:25px;
  box-sizing:border-box;
  text-align:center;
}
h1{margin:0 0 20px;color:#ff5555;}
label{display:block;text-align:left;margin-top:15px;font-weight:bold;font-size:14px;}

textarea{
  width:100%;min-height:140px;resize:vertical;
  background:#0d1117;color:#c9d1d9;border:1px solid #30363d;border-radius:6px;
  padding:10px;font-size:14px;
}
input[type="text"]{
  width:100%;background:#0d1117;color:#c9d1d9;border:1px solid #30363d;border-radius:6px;
  padding:6px 8px;font-size:14px;box-sizing:border-box;
}
input[type="file"]{margin-top:8px;}

button,.dl-btn{
  margin-top:25px;padding:12px 32px;border:none;border-radius:6px;
  background:#ff5555;color:#fff;font-weight:bold;font-size:16px;
  cursor:pointer;text-decoration:none;display:inline-block;
}
button:hover,.dl-btn:hover{background:#ff2222;}

img{
  max-width:100%;margin-top:15px;border:1px solid #30363d;border-radius:6px;
}
.counter{
  text-align:right;font-size:13px;color:#8b949e;margin-top:4px;
}
.counter.over{color:#ff4444;font-weight:bold;}

.button-row{
  display:flex;justify-content:space-between;margin-top:25px;
}

/* ─── Pixel-reveal effect ─── */
@keyframes pixelReveal{
  0%{filter:blur(12px) contrast(50%) opacity:0;transform:scale(1.05);}
  50%{filter:blur(3px)  contrast(110%) opacity:.7;}
  100%{filter:blur(0)   contrast(100%) opacity:1;transform:scale(1);}
}
.pixel-reveal{animation:pixelReveal .7s ease-out forwards;}

/* Overlay fade-in (0.6 s) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}