.hidden { display: none; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: 'Nunito', 'Poppins', sans-serif;
  color: #fff;
  background: radial-gradient(circle at top, #1a0033 0%, #070b18 70%);
  background-attachment: fixed;
  overflow-x: hidden;
  animation: fadeIn 1.2s ease;
}

/* --- Header --- */
header {
  margin-top: 24px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 90%;
  max-width: 1000px;
  animation: fadeInDown 0.9s ease-out;
  position: relative;
}

header img {
  max-width: 70px;
  height: auto;  
  filter: drop-shadow(0 6px 18px rgba(153, 51, 255, 0.35));
  border-radius: 10px;
  margin-right: 18px; /* Adds breathing space between logo and title */
  animation: shimmerLogo 3s infinite ease-in-out, slideInLeft 700ms cubic-bezier(.2,.9,.3,1) both;
}

/* Ensure all titles are nicely centered on the page */
h1 {
  color: #ff1744;
  font-weight: 900;
  text-shadow: 0 0 12px #ff1744, 0 0 24px #ff4081;
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 10px;
  align-items: center;
  width: 85%;
  animation: fadeIn 1s ease;
}
/* --- Card --- */
.center-card {
  background: rgba(34, 41, 61, 0.95);
  border: 3px solid #00e5ff;
  border-radius: 24px;
  padding: 24px;
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 0 auto 20px auto;
  box-shadow: 0 0 20px rgba(0,229,255,0.3);
  animation: fadeIn 1.2s ease;
}

/* --- Buttons --- */
button, .btn {
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  border: 3px solid #00e5ff;
  border-radius: 14px;
  padding: 12px 22px;
  margin: 8px;
  display: inline-block;
  width: auto;
  color: #fff;
  background: linear-gradient(90deg, #ff1744, #ff4081);
  box-shadow: 0 0 10px #ff1744;
  transition: transform 0.15s ease, box-shadow 0.3s ease, background 0.3s ease;
  background-size: 200% auto;
  animation: shimmerButton 4s linear infinite;
}

button:hover, .btn:hover {
  background-position: right center;
  transform: scale(1.05);
  box-shadow: 0 0 20px #ff4081;
}
button:active, .btn:active {
  transform: scale(1.08);
  box-shadow: 0 0 25px #ff4081;
  background-position: right center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}


.btn.small {
  background: linear-gradient(90deg, #00e5ff, #00bcd4);
  color: #1a1d29;
  font-size: 0.8rem; 
  border-color: #00bcd4;
}

/* --- Inputs --- */
input {
  width: 100%;
  max-width: 220px;
  padding: 10px;
  border: 3px solid #00e5ff;
  border-radius: 10px;
  margin: 8px 0;
  font-size: 1rem;
  background: #0a0f1c;
  color: #fff;
  text-align: center;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
  border-color: #ff1744;
  box-shadow: 0 0 10px #ff4081;
}

/* --- Logs --- */
#logsContainer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.logBox {
  flex: 1;
  min-width: 160px;
  background: #141a2a;
  border-radius: 12px;
  padding: 10px;
  border: 2px solid #00e5ff;
}

.logBox h3 {
  color: #00e5ff;
  font-size: 1rem;
  margin-top: 0;
}

#logP1 p, #logP2 p {
  background: rgba(255,255,255,0.05);
  padding: 8px;
  border-radius: 6px;
  margin: 6px 0;
  font-size: 0.9rem;
}

/* --- Messages --- */
.result { color: #00e676; font-weight: bold; }
.error { color: #ff1744; }

/* --- Keyframes --- */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(15px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInDown {
  from {opacity: 0; transform: translateY(-15px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes shimmerButton {
  0% { background-position: left center; }
  100% { background-position: right center; }
}

@keyframes shimmerLogo {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(153,51,255,0.3)); }
  50% { filter: drop-shadow(0 0 28px rgba(153,51,255,0.8)); }
}

/* --- Mobile --- */
@media (max-width: 550px) {
  h1 { font-size: 1.25rem; }
  .center-card { padding: 12px; width: calc(100% - 24px); border-radius: 20px; }
  header {
    justify-content: center;
  }
  header img { max-width: 70px; }
  #logsContainer { flex-direction: column; }
  .logBox { width: 100%; min-width: 90%; }
}