body {
  font-family: 'Inter', sans-serif;
}

.gradient-bg {
  background: rgb(226, 223, 254);
}

.card-main {
  width: 100%;
  max-width: 420px;
  min-height: 480px;
  background-color: rgb(31, 31, 31);
  border: 1px solid rgb(71, 71, 71);
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 20px;
}

@media (min-width: 768px) {
  .card-main {
    width: 420px;
  }
}

.section-transition {
  position: relative;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.section-hidden {
  display: none !important;
  opacity: 0;
  transform: translateY(20px);
}

.section-visible {
  display: flex !important;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
}

#welcomeSection {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#welcomeSection .flex-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15vh;
}

#welcomeSection .px-6 {
  margin-bottom: 20px;
}

.button-primary {
  background-color: #ab9ff2;
  color: #1f1f1f;
  height: 48px;
  border-radius: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px -5px rgba(171, 159, 242, 0.4);
}

.button-secondary {
  background-color: #3b3b3b;
  color: white;
  height: 48px;
  border-radius: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.button-secondary:hover {
  background-color: #4b4b4b;
  transform: translateY(-1px);
}

.import-option {
  background-color: #2a2a2a;
  transition: background-color 0.15s ease;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.import-option:hover {
  background-color: #3a3a3a;
}

.icon-container {
  background-color: #474747;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.progress-dot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: rgb(51, 51, 51);
}

.progress-dot.active {
  background-color: rgb(171, 159, 242);
}

.header-section {
  padding: 16px 10px;
  height: 48px;
  border-bottom: 1px solid rgb(75, 75, 75);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-button {
  color: white;
  transition: color 0.2s ease;
}

.back-button:hover {
  color: #ccc;
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

.input-container {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 4px 0px;
  color: rgb(255, 255, 255);
  background: rgb(24, 24, 24);
  border: 1px solid rgb(50, 50, 50);
  border-radius: 6px;
  height: 41px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .input-grid {
    gap: 8px;
  }

  .input-container {
    height: 41px;
    padding: 0 6px;
  }

  .input-container span {
    font-size: 12px;
    margin-right: 4px;
  }

  .input-container input {
    font-size: 12px;
  }
}