@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.animate-twinkle {
  animation: twinkle 3s ease-in-out infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

body {
  background: radial-gradient(ellipse at 20% 50%, #0f1535 0%, #060816 50%, #000000 100%);
  position: relative;
  overflow-x: hidden;
}

.stars-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stars-layer::before, .stars-layer::after {
  content: "";
  position: absolute;
  inset: 0;
}
.stars-layer::before {
  background-image: radial-gradient(2px 2px at 20px 30px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 40px 70px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 90px 40px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 130px 80px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 180px 20px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 230px 90px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 280px 50px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 50px 120px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 150px 160px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 250px 140px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 320px 200px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 100px 240px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 200px 220px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 300px 180px, #fff 0%, transparent 100%), radial-gradient(2px 2px at 350px 100px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 70px 200px, #ddd 0%, transparent 100%), radial-gradient(1px 1px at 170px 280px, #ddd 0%, transparent 100%), radial-gradient(1px 1px at 270px 260px, #ddd 0%, transparent 100%), radial-gradient(2px 2px at 380px 160px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 420px 60px, #ddd 0%, transparent 100%);
  background-size: 450px 310px;
  background-repeat: repeat;
  opacity: 0.7;
}
.stars-layer::after {
  background-image: radial-gradient(1px 1px at 15px 50px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 65px 15px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 115px 95px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 165px 45px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 215px 115px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 265px 25px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 315px 75px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 365px 135px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 415px 25px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 35px 175px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 135px 225px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 235px 195px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 335px 155px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 435px 115px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 85px 300px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 185px 330px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 285px 290px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 385px 350px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 455px 210px, #fff 0%, transparent 100%), radial-gradient(1px 1px at 500px 45px, #fff 0%, transparent 100%);
  background-size: 520px 370px;
  background-repeat: repeat;
  opacity: 0.4;
  animation: twinkle 4s ease-in-out infinite alternate;
}

.btn-glow:hover {
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.6), 0 0 50px rgba(0, 212, 255, 0.3);
}

.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(0, 212, 255, 0.2);
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.05);
}

.input-space {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0f0f0;
  transition: all 0.3s ease;
}
.input-space::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.input-space:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: #00d4ff;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.15), inset 0 0 15px rgba(0, 212, 255, 0.03);
  outline: none;
}
.input-space::-webkit-inner-spin-button, .input-space::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-space[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.input-wrapper {
  position: relative;
}

.result-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.result-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.result-value {
  transition: all 0.3s ease;
}

.info-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
.info-icon-btn:hover {
  opacity: 1;
}

.info-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.25s ease;
  margin-top: 0;
}
.info-panel.active {
  max-height: 120px;
  opacity: 1;
  margin-top: 6px;
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(10, 14, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(209, 213, 219, 0.9);
  padding: 6px 32px 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}
.lang-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #e5e7eb;
}
.lang-select:focus {
  outline: none;
  border-color: #00d4ff;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
  color: #00d4ff;
}
.lang-select option {
  background: #0a0e27;
  color: #e5e7eb;
}

.info-panel-text {
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(209, 213, 219, 0.9);
  padding: 8px 12px;
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 8px;
}
.info-panel-text--entry {
  border-color: rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.04);
}
.info-panel-text--tp {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.04);
}
.info-panel-text--sl {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.04);
}

/*# sourceMappingURL=index.css.map */