* { box-sizing: border-box; }
body { 
  background-color: #050505; 
  color: #00ff00; 
  font-family: 'Courier New', Courier, monospace; 
  display: flex; 
  justify-content: center; 
  padding: 2rem 1rem;
  margin: 0;
}
.container { width: 100%; max-width: 600px; }
.header { margin-bottom: 20px; border-bottom: 1px solid #00ff00; padding-bottom: 10px; }
h1 { margin: 0; font-size: 2rem; text-shadow: 0 0 5px #00ff00; }

textarea { 
  width: 100%; 
  height: 100px; 
  background: #0a0a0a; 
  color: #00ff00; 
  border: 2px solid #00ff00; 
  border-radius: 4px;
  padding: 15px; 
  font-size: 1.5rem; 
  font-family: inherit; 
  resize: none; 
  outline: none; 
  box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2);
}
textarea:focus { box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.5); }

#char-count { text-align: right; font-size: 0.9rem; margin-top: 5px; color: #888; }

.rule { 
  padding: 15px; 
  margin: 15px 0; 
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.3s ease;
}
.rule.pass { 
  border: 1px solid #00ff00; 
  background: rgba(0, 255, 0, 0.1); 
  text-shadow: 0 0 2px #00ff00;
}
.rule.fail { 
  border: 1px solid #ff3333; 
  background: rgba(255, 51, 51, 0.1); 
  color: #ff3333;
  text-shadow: 0 0 2px #ff3333;
}

.hidden { display: none !important; }

#hack-btn { 
  background: #00ff00; 
  color: #000; 
  font-weight: bold; 
  padding: 15px; 
  width: 100%; 
  border: none; 
  border-radius: 4px;
  cursor: pointer; 
  font-size: 1.5rem; 
  margin-top: 20px; 
  text-transform: uppercase;
  font-family: inherit;
}
#hack-btn:hover { background: #00cc00; box-shadow: 0 0 15px #00ff00; }