/* 🌌 Gorgeous Dark Gradient Theme (Blue + Black + Violet) */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(1445deg, #191820,  #0f3b38cf);
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

/* 🌟 Container Styling */
.container {
  background: rgba(5, 2, 15, 0.9);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.788), 0 0 60px rgba(0, 0, 100, 0.3);
  text-align: center;
  width: 400px;
  transition: all 0.5s ease;
}
.container:hover {
  transform: scale(1.01);
  box-shadow: 0 0 40px rgb(109, 115, 135);
}

/* 🔠 Title */
h1 {
  color: #e2e2e2;
  font-size: 28px;
  margin-bottom: 25px;
  text-shadow: 0 0 10px #88d1ff, 0 0 20px #001133;
}

/* 🔢 Input Fields */
input, select {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  background: rgba(36, 36, 39, 0.979);
  color: #aaaaaa;
  outline: none;
  transition: 0.3s;
}
input:focus, select:focus {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 10px #7af4ff;
}

/* 🔘 Buttons */
button {
  background: linear-gradient(135deg, #001f4d, #003366);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 16px;
  margin: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
button:hover {
  background: white;
  color: #001f4d;
  box-shadow: 0 0 20px white, 0 0 40px #0077ff;
  transform: translateY(-2px);
}

/* 💡 Result Box */
#result {
  font-size: 18px;
  color: #b3e5ff;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px;
  border-radius: 10px;
  margin-top: 15px;
  box-shadow: inset 0 0 10px rgba(0, 120, 255, 0.3);
}

/* 🧭 Actions Section */
.actions {
  margin-top: 20px;
}

/* 📜 History Page Design */
.history-container {
  width: 80%;
  max-width: 800px;
  background: rgba(15, 15, 40, 0.95);
  margin: 50px auto;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.history-container h2 {
  text-align: center;
  color: #9fc9ff;
  margin-bottom: 20px;
}

#historyList {
  list-style: none;
  padding: 0;
  color: #fff;
}

#historyList li {
  background: rgba(0, 0, 30, 0.5);
  padding: 12px 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
}
#historyList li:hover {
  background: rgba(59, 75, 138, 0.89);
  transform: scale(1.01);
}

/* 🔙 Back Button in History */
.back-btn {
  background: linear-gradient(135deg, #001f4d, #003366);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 25px;
  margin-top: 20px;
  display: block;
  text-align: center;
  transition: all 0.3s ease;
}
.back-btn:hover {
  background: white;
  color: #001f4d;
  box-shadow: 0 0 20px white, 0 0 40px #0077ff;
}


/* 🚫 Disable text selection globally */
* {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* ✅ Allow selection only in input and select fields */
input, select, textarea {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
}
body, div, span, h1, h2, h3, p {
  cursor: default;
}