.upload-diary {
  padding: 3rem;
  background-color: #14181c;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .upload-card {
    width: 100%;
    max-width: 600px;
    background-color: #1c1f23;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    padding: 2rem;

    .title {
      margin-bottom: 1.5rem;
      font-weight: bold;
      color: #ffffff;
    }

    .username-field {
      margin-bottom: 1.5rem;

      .MuiOutlinedInput-root {
        color: #ffffff;

        fieldset {
          border-color: #00a346 !important;
        }

        &:hover fieldset {
          border-color: #00a346 !important;
        }

        &.Mui-focused fieldset {
          border-color: #1caff2 !important;
        }
      }

      .MuiInputLabel-root {
        color: #ffffff !important;
      }
    }

    .or-text {
      color: #ffffff;
      margin-bottom: 1rem;
    }

    .dropzone {
      border: 2px dashed #00a346;
      border-radius: 4px;
      padding: 2rem;
      text-align: center;
      cursor: pointer;

      &:hover {
        background-color: #1f252a;
      }

      .dropzone-icon {
        margin-bottom: 1rem;
        color: #00a346;
        font-size: 4rem;
      }

      .dropzone-text {
        margin-bottom: 1rem;
        color: #ffffff;
      }
    }

    .progress-container {
      margin-top: 1rem;
    }

    .submit-button {
      color: #fff;
      font-size: 0.8rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 2.8rem;
      display: inline-block;
      cursor: pointer;
      padding: 0 1rem;
      border: 0;
      border-radius: 4px;
      outline: none;
      background: #526e89;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #1caff2;
      }

      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }
    }
  }

  .overview-text {
    color: #456;
    margin-top: 2rem;
    padding: 1.5rem;
  }
}
